<?php
require_once "./app/functions.php";
$pag = basename($_SERVER['PHP_SELF']);
//Comprobar si tiene sesión iniciada y redireccionar
if (session_status() !== PHP_SESSION_ACTIVE) session_start();
if (isset($_SESSION['id_usuario']))
    header("Location:" . SITIO_CARPETA . "/views/tables/fichajes");
gen_plantilla(false, $pag, true, true, 'Iniciar sesión', true, true);
?>
<section class="cristal" style="margin-top: 4rem;">
    <h1>Inicia sesión</h1>
    <p><span class="rojo">*</span> Para acceder al área privada, por favor inicia sesión.</p>
    <form id="login" method="POST" action="app/forms/comprobar_login" class="flex column gap2 justificado">
        <label class="flex column">
            <span>Nombre</span>
            <input type="text" name="nombre" id="nombre" title="Introduce el nombre de usuario" required autofocus />
        </label>
        <section class="flex column" id="campocontra">
            <label>Contraseña
                <section class="flex row" style="align-items: stretch;">
                    <input type="password" name="password" id="contraseña" title="Introduce la contraseña" required>
                    <button id="mostrarcontra" type="button" onclick="mostrarContrasena()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 512" title="Mostrar contraseña">
                            <path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2
                                25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7
                                0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1
                                149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3
                                10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4
                                19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6
                                1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5
                                443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z" />
                        </svg>
                    </button>
                </section>
            </label>
        </section>
        <section class="flex alineado justificado">
            <button class="btn-p" id="iniciarsesion" name="iniciarsesion" type='submit'>Iniciar sesión</button>
            <input type="hidden" name="recaptcha_token" id="recaptcha_token">
            <input type="hidden" name="recaptcha_action" id="recaptcha_action" value="login">
        </section>
        <?php
        if (isset($_GET["error"])) {
            echo "<section id='notificar' class='fallo'>";
            echo '<span><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" class="blanco">
                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7
                24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
                ' . $_GET['error'] . '</span>';
            echo "</section>";
        }
        ?>
    </form>
    <a class="flex row" onclick="cambiar_modo_claro_oscuro()" id="claro-oscuro" title="Cambiar modo claro y oscuro" style="position: absolute; right:0;bottom:2rem; padding:1rem; border-top-left-radius:50%; border-bottom-left-radius:50%;">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
            <path d="M512 320C512 214 426 128 320 128L320 512C426 512 512 426 512 320zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320z" />
        </svg>
    </a>
</section>
<script src="https://www.google.com/recaptcha/enterprise.js?render=<?= RECAPTCHA_CLAVE ?>"></script>
<script>
    const SITE_KEY = '<?= RECAPTCHA_CLAVE ?>';
    const ACTION = '<?= RECAPTCHA_ACTION_LOGIN ?>';

    const form = document.getElementById('login');
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        grecaptcha.enterprise.ready(function() {
            grecaptcha.enterprise.execute(SITE_KEY, {
                action: ACTION
            }).then(function(token) {
                document.getElementById('recaptcha_token').value = token;
                document.getElementById('recaptcha_action').value = ACTION;
                form.submit();
            });
        });
    });

    function mostrarContrasena() {
        var tipo = document.getElementById("password");
        var ojo = document.getElementById("mostrarcontra");
        if (tipo.type == "password") {
            tipo.type = "text";
            ojo.style.backgroundColor = "#c70039";
            ojo.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 576 512" title="Ocultar contraseña"><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/></svg>';

        } else {
            tipo.type = "password";
            ojo.style.backgroundColor = "";
            ojo.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 512" title="Mostrar contraseña"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z" /></svg>';
        }
    }

    function cambiar_modo_claro_oscuro() {
        const root = document.documentElement;
        const actual = getComputedStyle(root).colorScheme;
        let tema = root.getAttribute('data-theme');
        if (tema) {
            if (actual.includes('dark') && !actual.includes('light')) {
                root.style.colorScheme = 'light';
                root.setAttribute('data-theme', 'light');
                actualizar_conf('iniciar_sesion_tema', 'light');
                localStorage.setItem('theme', root.style.colorScheme);
            } else {
                root.style.colorScheme = 'dark';
                root.setAttribute('data-theme', 'dark');
                actualizar_conf('iniciar_sesion_tema', 'dark');
                localStorage.setItem('theme', root.style.colorScheme);
            }
        } else {
            root.style.colorScheme = 'light';
            root.setAttribute('data-theme', 'light');
            actualizar_conf('iniciar_sesion_tema', 'light');
            localStorage.setItem('theme', root.style.colorScheme);
        }
    }

    function actualizar_conf(meta, valor) {
        ajax('forms/actualizar_configuracion', 'notificaciones', 'conf=' + meta + '&valor=' + valor, [])
    }
</script>
<? footer(false) ?>