@extends('layouts.app')
@section('title', 'Historial de Auditoría')

@section('content')
    <div class="container-fluid py-3">

        <!-- Header -->
        <div class="row mb-3">
            <div class="col-md-8">
                <h4 class="mb-1">
                    <i class="fas fa-history text-primary"></i>
                    Historial de Auditoría
                </h4>
                <p class="text-muted mb-0 small">Registro de todas las acciones realizadas en el sistema</p>
            </div>
            <div class="col-md-4 text-right">
                {{-- boton exportar  --}}
                <a href="{{ route('auditoria.exportar') }}" class="btn btn-success btn-sm mr-2" title="Exportar a Excel">
                    <i class="fas fa-file-excel"></i> Exportar Excel
                </a>
                <span class="badge badge-info py-1 px-2" id="badgeRegistros">
                    <i class="fas fa-database"></i>
                    <span id="textoRegistros">Total: {{ $logs->count() }}</span>
                </span>
            </div>
        </div>

        <!-- Tabla -->
        <div class="card shadow-sm border-0">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover tabla-auditoria mb-0" id="tablaAuditoria">
                        <thead>
                            <tr>
                                <th class="text-center" style="width: 40px;">#</th>
                                <th style="width: 130px;"><i class="fas fa-clock"></i> Fecha</th>
                                <th style="width: 180px;"><i class="fas fa-user"></i> Usuario</th>
                                <th class="text-center" style="width: 100px;"><i class="fas fa-tasks"></i> Acción</th>
                                <th class="text-center" style="width: 130px;"><i class="fas fa-cube"></i> Módulo</th>
                                <th class="text-center" style="width: 80px;"><i class="fas fa-tools"></i> Opciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($logs as $index => $log)
                                <tr>
                                    <!-- NÚMERO -->
                                    <td class="text-center align-middle">
                                        <span class="text-muted small font-weight-bold">{{ $log->id }}</span>
                                    </td>

                                    <!-- FECHA Y HORA -->
                                    <td class="align-middle">
                                        <div class="fecha-wrapper">
                                            <div class="fecha-principal">
                                                <i
                                                    class="far fa-calendar-alt text-primary mr-1"></i>{{ $log->created_at->format('d/m/Y') }}
                                            </div>
                                            <div class="fecha-hora">
                                                <i class="far fa-clock mr-1"></i>{{ $log->created_at->format('H:i:s') }}
                                            </div>
                                            <div class="fecha-relativa">{{ $log->created_at->diffForHumans() }}</div>
                                        </div>
                                    </td>

                                    <!-- USUARIO -->
                                    <td class="align-middle"
                                        data-search="{{ $log->causer ? ($log->causer->nombre ?? '') . ' ' . ($log->causer->paterno ?? '') . ' ' . ($log->causer->materno ?? '') : 'Sistema' }}">
                                        @if ($log->causer)
                                            <div class="usuario-info">
                                                <div class="usuario-nombre">
                                                    {{ $log->causer->nombre ?? ($log->causer->name ?? 'Usuario') }}
                                                </div>
                                                @if (isset($log->causer->paterno))
                                                    <div class="usuario-apellidos">
                                                        {{ $log->causer->paterno }} {{ $log->causer->materno ?? '' }}
                                                    </div>
                                                @endif
                                                <div class="usuario-id">
                                                    <i class="fas fa-id-badge"></i> ID: {{ $log->causer_id }}
                                                </div>
                                            </div>
                                        @else
                                            <span class="badge badge-secondary badge-sm">
                                                <i class="fas fa-robot"></i> Sistema
                                            </span>
                                        @endif
                                    </td>

                                    <!-- ACCIÓN -->
                                    @php
                                        $accion = strtolower($log->description);
                                        if (str_contains($accion, 'aprobado') || str_contains($accion, 'aprobar')) {
                                            $badgeClass = 'success';
                                            $icon = 'fas fa-check-circle';
                                            $textoAccion = 'Aprobado';
                                        } elseif (str_contains($accion, 'anulado') || str_contains($accion, 'anular')) {
                                            $badgeClass = 'dark';
                                            $icon = 'fas fa-ban';
                                            $textoAccion = 'Anulado';
                                        } elseif (
                                            str_contains($accion, 'archivado') ||
                                            str_contains($accion, 'archivar')
                                        ) {
                                            $badgeClass = 'secondary';
                                            $icon = 'fas fa-archive';
                                            $textoAccion = 'Archivado';
                                        } elseif (
                                            str_contains($accion, 're-derivado') ||
                                            str_contains($accion, 'rederivado') ||
                                            str_contains($accion, 'derivado')
                                        ) {
                                            $badgeClass = 'info';
                                            $icon = 'fas fa-share-square';
                                            $textoAccion = 'Re-derivado';
                                        } elseif (
                                            str_contains($accion, 'created') ||
                                            str_contains($accion, 'creó') ||
                                            str_contains($accion, 'crear')
                                        ) {
                                            $badgeClass = 'success';
                                            $icon = 'fas fa-plus-circle';
                                            $textoAccion = 'Creado';
                                        } elseif (
                                            str_contains($accion, 'updated') ||
                                            str_contains($accion, 'actualizó') ||
                                            str_contains($accion, 'editar')
                                        ) {
                                            $badgeClass = 'warning';
                                            $icon = 'fas fa-edit';
                                            $textoAccion = 'Actualizado';
                                        } elseif (
                                            str_contains($accion, 'deleted') ||
                                            str_contains($accion, 'eliminó') ||
                                            str_contains($accion, 'eliminar')
                                        ) {
                                            $badgeClass = 'danger';
                                            $icon = 'fas fa-trash-alt';
                                            $textoAccion = 'Eliminado';
                                        } else {
                                            $badgeClass = 'secondary';
                                            $icon = 'fas fa-question';
                                            $textoAccion = ucfirst($log->description);
                                        }
                                    @endphp
                                    <td class="text-center align-middle" data-search="{{ $textoAccion }}">
                                        <span class="badge badge-{{ $badgeClass }} badge-sm">
                                            <i class="{{ $icon }}"></i>
                                            {{ $textoAccion }}
                                        </span>
                                    </td>

                                    <!-- MÓDULO -->
                                    <td class="text-center align-middle"
                                        data-order="{{ class_basename($log->subject_type) }}"
                                        data-search="{{ class_basename($log->subject_type) }}">
                                        @php
                                            $modelo = class_basename($log->subject_type);
                                            $iconoModelo = 'fas fa-cube';
                                            $colorModelo = 'primary';

                                            if (str_contains($modelo, 'User')) {
                                                $iconoModelo = 'fas fa-users';
                                                $colorModelo = 'info';
                                            } elseif (str_contains($modelo, 'Proyecto')) {
                                                $iconoModelo = 'fas fa-folder';
                                                $colorModelo = 'warning';
                                            } elseif (str_contains($modelo, 'Derivacion')) {
                                                $iconoModelo = 'fas fa-share-square';
                                                $colorModelo = 'success';
                                            }
                                        @endphp

                                        <div class="modulo-wrapper">
                                            <span class="badge badge-{{ $colorModelo }} badge-sm">
                                                <i class="{{ $iconoModelo }}"></i>
                                                {{ $modelo }}
                                            </span>
                                            @if ($log->subject_id)
                                                <div class="modulo-id">ID: {{ $log->subject_id }}</div>
                                            @endif
                                        </div>
                                    </td>

                                    <!-- OPCIONES -->
                                    <td class="text-center align-middle">
                                        @if ($log->properties && count($log->properties) > 0)
                                            <div class="botones-opciones">
                                                @if ($log->properties->has('attributes'))
                                                    <button class="btn btn-sm btn-info btn-accion-audit" type="button"
                                                        data-toggle="modal" data-target="#modalNuevos{{ $log->id }}"
                                                        title="Ver Datos Nuevos">
                                                        <i class="fas fa-plus-circle"></i>
                                                    </button>
                                                @endif

                                                @if ($log->properties->has('old'))
                                                    <button class="btn btn-sm btn-secondary btn-accion-audit" type="button"
                                                        data-toggle="modal" data-target="#modalViejos{{ $log->id }}"
                                                        title="Ver Datos Anteriores">
                                                        <i class="fas fa-history"></i>
                                                    </button>
                                                @endif
                                            </div>
                                        @else
                                            <span class="text-muted small">
                                                <i class="fas fa-minus-circle"></i>
                                            </span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center py-5">
                                        <div class="empty-state">
                                            <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                            <h6 class="text-muted">No hay registros de auditoría</h6>
                                            <p class="text-muted small">Las acciones realizadas en el sistema aparecerán
                                                aquí</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- MODALES PARA DATOS NUEVOS -->
    @foreach ($logs as $log)
        @if ($log->properties && $log->properties->has('attributes'))
            <div class="modal fade" id="modalNuevos{{ $log->id }}" tabindex="-1" role="dialog"
                aria-labelledby="modalNuevosLabel{{ $log->id }}" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header bg-success text-white py-2">
                            <h6 class="modal-title mb-0" id="modalNuevosLabel{{ $log->id }}">
                                <i class="fas fa-check-circle"></i>
                                Datos Nuevos - Log #{{ $log->id }}
                            </h6>
                            <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body p-0">
                            <pre class="modal-datos-content">{{ json_encode($log->properties['attributes'], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                        </div>
                        <div class="modal-footer py-2">
                            <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if ($log->properties && $log->properties->has('old'))
            <div class="modal fade" id="modalViejos{{ $log->id }}" tabindex="-1" role="dialog"
                aria-labelledby="modalViejosLabel{{ $log->id }}" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header bg-secondary text-white py-2">
                            <h6 class="modal-title mb-0" id="modalViejosLabel{{ $log->id }}">
                                <i class="fas fa-history"></i>
                                Datos Anteriores - Log #{{ $log->id }}
                            </h6>
                            <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body p-0">
                            <pre class="modal-datos-content">{{ json_encode($log->properties['old'], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                        </div>
                        <div class="modal-footer py-2">
                            <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    @endforeach
@endsection

@push('styles')
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap4.min.css">

    <style>
        /* ===== CARD ===== */
        .card {
            border-radius: 8px;
        }

        /* ===== TABLA AUDITORIA ===== */
        .tabla-auditoria {
            font-size: 0.8rem;
            width: 100% !important;
        }

        .tabla-auditoria thead {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .tabla-auditoria thead th {
            color: white !important;
            font-size: 0.75rem;
            font-weight: 600;
            padding: 10px 8px;
            border: none;
            vertical-align: middle;
            white-space: nowrap;
        }

        .tabla-auditoria tbody td {
            padding: 8px;
            vertical-align: middle;
            border-bottom: 1px solid #e9ecef;
        }

        .tabla-auditoria tbody tr:hover {
            background-color: #f8f9fa;
        }

        /* ===== FECHA ===== */
        .fecha-wrapper {
            line-height: 1.3;
        }

        .fecha-principal {
            font-weight: 600;
            color: #2c3e50;
            font-size: 0.8rem;
            margin-bottom: 2px;
        }

        .fecha-hora {
            color: #6c757d;
            font-size: 0.7rem;
            margin-bottom: 1px;
        }

        .fecha-relativa {
            color: #95a5a6;
            font-size: 0.65rem;
            font-style: italic;
        }

        /* ===== USUARIO ===== */
        .usuario-info {
            line-height: 1.3;
        }

        .usuario-nombre {
            font-weight: 600;
            color: #2c3e50;
            font-size: 0.8rem;
            margin-bottom: 2px;
        }

        .usuario-apellidos {
            color: #6c757d;
            font-size: 0.7rem;
            margin-bottom: 1px;
        }

        .usuario-id {
            color: #95a5a6;
            font-size: 0.65rem;
        }

        /* ===== BADGES ===== */
        .badge-sm {
            padding: 4px 8px;
            font-size: 0.7rem;
            font-weight: 600;
            white-space: nowrap;
        }

        .badge-sm i {
            margin-right: 3px;
            font-size: 0.7rem;
        }

        /* ===== MÓDULO ===== */
        .modulo-wrapper {
            display: inline-block;
        }

        .modulo-id {
            margin-top: 3px;
            color: #95a5a6;
            font-size: 0.65rem;
        }

        /* ===== BOTONES OPCIONES ===== */
        .botones-opciones {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 4px;
        }

        .btn-accion-audit {
            width: 28px;
            height: 28px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
            transition: all 0.2s ease;
            border: none;
        }

        .btn-accion-audit:hover {
            transform: translateY(-2px);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
        }

        .btn-accion-audit i {
            font-size: 0.75rem;
            margin: 0;
        }

        /* ===== MODAL DATOS ===== */
        .modal-datos-content {
            background-color: #f8f9fa;
            padding: 15px;
            margin: 0;
            font-family: 'Courier New', Consolas, monospace;
            font-size: 0.75rem;
            line-height: 1.5;
            max-height: 450px;
            overflow-y: auto;
            color: #2c3e50;
            border: none;
        }

        /* ===== EMPTY STATE ===== */
        .empty-state {
            padding: 40px 20px;
        }

        .empty-state i {
            opacity: 0.3;
        }

        /* ===== SCROLLBAR ===== */
        .modal-datos-content::-webkit-scrollbar {
            width: 6px;
        }

        .modal-datos-content::-webkit-scrollbar-track {
            background: #e9ecef;
            border-radius: 3px;
        }

        .modal-datos-content::-webkit-scrollbar-thumb {
            background: #adb5bd;
            border-radius: 3px;
        }

        .modal-datos-content::-webkit-scrollbar-thumb:hover {
            background: #6c757d;
        }

        /* ===== DATATABLES CUSTOMIZATION ===== */
        .dataTables_wrapper {
            padding: 15px;
        }

        .dataTables_wrapper .dataTables_length,
        .dataTables_wrapper .dataTables_filter {
            margin-bottom: 10px;
        }

        .dataTables_wrapper .dataTables_length {
            float: left;
        }

        .dataTables_wrapper .dataTables_length label,
        .dataTables_wrapper .dataTables_filter label {
            font-size: 0.85rem;
            margin-bottom: 0;
        }

        .dataTables_wrapper .dataTables_length select {
            padding: 4px 8px;
            border-radius: 4px;
            border: 1px solid #ced4da;
            margin: 0 5px;
            font-size: 0.85rem;
        }

        .dataTables_wrapper .dataTables_filter {
            float: right;
        }

        .dataTables_wrapper .dataTables_filter input {
            padding: 4px 8px;
            border-radius: 4px;
            border: 1px solid #ced4da;
            margin-left: 8px;
            font-size: 0.85rem;
        }

        .dataTables_wrapper .dataTables_info {
            float: left;
            padding-top: 8px;
            font-size: 0.85rem;
        }

        .dataTables_wrapper .dataTables_paginate {
            float: right;
            padding-top: 8px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 4px 10px;
            margin: 0 2px;
            border-radius: 4px;
            border: 1px solid #ddd;
            background: white;
            color: #333 !important;
            font-size: 0.85rem;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: #667eea;
            color: white !important;
            border-color: #667eea;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: #667eea;
            color: white !important;
            border-color: #667eea;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* ===== FIX PARA SORTING ICONS ===== */
        table.dataTable thead th.sorting:before,
        table.dataTable thead th.sorting_asc:before,
        table.dataTable thead th.sorting_desc:before,
        table.dataTable thead th.sorting:after,
        table.dataTable thead th.sorting_asc:after,
        table.dataTable thead th.sorting_desc:after {
            color: white !important;
            opacity: 0.7;
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 768px) {
            .tabla-auditoria {
                font-size: 0.7rem;
            }

            .tabla-auditoria thead th {
                font-size: 0.65rem;
                padding: 8px 6px;
            }

            .tabla-auditoria tbody td {
                padding: 6px;
            }

            .fecha-principal,
            .usuario-nombre {
                font-size: 0.7rem;
            }

            .fecha-hora,
            .usuario-apellidos {
                font-size: 0.65rem;
            }

            .btn-accion-audit {
                width: 26px;
                height: 26px;
            }

            .badge-sm {
                font-size: 0.65rem;
                padding: 3px 6px;
            }

            .dataTables_wrapper .dataTables_length,
            .dataTables_wrapper .dataTables_filter,
            .dataTables_wrapper .dataTables_info,
            .dataTables_wrapper .dataTables_paginate {
                float: none !important;
                text-align: center;
                margin-bottom: 8px;
            }
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap4.min.js"></script>

    <script>
        $(document).ready(function() {

            // Destruir si ya existe
            if ($.fn.DataTable.isDataTable('#tablaAuditoria')) {
                $('#tablaAuditoria').DataTable().destroy();
            }

            var table = $('#tablaAuditoria').DataTable({
                language: {
                    processing: 'Procesando...',
                    lengthMenu: 'Mostrar _MENU_ registros',
                    zeroRecords: 'No se encontraron resultados',
                    emptyTable: 'Ningún dato disponible',
                    info: 'Mostrando _START_ a _END_ de _TOTAL_ registros',
                    infoEmpty: 'Mostrando 0 a 0 de 0 registros',
                    infoFiltered: '(filtrado de _MAX_ registros totales)',
                    search: 'Buscar:',
                    paginate: {
                        first: 'Primero',
                        last: 'Último',
                        next: 'Siguiente',
                        previous: 'Anterior'
                    }
                },
                pageLength: 10,
                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, 'Todos']
                ],
                responsive: false,
                autoWidth: false,
                dom: '<"row"<"col-sm-6"l><"col-sm-6"f>>rt<"row"<"col-sm-6"i><"col-sm-6"p>>',
                columnDefs: [{
                        orderable: false,
                        targets: [5]
                    },
                    {
                        type: 'num',
                        targets: [0]
                    }, // ← ordenar columna ID como número
                    {
                        type: 'html',
                        targets: '_all'
                    }
                ],
                order: [
                    [0, 'desc']
                ],
                drawCallback: function() {
                    actualizarBadge();
                    $('[title]').tooltip('dispose').tooltip({
                        trigger: 'hover',
                        container: 'body'
                    });
                }
            });

            function actualizarBadge() {
                var info = table.page.info();
                var texto = '';
                if (info.recordsDisplay < info.recordsTotal) {
                    texto = (info.start + 1) + '-' + info.end + ' de ' + info.recordsDisplay +
                        ' (filtrados de ' + info.recordsTotal + ')';
                } else {
                    texto = info.recordsTotal === 0 ?
                        'Total: 0' :
                        (info.start + 1) + '-' + info.end + ' de ' + info.recordsTotal;
                }
                $('#textoRegistros').html(texto);
            }

            table.on('length.dt search.dt', function() {
                setTimeout(actualizarBadge, 100);
            });

            $('[title]').tooltip({
                trigger: 'hover',
                container: 'body'
            });
            actualizarBadge();
        });
    </script>
@endpush