<?php
if (isset($_GET["error"]) && is_numeric($_GET["error"])) {
    switch ($_GET["error"]) {
        case 0:
            $errorDesc = "No se reciberon datos.";
            break;
        case 1:
            $errorDesc = "El usuario y/o contraseña son incorrectos.";
            break;
        case 2:
            $errorDesc = "El usuario no tiene permisos de ingresar.";
            break;
        case 3:
            $errorDesc = "El usuario y/o contraseña son incorrectos.";
            break;
    }
}
?>
<!DOCTYPE html>
<html lang="es" prefix="og: http://ogp.me/ns#">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>.: Administrador de checador :.</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="image/png" href="imagenes/favicon.png" />
    <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/sgi.css?rand=<?= rand() ?>" type="text/css">
    <link rel="stylesheet" href="css/index.css" type="text/css">

<body>
    <!-- HEADER -->
    <?php include "import/html_header.php";
    html_header("Checador inicio de sesión"); ?>
    <main class="container-fluid content d-flex justify-content-center align-items-center">
        <div class="logSize p-5 bg-white defaultShadow">
            <div class="row mb-4">
                <div class="col-sm-12">
                    <h1 class="mb-1">Iniciar sesión</h1>
                </div>
            </div>
            <form method="post" action="action/force_session.php" id="session">
                <div class="row user">
                    <div class="col">
                        <p class="text-center font-weight-bold text-info">Utiliza tu usuario y contraseña institucionales</p>
                    </div>
                </div>
                <div class="form-group row user">
                    <div class="input-group px-4">
                        <div class="input-group-prepend secondary">
                            <div class="input-group-text bg-primary text-white"><i class="ing-usuario ing-fw"></i></div>
                        </div>
                        <input class="form-control form-control-lg" type="text" autocomplete="username" placeholder="Usuario (ad)" id="username" name="username" value="" autofocus="true" maxlength="10" />
                    </div>
                </div>
                <div class="form-group row user">
                    <div class="input-group mb-2 px-4">
                        <div class="input-group-prepend">
                            <div class="input-group-text bg-primary text-white"><i class="ing-pass ing-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>
                <!-- Usuario -->
                <div class="form-group row" id="cold-bypass">
                    <div class="input-group mb-2 px-4">
                        <div id="dlUsuario" class="datalist datalist-select mb-1 w-100">
                            <div class="datalist-input">Selecciona un usuario</div>
                            <span class="ing-buscar icono"></span>
                            <ul style="display:none">

                            </ul>
                            <input type="hidden" id="user" name="usuario" value="">
                        </div>
                    </div>
                </div>
                <div class="error">
                    <?php if (isset($_GET["error"])) { ?>
                        <p class="text-danger text-center font-weight-bold">¡ERROR! <?= $errorDesc ?></p>
                    <?php } ?>
                </div>
                <p class="text-center">
                    <button type="submit" class="btn btn-lg btn-outline-primary btn-ing arrow">Ingresar</button>
                </p>
            </form>
        </div>
    </main>
    <!--- FOOTER--->
    <?php require_once("import/html_footer.php"); ?>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script src="js/bootstrap/popper.min.js"></script>
    <script src="js/sidebarmenu.js"></script>
    <script src="js/datalist.js"></script>
    <script>
        $("#cold-bypass").hide();
        // on submit, prevent default
        $("#session").submit(function(e) {
            if ($("#user").val() != "") {
                $(this).unbind('submit').submit();
                return;
            }
            e.preventDefault();
            // dlUsuario has a value force session and redirect to main.php
            // get the form data
            var formData = {
                'username': $('input[name=username]').val(),
                'passwd': $('input[name=passwd]').val(),
            };

            $.post("action/action_usuario.php", formData, function(data) {
                console.log(data);
                $(".error").html("");
                if (data == "error") {
                    $(".error").html("<p class='text-danger text-center font-weight-bold'>¡ERROR! El usuario y/o contraseña son incorrectos.</p>");
                    return;
                }
                $("#cold-bypass").show();
                data.forEach(function(element) {
                    // console.log(element);
                    $("#dlUsuario ul").append(`<li class="not-selectable" data-id="${element.id}">${element.facultad}</li>`);
                    element.usuarios.forEach(function(usuario) {
                        $("#dlUsuario ul").append(`<li data-id="${usuario.id}">${usuario.username}</li>`);
                    });
                });

                // hide username and password
                $(".user").hide();

            }, 'json');
        });
    </script>

</body>

</html>