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

?>
<!DOCTYPE html>

<head>
    <title>Registros checador | Facultad de derecho</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../css/bootstrap-ulsa.min.css" type="text/css">
    <link rel="stylesheet" href="../css/indivisa.css" type="text/css">
    <link rel="stylesheet" href="../css/fa_all.css" type="text/css">
    <link rel="stylesheet" href="../css/style.css" type="text/css">

</head>

<body style="display: block;">
    <?php
    include("../include/header.php");
    ?>

    <main class="container content-margin">
        <!--
            <div class="row justify-content-md-center" id="login" >
                <div class="col-12 col-md-6 box">
                    <div class="modal-header">
                        <h4 class="col-12 modal-title text-center">Últimos registros</h4>
                    </div>
                    <div class="">
                        <form method="post" action="#" id="formLogin" onsubmit="return false">
                            <div class="row">
                                <div class="col">
                                    <p class="text-center font-weight-bold text-primary">Utiliza tu usuario y contraseña de dominio</p>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="input-group px-4">
                                    <div class="input-group-prepend secondary">
                                        <div class="input-group-text bg-primary text-white"><i class="fas fa-user fa-fw"></i></div>
                                    </div>
                                    <input class="form-control form-control-lg" type="text" autocomplete="username" placeholder="Usuario (ad ó do)" id="username" name="username" value="" autofocus="true" maxlength="10">
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="input-group mb-2 px-4">
                                    <div class="input-group-prepend text-secondary">
                                        <div class="input-group-text bg-primary text-white"><i class="fas fa-unlock-alt fa-fw"></i></div>
                                    </div>
                                    <input class="form-control form-control-lg" type="password" autocomplete="current-password" placeholder="Contraseña" id="passwd" name="passwd" value="" maxlength="50">
                                </div>
                            </div>
                            <div class="row d-none" id="errorLogin">
                                <div class="col-12">
                                    <p class="text-danger text-center font-weight-bold"></p>
                                </div>
                            </div>
                            <div class="row justify-content-md-center">
                                <div class="col-6">
                                    <button type="submit" class="btn btn-lg btn-block btn-secondary" id="btn-login"><span class="fas fa-check fa-fw"></span> Ingresar</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>-->
        <!-- ./login -->

        <h2 class="my-4">Últimos registros</h2>
        <div class="row justify-content-md-center" id="tabla-accesos">
            <!--<div class="col-12">
                    <p class="text-right"><a href="" class="btn btn-info"><span class="fas fa-power-off"></span> Salir</a></p>
                </div>-->
            <div class="col-12 col-md-9 table-responsive table-striped">
                <table class="table table-sm table-hover mt-2">
                    <thead class="thead-dark">
                        <tr>
                            <th>Fecha</th>
                            <th>Clave</th>
                            <th>Profesor</th>
                            <th>Estatus</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tbody id="table-result">
                        <tr class="log-row">
                            <td class="log-fecha text-monospace"></td>
                            <td class="log-clave text-monospace text-right"></td>
                            <td class="log-prof text-uppercase"></td>
                            <td class="log-status"></td>
                        </tr>
                    </tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </main><!-- ./container -->

    <?php
    include("../include/footer.php");
    ?>

    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap/popper.min.js"></script>
    <script src="../js/bootstrap/bootstrap.min.js"></script>
    <script>
        var _reloadTime = 15; //en segundos
        $(document).ready(function() {
            actualilzaLog();
            timer(_reloadTime);
        });

        function timer(tiempo = 0) {
            if (tiempo > 0) {
                setTimeout(actualilzaLog, tiempo * 1000);
            }
        }

        function actualilzaLog() {
            $.ajax({
                url: 'read_logfile.php',
                type: 'POST',
                dataType: 'json',
                //data: { id: _grupo_id, check: strCheck},
                success: function(result) {
                    if (result["result"] == false) {
                        alert("Error al guardar el horario.\n" + result["error"]);
                    } else {
                        var rows = $("#table-result > tr").length; //limpia tabla actual
                        if (rows > result["log"].length) { //sobran
                            //borrar renglones extra (rows - result.length) pero dejar al menos 1
                            while (rows > result["log"].length && rows > 1) {
                                $(".log-row:last-child").remove();
                                rows--;
                            }
                        } else { //faltan, clonar
                            for (var i = rows; i < result["log"].length; i++) {
                                $(".log-row:first-child").clone(true).appendTo("#table-result");
                            }
                        }
                        if (result["log"].length != 0) { //hay elementos?
                            $("#table-result").children().each(function(index) {
                                if (index < result["log"].length) { //llenar info
                                    $(this).find(".log-fecha").html(result["log"][index]["fecha"]);
                                    $(this).find(".log-clave").html(result["log"][index]["clave"]);
                                    $(this).find(".log-prof").html(result["log"][index]["prof"]);
                                    $(this).find(".log-status").html(result["log"][index]["status"]);

                                    $(this).find(".log-status").removeClass("text-success");
                                    $(this).find(".log-status").removeClass("text-primary");
                                    $(this).find(".log-status").removeClass("text-danger");

                                    if (result["log"][index]["status"] == "Registrada") {
                                        $(this).find(".log-status").addClass("text-success");
                                    } else if (result["log"][index]["status"].indexOf("Duplicada") !== -1) {
                                        $(this).find(".log-status").addClass("text-primary");
                                    } else {
                                        $(this).find(".log-status").addClass("text-danger");
                                    }
                                }
                            });
                        }
                    } //sin error
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $("#errorBox_text").html(errorThrown);
                }
            }); //ajax
            timer(_reloadTime);
        }
    </script>
</body>

</html>