@extends('layouts.dashboard.inface', ['section' => 'audit_logs'])

@section('content')
    <div class="flex-1 overflow-y-auto p-8 space-y-6">
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
            <div>
                <h2 class="text-2xl font-extrabold tracking-tight text-slate-900 dark:text-slate-50">Log de
                    Auditoría de Eventos</h2>
                <p class="text-slate-500 text-sm mt-1">Historial completo de cambios en el sistema para control
                    administrativo.</p>
            </div>
            <div class="flex gap-2">
                <button
                    class="flex items-center gap-2 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-4 py-2 rounded-lg text-xs font-bold hover:bg-slate-50 transition-colors uppercase tracking-wider">
                    <span class="material-symbols-outlined text-lg">filter_alt</span>
                    Filtros Avanzados
                </button>
                <button
                    class="flex items-center gap-2 bg-primary text-white px-4 py-2 rounded-lg text-xs font-bold hover:bg-primary/90 transition-shadow shadow-lg shadow-primary/30 uppercase tracking-wider">
                    <span class="material-symbols-outlined text-lg">download</span>
                    Exportar CSV
                </button>
            </div>
        </div>
        <div
            class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden flex flex-col">
            <div
                class="px-6 py-4 border-b border-slate-100 dark:border-slate-800 flex flex-wrap items-center justify-between gap-4 bg-slate-50/50 dark:bg-slate-800/20">
                <div class="flex gap-4">
                    <div
                        class="flex items-center gap-2 px-3 py-1.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-md shadow-sm">
                        <span class="text-[10px] font-bold text-slate-400 uppercase">Mostrar:</span>
                        <select class="text-xs font-bold border-none p-0 bg-transparent focus:ring-0">
                            <option>Todos los modelos</option>
                            <option>Sale</option>
                            <option>User</option>
                            <option>Product</option>
                        </select>
                    </div>
                    <div
                        class="flex items-center gap-2 px-3 py-1.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-md shadow-sm">
                        <span class="text-[10px] font-bold text-slate-400 uppercase">Evento:</span>
                        <select class="text-xs font-bold border-none p-0 bg-transparent focus:ring-0">
                            <option>Cualquier acción</option>
                            <option>Created</option>
                            <option>Updated</option>
                            <option>Deleted</option>
                        </select>
                    </div>
                </div>
                <div class="text-[11px] font-bold text-slate-500 uppercase tracking-widest">
                    Mostrando 15 de 1,240 registros
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-slate-50 dark:bg-slate-800/50 border-b border-slate-200 dark:border-slate-700">
                            <th class="px-6 py-4 text-[10px] font-extrabold text-slate-500 uppercase tracking-widest w-24">
                                Evento</th>
                            <th class="px-6 py-4 text-[10px] font-extrabold text-slate-500 uppercase tracking-widest">
                                Auditable Type</th>
                            <th
                                class="px-6 py-4 text-[10px] font-extrabold text-slate-500 uppercase tracking-widest w-24 text-center">
                                Auditable ID</th>
                            <th class="px-6 py-4 text-[10px] font-extrabold text-slate-500 uppercase tracking-widest">
                                Valor Anterior</th>
                            <th class="px-6 py-4 text-[10px] font-extrabold text-slate-500 uppercase tracking-widest">
                                Valor Nuevo</th>
                            <th class="px-6 py-4 text-[10px] font-extrabold text-slate-500 uppercase tracking-widest w-10">
                            </th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                        <tr class="data-table-row transition-colors group">
                            <td class="px-6 py-4">
                                <span
                                    class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
                                    UPDATED
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex flex-col">
                                    <span class="text-sm font-semibold text-slate-700 dark:text-slate-200">Sale</span>
                                    <span
                                        class="text-[10px] font-mono text-slate-400 truncate max-w-[200px]">...Eloquent\Models\Sale</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <span
                                    class="text-sm font-mono font-bold text-primary bg-primary/5 px-2 py-1 rounded">8</span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex flex-col gap-1">
                                    <span class="text-[9px] font-bold text-slate-400 uppercase">cutoff_day</span>
                                    <span class="text-sm text-slate-400 italic font-mono">null</span>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex flex-col gap-1">
                                    <span
                                        class="text-[9px] font-bold text-green-600 dark:text-green-400 uppercase">cutoff_day</span>
                                    <span
                                        class="text-sm font-bold text-slate-900 dark:text-white bg-green-50 dark:bg-green-900/20 px-2 py-0.5 rounded border border-green-100 dark:border-green-900/50 w-max">15</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <button
                                    class="p-1.5 text-slate-400 hover:text-primary hover:bg-primary/5 rounded-md transition-all">
                                    <span class="material-symbols-outlined text-lg">visibility</span>
                                </button>
                            </td>
                        </tr>
                        <tr class="data-table-row transition-colors group">
                            <td class="px-6 py-4">
                                <span
                                    class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300">
                                    CREATED
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex flex-col">
                                    <span class="text-sm font-semibold text-slate-700 dark:text-slate-200">Customer</span>
                                    <span
                                        class="text-[10px] font-mono text-slate-400 truncate max-w-[200px]">...Models\Customer</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <span
                                    class="text-sm font-mono font-bold text-primary bg-primary/5 px-2 py-1 rounded">142</span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-sm text-slate-400 italic">N/A (New Record)</span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="grid grid-cols-1 gap-1">
                                    <div class="flex items-center gap-2">
                                        <span
                                            class="text-[9px] font-bold text-slate-400 uppercase w-12 text-right">name:</span>
                                        <span
                                            class="text-[11px] font-medium bg-slate-100 dark:bg-slate-800 px-1.5 rounded">John
                                            Doe</span>
                                    </div>
                                    <div class="flex items-center gap-2">
                                        <span
                                            class="text-[9px] font-bold text-slate-400 uppercase w-12 text-right">email:</span>
                                        <span
                                            class="text-[11px] font-medium bg-slate-100 dark:bg-slate-800 px-1.5 rounded">j.doe@example.com</span>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <button
                                    class="p-1.5 text-slate-400 hover:text-primary hover:bg-primary/5 rounded-md transition-all">
                                    <span class="material-symbols-outlined text-lg">visibility</span>
                                </button>
                            </td>
                        </tr>
                        <tr class="data-table-row transition-colors group">
                            <td class="px-6 py-4">
                                <span
                                    class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300">
                                    DELETED
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex flex-col">
                                    <span class="text-sm font-semibold text-slate-700 dark:text-slate-200">Invoice</span>
                                    <span
                                        class="text-[10px] font-mono text-slate-400 truncate max-w-[200px]">...Models\Finance\Invoice</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <span
                                    class="text-sm font-mono font-bold text-primary bg-primary/5 px-2 py-1 rounded">904</span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex flex-col gap-1">
                                    <span class="text-[9px] font-bold text-red-600/70 uppercase">status</span>
                                    <span
                                        class="text-sm font-medium bg-red-50 dark:bg-red-900/10 text-slate-600 dark:text-slate-400 px-2 py-0.5 rounded line-through">PENDING</span>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-sm text-slate-400 italic">Deleted</span>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <button
                                    class="p-1.5 text-slate-400 hover:text-primary hover:bg-primary/5 rounded-md transition-all">
                                    <span class="material-symbols-outlined text-lg">visibility</span>
                                </button>
                            </td>
                        </tr>
                        <tr class="data-table-row transition-colors group">
                            <td class="px-6 py-4">
                                <span
                                    class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
                                    UPDATED
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex flex-col">
                                    <span class="text-sm font-semibold text-slate-700 dark:text-slate-200">Product</span>
                                    <span
                                        class="text-[10px] font-mono text-slate-400 truncate max-w-[200px]">...Models\Product</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <span
                                    class="text-sm font-mono font-bold text-primary bg-primary/5 px-2 py-1 rounded">44</span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex flex-col gap-1">
                                    <span class="text-[9px] font-bold text-slate-400 uppercase">price</span>
                                    <span class="text-sm text-slate-500 font-mono">$1,200.00</span>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex flex-col gap-1">
                                    <span
                                        class="text-[9px] font-bold text-green-600 dark:text-green-400 uppercase">price</span>
                                    <span
                                        class="text-sm font-bold text-slate-900 dark:text-white bg-green-50 dark:bg-green-900/20 px-2 py-0.5 rounded w-max">$1,350.00</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <button
                                    class="p-1.5 text-slate-400 hover:text-primary hover:bg-primary/5 rounded-md transition-all">
                                    <span class="material-symbols-outlined text-lg">visibility</span>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="px-6 py-4 border-t border-slate-100 dark:border-slate-800 flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <button
                        class="p-1 px-3 border border-slate-200 dark:border-slate-700 rounded text-xs font-bold text-slate-500 disabled:opacity-50"
                        disabled="">Anterior</button>
                    <div class="flex items-center gap-1">
                        <button class="w-8 h-8 rounded bg-primary text-white text-xs font-bold">1</button>
                        <button
                            class="w-8 h-8 rounded text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 text-xs font-bold">2</button>
                        <button
                            class="w-8 h-8 rounded text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 text-xs font-bold">3</button>
                        <span class="px-1 text-slate-400 text-xs">...</span>
                        <button
                            class="w-8 h-8 rounded text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 text-xs font-bold">83</button>
                    </div>
                    <button
                        class="p-1 px-3 border border-slate-200 dark:border-slate-700 rounded text-xs font-bold text-slate-500">Siguiente</button>
                </div>
                <div class="hidden sm:block">
                    <p class="text-[11px] font-bold text-slate-400 uppercase">Mostrando página 1 de 83</p>
                </div>
            </div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            <div
                class="bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-200 dark:border-slate-800 flex items-center gap-4">
                <div
                    class="w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 text-blue-600 flex items-center justify-center">
                    <span class="material-symbols-outlined">edit</span>
                </div>
                <div>
                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Ediciones hoy</p>
                    <p class="text-lg font-black text-slate-900 dark:text-white leading-none">342</p>
                </div>
            </div>
            <div
                class="bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-200 dark:border-slate-800 flex items-center gap-4">
                <div
                    class="w-10 h-10 rounded-lg bg-green-100 dark:bg-green-900/30 text-green-600 flex items-center justify-center">
                    <span class="material-symbols-outlined">add_box</span>
                </div>
                <div>
                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Altas hoy</p>
                    <p class="text-lg font-black text-slate-900 dark:text-white leading-none">89</p>
                </div>
            </div>
            <div
                class="bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-200 dark:border-slate-800 flex items-center gap-4">
                <div
                    class="w-10 h-10 rounded-lg bg-red-100 dark:bg-red-900/30 text-red-600 flex items-center justify-center">
                    <span class="material-symbols-outlined">delete_forever</span>
                </div>
                <div>
                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Bajas hoy</p>
                    <p class="text-lg font-black text-slate-900 dark:text-white leading-none">12</p>
                </div>
            </div>
            <div
                class="bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-200 dark:border-slate-800 flex items-center gap-4">
                <div
                    class="w-10 h-10 rounded-lg bg-amber-100 dark:bg-amber-900/30 text-amber-600 flex items-center justify-center">
                    <span class="material-symbols-outlined">warning</span>
                </div>
                <div>
                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Alertas</p>
                    <p class="text-lg font-black text-slate-900 dark:text-white leading-none">3</p>
                </div>
            </div>
        </div>
    </div>
    <footer class="p-4 border-t border-slate-200 dark:border-slate-800 text-center bg-white dark:bg-slate-900">
        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Módulo de Auditoría
            Administrativa © 2026 - v2.4.0</p>
    </footer>
@endsection