<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Importar CSV</title>
    <link rel="stylesheet" href="/UdLosesSubjects/public/colors.css">
    <link rel="stylesheet" href="/UdLosesSubjects/public/menu.css">
    <link rel="stylesheet" href="/UdLosesSubjects/public/app.css">
    <link rel="stylesheet" href="/UdLosesSubjects/public/table.css">

    <script defer src="/UdLosesSubjects/public/js/viewData.js?v=2.0"></script>
    <script defer src="/UdLosesSubjects/public/js/filtrosDependientes.js?v=2.0"></script>
    <script>
        // Definir URL_PATH después de cargar jQuery pero antes de que se ejecuten los scripts defer
        window.URL_PATH = '<?php echo URL_PATH; ?>';
        console.log('URL_PATH definida como:', window.URL_PATH);
    </script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <?php require_once APP_PATH.'/utilities/sessions.php'; ?> 

</head>
<body>
    <?php include APP_PATH . '/views/components/navbar.php'; ?>

    <div class="viewdata-container">
      <h2>Filtros de búsqueda</h2>
      <form method="GET" class="filter-form" id="filtro-form" action="<?php echo URL_PATH; ?>/ViewData/filter">
        <div class="filter-form-grid">
          <!-- Fecha subida archivo (rango) -->
          <div class="form-group">
            <label title="Seleccione el rango de fechas para filtrar los archivos por la fecha en que fueron subidos.">Seleccionar rango de fechas</label>
            <div style="display: flex; gap: 0.5em;">
              <input type="date" name="fecha_subida_desde" id="fecha_subida_desde" class="input"
                value="<?= isset($_GET['fecha_subida_desde']) ? htmlspecialchars($_GET['fecha_subida_desde']) : '' ?>">
              <span style="align-self: center;">a</span>
              <input type="date" name="fecha_subida_hasta" id="fecha_subida_hasta" class="input"
                value="<?= isset($_GET['fecha_subida_hasta']) ? htmlspecialchars($_GET['fecha_subida_hasta']) : '' ?>">
            </div>
            <div id="fecha-error" style="color: #c00; font-size: 0.95em; margin-top: 0.2em;"></div>
          </div>
          <!-- Archivos -->
          <div class="form-group">
            <label title="Seleccione el archivo para filtrar los datos por el nombre del archivo.">Nombre del archivo</label>
            <select name="archivo" id="archivo" class="input">
              <option title="Muestra todos los archivos disponibles en el sistema, sin aplicar ningún filtro por archivo específico." value = "0" >Todos los archivos</option>
              <?php if (!empty($archivos)): ?>
                <?php foreach ($archivos as $archivo): ?>
                  <option value="<?= $archivo->ArchivoId ?>"
                   title="<?= $archivo->NombreArchivo ?>"
                  <?= $selected ?>><?= $archivo->ArchivoId ?> - <?= mb_strimwidth($archivo->NombreArchivo, 0, 20, '...')  ?></option>
                <?php endforeach; ?>
              <?php endif; ?>
            </select>
          </div>
          <!-- Botones -->
          <div class="form-group" style="flex-direction: row; gap: 0.5em; align-items: flex-end; margin-bottom: 0;">
            <button type="submit" >Filtrar</button>
            <a href="?" class="btn btn-secondary">Limpiar</a>
          </div>
          <input type="hidden" name="pagina" id="pagina" value="<?= $pagina ?? 1 ?>">

        </div>
        <!--  <?php include APP_PATH . '/views/components/table.php'; ?> -->
      </form>
  </div>

  <?php include APP_PATH . '/views/components/table.php'; ?>
  <?php include APP_PATH . '/views/components/footer.php'; ?>
  <script>

// Inicializar Select2 para el select múltiple de estado académico
$(document).ready(function() {
  $('#estado_academico').select2({
    placeholder: 'Seleccione uno o varios estados',
    width: '80%'
  });
  $('#estudiante').select2({
    placeholder: 'Seleccione uno o varios estudiantes',
    width: '80%'
  });
  $('#periodo').select2({
    placeholder: 'Seleccione uno o varios periodos',
    width: '80%'
  });
});

// Validar fechas de subida de archivo (rango) para evitar que la fecha "desde" sea mayor que la fecha "hasta"
function validarFechas() {
  const desde = document.getElementById('fecha_subida_desde').value;
  const hasta = document.getElementById('fecha_subida_hasta').value;
  const errorDiv = document.getElementById('fecha-error');
  const filtrarBtn = document.querySelector('.filter-form button[type="submit"]');
  if (desde && hasta && desde > hasta) {
    errorDiv.textContent = 'La fecha "desde" no puede ser mayor que la fecha "hasta".';
    filtrarBtn.disabled = true;
  } else {
    errorDiv.textContent = '';
    filtrarBtn.disabled = false;
  }
}

document.getElementById('fecha_subida_desde').addEventListener('input', validarFechas);
document.getElementById('fecha_subida_hasta').addEventListener('input', validarFechas);

$('#filtro-form').on('submit', function(e) {
  e.preventDefault(); // Evita el submit tradicional

  // Realiza una petición AJAX al endpoint del filtro (action del formulario)
  $.ajax({
    url: $(this).attr('action'), // URL a la que se envía el formulario
    type: 'GET',                 // Método GET (igual que el formulario)
    data: $(this).serialize(),   // Serializa todos los campos del formulario
    success: function(response) {
      // Cuando el servidor responde exitosamente...
      // Reemplaza el contenido de la tabla con la respuesta recibida
      // (Asegúrate de que el servidor devuelva solo el <tbody> o la tabla completa)
      $('.table-data').html(response);
    },
    error: function() {
      // Si ocurre un error en la petición AJAX, muestra un mensaje
      alert('Error al filtrar los datos.');
    }
  });
});

$(document).on('click', '.pagina-link', function(e) {
    e.preventDefault();
    let pagina = $(this).data('pagina');
    $('#pagina').val(pagina);
    $('#filtro-form').submit();
});

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.pagina-link').forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            let pagina = this.getAttribute('data-pagina');
            document.getElementById('pagina').value = pagina;
            document.getElementById('filtro-form').submit();
        });
    });
});

</script>
</body>
</html>