@extends('layouts.panel')

@section('title', 'Auditoría Forense - Prevención de Fraude')

@section('content')

    {{-- Header --}}
    <div class="shrink-0 mb-6 flex flex-col gap-6 fade-in">
        <div class="flex flex-col md:flex-row justify-between items-end gap-4">
            <div class="flex items-center gap-4">
                <div class="p-3 bg-white border border-slate-200 rounded-xl shadow-sm hidden md:block">
                    <i data-lucide="shield-alert" class="w-8 h-8 text-[#194B95]"></i>
                </div>
                <div>
                    <div class="flex items-center gap-2 mb-1">
                        <span class="inline-flex items-center rounded-full bg-red-50 px-2 py-1 text-xs font-bold text-[#E21C21] ring-1 ring-inset ring-red-600/10">3 CRÍTICOS HOY</span>
                        <span class="text-xs text-slate-500 font-mono">UPDATED: <span id="clock">12:00:00</span></span>
                    </div>
                    <h1 class="text-3xl font-black text-[#0f172a] tracking-tight">AUDITORÍA FORENSE</h1>
                </div>
            </div>
            
            <div class="flex gap-2 w-full md:w-auto">
                <button class="flex-1 md:flex-none justify-center bg-white border border-slate-200 text-slate-600 px-4 py-2.5 rounded-xl text-xs font-bold hover:border-[#194B95] hover:text-[#194B95] transition-all flex items-center gap-2 shadow-sm">
                    <i data-lucide="sliders-horizontal" class="w-4 h-4"></i> REGLAS
                </button>
                <button class="flex-1 md:flex-none justify-center bg-[#194B95] text-white px-5 py-2.5 rounded-xl text-xs font-bold hover:bg-[#123670] transition-all flex items-center gap-2 shadow-md shadow-blue-100">
                    <i data-lucide="file-bar-chart" class="w-4 h-4"></i> REPORTE PDF
                </button>
            </div>
        </div>

        {{-- Tarjetas de Riesgo --}}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {{-- Riesgo Crítico --}}
            <div class="risk-card risk-critical">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Anulaciones (Post-Mesa)</p>
                        <h3 class="text-2xl font-black text-[#0f172a] mt-1">S/ 850.00</h3>
                    </div>
                    <i data-lucide="trash-2" class="w-5 h-5 text-[#E21C21]"></i>
                </div>
                <div class="mt-3 flex items-center gap-1 text-[10px] text-red-600 font-bold">
                    <i data-lucide="trending-up" class="w-3 h-3"></i> +15% vs Promedio
                </div>
            </div>
            
            {{-- Riesgo Medio --}}
            <div class="risk-card risk-medium">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Descuentos Manuales</p>
                        <h3 class="text-2xl font-black text-[#0f172a] mt-1">S/ 120.00</h3>
                    </div>
                    <i data-lucide="percent" class="w-5 h-5 text-amber-500"></i>
                </div>
                <div class="mt-3 flex items-center gap-1 text-[10px] text-slate-400 font-medium">
                    Dentro del rango normal
                </div>
            </div>

            {{-- Riesgo Info --}}
            <div class="risk-card risk-info">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Aperturas de Cajón</p>
                        <h3 class="text-2xl font-black text-[#0f172a] mt-1">14</h3>
                    </div>
                    <i data-lucide="unlock" class="w-5 h-5 text-[#194B95]"></i>
                </div>
                <div class="mt-3 flex items-center gap-1 text-[10px] text-slate-400 font-medium">
                    3 Sin venta asociada
                </div>
            </div>
            
            {{-- Riesgo Estándar --}}
            <div class="risk-card" style="border-left: 4px solid #64748b;">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Reimpresiones</p>
                        <h3 class="text-2xl font-black text-[#0f172a] mt-1">8</h3>
                    </div>
                    <i data-lucide="printer" class="w-5 h-5 text-slate-400"></i>
                </div>
                <div class="mt-3 flex items-center gap-1 text-[10px] text-slate-400 font-medium">
                    Posible duplicidad
                </div>
            </div>
        </div>
    </div>

    {{-- Tabla de Auditoría --}}
    <div class="bg-white border border-slate-200 rounded-2xl shadow-sm flex flex-col flex-1 overflow-hidden fade-in" style="animation-delay: 100ms;">
        <div class="px-5 py-4 border-b border-slate-100 flex flex-col md:flex-row gap-4 bg-slate-50/50 justify-between items-center">
            <div class="relative w-full md:w-96">
                <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" placeholder="Buscar ticket, usuario, producto..." class="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm focus:border-[#194B95] outline-none transition-all shadow-sm">
            </div>
            
            <div class="flex gap-2 w-full md:w-auto">
                <select class="flex-1 md:flex-none bg-white border border-slate-200 text-slate-600 text-xs font-bold rounded-lg px-3 py-2 outline-none cursor-pointer hover:border-slate-300">
                    <option>Todos los Riesgos</option>
                    <option>Crítico (Rojo)</option>
                    <option>Medio (Ámbar)</option>
                </select>
                <select class="flex-1 md:flex-none bg-white border border-slate-200 text-slate-600 text-xs font-bold rounded-lg px-3 py-2 outline-none cursor-pointer hover:border-slate-300">
                    <option>Últimas 24h</option>
                    <option>Semana Actual</option>
                    <option>Mes Actual</option>
                </select>
            </div>
        </div>

        <div class="flex-1 overflow-auto custom-scrollbar">
            <table class="w-full text-left border-collapse">
                <thead class="bg-white sticky top-0 z-10 border-b border-slate-200">
                    <tr>
                        <th class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Hora</th>
                        <th class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Usuario</th>
                        <th class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Evento</th>
                        <th class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Detalle</th>
                        <th class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest text-center">Impacto</th>
                        <th class="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest text-right">Acción</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-sm bg-white">
                    
                    {{-- Fila 1: Crítica --}}
                    <tr class="hover:bg-red-50/30 transition-colors group cursor-pointer border-l-4 border-l-[#E21C21]">
                        <td class="px-6 py-4 font-mono text-slate-500 font-bold">02:45:12</td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <div class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center text-[10px] font-black text-slate-600 border border-slate-200">CR</div>
                                <div>
                                    <p class="font-bold text-slate-800 text-xs">Carlos Ruiz</p>
                                    <p class="text-[10px] text-slate-500">Caja Principal</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-2 text-[#E21C21]">
                                <i data-lucide="trash-2" class="w-4 h-4"></i>
                                <span class="font-bold text-xs">Eliminación Item</span>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <p class="text-xs text-slate-700 font-medium">Ticket <span class="font-mono bg-slate-100 px-1 rounded">#9021</span></p>
                            <p class="text-[10px] text-slate-400">Post-facturación (45m)</p>
                        </td>
                        <td class="px-6 py-4 text-center">
                            <span class="bg-red-50 text-[#E21C21] px-2 py-1 rounded text-xs font-black border border-red-100">S/ 320.00</span>
                        </td>
                        <td class="px-6 py-4 text-right">
                            <button onclick="openModal()" class="text-[#194B95] hover:text-[#123670] hover:underline text-xs font-bold">Investigar</button>
                        </td>
                    </tr>

                    {{-- Fila 2: Media --}}
                    <tr class="hover:bg-amber-50/30 transition-colors group cursor-pointer border-l-4 border-l-amber-500">
                        <td class="px-6 py-4 font-mono text-slate-500 font-bold">01:15:00</td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <div class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center text-[10px] font-black text-slate-600 border border-slate-200">AL</div>
                                <div>
                                    <p class="font-bold text-slate-800 text-xs">Ana Lopez</p>
                                    <p class="text-[10px] text-slate-500">Mozo Terraza</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-2 text-amber-600">
                                <i data-lucide="tag" class="w-4 h-4"></i>
                                <span class="font-bold text-xs">Cambio Precio</span>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <p class="text-xs text-slate-700 font-medium">Producto <span class="font-mono bg-slate-100 px-1 rounded">Jw Red</span></p>
                            <p class="text-[10px] text-slate-400">Manual Entry</p>
                        </td>
                        <td class="px-6 py-4 text-center">
                            <span class="bg-amber-50 text-amber-600 px-2 py-1 rounded text-xs font-black border border-amber-100">- S/ 50.00</span>
                        </td>
                        <td class="px-6 py-4 text-right">
                            <button class="text-slate-400 hover:text-slate-600 text-xs font-bold">Revisado</button>
                        </td>
                    </tr>

                </tbody>
            </table>
        </div>
    </div>

    {{-- MODAL EXPEDIENTE --}}
    <div id="modalSnapshot" class="fixed inset-0 z-50 hidden flex items-center justify-center p-4">
        <div class="absolute inset-0 bg-[#0f172a]/70 backdrop-blur-sm transition-opacity" onclick="closeModal()"></div>
        
        <div class="bg-white w-full max-w-5xl h-[90vh] rounded-2xl shadow-2xl relative z-10 flex flex-col overflow-hidden animate-fade-in border border-slate-200">
            
            {{-- Modal Header --}}
            <div class="px-6 py-4 bg-slate-50 border-b border-slate-200 flex justify-between items-center">
                <div class="flex items-center gap-4">
                    <div class="p-2 bg-red-100 rounded-lg text-[#E21C21] border border-red-200">
                        <i data-lucide="file-search" class="w-6 h-6"></i>
                    </div>
                    <div>
                        <h2 class="text-lg font-black text-slate-800 tracking-tight">EXPEDIENTE #LOG-8821</h2>
                        <p class="text-xs text-slate-500 font-mono">28 Ene 2026 • 02:45:12 AM</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                      <span class="bg-red-50 text-[#E21C21] border border-red-200 px-3 py-1 rounded-full text-xs font-bold flex items-center gap-2">
                        <span class="w-2 h-2 bg-[#E21C21] rounded-full animate-pulse"></span> RIESGO ALTO (92/100)
                      </span>
                    <button onclick="closeModal()" class="text-slate-400 hover:text-slate-600 p-2 hover:bg-slate-200 rounded-full transition-colors"><i data-lucide="x" class="w-6 h-6"></i></button>
                </div>
            </div>

            {{-- Modal Body --}}
            <div class="flex-1 flex overflow-hidden">
                
                {{-- Sidebar Detalles --}}
                <div class="w-1/3 bg-slate-50 border-r border-slate-200 p-6 flex flex-col gap-6 overflow-y-auto">
                    
                    <div>
                        <h4 class="text-xs font-black text-slate-400 uppercase tracking-widest mb-3">Actor</h4>
                        <div class="flex items-center gap-3 bg-white p-3 rounded-xl border border-slate-200 shadow-sm">
                            <div class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-600">CR</div>
                            <div>
                                <p class="text-sm font-bold text-slate-800">Carlos Ruiz</p>
                                <p class="text-xs text-slate-500">ID: EMP-042 • Caja Ppal</p>
                            </div>
                        </div>
                    </div>

                    <div>
                        <h4 class="text-xs font-black text-slate-400 uppercase tracking-widest mb-3">Línea de Tiempo</h4>
                        <div class="pl-2">
                            <div class="timeline-item">
                                <div class="timeline-dot"></div>
                                <p class="text-xs font-bold text-slate-700">02:00:15 - Apertura Ticket</p>
                                <p class="text-[10px] text-slate-500">Usuario crea pedido Mesa 9.</p>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-dot"></div>
                                <p class="text-xs font-bold text-slate-700">02:05:00 - Comanda Enviada</p>
                                <p class="text-[10px] text-slate-500">Barra recibe pedido.</p>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-dot alert"></div>
                                <p class="text-xs font-bold text-[#E21C21]">02:45:12 - Item Eliminado</p>
                                <p class="text-[10px] text-slate-500">Usuario elimina JW Black Label.</p>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-dot"></div>
                                <p class="text-xs font-bold text-slate-700">02:46:00 - Cierre & Cobro</p>
                                <p class="text-[10px] text-slate-500">Ticket cerrado en efectivo.</p>
                            </div>
                        </div>
                    </div>

                </div>

                {{-- Contenido Principal (Diff) --}}
                <div class="w-2/3 bg-white p-8 flex flex-col overflow-y-auto">
                    <h3 class="text-sm font-bold text-slate-800 mb-4 flex items-center gap-2">
                        <i data-lucide="scan-eye" class="w-4 h-4 text-[#194B95]"></i> Visualizador de Cambios (Diff)
                    </h3>

                    <div class="border border-slate-200 rounded-xl overflow-hidden shadow-sm flex-1 mb-6 font-mono text-sm">
                        <div class="bg-slate-50 px-4 py-2 border-b border-slate-200 text-xs font-bold text-slate-500 flex justify-between">
                            <span>TICKET #9021</span>
                            <span>VERSIÓN FINAL vs ORIGINAL</span>
                        </div>
                        <div class="p-6 space-y-4">
                            <div class="flex justify-between p-2 hover:bg-slate-50 rounded">
                                <span class="text-slate-600">2x Red Bull</span>
                                <span class="text-slate-800 font-bold">S/ 30.00</span>
                            </div>
                            <div class="flex justify-between p-2 hover:bg-slate-50 rounded">
                                <span class="text-slate-600">1x Hielo</span>
                                <span class="text-slate-800 font-bold">S/ 10.00</span>
                            </div>
                            
                            {{-- Elemento Eliminado --}}
                            <div class="flex justify-between p-3 bg-red-50 border border-red-100 rounded-lg relative overflow-hidden">
                                <div class="absolute left-0 top-0 bottom-0 w-1 bg-[#E21C21]"></div>
                                <div class="flex flex-col">
                                    <span class="text-[#E21C21] font-bold line-through decoration-2">1x JW Black Label</span>
                                    <span class="text-[10px] text-red-400 font-bold uppercase mt-1">ELIMINADO POR USUARIO</span>
                                </div>
                                <span class="text-[#E21C21] font-bold line-through decoration-2">S/ 320.00</span>
                            </div>

                            <div class="border-t border-slate-200 my-4"></div>

                            <div class="flex justify-between items-end">
                                <div class="text-right w-full">
                                    <p class="text-xs text-slate-400 line-through">Total Orig: S/ 360.00</p>
                                    <p class="text-2xl font-black text-[#194B95]">Total Final: S/ 40.00</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 flex gap-4 items-center">
                        <i data-lucide="info" class="w-5 h-5 text-slate-400 flex-shrink-0"></i>
                        <p class="text-xs text-slate-600 leading-relaxed">
                            <strong>Análisis IA:</strong> El producto fue eliminado 45 minutos después de servido, sin registro de devolución en barra. El ticket se cerró inmediatamente después con un monto menor. Alta probabilidad de cobro completo al cliente y sustracción del excedente.
                        </p>
                    </div>
                </div>
            </div>

            {{-- Modal Footer --}}
            <div class="px-6 py-4 bg-white border-t border-slate-200 flex justify-end gap-3">
                <button onclick="closeModal()" class="px-5 py-2.5 rounded-xl border border-slate-300 text-slate-600 text-sm font-bold hover:bg-slate-50 transition-all">Cancelar</button>
                <button class="px-6 py-2.5 rounded-xl bg-amber-500 hover:bg-amber-600 text-white text-sm font-bold transition-all shadow-md shadow-amber-100 flex items-center gap-2">
                    <i data-lucide="flag" class="w-4 h-4"></i> Justificar
                </button>
                <button class="px-6 py-2.5 rounded-xl bg-[#E21C21] hover:bg-red-700 text-white text-sm font-bold transition-all shadow-lg shadow-red-100 flex items-center gap-2">
                    <i data-lucide="gavel" class="w-4 h-4"></i> Confirmar Fraude
                </button>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
    // Reloj
    setInterval(() => {
        const now = new Date();
        document.getElementById('clock').innerText = now.toLocaleTimeString('es-PE', { hour12: false });
    }, 1000);

    function openModal() {
        const modal = document.getElementById('modalSnapshot');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

    function closeModal() {
        const modal = document.getElementById('modalSnapshot');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }
</script>
@endpush