paad/import/html_forms_vista.php

<section id="message"></section>
<?php
$target = '/checador_otros/admin_checador/reporte_de_asistencias.php';
$id = $_POST['id'];
include_once "import/html_forms.php";

$carreras = queryAll("SELECT DISTINCT carrera, id, facultad FROM FS_CARRERA WHERE ID IN (SELECT distinct CARRERA_ID FROM FS_HORARIO_BASIC WHERE :id  IN (SELECT HORARIO_ID FROM HORARIO_PROFESOR WHERE PROFESOR_ID = :id) AND PERIODO_ID = :per)", [':id' => $id, ':per' => $user->periodo_id]);
// materia por carrera
#print_r($carreras);
$materias = queryAll("SELECT DISTINCT * FROM FS_MATERIA WHERE CARRERA = COALESCE(:car, CARRERA)  AND ID IN (SELECT distinct materia_id FROM HORARIO WHERE :id IN (SELECT HORARIO_ID FROM HORARIO_PROFESOR WHERE PROFESOR_ID = :id) AND PERIODO_ID = :per) ORDER BY NOMBRE", [":car" => empty($carrera) ? null : $carrera, ':id' => $id, ':per' => $user->periodo_id]);
#exit();
$periodo = query("SELECT inicio, fin FROM FS_PERIODO WHERE ID = :per", [':per' => $user->periodo_id]);
?>


<form action="#" method="post" id="form" class="form-horizontal">
    <input type="hidden" name="id" value="<?= $id; ?>" />
    <input type="hidden" name="periodo" value="<?= $user->periodo_id ?>" />
    <input type="hidden" name="facultad" value="<?= $user->facultad['facultad_id'] ?>" />
    <input type="hidden" name="clave" value="<?= $profesor['clave'] ?>" />
    <div class="form-box">
        <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">Todas las carreras</div>
                    <span class="ing-buscar icono"></span>
                    <ul style="display:none">
                        <!-- Seleccionar todas -->
                        <li data-value="0">Todas las carreras</li>
                        <?php foreach ($carreras as $car) {
                        ?>
                            <li data-id="<?= $car['id'] ?>" class="<?= ($car['id'] == $carrera) ? "selected" : '' ?>" onclick="carreras(<?= $car['id'] ?>)">
                                <?= $car['carrera'] ?>
                            </li>
                        <?php } ?>
                    </ul>
                    <input type="hidden" id="filter_carrera" name="carrera" value="">
                </div>
            </div>
        </div>
        <!-- Materia -->
        <div class="form-group row">
            <label for="filter_materia" class="col-4 col-form-label">Materia</label>
            <div class="col-6">
                <div id="dlmateria" class="datalist datalist-select mb-1 w-100">
                    <div class="datalist-input">Todas las materias</div>
                    <span class="ing-buscar icono"></span>
                    <ul style="display:none">
                        <li data-value="0">Todas las materias</li>
                        <?php foreach ($materias as $materia) { ?>
                            <li data-id="<?= $materia['id']; ?>" class="<?= ($materia['id'] == $_POST['materia']) ? "selected" : '' ?>">
                                <?= $materia['nombre']; ?>
                            </li>
                        <?php } ?>
                    </ul>
                    <input type="hidden" id="filter_materia" name="materia" value="">
                </div>
            </div>
        </div>

        <!-- Fecha inicial y fecha final -->
        <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>

    <!-- ICO-BUSCAR FILTRAR & ICO-BORRAR LIMPIAR -->
    <div class="form-group row justify-content-center">
        <button type="button" class="btn btn-outline-primary mr-2" onclick="if(validateForm) submit('vista_profesor.php')">
            <span class="ing-buscar icono"></span>
            Filtrar
        </button>
        <button type="button" class="btn btn-outline-danger" onclick="reset_form(); submit('vista_profesor.php')">
            <span class="ing-borrar icono"></span>
            Limpiar
        </button>
    </div>
</form>
<?php
include_once "js/messages.php";
?>
<script>
    $(".date-picker").datepicker($.datepicker.regional["es"]);
    $(".date-picker").datepicker({
        dateFormat: "dd/mm/yyyy",
        changeMonth: true,
    });
    var today = new Date();

    var fecha_inicial = new Date(<?= $fecha_inicial->format("Y, m-1, d") ?>);
    var fecha_inicial_periodo = new Date(<?= date("Y, m-1, d", strtotime($periodo['inicio'])) ?>);
    var fecha_final = new Date(<?= $fecha_final->format("Y, m-1, d") ?>);
    var fecha_final_periodo = new Date(<?= date("Y, m-1, d", strtotime($periodo['fin'])) ?>);
    var limit = new Date(Math.min(today, fecha_final_periodo));
    // if today is in the period, set the initial date to today
    $("#fecha_inicial").datepicker("option", "minDate", fecha_inicial_periodo);
    $("#fecha_inicial").datepicker("option", "maxDate", limit);
    $("#fecha_final").datepicker("option", "minDate", fecha_inicial_periodo);
    $("#fecha_final").datepicker("option", "maxDate", limit);

    $("#fecha_inicial").datepicker("setDate", fecha_inicial);
    $("#fecha_final").datepicker("setDate", today <= fecha_final ? today : fecha_final);

    function reset_form() {
        $("#fecha_inicial").datepicker("setDate", fecha_inicial_periodo);
        $("#fecha_final").datepicker("setDate", today <= fecha_inicial_periodo ? today : fecha_final_periodo);
        setDatalistFirst("#filter_carrera");
        setDatalistFirst("#filter_materia");
        disableDatalist("#filter_materia");
    }

    <?php if (empty($carrera)) { ?>
        disableDatalist("#filter_materia", true);
    <?php } ?>


    // $("#fecha_inicial").on("change", function() {
    //     var fecha_inicial = $("#fecha_inicial").datepicker("getDate");
    //     var fecha_final = $("#fecha_final").datepicker("getDate");
    //     if (fecha_final < fecha_inicial) {
    //         $("#fecha_final").datepicker("setDate", fecha_inicial);
    //     }
    //     $("#fecha_final").datepicker("option", "minDate", fecha_inicial);
    // });

    // $("#fecha_final").on("change", function() {
    //     var fecha_inicial = $("#fecha_inicial").datepicker("getDate");
    //     var fecha_final = $("#fecha_final").datepicker("getDate");
    //     if (fecha_final < fecha_inicial) {
    //         $("#fecha_inicial").datepicker("setDate", fecha_final);
    //     }
    //     $("#fecha_inicial").datepicker("option", "maxDate", fecha_final);
    // });
    // Datalist carrera then select materia
    $(document).on('click', '#dlcarrera li', function() {
        // if this is empty
        // console.log($(this).attr('data-value'));
        if ($(this).attr('data-value') == '0')
            disableDatalist("#filter_materia", true);
    });

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

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