@extends('layouts.panel')

@section('title', 'Terminal de Caja - POS')

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

@section('content')

    {{-- Header --}}
    <div class="flex flex-col md:flex-row justify-between items-end mb-6 gap-6 border-b border-slate-200 pb-6 shrink-0 fade-in">
        <div>
            <div class="flex items-center gap-3 mb-1">
                <div class="bg-[#194B95] p-2 rounded-lg shadow-md shadow-blue-100">
                    <i data-lucide="store" class="w-6 h-6 text-white"></i>
                </div>
                <div>
                    <h1 class="text-2xl font-black text-[#0f172a] tracking-tight">TERMINAL DE CAJA</h1>
                    <p class="text-slate-500 font-medium text-xs mt-0.5 flex items-center gap-2">
                        <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                        Caja Abierta • <span id="fecha-header" class="font-mono">--/--/--</span>
                    </p>
                </div>
            </div>
        </div>

        <div class="flex items-center gap-4">
            <div class="bg-slate-100 p-1 rounded-xl flex border border-slate-200">
                <button onclick="cambiarTab('caja')" id="tab-caja" class="tab-btn active px-5 py-2 rounded-lg text-xs font-bold flex items-center gap-2">
                    <i data-lucide="monitor" class="w-4 h-4"></i> Monitor
                </button>
                <button onclick="cambiarTab('historial')" id="tab-historial" class="tab-btn text-slate-500 px-5 py-2 rounded-lg text-xs font-bold flex items-center gap-2">
                    <i data-lucide="history" class="w-4 h-4"></i> Historial
                </button>
            </div>

            {{-- NUEVO BOTÓN: RETIRO EXPRESS (Para cambios, servicios, etc.) --}}
            <button onclick="abrirModalRetiro()" class="bg-amber-500 hover:bg-amber-600 text-white px-5 py-2.5 rounded-xl text-xs font-bold shadow-lg shadow-amber-100 transition-all flex items-center gap-2 active:scale-95 border border-amber-600">
                <i data-lucide="minus-circle" class="w-4 h-4"></i> RETIRO / GASTO
            </button>

            {{-- Botón de Cierre --}}
            <button onclick="abrirModalCierre()" class="bg-[#E21C21] hover:bg-[#c4181c] text-white px-5 py-2.5 rounded-xl text-xs font-bold shadow-lg shadow-red-100 transition-all flex items-center gap-2 active:scale-95 border border-red-600">
                <i data-lucide="lock" class="w-4 h-4"></i> CERRAR CAJA
            </button>
        </div>
    </div>

    {{-- VISTA MONITOR CAJA --}}
    <div id="view-caja" class="view-content flex-1 flex flex-col gap-6 min-h-0 fade-in" style="animation-delay: 100ms;">
        
        {{-- KPIs Financieros --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 shrink-0">
            <div class="panel-card p-5 flex justify-between items-center relative overflow-hidden group">
                <div class="relative z-10">
                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Efectivo en Caja</p>
                    {{-- ID agregado para manipularlo --}}
                    <h3 id="kpi-efectivo" class="text-3xl font-mono font-black text-emerald-600 tracking-tight">S/ 1,450.00</h3>
                </div>
                <div class="p-3 bg-emerald-50 rounded-xl text-emerald-600 border border-emerald-100"><i data-lucide="banknote" class="w-6 h-6"></i></div>
            </div>
            <div class="panel-card p-5 flex justify-between items-center relative overflow-hidden group">
                <div class="relative z-10">
                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Digital / Tarjetas</p>
                    <h3 class="text-3xl font-mono font-black text-[#194B95] tracking-tight">S/ 3,820.50</h3>
                </div>
                <div class="p-3 bg-blue-50 rounded-xl text-[#194B95] border border-blue-100"><i data-lucide="credit-card" class="w-6 h-6"></i></div>
            </div>
            <div class="panel-card p-5 flex justify-between items-center relative overflow-hidden group border-l-4 border-l-[#E21C21]">
                <div class="relative z-10">
                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Por Cobrar (Pendiente)</p>
                    <h3 class="text-3xl font-mono font-black text-[#E21C21] tracking-tight">S/ 850.00</h3>
                </div>
                <div class="p-3 bg-red-50 rounded-xl text-[#E21C21] border border-red-100 animate-pulse"><i data-lucide="alert-circle" class="w-6 h-6"></i></div>
            </div>
        </div>

        {{-- Tabla de Pendientes --}}
        <div class="panel-card p-0 flex-1 flex flex-col overflow-hidden shadow-sm">
            <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center">
                <h3 class="font-bold text-[#0f172a] text-sm flex items-center gap-2">
                    <span class="relative flex h-3 w-3">
                      <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#E21C21] opacity-75"></span>
                      <span class="relative inline-flex rounded-full h-3 w-3 bg-[#E21C21]"></span>
                    </span>
                    Pendientes de Cobro
                </h3>
                <div class="relative">
                    <i data-lucide="search" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
                    <input type="text" placeholder="Buscar mesa o mozo..." class="bg-white border border-slate-200 text-xs pl-9 pr-4 py-2 rounded-lg text-slate-600 w-56 focus:outline-none focus:border-[#194B95] transition-all shadow-sm">
                </div>
            </div>

            <div class="flex-1 overflow-y-auto custom-scrollbar">
                <table class="w-full text-left border-collapse op-table">
                    <thead class="bg-white sticky top-0 z-10 text-[10px] uppercase text-slate-400 font-bold tracking-wider border-b border-slate-200">
                        <tr>
                            <th class="px-6 py-4">Origen / Mesa</th>
                            <th class="px-6 py-4">Mozo</th>
                            <th class="px-6 py-4 text-center">Tiempo</th>
                            <th class="px-6 py-4 text-right">Total a Pagar</th>
                            <th class="px-6 py-4 text-center">Acción</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 text-sm text-slate-600">
                        <tr class="hover:bg-slate-50 transition-colors group">
                            <td class="px-6 py-4">
                                <div class="font-black text-[#0f172a] text-base">Mesa 9</div>
                                <span class="text-[10px] text-slate-400 font-mono">ID: #9921</span>
                            </td>
                            <td class="px-6 py-4 font-medium">Juan P.</td>
                            <td class="px-6 py-4 text-center">
                                <span class="bg-red-50 text-[#E21C21] border border-red-100 px-2 py-1 rounded text-[10px] font-bold">45 min</span>
                            </td>
                            <td class="px-6 py-4 text-right font-mono text-[#0f172a] text-lg font-bold">S/ 948.55</td>
                            <td class="px-6 py-4 text-center">
                                <button onclick="abrirModalCobro('Mesa 9', 948.55)" class="bg-white border border-slate-200 text-slate-600 hover:bg-[#194B95] hover:text-white hover:border-[#194B95] px-5 py-2 rounded-lg font-bold transition-all shadow-sm text-xs flex items-center gap-2 mx-auto">
                                    <i data-lucide="credit-card" class="w-4 h-4"></i> COBRAR
                                </button>
                            </td>
                        </tr>
                        <tr class="hover:bg-slate-50 transition-colors group">
                            <td class="px-6 py-4">
                                <div class="font-black text-[#0f172a] text-base">Barra 3</div>
                                <span class="text-[10px] text-slate-400 font-mono">ID: #9925</span>
                            </td>
                            <td class="px-6 py-4 font-medium">Carlos M.</td>
                            <td class="px-6 py-4 text-center">
                                <span class="bg-emerald-50 text-emerald-600 border border-emerald-100 px-2 py-1 rounded text-[10px] font-bold">12 min</span>
                            </td>
                            <td class="px-6 py-4 text-right font-mono text-[#0f172a] text-lg font-bold">S/ 45.00</td>
                            <td class="px-6 py-4 text-center">
                                <button onclick="abrirModalCobro('Barra 3', 45.00)" class="bg-white border border-slate-200 text-slate-600 hover:bg-[#194B95] hover:text-white hover:border-[#194B95] px-5 py-2 rounded-lg font-bold transition-all shadow-sm text-xs flex items-center gap-2 mx-auto">
                                    <i data-lucide="credit-card" class="w-4 h-4"></i> COBRAR
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- VISTA HISTORIAL --}}
    <div id="view-historial" class="view-content hidden flex-1 flex-col min-h-0 fade-in h-full">
        <div class="panel-card flex-col h-full overflow-hidden flex p-0">
            <div class="px-6 py-4 border-b border-slate-200 flex justify-between items-center bg-slate-50/50">
                <h3 class="font-bold text-[#0f172a] text-sm">Registro de Transacciones</h3>
                <div class="flex gap-2">
                    <button class="px-3 py-1.5 bg-white border border-slate-200 rounded-lg text-xs font-bold text-slate-500 hover:text-[#194B95] shadow-sm">Hoy</button>
                    <button class="px-3 py-1.5 bg-white border border-slate-200 rounded-lg text-xs font-bold text-slate-500 hover:text-[#194B95] shadow-sm">Ayer</button>
                </div>
            </div>
            <div class="flex-1 overflow-y-auto custom-scrollbar">
                <table class="w-full text-left border-collapse op-table">
                    <thead class="bg-white sticky top-0 z-10 text-[10px] uppercase text-slate-400 font-bold tracking-wider border-b border-slate-200">
                        <tr>
                            <th class="px-6 py-4">N° Ticket</th>
                            <th class="px-6 py-4">Hora</th>
                            <th class="px-6 py-4">Método</th>
                            <th class="px-6 py-4 text-right">Monto</th>
                            <th class="px-6 py-4 text-center">Opción</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 text-sm text-slate-600">
                        <tr class="hover:bg-slate-50 transition-colors">
                            <td class="px-6 py-3 font-mono text-[#0f172a] font-bold">B001-4392</td>
                            <td class="px-6 py-3 text-slate-500">13:10 PM</td>
                            <td class="px-6 py-3"><span class="px-2.5 py-1 rounded bg-emerald-50 text-emerald-600 text-[10px] font-bold border border-emerald-100">EFECTIVO</span></td>
                            <td class="px-6 py-3 text-right font-mono font-bold">S/ 45.00</td>
                            <td class="px-6 py-3 text-center">
                                <button onclick="verPDF('B001-4392', 45.00)" class="text-slate-400 hover:text-[#194B95] transition-colors"><i data-lucide="printer" class="w-4 h-4 mx-auto"></i></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- MODAL APERTURA (Existente) --}}
    <div id="modal-apertura" class="fixed inset-0 z-50 hidden flex items-center justify-center p-4" style="background-color: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px);">
        <div class="bg-white w-full max-w-sm rounded-2xl border border-slate-200 relative z-10 p-8 shadow-2xl fade-in text-center">
            <div class="w-14 h-14 bg-emerald-50 rounded-full flex items-center justify-center text-emerald-600 mx-auto mb-4 border border-emerald-100">
                <i data-lucide="unlock" class="w-7 h-7"></i>
            </div>
            <h3 class="text-xl font-black text-[#0f172a] mb-2">Apertura de Caja</h3>
            <p class="text-sm text-slate-500 mb-6 px-4">Ingresa el monto de efectivo inicial en la caja fuerte para comenzar el turno.</p>
            
            <div class="relative mb-6">
                <span class="absolute left-6 top-1/2 -translate-y-1/2 text-slate-400 font-bold text-lg">S/</span>
                <input type="number" class="w-full bg-slate-50 border border-slate-300 rounded-xl px-12 py-4 text-[#0f172a] font-mono font-bold text-3xl outline-none focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/20 transition-all text-center placeholder:text-slate-300" placeholder="0.00">
            </div>
            
            <div class="flex gap-3">
                <button onclick="cerrarModal('modal-apertura')" class="flex-1 py-3 text-sm font-bold text-slate-500 hover:text-slate-800 transition-colors">Cancelar</button>
                <button onclick="cerrarModal('modal-apertura')" class="flex-1 bg-emerald-600 hover:bg-emerald-500 text-white py-3 rounded-xl font-bold text-sm transition-all shadow-lg shadow-emerald-600/30">CONFIRMAR</button>
            </div>
        </div>
    </div>

    {{-- NUEVO MODAL: RETIRO EXPRESS (Para vueltos o servicios) --}}
    <div id="modal-retiro" class="fixed inset-0 z-[60] hidden flex items-center justify-center p-4" style="background-color: rgba(15, 23, 42, 0.7); backdrop-filter: blur(4px);">
        <div class="bg-white w-full max-w-md rounded-2xl border border-slate-200 relative z-10 shadow-2xl fade-in overflow-hidden">
            
            <div class="bg-amber-500 p-4 flex justify-between items-center text-white shrink-0">
                <div class="flex items-center gap-2">
                    <i data-lucide="minus-circle" class="w-5 h-5"></i>
                    <h3 class="font-black text-sm uppercase tracking-wide">Retiro / Egreso de Caja</h3>
                </div>
                <button onclick="cerrarModal('modal-retiro')" class="text-amber-100 hover:text-white transition-colors"><i data-lucide="x" class="w-5 h-5"></i></button>
            </div>

            <div class="p-6">
                <p class="text-xs text-slate-500 mb-4 bg-amber-50 p-3 rounded-lg border border-amber-100">
                    <i data-lucide="info" class="w-3 h-3 inline mr-1"></i>
                    Use esta opción para salidas de dinero eventuales (compras rápidas, servicios, vueltos) sin cerrar el turno.
                </p>

                <div class="mb-4">
                    <label class="block text-xs font-bold text-slate-700 mb-2 uppercase">Monto a Retirar</label>
                    <div class="relative">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 font-bold text-lg">S/</span>
                        <input type="number" id="retiro-express-monto" class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-10 pr-4 py-3 text-2xl font-mono font-black text-slate-800 focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20 outline-none transition-all placeholder:text-slate-300" placeholder="0.00">
                    </div>
                </div>

                <div class="mb-6">
                    <label class="block text-xs font-bold text-slate-700 mb-2 uppercase">Motivo / Justificación</label>
                    <textarea id="retiro-express-motivo" class="w-full bg-white border border-slate-200 rounded-xl p-3 text-sm text-slate-700 focus:border-amber-500 outline-none transition-all h-20 resize-none" placeholder="Ej: Compra de hielo, pago de taxi, sencillo para cambio..."></textarea>
                    
                    {{-- Tags rápidos --}}
                    <div class="flex gap-2 mt-2 overflow-x-auto no-scrollbar">
                        <button onclick="setMotivo('Sencillo / Cambio')" class="px-2 py-1 rounded bg-slate-100 text-[10px] font-bold text-slate-500 hover:bg-slate-200 border border-slate-200">Sencillo</button>
                        <button onclick="setMotivo('Compra Insumos')" class="px-2 py-1 rounded bg-slate-100 text-[10px] font-bold text-slate-500 hover:bg-slate-200 border border-slate-200">Insumos</button>
                        <button onclick="setMotivo('Pago Servicios')" class="px-2 py-1 rounded bg-slate-100 text-[10px] font-bold text-slate-500 hover:bg-slate-200 border border-slate-200">Servicios</button>
                    </div>
                </div>

                <button onclick="guardarRetiro()" class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 rounded-xl shadow-lg shadow-amber-500/20 transition-all active:scale-[0.99] uppercase text-sm flex justify-center items-center gap-2">
                    <i data-lucide="save" class="w-4 h-4"></i> Registrar Salida
                </button>
            </div>
        </div>
    </div>

    {{-- MODAL DE CIERRE DE CAJA --}}
    <div id="modal-cierre" class="fixed inset-0 z-50 hidden flex items-center justify-center p-4" style="background-color: rgba(15, 23, 42, 0.7); backdrop-filter: blur(4px);">
        <div class="bg-white w-full max-w-2xl rounded-2xl border border-slate-200 relative z-10 shadow-2xl fade-in overflow-hidden flex flex-col max-h-[90vh]">
            
            {{-- Header Modal Cierre --}}
            <div class="bg-[#0f172a] p-5 flex justify-between items-center text-white shrink-0">
                <div class="flex items-center gap-3">
                    <div class="p-2 bg-red-500/20 rounded-lg border border-red-500/30">
                        <i data-lucide="lock" class="w-5 h-5 text-red-400"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-black tracking-tight">CIERRE DE CAJA</h3>
                        <p class="text-[10px] text-slate-400 font-medium">Finalizar turno y arquear</p>
                    </div>
                </div>
                <button onclick="cerrarModal('modal-cierre')" class="text-slate-400 hover:text-white transition-colors"><i data-lucide="x" class="w-6 h-6"></i></button>
            </div>

            {{-- Body Modal Cierre --}}
            <div class="p-6 flex-1 overflow-y-auto custom-scrollbar bg-slate-50">
                
                {{-- Sección 1: Arqueo --}}
                <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm mb-5">
                    <h4 class="text-xs font-black text-[#194B95] uppercase tracking-widest mb-4 flex items-center gap-2">
                        <i data-lucide="calculator" class="w-4 h-4"></i> Arqueo de Efectivo
                    </h4>
                    <div class="grid grid-cols-2 gap-6">
                        <div>
                            <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Sistema (Calculado)</label>
                            <div class="bg-slate-100 border border-slate-200 rounded-lg p-3 text-2xl font-mono font-black text-slate-600" id="sistema-efectivo-display">
                                S/ 1,450.00
                            </div>
                        </div>
                        <div>
                            <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Real (Contado)</label>
                            <div class="relative">
                                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 font-bold">S/</span>
                                <input type="number" id="cierre-monto-real" oninput="calcularDiferencia()" class="w-full bg-white border-2 border-slate-200 rounded-lg pl-8 pr-3 py-3 text-2xl font-mono font-black text-[#0f172a] focus:border-[#194B95] outline-none transition-colors" placeholder="0.00">
                            </div>
                        </div>
                    </div>
                    {{-- Diferencia --}}
                    <div class="mt-3 flex justify-end">
                        <span id="diff-badge" class="px-3 py-1 rounded text-xs font-bold bg-slate-100 text-slate-400 border border-slate-200 transition-all">
                            Diferencia: S/ 0.00
                        </span>
                    </div>
                </div>

                {{-- Sección 2: Retiro de Dinero (DE CIERRE FINAL) --}}
                <div class="bg-white p-5 rounded-xl border border-red-100 shadow-sm mb-5 relative overflow-hidden">
                    <div class="absolute top-0 right-0 p-2 opacity-10">
                        <i data-lucide="wallet" class="w-24 h-24 text-red-500"></i>
                    </div>
                    <h4 class="text-xs font-black text-[#E21C21] uppercase tracking-widest mb-4 flex items-center gap-2 relative z-10">
                        <i data-lucide="arrow-up-right" class="w-4 h-4"></i> Retiro Final (Bóveda)
                    </h4>
                    
                    <div class="space-y-4 relative z-10">
                        <div>
                            <label class="block text-xs font-bold text-slate-700 mb-2">Monto a Retirar</label>
                            <div class="relative max-w-xs">
                                <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 font-bold text-lg">S/</span>
                                <input type="number" id="cierre-retiro" class="w-full bg-red-50 border border-red-200 rounded-xl pl-10 pr-4 py-3 text-xl font-mono font-bold text-[#E21C21] focus:ring-4 focus:ring-red-100 outline-none transition-all placeholder:text-red-200" placeholder="0.00">
                            </div>
                            <p class="text-[10px] text-slate-400 mt-1 italic">Este monto se lleva a bóveda o banco al cerrar.</p>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-slate-700 mb-2">Observaciones de Cierre</label>
                            <textarea id="cierre-justificacion" class="w-full bg-white border border-slate-300 rounded-xl p-3 text-sm text-slate-700 focus:border-[#194B95] focus:ring-2 focus:ring-blue-50 outline-none transition-all h-24 resize-none" placeholder="Observaciones finales del turno..."></textarea>
                        </div>
                    </div>
                </div>

            </div>

            {{-- Footer Modal Cierre --}}
            <div class="p-5 border-t border-slate-200 bg-white flex justify-end gap-3 shrink-0">
                <button onclick="cerrarModal('modal-cierre')" class="px-6 py-3 rounded-xl border border-slate-200 text-slate-600 font-bold text-sm hover:bg-slate-50 transition-colors">
                    Cancelar
                </button>
                <button onclick="procesarCierre()" class="px-6 py-3 rounded-xl bg-[#E21C21] text-white font-bold text-sm shadow-lg shadow-red-100 hover:bg-[#c4181c] transition-all flex items-center gap-2 active:scale-95">
                    <i data-lucide="lock" class="w-4 h-4"></i> FINALIZAR TURNO
                </button>
            </div>
        </div>
    </div>

    {{-- MODAL COBRO (Existente) --}}
    <div id="modal-cobro" class="fixed inset-0 z-50 hidden flex items-center justify-center p-4" style="background-color: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px);">
        <div class="bg-white w-full max-w-5xl h-[85vh] rounded-2xl shadow-2xl border border-slate-200 relative z-10 flex overflow-hidden fade-in">
            <div class="w-full md:w-1/3 bg-slate-50 border-r border-slate-200 p-6 flex flex-col">
                <div class="mb-6 pb-4 border-b border-slate-200">
                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Cuenta a cobrar</span>
                    <h3 class="text-2xl font-black text-[#0f172a]" id="cobro-titulo-mesa">Mesa X</h3>
                </div>
                <div class="flex-1 overflow-y-auto space-y-4 pr-2 custom-scrollbar">
                    <div class="flex justify-between items-start text-sm group">
                        <div class="flex gap-3">
                            <span class="bg-white border border-slate-200 w-6 h-6 flex items-center justify-center rounded text-xs font-bold text-slate-500">2</span>
                            <div>
                                <p class="font-bold text-slate-700">Pisco Sour</p>
                                <p class="text-[10px] text-slate-400">Clásico • Sin jarabe</p>
                            </div>
                        </div>
                        <span class="font-mono font-bold text-slate-700">40.00</span>
                    </div>
                    <div class="flex justify-between items-start text-sm group">
                        <div class="flex gap-3">
                            <span class="bg-white border border-slate-200 w-6 h-6 flex items-center justify-center rounded text-xs font-bold text-slate-500">1</span>
                            <div>
                                <p class="font-bold text-slate-700">Lomo Saltado</p>
                                <p class="text-[10px] text-slate-400">Término Medio</p>
                            </div>
                        </div>
                        <span class="font-mono font-bold text-slate-700">45.00</span>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-slate-200 bg-white p-4 rounded-xl shadow-sm border border-slate-100">
                    <div class="flex justify-between items-end">
                        <div>
                            <p class="text-xs text-slate-400 font-bold uppercase">Total a Pagar</p>
                            <p class="text-[10px] text-slate-400">Incluye IGV y Servicios</p>
                        </div>
                        <span class="text-3xl font-mono font-black text-[#194B95]" id="cobro-total-display">S/ 0.00</span>
                    </div>
                </div>
            </div>
            <div class="flex-1 p-8 flex flex-col bg-white">
                <div class="flex justify-between items-center mb-8">
                    <h2 class="font-black text-[#0f172a] text-xl">Método de Pago</h2>
                    <button onclick="cerrarModal('modal-cobro')" class="p-2 bg-slate-100 rounded-full text-slate-400 hover:text-[#E21C21] hover:bg-red-50 transition-colors"><i data-lucide="x" class="w-6 h-6"></i></button>
                </div>
                <div class="grid grid-cols-3 gap-4 mb-8">
                    <button onclick="seleccionarMetodo('efectivo')" id="btn-efectivo" class="metodo-btn h-32 rounded-2xl border-2 border-slate-100 bg-white hover:border-emerald-500 hover:bg-emerald-50/30 flex flex-col items-center justify-center gap-3 group">
                        <div class="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center group-hover:bg-emerald-100 transition-colors"><i data-lucide="banknote" class="w-6 h-6 text-slate-400 group-hover:text-emerald-600"></i></div>
                        <span class="text-xs font-bold text-slate-500 group-hover:text-emerald-700 uppercase tracking-wide">Efectivo</span>
                    </button>
                    <button onclick="seleccionarMetodo('tarjeta')" id="btn-tarjeta" class="metodo-btn h-32 rounded-2xl border-2 border-slate-100 bg-white hover:border-[#194B95] hover:bg-blue-50/30 flex flex-col items-center justify-center gap-3 group">
                        <div class="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center group-hover:bg-blue-100 transition-colors"><i data-lucide="credit-card" class="w-6 h-6 text-slate-400 group-hover:text-[#194B95]"></i></div>
                        <span class="text-xs font-bold text-slate-500 group-hover:text-[#194B95] uppercase tracking-wide">Tarjeta</span>
                    </button>
                    <button onclick="seleccionarMetodo('yape')" id="btn-yape" class="metodo-btn h-32 rounded-2xl border-2 border-slate-100 bg-white hover:border-fuchsia-500 hover:bg-fuchsia-50/30 flex flex-col items-center justify-center gap-3 group">
                        <div class="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center group-hover:bg-fuchsia-100 transition-colors"><i data-lucide="smartphone" class="w-6 h-6 text-slate-400 group-hover:text-fuchsia-600"></i></div>
                        <span class="text-xs font-bold text-slate-500 group-hover:text-fuchsia-700 uppercase tracking-wide">Yape / Plin</span>
                    </button>
                </div>
                <div id="panel-efectivo" class="hidden flex-1 flex flex-col items-center justify-center animate-fadeIn">
                    <label class="text-xs font-bold text-emerald-600 uppercase tracking-widest mb-4">Ingrese Monto Recibido</label>
                    <div class="relative w-full max-w-xs mb-6">
                        <span class="absolute left-6 top-1/2 -translate-y-1/2 text-slate-300 font-bold text-2xl">S/</span>
                        <input type="number" id="input-recibido" oninput="calcularVuelto()" class="w-full bg-white border-2 border-slate-200 rounded-2xl pl-14 pr-6 py-4 text-4xl font-mono font-bold text-slate-800 outline-none focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 transition-all text-center placeholder:text-slate-200" placeholder="0.00">
                    </div>
                    <div class="bg-slate-900 text-white rounded-xl px-8 py-4 flex items-center gap-6 shadow-xl">
                        <span class="text-xs font-bold text-slate-400 uppercase tracking-wider">Vuelto:</span>
                        <span class="text-3xl font-mono font-black text-emerald-400" id="display-vuelto">---</span>
                    </div>
                </div>
                <div class="mt-auto pt-6 border-t border-slate-100">
                    <button onclick="cerrarModal('modal-cobro')" class="w-full bg-[#194B95] hover:bg-[#123670] text-white font-bold py-4 rounded-xl shadow-lg shadow-blue-900/20 transition-all active:scale-[0.99] uppercase tracking-widest text-sm flex justify-center items-center gap-3">
                        <i data-lucide="check-circle" class="w-5 h-5"></i> Procesar Pago e Imprimir
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL PDF (VISTA PREVIA) --}}
    <div id="modal-pdf" class="fixed inset-0 z-[80] hidden flex items-center justify-center p-4" style="background-color: rgba(15, 23, 42, 0.8); backdrop-filter: blur(4px);">
        <div class="w-full max-w-md h-[85vh] bg-[#2d2d2d] rounded-xl shadow-2xl relative z-10 flex flex-col overflow-hidden fade-in">
            <div class="bg-[#1e1e1e] p-4 flex justify-between items-center text-white border-b border-[#333]">
                <span class="text-sm font-bold flex items-center gap-2 text-gray-300"><i data-lucide="printer" class="w-4 h-4"></i> Vista Previa</span>
                <button onclick="cerrarModal('modal-pdf')" class="text-gray-400 hover:text-white transition-colors"><i data-lucide="x" class="w-5 h-5"></i></button>
            </div>
            
            <div class="flex-1 overflow-y-auto p-8 flex justify-center bg-[#525659]">
                <div class="receipt-paper w-[300px] min-h-[450px] p-6 text-slate-800 text-xs font-mono leading-tight">
                    <div class="text-center mb-6">
                        <div class="w-12 h-12 bg-slate-900 rounded-full mx-auto mb-2 flex items-center justify-center text-white font-bold text-lg">P</div>
                        <h2 class="font-black text-xl mb-1 tracking-tighter">PITER RESTOBAR</h2>
                        <p class="text-[10px] text-slate-500">RUC: 20123456789</p>
                        <p class="text-[10px] text-slate-500">Av. Larco 123, Miraflores</p>
                    </div>
                    
                    <div class="border-b border-dashed border-slate-300 pb-3 mb-3">
                        <div class="flex justify-between mb-1"><span>FECHA:</span> <span>28/01/2026</span></div>
                        <div class="flex justify-between mb-1"><span>HORA:</span> <span>14:30 PM</span></div>
                        <div class="flex justify-between"><span>TICKET:</span> <span>#B001-9921</span></div>
                    </div>

                    <table class="w-full mb-4">
                        <thead>
                            <tr class="border-b border-slate-300">
                                <th class="text-left pb-1">CNT</th>
                                <th class="text-left pb-1">DESC</th>
                                <th class="text-right pb-1">IMP</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="pt-2 align-top">2</td>
                                <td class="pt-2">Pisco Sour Clásico</td>
                                <td class="text-right pt-2">40.00</td>
                            </tr>
                            <tr>
                                <td class="pt-1 align-top">1</td>
                                <td class="pt-1">Lomo Saltado</td>
                                <td class="text-right pt-1">45.00</td>
                            </tr>
                        </tbody>
                    </table>

                    <div class="border-t border-slate-800 pt-3 flex justify-between items-end mb-8">
                        <span class="font-bold text-sm">TOTAL A PAGAR</span>
                        <span class="font-black text-2xl">S/ <span id="pdf-total">0.00</span></span>
                    </div>
                    
                    <div class="text-center text-[10px] text-slate-400">
                        <p class="mb-1">*** GRACIAS POR SU VISITA ***</p>
                        <p>No se aceptan devoluciones</p>
                    </div>
                </div>
            </div>
            
            <div class="p-4 bg-[#1e1e1e] flex justify-center">
                <button class="bg-blue-600 hover:bg-blue-500 text-white px-8 py-3 rounded-lg font-bold flex items-center gap-2 shadow-lg hover:shadow-blue-500/20 transition-all">
                    <i data-lucide="printer" class="w-4 h-4"></i> IMPRIMIR TICKET
                </button>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
    lucide.createIcons();
    const now = new Date();
    document.getElementById('fecha-header').innerText = now.toLocaleDateString('es-PE', { day: '2-digit', month: '2-digit', year: 'numeric' });

    let totalActual = 0;
    // Variable simulada del sistema
    let SISTEMA_EFECTIVO = 1450.00;

    function cambiarTab(tab) {
        document.querySelectorAll('.view-content').forEach(el => el.classList.add('hidden'));
        document.getElementById('view-' + tab).classList.remove('hidden');
        
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.remove('active', 'text-[#194B95]');
            btn.classList.add('text-slate-500');
        });
        const activeBtn = document.getElementById('tab-' + tab);
        activeBtn.classList.add('active', 'text-[#194B95]');
        activeBtn.classList.remove('text-slate-500');
    }

    function abrirModalApertura() { document.getElementById('modal-apertura').classList.remove('hidden'); }
    function cerrarModal(id) { document.getElementById(id).classList.add('hidden'); }

    // --- FUNCIONES RETIRO EXPRESS ---
    function abrirModalRetiro() {
        document.getElementById('modal-retiro').classList.remove('hidden');
        document.getElementById('retiro-express-monto').value = '';
        document.getElementById('retiro-express-motivo').value = '';
    }

    function setMotivo(texto) {
        document.getElementById('retiro-express-motivo').value = texto;
    }

    function guardarRetiro() {
        const monto = parseFloat(document.getElementById('retiro-express-monto').value) || 0;
        const motivo = document.getElementById('retiro-express-motivo').value.trim();

        if (monto <= 0) {
            alert("El monto debe ser mayor a 0.");
            return;
        }
        if (motivo === "") {
            alert("Debe ingresar un motivo para el retiro.");
            return;
        }

        // Simular descuento en sistema
        SISTEMA_EFECTIVO -= monto;
        // Actualizar visualmente el KPI
        document.getElementById('kpi-efectivo').innerText = "S/ " + SISTEMA_EFECTIVO.toFixed(2);
        
        alert(`Retiro de S/ ${monto.toFixed(2)} registrado correctamente.\nMotivo: ${motivo}`);
        cerrarModal('modal-retiro');
    }

    // --- FUNCIONES CIERRE DE CAJA ---
    
    function abrirModalCierre() {
        document.getElementById('modal-cierre').classList.remove('hidden');
        document.getElementById('sistema-efectivo-display').innerText = "S/ " + SISTEMA_EFECTIVO.toFixed(2);
        document.getElementById('cierre-monto-real').value = '';
        document.getElementById('cierre-retiro').value = '';
        document.getElementById('cierre-justificacion').value = '';
        document.getElementById('diff-badge').className = "px-3 py-1 rounded text-xs font-bold bg-slate-100 text-slate-400 border border-slate-200 transition-all";
        document.getElementById('diff-badge').innerText = "Diferencia: S/ 0.00";
    }

    function calcularDiferencia() {
        const real = parseFloat(document.getElementById('cierre-monto-real').value) || 0;
        const diff = real - SISTEMA_EFECTIVO;
        const badge = document.getElementById('diff-badge');

        if (diff === 0) {
            badge.className = "px-3 py-1 rounded text-xs font-bold bg-emerald-50 text-emerald-600 border border-emerald-200";
            badge.innerText = "Cuadre Perfecto";
        } else if (diff > 0) {
            badge.className = "px-3 py-1 rounded text-xs font-bold bg-blue-50 text-blue-600 border border-blue-200";
            badge.innerText = "Sobrante: +S/ " + diff.toFixed(2);
        } else {
            badge.className = "px-3 py-1 rounded text-xs font-bold bg-red-50 text-red-600 border border-red-200";
            badge.innerText = "Faltante: -S/ " + Math.abs(diff).toFixed(2);
        }
    }

    function procesarCierre() {
        const retiro = parseFloat(document.getElementById('cierre-retiro').value) || 0;
        const justificacion = document.getElementById('cierre-justificacion').value.trim();

        if (confirm("¿Estás seguro de cerrar la caja? Esta acción no se puede deshacer.")) {
            alert("Caja cerrada exitosamente. Generando reporte Z...");
            cerrarModal('modal-cierre');
        }
    }

    // --- FUNCIONES COBRO ---

    function abrirModalCobro(mesa, total) {
        totalActual = total;
        document.getElementById('cobro-titulo-mesa').innerText = mesa;
        document.getElementById('cobro-total-display').innerText = 'S/ ' + total.toFixed(2);
        document.getElementById('modal-cobro').classList.remove('hidden');
        
        document.querySelectorAll('.metodo-btn').forEach(b => {
            b.classList.remove('border-[#194B95]', 'bg-blue-50/30', 'ring-2', 'ring-offset-2', 'ring-[#194B95]');
            b.classList.add('border-slate-100', 'bg-white');
        });
        document.getElementById('panel-efectivo').classList.add('hidden');
        document.getElementById('input-recibido').value = '';
        document.getElementById('display-vuelto').innerText = '---';
    }

    function seleccionarMetodo(metodo) {
        document.querySelectorAll('.metodo-btn').forEach(b => {
            b.classList.remove('border-[#194B95]', 'bg-blue-50/30', 'ring-2', 'ring-offset-2', 'ring-[#194B95]');
            b.classList.add('border-slate-100', 'bg-white');
        });

        const btn = document.getElementById('btn-' + metodo);
        btn.classList.remove('border-slate-100', 'bg-white');
        btn.classList.add('border-[#194B95]', 'bg-blue-50/30', 'ring-2', 'ring-offset-2', 'ring-[#194B95]');
        
        if(metodo === 'efectivo') {
            document.getElementById('panel-efectivo').classList.remove('hidden');
            setTimeout(() => document.getElementById('input-recibido').focus(), 100);
        } else {
            document.getElementById('panel-efectivo').classList.add('hidden');
        }
    }

    function calcularVuelto() {
        const recibido = parseFloat(document.getElementById('input-recibido').value) || 0;
        const vuelto = recibido - totalActual;
        const display = document.getElementById('display-vuelto');
        
        if(vuelto >= 0) {
            display.innerText = 'S/ ' + vuelto.toFixed(2);
            display.className = 'text-3xl font-mono font-black text-emerald-400';
        } else {
            display.innerText = 'Falta';
            display.className = 'text-3xl font-mono font-black text-rose-400';
        }
    }

    function verPDF(doc, total) {
        document.getElementById('pdf-total').innerText = total.toFixed(2);
        document.getElementById('modal-pdf').classList.remove('hidden');
    }
</script>
@endpush