<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @auth
        @if (auth()->user()->theme)
            <meta name="user-theme" content="{{ auth()->user()->theme }}">
        @endif
    @endauth
    <title>@yield('title', config('southend.app_name')) — {{ config('southend.app_tagline') }}</title>
    @include('components.partials.theme-boot')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @stack('styles')
</head>
<body>
    <div class="ambient-bg" aria-hidden="true"></div>
    <div class="sidebar-overlay" id="sidebarOverlay"></div>

    <aside class="sidebar" id="sidebar">
        <div class="brand">
            <div class="brand-card">
                <span class="brand-name">Southend<span>School</span></span>
            </div>
            <div class="brand-tag">{{ config('southend.app_tagline') }}</div>
        </div>

        <x-sidebar-nav :sections="config('southend.navigation')" />

        <div class="sidebar-footer">
            @php
                $user = auth()->user();
                $initials = collect(explode(' ', $user->name ?? 'U'))
                    ->filter()
                    ->take(2)
                    ->map(fn ($part) => strtoupper(substr($part, 0, 1)))
                    ->implode('');
                $role = optional($user?->roles)->first()?->name ?? 'User';
            @endphp
            <div class="sf-avatar">{{ $initials ?: 'U' }}</div>
            <div>
                <div class="sf-name">{{ $user->name ?? 'Guest' }}</div>
                <div class="sf-role">{{ $role }}</div>
            </div>
        </div>
        <button type="button" class="sidebar-collapse-btn" id="sidebarCollapse" aria-label="Collapse sidebar">‹</button>
    </aside>

    <main class="main">
        <header class="topbar">
            <button type="button" class="sidebar-toggle" id="sidebarToggle" aria-label="Toggle navigation">☰</button>
            <div class="crumbs">
                <b>{{ $crumbTitle ?? 'Overview' }}</b>
                @if (! empty($crumbSub))
                    <span class="crumbs-sub" style="color:var(--text3); margin: 0 6px;">/</span>
                    <span class="crumbs-sub">{{ $crumbSub }}</span>
                @endif
            </div>
            <div class="topbar-right">
                <div class="topbar-search">
                    <input class="search" type="search" placeholder="Search students, staff, invoices…" aria-label="Search">
                </div>
                <x-theme-toggle />
                <form method="POST" action="{{ route('logout') }}" style="display:inline;">
                    @csrf
                    <button type="submit" class="btn btn-outline btn-sm btn-signout" aria-label="Sign out">
                        <span class="btn-signout-text">Sign out</span>
                    </button>
                </form>
                <div class="user">
                    <div class="user-avatar">{{ $initials ?: 'U' }}</div>
                    <div>
                        <div class="user-name">{{ $user->name ?? '' }}</div>
                        <div class="user-role">{{ $role }}</div>
                    </div>
                </div>
            </div>
        </header>

        <div class="content page-enter">
            @if (session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if (session('error'))
                <div class="alert alert-error">{{ session('error') }}</div>
            @endif
            @if ($errors->any())
                <div class="alert alert-error">
                    <ul style="margin:0; padding-left:18px;">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

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

    <x-toast-container />
    @stack('scripts')
</body>
</html>
