<!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; ?>/ViewDataV1/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>

          <!-- 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 -->
          <div class="form-group">
            <label for="archivo">Archivos</label>
            <select name="archivo" id="archivo" class="input">
              <option value = "0" >Seleccione...</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 y Ver Gráficos</button>
            <a href="?" class="btn btn-secondary">Limpiar</a>
          </div>
          <input type="hidden" name="pagina" id="pagina" value="<?= $pagina ?? 1 ?>">

        </div>
      </form>
  </div>

  <!-- Contenedor para los gráficos -->
  <div id="contenedor-graficos" style="margin-top: 2em;">
      <?php include APP_PATH . '/views/components/graphics.php'; ?>
  </div>

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

  <script>
// Inicializar Select2 y configurar eventos
$(document).ready(function() {
  // Inicializar Select2
  $('#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%'
  });

});



// Resto del código existente (formulario submit, paginación, etc.)
$('#filtro-form').on('submit', function(e) {
    e.preventDefault();
    
    const filtrosData = $(this).serialize();
    
    // 1. Filtrar tabla
    $.ajax({
        url: $(this).attr('action'),
        type: 'GET',
        data: filtrosData,
        success: function(response) {
            $('.table-data').html(response);
        },
        error: function() {
            alert('Error al filtrar los datos.');
        }
    });
    
    // 2. Actualizar gráficos
    actualizarGraficos(filtrosData);
});

function actualizarGraficos(filtrosData) {
    $('#contenedor-graficos').html('<div style="text-align: center; padding: 2em; color: #666;"><i>🔄 Actualizando gráficos...</i></div>');
    
    $.ajax({
        url: '<?php echo URL_PATH; ?>/ViewDataV1/graphics',
        type: 'GET',
        data: filtrosData,
        success: function(response) {
            $('#contenedor-graficos').html(response);
            
            setTimeout(function() {
                $.getScript('/UdLosesSubjects/public/js/graphics.js')
                    .done(function() {
                        console.log('Gráficos actualizados correctamente');
                    })
                    .fail(function() {
                        console.error('Error al actualizar gráficos');
                    });
            }, 100);
        },
        error: function() {
            $('#contenedor-graficos').html('<div style="color: red; text-align: center; padding: 2em;">❌ Error al actualizar gráficos</div>');
        }
    });
}

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

/* Cambios en filtros dependientes */

// URL_PATH ya está definida arriba


/*
$('#estado_academico').on('change', function() {
    let estadoAcademico = $(this).val();
    const periodo = $('#periodo').val();
    const proyectoCurricular = $('#proyecto_curricular').val();
    const espacioAcademico = $('#espacio_academico').val();
    const archivo = $('#archivo').val();

    if (estadoAcademico == "0") {
        estadoAcademico = null;
    }
    console.log('Estado académico seleccionado:', estadoAcademico);
    actualizarPeriodoPorEstadoAcademico(estadoAcademico);
    actualizarProyectoCurricularPorEstadoAcademico(estadoAcademico);
    actualizarEspacioAcademicoPorEstadoAcademico(estadoAcademico);
    actualizarArchivoPorEstadoAcademico(estadoAcademico);
});*/
/*
function actualizarPeriodoPorEstadoAcademico(estadoAcademico) {
    console.log('Actualizando periodos para el estado académico:', estadoAcademico);
    $.ajax({  
        url: URL_PATH + '/ViewDataV1/getPeriodosPorEstadoAcademico',
        type: 'GET',
        data: { estadoAcademico: estadoAcademico },
        success: function(response) {
            console.log('Periodos actualizados:', response);
            // Limpiar el select y agregar la opción "Todos" correctamente solo una vez
            $('#periodo').empty().append('<option value="0">Periodo</option>');
            // Esta sección recorre cada elemento del array 'response', que contiene los periodos obtenidos mediante una petición AJAX.
            // Por cada periodo, agrega una nueva opción al select con id 'periodo', mostrando el id y el nombre del periodo.
            let data = JSON.parse(response);
            console.log('Datos:', data);
            data.forEach(function(periodo) {
                $('#periodo').append('<option value="' + periodo.Periodo + '">' + periodo.Periodo + '</option>');
            }); 
            console.log('Datos:', $('#periodo').html());

            console.log('Periodos actualizados:', $('#periodo').html());
        }
    });
}

function actualizarProyectoCurricularPorEstadoAcademico(estadoAcademico) {
    console.log('Actualizando proyecto curricular para el estado académico:', estadoAcademico);
    $.ajax({
        url: URL_PATH + '/ViewDataV1/getProyectosPorEstadoAcademico',
        type: 'GET',
        data: { estadoAcademico: estadoAcademico },
        success: function(response) {
            console.log('Proyecto curricular actualizados:', response);
            $('#proyecto_curricular').empty().append('<option value="0">Todos</option>');
            let data = JSON.parse(response);
            data.forEach(function(proyecto) {
              $('#proyecto_curricular').append('<option value="' + proyecto.ProgramaId + '">' + proyecto.Codigo + ' - 12' + proyecto.Nombre.substring(0, 20) + '...' + '</option>');
            });
        }
    });
} 

function actualizarEspacioAcademicoPorEstadoAcademico(estadoAcademico) {
    console.log('Actualizando espacio académico para el estado académico:', estadoAcademico);
    $.ajax({
        url: URL_PATH + '/ViewDataV1/getEspaciosAcademicosPorEstadoAcademico',
        type: 'GET',
        data: { estadoAcademico: estadoAcademico },
        success: function(response) {
            console.log('Espacio académico actualizados sss:', response);
            $('#espacio_academico').empty().append('<option value="0">Seleccione...</option>');
            let data = JSON.parse(response);
            data.forEach(function(espacio) {
              $('#espacio_academico').append('<option value="' + espacio.codigo + '">' + espacio.codigo + ' - ' + espacio.nombre + '</option>');
            });
        }
    });
}

function actualizarArchivoPorEstadoAcademico(estadoAcademico) {
    console.log('Actualizando archivo para el estado académico:', estadoAcademico);
    $.ajax({
        url: URL_PATH + '/ViewDataV1/getArchivosPorEstadoAcademico',
        type: 'GET',
        data: { estadoAcademico: estadoAcademico },
        success: function(response) {
            console.log('Archivo actualizados:', response);
            $('#archivo').empty().append('<option value="0">Seleccione...</option>');
            let data = JSON.parse(response);
            data.forEach(function(archivo) {
                $('#archivo').append('<option value="' + archivo.ArchivoId + '">' + archivo.ArchivoId + ' - ' + archivo.NombreArchivo + '</option>');
            });
        }
    });
}*/
/*
$('#periodo').on('change', function() {
    let periodo = $(this).val();
    const estadoAcademico = $('#estado_academico').val();
    const proyectoCurricular = $('#proyecto_curricular').val();
    const espacioAcademico = $('#espacio_academico').val(); 
    const archivo = $('#archivo').val();
    console.log('Periodo seleccionado:', periodo);
    // Solo actualiza los estados acad1émicos si no hay ninguno seleccionado
    console.log('Estado académico seleccionado:', estadoAcademico);
    
    if (periodo == "0") {
        periodo = null;
    }

    
    // CUANDO ES NULL O VACIO
    if (estadoAcademico == null || estadoAcademico.length === 0) {
        console.log('entro');
        actualizarPeriodo_EstadoAcademico(periodo);
    }
    // CUANDO ES UN ARRAY
    estadoAcademico.forEach(function(estado) {
        console.log('Estado académico:', estado);
        if ( estado == "0" || estado == null || estado.length === 0 ) {
            console.log('entro');
            actualizarPeriodo_EstadoAcademico(periodo);
        }
    });
  
    // Proyecto curricular
    if (proyectoCurricular == "0" || proyectoCurricular == null || proyectoCurricular.length === 0) {
        actualizarPeriodo_ProyectoCurricular(periodo);
    }

    // Espacio académico
    if (espacioAcademico == "0" || espacioAcademico == null || espacioAcademico.length === 0) {
        actualizarPeriodo_EspacioAcademico(periodo);
    }
    
    // Archivo
    if (archivo == "0" || archivo == null || archivo.length === 0) {
        actualizarPeriodo_Archivo(periodo);
    }

}); */

/*
function actualizarPeriodo_EstadoAcademico(periodo) {
    console.log('Actualizando estados académicos para el periodo:', periodo);
    $.ajax({
        url: URL_PATH + '/ViewDataV1/getEstadosPorPeriodo',
        type: 'GET',
        data: { periodo: periodo },
        success: function(response) {
            console.log('Estados académicos actualizados:', response);
            // Limpiar el select y agregar la opción "Todos" correctamente solo una vez
            $('#estado_academico').empty().append('<option value="0">Todos</option>');
            // Esta sección recorre cada elemento del array 'response', que contiene los estados académicos obtenidos mediante una petición AJAX.
            // Por cada estado, agrega una nueva opción al select con id 'estado_academico', mostrando el id y el nombre del estado académico.
            let data = JSON.parse(response);
            data.forEach(function(estado) {
                $('#estado_academico').append('<option value="' + estado.EstadoAcademicoId + '">' + estado.EstadoAcademico + ' - ' + estado.NombreEstado + '</option>');
            });
            console.log('Datos:', data);

            console.log('Estados académicos actualizados:', $('#estado_academico').html());
        }
    });
}

function actualizarPeriodo_ProyectoCurricular(periodo) {
    console.log('Actualizando proyecto curricular para el periodo:', periodo);
    $.ajax({
        url: URL_PATH + '/ViewDataV1/getProyectosPorPeriodo',
        type: 'GET',
        data: { periodo: periodo },
        success: function(response) {
            console.log('Proyecto curricular actualizado:', response);
            $('#proyecto_curricular').empty().append('<option value="0">Todos</option>');
            let data = JSON.parse(response);
            data.forEach(function(proyecto) {
                $('#proyecto_curricular').append('<option value="' + proyecto.ProgramaId + '">' + proyecto.Codigo + ' - ' + proyecto.Nombre.substring(0, 20) + '...' + '</option>');
            });
        }
    });
}

function actualizarPeriodo_EspacioAcademico(periodo) {
    console.log('Actualizando espacio académico para el periodo:', periodo);
    $.ajax({
        url: URL_PATH + '/ViewDataV1/getCursosPorPeriodo',
        type: 'GET',
        data: { periodo: periodo },
        success: function(response) {
            console.log('Espacio académico actualizado:', response);
            $('#espacio_academico').empty().append('<option value="0">Seleccione...</option>');
            let data = JSON.parse(response);
            data.forEach(function(curso) {
                $('#espacio_academico').append('<option value="' + curso.codigo + '">' + curso.codigo + ' - ' + curso.nombre.substring(0, 20) + '...' + '</option>');
            });
        }
    });
}

function actualizarPeriodo_Archivo(periodo) {
    console.log('Actualizando archivo para el periodo:', periodo);
    $.ajax({
        url: URL_PATH + '/ViewDataV1/getArchivosPorPeriodo',
        type: 'GET',
        data: { periodo: periodo },
        success: function(response) {
            console.log('Archivo actualizado:', response);
            $('#archivo').empty().append('<option value="0">Seleccione...</option>');
            let data = JSON.parse(response);
            console.log('Datos:', data);
            data.forEach(function(archivo) {
                $('#archivo').append('<option value="' + archivo.ArchivoId + '">' + archivo.ArchivoId + ' - ' + archivo.NombreArchivo.substring(0, 20) + '...' + '</option>');
            });
        }
    });
}*/
</script>
</body>
</html>


