@extends('layouts.cashier')

@section('page_title', 'Terminal de Caja')

@push('styles')
<style>
    /* Estilos base consistentes con la app Flutter */
    :root {
        --caja-green: #059669; /* Emerald 600 */
        --caja-blue: #2563eb;  /* Blue 600 */
        --caja-red: #dc2626;   /* Red 600 */
        --caja-orange: #f59e0b;/* Amber 500 */
    }

    /* Animaciones suaves */
    .fade-in {
        animation: fadeIn 0.4s ease-in-out;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Estilos de Tabla Premium */
    .table-row-hover:hover {
        background-color: #f8fafc;
        transform: scale(1.002);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }
    
    .table-row-hover {
        transition: all 0.2s ease;
        border-bottom: 1px solid #f1f5f9;
    }

    /* Botones de acción flotantes (Hover) */
    .btn-hover-effect:hover {
        transform: translateY(-2px);
        filter: brightness(1.1);
    }
    
    .btn-hover-effect {
        transition: all 0.2s ease;
    }

    /* Insignias de tiempo dinámicas */
    .badge-red { background: #fef2f2; color: #ef4444; border: 1px solid #fca5a5; }
    .badge-yellow { background: #fffbeb; color: #f59e0b; border: 1px solid #fcd34d; }
    .badge-green { background: #f0fdf4; color: #22c55e; border: 1px solid #86efac; }
</style>
@endpush

@section('cashier_content')

<div class="max-w-[1600px] mx-auto w-full flex flex-col gap-8 animate-in fade-in duration-500">

    {{-- CABECERA: TÍTULO Y BOTONES DE NAVEGACIÓN (Paridad Flutter BottomBar) --}}
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
        {{-- Lado Izquierdo: Título --}}
        <div class="flex items-center gap-4">
            <div class="w-14 h-14 bg-blue-600 rounded-2xl flex items-center justify-center shadow-lg shadow-blue-600/30">
                <i data-lucide="store" class="w-7 h-7 text-white"></i>
            </div>
            <div>
                <h1 class="text-2xl font-black text-slate-800 tracking-tight uppercase">Terminal de Caja</h1>
                <div class="flex items-center gap-2 mt-1">
                    <span class="w-2.5 h-2.5 bg-emerald-500 rounded-full animate-pulse"></span>
                    <span class="text-xs font-bold text-emerald-600 uppercase tracking-widest" id="header-status">Caja Abierta</span>
                    <span class="text-xs text-slate-400 font-medium ml-1" id="header-date">• --/--/----</span>
                </div>
            </div>
        </div>

        {{-- Lado Derecho: Botones (Mapeo a Vistas de Flutter) --}}
        <div class="flex items-center gap-3">
            <button class="btn-hover-effect px-5 py-2.5 rounded-xl border-2 border-slate-200 text-slate-600 font-bold text-sm flex items-center gap-2 hover:border-blue-600 hover:text-blue-600 bg-white">
                <i data-lucide="monitor" class="w-4 h-4"></i> MONITOR
            </button>
            <button onclick="window.location.href='/cashier/auditoria'" class="btn-hover-effect px-5 py-2.5 rounded-xl border-2 border-slate-200 text-slate-600 font-bold text-sm flex items-center gap-2 hover:border-slate-800 hover:text-slate-800 bg-white" title="Historial / Auditoría">
                <i data-lucide="history" class="w-4 h-4"></i> HISTORIAL
            </button>
            <button onclick="window.location.href='/cashier/salidas'" class="btn-hover-effect px-5 py-2.5 rounded-xl bg-amber-500 text-white font-black text-sm flex items-center gap-2 shadow-lg shadow-amber-500/30">
                <i data-lucide="minus-circle" class="w-4 h-4"></i> RETIRO / GASTO
            </button>
            <button onclick="window.location.href='/cashier/apertura'" class="btn-hover-effect px-5 py-2.5 rounded-xl bg-red-600 text-white font-black text-sm flex items-center gap-2 shadow-lg shadow-red-600/30">
                <i data-lucide="lock" class="w-4 h-4"></i> CERRAR CAJA
            </button>
        </div>
    </div>

    {{-- SECCIÓN DE RESÚMENES (3 Columnas Exactas al Mockup) --}}
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 md:p-8">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center divide-y md:divide-y-0 md:divide-x divide-slate-100">
            
            {{-- Columna 1: Efectivo --}}
            <div class="flex items-center justify-between md:pr-8 py-2 md:py-0">
                <div class="flex flex-col gap-1">
                    <span class="text-xs font-bold text-slate-400 uppercase tracking-widest">Efectivo en Caja</span>
                    <span class="text-4xl font-black text-emerald-600" id="monto-efectivo">S/ 0.00</span>
                </div>
                <button class="w-12 h-12 rounded-xl bg-emerald-50 border border-emerald-100 flex items-center justify-center text-emerald-600 btn-hover-effect shadow-sm">
                    <i data-lucide="banknote" class="w-6 h-6"></i>
                </button>
            </div>

            {{-- Columna 2: Digital/Tarjetas --}}
            <div class="flex items-center justify-between md:px-8 py-4 md:py-0">
                <div class="flex flex-col gap-1">
                    <span class="text-xs font-bold text-slate-400 uppercase tracking-widest">Digital / Tarjetas</span>
                    <span class="text-4xl font-black text-blue-600" id="monto-digital">S/ 0.00</span>
                </div>
                <button class="w-12 h-12 rounded-xl bg-blue-50 border border-blue-100 flex items-center justify-center text-blue-600 btn-hover-effect shadow-sm">
                    <i data-lucide="credit-card" class="w-6 h-6"></i>
                </button>
            </div>

            {{-- Columna 3: Por Cobrar --}}
            <div class="flex items-center justify-between md:pl-8 py-2 md:py-0 relative">
                {{-- Línea roja decorativa tipo Flutter --}}
                <div class="absolute left-0 top-1/2 -translate-y-1/2 w-1.5 h-16 bg-red-600 rounded-r-full hidden md:block"></div>
                
                <div class="flex flex-col gap-1 md:ml-4">
                    <span class="text-xs font-bold text-slate-400 uppercase tracking-widest">Por Cobrar (Pendiente)</span>
                    <span class="text-4xl font-black text-red-600" id="monto-por-cobrar">S/ 0.00</span>
                </div>
                <button class="w-12 h-12 rounded-xl bg-red-50 border border-red-100 flex items-center justify-center text-red-600 btn-hover-effect shadow-sm">
                    <i data-lucide="alert-circle" class="w-6 h-6"></i>
                </button>
            </div>

        </div>
    </div>

    {{-- LISTADO DE PENDIENTES DE COBRO (Tabla) --}}
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden flex flex-col flex-1 min-h-[400px]">
        {{-- Cabecera y Buscador --}}
        <div class="p-6 border-b border-slate-100 flex flex-col md:flex-row items-center justify-between gap-4">
            <div class="flex items-center gap-3">
                <div class="w-3 h-3 rounded-full bg-red-600 shadow-[0_0_8px_rgba(220,38,38,0.5)]"></div>
                <h2 class="text-lg font-black text-slate-800">Pendientes de Cobro</h2>
            </div>
            
            <div class="relative w-full md:w-80">
                <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                <input type="text" id="search-input" placeholder="Buscar mesa o mozo..." 
                       class="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm font-medium focus:ring-2 focus:ring-blue-600/20 focus:border-blue-600 outline-none transition-all placeholder:text-slate-400 text-slate-700">
            </div>
        </div>

        {{-- Tabla --}}
        <div class="overflow-x-auto w-full">
            <table class="w-full text-left border-collapse min-w-[800px]">
                <thead>
                    <tr class="bg-slate-50/80 border-b border-slate-100">
                        <th class="py-4 px-6 text-xs font-bold text-slate-500 uppercase tracking-widest">Origen / Mesa</th>
                        <th class="py-4 px-6 text-xs font-bold text-slate-500 uppercase tracking-widest">Mozo</th>
                        <th class="py-4 px-6 text-xs font-bold text-slate-500 uppercase tracking-widest">Tiempo</th>
                        <th class="py-4 px-6 text-xs font-bold text-slate-500 uppercase tracking-widest">Total a Pagar</th>
                        <th class="py-4 px-6 text-xs font-bold text-slate-500 uppercase tracking-widest text-right">Acción</th>
                    </tr>
                </thead>
                <tbody id="mesas-tbody" class="divide-y divide-slate-100">
                    {{-- Filas llenadas por JS --}}
                    <tr>
                        <td colspan="5" class="py-12 text-center text-slate-400 font-bold text-sm">
                            <i data-lucide="loader-2" class="w-6 h-6 animate-spin mx-auto mb-2 text-blue-600"></i>
                            Cargando pendientes...
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script>
    // Variables globales
    let activeCajaId = localStorage.getItem('active_caja_id');
    const token = localStorage.getItem('auth_token'); // Si existe por web
    
    // INYECCIÓN DIRECTA DESDE BACKEND PARA EVITAR DATOS FALSOS / VACÍOS
    const sucursalId = '{{ Auth::guard("admin")->user()->sucursal_asignada_id ?? Auth::user()->sucursal_asignada_id ?? "" }}';
    
    let allPedidos = []; // Cache para el buscador

    document.addEventListener('DOMContentLoaded', () => {
        // Poner fecha en cabecera
        const today = new Date();
        document.getElementById('header-date').innerText = `• ${today.toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit', year: 'numeric' })}`;

        if(activeCajaId && sucursalId) {
            fetchDashboardData();
        } else {
            console.warn("Faltan credenciales, caja no abierta o no tienes sucursal asignada.");
            // Evitamos redirección en bucle si están testeando
            if(!activeCajaId) window.location.href = '/cashier/apertura';
        }

        // Buscador Dinámico
        document.getElementById('search-input').addEventListener('input', (e) => {
            const term = e.target.value.toLowerCase();
            const filtered = allPedidos.filter(p => {
                const mesa = (p.mesa?.nombre || p.mesa_nombre || 'Mesa').toLowerCase();
                const mozo = (p.usuario?.nombre_completo || 'Sin Asignar').toLowerCase();
                return mesa.includes(term) || mozo.includes(term);
            });
            renderMesas(filtered);
        });
    });

    async function fetchDashboardData() {
        if(!sucursalId) return;

        // Cabeceras base
        const headers = {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        };
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
        if(csrfToken) headers['X-CSRF-TOKEN'] = csrfToken;
        if(token) headers['Authorization'] = 'Bearer ' + token;

        try {
            // 1. Resumen de Caja (Mapeo idéntico a cashier_dashboard_view.dart)
            const resCaja = await fetch(`/middleware/api/Billing/Caja/Resumen/${activeCajaId}`, { headers });

            if (resCaja.ok) {
                const bodyJson = await resCaja.json();
                if(bodyJson.data) {
                    const data = bodyJson.data;
                    const ingresosEfectivo = parseFloat(data.ingresos_efectivo || 0);
                    const ingresosTarjetas = parseFloat(data.ingresos_tarjetas || 0);
                    const ingresosQr = parseFloat(data.ingresos_qr || 0);
                    
                    const totalDigital = ingresosTarjetas + ingresosQr;
                    const esperado = parseFloat(data.monto_esperado || 0); // Fondo en caja (para uso futuro o validación)

                    document.getElementById('monto-efectivo').innerText = `S/ ${ingresosEfectivo.toFixed(2)}`;
                    document.getElementById('monto-digital').innerText = `S/ ${totalDigital.toFixed(2)}`;
                }
            } else {
                // Validación "Sesión Fantasma" como en Flutter (Líneas 717-746)
                const resStr = await resCaja.text();
                const resStrLow = resStr.toLowerCase();
                if (resCaja.status === 404 || resCaja.status === 400 || 
                    resStrLow.includes("no se") || resStrLow.includes("no activa")) {
                    console.error("Sesión fantasma detectada. Limpiando storage...");
                    localStorage.removeItem('active_caja_id');
                    localStorage.removeItem('active_caja_monto_inicial');
                    window.location.href = '/cashier/apertura';
                    return;
                }
            }

            // 2. Mesas Activas / Pendientes de Cobro (Línea 753+ Flutter)
            if(sucursalId) {
                const resMesas = await fetch(`/middleware/api/Orders/Sucursales/${sucursalId}`, { headers });

                if(resMesas.ok) {
                    const dataMesas = await resMesas.json();
                    let pedidos = [];
                    if(Array.isArray(dataMesas)) pedidos = dataMesas;
                    else if(dataMesas.data && Array.isArray(dataMesas.data)) pedidos = dataMesas.data;

                    // Omitir CANCELADO, CERRADA, CERRADO, ANULADO (Línea 788 Flutter)
                    allPedidos = pedidos.filter(p => {
                        const estado = (p.estado || p.status || '').toUpperCase();
                        return !['CANCELADO', 'CERRADA', 'CERRADO', 'ANULADO'].includes(estado);
                    });

                    // Calcular "Por Cobrar (Pendiente)" global sumando los totales (excluyendo Pagados/Completados)
                    const totalPorCobrar = allPedidos.reduce((acc, curr) => {
                        const estado = (curr.estado || curr.status || '').toUpperCase();
                        if (estado === 'PAGADO' || estado === 'COMPLETADO') return acc;
                        return acc + parseFloat(curr.total || 0);
                    }, 0);
                    document.getElementById('monto-por-cobrar').innerText = `S/ ${totalPorCobrar.toFixed(2)}`;

                    renderMesas(allPedidos);
                }
            }

        } catch(e) {
            console.error("Error cargando dashboard:", e);
        }
    }

    function renderMesas(pedidos) {
        const tbody = document.getElementById('mesas-tbody');
        tbody.innerHTML = '';
        
        if(pedidos.length === 0) {
            tbody.innerHTML = `<tr>
                <td colspan="5" class="py-12 text-center text-slate-400 font-bold text-sm">
                    No hay mesas pendientes de cobro.
                </td>
            </tr>`;
            return;
        }

        pedidos.forEach(p => {
            const mesaNombre = p.mesa?.nombre || p.mesa_nombre || 'Mesa ?';
            const mesaId = p.mesa_id || p.resource_id || '';
            const mesero = p.usuario?.nombre_completo || 'Sin Asignar';
            const total = parseFloat(p.total || 0).toFixed(2);
            const idPedidoShort = p.id_pedido ? `#${p.id_pedido.toString().substring(0,4)}` : '';

            // Cálculo del Tiempo (Minutos transcurridos)
            let minutos = 0;
            if(p.created_at) {
                const createdDate = new Date(p.created_at);
                const now = new Date();
                const diffMs = now - createdDate;
                minutos = Math.floor(diffMs / 60000);
            }

            // Asignar clase de insignia dinámicamente según tiempo
            let badgeClass = 'badge-green';
            if(minutos > 20) badgeClass = 'badge-yellow';
            if(minutos > 40) badgeClass = 'badge-red';

            const estadoPedido = (p.estado || p.status || '').toUpperCase();
            
            let actionButton = '';
            let estadoBadge = '';

            if (estadoPedido === 'PAGADO' || estadoPedido === 'COMPLETADO') {
                actionButton = `
                    <button onclick="reimprimirTicket('${p.id_pedido}')" class="btn-hover-effect px-4 py-2 rounded-xl border-2 border-emerald-200 text-emerald-600 font-bold text-xs uppercase tracking-widest hover:border-emerald-600 hover:bg-emerald-50 hover:text-emerald-600 flex items-center gap-2 ml-auto">
                        <i data-lucide="printer" class="w-4 h-4"></i> IMPRIMIR
                    </button>`;
                estadoBadge = `<span class="inline-flex items-center justify-center px-2 py-0.5 mt-1 rounded text-[9px] font-bold tracking-wide bg-emerald-100 text-emerald-700">${estadoPedido}</span>`;
            } else {
                actionButton = `
                    <button onclick="cobrarPedido('${p.id_pedido}', '${mesaId}', '${total}')" class="btn-hover-effect px-4 py-2 rounded-xl border-2 border-slate-200 text-slate-600 font-bold text-xs uppercase tracking-widest hover:border-blue-600 hover:bg-blue-50 hover:text-blue-600 flex items-center gap-2 ml-auto">
                        <i data-lucide="credit-card" class="w-4 h-4"></i> COBRAR
                    </button>`;
                estadoBadge = `<span class="inline-flex items-center justify-center px-2 py-0.5 mt-1 rounded text-[9px] font-bold tracking-wide bg-amber-100 text-amber-700">${estadoPedido}</span>`;
            }

            const tr = document.createElement('tr');
            tr.className = 'table-row-hover fade-in';
            tr.innerHTML = `
                <td class="py-4 px-6">
                    <div class="flex flex-col items-start">
                        <span class="font-black text-slate-800 text-base">${mesaNombre}</span>
                        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">ID: ${idPedidoShort}</span>
                        ${estadoBadge}
                    </div>
                </td>
                <td class="py-4 px-6 text-sm font-bold text-slate-600">${mesero}</td>
                <td class="py-4 px-6">
                    <span class="inline-flex items-center justify-center px-2.5 py-1 rounded-md text-[11px] font-black tracking-wide ${badgeClass}">
                        ${minutos} min
                    </span>
                </td>
                <td class="py-4 px-6">
                    <span class="font-black text-slate-800 text-lg">S/ ${total}</span>
                </td>
                <td class="py-4 px-6 text-right">
                    ${actionButton}
                </td>
            `;
            tbody.appendChild(tr);
        });

        // Refrescar iconos SVG para los elementos nuevos
        if(window.lucide) lucide.createIcons();
    }

    // Funciones placeholders para conectar luego
    function reimprimirTicket(id_pedido) {
        window.open(\`/api/Billing/Comprobante/\${id_pedido}/PDF\`, '_blank');
    }

    function cobrarPedido(id_pedido, mesa_id, total) {
        alert(`Módulo de Cobro para Pedido: ${id_pedido}\nTotal: S/ ${total}\n(Esta vista se conectará con el checkout)`);
        // location.href = `/cashier/cobrar/${id_pedido}`;
    }

    // --- ESCUCHA DE SESIÓN EN TIEMPO REAL (Líneas 347-365 de Flutter) ---
    // Si la web ya tiene configurado Echo globalmente en panel.blade.php:
    window.addEventListener('DOMContentLoaded', () => {
        if (window.Echo && token) {
            const user = JSON.parse(userStr);
            if(user && user.sucursal_asignada_id) {
                // Escuchar eventos de la sucursal (puedes ajustar el canal exacto según tu API)
                // Flutter escucha el EventBus global. Aquí simularemos el reload al detectar cambios
                console.log("Activando WebSockets para el Dashboard de Caja...");
                
                // Ejemplo: Echo.private('sucursal.' + user.sucursal_asignada_id).listen(...)
                // Por ahora usamos setInterval para simular polling si WS no está listo en web
                setInterval(() => {
                    // Refrescar cada 60s como respaldo
                    fetchDashboardData();
                }, 60000);
            }
        }
    });

</script>
@endpush