@extends('frontend.layouts.app')

@section('title', $academicLevel->name_en)

@php
    use App\Helpers\Helper;

    $isEn = app()->getLocale() == 'en';
    $name = $isEn ? $academicLevel->name_en : (isset($academicLevel->name_np) ? $academicLevel->name_np : $academicLevel->name_en);
    $fallbackImage = asset('assets/frontend/images/default-image.png');
@endphp

@section('content')
    {{-- Hero Section --}}
    @include('frontend.partials.hero', [
        'mainHeading' => $name,
        'subHeading' => $isEn
            ? $academicLevel->tagline_en
            : (isset($academicLevel->tagline_np)
                ? $academicLevel->tagline_np
                : $academicLevel->tagline_en),
        'breadcrumb1' => [
            'name' => __('route.home'),
            'route' => route('home'),
        ],
        'breadcrumb2' => [
            'name' => __('route.academic_levels'),
            'route' => route('academics'),
        ],
        'breadcrumb3' => [
            'name' => $name,
            'route' => route('academics-detail', $academicLevel->slug),
            'class' => 'text-gray-400',
        ],
        'breadcrumb4' => null,
    ])

    {{-- Intro + campus photos (shared with the other academic levels) --}}
    @include('frontend.partials.academic-level-intro')

    {{-- ============ At a glance ============ --}}
    <section class="container-page pb-10 md:pb-14">
        <dl class="grid grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="rounded-2xl bg-white border border-gray-200 p-5 shadow-sm">
                <dt class="text-xs font-semibold uppercase tracking-wide text-gray-500">
                    {{ $isEn ? 'Classes' : 'कक्षाहरू' }}</dt>
                <dd class="text-3xl font-extrabold text-primary mt-1">{{ $academicLevel->classes->count() }}</dd>
            </div>
            <div class="rounded-2xl bg-white border border-gray-200 p-5 shadow-sm">
                <dt class="text-xs font-semibold uppercase tracking-wide text-gray-500">
                    {{ $isEn ? 'Faculties' : 'संकायहरू' }}</dt>
                <dd class="text-3xl font-extrabold text-primary mt-1">{{ $faculties->count() }}</dd>
            </div>
            <div class="rounded-2xl bg-white border border-gray-200 p-5 shadow-sm">
                <dt class="text-xs font-semibold uppercase tracking-wide text-gray-500">
                    {{ $isEn ? 'Affiliation' : 'सम्बद्धता' }}</dt>
                <dd class="text-lg font-extrabold text-primary mt-2 leading-tight">
                    {{ $isEn ? 'Higher Secondary Board' : 'उच्च माध्यमिक बोर्ड' }}</dd>
            </div>
            <div class="rounded-2xl bg-white border border-gray-200 p-5 shadow-sm">
                <dt class="text-xs font-semibold uppercase tracking-wide text-gray-500">
                    {{ $isEn ? 'Since' : 'स्थापना' }}</dt>
                <dd class="text-3xl font-extrabold text-primary mt-1">1996</dd>
            </div>
        </dl>
    </section>

    {{-- ============ Classes ============ --}}
    @if ($academicLevel->classes->isNotEmpty())
        <section class="bg-white section-y">
            <div class="container-page">
                <x-section-heading align="center" :eyebrow="$name" :title="__('pages.our') . ' ' . $name . ' ' . __('pages.programs')" />

                <div class="grid grid-cols-1 sm:grid-cols-2 grid-gap max-w-4xl mx-auto items-stretch">
                    @foreach ($academicLevel->classes as $class)
                        <article class="card-ui flex flex-col p-6 md:p-7 gap-4">
                            <div class="flex items-center gap-4">
                                <span
                                    class="shrink-0 w-14 h-14 rounded-2xl bg-primary text-accent flex items-center justify-center text-2xl shadow">
                                    <i class="fa {{ $class->icon ?? 'fa-book' }}" aria-hidden="true"></i>
                                </span>
                                <h3 class="font-extrabold text-xl text-gray-900 leading-tight">
                                    {{ $isEn ? $class->name_en : (isset($class->name_np) ? $class->name_np : $class->name_en) }}
                                </h3>
                            </div>
                            <div class="text-gray-700 leading-7 text-[0.95rem] [&_p]:mb-2 [&_ul]:list-disc [&_ul]:pl-5">
                                {!! Helper::stripInlineStyle(
                                    $isEn ? $class->description_en : $class->description_np ?? $class->description_en,
                                ) !!}
                            </div>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- ============ Faculties (tabs) ============ --}}
    @if ($faculties->isNotEmpty())
        <section class="section-y" id="faculties">
            <div class="container-page">
                <x-section-heading align="center" :eyebrow="Helper::contentText('pages.our_faculties')"
                    :title="Helper::content('pages.choose_your_stream')" />

                <div role="tablist" aria-label="{{ __('pages.our_faculties') }}" id="faculty-tabs"
                    class="flex flex-wrap justify-center gap-2 mb-8 md:mb-10">
                    @foreach ($faculties as $index => $faculty)
                        <button type="button" role="tab" id="faculty-tab-{{ $index }}"
                            aria-controls="faculty-panel-{{ $index }}"
                            aria-selected="{{ $index === 0 ? 'true' : 'false' }}" data-index="{{ $index }}"
                            class="faculty-tab btn px-6! rounded-full border-2 border-primary font-bold {{ $index === 0 ? 'bg-primary text-white' : 'bg-white text-primary hover:bg-primary/5' }}">
                            <i class="fa {{ $faculty->icon ?? 'fa-graduation-cap' }} text-sm" aria-hidden="true"></i>
                            {{ $isEn ? $faculty->name_en : $faculty->name_np ?? $faculty->name_en }}
                        </button>
                    @endforeach
                </div>

                @foreach ($faculties as $index => $faculty)
                    @php
                        $facultyImages = $faculty->images ? json_decode($faculty->images, true) ?? [] : [];
                        $subjectsByGroup = $faculty->groupSubjectFaculties
                            ->filter(fn($row) => $row->subject)
                            ->groupBy(fn($row) => optional($row->group)->name ?? '');
                    @endphp

                    <div role="tabpanel" id="faculty-panel-{{ $index }}"
                        aria-labelledby="faculty-tab-{{ $index }}"
                        class="faculty-panel {{ $index === 0 ? '' : 'hidden' }}">
                        <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-14 items-start">
                            <div class="lg:col-span-7 order-2 lg:order-1">
                                @php
                                    $short = $isEn ? $faculty->short_description_en ?? '' : $faculty->short_description_np ?? ($faculty->short_description_en ?? '');
                                @endphp
                                <h3 class="text-2xl md:text-3xl font-extrabold text-gray-900 leading-tight">
                                    {{ $isEn ? $faculty->name_en : $faculty->name_np ?? $faculty->name_en }}
                                </h3>
                                @if ($short)
                                    <p class="mt-3 text-lg text-primary font-semibold leading-snug">{{ $short }}</p>
                                @endif

                                <div class="mt-5 text-gray-700 text-base leading-8 [&_p]:mb-4 [&_ul]:list-disc [&_ul]:pl-5">
                                    {!! Helper::stripInlineStyle(
                                        $isEn ? $faculty->description_en : $faculty->description_np ?? $faculty->description_en,
                                    ) !!}
                                </div>

                                @if ($subjectsByGroup->isNotEmpty())
                                    <div class="mt-6 rounded-2xl bg-white border border-gray-200 p-6 shadow-sm">
                                        <h4 class="font-extrabold text-primary text-lg mb-4">
                                            {{ $isEn ? 'Subjects offered' : 'अध्ययन गराइने विषयहरू' }}</h4>
                                        <div class="space-y-4">
                                            @foreach ($subjectsByGroup as $groupName => $rows)
                                                <div>
                                                    @if ($groupName)
                                                        <p class="text-xs font-bold uppercase tracking-wider text-gray-500 mb-2">
                                                            {{ $groupName }}</p>
                                                    @endif
                                                    <ul class="flex flex-wrap gap-2">
                                                        @foreach ($rows as $row)
                                                            <li
                                                                class="rounded-full bg-primary/5 border border-primary/10 px-3 py-1 text-sm font-semibold text-primary">
                                                                {{ $isEn ? $row->subject->name_en : $row->subject->name_np ?? $row->subject->name_en }}
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            </div>

                            <div class="lg:col-span-5 order-1 lg:order-2 space-y-4">
                                <div class="aspect-4/3 rounded-3xl overflow-hidden shadow-xl bg-gray-100">
                                    <img loading="lazy" decoding="async"
                                        src="{{ $faculty->thumbnail_image ? asset($faculty->thumbnail_image) : $fallbackImage }}"
                                        alt="{{ $isEn ? $faculty->name_en : $faculty->name_np ?? $faculty->name_en }}" data-lightbox="faculty-{{ $index }}" onerror="this.onerror=null;this.src='{{ $fallbackImage }}'"
                                        class="w-full h-full object-cover">
                                </div>

                                @if (count($facultyImages))
                                    <div class="grid grid-cols-3 gap-3">
                                        @foreach (array_slice($facultyImages, 0, 3) as $image)
                                            <div class="aspect-square rounded-xl overflow-hidden bg-gray-100 shadow-md">
                                                <img loading="lazy" decoding="async" src="{{ asset($image) }}"
                                                    alt="{{ $isEn ? $faculty->name_en : $faculty->name_np ?? $faculty->name_en }}" data-lightbox="faculty-{{ $index }}" onerror="this.onerror=null;this.src='{{ $fallbackImage }}'"
                                                    class="w-full h-full object-cover transition-transform duration-500 hover:scale-105">
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </section>
    @endif

    {{-- CTA --}}
    @include('frontend.partials.apply-now', ['data' => $academicLevel])
@endsection

@push('scripts')
    <script>
        (function() {
            const tabs = Array.from(document.querySelectorAll('.faculty-tab'));
            const panels = Array.from(document.querySelectorAll('.faculty-panel'));
            if (!tabs.length) return;

            function select(index) {
                tabs.forEach((tab, i) => {
                    const on = i === index;
                    tab.setAttribute('aria-selected', on);
                    tab.classList.toggle('bg-primary', on);
                    tab.classList.toggle('text-white', on);
                    tab.classList.toggle('bg-white', !on);
                    tab.classList.toggle('text-primary', !on);
                    tab.tabIndex = on ? 0 : -1;
                });
                panels.forEach((panel, i) => panel.classList.toggle('hidden', i !== index));
            }

            tabs.forEach((tab, i) => {
                tab.addEventListener('click', () => select(i));
                tab.addEventListener('keydown', (e) => {
                    if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
                    e.preventDefault();
                    const next = (i + (e.key === 'ArrowRight' ? 1 : -1) + tabs.length) % tabs.length;
                    tabs[next].focus();
                    select(next);
                });
            });
        })();
    </script>
@endpush