<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    
    <title>{{ \App\Models\Configuracion::get('empresa_nombre', 'GastroGe') ?? 'Mi Restaurante' }}</title>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        /* === VARIABLES DE ESTILO "GLAM" === */
        :root {
            --primary: #4f46e5;
            --primary-hover: #4338ca;
            --dark-bg: #0f172a;
            --light-bg: #f3f4f6;
            --card-bg: #ffffff;
            --text-main: #1e293b;
            --text-muted: #64748b;
            
            --radius-xl: 24px;
            --radius-md: 16px;
            --radius-sm: 12px;
            
            --shadow-soft: 0 10px 40px -10px rgba(0,0,0,0.08);
        }

        body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            background-color: var(--light-bg); 
            color: var(--text-main);
            font-size: 0.95rem;
            overflow-x: hidden;
        }

        /* === 1. SIDEBAR ESTILO APP === */
        .sidebar {
            width: 280px; 
            height: 100vh; 
            position: fixed; 
            top: 0; left: 0;
            background: var(--dark-bg); 
            color: white;
            z-index: 1050;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex; flex-direction: column;
            padding: 20px 0;
        }

        .sidebar-header {
            padding: 0 20px 20px 20px;
            display: flex; align-items: center; gap: 15px;
            flex-shrink: 0;
        }
        
        /* SCROLLBAR PERSONALIZADO PARA EL MENÚ */
        .sidebar-menu {
            padding: 10px 15px;
            flex-grow: 1; 
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.2) transparent;
        }

        .sidebar-menu::-webkit-scrollbar { width: 6px; }
        .sidebar-menu::-webkit-scrollbar-track { background: transparent; }
        .sidebar-menu::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); border-radius: 20px; }
        .sidebar-menu::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.4); }

        .logo-box {
            width: 48px; height: 48px;
            background: linear-gradient(135deg, #6366f1, #4f46e5);
            color: white; border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            font-size: 24px;
            box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4);
        }

        .brand-name { font-weight: 800; font-size: 20px; letter-spacing: -0.5px; color: white; }

        .menu-category {
            color: #94a3b8; font-size: 0.7rem; 
            text-transform: uppercase; font-weight: 700; 
            letter-spacing: 1px; margin: 20px 10px 10px;
        }

        .nav-link {
            color: #cbd5e1;
            padding: 14px 18px;
            border-radius: var(--radius-md);
            margin-bottom: 5px;
            font-weight: 500;
            transition: all 0.2s ease;
            display: flex; align-items: center;
            text-decoration: none;
        }
        
        .nav-link i { font-size: 1.3rem; margin-right: 14px; opacity: 0.7; transition: opacity 0.2s; }
        
        .nav-link:hover {
            background: rgba(255,255,255,0.08);
            color: white;
            transform: translateX(5px);
        }
        
        .nav-link.active {
            background: var(--primary);
            color: white;
            box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.5);
        }
        .nav-link.active i { opacity: 1; }

        /* === 2. MAIN CONTENT & TOPBAR === */
        .main-content {
            margin-left: 280px;
            padding: 20px 30px;
            min-height: 100vh;
            transition: margin-left 0.3s;
            display: flex; 
            flex-direction: column;
        }

        .top-navbar {
            background: white;
            border-radius: var(--radius-md);
            padding: 10px 20px;
            margin-bottom: 25px;
            box-shadow: var(--shadow-soft);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .user-profile-btn {
            display: flex; align-items: center; gap: 12px;
            padding: 5px 10px; border-radius: 50px;
            transition: background 0.2s;
            cursor: pointer;
            border: 1px solid transparent;
        }
        .user-profile-btn:hover { background: #f8fafc; border-color: #e2e8f0; }

        .user-avatar {
            width: 38px; height: 38px;
            background: linear-gradient(135deg, #f472b6, #db2777);
            color: white; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-weight: 700;
        }

        /* === 3. COMPONENTES GENERALES === */
        .card {
            border: none;
            background: var(--card-bg);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-soft);
            overflow: hidden;
            margin-bottom: 20px;
        }
        .card-header { background: transparent; border-bottom: 1px solid #f1f5f9; padding: 1.5rem; }
        .card-body { padding: 1.5rem; }

        .btn { padding: 0.6rem 1.4rem; border-radius: 50px; font-weight: 600; border: none; }
        .btn-primary { background: var(--primary); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3); color: white; }
        .btn-primary:hover { background: var(--primary-hover); color: white; }
        .btn-sm { padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.85rem; }
        
        .form-control, .form-select {
            background-color: #f8fafc; border: 1px solid #e2e8f0;
            border-radius: var(--radius-sm); padding: 0.8rem 1rem;
        }
        .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1); background: white; }

        .card-solid { color: white !important; border-radius: var(--radius-xl); position: relative; overflow: hidden; }
        .bg-gradient-blue { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; }
        .bg-gradient-green { background: linear-gradient(135deg, #10b981, #059669) !important; }
        .bg-gradient-red { background: linear-gradient(135deg, #ef4444, #b91c1c) !important; }
        .bg-gradient-cyan { background: linear-gradient(135deg, #06b6d4, #0891b2) !important; }
        .card-solid h2 { font-size: 2.5rem; font-weight: 800; margin: 10px 0; }
        .card-solid .icon-bg { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 5rem; opacity: 0.15; pointer-events: none; }

        /* Responsive */
        @media (max-width: 991px) {
            .sidebar { transform: translateX(-100%); width: 100%; border-radius: 0; }
            .sidebar.show { transform: translateX(0); }
            .main-content { margin-left: 0; padding: 15px; }
            .mobile-overlay {
                position: fixed; top: 0; left: 0; width: 100%; height: 100%;
                background: rgba(15, 23, 42, 0.8); z-index: 1040;
                backdrop-filter: blur(4px); display: none;
            }
            .mobile-overlay.show { display: block; }
        }
    </style>
    <!-- TomSelect CSS Global -->
    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
    <style>
        .ts-control { border-radius: 0.375rem; padding: 0.5rem 0.75rem; border-color: #dee2e6; }
        .ts-control.form-select-sm { padding: 0.25rem 0.5rem; }
    </style>
    @stack('styles')
</head>
<body>

<div class="mobile-overlay" id="mobileOverlay" onclick="closeMenu()"></div>

<div class="sidebar" id="sidebar">
    <div class="sidebar-header">
        <div class="logo-box"><i class="bi bi-shop"></i></div>
        <div class="brand-name ps-2 text-truncate">{{ \App\Models\Configuracion::get('empresa_nombre', 'GastroGe') }}</div>
        <button class="btn btn-sm text-secondary d-lg-none ms-auto" onclick="closeMenu()"><i class="bi bi-x-lg"></i></button>
    </div>

    <div class="sidebar-menu">
        <a href="{{ route('dashboard') }}" class="nav-link {{ request()->routeIs('dashboard') ? 'active' : '' }}">
            <i class="bi bi-grid-1x2-fill"></i> Dashboard
        </a>

        <div class="menu-category">Producción</div>
        @can('ver.insumos')
            <a href="{{ route('insumos.index') }}" class="nav-link {{ request()->routeIs('insumos.*') ? 'active' : '' }}">
                <i class="bi bi-box-seam-fill"></i> Insumos
            </a>
        @endcan
        @can('ver.recetas')
            <a href="{{ route('recetas.index') }}" class="nav-link {{ request()->routeIs('recetas.*') ? 'active' : '' }}">
                <i class="bi bi-book-half"></i> Recetas
            </a>
        @endcan
        @can('ver.programacion')
            <a href="{{ route('programaciones.index') }}" class="nav-link {{ request()->routeIs('programaciones.*') ? 'active' : '' }}">
                <i class="bi bi-calendar-check-fill"></i> Calendario
            </a>
        @endcan
        @can('ver.picking')
            <a href="{{ route('picking.index') }}" class="nav-link {{ request()->routeIs('picking.*') ? 'active' : '' }}">
                <i class="bi bi-check2-square"></i> Picking
            </a>
        @endcan

        <div class="menu-category">Logística</div>
        @can('ver.compras')
            <a href="{{ route('compras.index') }}" class="nav-link {{ request()->routeIs('compras.*') ? 'active' : '' }}">
                <i class="bi bi-cart-fill"></i> Compras
            </a>
        @endcan
        @can('ver.almacen')
            <a href="{{ route('almacen.index') }}" class="nav-link {{ request()->routeIs('almacen.*') ? 'active' : '' }}">
                <i class="bi bi-archive-fill"></i> Almacén
            </a>
        @endcan
        @can('ver.proveedores')
            <a href="{{ route('proveedores.index') }}" class="nav-link {{ request()->routeIs('proveedores.*') ? 'active' : '' }}">
                <i class="bi bi-truck"></i> Proveedores
            </a>
        @endcan

        <div class="menu-category">Finanzas</div>
        @can('ver.caja')
            <a href="{{ route('caja.index') }}" class="nav-link {{ request()->routeIs('caja.*') ? 'active' : '' }}">
                <i class="bi bi-currency-dollar"></i> Caja
            </a>
        @endcan
        @can('ver.costos')
            <a href="{{ route('costos.index') }}" class="nav-link {{ request()->routeIs('costos.*') ? 'active' : '' }}">
                <i class="bi bi-bar-chart-line-fill"></i> Costos
            </a>
        @endcan

        @role('admin')
        <div class="menu-category">Administración</div>
        <a href="{{ route('admin.usuarios.index') }}" class="nav-link {{ request()->routeIs('admin.usuarios.*') ? 'active' : '' }}">
            <i class="bi bi-people-fill"></i> Usuarios
        </a>
        <a href="{{ route('admin.sucursales.index') }}" class="nav-link {{ request()->routeIs('admin.sucursales.*') ? 'active' : '' }}">
            <i class="bi bi-shop"></i> Sucursales
        </a>
        <a href="{{ route('admin.auditoria.index') }}" class="nav-link {{ request()->routeIs('admin.auditoria.*') ? 'active' : '' }}">
            <i class="bi bi-shield-lock-fill"></i> Auditoría
        </a>
        <a href="{{ route('admin.configuracion.index') }}" class="nav-link {{ request()->routeIs('admin.configuracion.*') ? 'active' : '' }}">
            <i class="bi bi-gear-fill"></i> Configuración
        </a>
        @endrole
    </div>
</div>

<div class="main-content">
    <div class="top-navbar">
        <div class="d-flex align-items-center gap-3">
            <button class="btn btn-light border d-lg-none" onclick="openMenu()"><i class="bi bi-list fs-5"></i></button>
            <h5 class="fw-bold mb-0 text-dark d-none d-sm-block">
                @if(isset($title))
                    {{ $title }}
                @else
                    GastroGe
                @endif
            </h5>
        </div>
        
        <div class="d-flex align-items-center gap-4">
            {{-- Interfaz de Sucursal Activa --}}
            @auth
            <form method="POST" action="{{ route('sucursal.cambiar') }}" class="m-0 d-none d-md-block">
                @csrf
                <div class="d-flex align-items-center gap-2 bg-light px-3 py-1 rounded-pill border">
                    <span style="width: 8px; height: 8px; border-radius: 50%;" class="{{ session('sucursal_id') ? 'bg-success' : 'bg-secondary' }}"></span>
                    <select name="sucursal_id" onchange="this.form.submit()" class="form-select form-select-sm border-0 bg-transparent shadow-none" style="min-width: 150px; font-weight: 500; color: #475569;">
                        @if(!session('sucursal_id') || auth()->user()->hasRole('superadmin'))
                            <option value="">-- Vista Global Master --</option>
                        @endif
                        @php
                            $usr = auth()->user();
                            $sucursales = $usr->hasRole('admin') 
                                ? \App\Models\Sucursal::where('activa', true)->get() 
                                : $usr->sucursales()->where('activa', true)->get();
                        @endphp
                        @foreach($sucursales as $s)
                            <option value="{{ $s->id }}" {{ $s->id == session('sucursal_id') ? 'selected' : '' }}>
                                {{ $s->nombre }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </form>
            @endauth

            <div class="dropdown">
                <div class="user-profile-btn" data-bs-toggle="dropdown" aria-expanded="false">
                    <div class="text-end d-none d-sm-block">
                        <div class="fw-bold text-dark small">{{ Auth::user()->name }}</div>
                        <div class="text-muted" style="font-size: 0.7rem;">{{ ucfirst(Auth::user()->getRoleNames()->first() ?? 'Usuario') }}</div>
                    </div>
                    <div class="user-avatar">
                        {{ substr(Auth::user()->name, 0, 1) }}
                    </div>
                </div>
                <ul class="dropdown-menu dropdown-menu-end border-0 shadow-lg p-2 rounded-4" style="width: 220px;">
                    <li class="px-2 py-1 text-muted small fw-bold">MI CUENTA</li>
                    <li>
                        <a href="{{ route('profile.edit') }}" class="dropdown-item rounded-3 mb-1">
                            <i class="bi bi-person-gear me-2 text-primary"></i> Editar Perfil
                        </a>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    <li>
                        <form action="{{ route('logout') }}" method="POST">
                            @csrf
                            <button type="submit" class="dropdown-item rounded-3 text-danger fw-bold">
                                <i class="bi bi-box-arrow-right me-2"></i> Cerrar Sesión
                            </button>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    @php
        $hasMonedaLocal = \App\Models\Configuracion::where('clave', 'moneda_simbolo')->where('sucursal_id', session('sucursal_id'))->exists();
    @endphp
    @if(!$hasMonedaLocal && session('sucursal_id'))
        <div class="alert alert-warning border-0 shadow-sm rounded-4 mb-4 d-flex align-items-center bg-white border-start border-5 border-warning">
            <i class="bi bi-exclamation-triangle-fill fs-4 me-3 text-warning"></i>
            <div>
                <strong>Aviso:</strong> Esta sucursal no tiene una moneda configurada, se está usando {{ $moneda ?? 'S/.' }} por defecto. 
                <a href="{{ route('admin.configuracion.index') }}" class="alert-link">Configurar ahora</a>
            </div>
            <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('success')) 
        <div class="alert alert-success border-0 shadow-sm rounded-4 mb-4 d-flex align-items-center bg-white border-start border-5 border-success">
            <i class="bi bi-check-circle-fill fs-4 me-3 text-success"></i>
            <div><strong>¡Éxito!</strong> {{ session('success') }}</div>
            <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
        </div> 
    @endif
    
    @if(session('error')) 
        <div class="alert alert-danger border-0 shadow-sm rounded-4 mb-4 d-flex align-items-center bg-white border-start border-5 border-danger">
            <i class="bi bi-exclamation-triangle-fill fs-4 me-3 text-danger"></i>
            <div><strong>Error:</strong> {{ session('error') }}</div>
            <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
        </div> 
    @endif
    
    @if($errors->any())
        <div class="alert alert-danger border-0 shadow-sm rounded-4 mb-4 d-flex align-items-center bg-white border-start border-5 border-danger">
            <i class="bi bi-exclamation-triangle-fill fs-4 me-3 text-danger"></i>
            <div>
                <strong>Revisa los siguientes errores:</strong>
                <ul class="mb-0 mt-1">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- Renderiza el contenido pasado en un slot o yield (Componente de Laravel) --}}
    @if (isset($slot))
        {{ $slot }}
    @else
        @yield('content')
    @endif

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
    function openMenu() { document.getElementById('sidebar').classList.add('show'); document.getElementById('mobileOverlay').classList.add('show'); document.body.style.overflow = 'hidden'; }
    function closeMenu() { document.getElementById('sidebar').classList.remove('show'); document.getElementById('mobileOverlay').classList.remove('show'); document.body.style.overflow = 'auto'; }
</script>
<!-- TomSelect JS Global -->
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Inicializar TomSelect en todos los elementos que tengan la clase .tom-select
        document.querySelectorAll('.tom-select').forEach(function(el) {
            new TomSelect(el, {
                create: false,
                maxOptions: 3,
                dropdownParent: 'body',
                sortField: { field: "text", direction: "asc" }
            });
        });
    });
</script>
@stack('scripts')

{{-- Inyectar el modal de confirmación UX Style iOS global --}}
<x-confirm-modal />

</body>
</html>
