@php
// Definición del Menú mapeado a tus rutas de Laravel (web.php)
$menu = [
    // --- OPERATIVOS ---
    ['name' => 'Bar', 'route' => 'op.bar', 'icon' => 'beer', 'accent' => 'amber'],
    ['name' => 'Cocina', 'route' => 'op.kitchen', 'icon' => 'chef-hat', 'accent' => 'red'],
    
    // --- MESERO ---
    [
        'name' => 'Mesero', 'icon' => 'utensils', 'accent' => 'blue',
        'submenu' => [
            ['name' => 'Panel', 'route' => 'waiter.dashboard', 'icon' => 'layout-dashboard'],
            ['name' => 'Pedidos', 'route' => 'waiter.orders', 'icon' => 'clipboard-list'],
            ['name' => 'Reservas', 'route' => 'waiter.reservations', 'icon' => 'calendar-check'],
        ]
    ],
    
    // --- CAJA Y ALMACEN ---
    ['name' => 'Caja', 'route' => 'op.cashier', 'icon' => 'store', 'accent' => 'emerald'],
    ['name' => 'Almacén', 'route' => 'op.warehouse', 'icon' => 'package', 'accent' => 'orange'],
    
    // --- GERENCIA ---
    [
        'name' => 'Gerencia', 'icon' => 'pie-chart', 'accent' => 'purple',
        'submenu' => [
            ['name' => 'Panel', 'route' => 'manager.dashboard', 'icon' => 'bar-chart-2'],
            ['name' => 'Auditoría', 'route' => 'manager.audit', 'icon' => 'file-search'],
            ['name' => 'Reportes', 'route' => 'manager.reports', 'icon' => 'file-text'],
            ['name' => 'Personal', 'route' => 'manager.staff', 'icon' => 'users'],
        ]
    ],
    
    // --- ADMIN ---
    [
        'name' => 'Admin', 'icon' => 'shield-check', 'accent' => 'slate',
        'submenu' => [
            ['name' => 'Panel', 'route' => 'admin.dashboard', 'icon' => 'layout-dashboard'],
            ['name' => 'RRHH', 'route' => 'admin.hr', 'icon' => 'user-cog'],
            ['name' => 'CRM', 'route' => 'admin.crm', 'icon' => 'heart-handshake'],
            ['name' => 'Precios', 'route' => 'admin.prices', 'icon' => 'tag'],
            ['name' => 'Promos', 'route' => 'admin.promotions', 'icon' => 'zap'],
            ['name' => 'Config', 'route' => 'admin.settings', 'icon' => 'settings'],
        ]
    ],
];
@endphp

{{-- ESTILOS OBSIDIAN DOCK (Integrados aquí para que no falten) --}}
<style>
    :root {
        --glass-border: rgba(255, 255, 255, 0.08);
        --glass-surface: rgba(2, 6, 23, 0.85);
    }
    .obsidian-dock {
        background: var(--glass-surface);
        backdrop-filter: blur(40px);
        -webkit-backdrop-filter: blur(40px);
        border: 1px solid var(--glass-border);
        transition: all 0.5s ease;
        overflow: visible; /* Vital para dropdowns */
        max-width: 98vw;
    }
    .dock-item {
        position: relative; transition: all 0.3s; color: #94a3b8; overflow: hidden; white-space: nowrap;
    }
    .dock-item:hover { color: white; transform: translateY(-2px); text-shadow: 0 0 8px rgba(255,255,255,0.3); }
    .dock-item.active {
        background: rgba(255, 255, 255, 0.1); color: white !important;
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.05);
    }
    .dock-item.active i { color: #60a5fa; filter: drop-shadow(0 0 5px #3b82f6); }
    
    /* Dropdowns */
    .cyber-dropdown {
        position: absolute; top: calc(100% + 12px); left: 50%;
        transform: translateX(-50%) translateY(10px) scale(0.95);
        min-width: 200px; background: #ffffff; border-radius: 16px; padding: 6px;
        opacity: 0; visibility: hidden; transition: all 0.2s;
        box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
        z-index: 9999;
    }
    .cyber-dropdown::after {
        content: ''; position: absolute; top: -6px; left: 50%; margin-left: -6px;
        border-width: 0 6px 6px; border-style: solid; border-color: transparent transparent #fff transparent;
    }
    .group:hover .cyber-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1); }
    
    .cyber-item {
        display: flex; align-items: center; gap: 10px; padding: 10px;
        border-radius: 10px; font-size: 0.85rem; font-weight: 600; color: #475569;
        transition: 0.2s;
    }
    .cyber-item:hover { background: #f1f5f9; color: #1d4ed8; }
    .cyber-item.active { background: #eff6ff; color: #1d4ed8; }
</style>

<header class="fixed top-4 left-0 right-0 z-[50] flex justify-center px-2 pointer-events-none">
    <div class="w-full max-w-[1600px] obsidian-dock rounded-full px-4 lg:px-5 py-2 relative pointer-events-auto">
        
        <div class="flex items-center justify-between gap-2 lg:gap-6">

            {{-- 1. LOGO (Usando asset() desde public/images/) --}}
            <div class="flex items-center gap-3 shrink-0 pl-1">
                <img src="{{ asset('images/logopiter.png') }}" 
                     alt="Logo" 
                     class="w-8 h-8 lg:w-10 lg:h-10 object-contain drop-shadow-[0_0_10px_rgba(255,255,255,0.3)]">
                
                <div class="hidden md:flex flex-col">
                    <h1 class="text-lg lg:text-xl font-[900] tracking-tighter text-white leading-none drop-shadow-md">PITER!</h1>
                    <span class="text-[8px] text-slate-400 tracking-[0.3em] uppercase font-bold">Elite</span>
                </div>
            </div>

            {{-- 2. MENÚ CENTRAL --}}
            <nav class="flex-1 flex justify-center">
                <div class="flex items-center gap-1 lg:gap-1.5 flex-nowrap"> 
                    @foreach($menu as $item)
                        @php
                            $isActive = false;
                            // Lógica de activación basada en rutas de Laravel
                            if (isset($item['submenu'])) {
                                foreach($item['submenu'] as $sub) {
                                    if (request()->routeIs($sub['route'])) { $isActive = true; break; }
                                }
                            } else {
                                if (request()->routeIs($item['route'])) $isActive = true;
                            }
                        @endphp

                        <div class="relative group shrink-0">
                            @if(isset($item['submenu']))
                                {{-- Botón con Dropdown --}}
                                <button class="dock-item flex items-center gap-2 px-3 lg:px-4 py-2.5 rounded-full text-[10px] lg:text-xs font-bold uppercase tracking-wide {{ $isActive ? 'active' : '' }}">
                                    <i data-lucide="{{ $item['icon'] }}" class="w-3.5 h-3.5 lg:w-4 lg:h-4 relative z-10"></i>
                                    <span class="block relative z-10">{{ $item['name'] }}</span>
                                    <i data-lucide="chevron-down" class="w-3 h-3 opacity-50 group-hover:rotate-180 transition-transform duration-300 relative z-10"></i>
                                </button>
                                
                                <div class="cyber-dropdown">
                                    <div class="px-3 py-2 mb-2 border-b border-slate-100 flex justify-between items-center bg-slate-50/50 rounded-t-[14px]">
                                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
                                            <span class="w-1.5 h-1.5 rounded-full bg-[#194B95]"></span> {{ $item['name'] }}
                                        </p>
                                    </div>
                                    <div class="flex flex-col gap-1 p-1">
                                        @foreach($item['submenu'] as $subItem)
                                            <a href="{{ route($subItem['route']) }}" class="cyber-item {{ request()->routeIs($subItem['route']) ? 'active' : '' }}">
                                                <i data-lucide="{{ $subItem['icon'] }}" class="w-3.5 h-3.5"></i>
                                                <span>{{ $subItem['name'] }}</span>
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            @else
                                {{-- Botón Simple --}}
                                <a href="{{ route($item['route']) }}" 
                                   class="dock-item flex items-center gap-2 px-3 lg:px-4 py-2.5 rounded-full text-[10px] lg:text-xs font-bold uppercase tracking-wide {{ $isActive ? 'active' : '' }}">
                                    <i data-lucide="{{ $item['icon'] }}" class="w-3.5 h-3.5 lg:w-4 lg:h-4 relative z-10"></i>
                                    <span class="block relative z-10">{{ $item['name'] }}</span>
                                </a>
                            @endif
                        </div>
                    @endforeach
                </div>
            </nav>

            {{-- 3. PERFIL (Derecha) --}}
            <div class="flex items-center gap-2 lg:gap-3 shrink-0 pl-3 border-l border-white/10">
                <button class="w-9 h-9 flex items-center justify-center rounded-full bg-white/5 border border-white/10 text-slate-300 hover:text-white">
                    <i data-lucide="bell" class="w-4 h-4"></i>
                </button>
                
                {{-- Formulario Logout --}}
                {{-- Formulario Logout --}}
                <form action="{{ route('logout') }}" method="POST">
                    @csrf
                    <button type="submit" title="Cerrar Sesión" class="w-9 h-9 rounded-full bg-red-600 flex items-center justify-center text-white hover:bg-red-500 transition shadow-lg group">
                        <i data-lucide="log-out" class="w-4 h-4 group-hover:scale-110 transition-transform"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>
</header>