@extends('layouts.panel')

@section('title', 'Mesero - Piter Professional')

{{-- Inyectamos el CSS Operativo --}}
@push('styles')
    @vite('resources/css/operational.css')
@endpush

@section('content')

    {{-- CONTENEDOR PRINCIPAL --}}
    <div class="h-full flex flex-col lg:flex-row gap-4 pb-20 lg:pb-0 transition-all duration-300 relative">
        
        {{-- 1. PANEL MESAS --}}
        <div id="panel-mesas" class="w-full lg:w-[30%] flex flex-col gap-3 h-full bg-white rounded-xl border border-gray-200 p-3 shadow-sm lg:flex">
            <div class="flex justify-between items-center px-1 shrink-0">
                <h2 class="text-sm font-black text-[#194B95] uppercase tracking-wide">Sala / Mesas</h2>
                
                <button onclick="toggleModoUnion()" id="btn-unir-mesas" class="text-[10px] px-2 py-1.5 bg-gray-50 border border-gray-200 rounded transition-colors flex items-center gap-1 font-bold text-gray-600">
                    <i data-lucide="link" class="w-3 h-3"></i> Unir
                </button>
            </div>
            
            {{-- FILTROS FUNCIONALES --}}
            <div class="flex gap-2 pb-1 overflow-x-auto no-scrollbar" id="filtros-container">
                <button onclick="filtrarMesas('todos')" id="filter-todos" class="filter-btn ring-2 ring-[#194B95] ring-offset-1 px-3 py-1.5 rounded-lg border border-gray-200 bg-gray-100 text-gray-700 text-[10px] font-bold whitespace-nowrap transition-all hover:bg-gray-200">
                    Todo
                </button>
                <button onclick="filtrarMesas('libre')" id="filter-libre" class="filter-btn opacity-60 px-3 py-1.5 rounded-lg border border-emerald-200 bg-emerald-50 text-emerald-700 text-[10px] font-bold whitespace-nowrap transition-all hover:bg-emerald-100 flex items-center gap-1">
                    <div class="w-1.5 h-1.5 rounded-full bg-emerald-500"></div> Disponible
                </button>
                <button onclick="filtrarMesas('ocupado')" id="filter-ocupado" class="filter-btn opacity-60 px-3 py-1.5 rounded-lg border border-red-200 bg-red-50 text-[#E21C21] text-[10px] font-bold whitespace-nowrap transition-all hover:bg-red-100 flex items-center gap-1">
                    <div class="w-1.5 h-1.5 rounded-full bg-[#E21C21]"></div> Ocupada
                </button>
                <button onclick="filtrarMesas('reservado')" id="filter-reservado" class="filter-btn opacity-60 px-3 py-1.5 rounded-lg border border-purple-200 bg-purple-50 text-purple-700 text-[10px] font-bold whitespace-nowrap transition-all hover:bg-purple-100 flex items-center gap-1">
                    <div class="w-1.5 h-1.5 rounded-full bg-purple-500"></div> Reservado
                </button>
            </div>

            {{-- Buscador Mesas --}}
            <div class="relative shrink-0 mt-0">
                <i data-lucide="search" class="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400"></i>
                <input type="text" id="buscador-mesas" placeholder="Buscar mesa..." class="op-input w-full pl-8 pr-2 py-2 text-sm font-medium border-gray-200 focus:border-[#194B95] rounded-lg">
            </div>
            
            {{-- Grid Mesas --}}
            <div class="flex-1 overflow-y-auto pr-1 pb-2 custom-scrollbar relative">
                <div class="grid grid-cols-3 lg:grid-cols-2 xl:grid-cols-3 gap-2" id="grid-mesas"></div>
                
                {{-- Estado Vacío --}}
                <div id="empty-mesas" class="hidden absolute inset-0 flex flex-col items-center justify-center text-gray-400">
                    <i data-lucide="ghost" class="w-8 h-8 mb-2 opacity-30"></i>
                    <span class="text-xs font-bold">Sin mesas</span>
                </div>
            </div>
            
            {{-- Paginación --}}
            <div class="flex justify-between items-center pt-2 border-t border-gray-100 shrink-0">
                <button onclick="paginaAnterior()" class="p-2 rounded hover:bg-gray-100 text-gray-500"><i data-lucide="chevron-left" class="w-5 h-5"></i></button>
                <span class="text-xs font-mono font-bold text-gray-400" id="info-paginacion">1 / 1</span>
                <button onclick="paginaSiguiente()" class="p-2 rounded hover:bg-gray-100 text-gray-500"><i data-lucide="chevron-right" class="w-5 h-5"></i></button>
            </div>
        </div>

        {{-- 2. PANEL PRODUCTOS (MENÚ) --}}
        <div id="panel-productos" class="hidden lg:flex w-full lg:w-[45%] flex-col gap-3 bg-white rounded-xl border border-gray-200 p-4 overflow-hidden relative shadow-sm">
            
            {{-- Overlay Bloqueo (Oculto para flujo rápido) --}}
            <div id="overlay-productos" class="hidden absolute inset-0 z-20 bg-white/90 backdrop-blur-[2px] flex items-center justify-center fade-in"></div>

            {{-- Buscador y Categorías --}}
            <div class="flex flex-col gap-3 shrink-0">
                <div class="relative w-full">
                    <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"></i>
                    <input type="text" id="buscador" placeholder="Buscar plato o bebida..." class="op-input w-full pl-10 pr-4 py-3 text-sm font-medium">
                </div>
                
                <div class="flex gap-2 overflow-x-auto no-scrollbar pb-1">
                    <button onclick="filtrar('Todos')" class="btn-cat-active px-4 py-2 rounded-lg text-xs transition-all whitespace-nowrap shrink-0" id="btn-cat-Todos">Todos</button>
                    <button onclick="filtrar('Entradas')" class="btn-cat-inactive px-4 py-2 rounded-lg text-xs transition-all whitespace-nowrap shrink-0" id="btn-cat-Entradas">Entradas</button>
                    <button onclick="filtrar('Fondos')" class="btn-cat-inactive px-4 py-2 rounded-lg text-xs transition-all whitespace-nowrap shrink-0" id="btn-cat-Fondos">Fondos</button>
                    <button onclick="filtrar('Bebidas')" class="btn-cat-inactive px-4 py-2 rounded-lg text-xs transition-all whitespace-nowrap shrink-0" id="btn-cat-Bebidas">Bebidas</button>
                    <button onclick="filtrar('Postres')" class="btn-cat-inactive px-4 py-2 rounded-lg text-xs transition-all whitespace-nowrap shrink-0" id="btn-cat-Postres">Postres</button>
                </div>
            </div>

            {{-- Grid Productos --}}
            <div class="flex-1 overflow-y-auto no-scrollbar pb-14 lg:pb-2 pt-2">
                <div class="grid grid-cols-2 sm:grid-cols-2 xl:grid-cols-3 gap-4" id="grid-productos"></div>
            </div>
        </div>

        {{-- 3. PANEL TICKET (ORDEN ACTUAL) --}}
        <div id="panel-ticket" class="hidden lg:flex w-full lg:w-[25%] bg-white rounded-xl border border-gray-200 flex-col overflow-hidden relative shadow-xl h-full">
            <div class="p-4 border-b border-gray-100 flex justify-between items-center bg-white z-10 shadow-sm shrink-0">
                <div>
                    <h2 class="font-bold text-gray-800 text-base flex items-center gap-2">
                        Ticket
                        <span id="badge-estado" class="hidden text-[10px] px-2 py-0.5 rounded bg-orange-100 text-orange-600 border border-orange-200 font-bold">BORRADOR</span>
                        <span id="badge-enviado" class="hidden text-[10px] px-2 py-0.5 rounded bg-emerald-100 text-emerald-600 border border-emerald-200 font-bold flex items-center gap-1"><i data-lucide="check" class="w-3 h-3"></i> COCINA</span>
                    </h2>
                    <p class="text-xs text-[#194B95] font-bold mt-0.5" id="titulo-mesa">Mesa no seleccionada</p>
                </div>
                <div class="flex gap-2">
                    <button onclick="separarMesas()" id="btn-separar" class="hidden p-2 bg-gray-50 rounded-lg text-gray-400 hover:text-[#194B95]">
                        <i data-lucide="unlink" class="w-4 h-4"></i>
                    </button>
                    <button onclick="prepararLimpiarMesa()" id="btn-limpiar" class="p-2 bg-gray-50 rounded-lg text-gray-400 hover:text-[#E21C21]">
                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                    </button>
                </div>
            </div>

            {{-- Lista Items --}}
            <div class="flex-1 overflow-y-auto p-3 space-y-2 relative bg-gray-50 custom-scrollbar" id="lista-orden"></div>

            {{-- Footer Ticket --}}
            <div class="p-4 bg-white border-t border-gray-200 z-10 shadow-[0_-5px_15px_rgba(0,0,0,0.05)] shrink-0 mb-16 lg:mb-0">
                <div class="space-y-1 mb-4">
                    <div class="flex justify-between items-end">
                        <span class="text-sm font-black text-gray-800">TOTAL</span>
                        <span class="text-2xl font-black text-[#194B95] font-mono" id="txt-total">S/ 0.00</span>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 gap-3">
                    {{-- Botón multifunción --}}
                    <button id="btn-comandar" onclick="prepararEnvio()" class="hidden w-full py-4 rounded-xl bg-[#E21C21] hover:bg-[#c4181c] text-white font-black text-sm items-center justify-center gap-2 shadow-lg shadow-red-200 transition-transform active:scale-[0.98]">
                        <i data-lucide="chef-hat" class="w-5 h-5"></i> CONFIRMAR PEDIDO
                    </button>
                    
                    {{-- Placeholder --}}
                    <div id="btn-placeholder" class="w-full py-3 rounded-lg bg-gray-100 border border-gray-200 border-dashed text-gray-400 text-xs font-bold flex items-center justify-center uppercase tracking-wide">
                        Selecciona una mesa
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- MENU INFERIOR MÓVIL --}}
    <div class="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-6 py-2 flex justify-between items-center z-40 shadow-[0_-5px_20px_rgba(0,0,0,0.05)] h-16 safe-area-pb">
        <button onclick="showMobileTab('mesas')" class="nav-item active flex flex-col items-center gap-1 w-1/3 text-gray-400" id="nav-mesas">
            <div class="nav-icon w-10 h-8 rounded-full flex items-center justify-center">
                <i data-lucide="layout-grid" class="w-5 h-5"></i>
            </div>
            <span class="text-[10px] font-bold">Mesas</span>
        </button>
        <button onclick="showMobileTab('productos')" class="nav-item flex flex-col items-center gap-1 w-1/3 text-gray-400 relative" id="nav-productos">
            <div class="nav-icon w-10 h-8 rounded-full flex items-center justify-center">
                <i data-lucide="utensils" class="w-5 h-5"></i>
            </div>
            <span class="text-[10px] font-bold">Menú</span>
        </button>
        <button onclick="showMobileTab('ticket')" class="nav-item flex flex-col items-center gap-1 w-1/3 text-gray-400 relative" id="nav-ticket">
            <div class="nav-icon w-10 h-8 rounded-full flex items-center justify-center">
                <i data-lucide="receipt" class="w-5 h-5"></i>
            </div>
            <span class="text-[10px] font-bold">Orden</span>
            <span id="mobile-badge-count" class="hidden absolute top-0 right-6 w-4 h-4 bg-[#E21C21] text-white text-[9px] font-bold rounded-full flex items-center justify-center border border-white">0</span>
        </button>
    </div>

    {{-- MODAL CONFIRMACION (GENERICO) --}}
    <div id="modal-confirm" class="fixed inset-0 z-[60] hidden items-center justify-center modal-overlay transition-opacity duration-200 opacity-0">
        <div class="bg-white border border-gray-200 rounded-2xl w-[90%] max-w-sm p-6 shadow-2xl transform scale-95 transition-transform duration-200" id="modal-box">
            <div class="mb-4 text-center">
                <div class="w-14 h-14 rounded-full bg-gray-50 flex items-center justify-center mb-4 border border-gray-100 mx-auto" id="modal-icon-bg">
                    <i id="modal-icon" data-lucide="alert-circle" class="w-7 h-7 text-gray-600"></i>
                </div>
                <h3 class="text-lg font-bold text-gray-900" id="modal-title">Confirmar</h3>
                <p class="text-sm text-gray-500 mt-2 leading-relaxed" id="modal-msg">...</p>
            </div>
            <div class="grid grid-cols-2 gap-3 mt-6">
                <button onclick="cerrarModal()" class="py-3 rounded-xl border border-gray-300 text-gray-600 font-bold text-sm bg-white hover:bg-gray-50 transition-colors uppercase tracking-wide">
                    Cancelar
                </button>
                <button id="modal-btn-confirm" class="py-3 rounded-xl bg-[#E21C21] text-white font-bold text-sm active:bg-[#c4181c] transition-colors shadow-lg shadow-red-100 uppercase tracking-wide">
                    Confirmar
                </button>
            </div>
        </div>
    </div>

   {{-- MODAL DE NOTAS (CORREGIDO Y BLINDADO) --}}
    <div id="modal-nota" class="fixed inset-0 hidden items-center justify-center bg-black/50 backdrop-blur-sm transition-opacity duration-200 opacity-0" style="z-index: 9999;">
        {{-- Caja del Modal --}}
        <div class="bg-white border border-gray-200 rounded-2xl w-[90%] max-w-sm p-5 shadow-2xl transform scale-95 transition-transform duration-200" 
             id="modal-nota-box"
             onclick="event.stopPropagation()"> {{-- Evita que clicks dentro cierren algo --}}
            
            <div class="mb-4">
                <h3 class="text-lg font-bold text-gray-800 mb-1">Especificaciones</h3>
                <p class="text-xs text-gray-400">Detalles para cocina (Ej: Sin cebolla, Salsa aparte)</p>
            </div>
            
            {{-- Textarea con "user-select-text" y z-index interno --}}
            <div class="relative">
                <textarea id="txt-nota-detalle" 
                          class="w-full h-32 p-4 rounded-xl bg-gray-50 border border-gray-300 text-gray-900 text-base font-medium focus:border-[#194B95] focus:ring-2 focus:ring-[#194B95]/20 outline-none resize-none shadow-inner select-text" 
                          placeholder="Escribe la nota aquí..."
                          style="pointer-events: auto;"></textarea>
            </div>
            
            <div class="grid grid-cols-2 gap-3 mt-4">
                <button onclick="cerrarModalNota()" class="py-3 rounded-xl border border-gray-300 text-gray-600 font-bold text-sm bg-white hover:bg-gray-50 active:bg-gray-100">
                    CANCELAR
                </button>
                <button onclick="guardarNota()" class="py-3 rounded-xl bg-[#194B95] text-white font-bold text-sm shadow-lg shadow-blue-100 hover:bg-[#123670] active:scale-95 transition-transform">
                    GUARDAR
                </button>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
    lucide.createIcons();

    // --- DATOS MOCK ---
    const productos = [
        { id: 1, nombre: "Lomo Saltado", precio: 45.00, cat: "Fondos", img: "https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&q=80&w=300" },
        { id: 2, nombre: "Ceviche Mixto", precio: 38.00, cat: "Fondos", img: "https://images.unsplash.com/photo-1535400255456-984241443b29?auto=format&fit=crop&q=80&w=300" },
        { id: 3, nombre: "Ají de Gallina", precio: 32.00, cat: "Fondos", img: "https://images.unsplash.com/photo-1565557623262-b51c2513a641?auto=format&fit=crop&q=80&w=300" },
        { id: 4, nombre: "Papa Huancaína", precio: 22.00, cat: "Entradas", img: "https://images.unsplash.com/photo-1625938145744-e38051539994?auto=format&fit=crop&q=80&w=300" },
        { id: 5, nombre: "Causa Limeña", precio: 18.00, cat: "Entradas", img: "https://images.unsplash.com/photo-1590494056254-2b79a744274c?auto=format&fit=crop&q=80&w=300" },
        { id: 6, nombre: "Chicha Morada", precio: 12.00, cat: "Bebidas", img: "https://images.unsplash.com/photo-1563227812-0ea4c22e6cc8?auto=format&fit=crop&q=80&w=300" },
        { id: 7, nombre: "Pisco Sour", precio: 25.00, cat: "Bebidas", img: "https://images.unsplash.com/photo-1574654314457-3f86e3336d39?auto=format&fit=crop&q=80&w=300" },
        { id: 8, nombre: "Suspiro Limeño", precio: 15.00, cat: "Postres", img: "https://images.unsplash.com/photo-1514517604298-cf80e0fb7f5e?auto=format&fit=crop&q=80&w=300" },
    ];

    // Generamos mesas
    let mesas = Array.from({length: 30}, (_, i) => {
        let st = 'libre';
        let env = false;
        if([1, 5, 12].includes(i+1)) { st = 'ocupado'; env = true; } 
        if([3, 15].includes(i+1)) { st = 'reservado'; } 
        
        return { 
            id: i+1, 
            numero: i+1, 
            estado: st, 
            unidaA: null, 
            enviado: env 
        };
    });
    
    // --- ESTADO GLOBAL ---
    let mesaActual = null;
    let ordenes = {}; 
    let filtroEstado = 'todos'; 
    let indexNotaActual = null; 

    const mesasPorPagina = 20; 
    let paginaActual = 1;
    let modoUnion = false;
    let seleccionUnion = [];
    let modalAction = null;
    let activeMobileTab = 'mesas';

    // --- LÓGICA DE FILTRADO ---
    function filtrarMesas(filtro) {
        filtroEstado = filtro;
        paginaActual = 1;
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.classList.remove('ring-2', 'ring-[#194B95]', 'ring-offset-1', 'opacity-100');
            btn.classList.add('opacity-60');
        });
        const activeBtn = document.getElementById(`filter-${filtro}`);
        if(activeBtn) {
            activeBtn.classList.remove('opacity-60');
            activeBtn.classList.add('ring-2', 'ring-[#194B95]', 'ring-offset-1', 'opacity-100');
        }
        renderMesas();
    }

    function renderMesas() {
         const container = document.getElementById('grid-mesas');
         const emptyState = document.getElementById('empty-mesas');
         const buscador = document.getElementById('buscador-mesas').value;
         container.innerHTML = '';

         let mesasFiltradas = mesas.filter(m => {
             if (filtroEstado !== 'todos' && m.estado !== filtroEstado) return false;
             if (buscador && !m.numero.toString().includes(buscador)) return false;
             return true;
         });

         if(mesasFiltradas.length === 0) {
             emptyState.classList.remove('hidden');
             document.getElementById('info-paginacion').innerText = "0 / 0";
             return;
         }
         emptyState.classList.add('hidden');

         const inicio = (paginaActual - 1) * mesasPorPagina;
         const fin = inicio + mesasPorPagina;
         const mesasPagina = mesasFiltradas.slice(inicio, fin);
         document.getElementById('info-paginacion').innerText = `${paginaActual} / ${Math.ceil(mesasFiltradas.length/mesasPorPagina)}`;

         mesasPagina.forEach(m => {
             if(m.unidaA && !modoUnion && !buscador) return;
             
             const isSelected = mesaActual === m.id;
             const isSelectedUnion = seleccionUnion.includes(m.id);
             
             let clasesBase = "cursor-pointer rounded-xl p-3 border transition-all duration-200 h-24 flex flex-col justify-between relative shadow-sm active:scale-95 group ";
             let bgClass = "", estadoText = "", dotColor = "", iconColor = ""; 

             if (modoUnion) {
                 if (isSelectedUnion) {
                     bgClass = "bg-blue-50 border-[#194B95] ring-1 ring-[#194B95]";
                     iconColor = "text-blue-300";
                 } else if (m.unidaA) {
                     bgClass = "bg-gray-100 border-gray-300 opacity-60"; 
                     estadoText = `M.#${m.unidaA}`; 
                     dotColor = "bg-gray-400"; 
                 } else {
                     bgClass = "mesa-base border-gray-200";
                     dotColor = "bg-gray-300";
                 }
             } else {
                 if (esMesaPadre(m.id)) {
                     bgClass = isSelected ? "bg-blue-50 border-[#194B95] ring-2 ring-[#194B95]" : "bg-blue-50 border-blue-200";
                     estadoText = "GRUPO"; 
                     dotColor = "bg-[#194B95]";
                     iconColor = "text-[#194B95]";
                 } else if (m.estado === 'libre') {
                     bgClass = isSelected ? "bg-emerald-50 border-emerald-500 ring-2 ring-emerald-500" : "bg-white border-gray-200 hover:border-emerald-300";
                     estadoText = "LIBRE";
                     dotColor = "bg-emerald-500";
                     iconColor = isSelected ? "text-emerald-500" : "text-gray-300";
                 } else if (m.estado === 'reservado') {
                     bgClass = isSelected ? "bg-purple-50 border-purple-500 ring-2 ring-purple-500" : "bg-white border-purple-200";
                     estadoText = "RESERVADO";
                     dotColor = "bg-purple-500";
                     iconColor = "text-purple-400";
                 } else { 
                     bgClass = isSelected ? "bg-rose-50 border-[#E21C21] ring-2 ring-[#E21C21]" : "bg-white border-[#E21C21]";
                     estadoText = m.enviado ? "COCINA" : "EN CURSO";
                     dotColor = m.enviado ? "bg-[#E21C21]" : "bg-orange-500";
                     iconColor = "text-[#E21C21]";
                 }
             }

             container.innerHTML += `
                 <div onclick="clickMesa(${m.id})" class="${clasesBase} ${bgClass}">
                     <div class="flex justify-between items-center z-10">
                         <span class="font-black text-base text-gray-700">M.${m.numero}</span>
                         <div class="w-2.5 h-2.5 rounded-full ${dotColor} ${m.estado === 'ocupado' && !m.enviado ? 'animate-pulse' : ''} shadow-sm border border-white"></div>
                     </div>
                     <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                         <div class="w-10 h-10 rounded-full bg-gray-50/50 flex items-center justify-center group-hover:scale-110 transition-transform">
                             <i data-lucide="utensils-crossed" class="w-5 h-5 ${iconColor} opacity-70"></i>
                         </div>
                     </div>
                     <div class="flex justify-between items-end z-10">
                          <span class="text-[10px] font-bold text-gray-500 uppercase tracking-wider truncate">${estadoText}</span>
                     </div>
                 </div>`;
         });
         lucide.createIcons();
    }

    // --- INTERACCIÓN PRINCIPAL ---
    function clickMesa(id) {
        if(modoUnion) {
            const mesa = mesas.find(m => m.id === id); 
            if(mesa.unidaA) return;
            if(seleccionUnion.includes(id)) seleccionUnion = seleccionUnion.filter(mid => mid !== id); 
            else seleccionUnion.push(id);
            renderMesas();
            return;
        }

        const mesa = mesas.find(m => m.id === id); 
        if(mesa.unidaA) { clickMesa(mesa.unidaA); return; } 
        
        mesaActual = id;
        
        // Super funcional: Desbloqueo y cambio de estado inmediato
        if (mesa.estado === 'reservado') { mesa.estado = 'ocupado'; }
        
        actualizarInfoTicket(mesa);
        renderMesas();
        renderOrden();
        
        if(window.innerWidth < 1024) showMobileTab('productos');
        document.getElementById('overlay-productos').classList.add('hidden');
    }

    function actualizarInfoTicket(mesa) {
        let titulo = `Mesa ${mesa.numero}`;
        const hijas = obtenerHijas(mesa.id);
        if(hijas.length > 0) titulo += ` (+ ${hijas.map(h => h.numero).join(', ')})`;
        
        document.getElementById('titulo-mesa').innerText = titulo;
        
        const badgeEst = document.getElementById('badge-estado');
        const badgeEnv = document.getElementById('badge-enviado');
        const btnSeparar = document.getElementById('btn-separar');
        
        if(hijas.length > 0) btnSeparar.classList.remove('hidden');
        else btnSeparar.classList.add('hidden');

        if (mesa.estado === 'libre') { 
            badgeEst.classList.add('hidden'); badgeEnv.classList.add('hidden'); 
        } else if (mesa.enviado) { 
            badgeEst.classList.add('hidden'); badgeEnv.classList.remove('hidden'); badgeEnv.classList.add('flex'); 
        } else { 
            badgeEst.classList.remove('hidden'); badgeEnv.classList.add('hidden'); 
        }
    }

    // --- RENDER ORDEN (TICKET) CON DETALLES ---
// --- RENDER ORDEN CON BOTÓN DE NOTA ---
    function renderOrden() {
        const container = document.getElementById('lista-orden');
        const badge = document.getElementById('mobile-badge-count');
        const btnComandar = document.getElementById('btn-comandar');
        const btnPlaceholder = document.getElementById('btn-placeholder');
        
        if(!mesaActual) {
            // ... (Mismo código de estado vacío de mesa)
            container.innerHTML = '<div class="absolute inset-0 flex flex-col items-center justify-center text-gray-400 fade-in"><p class="text-xs font-bold uppercase tracking-wide">Mesa no seleccionada</p></div>';
            actualizarTotales(0); btnComandar.classList.add('hidden'); btnComandar.classList.remove('flex'); btnPlaceholder.classList.remove('hidden'); badge.classList.add('hidden');
            return;
        }

        const lista = ordenes[mesaActual] || [];
        const mesa = mesas.find(m => m.id === mesaActual);
        
        // Badge y estado vacío
        const count = lista.reduce((a, b) => a + b.cantidad, 0);
        count > 0 ? badge.innerText = count : null;
        count > 0 ? badge.classList.remove('hidden') : badge.classList.add('hidden');

        if (lista.length === 0) {
            container.innerHTML = '<div class="absolute inset-0 flex flex-col items-center justify-center text-gray-400 fade-in"><i data-lucide="shopping-cart" class="w-12 h-12 mb-3 opacity-20 text-gray-500"></i><p class="text-xs font-bold uppercase tracking-wide">Orden vacía</p></div>';
            lucide.createIcons(); actualizarTotales(0); btnComandar.classList.add('hidden'); btnComandar.classList.remove('flex'); btnPlaceholder.classList.add('hidden');
            return;
        }
        
        // Mostrar botón comandar
        btnPlaceholder.classList.add('hidden'); btnComandar.classList.remove('hidden'); btnComandar.classList.add('flex');
        
        // Texto botón
        if(mesa.enviado) {
            btnComandar.innerHTML = `<i data-lucide="refresh-cw" class="w-5 h-5"></i> ACTUALIZAR COCINA`;
            btnComandar.className = "w-full py-4 rounded-xl bg-[#194B95] hover:bg-[#123670] text-white font-black text-sm flex items-center justify-center gap-2 shadow-lg shadow-blue-200 transition-transform active:scale-[0.98]";
        } else {
            btnComandar.innerHTML = `<i data-lucide="chef-hat" class="w-5 h-5"></i> CONFIRMAR PEDIDO`;
            btnComandar.className = "w-full py-4 rounded-xl bg-[#E21C21] hover:bg-[#c4181c] text-white font-black text-sm flex items-center justify-center gap-2 shadow-lg shadow-red-200 transition-transform active:scale-[0.98]";
        }

        let htmlItems = '';
        let total = 0;

        lista.forEach((item, index) => {
            total += item.precio * item.cantidad;
            
            // Visualización de la nota
            const detallesHtml = item.detalles && item.detalles.trim() !== '' 
                ? `<div class="mt-1.5 flex items-start gap-1 p-1.5 bg-yellow-50 rounded border border-yellow-100">
                     <i data-lucide="message-square" class="w-3 h-3 text-yellow-600 mt-0.5 shrink-0"></i>
                     <p class="text-[10px] text-gray-600 italic leading-tight font-medium">${item.detalles}</p>
                   </div>` 
                : '';
            
            // Estilo botón nota (Azul si tiene nota, Gris si no)
            const btnNotaClass = (item.detalles && item.detalles.trim() !== '') 
                ? "text-[#194B95] bg-blue-50 border-blue-200 ring-1 ring-blue-100" 
                : "text-gray-400 bg-white border-gray-200 hover:border-gray-400 hover:text-gray-600";

            // HTML ITEM
            htmlItems += `
                <div class="bg-white rounded-xl p-3 border border-gray-200 flex gap-3 items-start slide-in-right shadow-sm mb-2">
                    {{-- Imagen --}}
                    <img src="${item.img}" class="w-12 h-12 rounded-lg object-cover bg-gray-100 shrink-0 border border-gray-200">
                    
                    <div class="flex-1 min-w-0">
                        {{-- Cabecera Item --}}
                        <div class="flex justify-between items-start mb-1">
                            <p class="text-sm font-bold text-gray-800 truncate leading-tight">${item.nombre}</p>
                            <p class="text-sm font-bold text-[#E21C21]">S/ ${(item.precio * item.cantidad).toFixed(2)}</p>
                        </div>
                        
                        {{-- Controles Inferiores --}}
                        <div class="flex items-center justify-between mt-2">
                            <span class="text-[10px] text-gray-400 font-medium uppercase tracking-wide">P.U: S/ ${item.precio.toFixed(2)}</span>
                            
                            <div class="flex items-center gap-1">
                                {{-- BOTÓN LÁPIZ (NOTA) --}}
                                <button onclick="event.stopPropagation(); abrirModalNota(${index})" class="w-8 h-8 flex items-center justify-center border rounded-lg transition-all mr-2 ${btnNotaClass}">
                                    <i data-lucide="file-pen-line" class="w-4 h-4"></i>
                                </button>

                                <button onclick="cambiarCant(${index}, -1)" class="w-8 h-8 flex items-center justify-center text-gray-500 bg-white border border-gray-200 shadow-sm hover:text-[#194B95] hover:border-blue-200 rounded-lg font-bold text-lg">-</button>
                                <span class="text-sm font-bold w-6 text-center text-gray-800">${item.cantidad}</span>
                                <button onclick="cambiarCant(${index}, 1)" class="w-8 h-8 flex items-center justify-center text-gray-500 bg-white border border-gray-200 shadow-sm hover:text-[#194B95] hover:border-blue-200 rounded-lg font-bold text-lg">+</button>
                            </div>
                        </div>
                        
                        {{-- Nota renderizada al final para no romper layout --}}
                        ${detallesHtml}
                    </div>
                </div>`;
        });

        container.innerHTML = htmlItems;
        actualizarTotales(total);
        lucide.createIcons();
    }

    // --- GESTIÓN DE NOTAS (Mejorada) ---
    function abrirModalNota(index) {
        indexNotaActual = index;
        const lista = ordenes[mesaActual];
        if(!lista || !lista[index]) return;

        const item = lista[index];
        const txtArea = document.getElementById('txt-nota-detalle');
        
        txtArea.value = item.detalles || ''; 
        
        const modal = document.getElementById('modal-nota');
        const box = document.getElementById('modal-nota-box');
        
        modal.classList.remove('hidden');
        // Pequeño timeout para permitir que el navegador renderice el display:flex antes de animar opacidad
        setTimeout(() => {
            modal.classList.remove('opacity-0');
            modal.classList.add('flex');
            box.classList.remove('scale-95');
            box.classList.add('scale-100');
            
            // FOCO AGRESIVO: Forzamos el cursor dentro del textarea
            txtArea.focus();
            txtArea.select(); 
        }, 50);
    }
    
    function cerrarModalNota() {
        const modal = document.getElementById('modal-nota');
        const box = document.getElementById('modal-nota-box');
        
        modal.classList.add('opacity-0');
        box.classList.remove('scale-100');
        box.classList.add('scale-95');
        
        setTimeout(() => { 
            modal.classList.add('hidden'); 
            modal.classList.remove('flex'); 
            indexNotaActual = null;
        }, 200);
    }

    function guardarNota() {
        if (indexNotaActual !== null && mesaActual) {
            const txt = document.getElementById('txt-nota-detalle').value;
            if(ordenes[mesaActual] && ordenes[mesaActual][indexNotaActual]) {
                ordenes[mesaActual][indexNotaActual].detalles = txt;
                renderOrden();
            }
        }
        cerrarModalNota();
    }
    // --- GESTIÓN DE NOTAS (DETALLES) ---
    function abrirModalNota(index) {
        indexNotaActual = index;
        const lista = ordenes[mesaActual];
        const item = lista[index];
        const txtArea = document.getElementById('txt-nota-detalle');
        
        txtArea.value = item.detalles || ''; // Cargar nota existente o vacía
        
        const modal = document.getElementById('modal-nota');
        modal.classList.remove('hidden', 'opacity-0'); modal.classList.add('flex');
        setTimeout(() => { 
            document.getElementById('modal-nota-box').classList.remove('scale-95'); 
            document.getElementById('modal-nota-box').classList.add('scale-100'); 
            txtArea.focus(); // Foco automático al abrir
        }, 10);
    }
    
    function cerrarModalNota() {
        const modal = document.getElementById('modal-nota');
        modal.classList.add('opacity-0');
        document.getElementById('modal-nota-box').classList.remove('scale-100'); 
        document.getElementById('modal-nota-box').classList.add('scale-95');
        setTimeout(() => { 
            modal.classList.add('hidden'); modal.classList.remove('flex'); 
            indexNotaActual = null;
        }, 200);
    }

    function guardarNota() {
        if (indexNotaActual !== null && mesaActual) {
            const txt = document.getElementById('txt-nota-detalle').value;
            ordenes[mesaActual][indexNotaActual].detalles = txt; // Guardar en el objeto
            renderOrden(); // Refrescar vista
        }
        cerrarModalNota();
    }

    // --- AGREGAR ITEMS ---
    function agregarItem(id) {
        if(!mesaActual) { 
            mostrarModal("Atención", "Selecciona una mesa primero.", "alert-circle", "bg-orange-50 text-orange-500 border-orange-100", null); 
            if(window.innerWidth < 1024) showMobileTab('mesas');
            return; 
        }
        
        const mesa = mesas.find(m => m.id === mesaActual);
        if(mesa.estado === 'libre') { mesa.estado = 'ocupado'; renderMesas(); }

        if(!ordenes[mesaActual]) ordenes[mesaActual] = [];
        const prod = productos.find(p => p.id === id); 
        const existe = ordenes[mesaActual].find(i => i.id === id);
        
        if(existe) {
            existe.cantidad++; 
        } else {
            ordenes[mesaActual].push({...prod, cantidad: 1, detalles: ''});
        }
        
        renderOrden();
    }
    
    function cambiarCant(index, delta) {
        const lista = ordenes[mesaActual]; 
        lista[index].cantidad += delta;
        if(lista[index].cantidad <= 0) lista.splice(index, 1);
        renderOrden();
    }

    // --- ACCIONES DE CONFIRMACIÓN ---
    function prepararEnvio() {
        if(!mesaActual) return;
        const mesa = mesas.find(m => m.id === mesaActual);
        
        let titulo = mesa.enviado ? "Actualizar Pedido" : "Enviar a Cocina";
        let msg = mesa.enviado ? "¿Enviar los nuevos items a cocina?" : "Confirmar envío de comanda.";
        let icono = mesa.enviado ? "refresh-cw" : "chef-hat";
        let color = mesa.enviado ? "bg-blue-50 text-[#194B95] border-blue-100" : "bg-red-50 text-[#E21C21] border-red-100";

        mostrarModal(titulo, msg, icono, color, () => {
            mesa.estado = 'ocupado'; 
            mesa.enviado = true; 
            renderMesas(); 
            clickMesa(mesaActual); 
            
            const btn = document.getElementById('btn-comandar');
            btn.innerHTML = `<i data-lucide="check" class="w-5 h-5"></i> ENVIADO`;
            setTimeout(() => { renderOrden(); }, 1000);
            
            if(window.innerWidth < 1024) showMobileTab('mesas');
        });
    }

    function prepararLimpiarMesa() {
        if(!mesaActual) return;
        mostrarModal("Liberar Mesa", "¿Cobrar y finalizar mesa?", "trash-2", "bg-red-50 text-[#E21C21] border-red-100", () => {
            ordenes[mesaActual] = []; 
            const mesa = mesas.find(m => m.id === mesaActual);
            mesa.estado = 'libre'; 
            mesa.enviado = false;
            mesa.unidaA = null; 
            
            renderMesas(); 
            clickMesa(mesaActual); 
            if(window.innerWidth < 1024) showMobileTab('mesas');
        });
    }

    // --- FUNCIONES AUXILIARES ---
    function actualizarTotales(total) { document.getElementById('txt-total').textContent = `S/ ${total.toFixed(2)}`; }
    function paginaSiguiente() { if(paginaActual < Math.ceil(mesas.length / mesasPorPagina)) { paginaActual++; renderMesas(); } }
    function paginaAnterior() { if(paginaActual > 1) { paginaActual--; renderMesas(); } }
    function esMesaPadre(id) { return mesas.some(m => m.unidaA === id); }
    function obtenerHijas(id) { return mesas.filter(m => m.unidaA === id); }
    
    function renderProductos(filtro = 'Todos') {
       const container = document.getElementById('grid-productos');
       const busqueda = document.getElementById('buscador').value.toLowerCase();
       container.innerHTML = '';
       const filtrados = productos.filter(p => (filtro === 'Todos' || p.cat === filtro) && p.nombre.toLowerCase().includes(busqueda));
       
       filtrados.forEach(p => {
           container.innerHTML += `
               <div onclick="agregarItem(${p.id})" class="card-producto bg-white border border-gray-200 rounded-2xl overflow-hidden cursor-pointer h-72 flex flex-col group relative active:scale-95 transition-transform hover:shadow-lg">
                   <div class="h-40 overflow-hidden relative">
                       <img src="${p.img}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                       <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                       <span class="absolute bottom-2 right-2 bg-white/90 backdrop-blur text-[#0f172a] text-[10px] font-bold px-2 py-1 rounded shadow-sm">${p.cat}</span>
                   </div>
                   <div class="p-4 flex-1 flex flex-col justify-between">
                       <div><h3 class="text-sm font-bold text-gray-800 leading-snug line-clamp-2 group-hover:text-[#194B95] transition-colors">${p.nombre}</h3></div>
                       <div class="flex justify-between items-end mt-2">
                           <span class="text-lg font-black text-[#E21C21]">S/ ${p.precio.toFixed(2)}</span>
                           <div class="w-9 h-9 rounded-full bg-gray-50 flex items-center justify-center group-hover:bg-[#194B95] group-hover:text-white transition-colors border border-gray-100 group-hover:border-transparent"><i data-lucide="plus" class="w-5 h-5"></i></div>
                       </div>
                   </div>
               </div>`;
       });
       lucide.createIcons();
    }
    
    function filtrar(cat) {
       document.querySelectorAll('button[id^="btn-cat-"]').forEach(b => b.className = "btn-cat-inactive px-4 py-2 rounded-lg text-xs transition-all whitespace-nowrap shrink-0");
       document.getElementById(`btn-cat-${cat}`).className = "btn-cat-active px-4 py-2 rounded-lg text-xs transition-all whitespace-nowrap shrink-0";
       renderProductos(cat);
    }
    
    // --- LÓGICA MÓVIL Y MODALES ---
    function showMobileTab(tabName) {
       if (window.innerWidth >= 1024) return;
       const panels = { mesas: 'panel-mesas', productos: 'panel-productos', ticket: 'panel-ticket' };
       const navs = { mesas: 'nav-mesas', productos: 'nav-productos', ticket: 'nav-ticket' };
       
       Object.values(panels).forEach(id => {
           const el = document.getElementById(id);
           el.classList.add('hidden'); el.classList.remove('flex');
       });
       Object.values(navs).forEach(id => document.getElementById(id).classList.remove('active'));
       
       const activePanel = document.getElementById(panels[tabName]);
       activePanel.classList.remove('hidden'); 
       if(tabName !== 'mesas') activePanel.classList.add('flex'); 
       
       document.getElementById(navs[tabName]).classList.add('active');
       activeMobileTab = tabName;
    }

    // Modal Generico
    function mostrarModal(t, m, i, c, a) {
       document.getElementById('modal-title').innerText = t;
       document.getElementById('modal-msg').innerText = m;
       const icon = document.getElementById('modal-icon'); icon.setAttribute('data-lucide', i);
       document.getElementById('modal-icon-bg').className = `w-14 h-14 rounded-full flex items-center justify-center mb-4 border mx-auto ${c}`;
       modalAction = a;
       const modal = document.getElementById('modal-confirm');
       modal.classList.remove('hidden', 'opacity-0'); modal.classList.add('flex');
       setTimeout(() => { document.getElementById('modal-box').classList.remove('scale-95'); document.getElementById('modal-box').classList.add('scale-100'); }, 10);
       lucide.createIcons();
    }
    function cerrarModal() {
       const modal = document.getElementById('modal-confirm');
       modal.classList.add('opacity-0');
       document.getElementById('modal-box').classList.remove('scale-100'); document.getElementById('modal-box').classList.add('scale-95');
       setTimeout(() => { modal.classList.add('hidden'); modal.classList.remove('flex'); modalAction = null; }, 200);
    }
    document.getElementById('modal-btn-confirm').addEventListener('click', () => { if(modalAction) modalAction(); cerrarModal(); });

    // --- INIT ---
    document.getElementById('buscador-mesas').addEventListener('keyup', renderMesas);
    document.getElementById('buscador').addEventListener('keyup', () => { const activeBtn = document.querySelector('.btn-cat-active'); renderProductos(activeBtn ? activeBtn.innerText : 'Todos'); });
    
    window.addEventListener('resize', () => {
       if(window.innerWidth >= 1024) {
           ['panel-mesas', 'panel-productos', 'panel-ticket'].forEach(id => {
               document.getElementById(id).classList.remove('hidden');
               if(id !== 'panel-mesas') document.getElementById(id).classList.add('flex');
           });
       } else { showMobileTab(activeMobileTab); }
    });

    renderMesas(); renderProductos();
    if(window.innerWidth < 1024) showMobileTab('mesas');
    
    function toggleModoUnion() {
        modoUnion = !modoUnion;
        const btn = document.getElementById('btn-unir-mesas');
        if(modoUnion) {
            btn.innerHTML = `<i data-lucide="check" class="w-3 h-3"></i> OK`;
            btn.className = "text-[10px] px-3 py-1.5 bg-[#194B95] text-white rounded border border-transparent transition-colors flex items-center gap-1 font-bold shadow-md hover:bg-[#123670]";
            seleccionUnion = [];
        } else {
            if(seleccionUnion.length > 1) unirMesasSeleccionadas();
            btn.innerHTML = `<i data-lucide="link" class="w-3 h-3"></i> Unir`;
            btn.className = "text-[10px] px-2 py-1.5 bg-white hover:bg-gray-50 rounded border border-gray-300 transition-colors flex items-center gap-1 font-bold text-gray-600 shadow-sm";
        }
        renderMesas();
    }
    
    function unirMesasSeleccionadas() {
        seleccionUnion.sort((a,b) => a - b); 
        const padreId = seleccionUnion[0];
        seleccionUnion.slice(1).forEach(id => { 
            const m = mesas.find(mesa => mesa.id === id); 
            m.unidaA = padreId; 
            m.estado = 'ocupado'; 
        });
        mesas.find(m => m.id === padreId).estado = 'ocupado'; 
        seleccionUnion = [];
    }
    
    function separarMesas() {
        if(!mesaActual) return;
        const hijas = obtenerHijas(mesaActual);
        if(hijas.length > 0) {
            mostrarModal("Separar Mesas", "¿Desagrupar estas mesas?", "unlink", "bg-blue-50 text-[#194B95] border-blue-100", () => {
                hijas.forEach(m => { m.unidaA = null; m.estado = 'libre'; m.enviado = false; });
                const padre = mesas.find(m => m.id === mesaActual); 
                padre.enviado = false;
                if(!ordenes[mesaActual] || ordenes[mesaActual].length === 0) padre.estado = 'libre';
                renderMesas(); clickMesa(mesaActual);
            });
        }
    }
</script>
@endpush