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

    </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>{{ $courseCategory->name ?? '' }}</h3>
                    <p>{{ $courseCategory->sub_title_meta ?? '' }}</p>
                </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">{{ $courseCategory->name ?? '' }}
                                                Courses</span>
                                        </h6>
                                        <button type="button" class="btn btn-sm bk-btn" onclick="history.back();">
                                            ← Back
                                        </button>
                                    </div>
                                    @php
                                        $desc = $courseCategory->getTranslation('description', app()->getLocale());
                                        $cleanDesc = trim(strip_tags($desc));
                                        $charLimit = 500; // legacy; not used for button visibility
                                    @endphp
                                    <div class="therapist-content-para">
                                        <div class="left-side-content">
                                            <div class="icon-text-wrapper">
                                                <div class="icon-wrapper">
                                                    <img src="{{ asset('storage/' . $courseCategory->icon) }}"
                                                        alt="{{ $courseCategory->name ?? '' }}">
                                                </div>
                                                <h5>{{ $courseCategory->name ?? '' }} Courses</h5>
                                            </div>
                                            <div class="cut-text" id="text">
                                                <span style="font-weight: bold;font-size: 22px;">Overview</span>
                                                {{-- {!! $courseCategory->description ?? '' !!} --}}
                                                {!! $desc !!}
                                            </div>
                                            {{-- <input class="expand-btn" type="checkbox"> --}}
                                            <button class="expands-btn" onclick="toggleText()" id="toggleButton" hidden>More</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="courses-bottom-content">
                            <div class="container-fluid">
                                <div class="courses-bottom-inner">
                                    <div class="therapist-couses-wrapper">

                                        @foreach ($courseSubCategories as $index => $subCategory)
                                            <div class="therapist-course-box">
                                                <div class="image-wrapper">
                                                    <img src="{{ asset('storage/' . $subCategory->image) }}"
                                                        alt="{{ $subCategory->name ?? '' }}">
                                                </div>
                                                <h6>{{ $subCategory->name ?? '' }}</h6>
                                                <ul>
                                                    @php
                                                        $totalPracticalHours = $subCategory->courses
                                                            ->flatMap(function ($course) {
                                                                return $course->courseTopics;
                                                            })
                                                            ->sum(function ($courseTopic) {
                                                                return optional($courseTopic->topic)->practical_hours;
                                                            });
                                                    @endphp
                                                    <li><img src="{{ asset('frontend/assets/images/others/clock-icon.png') }}"
                                                            alt=""> Total
                                                        Practical Hours: {{ $totalPracticalHours }} Hrs</li>
                                                </ul>
                                                <div class="course-details-para" style="min-height: 132px;">
                                                    <p>{!! Str::limit(strip_tags($subCategory->description), 200, '...') !!}</p>
                                                </div>
                                                <div class="link-wrapper">
                                                    <a
                                                        href="{{ url('/course-category-detail/' . $courseCategory->slug . '/' . $subCategory->slug) }}">Explore
                                                        Course <span class="material-icons">
                                                            chevron_right
                                                        </span></a>
                                                </div>
                                            </div>
                                        @endforeach


                                    </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);
        });
    </script>
@endsection