@extends('layouts.app')

@section('content')
<!-- Formulario para mostrar consultas en Auditorias. Yesenia Hernandez M. -->
<br>
<script>
$(document).ready(function() {
    $('#tabla-auditoria').DataTable({
        stateSave: true,
        responsive: true,
        language: {
            url: '//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json'
        },
        columns: [
            { data: 'tabla_afectada', name: 'tabla_afectada', width: '15%' },
            { data: 'accion_realizada', name: 'accion_realizada', width: '10%' },
            { data: 'usuario', name: 'usuario', width: '15%' },
            { data: 'ip', name: 'ip', width: '10%' },
            { data: 'fecha_accion', name: 'fecha_accion', width: '25%' },
            { data: 'opciones', name: 'opciones', width: '5%', orderable: false, searchable: false }
        ],
        order: [[4, 'desc']] // Ordenar por fecha descendente
    });
});

function mostrarDetalles(id,moduloConsultado) {
    
    // Mostrar spinner de carga
    $('#detalles-auditoria').html(`
        <div class="text-center">
            <div class="spinner-border text-primary" role="status">
                <span class="sr-only">Cargando...</span>
            </div>
            <p>Cargando detalles...</p>
        </div>
    `);
    
    // Mostrar el modal
    $('#modalDetalles').modal('show');
    
    // Hacer la petición AJAX para obtener los detalles
    $.ajax({
        url: 'auditoria/detalles/' + id +'/' + moduloConsultado,
        type: 'GET',
        success: function(response) {
            // Formatear y mostrar los detalles
            let detallesHtml = formatDetalles(response);
            $('#detalles-auditoria').html(detallesHtml);
        },
        error: function(xhr) {
            $('#detalles-auditoria').html(`
                <div class="alert alert-danger">
                    Error al cargar los detalles. Intente nuevamente.
                </div>
            `);
        }
    });
}

function formatDetalles(detalles) {
    let html = `
        <div class="row">
            <div class="col-md-6 pl-5">
                <h5>&nbsp;&nbsp;Información Básica</h5>
                <ul class="list-group mb-3">
                    <li class="list-group-item"><strong>ID:</strong> ${detalles.id}</li>
                    <li class="list-group-item"><strong>Tabla:</strong> ${detalles.tabla_afectada}</li>
                    <li class="list-group-item"><strong>Acción:</strong> ${detalles.accion_realizada}</li>
                    <li class="list-group-item"><strong>Fecha:</strong> ${new Date(detalles.fecha_accion).toLocaleString()}</li>
                    <li class="list-group-item"><strong>IP:</strong> ${detalles.ip_origen}</li>
                </ul>
            </div>
            <div class="col-md-6">
                <h5>Usuario</h5>
                <ul class="list-group mb-3">
                    <li class="list-group-item"><strong>ID Usuario:</strong> ${detalles.id_usuario}</li>
                    <li class="list-group-item"><strong>Nombre:</strong> ${detalles.nombre_usuario || 'N/A'}</li>
                </ul>
            </div>
        </div>
    `;

    // Detalles específicos según el tipo de acción
    if (detalles.accion_realizada === 'INSERT') {
        html += `
            <div class="card mb-3">
                <div class="card-header bg-success text-white">
                    Datos Insertados
                </div>
                <div class="card-body">
                    ${formatJsonToTable(detalles.detalles.datos_creados || detalles.detalles)}
                </div>
            </div>
        `;
    } else if (detalles.accion_realizada === 'UPDATE') {
        // Obtener campos modificados de manera segura
        const cambios = detalles.campos_modificados || {};
        const valoresAntiguos = detalles.detalles.valores_antiguos || {};
        const valoresNuevos = detalles.detalles.valores_nuevos || {};
        
        // Si no hay campos_modificados pero hay valores_antiguos/nuevos, generamos los cambios
        const camposModificados = Object.keys(cambios).length > 0 
            ? cambios 
            : getChangedFields(valoresAntiguos, valoresNuevos);

        html += `
            <div class="card mb-3">
                <div class="card-header bg-warning text-dark">
                    Cambios Realizados
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Valores Anteriores</h6>
                            ${formatJsonToTable(valoresAntiguos)}
                        </div>
                        <div class="col-md-6">
                            <h6>Valores Nuevos</h6>
                            ${formatJsonToTable(valoresNuevos)}
                        </div>
                    </div>
                    <hr>
                    <h6>Campos Modificados</h6>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <thead>
                                <tr>
                                    <th>Campo</th>
                                    <th>Valor Anterior</th>
                                    <th>Valor Nuevo</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${Object.entries(camposModificados).map(([campo, cambios]) => {
                                    const oldVal = valoresAntiguos[campo] !== undefined ? valoresAntiguos[campo] : (cambios.old !== undefined ? cambios.old : 'N/A');
                                    const newVal = valoresNuevos[campo] !== undefined ? valoresNuevos[campo] : (cambios.new !== undefined ? cambios.new : 'N/A');
                                    
                                    return `
                                        <tr>
                                            <td>${campo}</td>
                                            <td>${formatLongText(oldVal)}</td>
                                            <td>${formatLongText(newVal)}</td>
                                        </tr>
                                    `;
                                }).join('')}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        `;
    } else if (detalles.accion_realizada === 'DELETE') {
        html += `
            <div class="card mb-3">
                <div class="card-header bg-danger text-white">
                    Datos Eliminados
                </div>
                <div class="card-body">
                    ${formatJsonToTable(detalles.detalles)}
                </div>
            </div>
        `;
    }
    
    return html;
}

// Función auxiliar para detectar campos cambiados
function getChangedFields(oldValues, newValues) {
    const changes = {};
    
    // Combinar todas las claves posibles
    const allKeys = new Set([...Object.keys(oldValues || {}), ...Object.keys(newValues || {})]);
    
    allKeys.forEach(key => {
        const oldVal = oldValues[key];
        const newVal = newValues[key];
        
        if (JSON.stringify(oldVal) !== JSON.stringify(newVal)) {
            changes[key] = {
                old: oldVal,
                new: newVal
            };
        }
    });
    
    return changes;
}

function formatJsonToTable(data) {
    if (!data) return '<p>No hay datos disponibles</p>';
    
    if (typeof data === 'string') {
        try {
            data = JSON.parse(data);
        } catch (e) {
            // Si es un string muy largo, mostrarlo en un textarea
            if (data.length > 150) {
                return `
                    <div class="long-text-container">
                        <textarea class="form-control long-text-area" rows="4" readonly>${data}</textarea>
                        <button class="btn btn-sm btn-outline-secondary mt-2 copy-btn" 
                                onclick="copyToClipboard(this)">Copiar</button>
                    </div>
                `;
            }
            return `<pre>${data}</pre>`;
        }
    }
    
    if (Array.isArray(data)) {
        return `
            <div class="table-responsive">
                <table class="table table-sm table-bordered">
                    <thead>
                        <tr>
                            ${Object.keys(data[0] || {}).map(key => `<th>${key}</th>`).join('')}
                        </tr>
                    </thead>
                    <tbody>
                        ${data.map(item => `
                            <tr>
                                ${Object.values(item).map(val => `
                                    <td>${formatLongText(val)}</td>
                                `).join('')}
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            </div>
        `;
    } else {
        return `
            <div class="table-responsive">
                <table class="table table-sm table-bordered">
                    <tbody>
                        ${Object.entries(data).map(([key, value]) => `
                            <tr>
                                <th width="30%">${key}</th>
                                <td>${formatLongText(value)}</td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            </div>
        `;
    }
}
// Función auxiliar para formatear texto largo
function formatLongText(value) {
    if (value === undefined || value === null) {
        return '<span class="text-muted">N/A</span>';
    }
    
    if (typeof value === 'object') {
        return `<pre>${JSON.stringify(value, null, 2)}</pre>`;
    }
    
    const strValue = String(value);
    if (strValue.length > 100) {
        return `
            <div class="long-text-container">
                <div class="long-text-preview" onclick="toggleFullText(this)">
                    ${strValue.substring(0, 100)}...
                    <small class="text-muted">(click para ver completo)</small>
                </div>
                <div class="long-text-full d-none">
                    ${strValue}
                    <button class="btn btn-sm btn-outline-secondary mt-2 copy-btn" 
                            onclick="copyToClipboard(this)">Copiar</button>
                </div>
            </div>
        `;
    }
    return strValue;
}

// Funciones para interactuar con el texto
function toggleFullText(element) {
    const container = element.parentElement;
    const preview = container.querySelector('.long-text-preview');
    const fullText = container.querySelector('.long-text-full');
    
    preview.classList.toggle('d-none');
    fullText.classList.toggle('d-none');
}

function copyToClipboard(button) {
    const container = button.closest('.long-text-container');
    const text = container.querySelector('.long-text-full')?.textContent || 
                 container.querySelector('textarea')?.value;
    
    navigator.clipboard.writeText(text).then(() => {
        const originalText = button.textContent;
        button.textContent = '¡Copiado!';
        setTimeout(() => {
            button.textContent = originalText;
        }, 2000);
    });
}
</script>

<style>
    .card-auditoria {
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .table-auditoria thead th {
        background-color: #287aa6;
        color: white;
        font-weight: bold;
        text-align: center;
        vertical-align: middle;
    }
    
    .table-auditoria tbody tr:hover {
        background-color: #f5f5f5;
    }
    
    .btn-detalle {
        background-color: #287aa6;
        color: white;
        padding: 3px 8px;
        font-size: 12px;
    }
    
    .btn-detalle:hover {
        background-color: #1a5a7a;
    }
    /* Estilos para el modal de detalles */
    #modalDetalles .modal-lg {
        max-width: 90%;
    }

    .detalles-auditoria {
        max-height: 70vh;
        overflow-y: auto;
    }

    .detalles-seccion {
        margin-bottom: 20px;
    }

    .detalles-seccion h5 {
        border-bottom: 1px solid #eee;
        padding-bottom: 5px;
        margin-bottom: 15px;
    }

    .json-key {
        color: #d63384;
        font-weight: bold;
    }

    .json-value {
        color: #20c997;
    }

    .json-string {
        color: #0dcaf0;
    }
    /* Estilos para texto largo */
.long-text-container {
    position: relative;
}

.long-text-preview {
    cursor: pointer;
    padding: 5px;
    border: 1px dashed #ccc;
    border-radius: 4px;
    background-color: #f8f9fa;
}

.long-text-preview:hover {
    background-color: #e9ecef;
}

.long-text-full {
    white-space: pre-wrap;
    word-break: break-word;
    padding: 10px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #f8f9fa;
    max-height: 300px;
    overflow-y: auto;
}

.long-text-area {
    font-family: monospace;
    white-space: pre;
    overflow-x: auto;
}

.copy-btn {
    display: block;
    width: fit-content;
    margin-left: auto;
}

/* Mejoras para el modal */
.modal-xl {
    max-width: 95%;
}

.detalles-auditoria {
    max-height: 70vh;
    overflow-y: auto;
}

.table-responsive {
    max-height: 400px;
    overflow-y: auto;
}
.text-muted {
    color: #6c757d !important;
    font-style: italic;
}

pre {
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    max-height: 200px;
    overflow-y: auto;
}

.table-sm td, .table-sm th {
    padding: 0.3rem;
    vertical-align: middle;
}
</style>

<div class="card card-auditoria">
    <div class="card-header bg-primary text-white">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <img src="{{ asset('images/plantel/logo_menu_botones.png') }}" alt="logo" width="40" height="40">
                <strong class="ml-2">CONSULTAS DE AUDITORÍA</strong>
            </div>
            <a href="{{ URL::to('auditoria') }}" class="btn btn-light btn-sm">
                <img src="{{ asset('images/funciones/best_devolver1.png') }}" alt="volver" width="20" class="mr-1">
                Volver
            </a>
        </div>
    </div>
    
    <div class="card-body">
        <div class="alert alert-info">
            <strong>Consulta actual:</strong> {{ $transaccion }} en módulo {{ $moduloConsultado }}
        </div>
        
        <div class="table-responsive">
            <table id="tabla-auditoria" class="table table-striped table-bordered table-auditoria" style="width:100%">
                <thead>
                    <tr>
					@if($moduloConsultado == 'Planes de Evaluación')
                		<th>Asignatura</th>
					@elseif($moduloConsultado == 'Secciones del Sistema')
						<th>Sección</th>
                    @elseif($moduloConsultado == 'Patrones de Evaluación' && $transaccion!="Registros Modificados")
						<th>Sección</th>
					@else
						<th>Nombre</th>
            		@endif
                        <th>Acción</th>
                        <th>Autor</th>
                        <th>IP</th>
                        <th>Fecha y Hora</th>
                        <th>Opciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($consultaTablas as $auditoria)
					@php 
						$infoautor=usuario::find($auditoria->id_usuario);
						$nombre=explode(" ",$infoautor->nombre)[0];
						$apellido=explode(" ",$infoautor->apellido)[0];
						$autor=$nombre." ".$apellido;
					@endphp
                    <tr>
					@if($moduloConsultado == 'Planes de Evaluación')
                		<td>{{ $auditoria->nombre_asignatura }}</td>
					@elseif($moduloConsultado == 'Secciones del Sistema')
						<td>{{ $auditoria->nombre_seccion }}</td>
					@else
						<td>{{ $auditoria->nombre_usuario }}</td>
            		@endif
                       
                        <td class="text-center">
                            @if($auditoria->accion_realizada == 'INSERT')
                                <span class="badge badge-success">Registro</span>
                            @elseif($auditoria->accion_realizada == 'UPDATE')
                                <span class="badge badge-warning">Actualización</span>
                            @else
                                <span class="badge badge-danger">Eliminación</span>
                            @endif
                        </td>
                        <td>{{ $autor }}</td>
                        <td>{{ $auditoria->ip_origen }}</td>
                        <td>{{ \Carbon\Carbon::parse($auditoria->fecha_accion)->format('d/m/Y H:i:s') }}</td>
                        <td class="text-center">
                            <button onclick="mostrarDetalles({{ $auditoria->id }},'{{ $moduloConsultado }}')" 
                                    class="btn btn-detalle btn-sm" 
                                    title="Ver detalles">
                                <i class="fa fa-eye"></i>
                            </button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal para detalles -->
<div class="modal fade" id="modalDetalles" tabindex="-1" role="dialog" aria-labelledby="modalDetallesLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="modalDetallesLabel">Detalles de Auditoría</h5>
                <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 detalles-auditoria" id="detalles-auditoria">
                <!-- Los detalles se cargarán aquí dinámicamente -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fa fa-times"></i> Cerrar
                </button>
                <button type="button" class="btn btn-primary" onclick="window.print()">
                    <i class="fa fa-print"></i> Imprimir
                </button>
                <button type="button" class="btn btn-info" onclick="expandAllText()">
                    <i class="fa fa-expand"></i> Expandir todo
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// Función para expandir todo el texto
function expandAllText() {
    document.querySelectorAll('.long-text-preview').forEach(el => {
        if (!el.classList.contains('d-none')) {
            el.click(); // Simula el click para expandir
        }
    });
}
</script>
@endsection