<!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', 'Administration') — {{ setting('university_short_name', 'KCU') }} Admin</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="min-h-full bg-canvas" x-data="{ sidebar: false }">

@php
    $nav = [
        ['label' => 'Dashboard', 'route' => 'admin.dashboard', 'permission' => null,
         'icon' => 'M3 10.5 10 4l7 6.5V17a1 1 0 0 1-1 1h-3.5v-4h-5v4H4a1 1 0 0 1-1-1v-6.5Z'],
        ['label' => 'Applications', 'route' => 'admin.applications.index', 'permission' => 'applications.view',
         'icon' => 'M5.5 2A1.5 1.5 0 0 0 4 3.5v13A1.5 1.5 0 0 0 5.5 18h9a1.5 1.5 0 0 0 1.5-1.5V7.6a1.5 1.5 0 0 0-.4-1L11.8 2.4a1.5 1.5 0 0 0-1-.4H5.5Zm2 8h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1 0-1.5Zm0 3h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1 0-1.5Z'],
        ['label' => 'Admissions', 'route' => 'admin.admissions.index', 'permission' => 'admissions.view',
         'icon' => 'M9.2 2.3a1.5 1.5 0 0 1 1.6 0l6 3.7a1 1 0 0 1 0 1.7l-6 3.7a1.5 1.5 0 0 1-1.6 0l-6-3.7a1 1 0 0 1 0-1.7l6-3.7ZM4 10.4v3.1c0 .5.3 1 .7 1.3l4.5 2.5c.5.3 1.1.3 1.6 0l4.5-2.5c.4-.3.7-.8.7-1.3v-3.1l-4.6 2.9a3 3 0 0 1-3.2 0L4 10.4Z'],
        ['label' => 'Payments', 'route' => 'admin.payments.index', 'permission' => 'payments.view',
         'icon' => 'M2 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1H2V6Zm0 3h16v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9Zm2 3.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 0 1.5h-3A.75.75 0 0 1 4 12.5Z'],
        ['label' => 'Programmes', 'route' => 'admin.programmes.index', 'permission' => 'programmes.view',
         'icon' => 'M10 2 1 6l9 4 7.4-3.3V12a1 1 0 0 0 2 0V6L10 2ZM4 10.2V13c0 1.3 2.7 2.6 6 2.6s6-1.3 6-2.6v-2.8l-5.2 2.3a2 2 0 0 1-1.6 0L4 10.2Z'],
        ['label' => 'Intakes', 'route' => 'admin.intakes.index', 'permission' => 'intakes.view',
         'icon' => 'M6 2a1 1 0 0 1 1 1v1h6V3a1 1 0 1 1 2 0v1h.5A1.5 1.5 0 0 1 17 5.5V7H3V5.5A1.5 1.5 0 0 1 4.5 4H5V3a1 1 0 0 1 1-1ZM3 8.5h14v7A1.5 1.5 0 0 1 15.5 17h-11A1.5 1.5 0 0 1 3 15.5v-7Z'],
        ['label' => 'Reports', 'route' => 'admin.reports.index', 'permission' => 'reports.view',
         'icon' => 'M3 17a1 1 0 0 1-1-1V4a1 1 0 1 1 2 0v11h13a1 1 0 1 1 0 2H3Zm3.5-3a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-1Zm4 0a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v7.5a.5.5 0 0 1-.5.5h-1Zm4 0a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-1Z'],
        ['label' => 'Settings', 'route' => 'admin.settings.index', 'permission' => 'settings.manage',
         'icon' => 'M8.3 2.3a1 1 0 0 1 1-.8h1.4a1 1 0 0 1 1 .8l.2 1.3 1.2.7 1.2-.5a1 1 0 0 1 1.2.4l.7 1.2a1 1 0 0 1-.2 1.3l-1 .9v1.4l1 .9a1 1 0 0 1 .2 1.3l-.7 1.2a1 1 0 0 1-1.2.4l-1.2-.5-1.2.7-.2 1.3a1 1 0 0 1-1 .8H9.3a1 1 0 0 1-1-.8l-.2-1.3-1.2-.7-1.2.5a1 1 0 0 1-1.2-.4l-.7-1.2a1 1 0 0 1 .2-1.3l1-.9V8.6l-1-.9a1 1 0 0 1-.2-1.3l.7-1.2a1 1 0 0 1 1.2-.4l1.2.5 1.2-.7.2-1.3ZM10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'],
        ['label' => 'Audit Log', 'route' => 'admin.audit-logs', 'permission' => 'audit.view',
         'icon' => 'M10 1 3 4v5.5c0 4 3 7.7 7 8.5 4-.8 7-4.5 7-8.5V4l-7-3Zm0 4a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V6a1 1 0 0 1 1-1Zm0 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'],
    ];
@endphp

<div class="flex min-h-screen">

    {{-- Sidebar --}}
    <aside class="fixed inset-y-0 left-0 z-50 w-64 -translate-x-full overflow-y-auto bg-brand-900 transition-transform lg:static lg:translate-x-0"
           :class="sidebar ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'">

        <div class="flex h-16 items-center justify-between border-b border-white/10 px-5">
            <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-2">
                <img src="{{ asset('images/kcu-logo.png') }}" alt=""
                     class="h-7 w-auto brightness-0 invert" width="900" height="338">
                <span class="text-xs font-semibold uppercase tracking-widest text-gold-300">Admin</span>
            </a>

            <button type="button" @click="sidebar = false" class="text-slate-400 lg:hidden" aria-label="Close menu">
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                    <path d="M6.3 5A1 1 0 0 0 5 6.3L8.6 10 5 13.7A1 1 0 1 0 6.3 15L10 11.4l3.7 3.6a1 1 0 0 0 1.3-1.3L11.4 10 15 6.3A1 1 0 0 0 13.7 5L10 8.6 6.3 5Z"/>
                </svg>
            </button>
        </div>

        <nav class="p-3" aria-label="Administration">
            <ul class="space-y-0.5">
                @foreach ($nav as $item)
                    @if (! $item['permission'] || auth()->user()->hasPermission($item['permission']))
                        @php $active = request()->routeIs($item['route']) || request()->routeIs(str_replace('.index', '.*', $item['route'])); @endphp
                        <li>
                            <a href="{{ route($item['route']) }}"
                               @class([
                                   'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm transition',
                                   'bg-white/10 font-medium text-white' => $active,
                                   'text-slate-300 hover:bg-white/5 hover:text-white' => ! $active,
                               ])>
                                <svg class="h-4 w-4 shrink-0 {{ $active ? 'text-gold-300' : 'text-slate-400' }}"
                                     fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                    <path d="{{ $item['icon'] }}"/>
                                </svg>
                                {{ $item['label'] }}
                            </a>
                        </li>
                    @endif
                @endforeach
            </ul>
        </nav>
    </aside>

    <div x-show="sidebar" x-cloak @click="sidebar = false"
         class="fixed inset-0 z-40 bg-slate-900/50 lg:hidden" aria-hidden="true"></div>

    {{-- Main --}}
    <div class="flex min-w-0 flex-1 flex-col">

        <header class="sticky top-0 z-30 border-b border-slate-200 bg-white">
            <div class="flex h-16 items-center justify-between gap-4 px-5 lg:px-8">
                <div class="flex min-w-0 items-center gap-3">
                    <button type="button" @click="sidebar = true"
                            class="rounded-lg p-2 text-slate-600 transition hover:bg-slate-100 lg:hidden"
                            aria-label="Open menu">
                        <svg class="h-5 w-5" 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>
                    </button>

                    <h1 class="truncate text-base font-semibold text-slate-900">@yield('heading', 'Dashboard')</h1>
                </div>

                <div class="flex items-center gap-4">
                    @permission('applications.view')
                        <form action="{{ route('admin.applications.index') }}" method="GET" class="hidden md:block" role="search">
                            <label for="admin-search" class="sr-only">Search applications</label>
                            <input id="admin-search" type="search" name="q"
                                   placeholder="Search name, email or number"
                                   class="w-72 rounded-lg border border-slate-300 px-3.5 py-1.5 text-sm placeholder:text-slate-400 focus:border-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-700/30">
                        </form>
                    @endpermission

                    <div class="flex items-center gap-3 border-l border-slate-200 pl-4">
                        <div class="hidden text-right sm:block">
                            <p class="text-sm font-medium text-slate-900">{{ auth()->user()->name }}</p>
                            <p class="text-xs text-slate-500">{{ auth()->user()->roles->first()?->name }}</p>
                        </div>

                        <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-500 transition hover:text-red-600" title="Sign out">
                                <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" />
                                </svg>
                                <span class="sr-only">Sign out</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </header>

        <main class="flex-1 p-5 lg:p-8">
            @if (session('status'))
                <x-alert type="success" class="mb-6" dismissible>{{ session('status') }}</x-alert>
            @endif

            @if ($errors->any())
                <x-alert type="danger" class="mb-6" title="Please check the following">
                    <ul class="mt-1 list-disc space-y-0.5 pl-4">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </x-alert>
            @endif

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

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