PAAD
/
paad


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
							<?php
error_reporting(E_ALL & ~E_NOTICE);
ini_set("display_errors", 1);

require_once 'class/c_login.php';

if (!isset($_SESSION['user']))
    die(header('Location: index.php'));
    
$user = unserialize($_SESSION['user']);

$user->access();
if (!$user->admin && in_array($user->acceso, ['r', 'n'])) {
    // die($access);
    header('Location: main.php?error=1');
} else {
    $user->print_to_log('Consultar asistencia');
}

?>
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Justificar asistencias | <?= $user->facultad['facultad'] ?? 'General' ?></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <?php include_once "import/html_css_files.php"; ?>
</head>

<body style="display: block;">
    <?php
    include("import/html_header.php");
    html_header("Justificar asistencias", "Sistema de gestión de checador");
    ?>
    <main class="container content marco content-margin" id="local-app">
        <section id="message"></section>
        <?php
        require_once "import/html_forms_justificacion.php";
        ?>

        <!-- #scroll-btn sticky scroll down btn with a sticky position on the bottom right -->
        <a href="#top" id="scroll-up" class="btn btn-primary btn-sm" role="button" aria-pressed="true" style="display: none; position: fixed; bottom: 3rem; right: 1rem;">
            <?= $ICO['arriba'] ?>
        </a>

        <a href="#top" id="scroll-down" class="btn btn-primary btn-sm" role="button" aria-pressed="true" style="display: sticky; position: fixed; bottom: 1rem; right: 1rem;">
            <?= $ICO['abajo'] ?>
        </a>

        <table class="table table-striped table-hover table-white table-sm main-table" id="main-table">
            <thead class="thead-dark">
                <tr>
                    <th>
                        <input class="radio-md" type="checkbox" id="check" name="check" value="0">
                    </th>
                    <th>Clave</th>
                    <th>Profesor</th>
                    <th>Hora</th>
                    <th>Materia</th>
                    <th>Grupo</th>
                    <th>Salón</th>
                </tr>
            </thead>
            <tbody id="visible"></tbody>
        </table>

        <div class="row justify-content-center main-table">
            <div class="col-4 justify-content-center">
                <button class="btn btn-primary btn-block disabled" id="justificar-btn">
                    <i class="ing-justificar"></i>
                    Justificar
                </button>
            </div>
        </div>
        <!-- scroll up -->

    </main>
    <?php
    require_once("import/html_footer.php");
    require_once("js/messages.php");
    ?>
    <script src="js/bootstrap/popper.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script>
        $(".main-table").hide();
        $("#scroll-down").hide();
        $("#scroll-up").hide();

        <?php
        if (isset($user->periodo)) {
            $periodo = query("SELECT * FROM FS_PERIODO WHERE ID = :periodo", [":periodo" => $user->periodo]);
            echo "// Período: {$periodo["inicio"]} - {$periodo["fin"]}\n";
        ?>
            // $periodo format = Y-m-d
            var today = new Date();
            var fecha_inicial = new Date(<?= date("Y, m-1, d", strtotime($periodo['inicio'])) ?>);
            var fecha_final = new Date(<?= date("Y, m-1, d", strtotime($periodo['fin'])) ?>);
            var limit = new Date(Math.min(today, fecha_final));

            console.log(`today: ${today}, fecha_inicial: ${fecha_inicial}, fecha_final: ${fecha_final}`);
            $("#filter_fecha").datepicker("option", "minDate", fecha_inicial);
            $("#filter_fecha").datepicker("option", "maxDate", fecha_final);
            $("#filter_fecha").datepicker("setDate", today <= fecha_final ? today : fecha_final);
        <?php
        }
        ?>

        makeRequiredDatalist("#filter_fecha", true);
        // send fecha, hora_inicio, hora_fin, nombre
        $(document).on('click', '#main-button', async function() {
            // check required fields
            if (!validateDatalist("#filter_fecha") || $("[required]").filter(function() {
                    return this.value == "";
                }).length > 0) {
                triggerMessage("Faltan campos por llenar", "Error de datos");
                return;
            }

            // validar horas de inicio y fin unless si la hora final no está vacía

            var hora_inicio = $("#filter_hora_inicio").val();
            var hora_fin = $("#filter_hora_fin").val();
            if (hora_fin != "") {
                if (hora_inicio > hora_fin) {
                    triggerMessage("La hora de inicio debe ser menor a la hora de fin", "Error de datos");
                    return;
                }
            }
            var periodo = $("#periodo").val();
            // send serialized data and periodo

            // button suspense 
            let btn = $(this).html();
            $("#main-button").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Cargando...');
            $("#main-button").attr("disabled", true);

            await $.post(
                'action/action_profesor_faltas.php', {
                    fecha: $("#filter_fecha").val(),
                    hora_inicio: hora_inicio,
                    hora_fin: hora_fin,
                    // remove leading zeros from clave after replace(/[a-zA-Z]{2}/, '') to remove the first two letters
                    clave: $("#filter_clave").val().replace(/[a-zA-Z]{2}/, '').replace(/^0+/, ''),
                    nombre: $("#filter_nombre").val(),
                    periodo: periodo
                },
                function(data) {
                    console.log(data);
                    if (data.length > 0) {
                        var table = $("#visible");
                        table.empty();
                        $('#check').prop('checked', false);
                        $('#justificar-btn').addClass('disabled');

                        data.forEach(function(row) {
                            // hora is hh:mm
                            hora = row.hora.split(":");
                            hora = `${hora[0]}:${hora[1]}`;
                            // nombre is scentence case
                            nombre = row.profesor.split(" ");
                            nombre = nombre.map(function(word) {
                                return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
                            }).join(" ");
                            table.append(
                                `<tr id="${row.id}">
                                    <td>
                                        <input class="radio-md prof" type="checkbox" name="check" value="${row.profesor_id}">
                                    </td>
                                    <td>${row.clave}</td>
                                    <td>${nombre}</td>
                                    <td>${hora}</td>
                                    <td>${row.materia}</td>
                                    <td>${row.grupo}</td>
                                    <td>${row.horario_salon}</td>
                                </tr>`
                            );
                        });

                        $(".main-table").show();


                        var btn = $("#justificar-btn");
                        var btnPos = btn.offset().top;

                        var table = $("#main-table");
                        var tablePos = table.offset().top;

                        var windowHeight = $(window).height();
                        if (btnPos > windowHeight) {
                            $("#scroll-down").show();
                        } else {
                            $("#scroll-down").hide();
                        }


                        // make table responsive
                        $("table").wrap("<div class='table-responsive'></div>");

                    } else {
                        triggerMessage("No se encontraron resultados", "Sin resultados", "warning");
                        $(".main-table").hide();
                    }
                }, 'json'
            )

            // button suspense
            $("#main-button").html(btn);
            $("#main-button").attr("disabled", false);

        });

        $(document).on('change', '#check', function() {
            if (this.checked) {
                $("input[name='check']").prop("checked", true);
            } else {
                $("input[name='check']").prop("checked", false);
            }
        });

        // if at least one checkbox is checked, remove .disabled from #justificar-btn
        $(document).on('change', 'input[name="check"]', function() {
            if ($(".prof[name='check']:checked").length > 0) {
                $("#justificar-btn").removeClass("disabled");
            } else {
                $("#justificar-btn").addClass("disabled");
                $('#check').prop('checked', false);
            }
        });

        // if no checkboxes are checked, add .disabled to #justificar-btn and uncheck #check
        $(document).on('click', '#justificar-btn', function() {
            if ($(".prof[name='check']:checked").length == 0) {
                $("#justificar-btn").addClass("disabled");
            }
        });


        $(document).on('click', '#scroll-down', function() {
            $('html, body').animate({
                scrollTop: $("#justificar-btn").offset().top
            }, 500);
        });

        $(document).on('click', '#scroll-up', function() {
            $('html, body').animate({
                scrollTop: 0
            }, 500);
        });

        // send fecha, hora_inicio, hora_fin y cada clave seleccionada
        $(document).on('click', '#justificar-btn', function() {
            // unless .disabled
            if ($(this).hasClass("disabled"))
                return;

            // check required fields
            if (!validateDatalist("#filter_fecha") || $("[required]").filter(function() {
                    return this.value == "";
                }).length > 0) {
                triggerMessage("Faltan campos por llenar", "Error de datos");
                return;
            }

            // validar horas de inicio y fin
            var hora_inicio = $("#filter_hora_inicio").val();
            var hora_fin = $("#filter_hora_fin").val();
            if (hora_fin == '') hora_fin = hora_inicio; // if hora_fin is empty, set it to hora_inicio

            if (hora_inicio > hora_fin) {
                triggerMessage("La hora de inicio debe ser menor a la hora de fin", "Error de datos");
                return;
            }

            var claves = [];
            $("input.prof[name='check']:checked").each(function(index, data) {
                // if is the first element, continue
                claves.push({
                    clave: this.value,
                    id: $(this).parent().parent().attr("id"),
                    hora: $(this).parent().next().next().next().text(),
                });
            });

            // return

            $.post(
                'action/action_justificar.php', {
                    fecha: $("#filter_fecha").val(),
                    claves: claves
                },
                function(data) {
                    if (data.success) {
                        triggerMessage("Se han justificado las faltas", "Éxito", "success");
                        $("#main-table").hide();
                    } else
                        triggerMessage("No se han podido justificar las faltas", "Error");

                    // reset form
                    $("input[name='check']").prop("checked", false);
                    $("#justificar-btn").addClass("disabled");

                    // hide table
                    $(".main-table").hide();
                }, 'json'
            );
        });

        // on scroll and if the position of #justificar-btn is the scrolled position, hide #scroll-down
        $(window).scroll(function() {
            var btnPos = $("#justificar-btn").offset().top - $(window).height();

            var currentPos = $(window).scrollTop();
            if (currentPos < btnPos)
                $("#scroll-down").show();
            else
                $("#scroll-down").hide();
            // console.log(`
            //     btnPos: ${btnPos}
            //     currentPos: ${currentPos}
            //     tablePos: ${tablePos}
            // `);

            // if not on top, show #scroll-up
            if (currentPos > 0)
                $("#scroll-up").show();
            else
                $("#scroll-up").hide();
        });
    </script>
</body>

</html>