@extends('layouts.public')

@section('title', 'Programmes — '.setting('university_name'))
@section('description', 'Search undergraduate degrees, diplomas and certificates at King Ceasor University.')

@section('content')

    <section class="border-b border-slate-200 bg-canvas">
        <div class="container-page py-12">
            <x-breadcrumb :items="[
                ['label' => 'Home', 'url' => route('home')],
                ['label' => 'Programmes'],
            ]" />

            <h1 class="mt-4 font-display text-4xl tracking-tight text-slate-900 sm:text-5xl">Programmes</h1>
            <p class="mt-3 max-w-2xl text-lg text-slate-600">
                Undergraduate degrees, professional diplomas and bridging certificates across our three schools.
            </p>
        </div>
    </section>

    <div class="container-page py-12">
        <div class="grid gap-10 lg:grid-cols-4">

            {{-- Filters --}}
            <aside class="lg:col-span-1">
                <form method="GET" action="{{ route('programmes.index') }}" class="lg:sticky lg:top-28">
                    <h2 class="mb-4 text-sm font-semibold uppercase tracking-wider text-slate-900">Refine</h2>

                    <div class="space-y-5">
                        <x-input name="q" type="search" label="Search"
                                 :value="$filters['q'] ?? ''"
                                 placeholder="e.g. Nursing" />

                        <x-select name="school" label="School"
                                  placeholder="All schools"
                                  :selected="$filters['school'] ?? null"
                                  :options="$schools->pluck('name', 'id')->all()" />

                        <x-select name="level" label="Level"
                                  placeholder="All levels"
                                  :selected="$filters['level'] ?? null"
                                  :options="$levels" />

                        <x-select name="mode" label="Study mode"
                                  placeholder="Any mode"
                                  :selected="$filters['mode'] ?? null"
                                  :options="$modes" />

                        <x-select name="campus" label="Campus"
                                  placeholder="All campuses"
                                  :selected="$filters['campus'] ?? null"
                                  :options="$campuses" />
                    </div>

                    <div class="mt-6 flex gap-2">
                        <x-button type="submit" class="flex-1">Apply filters</x-button>
                        @if (array_filter($filters))
                            <x-button :href="route('programmes.index')" variant="outline">Clear</x-button>
                        @endif
                    </div>
                </form>
            </aside>

            {{-- Results --}}
            <div class="lg:col-span-3">
                <p class="mb-6 text-sm text-slate-600" role="status">
                    <strong class="text-slate-900">{{ $programmes->total() }}</strong>
                    {{ Str::plural('programme', $programmes->total()) }} found
                </p>

                @if ($programmes->isEmpty())
                    <x-empty-state title="No programmes match your search"
                                   description="Try removing a filter or searching for a broader term.">
                        <x-button :href="route('programmes.index')" variant="outline">Clear filters</x-button>
                    </x-empty-state>
                @else
                    <div class="grid gap-5 sm:grid-cols-2">
                        @foreach ($programmes as $programme)
                            <x-card class="relative flex h-full flex-col transition hover:border-brand-300 hover:shadow-md">
                                <div class="flex items-start justify-between gap-3">
                                    <x-badge color="gold" size="sm">{{ $programme->levelLabel() }}</x-badge>
                                    <span class="shrink-0 font-mono text-[11px] text-slate-400">{{ $programme->code }}</span>
                                </div>

                                <h2 class="mt-4 text-lg font-semibold leading-snug text-slate-900">
                                    <a href="{{ route('programmes.show', $programme) }}" class="hover:text-brand-700">
                                        <span class="absolute inset-0"></span>
                                        {{ $programme->name }}
                                    </a>
                                </h2>

                                <p class="mt-1.5 text-sm text-slate-500">{{ $programme->school->name }}</p>

                                @if ($programme->description)
                                    <p class="mt-3 line-clamp-2 text-sm leading-relaxed text-slate-600">
                                        {{ $programme->description }}
                                    </p>
                                @endif

                                <dl class="mt-auto grid grid-cols-2 gap-3 border-t border-slate-100 pt-4 text-xs">
                                    <div>
                                        <dt class="text-slate-400">Duration</dt>
                                        <dd class="mt-0.5 font-medium text-slate-700">{{ $programme->durationLabel() }}</dd>
                                    </div>
                                    <div>
                                        <dt class="text-slate-400">Study mode</dt>
                                        <dd class="mt-0.5 font-medium text-slate-700">{{ $programme->studyModeLabel() }}</dd>
                                    </div>
                                </dl>
                            </x-card>
                        @endforeach
                    </div>

                    <div class="mt-10">
                        {{ $programmes->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>

@endsection
