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

@section('content')

    <style>
        /* Read more/less: line-based clamp for overview */
        :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; }
        .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;
        }

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

        .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;
        }

    </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>
            </div>
        </div>
    </div>
    <!-- Banner Section  -->

    <!-- 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">
                                        <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>
                                    @php
                                        $desc = $courseSubCategory->getTranslation('description', app()->getLocale());
                                        $cleanDesc = trim(strip_tags($desc));
                                    @endphp
                                    <div class="content-para">
                                        <div class="left-side-content">
                                            <div class="cut-text" id="text">
                                                <span style="font-weight: bold;font-size: 22px;">Overview</span>
                                                {{-- {!! $courseSubCategory->description ?? '' !!} --}}
                                                {!! $desc !!}
                                            </div>
                                            {{-- <input class="expand-btn" type="checkbox"> --}}
                                            <button class="expands-btn" onclick="toggleText()" id="toggleButton" 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 complementary-active">
                                                    <a href="javascript:void(0);">Complimentary Course</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @php
                            $course = $courses[0] ?? [];
                        @endphp
                        <div class="courses-bottom-content">
                            <div class="container-fluid">
                                <div class="courses-bottom-inner">
                                    <!-- Inner Tabs Section  -->
                                    <div class="single-course-tab-section">
                                        <ul class="nav nav-pills" id="pills-tab-inner" role="tablist">
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link active" id="pills-home-inner-tab"
                                                    data-bs-toggle="pill" data-bs-target="#pills-home-inner" type="button"
                                                    role="tab" aria-controls="pills-home-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/course-light-icon.png') }}"
                                                                    alt="">
                                                            </div>
                                                            <div class="right-title-price-wrapper">
                                                                <h6>{{ $course->name }}<br /> Course</h6>
                                                            </div>
                                                        </div>
                                                        <div class="icon-title-wrapper">
                                                            <h5>{{ $courseSubCategory->sub_title ?? '' }}</h5>
                                                            <ul>
                                                                @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>
                                        </ul>
                                        <div class="tab-content" id="pills-tabContent-inner">
                                            <div class="tab-pane fade show active" id="pills-home-inner" role="tabpanel"
                                                aria-labelledby="pills-home-inner-tab">

                                                <!-- tab 1 -->
                                                <div class="courses-data-wrapper">
                                                    <div class="courses-data-inner">
                                                        <form action="">
                                                            <div class="table-wrapper">
                                                                <div class="table-responsive">
                                                                    <table class="table table-bordered">
                                                                        <thead>
                                                                            <tr>
                                                                                <th scope="col">Topics Covered</th>
                                                                                @foreach ($course->show_on_details_page_data as $columnName)
                                                                                    <th class="cstm_center" scope="col">
                                                                                        {{ $columnName }}</th>
                                                                                @endforeach
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                            @foreach ($course->courseTopics->sortBy('sequence_number') as $courseTopic)

                                                                                @php
                                                                                    $types = [];
                                                                                @endphp

                                                                                <tr>
                                                                                    <td>
                                                                                        @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>
                                                                                    @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;
                                                                                                        }
                                                                                                        if (
                                                                                                            $type ===
                                                                                                            'practical'
                                                                                                        ) {
                                                                                                            $price +=
                                                                                                                $courseTopic->practical_price;
                                                                                                        }
                                                                                                        if($type === 'demo'){
                                                                                                            $price += $courseTopic->demo_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>
                                                        </form>
                                                    </div>
                                                </div>
                                                <!-- tab 1 -->

                                            </div>
                                        </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>Doctors &gt; Advanced Techniques in Aesthetic Cosmetology</h6>
                                    </div>

                                    <div class="content-para">
                                        <div class="left-side-content">
                                            <p>
                                                <span>Overview</span>
                                                This Package Course offers an advanced-level training in cosmetic
                                                dermatology, combining
                                                essential principles with hands-on expertise. Key subjects areas under
                                                Doctor Courses are
                                                Trichology, Laser Hair Reduction (LHR), Body Contouring, and Others which
                                                consists of Emergency
                                                Aid- focusing on reactions to treatments, First Aid, and Biopsies (skin and
                                                scalp). The
                                                foundation course of this course covers crucial topics in Anatomy, Skincare
                                                Ingredients, and
                                                Hygiene setting a strong base that is required alongside other specialized
                                                courses. Designed for
                                                professionals, this course offer the flexibility to choose between Theory
                                                only or Theory +
                                                Practical learning, ensuring a comprehensive understanding of advanced
                                                aesthetic treatments.
                                            </p>
                                            <input class="expand-btn" type="checkbox">
                                        </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>You can customise this course Advanced Techniques in Aesthetic Cosmetology as per
                                            your
                                            requirements and the goals you want you to achieve.</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="">
                                                <div class="table-wrapper">
                                                    <div class="table-responsive">
                                                        <table class="table table-bordered">
                                                            <thead>
                                                                <tr>
                                                                    <th scope="col">Topics Covered</th>
                                                                    <th scope="col">Level</th>
                                                                    <th scope="col">Type</th>
                                                                    <th scope="col">Practical Hours</th>
                                                                    <th scope="col">Price</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody class="table-group-divider">
                                                                <tr>
                                                                    <td>Foundation Course - Anatomy<br /> + Skincare
                                                                        Ingredient + Hygiene</td>
                                                                    <td>Advanced</td>
                                                                    <td>
                                                                        <div class="left-right-outer-wrapper">
                                                                            <div class="left-right-inner-wrapper">
                                                                                <div class="left-wrapper">
                                                                                    <div class="form-check">
                                                                                        <input class="form-check-input"
                                                                                            type="checkbox"
                                                                                            value="Theory Only"
                                                                                            id="theory1">
                                                                                        <label class="form-check-label"
                                                                                            for="theory1">
                                                                                            Theory Only
                                                                                        </label>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="right-wrapper">

                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td>-</td>
                                                                    <td><a href="javascript:void(0);">Complimentary</a>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <a href="#">Trichology <img
                                                                                src="{{ asset('frontend/assets/images/others/trichology-icon.png') }}"
                                                                                alt=""></a>
                                                                        <!-- <div class="left-right-outer-wrapper">
                                                                  <div class="left-right-inner-wrapper">
                                                                    <div class="left-wrapper">
                                                                      <a href="#">Trichology <img src="{{ asset('frontend/assets/images/others/trichology-icon.png') }}"
                                                                          alt=""></a>
                                                                    </div>
                                                                  </div>
                                                                </div> -->
                                                                    </td>
                                                                    <td>Advanced</td>
                                                                    <td>
                                                                        <div class="left-right-outer-wrapper">
                                                                            <div class="left-right-inner-wrapper">
                                                                                <div class="left-wrapper">
                                                                                    <div class="form-check">
                                                                                        <input class="form-check-input"
                                                                                            type="checkbox"
                                                                                            value="Theory Only"
                                                                                            id="theory2">
                                                                                        <label class="form-check-label"
                                                                                            for="theory2">
                                                                                            Theory Only
                                                                                        </label>

                                                                                    </div>
                                                                                </div>
                                                                                <div class="right-wrapper">
                                                                                    <div class="form-check">
                                                                                        <input class="form-check-input"
                                                                                            type="checkbox"
                                                                                            value="Theory + Practical"
                                                                                            id="theory3">
                                                                                        <label class="form-check-label"
                                                                                            for="theory3">
                                                                                            Theory + Practical
                                                                                        </label>

                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td>12 Hrs</td>
                                                                    <td>₹ 30,000.00</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                                <div class="bottom-details-price">
                                                    <div class="price-box">
                                                        <h5>Total Price</h5>
                                                        <h6>₹ 149,999</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>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--  Courses Content  -->
                </div>
            </div>
        </div>
    </div>
    <!-- Courses  section  -->

    <script>
        function measureOverflow(el, btn) {
            if (!el || !btn) return;
            const wasExpanded = el.classList.contains('expanded');
            if (wasExpanded) el.classList.remove('expanded');
            void el.offsetHeight;
            const isOverflowing = el.scrollHeight > el.clientHeight + 1;
            btn.hidden = !isOverflowing;
            if (wasExpanded) el.classList.add('expanded');
        }

        function toggleText() {
            const text = document.getElementById('text');
            const button = document.getElementById('toggleButton');
            if (!text || !button) return;
            text.classList.toggle('expanded');
            button.textContent = text.classList.contains('expanded') ? 'Less' : 'More';
            measureOverflow(text, button);
        }

        document.addEventListener('DOMContentLoaded', function() {
            const text = document.getElementById('text');
            const button = document.getElementById('toggleButton');
            const measure = () => measureOverflow(text, button);
            measure();
            window.addEventListener('resize', measure);
            document.querySelectorAll('[data-bs-toggle="pill"], [data-bs-toggle="tab"]').forEach(function(tabBtn) {
                tabBtn.addEventListener('shown.bs.tab', measure);
            });
        });
    </script>
@endsection