<?php
session_start();

if (!isset($_SESSION['usuario'])) {
    header("Location: iniciosesi.php");
    exit();
}

$conexion = mysqli_connect('localhost', 'root', 'BpjysVrFK6LJ5XyW', 'micpu');
$conexion->set_charset("utf8");

// --- 1. LÓGICA PARA OBTENER PESTAÑAS DE AÑOS ---
// Orden cronológico estricto incremental (ASC)
$sql_anios = "SELECT DISTINCT YEAR(Fecha) as anio FROM mcorrect ORDER BY anio ASC";
$res_anios = mysqli_query($conexion, $sql_anios);

$anios = [];
while ($row = mysqli_fetch_assoc($res_anios)) {
    $anios[] = $row['anio'];
}

// Aseguramos que el año actual siempre aparezca y respete el orden cronológico
$anio_actual = date("Y");
if (!in_array($anio_actual, $anios)) {
    array_push($anios, $anio_actual); // Lo añade al final de la línea del tiempo
}
// -----------------------------------------------

// Incluimos la cabecera global de la interfaz
include 'header.php'; 
?>

<!-- Cabecera estilo administrador -->
<div class="admin-header">
    <div class="info">
        <img src="IMG/imgutsem/micpusinfondo.png" alt="Logo UTSEM">
        <div>
            <h1>Universidad Tecnológica del Sur del Estado de México</h1>
            <p>Departamento de Sistemas - Reportes de Mantenimiento Correctivo</p>
        </div>
    </div>

</div>

<!-- Contenedor de Pestañas Cronológicas -->
<div class="tabs-container">
    <?php foreach ($anios as $anio): ?>
        <button 
            class="tab-button <?php echo ($anio == $anio_actual) ? 'active' : ''; ?>" 
            onclick="seleccionarAnio(this, '<?php echo $anio; ?>')">
            <?php echo $anio; ?>
        </button>
    <?php endforeach; ?>
</div>

<!-- Panel de Filtros Estático -->
<div class="filtros">
    <input type="hidden" id="anio_seleccionado" value="<?php echo $anio_actual; ?>">

    <div style="margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px;">
        <strong>Viendo reportes del año: <span id="texto_anio" style="color:var(--color-primario); font-size:1.2em;"><?php echo $anio_actual; ?></span></strong>
    </div>

    <input type="text" id="nombre" placeholder="Nombre">
    <input type="text" id="apellido" placeholder="Apellido">
    
    <select id="area" name="area">
        <option value="">Todas las áreas</option>
        <option value="Abogado general">Abogado general</option>
        <option value="Coordinación de la carrera de enfermería">Coordinación de la carrera de enfermería</option>
        <option value="Coordinación de la carrera de lengua inglesa">Coordinación de la carrera de lengua inglesa</option>
        <option value="Departamento de actividades culturales y deportivas">Departamento de actividades culturales y deportivas</option>
        <option value="Departamento de contabilidad">Departamento de contabilidad</option>
        <option value="Departamento de información y estadística">Departamento de información y estadística</option>
        <option value="Departamento de investigación, desarrollo y proyectos especiales">Departamento de investigación, desarrollo y proyectos especiales</option>
        <option value="Departamento de mantenimiento e instalaciones">Departamento de mantenimiento e instalaciones</option>
        <option value="Departamento de personal">Departamento de personal</option>
        <option value="Departamento de prácticas y estadías">Departamento de prácticas y estadías</option>           
        <option value="Departamento de prensa y difusión">Departamento de prensa y difusión</option>
        <option value="Departamento de programación y presupuesto">Departamento de programación y presupuesto</option>
        <option value="Departamento de servicios escolares">Departamento de servicios escolares</option>
        <option value="Departamento de servicios médicos">Departamento de servicios médicos</option>
        <option value="Departamento de Sistemas">Departamento de sistemas</option>
        <option value="Dirección de administración y finanzas">Dirección de administración y finanzas</option>
        <option value="Dirección de la carrera de administración">Dirección de la carrera de administración</option>
        <option value="Dirección de la carrera de alimentos">Dirección de la carrera de alimentos</option>
        <option value="Dirección de la carrera de contaduría">Dirección de la carrera de contaduría</option>
        <option value="Dirección de la carrera de mecatrónica">Dirección de la carrera de mecatrónica</option>
        <option value="Dirección de la Carrera de TICS">Dirección de la carrera de TICS</option>
        <option value="Dirección de Vinculación">Dirección de vinculación</option>
        <option value="Órgano de control interno">Órgano de control interno</option>
        <option value="Rectoría">Rectoría</option>
        <option value="Secretaría Académica">Secretaría académica</option>
        <option value="Subdirección de Planeación y Evaluación">Subdirección de planeación y evaluación</option>
    </select>
    
    <select id="clasificacion">
        <option value="">Clasificación</option>
        <option value="Hardware">Hardware</option>
        <option value="Software">Software</option>
    </select>
    
    <select id="estado">
        <option value="">Estatus</option>
        <option value="Pendiente">Pendiente</option>
        <option value="En proceso">En proceso</option>
        <option value="Completado">Completado</option>
    </select>

    <br><br>
    <label style="font-size: 0.9em; margin-left: 5px; font-weight: bold; color: var(--color-primario);">Rango Específico (Opcional):</label>
    <input type="date" id="fecha_inicio">
    <input type="date" id="fecha_fin">
    
    <br><br>
    <!-- Botones adaptados a las clases estilo píldora -->
    <button onclick="cargarReportes()" class="btn-pildora">🔍 Buscar</button>
    <button onclick="limpiarFiltros()" class="btn-pildora btn-secundario">🧹 Limpiar</button>

    <form method="POST" action="exportar_excel.php" style="display:inline; float:right;">
        <input type="hidden" name="anio_exportar" id="anio_exportar_excel" value="<?php echo $anio_actual; ?>">
        <!-- Se mantiene el color representativo verde de Excel preservando la estructura del botón -->
        <button type="submit" name="exportar" class="btn-pildora" style="background-color: #217346; border-color: #217346;">📊 Exportar Excel</button>
    </form>
    <!-- Fix para evitar superposiciones flotantes -->
    <div style="clear:both;"></div> 
</div>

<!-- Contenedor dinámico para la carga AJAX -->
<div id="resultados" class="grid-resultados">
    <!-- Aquí se inyectan los resultados desde buscar_reportes.php -->
</div>

<script>
// Función para cambiar de año al dar clic en la pestaña
function seleccionarAnio(btn, anio) {
    // 1. Resetear estilos de botones
    document.querySelectorAll('.tab-button').forEach(b => b.classList.remove('active'));
    // 2. Activar el botón presionado
    btn.classList.add('active');
    
    // 3. Actualizar variables ocultas y textos
    document.getElementById('anio_seleccionado').value = anio;
    document.getElementById('anio_exportar_excel').value = anio;
    document.getElementById('texto_anio').textContent = anio;

    // 4. Recargar los datos
    cargarReportes();
}

function cargarReportes() {
    // Recopilar valores
    const anio = document.getElementById('anio_seleccionado').value;
    const nombre = document.getElementById('nombre').value;
    const apellido = document.getElementById('apellido').value;
    const area = document.getElementById('area').value;
    const clasificacion = document.getElementById('clasificacion').value;
    const estado = document.getElementById('estado').value;
    const fecha_inicio = document.getElementById('fecha_inicio').value;
    const fecha_fin = document.getElementById('fecha_fin').value;

    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'buscar_reportes.php', true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    
    xhr.onload = function () {
        document.getElementById('resultados').innerHTML = this.responseText;
    };
    
    // Enviar todo al backend (buscar_reportes.php)
    xhr.send(`anio=${anio}&nombre=${nombre}&apellido=${apellido}&area=${area}&clasificacion=${clasificacion}&estado=${estado}&fecha_inicio=${fecha_inicio}&fecha_fin=${fecha_fin}`);
}

function limpiarFiltros() {
    document.getElementById('nombre').value = '';
    document.getElementById('apellido').value = '';
    document.getElementById('area').value = '';
    document.getElementById('clasificacion').value = '';
    document.getElementById('estado').value = '';
    document.getElementById('fecha_inicio').value = '';
    document.getElementById('fecha_fin').value = '';
    cargarReportes(); // Recarga manteniendo el año seleccionado
}

// Cargar datos al abrir la página
document.addEventListener('DOMContentLoaded', cargarReportes);
</script>

<?php 
// Incluimos el pie de página global
include 'footer.php'; 
?>