<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'TPV Minimarket') | {{ $empresaGlobal->nombre_comercial ?? 'TPV Minimarket' }}</title>

    @if($empresaGlobal && $empresaGlobal->logo_url)
        <link rel="icon" href="{{ $empresaGlobal->logo_url }}">
    @endif

    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

    <style>
        * { font-family: 'Inter', sans-serif; }
        html { scroll-behavior: smooth; }
        body { overflow-x: hidden; }
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #f1f5f9; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        .sidebar-link.active { background: linear-gradient(90deg, rgba(16,185,129,.15), transparent); border-left: 3px solid #10b981; color: #10b981; }
        .gradient-primary { background: linear-gradient(135deg, #059669 0%, #10b981 100%); }
        .gradient-card-1 { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); }
        .gradient-card-2 { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); }
        .gradient-card-3 { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }
        .gradient-card-4 { background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%); }
        .gradient-danger { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%); }

        /* Animaciones para gráficos */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .chart-card { animation: fadeInUp 0.5s ease-out; }

        /* Tablas responsivas: ocultar columnas menos críticas en pantallas pequeñas */
        @media (max-width: 640px) {
            .hide-mobile { display: none !important; }
            table { font-size: 12px; }
            .text-3xl { font-size: 1.5rem; }
        }

        /* Mejor scroll horizontal en móvil */
        .overflow-x-auto { -webkit-overflow-scrolling: touch; }

        /* Cerrar sidebar en móvil al hacer click en enlace */
        @media (max-width: 1023px) {
            .sidebar-mobile-open { transform: translateX(0); }
        }

        [x-cloak] { display: none !important; }
    </style>
    @yield('head')
</head>
<body class="bg-slate-100">
<div class="flex min-h-screen" x-data="{ sidebarOpen: window.innerWidth >= 1024 }">

    <!-- Sidebar -->
    <aside class="bg-slate-900 text-white w-64 fixed inset-y-0 left-0 z-30 transition-transform duration-300 lg:translate-x-0"
           :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'">
        <div class="p-5 border-b border-slate-800 flex items-center gap-3">
            @if($empresaGlobal && $empresaGlobal->logo_url)
                <img src="{{ $empresaGlobal->logo_url }}" class="w-10 h-10 rounded-lg object-contain bg-white p-1" alt="logo">
            @else
                <div class="w-10 h-10 rounded-lg gradient-primary flex items-center justify-center">
                    <i class="fas fa-store text-white"></i>
                </div>
            @endif
            <div class="flex-1 min-w-0">
                <h1 class="font-bold text-sm truncate">{{ $empresaGlobal->nombre_comercial ?? 'TPV Minimarket' }}</h1>
                <p class="text-xs text-slate-400">Sistema POS</p>
            </div>
        </div>

        <nav class="py-4 overflow-y-auto" style="max-height: calc(100vh - 80px);">
            <a href="{{ route('dashboard') }}" class="sidebar-link flex items-center gap-3 px-5 py-3 text-slate-300 hover:bg-slate-800 transition {{ request()->routeIs('dashboard') ? 'active' : '' }}">
                <i class="fas fa-tachometer-alt w-5"></i><span>Dashboard</span>
            </a>
            <a href="{{ route('ventas.pos') }}" class="sidebar-link flex items-center gap-3 px-5 py-3 text-slate-300 hover:bg-slate-800 transition {{ request()->routeIs('ventas.pos') ? 'active' : '' }}">
                <i class="fas fa-cash-register w-5"></i><span>Punto de Venta</span>
            </a>

            <p class="px-5 mt-4 mb-2 text-xs uppercase text-slate-500 font-semibold">Operaciones</p>
            <a href="{{ route('ventas.index') }}" class="sidebar-link flex items-center gap-3 px-5 py-3 text-slate-300 hover:bg-slate-800 transition {{ request()->routeIs('ventas.index') ? 'active' : '' }}">
                <i class="fas fa-receipt w-5"></i><span>Ventas</span>
            </a>
            <a href="{{ route('compras.index') }}" class="sidebar-link flex items-center gap-3 px-5 py-3 text-slate-300 hover:bg-slate-800 transition {{ request()->routeIs('compras.*') ? 'active' : '' }}">
                <i class="fas fa-truck w-5"></i><span>Compras</span>
            </a>
            <a href="{{ route('caja.index') }}" class="sidebar-link flex items-center gap-3 px-5 py-3 text-slate-300 hover:bg-slate-800 transition {{ request()->routeIs('caja.*') ? 'active' : '' }}">
                <i class="fas fa-money-bill-wave w-5"></i><span>Caja</span>
            </a>

            <p class="px-5 mt-4 mb-2 text-xs uppercase text-slate-500 font-semibold">Inventario</p>
            <a href="{{ route('productos.index') }}" class="sidebar-link flex items-center gap-3 px-5 py-3 text-slate-300 hover:bg-slate-800 transition {{ request()->routeIs('productos.*') ? 'active' : '' }}">
                <i class="fas fa-box w-5"></i><span>Productos</span>
            </a>
            <a href="{{ route('categorias.index') }}" class="sidebar-link flex items-center gap-3 px-5 py-3 text-slate-300 hover:bg-slate-800 transition {{ request()->routeIs('categorias.*') ? 'active' : '' }}">
                <i class="fas fa-tags w-5"></i><span>Categorías</span>
            </a>
            <a href="{{ route('promociones.index') }}" class="sidebar-link flex items-center gap-3 px-5 py-3 text-slate-300 hover:bg-slate-800 transition {{ request()->routeIs('promociones.*') ? 'active' : '' }}">
                <i class="fas fa-percent w-5"></i><span>Promociones</span>
            </a>

            <p class="px-5 mt-4 mb-2 text-xs uppercase text-slate-500 font-semibold">Contactos</p>
            <a href="{{ route('clientes.index') }}" class="sidebar-link flex items-center gap-3 px-5 py-3 text-slate-300 hover:bg-slate-800 transition {{ request()->routeIs('clientes.*') ? 'active' : '' }}">
                <i class="fas fa-users w-5"></i><span>Clientes</span>
            </a>
            <a href="{{ route('proveedores.index') }}" class="sidebar-link flex items-center gap-3 px-5 py-3 text-slate-300 hover:bg-slate-800 transition {{ request()->routeIs('proveedores.*') ? 'active' : '' }}">
                <i class="fas fa-truck-loading w-5"></i><span>Proveedores</span>
            </a>

            <p class="px-5 mt-4 mb-2 text-xs uppercase text-slate-500 font-semibold">SRI</p>
            <a href="{{ route('facturacion.index') }}" class="sidebar-link flex items-center gap-3 px-5 py-3 text-slate-300 hover:bg-slate-800 transition {{ request()->routeIs('facturacion.index') || request()->routeIs('facturacion.show') ? 'active' : '' }}">
                <i class="fas fa-file-invoice-dollar w-5"></i><span>Facturación Electrónica</span>
            </a>
            <a href="{{ route('facturacion.retencion.crear') }}" class="sidebar-link flex items-center gap-3 px-5 py-3 text-slate-300 hover:bg-slate-800 transition {{ request()->routeIs('facturacion.retencion.*') ? 'active' : '' }}">
                <i class="fas fa-hand-holding-usd w-5"></i><span>Comprobante de Retención</span>
            </a>

            <p class="px-5 mt-4 mb-2 text-xs uppercase text-slate-500 font-semibold">Análisis</p>
            <a href="{{ route('reportes.index') }}" class="sidebar-link flex items-center gap-3 px-5 py-3 text-slate-300 hover:bg-slate-800 transition {{ request()->routeIs('reportes.*') ? 'active' : '' }}">
                <i class="fas fa-chart-line w-5"></i><span>Reportes</span>
            </a>

            @if(auth()->user()->isAdmin())
                <p class="px-5 mt-4 mb-2 text-xs uppercase text-slate-500 font-semibold">Sistema</p>
                <a href="{{ route('usuarios.index') }}" class="sidebar-link flex items-center gap-3 px-5 py-3 text-slate-300 hover:bg-slate-800 transition {{ request()->routeIs('usuarios.*') ? 'active' : '' }}">
                    <i class="fas fa-user-shield w-5"></i><span>Usuarios</span>
                </a>
                <a href="{{ route('configuracion.index') }}" class="sidebar-link flex items-center gap-3 px-5 py-3 text-slate-300 hover:bg-slate-800 transition {{ request()->routeIs('configuracion.*') ? 'active' : '' }}">
                    <i class="fas fa-cog w-5"></i><span>Configuración</span>
                </a>
                <a href="{{ route('facturacion.configuracion') }}" class="sidebar-link flex items-center gap-3 px-5 py-3 text-slate-300 hover:bg-slate-800 transition {{ request()->routeIs('facturacion.configuracion') ? 'active' : '' }}">
                    <i class="fas fa-shield-alt w-5"></i><span>Config. SRI</span>
                </a>
                <a href="{{ route('backup.index') }}" class="sidebar-link flex items-center gap-3 px-5 py-3 text-slate-300 hover:bg-slate-800 transition {{ request()->routeIs('backup.*') ? 'active' : '' }}">
                    <i class="fas fa-database w-5"></i><span>Backup</span>
                </a>
            @endif

            <div class="px-5 mt-6">
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button class="w-full flex items-center gap-3 px-3 py-2.5 bg-red-600/20 hover:bg-red-600/40 rounded-lg text-red-300 transition">
                        <i class="fas fa-sign-out-alt"></i><span>Cerrar Sesión</span>
                    </button>
                </form>
            </div>
        </nav>
    </aside>

    <!-- Overlay móvil -->
    <div x-show="sidebarOpen" @click="sidebarOpen = false" class="fixed inset-0 bg-black/50 z-20 lg:hidden" style="display:none;"></div>

    <!-- Main -->
    <div class="flex-1 lg:ml-64 min-w-0">
        <!-- Topbar -->
        <header class="bg-white shadow-sm border-b border-slate-200 sticky top-0 z-20">
            <div class="flex items-center justify-between px-3 sm:px-6 py-3">
                <div class="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
                    <button @click="sidebarOpen = !sidebarOpen" class="lg:hidden text-slate-600 hover:text-slate-900 flex-shrink-0">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                    <h2 class="text-base sm:text-lg font-semibold text-slate-800 truncate">@yield('header', 'Dashboard')</h2>
                </div>
                <div class="flex items-center gap-2 sm:gap-4 flex-shrink-0">
                    <div class="hidden md:flex items-center gap-2 text-sm text-slate-600">
                        <i class="far fa-calendar"></i>
                        <span class="hidden lg:inline">{{ now()->translatedFormat('l, d \d\e F \d\e Y') }}</span>
                        <span class="lg:hidden">{{ now()->format('d/m/Y') }}</span>
                    </div>
                    <div class="relative" x-data="{ open: false }">
                        <button @click="open = !open" class="flex items-center gap-2 hover:bg-slate-100 px-2 sm:px-3 py-2 rounded-lg transition">
                            <div class="w-8 h-8 gradient-primary rounded-full flex items-center justify-center text-white font-semibold text-sm">
                                {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                            </div>
                            <div class="hidden md:block text-left">
                                <p class="text-sm font-semibold text-slate-800">{{ auth()->user()->name }}</p>
                                <p class="text-xs text-slate-500">{{ auth()->user()->role->nombre ?? 'Usuario' }}</p>
                            </div>
                            <i class="fas fa-chevron-down text-xs text-slate-400 hidden sm:inline"></i>
                        </button>
                        <div x-show="open" @click.outside="open = false" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-slate-200 py-2" style="display:none;">
                            <p class="px-4 py-2 text-xs text-slate-500 border-b border-slate-100">Conectado como</p>
                            <p class="px-4 py-1 text-sm font-semibold">{{ auth()->user()->name }}</p>
                            <p class="px-4 pb-2 text-xs text-slate-500">{{ auth()->user()->email }}</p>
                            <form method="POST" action="{{ route('logout') }}" class="border-t border-slate-100">
                                @csrf
                                <button class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50">
                                    <i class="fas fa-sign-out-alt mr-2"></i>Cerrar sesión
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Content -->
        <main class="p-3 sm:p-4 lg:p-6">
            @if(session('success'))
                <div class="mb-4 bg-green-50 border-l-4 border-green-500 text-green-700 px-4 py-3 rounded shadow-sm flex justify-between items-center" x-data="{ show: true }" x-show="show">
                    <div><i class="fas fa-check-circle mr-2"></i>{{ session('success') }}</div>
                    <button @click="show = false"><i class="fas fa-times"></i></button>
                </div>
            @endif
            @if(session('error'))
                <div class="mb-4 bg-red-50 border-l-4 border-red-500 text-red-700 px-4 py-3 rounded shadow-sm">
                    <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
                </div>
            @endif
            @if(session('warning'))
                <div class="mb-4 bg-yellow-50 border-l-4 border-yellow-500 text-yellow-700 px-4 py-3 rounded shadow-sm">
                    <i class="fas fa-exclamation-triangle mr-2"></i>{{ session('warning') }}
                </div>
            @endif

            @yield('content')
        </main>
    </div>
</div>
@yield('scripts')
</body>
</html>
