<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="robots" content="noindex">

    <title>@yield('title', 'Applicant Portal') — {{ setting('university_name') }}</title>

    <link rel="icon" href="{{ asset('favicon.ico') }}" sizes="any">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
    @stack('head')
</head>
<body class="flex min-h-full flex-col bg-canvas">

<a href="#main" class="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded-lg focus:bg-brand-700 focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-white">
    Skip to main content
</a>

@php
    $unreadCount = auth()->user()?->unreadNotifications()->count() ?? 0;
@endphp

<header class="sticky top-0 z-40 border-b border-slate-200 bg-white" x-data="{ menu: false }">
    <div class="container-page flex h-16 items-center justify-between gap-4">

        <div class="flex items-center gap-6">
            <a href="{{ route('applicant.dashboard') }}" aria-label="Applicant dashboard">
                <img src="{{ asset('images/kcu-logo.png') }}" alt="{{ setting('university_name') }}" class="h-9 w-auto">
            </a>

            <nav class="hidden items-center gap-1 md:flex" aria-label="Applicant">
                @foreach ([
                    ['Dashboard', route('applicant.dashboard')],
                    ['My Applications', route('applicant.applications.index')],
                    ['Notifications', route('applicant.notifications')],
                    ['Profile', route('applicant.profile')],
                ] as [$label, $url])
                    <a href="{{ $url }}"
                       @class([
                           'rounded-lg px-3 py-2 text-sm font-medium transition',
                           'bg-brand-50 text-brand-800' => request()->url() === $url,
                           'text-slate-600 hover:bg-slate-50 hover:text-slate-900' => request()->url() !== $url,
                       ])>
                        {{ $label }}
                        @if ($label === 'Notifications' && $unreadCount > 0)
                            <span class="ml-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-gold-300 px-1.5 text-[11px] font-semibold text-brand-900">
                                {{ $unreadCount }}
                            </span>
                        @endif
                    </a>
                @endforeach
            </nav>
        </div>

        <div class="flex items-center gap-3">
            <a href="{{ route('home') }}" class="hidden text-sm text-slate-500 hover:text-slate-900 lg:block">
                University website
            </a>

            <div class="hidden items-center gap-3 border-l border-slate-200 pl-3 md:flex">
                <span class="flex h-9 w-9 items-center justify-center rounded-full bg-brand-700 text-xs font-semibold text-white">
                    {{ auth()->user()->initials() }}
                </span>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="text-sm text-slate-600 transition hover:text-red-600">Sign out</button>
                </form>
            </div>

            <button type="button" @click="menu = !menu"
                    class="rounded-lg p-2 text-slate-700 transition hover:bg-slate-100 md:hidden"
                    :aria-expanded="menu" aria-label="Toggle menu">
                <svg x-show="!menu" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" d="M4 7h16M4 12h16M4 17h16"/>
                </svg>
                <svg x-show="menu" x-cloak class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" d="M6 6l12 12M18 6 6 18"/>
                </svg>
            </button>
        </div>
    </div>

    <nav x-show="menu" x-cloak x-transition.origin.top
         class="border-t border-slate-200 bg-white md:hidden" aria-label="Applicant mobile">
        <div class="container-page py-3">
            <ul class="divide-y divide-slate-100">
                @foreach ([
                    ['Dashboard', route('applicant.dashboard')],
                    ['My Applications', route('applicant.applications.index')],
                    ['Notifications', route('applicant.notifications')],
                    ['Profile', route('applicant.profile')],
                    ['University website', route('home')],
                ] as [$label, $url])
                    <li>
                        <a href="{{ $url }}" class="block py-3 text-sm font-medium text-slate-800">{{ $label }}</a>
                    </li>
                @endforeach
            </ul>

            <form method="POST" action="{{ route('logout') }}" class="mt-3">
                @csrf
                <x-button type="submit" variant="outline" class="w-full">Sign out</x-button>
            </form>
        </div>
    </nav>
</header>

<main id="main" class="flex-1 py-8">
    <div class="container-page">
        @if (session('status'))
            <x-alert type="success" class="mb-6" dismissible>{{ session('status') }}</x-alert>
        @endif

        @if (session('error'))
            <x-alert type="danger" class="mb-6" dismissible>{{ session('error') }}</x-alert>
        @endif

        @yield('content')
    </div>
</main>

<footer class="border-t border-slate-200 bg-white">
    <div class="container-page flex flex-col items-center justify-between gap-2 py-6 text-xs text-slate-500 sm:flex-row">
        <p>&copy; {{ date('Y') }} {{ setting('university_name') }}</p>
        <p>
            Need help?
            <a href="mailto:{{ setting('university_admissions_email') }}" class="text-brand-700 hover:underline">
                {{ setting('university_admissions_email') }}
            </a>
            &middot; {{ setting('university_phone') }}
        </p>
    </div>
</footer>

@livewireScripts
@stack('scripts')
</body>
</html>
