<!DOCTYPE html>
<html lang="en" class="h-full bg-gray-50">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Admin') — MatchDay</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    @vite(['resources/css/app.css', 'resources/js/admin.js'])
</head>
<body class="h-full font-sans">

<div class="flex h-full">

    {{-- ── SIDEBAR ──────────────────────────────────────────── --}}
    <aside class="w-64 bg-sidebar flex flex-col flex-shrink-0 fixed inset-y-0 z-50">

        {{-- Logo --}}
        <div class="flex items-center gap-3 px-6 py-5 border-b border-sidebar-border">
            <span class="text-3xl">⚽</span>
            <div>
                <div class="text-white font-black text-sm leading-tight">MatchDay</div>
                <div class="text-wc-gold font-bold text-xs tracking-widest">AI FOOTBALL PREDICTIONS</div>
            </div>
        </div>

        {{-- Nav links --}}
        <nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
            @php
                $navItems = [
                    ['route' => 'admin.dashboard',      'icon' => '📊', 'label' => 'Dashboard'],
                    ['route' => 'admin.matches.index',  'icon' => '⚽', 'label' => 'Matches'],
                    ['route' => 'admin.polls.index',    'icon' => '📊', 'label' => 'Polls'],
                    ['route' => 'admin.news.index',     'icon' => '📰', 'label' => 'News'],
                    ['route' => 'admin.users.index',    'icon' => '👥', 'label' => 'Users'],
                ];
            @endphp

            @foreach ($navItems as $item)
                @php $active = request()->routeIs($item['route'] . '*'); @endphp
                <a href="{{ route($item['route']) }}"
                   class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors
                          {{ $active
                              ? 'bg-wc-green text-white'
                              : 'text-gray-400 hover:bg-sidebar-hover hover:text-white' }}">
                    <span class="text-base">{{ $item['icon'] }}</span>
                    {{ $item['label'] }}
                </a>
            @endforeach
        </nav>

        {{-- Admin user + logout --}}
        <div class="px-4 py-4 border-t border-sidebar-border">
            <div class="flex items-center gap-3 mb-3">
                <div class="w-8 h-8 rounded-full bg-wc-green flex items-center justify-center text-white font-bold text-sm">
                    {{ strtoupper(substr(session('admin_name', 'A'), 0, 1)) }}
                </div>
                <div>
                    <div class="text-white text-sm font-semibold">{{ session('admin_name', 'Admin') }}</div>
                    <div class="text-gray-500 text-xs">Administrator</div>
                </div>
            </div>
            <form method="POST" action="{{ route('admin.logout') }}">
                @csrf
                <button type="submit"
                        class="w-full text-left text-gray-400 hover:text-red-400 text-sm px-2 py-1 rounded transition-colors">
                    🚪 Log Out
                </button>
            </form>
        </div>
    </aside>

    {{-- ── MAIN CONTENT AREA ────────────────────────────────── --}}
    <div class="flex-1 flex flex-col min-h-screen ml-64">

        {{-- Top bar --}}
        <header class="bg-white border-b border-gray-200 px-8 py-4 flex items-center justify-between sticky top-0 z-40">
            <h1 class="text-lg font-bold text-gray-800">@yield('page-title', 'Dashboard')</h1>
            <div class="flex items-center gap-3">
                <span class="text-xs text-gray-400">{{ now()->format('D, d M Y') }}</span>
                @yield('header-actions')
            </div>
        </header>

        {{-- Flash messages --}}
        @if (session('success') || session('error'))
            <div id="flash-message"
                 class="mx-8 mt-4 px-5 py-3 rounded-xl text-sm font-medium flex items-center gap-3
                        {{ session('success') ? 'bg-green-50 text-green-800 border border-green-200' : 'bg-red-50 text-red-800 border border-red-200' }}">
                <span>{{ session('success') ? '✅' : '❌' }}</span>
                {{ session('success') ?? session('error') }}
            </div>
        @endif

        {{-- Validation errors --}}
        @if ($errors->any())
            <div class="mx-8 mt-4 px-5 py-3 rounded-xl bg-red-50 border border-red-200">
                <p class="text-sm font-semibold text-red-800 mb-1">Please fix the following:</p>
                <ul class="text-sm text-red-700 list-disc list-inside space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Page content --}}
        <main class="flex-1 px-8 py-6">
            @yield('content')
        </main>

        <footer class="px-8 py-4 text-center text-xs text-gray-400 border-t border-gray-100">
            MatchDay — Admin Panel
        </footer>
    </div>
</div>

</body>
</html>
