<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'JAM Admin')</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-[#0d0d0d] text-white min-h-screen" style="font-family: 'Inter', sans-serif;"
      x-data="{ sidebarOpen: false }" @keydown.escape.window="sidebarOpen = false">

    {{-- Mobile overlay --}}
    <div class="fixed inset-0 bg-black/60 z-30 lg:hidden"
         x-show="sidebarOpen"
         x-transition:enter="transition-opacity ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition-opacity ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @click="sidebarOpen = false"
         style="display:none;"></div>

    {{-- Sidebar --}}
    <aside class="w-60 min-h-screen bg-[#111111] border-r border-[#1e1e1e] flex flex-col fixed top-0 left-0 z-40
                  transition-transform duration-200 ease-in-out
                  -translate-x-full lg:translate-x-0"
           :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'">

        <div class="p-6 border-b border-[#1e1e1e] flex items-center justify-between">
            <div>
                <p class="text-[#D4B84A] text-xs tracking-[0.4em] uppercase font-medium">Jam Corner</p>
                <p class="text-white/30 text-xs tracking-widest uppercase mt-0.5">Admin Panel</p>
            </div>
            {{-- Close button — mobile only --}}
            <button class="lg:hidden text-white/40 hover:text-white transition-colors p-1"
                    @click="sidebarOpen = false" aria-label="Close sidebar">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        <nav class="flex-1 p-4 space-y-1">
            <a href="{{ route('admin.dashboard') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors {{ request()->routeIs('admin.dashboard') ? 'bg-[#D4B84A]/10 text-[#D4B84A]' : 'text-white/50 hover:text-white hover:bg-white/5' }}"
               @click="sidebarOpen = false">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
                Dashboard
            </a>
            <a href="{{ route('admin.members.index') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors {{ request()->routeIs('admin.members.*') ? 'bg-[#D4B84A]/10 text-[#D4B84A]' : 'text-white/50 hover:text-white hover:bg-white/5' }}"
               @click="sidebarOpen = false">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0"/></svg>
                Members
            </a>
            <a href="{{ route('admin.points.ledger') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors {{ request()->routeIs('admin.points.*') ? 'bg-[#D4B84A]/10 text-[#D4B84A]' : 'text-white/50 hover:text-white hover:bg-white/5' }}"
               @click="sidebarOpen = false">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                Points
            </a>
            <a href="{{ route('admin.tiers.index') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors {{ request()->routeIs('admin.tiers.*') ? 'bg-[#D4B84A]/10 text-[#D4B84A]' : 'text-white/50 hover:text-white hover:bg-white/5' }}"
               @click="sidebarOpen = false">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                Tiers
                @php $pendingCount = \App\Models\TierAssessment::where('status','pending')->count(); @endphp
                @if($pendingCount > 0)
                <span class="ml-auto bg-[#D4B84A] text-black text-[10px] font-bold rounded-full w-4 h-4 flex items-center justify-center">{{ $pendingCount > 9 ? '9+' : $pendingCount }}</span>
                @endif
            </a>
            @if(auth('admin')->user()->isSuperAdmin())
            <a href="{{ route('admin.admins.index') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm {{ request()->routeIs('admin.admins.*') ? 'bg-[#D4B84A]/10 text-[#D4B84A]' : 'text-white/50 hover:text-white hover:bg-white/5' }} transition-colors"
               @click="sidebarOpen = false">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                Admin Users
            </a>
            <a href="{{ route('admin.settings.notifications') }}"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm {{ request()->routeIs('admin.settings.*') ? 'bg-[#D4B84A]/10 text-[#D4B84A]' : 'text-white/50 hover:text-white hover:bg-white/5' }} transition-colors"
               @click="sidebarOpen = false">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                Settings
            </a>
            @endif
        </nav>

        <div class="p-4 border-t border-[#1e1e1e]">
            <div class="flex items-center gap-3 mb-3">
                <div class="w-8 h-8 rounded-full bg-[#D4B84A]/20 flex items-center justify-center flex-shrink-0">
                    <span class="text-[#D4B84A] text-xs font-semibold">{{ strtoupper(substr(auth('admin')->user()->name, 0, 1)) }}</span>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-white text-xs font-medium truncate">{{ auth('admin')->user()->name }}</p>
                    <p class="text-white/30 text-xs truncate">{{ ucfirst(str_replace('_', ' ', auth('admin')->user()->role)) }}</p>
                </div>
            </div>
            <form method="POST" action="{{ route('admin.logout') }}">
                @csrf
                <button type="submit" class="w-full text-left text-xs text-white/30 hover:text-white/60 transition-colors px-1">
                    Sign out
                </button>
            </form>
        </div>
    </aside>

    {{-- Main Content --}}
    <main class="lg:ml-60 min-h-screen flex flex-col">
        {{-- Top bar --}}
        <header class="h-14 border-b border-[#1e1e1e] flex items-center justify-between px-4 lg:px-8 bg-[#0d0d0d] sticky top-0 z-20">
            <div class="flex items-center gap-3">
                {{-- Hamburger — mobile only --}}
                <button class="lg:hidden text-white/50 hover:text-white transition-colors p-1.5 rounded-lg hover:bg-white/5"
                        @click="sidebarOpen = true" aria-label="Open menu">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"/>
                    </svg>
                </button>
                <h1 class="text-sm font-medium text-white/70">@yield('page-title', 'Dashboard')</h1>
            </div>
            <div class="flex items-center gap-4">
                <span class="text-white/30 text-xs hidden sm:block">{{ now()->format('d M Y') }}</span>
            </div>
        </header>

        <div class="p-4 lg:p-8 flex-1">
            @yield('content')
        </div>
    </main>

</body>
</html>
