@props(['title' => null, 'pageTitle' => 'Restaurant Portal'])

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title ? $title . ' | ' : '' }}Client Portal</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-zinc-50 font-sans antialiased text-zinc-900">
    <div class="flex min-h-screen">
        <!-- Sidebar -->
        <aside class="w-64 border-r border-zinc-200 bg-white hidden md:flex flex-col z-20">
            <div class="p-6 border-b border-zinc-200">
                <div class="flex items-center space-x-3">
                    <div class="w-9 h-9 bg-amber-600 rounded-sm flex items-center justify-center text-white font-bold shadow-lg shadow-amber-900/10">
                        {{ substr(auth()->user()->activeBranch->name ?? 'R', 0, 1) }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <h2 class="text-xs font-bold truncate uppercase tracking-tight text-zinc-900">{{ auth()->user()->activeBranch->name ?? 'No Branch' }}</h2>
                        <p class="text-[9px] text-amber-600 font-bold uppercase tracking-widest">Active Branch</p>
                    </div>
                </div>
            </div>
            
            <nav class="flex-1 p-3 space-y-1 overflow-y-auto">
                <a href="{{ route('portal.dashboard') }}" class="flex items-center px-3 py-2 text-xs font-medium rounded-sm {{ request()->routeIs('portal.dashboard') ? 'bg-amber-50 text-amber-600 border-l-2 border-amber-600' : 'text-zinc-600 hover:bg-zinc-50' }}">
                    Dashboard
                </a>
                <a href="{{ route('portal.settings.edit') }}" class="flex items-center px-3 py-2 text-xs font-medium rounded-sm {{ request()->routeIs('portal.settings.*') ? 'bg-amber-50 text-amber-600 border-l-2 border-amber-600' : 'text-zinc-600 hover:bg-zinc-50' }}">
                    Settings
                </a>
                <div class="pt-6 pb-2 px-3 text-[10px] font-bold text-zinc-400 uppercase tracking-widest">Workspace</div>
                <a href="{{ route('portal.categories.index') }}" class="flex items-center px-3 py-2 text-xs font-medium rounded-sm {{ request()->routeIs('portal.categories.*') ? 'bg-amber-50 text-amber-600 border-l-2 border-amber-600' : 'text-zinc-600 hover:bg-zinc-50' }}">
                    Categories
                </a>
                <a href="{{ route('portal.items.index') }}" class="flex items-center px-3 py-2 text-xs font-medium rounded-sm {{ request()->routeIs('portal.items.*') ? 'bg-amber-50 text-amber-600 border-l-2 border-amber-600' : 'text-zinc-600 hover:bg-zinc-50' }}">
                    Menu Items
                </a>
                <a href="{{ route('portal.deals.index') }}" class="flex items-center px-3 py-2 text-xs font-medium rounded-sm {{ request()->routeIs('portal.deals.*') ? 'bg-amber-50 text-amber-600 border-l-2 border-amber-600' : 'text-zinc-600 hover:bg-zinc-50' }}">
                    Deals & Offers
                </a>
                <div class="pt-6 pb-2 px-3 text-[10px] font-bold text-zinc-400 uppercase tracking-widest">Layout</div>
                <a href="{{ route('portal.table-areas.index') }}" class="flex items-center px-3 py-2 text-xs font-medium rounded-sm {{ request()->routeIs('portal.table-areas.*') ? 'bg-amber-50 text-amber-600 border-l-2 border-amber-600' : 'text-zinc-600 hover:bg-zinc-50' }}">
                    Areas/Zones
                </a>
                <a href="{{ route('portal.tables.index') }}" class="flex items-center px-3 py-2 text-xs font-medium rounded-sm {{ request()->routeIs('portal.tables.*') ? 'bg-amber-50 text-amber-600 border-l-2 border-amber-600' : 'text-zinc-600 hover:bg-zinc-50' }}">
                    Tables Grid
                </a>
                <div class="pt-6 pb-2 px-3 text-[10px] font-bold text-zinc-400 uppercase tracking-widest">Team</div>
                <a href="{{ route('portal.staff.index') }}" class="flex items-center px-3 py-2 text-xs font-medium rounded-sm {{ request()->routeIs('portal.staff.*') ? 'bg-amber-50 text-amber-600 border-l-2 border-amber-600' : 'text-zinc-600 hover:bg-zinc-50' }}">
                    Staff Members
                </a>
            </nav>

            <div class="p-4 border-t border-zinc-100 bg-zinc-50/50">
                <div class="flex items-center space-x-3 mb-4 p-2 rounded-sm bg-white border border-zinc-200 shadow-sm">
                    <div class="w-8 h-8 rounded-full bg-zinc-100 flex items-center justify-center text-xs font-bold text-zinc-600 border border-zinc-200">
                        {{ substr(auth()->user()->name, 0, 1) }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-xs font-bold truncate leading-none text-zinc-900">{{ auth()->user()->name }}</p>
                        <a href="{{ route('portal.branches.select') }}" class="text-[9px] text-amber-600 hover:underline font-bold uppercase tracking-tight mt-1 inline-block">Switch Branch</a>
                    </div>
                </div>
                <form action="{{ route('portal.logout') }}" method="POST">
                    @csrf
                    <button type="submit" class="w-full px-2 py-2 text-[10px] font-bold uppercase tracking-widest text-zinc-500 border border-zinc-200 rounded-sm hover:bg-white hover:text-red-600 transition-all">
                        Exit Portal
                    </button>
                </form>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 flex flex-col min-w-0">
            <!-- Header -->
            <header class="h-14 border-b border-zinc-200 bg-white flex items-center justify-between px-6 sticky top-0 z-10">
                <h1 class="text-xs font-bold text-zinc-400 uppercase tracking-widest">{{ $pageTitle }}</h1>
                <div class="flex items-center space-x-4">
                    <div class="flex items-center space-x-2 px-3 py-1 rounded-full bg-green-50 text-green-600 border border-green-200">
                        <div class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></div>
                        <span class="text-[10px] font-bold uppercase tracking-tight">Active Session</span>
                    </div>
                </div>
            </header>

            <div class="p-8 overflow-auto">
                @if(session('success'))
                    <div class="mb-6 p-4 bg-emerald-50 border border-emerald-200 text-emerald-600 rounded-sm flex items-center space-x-3 animate-in fade-in slide-in-from-top-4 duration-300">
                        <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="2" d="M5 13l4 4L19 7"></path></svg>
                        <p class="text-[11px] font-bold uppercase tracking-tight">{{ session('success') }}</p>
                    </div>
                @endif

                @if(session('error'))
                    <div class="mb-6 p-4 bg-rose-50 border border-rose-200 text-rose-600 rounded-sm flex items-center space-x-3 animate-in fade-in slide-in-from-top-4 duration-300">
                        <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="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                        <p class="text-[11px] font-bold uppercase tracking-tight">{{ session('error') }}</p>
                    </div>
                @endif

                {{ $slot }}
            </div>
        </main>
    </div>
</body>
</html>
