@props(['title' => null])
@php
    $config = \App\Models\Restaurante::actual();
    $u = auth()->user();
    $nav = [
        ['Principal', [
            ['dashboard',        'Dashboard',       'route' => 'dashboard',         'pattern' => 'dashboard',   'icon' => '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'],
            ['pos',              'Punto de Venta',  'route' => 'pos.index',         'pattern' => 'pos*',        'icon' => 'M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z'],
        ]],
        ['Operación', [
            ['mesas',     'Mesas',    'route' => 'mesas.index',    'pattern' => 'mesas*',    'icon' => 'M4 6h16M4 10h16M4 14h16M4 18h16'],
            ['reservas',  'Reservas', 'route' => 'reservas.index', 'pattern' => 'reservas*', 'icon' => 'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'],
            ['pedidos',   'Pedidos',  'route' => 'pedidos.index',  'pattern' => 'pedidos*',  'icon' => 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01'],
            ['cocina',    'Cocina (KDS)', 'route' => 'cocina.index',   'pattern' => 'cocina*',   'icon' => 'M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.657 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z'],
            ['caja',      'Caja',     'route' => 'caja.index',     'pattern' => 'caja*',     'icon' => 'M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-2M9 12h12l-3-3m0 6l3-3'],
        ]],
        ['Carta', [
            ['categorias', 'Categorías', 'route' => 'categorias.index', 'pattern' => 'categorias*', 'icon' => 'M7 7h.01M7 3h5a1.99 1.99 0 011.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.99 1.99 0 013 12V7a4 4 0 014-4z'],
            ['productos',  'Carta / Menú', 'route' => 'productos.index', 'pattern' => 'productos*', 'icon' => 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253'],
            ['cartaqr',    'Carta QR',   'route' => 'cartaqr.index',  'pattern' => 'cartaqr*',  'icon' => 'M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z'],
        ]],
        ['Gestión', [
            ['clientes', 'Clientes',  'route' => 'clientes.index', 'pattern' => 'clientes*', 'icon' => 'M17 20h5v-2a4 4 0 00-3-3.87M9 20H4v-2a4 4 0 013-3.87m6-1.13a4 4 0 10-4-4 4 4 0 004 4zm6 0a4 4 0 10-3-6.7'],
            ['insumos',  'Inventario','route' => 'insumos.index',  'pattern' => 'insumos*',  'icon' => 'M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4'],
            ['kardex',   'Kardex',    'route' => 'kardex.index',   'pattern' => 'kardex*',   'icon' => 'M9 17v-6h13M9 17H4l3-3m-3 3l3 3M20 7H7l3-3M7 7l3 3M7 7v10'],
            ['promociones', 'Promociones', 'route' => 'promociones.index', 'pattern' => 'promociones*', 'icon' => 'M7 7h.01M3 5a2 2 0 012-2h4.586a1 1 0 01.707.293l7 7a2 2 0 010 2.828l-4.586 4.586a2 2 0 01-2.828 0l-7-7A1 1 0 013 9.586V5z'],
            ['reportes', 'Reportes',  'route' => 'reportes.index', 'pattern' => 'reportes*', 'icon' => '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'],
        ]],
        ['Facturación', array_values(array_filter([
            ['facturacion', 'Comprobantes', 'route' => 'facturacion.index', 'pattern' => 'facturacion.index', 'icon' => 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'],
            $u->role === 'admin' ? ['facturacion_config', 'Configuración FE', 'route' => 'facturacion.config.edit', 'pattern' => 'facturacion.config.*', 'icon' => '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.065 2.572c1.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.572 1.065c-.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.065-2.572c-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 M15 12a3 3 0 11-6 0 3 3 0 016 0z'] : null,
        ]))],
    ];
    if ($u->role === 'admin') {
        $nav[] = ['Administración', [
            ['usuarios',      'Usuarios',      'route' => 'usuarios.index',     'pattern' => 'usuarios*',      'icon' => 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z'],
            ['suscripcion', 'Suscripción', 'route' => 'suscripcion.index', 'pattern' => 'suscripcion*', 'icon' => 'M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z'],
            ['configuracion', 'Configuración', 'route' => 'configuracion.edit', 'pattern' => 'configuracion*', 'icon' => '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.065 2.572c1.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.572 1.065c-.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.065-2.572c-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 M15 12a3 3 0 11-6 0 3 3 0 016 0z'],
        ]];
    }

    // Notificaciones
    $rest = \App\Models\Restaurante::actual();
    $insumosBajos = \App\Models\Insumo::whereColumn('stock', '<=', 'stock_minimo')->orderBy('stock')->take(6)->get();
    $pedidosPendientes = \App\Models\Pedido::whereIn('estado', ['pendiente', 'preparando'])->count();
    $diasVence = ($rest && $rest->vigente()) ? $rest->diasRestantes() : null;
    $notisCount = $insumosBajos->count() + ($pedidosPendientes > 0 ? 1 : 0) + (($diasVence !== null && $diasVence <= 5) ? 1 : 0);
@endphp
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $title ? $title.' · ' : '' }}{{ $config->nombre_restaurante }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-slate-100" x-data="{ sidebarOpen: false }">
<div class="min-h-screen lg:flex">

    {{-- ===== SIDEBAR ===== --}}
    <div x-show="sidebarOpen" @click="sidebarOpen=false" class="fixed inset-0 z-30 bg-slate-900/50 lg:hidden" style="display:none"></div>

    <aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
           class="fixed inset-y-0 left-0 z-40 flex w-72 flex-col bg-gradient-to-b from-brand-800 to-brand-950 transition-transform duration-200 lg:static lg:translate-x-0">
        <div class="flex items-center gap-3 px-6 py-5">
            <div class="flex h-11 w-11 items-center justify-center rounded-2xl bg-white/15 text-xl backdrop-blur">🍽️</div>
            <div class="min-w-0">
                <p class="truncate text-sm font-extrabold text-white">{{ $config->nombre_restaurante }}</p>
                <p class="text-[11px] text-orange-200/70">Panel de administración</p>
            </div>
        </div>

        <nav class="flex-1 space-y-6 overflow-y-auto px-4 pb-6">
            @foreach ($nav as [$grupo, $items])
                <div>
                    <p class="px-4 pb-2 text-[10px] font-bold uppercase tracking-wider text-orange-200/50">{{ $grupo }}</p>
                    <div class="space-y-1">
                        @foreach ($items as $item)
                            <a href="{{ route($item['route']) }}"
                               class="sidebar-link {{ request()->routeIs($item['pattern']) ? 'active' : '' }}">
                                <svg class="h-5 w-5 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="{{ $item['icon'] }}"/>
                                </svg>
                                <span>{{ $item[1] }}</span>
                            </a>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </nav>

        <div class="border-t border-white/10 p-4">
            <div class="flex items-center gap-3 rounded-xl bg-white/5 px-3 py-2.5">
                <div class="flex h-9 w-9 items-center justify-center rounded-full bg-accent-500 text-sm font-bold text-white">{{ $u->iniciales }}</div>
                <div class="min-w-0 flex-1">
                    <p class="truncate text-sm font-semibold text-white">{{ $u->name }}</p>
                    <p class="text-[11px] text-orange-200/70">{{ $u->role_label }}</p>
                </div>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" title="Cerrar sesión" class="rounded-lg p-1.5 text-orange-200/70 hover:bg-white/10 hover:text-white">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
                    </button>
                </form>
            </div>
        </div>
    </aside>

    {{-- ===== MAIN ===== --}}
    <div class="flex min-w-0 flex-1 flex-col">
        {{-- Topbar --}}
        <header class="sticky top-0 z-20 flex items-center gap-4 border-b border-slate-200 bg-white/80 px-4 py-3 backdrop-blur sm:px-6">
            <button @click="sidebarOpen=true" class="rounded-lg p-2 text-slate-500 hover:bg-slate-100 lg:hidden">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
            </button>

            <div class="relative hidden flex-1 max-w-md sm:block" x-data="buscador()" @click.outside="abierto=false">
                <svg class="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                <input type="text" x-model="q" @input.debounce.300ms="buscar()" @focus="if(q.length>1) abierto=true" placeholder="Buscar productos, mesas, pedidos, clientes..." class="w-full rounded-xl border-slate-200 bg-slate-50 py-2 pl-10 text-sm focus:border-brand-400 focus:ring-brand-400">
                <div x-show="abierto" x-cloak class="absolute z-30 mt-2 max-h-96 w-full overflow-auto rounded-xl border border-slate-100 bg-white py-2 shadow-xl">
                    <p x-show="cargando" class="px-4 py-3 text-sm text-slate-400">Buscando…</p>
                    <p x-show="!cargando && grupos.length===0" class="px-4 py-3 text-sm text-slate-400">Sin resultados.</p>
                    <template x-for="g in grupos" :key="g.nombre">
                        <div>
                            <p class="px-4 pb-1 pt-2 text-[10px] font-bold uppercase tracking-wide text-slate-400" x-text="g.nombre"></p>
                            <template x-for="it in g.items" :key="it.url + it.titulo">
                                <a :href="it.url" class="flex items-center justify-between gap-3 px-4 py-2 hover:bg-slate-50">
                                    <span class="truncate text-sm font-medium text-slate-700" x-text="it.titulo"></span>
                                    <span class="shrink-0 text-xs text-slate-400" x-text="it.detalle"></span>
                                </a>
                            </template>
                        </div>
                    </template>
                </div>
            </div>

            <div class="ml-auto flex items-center gap-2">
                <a href="{{ route('pos.index') }}" class="btn-primary hidden sm:inline-flex">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                    Nueva venta
                </a>

                <div class="relative" x-data="{ open:false }">
                    <button @click="open=!open" class="relative rounded-xl p-2 text-slate-500 hover:bg-slate-100">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                        @if($notisCount > 0)<span class="absolute right-0.5 top-0.5 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-accent-500 px-1 text-[10px] font-bold text-white">{{ $notisCount }}</span>@endif
                    </button>
                    <div x-show="open" @click.outside="open=false" x-transition x-cloak style="display:none" class="absolute right-0 z-30 mt-2 w-80 rounded-xl border border-slate-100 bg-white py-2 shadow-xl">
                        <p class="border-b border-slate-50 px-4 pb-2 pt-1 text-sm font-bold text-slate-700">Notificaciones</p>
                        @if($pedidosPendientes > 0)
                            <a href="{{ route('cocina.index') }}" class="flex items-start gap-3 px-4 py-2.5 hover:bg-slate-50">
                                <span class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-amber-50 text-amber-600">🍳</span>
                                <span class="text-sm text-slate-600"><strong class="text-slate-800">{{ $pedidosPendientes }}</strong> pedido(s) en cocina por preparar.</span>
                            </a>
                        @endif
                        @if($diasVence !== null && $diasVence <= 5)
                            <a href="{{ route('suscripcion.index') }}" class="flex items-start gap-3 px-4 py-2.5 hover:bg-slate-50">
                                <span class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-accent-50 text-accent-600">⏰</span>
                                <span class="text-sm text-slate-600">Tu plan vence en <strong class="text-slate-800">{{ $diasVence }} día(s)</strong>.</span>
                            </a>
                        @endif
                        @foreach($insumosBajos as $ins)
                            <a href="{{ route('kardex.index', ['insumo_id' => $ins->id]) }}" class="flex items-start gap-3 px-4 py-2.5 hover:bg-slate-50">
                                <span class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-rose-50 text-rose-600">📦</span>
                                <span class="text-sm text-slate-600">Stock bajo: <strong class="text-slate-800">{{ $ins->nombre }}</strong> ({{ number_format($ins->stock,2) }} {{ $ins->unidad }})</span>
                            </a>
                        @endforeach
                        @if($notisCount === 0)
                            <p class="px-4 py-6 text-center text-sm text-slate-400">Todo en orden ✨</p>
                        @endif
                    </div>
                </div>

                <div class="relative" x-data="{ open: false }">
                    <button @click="open=!open" class="flex items-center gap-2 rounded-xl p-1.5 hover:bg-slate-100">
                        <div class="flex h-9 w-9 items-center justify-center rounded-full bg-brand-600 text-sm font-bold text-white">{{ $u->iniciales }}</div>
                        <span class="hidden text-sm font-semibold text-slate-700 sm:block">{{ $u->name }}</span>
                        <svg class="hidden h-4 w-4 text-slate-400 sm:block" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
                    </button>
                    <div x-show="open" @click.outside="open=false" x-transition style="display:none"
                         class="absolute right-0 mt-2 w-48 rounded-xl border border-slate-100 bg-white py-1.5 shadow-xl">
                        <a href="{{ route('profile.edit') }}" class="block px-4 py-2 text-sm text-slate-600 hover:bg-slate-50">Mi perfil</a>
                        @if($u->role === 'admin')
                            <a href="{{ route('configuracion.edit') }}" class="block px-4 py-2 text-sm text-slate-600 hover:bg-slate-50">Configuración</a>
                        @endif
                        <div class="my-1 border-t border-slate-100"></div>
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit" class="block w-full px-4 py-2 text-left text-sm text-accent-600 hover:bg-accent-50">Cerrar sesión</button>
                        </form>
                    </div>
                </div>
            </div>
        </header>

        {{-- Banner de suscripción --}}
        @php $rest = \App\Models\Restaurante::actual(); @endphp
        @if ($rest && $rest->estado === 'trial' && $rest->vigente())
            <div class="mx-4 mt-4 flex flex-wrap items-center justify-between gap-2 rounded-xl bg-amber-50 px-4 py-3 text-sm text-amber-800 sm:mx-6">
                <span>🎁 Estás en tu periodo de prueba — te quedan <strong>{{ $rest->diasRestantes() }} días</strong>.</span>
                <a href="{{ route('suscripcion.index') }}" class="font-semibold text-amber-900 underline">Elegir un plan</a>
            </div>
        @elseif ($rest && ! $rest->vigente())
            <div class="mx-4 mt-4 flex flex-wrap items-center justify-between gap-2 rounded-xl bg-accent-50 px-4 py-3 text-sm text-accent-700 sm:mx-6">
                <span>⚠️ Tu suscripción no está activa. Renueva tu plan para seguir usando todas las funciones.</span>
                <a href="{{ route('suscripcion.index') }}" class="font-semibold text-accent-700 underline">Reactivar suscripción</a>
            </div>
        @endif

        {{-- Flash --}}
        @if (session('success') || session('status'))
            <div class="mx-4 mt-4 rounded-xl bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-700 sm:mx-6">
                {{ session('success') ?? session('status') }}
            </div>
        @endif
        @if (session('error'))
            <div class="mx-4 mt-4 rounded-xl bg-accent-50 px-4 py-3 text-sm font-medium text-accent-700 sm:mx-6">
                {{ session('error') }}
            </div>
        @endif

        <main class="flex-1 p-4 sm:p-6">
            {{ $slot }}
        </main>
    </div>
</div>
<script>
    function buscador() {
        return {
            q: '', abierto: false, cargando: false, grupos: [],
            async buscar() {
                if (this.q.trim().length < 2) { this.grupos = []; this.abierto = false; return; }
                this.abierto = true; this.cargando = true;
                try {
                    const r = await fetch("{{ route('buscar') }}?q=" + encodeURIComponent(this.q), { headers: { 'Accept': 'application/json' } });
                    const d = await r.json();
                    this.grupos = d.grupos || [];
                } catch (e) { this.grupos = []; }
                this.cargando = false;
            },
        }
    }
</script>
@stack('scripts')
</body>
</html>