@extends('frontend.maintemplate.maintemplate')
@section('title', $courseCategory->name . ' :: AgeLess Institute')

@section('content')

    <style>
        /* Read more/less: line-height based clamp (device-agnostic) */
        :root { --overview-lines: 10; --overview-line-height: 1.6em; }
        .cut-text {
            line-height: var(--overview-line-height);
            max-height: calc(var(--overview-lines) * var(--overview-line-height));
            overflow: hidden;
            position: relative;
            transition: max-height 0.25s ease;
        }
        .cut-text.expanded { max-height: none; }
        .cut-text:not(.expanded)::after {
            content: "";
            position: absolute;
            left: 0; right: 0; bottom: 0;
            height: 36px;
            /* background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); */
            pointer-events: none;
        }
        .expands-btn[hidden] { display: none !important; }

        /* Style for custom checkboxes */
        .custom-checkbox {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            width: 20px;
            height: 20px;
            border: 2px solid #ccc;
            border-radius: 50%;
            outline: none;
            cursor: pointer;
            transition: 0.3s ease-in-out;
            background-color: white;
        }

        /* Green background when checked */
        .custom-checkbox:checked {
            background-color: #3c705e;
            border-color: #3c705e;
            box-shadow: 0 0 5px rgba(0, 128, 0, 0.5);
        }

        /* Style for the label text */
        .form-check label {
            cursor: pointer;
            margin-left: 10px;
            font-size: 16px;
        }

        /* Style the wrapper around checkboxes */
        .left-wrapper,
        .right-wrapper {
            margin-bottom: 10px;
        }

        .total-price {
            margin-top: 20px;
            font-size: 20px;
            font-weight: bold;
        }

        .courses-section .tab-section-wrapper .tab-content .tab-pane .courses-content .courses-bottom-content .courses-bottom-inner .courses-data-wrapper .courses-data-inner form .bottom-details-price .price-box h6 {
            text-align: end;
        }


        .custom_ancer {
            background-color: #b2e9cf;
            text-decoration: none;
            border-radius: 29px;
            font-size: 22px;
            font-weight: bold;
            color: #377055;
            padding: 13px 24px;
            display: block;


        }

        .custom_ancer:hover {
            background-color: #b2e9cf;
            color: #377055;
            text-decoration: none;
            font-weight: bold;
            font-size: 22px;
            border-radius: 29px;
        }

        .complimentary-course {
            display: inline-block;
            margin-top: 41px;
            border: 2px solid #377055;
            /* Border color */
            border-radius: 50px;
            /* Rounded shape */
            padding: 15px 25px;
            /* Inner padding */
            background-color: #f7f7f7;
            /* Background color */
            font-size: 27px;
            /* Font size */
            font-weight: bold;
            /* Bold text */
            color: #377055;
            /* Text color */
            text-align: center;
            /* Center align */
            white-space: nowrap;
            /* Prevent text wrapping */
        }

        .breadcrubm-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .breadcrubm-wrapper h6 {
            margin: 0;
        }

        .breadcrumb {

            font-size: 20px;
            /* Adjust text size */
            color: #377055;
            /* Text color */

        }

        .breadcrumb-link {
            text-decoration: none;
            color: #377055;
            /* Same as text color */
        }

        .breadcrumb-link:hover {
            text-decoration: underline;
            /* Optional: Add underline on hover */
        }

        .breadcrumb-divider {
            font-weight: 100;
            font-size: 20px;
            margin: 0 5px;
            /* Add spacing around the › symbol */

        }

        .breadcrumb-current {
            color: #377055;
            /* Same text color */
        }

        .cstm_center {
            text-align: center !important;
        }
        .bk-btn {
            background-color: #3C705E;
            text-decoration: none;
            border-radius: 29px;
            font-size: 16px;
            font-weight: normal;
            color: #ffffff;
            padding: 6px 14px;
            display: block;
            border: 1px solid #3C705E;
        }


        .bk-btn:hover {
            color: #3C705E !important;
            border: 1px solid #3C705E; /* ✅ Updated line */
            border-color: #3C705E !important;
        }

        .courses-section .tab-section-wrapper .tab-content .tab-pane .courses-content .courses-bottom-content .courses-bottom-inner .courses-data-wrapper .courses-data-inner form .table-wrapper table tbody tr td a {
            background-color: #ffffff;
        }

        .courses-section .tab-section-wrapper .tab-content .tab-pane .courses-content .courses-bottom-content .courses-bottom-inner .courses-data-wrapper .courses-data-inner form .table-wrapper table tbody tr td a:hover {
            background-color: #E1F0E9;
        }

        .courses-section .tab-section-wrapper .tab-content .tab-pane .courses-content .courses-bottom-content .courses-bottom-inner .courses-data-wrapper .courses-data-inner form .table-wrapper table tbody tr td .left-right-outer-wrapper .left-right-inner-wrapper {
            width: 95% !important;
            margin: auto !important;
            justify-content:normal !important;
            gap: 20px !important;
        }

        .left-right-inner-wrapper:only-child,
        .left-right-inner-wrapper > :only-child {
            margin: 0 auto;
        }

        /* .courses-section .tab-section-wrapper .tab-content .tab-pane .courses-content .courses-bottom-content .courses-bottom-inner .courses-data-wrapper .courses-data-inner form .bottom-details-price {
            max-width: 700px !important;
        }

        .courses-section .tab-section-wrapper .tab-content .tab-pane .courses-content .courses-bottom-content .courses-bottom-inner .courses-data-wrapper .courses-data-inner form .bottom-details-price .price-box h6 {
            margin-right: auto !important;
            width: 232px !important;
        } */

    </style>

    <div class="banner-with-text-section" style="background-image: url({{ asset('storage/' . $courseCategory->image) }});">
        <div class="banner-text-bg">
            <div class="container-fluid">
                <div class="banner-title-tab-wrapper">
                    <h3>{{ $courseSubCategory->name ?? '' }}</h3>
                    @if (!empty($courseSubCategory->sub_title_meta))
                        <span>{{ $courseSubCategory->sub_title_meta ?? '' }}</span>
                    @endif
                    <div class="tab-button-wrapper">
                        <div class="tab-button-inner">
                            <ul class="nav nav-pills" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-home" type="button" role="tab"
                                        aria-controls="pills-home" aria-selected="true">Packages Courses</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-profile" type="button" role="tab"
                                        aria-controls="pills-profile" aria-selected="false">Customise Your Course</button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Banner Section  -->

    @php
        $desc = $courseSubCategory->getTranslation('description', app()->getLocale());
        $cleanDesc = trim(strip_tags($desc));
        $charLimit = 410; // kept for compatibility, not used for button visibility
    @endphp

    <!-- Courses  section  -->
    <div class="courses-section">
        <div class="tab-section-wrapper">
            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"
                    tabindex="0">
                    <!--  Courses Content  -->
                    <div class="courses-content">
                        <div class="overview-content">
                            <div class="container-fluid">
                                <div class="overview-inner">
                                    <div class="breadcrubm-wrapper breadcrumb">
                                        <h6>
                                            @if (!empty($breadcrumbs))
                                                @foreach ($breadcrumbs as $index => $breadcrumb)
                                                    @if (!empty($breadcrumb['url']) && $index !== count($breadcrumbs) - 1)
                                                        <a class="breadcrumb-link" href="{{ $breadcrumb['url'] }}">
                                                            {{ $breadcrumb['text'] }}
                                                        </a>
                                                        <span class="breadcrumb-divider">›</span>
                                                    @else
                                                        <span class="breadcrumb-current">{{ $breadcrumb['text'] }}</span>
                                                    @endif
                                                @endforeach
                                            @endif
                                        </h6>
                                        <button type="button" class="btn btn-sm bk-btn" onclick="history.back();">
                                            ← Back
                                        </button>
                                    </div>


                                    <div class="content-para">
                                        <div class="left-side-content">
                                            <div class="cut-text" id="text1">
                                                <span style="font-weight: bold;font-size: 22px;">Overview</span>
                                                {{-- {!! $courseSubCategory->description ?? '' !!} --}}
                                                {!! $desc !!}
                                            </div>
                                            <button class="expands-btn" onclick="toggleText('text1', 'toggleButton1')" id="toggleButton1" hidden>More</button>
                                        </div>
                                        <div class="right-side-box">
                                            <div class="inner-box">
                                                <h5>Foundation Course</h5>
                                                <p>Complimentary with this course package. Includes essential knowledge in
                                                    anatomy, skincare
                                                    ingredients, and hygiene protocols.</p>
                                                <div class="link-wrapper">
                                                    <a href="javascript:void(0);">Complimentary</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="courses-bottom-content">
                            <div class="container-fluid">
                                <div class="courses-bottom-inner">
                                    <!-- Inner Tabs Section  -->
                                    <div class="inner-course-tab-section">
                                        <ul class="nav nav-pills" id="pills-tab-inner" role="tablist">
                                            @php $sr = 1 @endphp
                                            @php $precticalCourseId = "" @endphp
                                            @foreach ($courses as $course)
                                                @if($course->course_type == "practical")
                                                    @php $precticalCourseId = $course->id;@endphp
                                                @endif
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link {{ $sr == 1 ? 'active' : '' }}"
                                                        id="pills-{{ $course->id }}-inner-tab"
                                                        data-course-id="{{ $course->id }}" data-bs-toggle="pill"
                                                        data-bs-target="#pills-{{ $course->id }}-inner" type="button"
                                                        role="tab" aria-controls="pills-{{ $course->id }}-inner"
                                                        aria-selected="true">
                                                        <div class="inner-tabs-button-wrapper">
                                                            <div class="icon-course-price-wrapper">
                                                                <div class="icon-wrapper">
                                                                    <img src="{{ asset('frontend/assets/images/others/book-price.png') }}"
                                                                        alt="">
                                                                </div>
                                                                <div class="right-title-price-wrapper">
                                                                    <h6>{{ $course->name }}</h6>
                                                                    {{-- <h4>₹
                                                                        {{ number_format($course->current_fee, 0, '.', ',') }}
                                                                    </h4> --}}
                                                                </div>
                                                            </div>
                                                            <div class="icon-title-wrapper">
                                                                <ul>
                                                                    @if ($course->course_type == 'practical' && in_array('Practical Hours', $course->show_on_details_page_data))
                                                                        <li class="bold-font"><img
                                                                                src="{{ asset('frontend/assets/images/others/clock-icon.png') }}"
                                                                                alt=""> Total Practical Hours:
                                                                            @php
                                                                                $totalPracticalHours = $course->courseTopics->sum(
                                                                                    function ($courseTopic) {
                                                                                        return optional(
                                                                                            $courseTopic->topic,
                                                                                        )->practical_hours;
                                                                                    },
                                                                                );
                                                                            @endphp
                                                                            {{ $totalPracticalHours }} Hrs
                                                                        </li>
                                                                    @endif
                                                                    @if (!empty($course->tags_with_icons))
                                                                        @foreach ($course->tags_with_icons as $tag)
                                                                            <li><img src="{{ $tag['icon'] }}"
                                                                                    alt="{{ $tag['name'] }}">
                                                                                {{ $tag['name'] }}
                                                                            </li>
                                                                        @endforeach
                                                                    @endif

                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </button>
                                                </li>
                                                @php $sr++ @endphp
                                            @endforeach

                                        </ul>
                                        <div class="tab-content" id="pills-tabContent-inner">

                                            @php $sr = 1 @endphp
                                            @php $topics_price = []; @endphp
                                            @foreach ($courses as $course)
                                                <div class="tab-pane fade {{ $sr == 1 ? 'show active' : '' }}"
                                                    id="pills-{{ $course->id }}-inner" role="tabpanel"
                                                    aria-labelledby="pills-{{ $course->id }}-inner-tab">

                                                    <!-- tab 1 -->
                                                    <div class="courses-data-wrapper">
                                                        <div class="courses-data-inner">
                                                            <form action="{{ route('cart.store') }}" method="POST">
                                                                @csrf
                                                                <input type="hidden" name="course_id"
                                                                    value="{{ $course->id ?? 'N/A' }}" />
                                                                <div class="table-wrapper">
                                                                    <div class="table-responsive">
                                                                        <table class="table table-bordered">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th style="max-width: 350px;"
                                                                                        scope="col">Topics Covered</th>
                                                                                    @if (!empty($course->show_on_details_page_data))
                                                                                        @foreach ($course->show_on_details_page_data as $columnName)
                                                                                            <th scope="col"
                                                                                                class="cstm_center">
                                                                                                {{ $columnName }}</th>
                                                                                        @endforeach
                                                                                    @endif
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                @foreach ($course->courseTopics->sortBy('sequence_number') as $courseTopic)
                                                                                    @php
                                                                                        $types = [];
                                                                                    @endphp

                                                                                    <tr>
                                                                                        <td style="max-width: 350px;">
                                                                                            @if (!empty($courseTopic->topic->url))
                                                                                                <a href="{{ $courseTopic->topic->url }}?rel={{ base64_encode($courseSubCategory->id) }}"
                                                                                                    target="_blank"
                                                                                                    style="display: inline-block; max-width: none;">{{ $courseTopic->topic->title }}
                                                                                                    <img src="{{ asset('frontend/assets/images/others/trichology-icon.png') }}"
                                                                                                        alt="{{ $courseTopic->topic->title }}"></a>
                                                                                            @else
                                                                                                {{ $courseTopic->topic->title }}
                                                                                            @endif
                                                                                        </td>
                                                                                        @if (in_array('Level', $course->show_on_details_page_data))
                                                                                            <td class="cstm_center">
                                                                                                {{ ucwords($courseTopic->level) }}

                                                                                            </td>
                                                                                        @endif
                                                                                        @if (in_array('Type', $course->show_on_details_page_data))
                                                                                            <td class="cstm_center">
                                                                                                @php
                                                                                                    $types = is_array(
                                                                                                        $courseTopic->types,
                                                                                                    )
                                                                                                        ? $courseTopic->types
                                                                                                        : json_decode(
                                                                                                            $courseTopic->types,
                                                                                                            true,
                                                                                                        );
                                                                                                    $typeStr = $types
                                                                                                        ? implode(
                                                                                                            ' + ',
                                                                                                            $types,
                                                                                                        )
                                                                                                        : 'N/A';

                                                                                                @endphp
                                                                                                {{ ucwords($typeStr) }}

                                                                                            </td>
                                                                                        @endif
                                                                                        @if (in_array('Practical Hours', $course->show_on_details_page_data))
                                                                                            <td class="cstm_center">
                                                                                                {{ !empty($courseTopic->topic->practical_hours) && $courseTopic->topic->practical_hours != 0
                                                                                                    ? $courseTopic->topic->practical_hours . ' Hrs'
                                                                                                    : '-' }}
                                                                                            </td>
                                                                                        @endif
                                                                                        @if (in_array('Price', $course->show_on_details_page_data))
                                                                                            <td class="cstm_center">
                                                                                                @php
                                                                                                    $price = 0;
                                                                                                    if ($types) {
                                                                                                        foreach ($types as $type) {
                                                                                                            if ($type === 'theory') {
                                                                                                                $price += $courseTopic->theory_price;
                                                                                                                $topics_price[$courseTopic->course_id][$courseTopic->topic_id][$type] = $price;
                                                                                                            }
                                                                                                            if ($type === 'practical') {
                                                                                                                $price += $courseTopic->practical_price;
                                                                                                                $topics_price[$courseTopic->course_id][$courseTopic->topic_id][$type] = $price;
                                                                                                            }
                                                                                                            if($type === 'demo'){
                                                                                                                $price += $courseTopic->demo_price;
                                                                                                                $topics_price[$courseTopic->course_id][$courseTopic->topic_id][$type] = $price;
                                                                                                            }
                                                                                                            // if($type === 'practical_only'){
                                                                                                            //     $price += $courseTopic->practical_only_price;
                                                                                                            //     $topics_price[$courseTopic->course_id][$courseTopic->topic_id][$type] = $price;
                                                                                                            // }
                                                                                                        }
                                                                                                    }
                                                                                                    // $topics_price[
                                                                                                    //     $courseTopic->topic_id
                                                                                                    // ][$type] = $price;
                                                                                                @endphp
                                                                                                @if ($price > 0)
                                                                                                    ₹
                                                                                                    {{ number_format($price) }}
                                                                                                @else
                                                                                                    <a href="javascript:void(0);"
                                                                                                        style="display: inline-block; max-width: none;">Complimentary</a>
                                                                                                @endif

                                                                                            </td>
                                                                                        @endif
                                                                                    </tr>
                                                                                @endforeach

                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                                @if($course->courseTopics->count() > 0)
                                                                    <div class="bottom-details-price">
                                                                        @if($course->discounted_price != null)
                                                                            <div class="price-box">
                                                                                <h5>Individual Course Price</h5>
                                                                                <h6>₹
                                                                                    {{ number_format($course->fees_MRP, 0, '.', ',') }}
                                                                                </h6>
                                                                            </div>
                                                                            <div class="price-box discount">
                                                                                <h5>Discount</h5>
                                                                                <h6>-₹ {{ number_format($course->fees_MRP - $course->current_fee) }}</h6>
                                                                            </div>
                                                                        @endif
                                                                            <div class="price-box">
                                                                                <h5>Total Package Price </h5>
                                                                                <h6>₹
                                                                                    {{ number_format($course->current_fee, 0, '.', ',') }}
                                                                                </h6>
                                                                            </div>
                                                                            <div class="submit-wrapper">
                                                                                <button class="submit_btn"><img
                                                                                        src="{{ asset('frontend/assets/images/others/add-cart-img.png') }}"
                                                                                        alt="">
                                                                                    Add to Cart</button>
                                                                            </div>
                                                                    </div>
                                                                @endif
                                                            </form>
                                                        </div>
                                                    </div>
                                                    <!-- tab 1 -->

                                                </div>
                                                @php $sr++ @endphp
                                            @endforeach
                                        </div>
                                    </div>
                                    <!-- Inner Tabs Section  -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--  Courses Content  -->
                </div>

                <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"
                    tabindex="0">
                    <!--  Courses Content  -->
                    <div class="courses-content">
                        <div class="overview-content">
                            <div class="container-fluid">
                                <div class="overview-inner">
                                    <div class="breadcrubm-wrapper">
                                        <h6><a class="breadcrumb-link"
                                                href="{{ url('course-category-details/' . $courseCategory->slug) }}">{{ $courseCategory->name ?? '' }}</a>
                                            <span class="breadcrumb-divider">›</span>
                                            <span class="breadcrumb-current">{{ $courseSubCategory->name ?? '' }}</span>
                                        </h6>
                                        <button type="button" class="btn btn-sm bk-btn" onclick="history.back();">
                                            ← Back
                                        </button>
                                    </div>

                                    <div class="content-para">
                                        <div class="left-side-content">
                                            <div class="cut-text" id="text2">
                                                <span style="font-weight: bold;font-size: 22px;">Overview</span>
                                                {{-- {!! $courseSubCategory->description ?? '' !!} --}}
                                                {!! $desc !!}
                                            </div>
                                            <button class="expands-btn" onclick="toggleText('text2', 'toggleButton2')" id="toggleButton2" hidden>More</button>
                                        </div>
                                        <div class="right-side-box">
                                            <div class="inner-box">
                                                <h5>Foundation Course</h5>
                                                <p>Complimentary with this course package. Includes essential knowledge in
                                                    anatomy, skincare
                                                    ingredients, and hygiene protocols.</p>
                                                <div class="link-wrapper">
                                                    <a href="javascript:void(0);">Complimentary</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="middle-text-wrapper">
                                        <p>
                                            @if (!empty($courseSubCategory->sub_title))
                                                <span>{{ $courseSubCategory->sub_title ?? '' }}</span>
                                            @endif
                                        </p>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="courses-bottom-content">
                            <div class="container-fluid">
                                <div class="courses-bottom-inner">
                                    <div class="courses-data-wrapper">
                                        <div class="courses-data-inner">
                                            <form action="{{ route('cart.store') }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="status" value="1">
                                                <input type="hidden" name="course_id"
                                                    value="{{ !empty($precticalCourseId)?$precticalCourseId:$course->id ?? 'N/A' }}" />
                                                <input type="hidden" name="selected_topics" id="selectedTopics"
                                                    value="">
                                                <input type="hidden" name="total_price" id="totalPrice" value="">
                                                <div class="table-wrapper">
                                                    <div class="table-responsive">
                                                        <table class="table table-bordered">
                                                            <thead>
                                                                <tr>
                                                                    <th scope="col" style="max-width: 350px;">Topics
                                                                        Covered</th>
                                                                    <th scope="col" class="cstm_center">Level</th>
                                                                    <th scope="col" class="cstm_center">Type</th>
                                                                    <th scope="col" class="cstm_center">Practical Hours
                                                                    </th>
                                                                    <th scope="col" class="cstm_center">Price</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody class="table-group-divider">
                                                                @php
                                                                    $displayedTopics = [];
                                                                @endphp
                                                                @foreach ($courses as $course)
                                                                    @foreach ($course->courseTopics->sortBy('sequence_number') as $courseTopic)
                                                                        {{-- @foreach ($course->courseTopics as $courseTopic) --}}
                                                                        @php
                                                                            $topicId = $courseTopic->topic->id;
                                                                        @endphp
                                                                        @if (!in_array($topicId, $displayedTopics))
                                                                            <tr>
                                                                                <td style="max-width: 350px;">
                                                                                    @if (!empty($courseTopic->topic->url))
                                                                                        <a href="{{ $courseTopic->topic->url }}"
                                                                                            target="_blank"
                                                                                            style="display: inline-block; max-width: none;">
                                                                                            {{ $courseTopic->topic->title }}
                                                                                            <img src="{{ asset('frontend/assets/images/others/trichology-icon.png') }}"
                                                                                                alt="{{ $courseTopic->topic->title }}">
                                                                                        </a>
                                                                                    @else
                                                                                        {{ $courseTopic->topic->title }}
                                                                                    @endif
                                                                                </td>
                                                                                <td class="cstm_center">{{ ucwords($courseTopic->level) }}</td>
                                                                                <td class="cstm_center">
                                                                                    <div class="left-right-outer-wrapper">
                                                                                        <div class="left-right-inner-wrapper">
                                                                                            @php
                                                                                                $types = is_array(
                                                                                                    $courseTopic->types,
                                                                                                )
                                                                                                    ? $courseTopic->types
                                                                                                    : json_decode(
                                                                                                        $courseTopic->types,
                                                                                                        true,
                                                                                                    );
                                                                                                $typeStr = $types
                                                                                                    ? implode(
                                                                                                        ' + ',
                                                                                                        $types,
                                                                                                    )
                                                                                                    : 'N/A';
                                                                                            @endphp

                                                                                            @foreach ($types as $srk => $type)
                                                                                                <div
                                                                                                    class="{{ $srk == 0 ? 'left-wrapper' : 'right-wrapper' }}">
                                                                                                    <div
                                                                                                        class="form-check">
                                                                                                        <input
                                                                                                            class="form-check-input"
                                                                                                            type="checkbox"
                                                                                                            name="topic[{{ $courseTopic->topic_id }}][]"
                                                                                                            value="{{ $type }}"
                                                                                                            data-theory-price="{{ $topics_price[$courseTopic->course_id][$courseTopic->topic_id]['theory'] ?? 0 }}"
                                                                                                            data-practical-price="{{ $topics_price[$courseTopic->course_id][$courseTopic->topic_id]['practical'] ?? 0 }}"
                                                                                                            data-demo-price="{{ $topics_price[$courseTopic->course_id][$courseTopic->topic_id]['demo'] ?? 0 }}"
                                                                                                            {{-- data-practicalonly-price="{{ $courseTopic->practical_only_price }}" --}}
                                                                                                            {{-- data-theory-price="{{ $courseTopic->theory_price }}"
                                                                                                          data-practical-price="{{ $courseTopic->practical_price }}" --}}
                                                                                                            id="checkbox{{ $courseTopic->topic_id . $srk }}" @if($courseTopic->topic->title === 'Advanced Foundation Course') checked disabled @endif>

                                                                                                        <label
                                                                                                            class="form-check-label"
                                                                                                            for="checkbox{{ $courseTopic->topic_id . $srk }}">
                                                                                                            @if ($type == 'theory')
                                                                                                                {{ ucwords($type) }}
                                                                                                                Only
                                                                                                            @elseif ($type == 'demo')
                                                                                                                Theory +
                                                                                                                Demo
                                                                                                            {{-- @elseif ($type == 'practical_only')
                                                                                                                Practical Only --}}
                                                                                                            @else
                                                                                                                Theory +
                                                                                                                Practical
                                                                                                            @endif
                                                                                                        </label>



                                                                                                    </div>
                                                                                                </div>
                                                                                            @endforeach
                                                                                        </div>
                                                                                    </div>
                                                                                </td>
                                                                                <td class="cstm_center">
                                                                                    @if ($typeStr == 'theory')
                                                                                        -
                                                                                        @else{{ $courseTopic->topic->practical_hours }}
                                                                                        Hrs
                                                                                    @endif
                                                                                </td>
                                                                                <td class="cstm_center">
                                                                                    @php
                                                                                        $price = 0;
                                                                                        if ($types) {
                                                                                            foreach ($types as $type) {
                                                                                                if (
                                                                                                    $type === 'theory'
                                                                                                ) {
                                                                                                    $price +=
                                                                                                        $courseTopic->theory_price;
                                                                                                }
                                                                                                if (
                                                                                                    $type ===
                                                                                                    'practical'
                                                                                                ) {
                                                                                                    $price +=
                                                                                                        $courseTopic->practical_price;
                                                                                                }
                                                                                                if(
                                                                                                    $type ===
                                                                                                    'demo'
                                                                                                ){
                                                                                                    $price +=
                                                                                                        $courseTopic->demo_price;
                                                                                                }
                                                                                                // if(
                                                                                                //     $type ===
                                                                                                //     'practical_only'
                                                                                                // ){
                                                                                                //     $price +=
                                                                                                //         $courseTopic->practical_only_price;
                                                                                                // }
                                                                                            }
                                                                                        }
                                                                                    @endphp
                                                                                    @if ($price > 0)
                                                                                        ₹ {{ number_format($price) }}
                                                                                    @else
                                                                                        <a href="javascript:void(0);"
                                                                                            style="display: inline-block; max-width: none;">Complimentary</a>
                                                                                    @endif
                                                                                </td>
                                                                            </tr>
                                                                            @php
                                                                                $displayedTopics[] = $topicId;
                                                                            @endphp
                                                                        @endif
                                                                    @endforeach
                                                                @endforeach

                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                                @if ($courses->sum(fn($c) => $c->courseTopics->count()) > 0)
                                                    <div class="bottom-details-price">
                                                        <div class="price-box">
                                                            <h5>Total Price</h5>
                                                            <h6 id="final-price">₹ 0</h6>
                                                        </div>
                                                        <div class="submit-wrapper">
                                                            <button class="submit_btn"><img
                                                                    src="{{ asset('frontend/assets/images/others/add-cart-img.png') }}"
                                                                    alt=""> Add to
                                                                Cart</button>
                                                        </div>
                                                    </div>
                                                @endif
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--  Courses Content  -->
                </div>
            </div>
        </div>
    </div>
    <!-- Courses  section  -->

    <script>
        // Unhide button only when the text actually overflows the clamp height
        function measureOverflow(el, btn) {
            if (!el || !btn) return;
            const wasExpanded = el.classList.contains('expanded');
            if (wasExpanded) el.classList.remove('expanded');
            // Force reflow before measuring
            void el.offsetHeight;
            const isOverflowing = el.scrollHeight > el.clientHeight + 1;
            btn.hidden = !isOverflowing;
            if (wasExpanded) el.classList.add('expanded');
        }

        function toggleText(textId, buttonId) {
            const text = document.getElementById(textId);
            const button = document.getElementById(buttonId);
            if (!text || !button) return;
            text.classList.toggle('expanded');
            button.textContent = text.classList.contains('expanded') ? 'Less' : 'More';
            // Re-measure after toggle to keep button visibility correct
            measureOverflow(text, button);
        }

        function initExpandable(textId, buttonId) {
            const el = document.getElementById(textId);
            const btn = document.getElementById(buttonId);
            if (!el || !btn) return;

            const measure = () => measureOverflow(el, btn);

            // Initial and on resize
            measure();
            window.addEventListener('resize', measure);

            // Recalculate when Bootstrap tabs change (outer and inner pills)
            document.querySelectorAll('[data-bs-toggle="pill"], [data-bs-toggle="tab"]').forEach(function(tabBtn) {
                tabBtn.addEventListener('shown.bs.tab', measure);
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            initExpandable('text1', 'toggleButton1');
            initExpandable('text2', 'toggleButton2');
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const checkboxes = document.querySelectorAll('.form-check-input');
            const selectedTopicsInput = document.getElementById('selectedTopics');
            const totalPriceInput = document.getElementById('totalPrice');
            const finalPriceElement = document.getElementById('final-price');

            // Function to update the total price and individual row prices
            function updatePrices() {
                let totalPrice = 0;
                let selectedTopics = new Set();

                checkboxes.forEach(function(checkbox) {
                    const row = checkbox.closest('tr'); // Get the parent row
                    const priceCell = row.querySelector('td:last-child'); // Last cell for price

                    if (checkbox.checked) {
                        const topicId = checkbox.name.match(/\d+/)[0]; // Extract topic ID
                        selectedTopics.add(topicId);

                        // Get the correct price based on the selected checkbox type
                        let price = 0;
                        let priceAttr = 0;

                        // if (checkbox.value === 'theory') {
                        //     priceAttr = checkbox.getAttribute('data-theory-price');
                        // } else if (checkbox.value === 'practical') {
                        //     priceAttr = checkbox.getAttribute('data-practical-price');
                        // } else if (checkbox.value === 'demo') {
                        //     priceAttr = checkbox.getAttribute('data-demo-price');
                        // }

                        if (checkbox.value === 'theory') {
                            price = parseInt(checkbox.getAttribute('data-theory-price')) || 0;
                        } else if (checkbox.value === 'practical') {
                            price = parseInt(checkbox.getAttribute('data-practical-price')) || 0;
                        }else if (checkbox.value === 'demo') {
                            price = parseInt(checkbox.getAttribute('data-demo-price')) || 0;
                        }
                        // else if(checkbox.value === 'practical_only') {
                        //     price = parseInt(checkbox.getAttribute('data-practicalonly-price')) || 0;
                        // }

                        // price = parseFloat(priceAttr) || 0;

                        // Update the price in the table row
                        if (price > 0) {
                            priceCell.innerHTML = `₹ ${price.toLocaleString()}`;
                        } else {
                            priceCell.innerHTML =
                                `<a href="#" style="display: inline-block; max-width: none;">Complimentary</a>`;
                        }

                        // Add to total price
                        totalPrice += price;
                    }
                });

                // Update selected topics input
                selectedTopicsInput.value = Array.from(selectedTopics).join(',');

                // Update total price display
                totalPriceInput.value = totalPrice;
                if (finalPriceElement) {
                    finalPriceElement.textContent = `₹ ${totalPrice.toLocaleString()}`;
                }
            }

            // Function to handle mutually exclusive checkboxes
            function handleExclusiveSelection(event) {
                const currentCheckbox = event.target;
                const topicId = currentCheckbox.name;

                // Uncheck other checkboxes with the same topicId
                checkboxes.forEach(function(checkbox) {
                    if (checkbox.name === topicId && checkbox !== currentCheckbox) {
                        checkbox.checked = false;
                    }
                });

                updatePrices();
            }

            // Set practical as default selected and update prices
            checkboxes.forEach(function(checkbox) {
                checkboxes.forEach(function(checkbox) {

                    if (checkbox.value === 'practical') {
                        checkbox.checked = true;
                    }

                    if(checkbox.value === 'demo') {
                        checkbox.checked = true;
                    }

                    checkbox.addEventListener('change', handleExclusiveSelection);
                });
            });

            // Initial price update (defaults to practical selection)
            updatePrices();
        });
    </script>
@endsection