<?php
header('Expires: Sun, 01 Jan 2014 00:00:00 GMT');
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', false);
header('Pragma: no-cache');

date_default_timezone_set('America/Mexico_City');
require_once 'include/bd_pdo.php';
$admin_password = '7ipgl3fp03l03fa7j6l8';
?>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sistema de auditoría asistencial</title>
    <link rel="icon" href="imagenes/favicon.ico" />
    <link rel="stylesheet" href="./css/bootstrap-ulsa.min.css">
    <link rel="stylesheet" href="./css/indivisa.css">
    <link rel="stylesheet" href="./css/checador.css">
</head>

<body>
    <header class="py-4 px-4 text-white">
        <div class="d-flex">
            <div class="my-auto mr-auto"><img id="logo" src="./imagenes/lasalle-blanco.svg" alt="La Salle"
                    class="img-fluid" /></div>
            <div class="my-auto hora pr-3 text-nowrap text-left indivisa-display"><span id="hr">00</span>:<span
                    id="min">00</span> h</div>
            <div class="my-auto ml-4 fecha text-left"><span id="fecha">00 xxx</span><br><span id="ano"
                    class="indivisa-display-italic">20XX</span></div>
        </div>
    </header>
    <main class="d-flex flex-row justify-content-around">
        <div id="registro" class="sub-bloque w-100">
            <div class="d-flex flex-row justify-content-between align-items-start h-100 pl-3 pr-5 pt-5">
                <img src="imagenes/registrar.svg" alt="registrar" class="align-self-end mr-4 iconos" id="icon_registro">
                <div class="flex-grow-1 d-flex flex-row justify-content-center align-items-start">
                    <form class="checa-box" id="formaChecador" autocomplete="off">
                        <div class="text-primary indivisa-text-black text-center mb-5 text-big titRegistro">Registro de
                            asistencia</div>
                        <div class="input-group inputChecar mx-auto">
                            <input type="text" id="cve" placeholder="Clave de empleado" class="form-control text-center"
                                autofocus="" autocomplete="off" maxlength="6">
                            <div class="input-group-append">
                                <button type="submit" id="btnChecar" class="btn btn-primary">Checar</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div id="result_ok" class="sub-bloque d-none w-100">
            <div id="estado" class="d-flex flex-row justify-content-between align-items-start h-100 pl-3 pr-5 pt-5">
                <img src="imagenes/asistencia.svg" alt="registrar" class="align-self-end mr-4 iconos" id="icon_asistencia">
                <div class="flex-grow-1 d-flex flex-row justify-content-center align-items-start">
                    <div class="checa-box">
                        <div class="indivisa-text-black text-center text-big mb-4">Asistencia</div>
                        <h3 class="indivisa-text-bold subtitle text-center text-uppercase" id="nombre">Nombre</h3>
                        <ul class="text-danger" id="list-result">
                            <h4 class="text-secondary indivisa-text-bold  mb-3 mt-4 text-info text-uppercase">Facultad
                            </h4>
                            <li class="">
                                <span class="text-secondary font-weight-bold text-uppercase mat-desc">Materia</span><br>
                                <span class="text-secondary mat-fecha font-weight-bold">hh:mm</span>
                                <br>
                                <span class="text-secondary mat-salon ml-3">SALÓN: <span class="salon">SAL</span></span>
                                <span class="text-secondary ml-3">GRUPO: <span class="mat-gpo">GPO</span></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="result_no" class="sub-bloque d-none w-100">
            <div id="estado" class="d-flex flex-row justify-content-between align-items-start h-100 pl-3 pr-5 pt-5">
                <img src="imagenes/no_horario.svg" alt="no_horario" class="align-self-end mr-4 iconos" id="icon_horario">
                <div class="flex-grow-1 d-flex flex-row justify-content-center align-items-start">
                    <div class="checa-box">
                        <div class="text-center text-big indivisa-text-black text-primary my-4" id="nombre"><strong
                                class="text-danger">No</strong> tienes clases en este horario</div>
                        <div class="text-center sin-servicio">No hay ninguna clase registrada en este horario para
                            <h3 id="nombre-profesor" class="indivisa-text-bold my-3"></h3>
                            <h6 class="indivisa-text-italic mt-5"><strong class="text-danger">Recuerda:</strong> Solo se
                                puede registrar entre <strong class="text-secondary"><?php echo $_ENV["ANTES"]; ?> </strong> minutos antes y <strong
                                    class="text-secondary"><?php echo $_ENV["DESPUES"]; ?></strong> minutos después.</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="internet" class="sub-bloque d-none w-100">
            <div id="estado" class="d-flex flex-row justify-content-between align-items-start h-100 pl-3 pr-5 pt-5">
                <img src="imagenes/no_internet.svg" alt="no_internet" class="align-self-end mr-4 iconos" id="icon_internet">
                <div class="flex-grow-1 d-flex flex-row justify-content-center align-items-start">
                    <div class="checa-box">
                        <div class="text-big indivisa-text-black text-center">Se perdió la conexión a internet</div>
                        <h4 class="text-secondary text-center sin-servicio my-5">Por el momento la conexión a internet
                            está fallando, por favor inténtelo más tarde.</h4>
                        <!-- Código de error: <span class="clave font-weight-bold">000</span> -->
                        <div class="text-center">
                            <div class="spinner-grow text-warning" role="status"><span class="sr-only">Loading...</span>
                            </div>
                            <em class="text-info">Conectando</em>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="error_bd" class="sub-bloque d-none w-100">
            <div id="estado" class="d-flex flex-row justify-content-between align-items-start h-100 pl-3 pr-5 pt-5">
                <img src="imagenes/error.svg" alt="error" class="align-self-end mr-4 iconos" id="icon_error">
                <div class="flex-grow-1 d-flex flex-row justify-content-center align-items-start">
                    <div class="checa-box">
                        <div class="text-big text-center indivisa-text-black text-danger mb-5">Error en el sistema</div>
                        <h4 class="text-secondary text-center sin-servicio">Se ha presentado un error en el sistema, por
                            favor inténtelo más tarde y repórtelo al <strong>CAS</strong>.</h4>
                    </div>
                </div>
            </div>
        </div>
        <div id="not_in_db" class="sub-bloque d-none w-100">
            <div id="estado" class="d-flex flex-row justify-content-between align-items-start h-100 pl-3 pr-5 pt-5">
                <img src="imagenes/no_clave.svg" alt="no_clave" class="align-self-end mr-4 iconos" id="icon_clave">
                <div class="flex-grow-1 d-flex flex-row justify-content-center align-items-start">
                    <div class="checa-box">
                        <div class="indivisa-text-black subtitle mb-5 text-center text-big">La clave <strong
                                class="text-danger" id="clave-no-encontrada"></strong> no está registrada</div>
                        <h4 class="text-center mb-4">Revisa que la clave sea la correcta</h4>
                        <div class="text-center indivisa-text-italic text-info">No se pudo registrar asistencia</div>
                    </div>
                </div>
            </div>
        </div>
        <div id="avisos" class="sub-bloque d-none w-100">
            <div id="estado" class="d-flex flex-row justify-content-between align-items-start h-100 pl-3 pr-5 pt-5">
                <img src="imagenes/aviso.svg" alt="aviso" class="align-self-end mr-4 iconos" id="icon_avisos">
                <div class="flex-grow-1 d-flex flex-row justify-content-center align-items-start">
                    <div class="checa-box">
                        <div class="indivisa-text-black subtitle mb-4 text-big">Avisos</div>
                        <div class="text-secondary" id="lista-avisos"></div>
                        <div class="text-center mt-4"><button type="button" class="btn btn-success"
                                id="btn-aceptar-avisos">Aceptar</button></div>
                    </div>
                </div>
            </div>
        </div>
        <p id="last-error" class="d-none">-</p>
    </main>
    <script>
        var d, h, m, s, animate;
        var started_at = new Date().getTime();
        var server_time = <?= time(); ?>;
        var ultimosMax = 6;
    </script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap/popper.min.js"></script>
    <script src="./js/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/checador.js"></script>
    <script>
        $(document).ready(function () {
            init();
        });
    </script>
</body>

</html>