@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'],
        ]],
        ['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'],
        ]],
        ['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'],
            ['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'],
        ]],
    ];
    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'],
        ]];
    }
@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-indigo-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-indigo-300/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-indigo-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-indigo-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">
                <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" placeholder="Buscar productos, mesas, pedidos..." 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>

            <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>

                <button 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>
                    <span class="absolute right-1.5 top-1.5 h-2 w-2 rounded-full bg-accent-500"></span>
                </button>

                <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>
@stack('scripts')
</body>
</html>
