@extends('frontend.layouts.app')

@section('title', 'Academic Levels')

@php
    use App\Helpers\Helper;

    $isEn = app()->getLocale() == 'en';
    $totalClasses = $academicLevels->sum(fn($level) => $level->classes->count());
@endphp

@section('content')
    {{-- Hero Section --}}
    @include('frontend.partials.hero', [
        'mainHeading' => Helper::contentText('pages.nurturing_futures'),
        'subHeading' => Helper::contentText('pages.nurturing_futures_tagline'),
        'breadcrumb1' => [
            'name' => __('route.home'),
            'route' => route('home'),
        ],
        'breadcrumb2' => [
            'name' => __('route.academic_levels'),
            'route' => route('academics'),
            'class' => 'text-gray-400',
        ],
        'breadcrumb3' => null,
        'breadcrumb4' => null,
    ])

    {{-- ============ Introduction ============ --}}
    @if ($academic)
        @php
            $intro = $isEn ? $academic->short_description_en : $academic->short_description_np ?? $academic->short_description_en;
            $words = explode(' ', trim(strip_tags($intro ?? '')));
            $lastTwo = count($words) > 3 ? array_splice($words, -2) : [];
        @endphp

        <section class="container-page section-y">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-14 items-center">
                <div class="lg:col-span-6 order-2 lg:order-1">
                    <x-section-heading align="left" :eyebrow="$isEn ? $academic->title_en : $academic->title_np ?? $academic->title_en"
                        class="mb-4!" />

                    <h2 class="section-title mt-0!">
                        {{ implode(' ', $words) }}
                        @if ($lastTwo)
                            <span class="accent">{{ implode(' ', $lastTwo) }}</span>
                        @endif
                    </h2>

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

                    {{-- At a glance --}}
                    <dl class="mt-6 grid grid-cols-2 gap-4 max-w-sm">
                        <div class="rounded-xl bg-white border border-gray-200 p-4 shadow-sm">
                            <dt class="text-xs font-semibold uppercase tracking-wide text-gray-500">
                                {{ $isEn ? 'Academic levels' : 'शैक्षिक तहहरू' }}</dt>
                            <dd class="text-3xl font-extrabold text-primary mt-1">{{ $academicLevels->count() }}</dd>
                        </div>
                        <div class="rounded-xl bg-white border border-gray-200 p-4 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">{{ $totalClasses }}</dd>
                        </div>
                    </dl>
                </div>

                <div class="lg:col-span-6 order-1 lg:order-2">
                    <div class="aspect-4/3 rounded-3xl overflow-hidden shadow-xl bg-gray-100">
                        <img loading="lazy" decoding="async" src="{{ asset($academic->banner_image) }}" alt=""
                            onerror="this.onerror=null;this.src='{{ asset('assets/frontend/images/default-image.png') }}'"
                            class="w-full h-full object-cover">
                    </div>
                </div>
            </div>
        </section>
    @endif

    {{-- ============ Programmes ============ --}}
    <section class="bg-white section-y">
        <div class="container-page">
            <x-section-heading align="center" :eyebrow="Helper::contentText('pages.academic_programmes_label')"
                :title="Helper::content('pages.academic_programmes_heading')"
                :description="Helper::contentText('pages.comprehensive_academic_programs')" />

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 grid-gap items-stretch">
                @foreach ($academicLevels as $academicLevel)
                    @php
                        $levelName = $isEn
                            ? $academicLevel->name_en
                            : (isset($academicLevel->name_np) ? $academicLevel->name_np : $academicLevel->name_en);
                    @endphp

                    <article class="card-ui group flex flex-col overflow-hidden relative">
                        {{-- accent bar --}}
                        <div class="h-1.5 bg-linear-to-r from-primary via-secondary to-accent"></div>

                        <div class="p-6 md:p-7 flex flex-col flex-1 gap-5">
                            <div class="flex items-start gap-4">
                                <span
                                    class="shrink-0 w-14 h-14 rounded-2xl bg-primary/10 text-primary flex items-center justify-center text-2xl">
                                    <i class="fa {{ $academicLevel->icon ?: 'fa-graduation-cap' }}" aria-hidden="true"></i>
                                </span>
                                <div class="min-w-0">
                                    <h3 class="font-extrabold text-xl text-gray-900 leading-tight">{{ $levelName }}</h3>
                                    <p class="text-sm text-gray-600 mt-1 leading-snug">
                                        {{ $isEn
                                            ? $academicLevel->tagline_en
                                            : (isset($academicLevel->tagline_np) ? $academicLevel->tagline_np : $academicLevel->tagline_en) }}
                                    </p>
                                </div>
                            </div>

                            {{-- key facts (HTML from the CMS) --}}
                            <div
                                class="rounded-xl bg-gray-50 border border-gray-100 px-4 py-3 text-sm text-gray-700 [&_p]:my-0.5 [&_p]:text-sm [&_p]:text-gray-700">
                                {!! Helper::stripInlineStyle(
                                    $isEn
                                        ? $academicLevel->short_description_en
                                        : $academicLevel->short_description_np ?? $academicLevel->short_description_en,
                                ) !!}
                            </div>

                            @if ($academicLevel->classes->isNotEmpty())
                                <div>
                                    <p class="text-xs font-bold uppercase tracking-wider text-gray-500 mb-2">
                                        {{ $isEn ? 'Classes' : 'कक्षाहरू' }}</p>
                                    <ul class="flex flex-wrap gap-2">
                                        @foreach ($academicLevel->classes as $class)
                                            <li
                                                class="inline-flex items-center gap-1.5 rounded-full bg-primary/5 border border-primary/10 px-3 py-1 text-sm font-semibold text-primary">
                                                <i class="fa {{ $class->icon ?? 'fa-book-open' }} text-xs opacity-70"
                                                    aria-hidden="true"></i>
                                                {{ $isEn ? $class->name_en : (isset($class->name_np) ? $class->name_np : $class->name_en) }}
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <a href="{{ route('academics-detail', $academicLevel->slug) }}"
                                class="mt-auto pt-2 inline-flex items-center gap-2 font-semibold text-primary group-hover:gap-3 transition-all after:absolute after:inset-0">
                                {{ __('pages.view_program_details') }}
                                <i class="fa-solid fa-arrow-right-long" aria-hidden="true"></i>
                            </a>
                        </div>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ============ Call to action ============ --}}
    <section class="container-page section-y">
        <div
            class="bg-brand-gradient rounded-3xl text-white px-6 py-10 md:px-12 md:py-14 flex flex-col lg:flex-row items-center justify-between gap-8 shadow-xl">
            <div class="text-center lg:text-left max-w-2xl">
                <h2 class="text-h2 font-extrabold">{!! Helper::content('pages.ready_to_start_journey') !!}</h2>
                <p class="mt-3 text-lg text-white/85">{!! Helper::content('pages.comprehensive_academic_programs') !!}</p>
            </div>

            <div class="shrink-0">
                <button type="button" id="applyNowButton" data-dropdown-toggle="applyNowDropdownDelay"
                    data-dropdown-delay="500" data-dropdown-trigger="hover"
                    class="btn bg-white text-primary hover:bg-accent rounded-full px-8 text-lg font-bold">
                    {{ __('pages.apply_now') }}
                    <i class="fa-solid fa-chevron-down text-sm" aria-hidden="true"></i>
                </button>

                <div id="applyNowDropdownDelay"
                    class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-lg w-48" role="menu">
                    <ul class="py-2 text-sm text-gray-700" aria-labelledby="applyNowButton">
                        <li>
                            <a href="{{ route('online-admission.school-level') }}"
                                class="block px-4 py-2 hover:bg-gray-100"
                                role="menuitem">{{ __('homepage.school_level') }}</a>
                        </li>
                        <li>
                            <a href="{{ route('online-admission.college-level') }}"
                                class="block px-4 py-2 hover:bg-gray-100"
                                role="menuitem">{{ __('homepage.college_level') }}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
@endsection