<!-- Modal para filtrar por periodo (mes y quincena) -->
<div class="modal fade" id="modalFiltroPeriodo" tabindex="-1" aria-labelledby="modalFiltroPeriodoLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalFiltroPeriodoLabel">Filtrar por Periodo</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>
      <div class="modal-body">
        <form id="formFiltroPeriodo">
          <div class="mb-3">
            <label for="modalMesFilter" class="form-label">Mes</label>
            <select class="form-select" id="modalMesFilter" name="mes">
              <option value="">Selecciona Mes</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="modalQuincenaFilter" class="form-label">Quincena</label>
            <select class="form-select" id="modalQuincenaFilter" name="quincena">
              <option value="">Selecciona Quincena</option>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary" id="aplicarFiltroPeriodo">Aplicar Filtro</button>
      </div>
    </div>
  </div>
</div>
<script>
// Lógica para llenar los selects del modal
function cargarMesesYQuincenasModal() {
    const mesSelect = document.getElementById('modalMesFilter');
    const quincenaSelect = document.getElementById('modalQuincenaFilter');
    mesSelect.innerHTML = '<option value="">Selecciona Mes</option>';
    quincenaSelect.innerHTML = '<option value="">Selecciona Quincena</option>';
    // Usar array de meses numéricos y nombres
    const mesesNombres = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
    // Calcular los últimos 3 meses (incluyendo el actual)
    const hoy = new Date();
    let mesesMostrar = [];
    for (let i = 2; i >= 0; i--) {
        let fecha = new Date(hoy.getFullYear(), hoy.getMonth() - i, 1);
        let mesNum = fecha.getMonth() + 1;
        let anio = fecha.getFullYear();
        mesesMostrar.push({num: mesNum, nombre: mesesNombres[mesNum-1], anio: anio});
    }
    // Llenar el select de mes (value = mes-anio)
    mesesMostrar.forEach(m => {
        mesSelect.innerHTML += `<option value="${m.num}-${m.anio}">${m.nombre} ${m.anio}</option>`;
    });
    mesSelect.onchange = function() {
        const [mesNum, anioSel] = this.value.split('-').map(v => parseInt(v));
        quincenaSelect.innerHTML = '<option value="">Selecciona Quincena</option>';
        if (!mesNum || !anioSel) return;
        fetch(`../../../backend/api/quincenas_disponibles.php?month=${mesNum}&year=${anioSel}`)
            .then(r => r.json())
            .then(qs => {
                if (qs && Array.isArray(qs.quincenas)) {
                    qs.quincenas.forEach(q => {
                        quincenaSelect.innerHTML += `<option value="${q.id_quincena}">${q.nombre}</option>`;
                    });
                }
            });
    };
}
        // Abrir el modal y cargar los selects usando Bootstrap 5 y JS puro
        document.getElementById('modalFiltroPeriodo').addEventListener('show.bs.modal', function () {
            cargarMesesYQuincenasModal();
        });

        document.getElementById('aplicarFiltroPeriodo').addEventListener('click', function() {
            const quincenaId = document.getElementById('modalQuincenaFilter').value;
            if (quincenaId) {
                if (typeof pintarCardsPorPeriodo === 'function') {
                    pintarCardsPorPeriodo(quincenaId);
                }
                // Ocultar el modal con Bootstrap 5
                var modal = bootstrap.Modal.getInstance(document.getElementById('modalFiltroPeriodo'));
                if (modal) modal.hide();
            } else {
                alert('Selecciona una quincena.');
            }
        });
</script>
