@extends('layouts.app')

@section('title', 'Auditoría del Sistema')

@section('css')
    <style>
        #auditoria-table thead {
            background-color: #343a40;
            color: white !important;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid">
        <!-- Filtros -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-gradient">
                        <h5 class="mb-0 d-flex align-items-center">
                            <i class="fas fa-filter text-primary me-2"></i>
                            Filtros de Búsqueda
                        </h5>
                    </div>
                    <div class="card-body">
                        <form id="filter-form">
                            <div class="row g-3 align-items-end mt-2">
                                <div class="col-12 col-sm-6 col-lg-3">
                                    <div class="form-group">
                                        <label for="user_id" class="form-label text-muted small">
                                            <i class="fas fa-user me-1"></i>Usuario
                                        </label>
                                        <select class="form-select form-select-sm" id="user_id" name="user_id">
                                            <option value="">Todos los usuarios</option>
                                            @foreach($users as $user)
                                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-lg-2">
                                    <div class="form-group">
                                        <label for="action" class="form-label text-muted small">
                                            <i class="fas fa-bolt me-1"></i>Acción
                                        </label>
                                        <select class="form-select form-select-sm" id="action" name="action">
                                            <option value="">Todas las acciones</option>
                                            <option value="Crear">Creado</option>
                                            <option value="Actualizar">Actualizado</option>
                                            <option value="Eliminar">Eliminado</option>
                                            <option value="Restaurar">Restaurado</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-lg-3">
                                    <div class="form-group">
                                        <label for="date_from" class="form-label text-muted small">
                                            <i class="fas fa-calendar-alt me-1"></i>Fecha Desde
                                        </label>
                                        <input type="date" class="form-control form-control-sm" id="date_from" name="date_from">
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-lg-3">
                                    <div class="form-group">
                                        <label for="date_to" class="form-label text-muted small">
                                            <i class="fas fa-calendar-check me-1"></i>Fecha Hasta
                                        </label>
                                        <input type="date" class="form-control form-control-sm" id="date_to" name="date_to">
                                    </div>
                                </div>
                                <div class="col-12 col-lg-1">
                                    <div class="d-flex flex-column flex-lg-row gap-2">
                                        <button type="submit" class="btn btn-primary flex-fill d-flex align-items-center justify-content-center" title="Buscar">
                                            <i class="fas fa-search"></i>
                                            <span class="d-lg-none ms-2">Buscar</span>
                                        </button>
                                        <button type="reset" class="btn btn-secondary flex-fill d-flex align-items-center justify-content-center" title="Limpiar">
                                            <i class="fas fa-times"></i>
                                            <span class="d-lg-none ms-2">Limpiar</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabla de Logs -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <div class="card-body">
                        <div class="card-header bg-gradient">
                            <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2">
                                <h5 class="mb-0 d-flex align-items-center">
                                    <i class="fas fa-history text-primary me-2"></i>
                                    Historial para Auditoría
                                </h5>
                                <div class="d-flex gap-2">
                                    <button class="btn btn-success btn-sm" id="export-btn" title="Exportar">
                                        <i class="fas fa-file-excel"></i>
                                        <span class="d-none d-md-inline ms-1">Exportar</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table id="auditoria-table" class="table table-hover table-striped mb-0">
                                    <thead class="table-dark text-white">
                                        <tr>
                                            <th class="text-nowrap">
                                                <i class="fas fa-calendar-alt text-muted me-1"></i>
                                                Fecha
                                            </th>
                                            <th class="text-nowrap">
                                                <i class="fas fa-user text-muted me-1"></i>
                                                Usuario
                                            </th>
                                            <th class="text-nowrap">
                                                <i class="fas fa-bolt text-muted me-1"></i>
                                                Acción
                                            </th>
                                            <th class="text-nowrap">
                                                <i class="fas fa-tasks text-muted me-1"></i>
                                                Actividad
                                            </th>
                                            <th class="text-nowrap text-center" style="width: 100px;">
                                                <i class="fas fa-cog text-muted me-1"></i>
                                                Acciones
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- Aquí se cargarán los datos dinámicamente -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para ver detalles -->
    <div class="modal fade" id="details-modal" tabindex="-1" aria-labelledby="detailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="detailsModalLabel">
                        <i class="fas fa-info-circle me-2"></i>
                        Detalles del Log de Auditoría
                    </h5>
                    <button type="button" class="btn-close btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body" id="modal-content">
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Cargando...</span>
                        </div>
                        <p class="mt-2 text-muted">Cargando detalles...</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-2"></i>Cerrar
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            var table = $('#auditoria-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: URLs + '/auditoria/data',
                    data: function (d) {
                        d.user_id = $('#user_id').val();
                        d.action = $('#action').val();
                        d.date_from = $('#date_from').val();
                        d.date_to = $('#date_to').val();
                    }
                },
                columns: [
                    {data: 'fecha_accion', name: 'fecha_accion'},
                    {data: 'usuario', name: 'usuario'},
                    {data: 'nombre_accion', name: 'nombre_accion', orderable: false},
                    {data: 'descripcion', name: 'descripcion'},
                    {data: 'actions', name: 'actions', orderable: false, searchable: false}
                ],
                order: [[0, 'desc']],
                responsive: true,
                language: {
                    "lengthMenu": "Mostrar _MENU_ registros por página",
                    "zeroRecords": "Nada encontrado - disculpa",
                    "info": "Mostrando la página _PAGE_ de _PAGES_",
                    "infoEmpty": "No se encuentran registros",
                    "infoFiltered": "(filtrado de _MAX_ registros totales)",
                    "search": "Buscar:",
                    "paginate": {
                        'next': "Siguiente",
                        'previous': "Anterior"
                    }
                }
            });

            // Filtrar al enviar formulario
            $('#filter-form').on('submit', function(e) {
                e.preventDefault();
                table.ajax.reload();
            });

            //resetear el filtrado
            $('#filter-form').on('reset', function(e) {
                setTimeout(function() {
                    table.ajax.reload();
                }, 100); // permite que los valores se reseteen primero
            });

            // Ver detalles
            $(document).on('click', '.view-details', function() {
                var logId = $(this).data('id');

                $.ajax({
                    url: `${URLs}/auditoria/show/${logId}`,
                    type: 'GET',
                    success: function(response) {
                        var html = generateDetailsHtml(response);
                        $('#modal-content').html(html);
                        $('#details-modal').modal('show');
                    },
                    error: function() {
                        alert('Error al cargar los detalles');
                    }
                });
            });

            // Exportar (placeholder)
            $('#export-btn').on('click', function() {
                alert('Funcionalidad de exportación en desarrollo');
            });

            function generateDetailsHtml(response) {
                const data = response.data;
                let html = '';

                // Header con información principal
                html += `
                    <div class="alert alert-light border mb-4">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <h6 class="mb-1">
                                    <i class="fas ${data.accion.icono} me-2"></i>
                                    <span class="badge ${data.accion.badge_class}">${data.accion.tipo}</span>
                                    ${data.accion.entidad}
                                </h6>
                                <p class="mb-0 text-muted">${data.accion.descripcion}</p>
                            </div>
                            <div class="col-md-4 text-md-end">
                                <small class="text-muted">
                                    <i class="fas fa-clock me-1"></i>
                                    ${data.general.fecha_relativa}
                                </small>
                            </div>
                        </div>
                    </div>
                `;

                // Contenido en tabs
                html += `
                    <ul class="nav nav-tabs" id="auditTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="general-tab" data-bs-toggle="tab"
                                    data-bs-target="#general" type="button" role="tab">
                                <i class="fas fa-info-circle me-1"></i> General
                            </button>
                        </li>
                        ${data.tiene_cambios ? `
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="changes-tab" data-bs-toggle="tab"
                                        data-bs-target="#changes" type="button" role="tab">
                                    <i class="fas fa-exchange-alt me-1"></i>
                                    Cambios <span class="badge bg-primary ms-1">${data.cambios.length}</span>
                                </button>
                            </li>
                        ` : ''}
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="technical-tab" data-bs-toggle="tab"
                                    data-bs-target="#technical" type="button" role="tab">
                                <i class="fas fa-cog me-1"></i> Técnico
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content pt-3" id="auditTabContent">
                `;

                // Tab General
                html += `
                    <div class="tab-pane fade show active" id="general" role="tabpanel">
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-sm table-borderless">
                                    <tr>
                                        <td class="text-muted" width="40%">
                                            <i class="fas fa-user me-1"></i> Usuario:
                                        </td>
                                        <td><strong>${data.general.usuario}</strong></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">
                                            <i class="fa-solid fa-envelope me-1"></i> Email:
                                        </td>
                                        <td><strong>${data.general.email}</strong></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">
                                            <i class="fas fa-calendar me-1"></i> Fecha:
                                        </td>
                                        <td>${data.general.fecha} a las ${data.general.hora}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">
                                            <i class="fas fa-cube me-1"></i> Módulo:
                                        </td>
                                        <td>${data.general.modulo}</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <table class="table table-sm table-borderless">
                                    <tr>
                                        <td class="text-muted" width="40%">
                                            <i class="fas fa-database me-1"></i> Entidad:
                                        </td>
                                        <td><strong>${data.accion.entidad}</strong></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">
                                            <i class="fas fa-tag me-1"></i> Registro:
                                        </td>
                                        <td>${data.accion.nombre_entidad || 'Sin nombre'}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                `;

                // Tab Cambios
                if (data.tiene_cambios) {
                    html += `
                        <div class="tab-pane fade" id="changes" role="tabpanel">
                            <div class="table-responsive">
                                <table class="table table-sm table-hover">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Campo</th>
                                            <th>Valor Anterior</th>
                                            <th>Valor Nuevo</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                    `;

                    data.cambios.forEach(cambio => {
                        const tipoIcono = cambio.tipo_cambio === 'created' ? 'fa-plus text-success' :
                                        cambio.tipo_cambio === 'deleted' ? 'fa-minus text-danger' :
                                        'fa-edit text-warning';

                        html += `
                            <tr>
                                <td>
                                    <i class="fas ${tipoIcono} me-1"></i>
                                    <strong>${cambio.campo}</strong>
                                </td>
                                <td class="text-danger">${cambio.valor_anterior}</td>
                                <td class="text-success">${cambio.valor_nuevo}</td>
                            </tr>
                        `;
                    });

                    html += `
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    `;
                }

                // Tab Técnico
                html += `
                    <div class="tab-pane fade" id="technical" role="tabpanel">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-muted mb-3">
                                    <i class="fas fa-network-wired me-1"></i> Conexión
                                </h6>
                                <table class="table table-sm table-borderless">
                                    <tr>
                                        <td class="text-muted" width="40%">IP:</td>
                                        <td>
                                            <code>${data.tecnica.ip}</code>
                                            ${data.tecnica.es_ip_local ?
                                                '<span class="badge bg-info ms-2">Red Local</span>' :
                                                '<span class="badge bg-warning ms-2">Externa</span>'
                                            }
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-muted mb-3">
                                    <i class="fas fa-desktop me-1"></i> Dispositivo
                                </h6>
                                <table class="table table-sm table-borderless">
                                    <tr>
                                        <td class="text-muted" width="40%">Tipo:</td>
                                        <td>
                                            <i class="fas ${data.tecnica.dispositivo.icono} me-1"></i>
                                            ${data.tecnica.dispositivo.tipo}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">Navegador:</td>
                                        <td>${data.tecnica.dispositivo.navegador}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">Sistema:</td>
                                        <td>${data.tecnica.dispositivo.plataforma}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                        <div class="mt-3">
                            <h6 class="text-muted">
                                <i class="fas fa-code me-1"></i> User Agent
                            </h6>
                            <div class="bg-light p-2 rounded">
                                <small class="text-break">${data.tecnica.navegador_completo}</small>
                            </div>
                        </div>
                    </div>
                `;

                html += '</div>'; // Cierre tab-content

                return html;
            }
        });
    </script>
@endsection