<!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">
          <!-- Estado académico -->
          <div class="form-group">
            <label for="estado_academico">Estado académico</label>
            <select name="estado_academico[]" id="estado_academico" class="input" multiple size="4">
              <option value="0">Todos</option>
              <?php if (!empty($estadosAcademicos)): ?>
                <?php foreach ($estadosAcademicos as $estado): ?>
                  <?php
                    $EstadoAcademicoId = htmlspecialchars($estado->EstadoAcademicoId);
                    $estadoId = htmlspecialchars($estado->EstadoAcademico);
                    $estadoDesc = htmlspecialchars($estado->NombreEstado);
                    echo "<script>console.log('estado: " . json_encode($estadoId) . "');</script>";
                    // Verifica si está seleccionado (soporta array)
                    $selected = (isset($_GET['estado_academico']) && in_array($estadoId, (array)$_GET['estado_academico'])) ? 'selected' : '';
                  ?>
                  <option value="<?= $EstadoAcademicoId ?>" <?= $selected ?> title="<?= $estadoDesc ?>">
                    <?= $estadoId ?> - <?= mb_strimwidth($estadoDesc, 0, 25, '...') ?>
                  </option>
                <?php endforeach; ?>
              <?php endif; ?>
            </select>
          </div>
          <!-- Estudiante -->
          <div class="form-group">
            <label for="estudiante">Estudiante</label>
            <select name="estudiante[]" id="estudiante" class="input" multiple size="4">
              <option value="0">Todos</option>
              <?php if (!empty($estudiantes)): ?>
                <?php foreach ($estudiantes as $estudiante): ?>
                  <?php
                    $CodigoEstudiante = htmlspecialchars($estudiante->CodigoEstudiante);
                    $estudianteNombre = htmlspecialchars($estudiante->Nombre);
                    $selected = (isset($_GET['estudiante']) && in_array($CodigoEstudiante, (array)$_GET['estudiante'])) ? 'selected' : '';
                  ?>
                  <option value="<?= $CodigoEstudiante ?>" <?= $selected ?> title="<?= $estudianteNombre ?>">
                    <?= $CodigoEstudiante ?> - <?= mb_strimwidth($estudianteNombre, 0, 25, '...') ?>
                  </option>
                <?php endforeach; ?>
              <?php endif; ?>
            </select>
          </div>
          <!-- Año y Periodo (selección múltiple) -->
          <div class="form-group">
            <label for="periodo">Año y periodo</label>
            <div style="align-items: center;">
              <select name="periodo[]" id="periodo" class="input periodo-select" multiple size="4">
                <option value="0">Todos los periodos</option>
                <?php if (!empty($periodos)): ?>
                  <?php foreach ($periodos as $periodo): ?>
                    <?php
                      $selected = (isset($_GET['periodo']) && in_array($periodo, (array)$_GET['periodo'])) ? 'selected' : '';
                    ?>
                    <option value="<?= $periodo ?>" <?= $selected ?>><?= $periodo ?></option>
                  <?php endforeach; ?>
                <?php endif; ?>
              </select>
            </div>
          </div>

          <!-- Proyecto curricular -->
          <div class="form-group">
            <label for="proyecto_curricular">Proyecto curricular</label>
            <select name="proyecto_curricular" id="proyecto_curricular" class="input">
              <option value="0">Todos</option>
              <?php if (!empty($programas)): ?>
                <?php foreach ($programas as $programa): ?>
                    <?php 
                        $selected = (isset($_GET['proyecto_curricular ']) && $_GET['espacio_academico'] == $programa->ProgramaId) ? 'selected' : ''; 
                    ?>
                    <option value="<?= $programa->Codigo ?>"
                        title="<?= $programa->Codigo ?> - <?= $programa->Nombre ?>"
                        <?= $selected ?>>
                        <?= $programa->Codigo ?> - <?= mb_strimwidth($programa->Nombre, 0, 20, '...') ?>
                    </option>
                <?php endforeach; ?>
            <?php endif; ?>
            </select>
          </div>
          <!-- Espacio académico -->
          <div class="form-group">
            <label for="espacio_academico">Espacio académico</label>
            <select name="espacio_academico" id="espacio_academico" class="input">
              <option value="0">Seleccione...</option>
              <?php if (!empty($cursos)): ?>
                <?php foreach ($cursos as $curso): ?>
                  <option value="<?= $curso->codigo ?>"
                   title="<?= $curso->codigo ?> - <?= $curso->nombre ?>"
                  <?= $selected ?>><?= $curso->codigo ?> - <?= mb_strimwidth($curso->nombre, 0, 20, '...')  ?></option>
                <?php endforeach; ?>
              <?php endif; ?>
            </select>
          </div>
          <!-- Archivos -->
          
          <!-- 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%'
  });
});


$('#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>


