<?php
require_once __DIR__ . '/../../includes/version.php';
require_once __DIR__ . '/../../includes/topbar.php';
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Match con Tacloud</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- SweetAlert2 CSS -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Custom CSS (con cache busting) -->
    <link href="<?= asset('/frontend/assets/css/dashboard/dashboard.css') ?>" rel="stylesheet">
    <link href="<?= asset('/frontend/assets/css/includes/topbar.css') ?>" rel="stylesheet">
    <link href="<?= asset('/frontend/assets/css/styles.css') ?>" rel="stylesheet">
</head>
<style>
    .topbar-navbar {
        width: 100vw !important;
        left: 0;
        position: relative;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        border-radius: 0 !important;
    }
</style>
</head>
<body class="d-flex flex-column min-vh-100">
    <!-- Topbar se incluye aquí -->
    <?php /* El topbar ya está incluido arriba */ ?>
    <div class="container-fluid mt-4 flex-grow-1">
        <div class="row justify-content-center">
            <div class="col-md-10 col-lg-9">
                <div class="card shadow-lg border-0" style="max-width: 100%; min-width: 320px;">
                    <div class="card-body p-4">
                        <div class="text-center mb-4">
                            <i class="fa-solid fa-cloud-arrow-up fa-3x text-primary mb-2"></i>
                            <h3 class="mb-1">Subir archivo de Tacloud</h3>
                            <p class="text-muted">Compara los datos del sistema Tacloud con la base de datos interna</p>
                        </div>
                        <form id="excelForm" action="../../../backend/api/comparar_excel.php" method="POST" enctype="multipart/form-data">
                            <div class="mb-3">
                                <label for="rango_fechas" class="form-label">Rango de fechas</label>
                                <input type="text" class="form-control" id="rango_fechas" name="rango_fechas" placeholder="Selecciona el rango" autocomplete="off" required>
                                <input type="hidden" id="fecha_inicio" name="fecha_inicio">
                                <input type="hidden" id="fecha_fin" name="fecha_fin">
                            </div>
                            <div class="mb-3">
                                <label for="excel_file" class="form-label">Selecciona el archivo exportado de Tacloud</label>
                                <input class="form-control w-100" type="file" id="excel_file" name="excel_file" accept=".xlsx,.xls" required>
                            </div>
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="fa-solid fa-cloud-check me-2"></i>Subir y comparar
                            </button>
                        </form>
                        <!-- El input de búsqueda se mostrará dinámicamente solo cuando haya resultados -->
                        <div class="d-flex align-items-center mb-2 gap-2" id="filtros-match" style="display:none;">
                            <input type="text" id="searchNombre" class="form-control" placeholder="Buscar por nombre completo...">
                            <button id="exportarExcel" type="button" class="btn btn-success" title="Exportar a Excel">
                                <i class="fa-solid fa-file-excel"></i>
                            </button>
                        </div>
                        <div id="resultados" class="mt-2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        /* El scroll y fondo solo en la tabla */
        .search-box {
            margin-bottom: 10px;
        }
        #tablaResultados th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #f8f9fa;
        }
        .table-responsive {
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #e3e3e3;
        }
        .card-body {
            max-height: calc(100vh - 180px); /* Ajusta el 180px según el alto de tu header y footer */
            overflow-y: auto;
        }
    </style>
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Flatpickr Date Range Picker -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/es.js"></script>
<script>
// Inicializar flatpickr para rango de fechas
flatpickr("#rango_fechas", {
    mode: "range",
    dateFormat: "Y-m-d",
    locale: "es",
    maxDate: "today",
    onChange: function(selectedDates, dateStr, instance) {
        if (selectedDates.length === 2) {
            document.getElementById('fecha_inicio').value = instance.formatDate(selectedDates[0], "Y-m-d");
            document.getElementById('fecha_fin').value = instance.formatDate(selectedDates[1], "Y-m-d");
        } else {
            document.getElementById('fecha_inicio').value = '';
            document.getElementById('fecha_fin').value = '';
        }
    }
});


// Enviar formulario por AJAX y mostrar resultados
document.getElementById('excelForm').addEventListener('submit', function(e) {
    // Validar que el rango esté seleccionado y ambos campos ocultos tengan valor
    var fechaInicio = document.getElementById('fecha_inicio').value;
    var fechaFin = document.getElementById('fecha_fin').value;
    if (!fechaInicio || !fechaFin) {
        Swal.fire({
            icon: 'warning',
            title: 'Selecciona un rango de fechas',
            text: 'Por favor selecciona un rango de fechas válido antes de comparar.'
        });
        document.getElementById('rango_fechas').focus();
        e.preventDefault();
        return;
    }
    e.preventDefault();
    const form = e.target;
    const formData = new FormData(form);
    const resultados = document.getElementById('resultados');
    resultados.innerHTML = '<div class="text-center text-secondary">Procesando archivo...</div>';
    fetch(form.action, {
        method: 'POST',
        body: formData
    })
    .then(res => res.ok ? res.text() : Promise.reject('Error al procesar el archivo'))
    .then(html => {
        resultados.innerHTML = html;
        // Mostrar el filtro solo si existe la tabla
        var tabla = resultados.querySelector('#tablaResultados');
        var filtros = document.getElementById('filtros-match');
        if (tabla && filtros) {
            filtros.style.display = 'flex';
        } else if (filtros) {
            filtros.style.display = 'none';
        }
        // Mostrar SweetAlert con el periodo encontrado si existe
        var periodoDiv = resultados.querySelector('#periodoExcelInfo');
        if (periodoDiv) {
            var periodoExcelInicio = periodoDiv.getAttribute('data-inicio');
            var periodoExcelFin = periodoDiv.getAttribute('data-fin');
            var periodoSelInicio = document.getElementById('fecha_inicio').value;
            var periodoSelFin = document.getElementById('fecha_fin').value;
            if (periodoExcelInicio && periodoExcelFin && (periodoExcelInicio !== periodoSelInicio || periodoExcelFin !== periodoSelFin)) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Periodo diferente detectado',
                    html: 'El archivo contiene registros del <b>' + periodoExcelInicio + '</b> al <b>' + periodoExcelFin + '</b><br>El periodo seleccionado es del <b>' + periodoSelInicio + '</b> al <b>' + periodoSelFin + '</b>.',
                    confirmButtonText: 'Entendido'
                });
            } else if (periodoExcelInicio && periodoExcelFin) {
                Swal.fire({
                    icon: 'success',
                    title: 'Periodo procesado',
                    html: 'Se procesaron registros del <b>' + periodoExcelInicio + '</b> al <b>' + periodoExcelFin + '</b>.',
                    timer: 2000,
                    showConfirmButton: false
                });
            }
        }
        // Filtro por nombre completo
        var searchInput = document.getElementById('searchNombre');
        if (tabla && searchInput) {
            searchInput.value = '';
            searchInput.oninput = function() {
                var filtro = this.value.toLowerCase();
                var filas = tabla.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
                for (var i = 0; i < filas.length; i++) {
                    var nombre = filas[i].getElementsByTagName('td')[0];
                    if (nombre) {
                        var texto = nombre.textContent || nombre.innerText;
                        filas[i].style.display = texto.toLowerCase().indexOf(filtro) > -1 ? '' : 'none';
                    }
                }
            };
        }
        // Exportar a Excel
        var exportBtn = document.getElementById('exportarExcel');
        if (tabla && exportBtn) {
            exportBtn.onclick = function() {
                // Solo exportar filas visibles
                var wb = XLSX.utils.book_new();
                var ws_data = [];
                var ws_styles = [];
                var headers = Array.from(tabla.querySelectorAll('thead th')).map(th => th.innerText);
                ws_data.push(headers);
                ws_styles.push([]); // Header row, sin color
                var filas = tabla.querySelectorAll('tbody tr');
                filas.forEach(function(tr) {
                    if (tr.style.display === 'none') return;
                    var row = Array.from(tr.querySelectorAll('td')).map(td => td.innerText);
                    ws_data.push(row);
                    // Detectar color de fila por clase
                    var bgColor = null;
                    if (tr.classList.contains('table-success')) bgColor = 'C6EFCE'; // verde
                    else if (tr.classList.contains('table-warning')) bgColor = 'FFF3CD'; // amarillo
                    else if (tr.classList.contains('table-primary')) bgColor = 'CCE5FF'; // azul
                    else if (tr.classList.contains('table-danger')) bgColor = 'F8D7DA'; // rojo
                    var styleRow = row.map(() => bgColor ? { fill: { fgColor: { rgb: bgColor } } } : {});
                    ws_styles.push(styleRow);
                });
                var ws = XLSX.utils.aoa_to_sheet(ws_data);
                // Aplicar estilos
                ws_styles.forEach(function(styleRow, r) {
                    styleRow.forEach(function(style, c) {
                        var cell = XLSX.utils.encode_cell({ r: r, c: c });
                        if (!ws[cell]) return;
                        if (style.fill) ws[cell].s = style;
                    });
                });
                ws['!cols'] = headers.map(() => ({ wch: 20 })); // ancho de columnas
                XLSX.utils.book_append_sheet(wb, ws, 'Resultados');
                XLSX.writeFile(wb, 'resultados_match.xlsx', { bookType: 'xlsx', cellStyles: true });
            };
        }
    })
    .catch(err => {
        resultados.innerHTML = '<div class="alert alert-danger">' + err + '</div>';
    });
});
</script>
<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
</body>
</html>
