<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title') | Super Admin</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-zinc-50 dark:bg-zinc-950 font-sans antialiased text-zinc-900 dark:text-zinc-100">
    <div class="flex min-h-screen">
        <!-- Sidebar -->
        <aside class="w-56 border-r border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hidden md:flex flex-col z-20">
            <div class="p-4 border-b border-zinc-200 dark:border-zinc-800 bg-amber-600 dark:bg-amber-600/10">
                <div class="flex items-center space-x-2">
                    <div class="w-6 h-6 bg-white dark:bg-amber-500 rounded-sm flex items-center justify-center text-amber-600 dark:text-zinc-900">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path></svg>
                    </div>
                    <span class="text-xs font-bold tracking-tighter uppercase text-white dark:text-amber-500">Restaurant OS</span>
                </div>
            </div>
            
            <nav class="flex-1 p-2 space-y-0.5 overflow-y-auto">
                <div class="px-3 py-2 text-[10px] font-bold text-zinc-400 uppercase tracking-widest">Main</div>
                <a href="{{ route('super-admin.dashboard') }}" class="flex items-center px-3 py-1.5 text-xs font-medium rounded-sm {{ request()->routeIs('super-admin.dashboard') ? 'bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-500 border-l-2 border-amber-600' : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800' }}">
                    Dashboard
                </a>
                <a href="{{ route('clients.index') }}" class="flex items-center px-3 py-1.5 text-xs font-medium rounded-sm {{ request()->routeIs('clients.*') ? 'bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-500 border-l-2 border-amber-600' : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800' }}">
                    Clients
                </a>
                <a href="{{ route('branches.index') }}" class="flex items-center px-3 py-1.5 text-xs font-medium rounded-sm {{ request()->routeIs('branches.*') ? 'bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-500 border-l-2 border-amber-600' : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800' }}">
                    Branches
                </a>
                <a href="{{ route('settings.edit') }}" class="flex items-center px-3 py-1.5 text-xs font-medium rounded-sm {{ request()->routeIs('settings.*') ? 'bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-500 border-l-2 border-amber-600' : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800' }}">
                    Settings
                </a>
            </nav>

            <div class="p-3 border-t border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50">
                <div class="flex items-center space-x-3 mb-3 p-1">
                    <div class="w-7 h-7 rounded-sm bg-amber-600 flex items-center justify-center text-[10px] font-bold text-white shadow-sm">
                        {{ substr(auth()->user()->name, 0, 1) }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-[10px] font-bold truncate leading-tight">{{ auth()->user()->name }}</p>
                        <p class="text-[9px] text-zinc-500 truncate leading-tight">{{ auth()->user()->email }}</p>
                    </div>
                </div>
                <form action="{{ route('super-admin.logout') }}" method="POST">
                    @csrf
                    <button type="submit" class="w-full px-2 py-1.5 text-[10px] font-bold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 border border-zinc-200 dark:border-zinc-800 rounded-sm hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-red-500 dark:hover:text-red-400 transition-all active:scale-[0.97]">
                        Terminate Session
                    </button>
                </form>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 flex flex-col min-w-0 bg-white dark:bg-zinc-950">
            <!-- Topbar -->
            <header class="h-12 border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900/50 backdrop-blur-sm flex items-center justify-between px-4 sticky top-0 z-10">
                <div class="flex items-center space-x-2">
                    <h2 class="text-xs font-bold text-zinc-500 uppercase tracking-widest">@yield('page_title', 'Platform Overview')</h2>
                </div>
            </header>

            <div class="p-4 md:p-6 overflow-auto">
                @if(session('success'))
                    <div class="mb-4 p-2 bg-green-500/10 border border-green-500/20 rounded-sm text-green-500 text-[11px] font-bold uppercase tracking-widest">
                        {{ session('success') }}
                    </div>
                @endif

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