asistencia/import/html_forms_asistencia.php

<?php
include_once "import/html_forms.php";
?>


<form id="asistencia">
    <div class="form-box">
        <input type="hidden" name="facultad" value="<?= $user->facultad['facultad_id']; ?>">
        <?php
        $periodo = $db->where('id', $user->periodo)->getOne('fs_periodo');
        $carreras = $db
            ->where('nivel', $periodo['nivel_id'])
            ->where('facultad', $user->facultad['facultad_id'])
            ->orderBy('carrera')
            ->get('fs_carrera');

        ?>
        <div class="form-group row">
            <label for="filter_carrera" class="col-4 col-form-label">Carrera</label>
            <div class="col-6 ">
                <div id="dlcarrera" class="datalist datalist-select mb-1 w-100">
                    <div class="datalist-input">Seleccionar todas las carreras</div>
                    <span class="ing-buscar icono"></span>
                    <ul style="display:none">
                        <li data-id="">Seleccionar todas las carreras</li>
                        <?php
                        foreach ($carreras as $carrera) {
                        ?>
                            <li data-id="<?= $carrera['id'] ?>">
                                <?= $carrera['carrera'] ?>
                            </li>
                        <?php
                        }
                        ?>
                    </ul>
                    <input type="hidden" id="filter_carrera" name="carrera" value="">
                </div>
            </div>
        </div>

        <div class="form-group row">
            <label for="filterClave" class="col-4 col-form-label">Clave</label>
            <div class="col-6 ">
                <input type="text" class="form-control" id="filterClave" name="clave" placeholder="Clave del profesor (opcional)" value="<?= $clave ?? '' ?>" pattern="(do)?[0-9]{3,6}" title="La clave debe tener 8 caracteres, los primeros 2 deben ser letras y los últimos 6 números" minlength="3" maxlength="8">
            </div>
        </div>
        <div class="form-group row">
            <label for="filterNombre" class="col-4 col-form-label">Nombre</label>
            <div class="col-6 ">
                <input type="text" class="form-control" id="filterNombre" name="nombre" placeholder="Nombre del profesor (opcional)">
            </div>
        </div>

        <div class="form-group row">
            <label for="fecha_inicial" class="col-4 col-form-label">Fecha inicial</label>
            <div class="col-8 col-sm-4">
                <input id="fecha_inicial" name="fecha_inicial" type="text" class="form-control date-picker" placeholder="dd/mm/aaaa" maxlength="10" required="required" readonly>
                <div class="invalid-feedback">No es una fecha válida.</div>
            </div>
        </div>
        <div class="form-group row">
            <label for="fecha_final" class="col-4 col-form-label">Fecha final</label>
            <div class="col-8 col-sm-4">
                <input id="fecha_final" name="fecha_final" type="text" class="form-control date-picker" placeholder="dd/mm/aaaa" maxlength="10" required="required" readonly>
                <div class="invalid-feedback">No es una fecha válida o el rango es incorrecto.</div>
            </div>
        </div>
    </div>
    <div class="form-group row justify-content-center">
        <button type="submit" class="btn btn-outline-primary mr-2" id="btn-buscar"><?php echo $ICO["buscar"]; ?> Buscar asistencias</button>
        <button type="button" class="btn btn-outline-danger" onclick="window.location.href = window.location.href"><?php echo $ICO["borrar"]; ?> Limpiar</button>
    </div>

</form>

<script>
    var today = new Date();
    $(".date-picker").datepicker($.datepicker.regional["es"]);
    $(".date-picker").datepicker({
        dateFormat: "dd/mm/yyyy",
        changeMonth: true,
    });
    <?php
    $periodo = query("SELECT * FROM FS_PERIODO WHERE ID = :periodo", [":periodo" => $user->periodo]);
    echo "// Período: {$periodo["inicio"]} - {$periodo["fin"]}\n";
    echo "// Fecha inicial: " . ($fecha_inicial ?? 'n/a') . " - Fecha final: " . ($fecha_final ?? 'n/a') . "\n";
    ?>
    // $periodo format = Y-m-d
    const inicio = new Date(<?= date('Y, m-1, d', strtotime($periodo['inicio'])) ?>); 
    var fecha_inicial = new Date(<?= date('Y, m-1, d', strtotime($fecha_inicial ?? $periodo['inicio'])) ?>)
    var fecha_final = new Date(<?= date('Y, m-1, d', strtotime($fecha_final   ?? $periodo['fin'])) ?>)
    const limit = new Date(Math.min(today, fecha_final));

    console.log(`today: ${today}, fecha_inicial: ${fecha_inicial}, fecha_final: ${fecha_final}`);
    $("#fecha_inicial").datepicker("option", "minDate", inicio);
    $("#fecha_inicial").datepicker("option", "maxDate", limit);
    $("#fecha_final").datepicker("option", "minDate", fecha_inicial);
    $("#fecha_final").datepicker("option", "maxDate", limit);
    // if today is in the period, set the initial date to today
    $("#fecha_inicial").datepicker("setDate", fecha_inicial);
    $("#fecha_final").datepicker("setDate", today <= fecha_final ? today : fecha_final);

    // if the datepicker is changed, check if the range is valid
    makeRequiredDatalist("#filter_facultad", true);
    makeRequiredDatalist("#filter_carrera", true);


    $(document).on('click', '#dlFacultad ul li', function() {
        var id = $(this).data('id');
        // remove all option
        $('#dlcarrera ul').empty();
        disableDatalist("#filter_carrera", false);
        $.post(
            'action/action_carreras.php', {
                facultad: id,
                periodo: $('#periodo').val()
            },
            function(data) {
                $('#dlcarrera ul').append("<li>Seleccionar todas</li>");
                for (var i = 0; i < data.length; i++)
                    $('#dlcarrera ul').append(`<li data-id="${data[i].id}">${data[i].carrera}</li>`);
                setDatalistFirst("#filter_carrera")
            },
            'json'
        )
    });

    $(document).on('change', '#fecha_inicial', function() {
        var fi = $(this).datepicker("getDate");
        $("#fecha_final").datepicker("option", "minDate", fi);
    });

    $(document).on('change', '#fecha_final', function() {
        var ff = $(this).datepicker("getDate");
        $("#fecha_inicial").datepicker("option", "maxDate", ff);
    });


</script>