@extends('layouts.public')

@section('title', 'Admission Requirements — '.setting('university_name'))
@section('description', 'Entry requirements for every programme 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' => 'Admissions', 'url' => route('admissions')],
                ['label' => 'Requirements'],
            ]" />
            <h1 class="mt-4 font-display text-4xl tracking-tight text-slate-900 sm:text-5xl">Admission requirements</h1>
            <p class="mt-3 max-w-2xl text-lg text-slate-600">
                Entry requirements by programme. These are assessed against the qualifications you enter
                in your application.
            </p>
        </div>
    </section>

    <div class="container-page py-14">
        <x-alert type="info" class="mb-10">
            The eligibility check in your application is advisory. Our admissions team makes the final
            decision after reviewing your full application and documents.
        </x-alert>

        <div class="space-y-14">
            @foreach ($schools as $school)
                <section aria-labelledby="req-school-{{ $school->id }}">
                    <h2 id="req-school-{{ $school->id }}" class="font-display text-3xl tracking-tight text-slate-900">
                        {{ $school->name }}
                    </h2>

                    <div class="mt-6 space-y-4" x-data="{ open: null }">
                        @foreach ($school->programmes as $programme)
                            <div class="overflow-hidden rounded-xl border border-slate-200 bg-white">
                                <button type="button"
                                        @click="open = open === {{ $programme->id }} ? null : {{ $programme->id }}"
                                        :aria-expanded="open === {{ $programme->id }}"
                                        class="flex w-full items-center justify-between gap-4 px-5 py-4 text-left transition hover:bg-slate-50">
                                    <span class="min-w-0">
                                        <span class="block text-sm font-semibold text-slate-900">{{ $programme->name }}</span>
                                        <span class="mt-0.5 block text-xs text-slate-500">
                                            {{ $programme->levelLabel() }} &middot; {{ $programme->durationLabel() }}
                                        </span>
                                    </span>
                                    <svg class="h-5 w-5 shrink-0 text-slate-400 transition"
                                         :class="open === {{ $programme->id }} ? 'rotate-180' : ''"
                                         fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4Z" clip-rule="evenodd"/>
                                    </svg>
                                </button>

                                <div x-show="open === {{ $programme->id }}" x-collapse x-cloak
                                     class="border-t border-slate-100 px-5 py-4">
                                    @if ($programme->requirements->isEmpty())
                                        <p class="text-sm text-slate-500">Requirements for this programme have not been published yet.</p>
                                    @else
                                        <ul class="space-y-2.5">
                                            @foreach ($programme->requirements as $requirement)
                                                <li class="flex gap-3 text-sm">
                                                    <span class="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full {{ $requirement->is_required ? 'bg-brand-700' : 'bg-slate-300' }}"></span>
                                                    <span>
                                                        <span class="text-slate-800">{{ $requirement->description }}</span>
                                                        @unless ($requirement->is_required)
                                                            <span class="ml-1 text-xs text-slate-400">(desirable)</span>
                                                        @endunless
                                                    </span>
                                                </li>
                                            @endforeach
                                        </ul>
                                    @endif

                                    <x-button :href="route('programmes.show', $programme)" variant="outline" size="sm" class="mt-4">
                                        View programme
                                    </x-button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </section>
            @endforeach
        </div>
    </div>

@endsection
