@extends('layouts.panel')

@section('title', 'Caja - Punto de Venta')

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

@section('content')

    {{-- Contenedor Principal (Altura completa para modo App) --}}
    <div class="h-full flex flex-col pb-4 w-full max-w-[1920px] mx-auto overflow-hidden relative z-0">

        {{-- Header --}}
        <div class="px-4 sm:px-6 mb-4 shrink-0 fade-in">
            <div class="flex items-center justify-between mb-5">
                <div class="flex items-center gap-3">
                    <div class="bg-white p-2.5 rounded-xl border border-slate-200 shadow-sm">
                        <i data-lucide="store" class="w-6 h-6 text-[#194B95]"></i>
                    </div>
                    <div>
                        <h1 class="text-2xl font-black text-[#0f172a] tracking-tight leading-none">CAJA GENERAL</h1>
                        <p class="text-xs text-slate-500 font-medium">Gestión de Cobros y Cierre</p>
                    </div>
                </div>
                <div class="flex gap-2">
                    <span class="bg-emerald-50 text-emerald-700 border border-emerald-200 px-4 py-1.5 rounded-full text-xs font-bold font-mono flex items-center gap-2 shadow-sm">
                        <span class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse shadow-[0_0_8px_#10b981]"></span> CAJA ABIERTA
                    </span>
                </div>
            </div>

            {{-- KPIs Rápidos --}}
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex items-center justify-between relative overflow-hidden group">
                    <div class="relative z-10">
                        <p class="text-[11px] text-slate-500 uppercase font-extrabold tracking-widest mb-1">Ventas del Día</p>
                        <p class="text-2xl font-black text-[#0f172a] font-mono tracking-tight">S/ 1,250.00</p>
                    </div>
                    <div class="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center border border-blue-100 group-hover:scale-110 transition-transform">
                        <i data-lucide="trending-up" class="text-[#194B95] w-6 h-6"></i>
                    </div>
                    <div class="absolute bottom-0 left-0 w-full h-1 bg-[#194B95]"></div>
                </div>

                <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex items-center justify-between relative overflow-hidden group">
                    <div class="relative z-10">
                        <p class="text-[11px] text-slate-500 uppercase font-extrabold tracking-widest mb-1">En Efectivo</p>
                        <p class="text-2xl font-black text-emerald-600 font-mono tracking-tight">S/ 450.00</p>
                    </div>
                    <div class="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center border border-emerald-100 group-hover:scale-110 transition-transform">
                        <i data-lucide="banknote" class="text-emerald-600 w-6 h-6"></i>
                    </div>
                    <div class="absolute bottom-0 left-0 w-full h-1 bg-emerald-500"></div>
                </div>

                <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex items-center justify-between relative overflow-hidden group">
                    <div class="relative z-10">
                        <p class="text-[11px] text-slate-500 uppercase font-extrabold tracking-widest mb-1">Pendiente</p>
                        <p class="text-2xl font-black text-[#E21C21] font-mono tracking-tight">S/ 320.00</p>
                    </div>
                    <div class="w-12 h-12 bg-red-50 rounded-xl flex items-center justify-center border border-red-100 group-hover:scale-110 transition-transform">
                        <i data-lucide="clock" class="text-[#E21C21] w-6 h-6"></i>
                    </div>
                    <div class="absolute bottom-0 left-0 w-full h-1 bg-[#E21C21]"></div>
                </div>
            </div>
        </div>

        {{-- Área de Trabajo (Lista y Detalle) --}}
        <div class="flex-1 flex min-h-0 relative gap-4 px-4 sm:px-6 fade-in" style="animation-delay: 100ms;">
            
            {{-- Columna Izquierda: Lista de Pedidos --}}
            <div class="w-full lg:w-[400px] bg-white flex flex-col border border-slate-200 rounded-2xl shadow-sm z-10 overflow-hidden">
                <div class="p-4 border-b border-slate-100 bg-white z-20">
                    <div class="relative">
                        <i data-lucide="search" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                        <input type="text" id="search" placeholder="Buscar mesa, mozo o ticket..." 
                            class="op-input pl-10 text-sm font-medium">
                    </div>
                </div>
                
                <div class="flex-1 overflow-y-auto p-3 space-y-2 custom-scrollbar bg-slate-50/50" id="orders-list">
                    {{-- Se llena con JS --}}
                </div>
            </div>

            {{-- Columna Derecha: Detalle y Pago (Panel Deslizante en Móvil) --}}
            <div id="panel-detail" class="fixed inset-0 lg:static bg-slate-100 lg:bg-transparent z-50 flex flex-col lg:flex-row flex-1 mobile-panel mobile-closed lg:translate-x-0 gap-6">
                
                {{-- Botón Regresar (Solo Móvil) --}}
                <div class="lg:hidden h-16 bg-white border-b border-slate-200 flex items-center px-4 shrink-0 shadow-sm">
                    <button onclick="cerrarPanel()" class="text-slate-600 hover:text-[#194B95] flex items-center gap-2 transition-colors">
                        <i data-lucide="arrow-left" class="w-6 h-6"></i> <span class="font-bold">Regresar</span>
                    </button>
                </div>

                {{-- Ticket Visual --}}
                <div class="flex-1 flex items-center justify-center p-4 relative overflow-hidden">
                    
                    <div id="empty-state" class="text-center text-slate-400 fade-in">
                        <div class="w-24 h-24 bg-white rounded-full flex items-center justify-center mx-auto mb-4 border border-slate-200 shadow-sm">
                            <i data-lucide="receipt" class="w-10 h-10 opacity-40 text-[#194B95]"></i>
                        </div>
                        <h3 class="text-slate-600 font-bold text-lg">Sin Selección</h3>
                        <p class="font-medium text-sm text-slate-400">Selecciona un pedido para cobrar</p>
                    </div>

                    <div id="ticket-paper" class="w-full max-w-[380px] bg-white ticket-shadow hidden flex-col max-h-[85vh] lg:max-h-full animate-in zoom-in-95 duration-300 relative transform rotate-0 lg:rotate-1 transition-transform hover:rotate-0">
                        <div class="h-3 bg-slate-800 w-full relative"></div>
                        
                        <div class="p-8 overflow-y-auto flex-1 text-slate-800 custom-scrollbar font-mono text-sm leading-relaxed">
                            <div class="text-center border-b-2 border-dashed border-slate-300 pb-5 mb-5">
                                <div class="flex justify-center mb-3">
                                    <div class="w-12 h-12 bg-[#194B95] rounded-full flex items-center justify-center text-white">
                                        <i data-lucide="utensils" class="w-6 h-6"></i>
                                    </div>
                                </div>
                                <h2 class="font-black text-xl uppercase tracking-tighter text-[#0f172a]">PITER RESTOBAR</h2>
                                <p class="text-xs text-slate-500 mt-1">Av. Larco 123, Trujillo</p>
                                <p class="text-xs text-slate-500">RUC: 20123456789</p>
                                
                                <div class="mt-4 flex justify-between bg-slate-50 p-3 rounded border border-slate-200 text-xs font-bold">
                                    <div>
                                        <p class="text-slate-400 uppercase text-[10px]">Mesa</p>
                                        <p class="text-[#194B95] text-sm" id="ticket-mesa">--</p>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-slate-400 uppercase text-[10px]">Fecha</p>
                                        <p class="text-slate-700" id="ticket-fecha">--/--</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div id="ticket-items" class="space-y-3 mb-8"></div>
                            
                            <div class="border-t-2 border-dashed border-slate-300 pt-4 space-y-2">
                                <div class="flex justify-between text-slate-500 text-xs">
                                    <span>SUBTOTAL</span>
                                    <span id="t-subtotal">S/ 0.00</span>
                                </div>
                                <div class="flex justify-between text-slate-500 text-xs">
                                    <span>IGV (18%)</span>
                                    <span id="t-igv">S/ 0.00</span>
                                </div>
                                <div class="flex justify-between items-end pt-2">
                                    <span class="text-sm font-bold text-slate-900">TOTAL A PAGAR</span>
                                    <span class="text-3xl font-black text-[#194B95]" id="t-total">S/ 0.00</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="ticket-zigzag bg-transparent"></div> 
                    </div>
                </div>

                {{-- Panel de Pago --}}
                <div id="payment-panel" class="w-full lg:w-[420px] bg-white border border-slate-200 rounded-2xl flex flex-col shrink-0 hidden lg:flex shadow-xl overflow-hidden h-full">
                    <div class="p-6 border-b border-slate-100 bg-white">
                        <h2 class="font-black text-[#0f172a] text-lg mb-1 flex items-center gap-2">
                            <i data-lucide="wallet" class="w-5 h-5 text-[#194B95]"></i> Método de Pago
                        </h2>
                    </div>
                    
                    <div class="p-6 grid grid-cols-3 gap-3 bg-white">
                        <button onclick="setMetodo('efectivo')" class="pay-btn active p-4 rounded-2xl flex flex-col items-center gap-2 transition-all group hover:bg-slate-50">
                            <i data-lucide="banknote" class="w-7 h-7 text-emerald-500 group-hover:scale-110 transition-transform"></i> <span class="text-[10px] font-black tracking-wide">EFECTIVO</span>
                        </button>
                        <button onclick="setMetodo('tarjeta')" class="pay-btn p-4 rounded-2xl flex flex-col items-center gap-2 transition-all group hover:bg-slate-50">
                            <i data-lucide="credit-card" class="w-7 h-7 text-blue-500 group-hover:scale-110 transition-transform"></i> <span class="text-[10px] font-black tracking-wide">TARJETA</span>
                        </button>
                        <button onclick="setMetodo('yape')" class="pay-btn p-4 rounded-2xl flex flex-col items-center gap-2 transition-all group hover:bg-slate-50">
                            <i data-lucide="smartphone" class="w-7 h-7 text-fuchsia-500 group-hover:scale-110 transition-transform"></i> <span class="text-[10px] font-black tracking-wide">YAPE</span>
                        </button>
                    </div>

                    <div class="flex-1 px-6 pb-6 flex flex-col">
                        <div id="view-efectivo" class="bg-slate-50 rounded-2xl border border-slate-200 p-6 flex flex-col justify-center flex-1 relative">
                            
                            <label class="text-xs text-slate-400 uppercase font-bold tracking-wide text-center block mb-2">Monto Recibido</label>
                            <div class="relative mb-4">
                                <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 font-bold text-xl">S/</span>
                                <input type="number" id="input-cash" oninput="calcVuelto()" class="w-full bg-white border border-slate-300 rounded-xl py-4 pl-12 text-4xl font-mono font-bold text-slate-800 text-center focus:border-[#194B95] focus:ring-4 focus:ring-blue-50 outline-none shadow-sm transition-all" placeholder="0.00">
                            </div>

                            <div class="flex gap-2 justify-center mb-6">
                                <button onclick="addCash(10)" class="px-3 py-1.5 bg-white border border-slate-200 rounded-lg text-xs font-bold text-slate-600 hover:border-[#194B95] hover:text-[#194B95] shadow-sm">+10</button>
                                <button onclick="addCash(20)" class="px-3 py-1.5 bg-white border border-slate-200 rounded-lg text-xs font-bold text-slate-600 hover:border-[#194B95] hover:text-[#194B95] shadow-sm">+20</button>
                                <button onclick="addCash(50)" class="px-3 py-1.5 bg-white border border-slate-200 rounded-lg text-xs font-bold text-slate-600 hover:border-[#194B95] hover:text-[#194B95] shadow-sm">+50</button>
                                <button onclick="addCash(100)" class="px-3 py-1.5 bg-white border border-slate-200 rounded-lg text-xs font-bold text-slate-600 hover:border-[#194B95] hover:text-[#194B95] shadow-sm">+100</button>
                            </div>

                            <div class="flex justify-between items-center border-t border-slate-200 pt-4 mt-auto">
                                <span class="text-xs font-bold text-slate-500 uppercase">VUELTO:</span>
                                <span class="text-3xl font-black text-emerald-600 font-mono" id="lbl-vuelto">S/ 0.00</span>
                            </div>
                        </div>

                        <div id="view-otros" class="hidden flex-1 bg-slate-50 rounded-2xl border border-slate-200 p-6 flex flex-col items-center justify-center text-center">
                            <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-sm border border-slate-100 mb-4 animate-bounce">
                                <i data-lucide="terminal" class="w-8 h-8 text-[#194B95]"></i>
                            </div>
                            <h3 class="font-bold text-slate-800">Terminal Externo</h3>
                            <p class="text-sm text-slate-500 mt-1 max-w-[200px]">Por favor procese el cobro en el POS físico.</p>
                        </div>
                    </div>

                    <div class="p-6 border-t border-slate-100 bg-white">
                        <button onclick="procesarCobro()" id="btn-cobrar" disabled class="w-full py-4 bg-[#194B95] hover:bg-[#123670] disabled:bg-slate-200 disabled:text-slate-400 text-white font-black rounded-xl shadow-xl shadow-blue-100 disabled:shadow-none transition-all flex justify-center items-center gap-3 uppercase tracking-wide text-sm transform active:scale-[0.98]">
                            <span>CONFIRMAR COBRO</span> <i data-lucide="check-circle-2" class="w-5 h-5"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL SUCCESS --}}
    <div id="modal-success" class="fixed inset-0 z-[100] hidden items-center justify-center bg-[#0f172a]/60 backdrop-blur-sm opacity-0 transition-opacity duration-300">
        <div class="bg-white p-8 rounded-3xl text-center shadow-2xl transform scale-95 transition-all w-full max-w-sm border border-slate-100 relative overflow-hidden" id="modal-box">
            <div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-emerald-400 to-blue-500"></div>
            
            <div class="w-20 h-20 bg-emerald-50 rounded-full flex items-center justify-center mx-auto mb-6 border-4 border-emerald-100">
                <i data-lucide="check" class="w-10 h-10 text-emerald-600 stroke-[3px]"></i>
            </div>
            <h2 class="text-2xl font-black text-slate-800 mb-2">¡Cobro Exitoso!</h2>
            <p class="text-sm text-slate-500 mb-8 font-medium px-4">El ticket ha sido generado y enviado a impresión correctamente.</p>
            <div class="grid gap-3">
                <button onclick="cerrarModal()" class="w-full bg-[#194B95] text-white font-bold py-3.5 rounded-xl hover:bg-[#123670] transition-colors shadow-lg shadow-blue-100 uppercase tracking-wide text-xs">NUEVA VENTA</button>
                <button class="w-full bg-white text-slate-600 border border-slate-200 font-bold py-3.5 rounded-xl hover:bg-slate-50 transition-colors uppercase tracking-wide text-xs flex justify-center gap-2">
                    <i data-lucide="printer" class="w-4 h-4"></i> Reimprimir
                </button>
            </div>
        </div>
    </div>

@endsection

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

    // DATOS DE PRUEBA
    let orders = [
        { id: 1, mesa: "MESA 01", estado: 'Pendiente', items: [{n:"Lomo Saltado", p:45}, {n:"Inca Kola", p:12}], total: 57.00 },
        { id: 2, mesa: "MESA 05", estado: 'Parcial', items: [{n:"Ceviche", p:40}], total: 40.00 },
        { id: 3, mesa: "BARRA 02", estado: 'Pendiente', items: [{n:"Pisco Sour", p:25}, {n:"Chilcano", p:22}], total: 47.00 },
        { id: 4, mesa: "TERRAZA 1", estado: 'Pendiente', items: [{n:"Jalea Mixta", p:80}], total: 80.00 }
    ];
    let currentOrder = null;

    // RENDERIZAR LISTA
    function renderList() {
        const list = document.getElementById('orders-list');
        const search = document.getElementById('search').value.toLowerCase();
        list.innerHTML = '';

        orders.filter(o => o.mesa.toLowerCase().includes(search)).forEach((o, i) => {
            const isSelected = currentOrder && currentOrder.id === o.id ? 'selected' : 'border-slate-200 bg-white';
            
            list.innerHTML += `
                <div onclick="selectOrder(${o.id})" style="animation-delay: ${i*50}ms" 
                    class="anim-item order-card p-4 rounded-xl border cursor-pointer mb-3 relative overflow-hidden group ${isSelected}">
                    <div class="flex justify-between items-center relative z-10">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-slate-50 flex items-center justify-center text-slate-400 font-bold border border-slate-100 group-hover:bg-blue-50 group-hover:text-[#194B95] transition-colors">
                                ${o.mesa.charAt(0)}
                            </div>
                            <div>
                                <h3 class="font-bold text-slate-800 text-sm group-hover:text-[#194B95] transition-colors">${o.mesa}</h3>
                                <p class="text-[10px] text-slate-500 font-medium mt-0.5 uppercase tracking-wide text-[#E21C21]">${o.estado}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <span class="font-mono font-black text-slate-800 text-lg">S/ ${o.total.toFixed(2)}</span>
                            <p class="text-[10px] text-slate-400 text-right">${o.items.length} items</p>
                        </div>
                    </div>
                </div>`;
        });
    }

    function selectOrder(id) {
        currentOrder = orders.find(o => o.id === id);
        renderList(); 
        
        // UI Update
        document.getElementById('empty-state').classList.add('hidden');
        document.getElementById('ticket-paper').classList.remove('hidden');
        document.getElementById('ticket-paper').classList.add('flex');
        
        // Ticket Info
        document.getElementById('ticket-mesa').innerText = currentOrder.mesa;
        document.getElementById('ticket-fecha').innerText = new Date().toLocaleDateString();
        
        // Totales con IGV
        const total = currentOrder.total;
        const subtotal = total / 1.18;
        const igv = total - subtotal;

        document.getElementById('t-subtotal').innerText = `S/ ${subtotal.toFixed(2)}`;
        document.getElementById('t-igv').innerText = `S/ ${igv.toFixed(2)}`;
        document.getElementById('t-total').innerText = `S/ ${total.toFixed(2)}`;
        
        let itemsHtml = '';
        currentOrder.items.forEach(i => {
            itemsHtml += `
            <div class="flex justify-between border-b border-dashed border-slate-200 pb-2">
                <span class="font-medium text-slate-700">${i.n}</span>
                <span class="font-bold text-slate-900">${i.p.toFixed(2)}</span>
            </div>`;
        });
        document.getElementById('ticket-items').innerHTML = itemsHtml;

        // Mostrar Panel Derecho (Móvil)
        document.getElementById('panel-detail').classList.remove('mobile-closed');
        document.getElementById('payment-panel').classList.remove('hidden');
        document.getElementById('payment-panel').classList.add('flex');
        
        // Reset Inputs
        document.getElementById('input-cash').value = '';
        document.getElementById('lbl-vuelto').innerText = 'S/ 0.00';
        document.getElementById('btn-cobrar').disabled = true;
        
        // Auto-focus
        if(!document.getElementById('view-efectivo').classList.contains('hidden')) {
            setTimeout(() => document.getElementById('input-cash').focus(), 100);
        }
    }

    function cerrarPanel() {
        document.getElementById('panel-detail').classList.add('mobile-closed');
        currentOrder = null;
        renderList();
        setTimeout(() => {
            if(window.innerWidth >= 1024) {
                document.getElementById('empty-state').classList.remove('hidden');
                document.getElementById('ticket-paper').classList.add('hidden');
                document.getElementById('payment-panel').classList.add('hidden');
            }
        }, 300);
    }

    function setMetodo(metodo) {
        document.querySelectorAll('.pay-btn').forEach(btn => btn.classList.remove('active'));
        event.currentTarget.classList.add('active');

        if(metodo === 'efectivo') {
            document.getElementById('view-efectivo').classList.remove('hidden');
            document.getElementById('view-otros').classList.add('hidden');
            document.getElementById('input-cash').focus();
            calcVuelto(); 
        } else {
            document.getElementById('view-efectivo').classList.add('hidden');
            document.getElementById('view-otros').classList.remove('hidden');
            document.getElementById('btn-cobrar').disabled = false;
        }
    }

    function addCash(amount) {
        const input = document.getElementById('input-cash');
        const currentVal = parseFloat(input.value) || 0;
        input.value = (currentVal + amount).toFixed(2);
        calcVuelto();
    }

    function calcVuelto() {
        if(document.getElementById('view-efectivo').classList.contains('hidden')) return;

        const cash = parseFloat(document.getElementById('input-cash').value) || 0;
        const total = currentOrder ? currentOrder.total : 0;
        const vuelto = cash - total;
        const btn = document.getElementById('btn-cobrar');
        const lbl = document.getElementById('lbl-vuelto');

        if(vuelto >= 0 && total > 0) {
            lbl.innerText = `S/ ${vuelto.toFixed(2)}`;
            lbl.className = 'text-3xl font-black text-emerald-600 font-mono';
            btn.disabled = false;
        } else {
            lbl.innerText = "Falta";
            lbl.className = 'text-3xl font-black text-[#E21C21] font-mono';
            btn.disabled = true;
        }
    }

    function procesarCobro() {
        const btn = document.getElementById('btn-cobrar');
        btn.innerHTML = `<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i> PROCESANDO...`;
        
        setTimeout(() => {
            const modal = document.getElementById('modal-success');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
            setTimeout(() => {
                modal.classList.remove('opacity-0');
                document.getElementById('modal-box').classList.remove('scale-95');
                document.getElementById('modal-box').classList.add('scale-100');
            }, 10);
            
            btn.innerHTML = `<span>CONFIRMAR COBRO</span> <i data-lucide="check-circle-2" class="w-5 h-5"></i>`;
        }, 800);
    }

    function cerrarModal() {
        const modal = document.getElementById('modal-success');
        const box = document.getElementById('modal-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');
            
            orders = orders.filter(o => o.id !== currentOrder.id); 
            cerrarPanel();
        }, 300);
    }

    document.getElementById('search').addEventListener('keyup', renderList);
    renderList();
</script>
@endpush