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

        /* .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>
            </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 d-flex justify-content-between align-items-center">
                                        <h6 class="mb-0">
                                            @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>

                                        {{-- Back button aligned right --}}
                                        <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));
                                        $charLimit = 410; // legacy; not used for button visibility
                                    @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">
                                                    <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
                                            @foreach ($courses as $course)
                                                <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 scope="col">Topics Covered</th>
                                                                                    @if (!empty($course->show_on_details_page_data))
                                                                                        @foreach ($course->show_on_details_page_data as $columnName)
                                                                                            <th class="cstm_center"
                                                                                                scope="col">
                                                                                                {{ $columnName }}</th>
                                                                                        @endforeach
                                                                                    @endif
                                                                                </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>
                                                                @if($course->courseTopics->count() > 0)
                                                                    @if ($course->current_fee > 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
                                                                @endif
                                                            </form>
                                                        </div>
                                                    </div>
                                                    <!-- tab 1 -->

                                                </div>

                                                @php $sr++ @endphp
                                            @endforeach
                                        </div>
                                    </div>
                                    <!-- Inner Tabs Section  -->
                                </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