@extends('layouts.public')

@section('title', $programme->name.' — '.setting('university_name'))
@section('description', $programme->description)

@section('content')

    <section class="bg-brand-900 text-white">
        <div class="container-page py-14">
            <nav aria-label="Breadcrumb" class="text-sm">
                <ol class="flex flex-wrap items-center gap-1.5 text-slate-400">
                    <li><a href="{{ route('home') }}" class="hover:text-gold-300">Home</a></li>
                    <li aria-hidden="true">/</li>
                    <li><a href="{{ route('programmes.index') }}" class="hover:text-gold-300">Programmes</a></li>
                    <li aria-hidden="true">/</li>
                    <li class="text-white" aria-current="page">{{ $programme->name }}</li>
                </ol>
            </nav>

            <div class="mt-6 flex flex-wrap items-center gap-2">
                <x-badge color="gold" size="sm">{{ $programme->levelLabel() }}</x-badge>
                <span class="rounded-full bg-white/10 px-2.5 py-1 font-mono text-[11px] text-slate-300">{{ $programme->code }}</span>
            </div>

            <h1 class="mt-4 max-w-4xl font-display text-4xl leading-tight tracking-tight sm:text-5xl">
                {{ $programme->name }}
            </h1>

            <p class="mt-3 text-lg text-slate-300">
                <a href="{{ route('schools.show', $programme->school) }}" class="hover:text-gold-300">
                    {{ $programme->school->name }}
                </a>
                @if ($programme->department)
                    <span class="text-slate-500" aria-hidden="true">&middot;</span>
                    {{ $programme->department->name }}
                @endif
            </p>

            <div class="mt-9 flex flex-col gap-3 sm:flex-row">
                <x-button :href="route('apply')" variant="secondary" size="lg">Apply Now</x-button>
                <x-button :href="route('admissions')" size="lg"
                          class="border border-white/25 bg-white/5 text-white hover:bg-white/10 focus-visible:ring-white">
                    Admissions Process
                </x-button>
            </div>
        </div>
    </section>

    {{-- Key facts --}}
    <section class="border-b border-slate-200 bg-canvas">
        <div class="container-page">
            <dl class="grid grid-cols-2 divide-slate-200 sm:grid-cols-4 sm:divide-x">
                @foreach ([
                    ['Duration', $programme->durationLabel()],
                    ['Study mode', $programme->studyModeLabel()],
                    ['Campus', $programme->campusLabel()],
                    ['Award', $programme->award],
                ] as $i => [$label, $value])
                    <div @class(['py-6', 'sm:pl-6' => $i > 0, 'pr-6' => $i < 3])>
                        <dt class="text-xs uppercase tracking-wider text-slate-500">{{ $label }}</dt>
                        <dd class="mt-1.5 text-sm font-semibold text-slate-900">{{ $value }}</dd>
                    </div>
                @endforeach
            </dl>
        </div>
    </section>

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

            <div class="lg:col-span-2">
                @if ($programme->overview)
                    <h2 class="font-display text-3xl tracking-tight text-slate-900">Overview</h2>
                    <div class="prose-kcu mt-4">{!! nl2br(e($programme->overview)) !!}</div>
                @endif

                <h2 class="mt-12 font-display text-3xl tracking-tight text-slate-900">Entry requirements</h2>

                @if ($programme->requirements->isEmpty())
                    <p class="mt-4 text-slate-600">
                        Entry requirements for this programme have not yet been published.
                        Please contact <a href="mailto:{{ setting('university_admissions_email') }}" class="text-brand-700 underline">admissions</a>.
                    </p>
                @else
                    <ul class="mt-5 space-y-3">
                        @foreach ($programme->requirements as $requirement)
                            <li class="flex gap-3 rounded-lg border border-slate-200 bg-white p-4">
                                <span @class([
                                    'mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full',
                                    'bg-brand-50 text-brand-700' => $requirement->is_required,
                                    'bg-slate-100 text-slate-400' => ! $requirement->is_required,
                                ])>
                                    <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.3 3.3 6.8-6.8a1 1 0 0 1 1.4 0Z" clip-rule="evenodd"/>
                                    </svg>
                                </span>

                                <div class="min-w-0">
                                    <p class="text-sm text-slate-800">{{ $requirement->description }}</p>
                                    <p class="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500">
                                        <span>{{ $requirement->typeLabel() }}</span>
                                        @unless ($requirement->is_required)
                                            <x-badge color="slate" size="sm">Desirable</x-badge>
                                        @endunless
                                    </p>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                @endif

                @if ($programme->career_opportunities)
                    <h2 class="mt-12 font-display text-3xl tracking-tight text-slate-900">Career opportunities</h2>
                    <div class="prose-kcu mt-4">{!! nl2br(e($programme->career_opportunities)) !!}</div>
                @endif

                <h2 class="mt-12 font-display text-3xl tracking-tight text-slate-900">Application requirements</h2>
                <p class="mt-4 text-slate-600">
                    You will need your academic certificates and transcripts, a passport photograph and a copy
                    of your national ID or passport. The full checklist is shown inside your application.
                </p>
                <x-button :href="route('admissions.requirements')" variant="outline" class="mt-5">
                    View admission requirements
                </x-button>
            </div>

            {{-- Sidebar --}}
            <aside class="space-y-6 lg:sticky lg:top-28 lg:self-start">
                <x-card>
                    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-900">Fees</h2>

                    <dl class="mt-4 space-y-3 text-sm">
                        <div class="flex items-baseline justify-between gap-4">
                            <dt class="text-slate-600">Application fee</dt>
                            <dd class="font-semibold text-slate-900">{{ money($programme->applicationFee()) }}</dd>
                        </div>
                        @if ($programme->tuition_amount)
                            <div class="flex items-baseline justify-between gap-4 border-t border-slate-100 pt-3">
                                <dt class="text-slate-600">Tuition (per year)</dt>
                                <dd class="font-semibold text-slate-900">{{ money($programme->tuition_amount, $programme->currency) }}</dd>
                            </div>
                        @endif
                    </dl>

                    <p class="mt-4 text-xs leading-relaxed text-slate-500">
                        Fees are indicative and subject to approval. Confirm current fees with the
                        Finance Office before payment.
                    </p>
                </x-card>

                @if ($intake?->isAcceptingApplications())
                    <x-card class="border-brand-200 bg-brand-50">
                        <p class="text-xs font-semibold uppercase tracking-wider text-brand-700">Applications open</p>
                        <p class="mt-2 text-base font-semibold text-slate-900">{{ $intake->name }}</p>
                        <p class="mt-1 text-sm text-slate-600">Closes {{ $intake->deadlineLabel() }}</p>
                        <x-button :href="route('apply')" class="mt-5 w-full">Apply Now</x-button>
                    </x-card>
                @endif

                <x-card>
                    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-900">Need help?</h2>
                    <p class="mt-3 text-sm text-slate-600">Our admissions team is happy to answer your questions.</p>
                    <dl class="mt-4 space-y-2 text-sm">
                        <div>
                            <dt class="sr-only">Email</dt>
                            <dd><a href="mailto:{{ setting('university_admissions_email') }}" class="text-brand-700 hover:underline">{{ setting('university_admissions_email') }}</a></dd>
                        </div>
                        <div>
                            <dt class="sr-only">Phone</dt>
                            <dd><a href="tel:{{ preg_replace('/\s+/', '', setting('university_phone')) }}" class="text-brand-700 hover:underline">{{ setting('university_phone') }}</a></dd>
                        </div>
                    </dl>
                </x-card>
            </aside>
        </div>

        @if ($related->isNotEmpty())
            <section class="mt-16 border-t border-slate-200 pt-12">
                <h2 class="font-display text-3xl tracking-tight text-slate-900">Related programmes</h2>

                <div class="mt-6 grid gap-5 sm:grid-cols-3">
                    @foreach ($related as $item)
                        <x-card class="relative transition hover:border-brand-300 hover:shadow-md">
                            <x-badge color="gold" size="sm">{{ $item->levelLabel() }}</x-badge>
                            <h3 class="mt-3 text-base font-semibold leading-snug text-slate-900">
                                <a href="{{ route('programmes.show', $item) }}" class="hover:text-brand-700">
                                    <span class="absolute inset-0"></span>{{ $item->name }}
                                </a>
                            </h3>
                            <p class="mt-2 text-xs text-slate-500">{{ $item->durationLabel() }} &middot; {{ $item->studyModeLabel() }}</p>
                        </x-card>
                    @endforeach
                </div>
            </section>
        @endif
    </div>

@endsection
