<?php require __DIR__ . '/../../includes/navbar.php'; ?>

<div class="container-fluid vh-100 d-flex align-items-center justify-content-center">
    <div class="row mx-0 login-box">

        <!-- IZQUIERDA -->

        <div class="col-lg-6 col-md-6 d-flex flex-column justify-content-center text-white p-5"
            style="background: linear-gradient(135deg, #0f172a, #1e3a5f, #3b82b8); border-radius: 16px 0 0 16px;">

            <div class="text-center mb-4">
                <img src="imgs/logo.png" style="width: 120px;">
            </div>

            <h1 class="fw-bold text-center text-white">
                <a href="?opt=login" class="text-decoration-none fw-semibold text-white">
                    ByteCenter
                </a>
            </h1>

            <p class="mt-3 fs-5 text-center">
                Establezca una nueva contraseña.
            </p>
        </div>

        <!-- DERECHA -->

        <div class="col-lg-6 col-md-6 d-flex align-items-center p-5 bg-white"
            style="border-radius: 0 16px 16px 0;">
            
            <div class="w-100">

                <h4 class="text-center mb-4">Nueva Contraseña</h4>

                <form method="POST" action="?opt=restablecer_contrasenia" novalidate>

                    <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?>">

                    <!-- PASSWORD -->

                    <div class="position-relative mb-3">

                        <div class="form-floating">
                            <input 
                                type="password"
                                name="password"
                                class="form-control pe-5"
                                id="passwordInput"
                                placeholder="Nueva contraseña"
                                required
                            >

                            <label for="passwordInput">
                                Nueva contraseña
                            </label>
                        </div>

                        <button
                            type="button"
                            class="btn-toggle-password"
                            data-target="passwordInput"
                        >
                            <i class="fas fa-eye"></i>
                        </button>

                    </div>

                    <!-- CONFIRMAR -->

                    <div class="position-relative mb-4">

                        <div class="form-floating">
                            <input 
                                type="password"
                                name="confirmar_password"
                                class="form-control pe-5"
                                id="confirmPasswordInput"
                                placeholder="Confirmar contraseña"
                                required
                            >

                            <label for="confirmPasswordInput">
                                Confirmar contraseña
                            </label>
                        </div>

                        <button
                            type="button"
                            class="btn-toggle-password"
                            data-target="confirmPasswordInput"
                        >
                            <i class="fas fa-eye"></i>
                        </button>

                    </div>

                    <!-- BOTON -->

                    <button type="submit" class="btn btn-success btn-lg w-100">
                        Guardar nueva contraseña
                    </button>

                </form>

                <!-- ERROR -->

                <script>
                    const serverErrors = <?php 
                        if (!empty($_SESSION['flash_error'])) {
                            $errorsArray = explode('<br>', $_SESSION['flash_error']);
                            unset($_SESSION['flash_error']);
                            echo json_encode($errorsArray);
                        } else {
                            echo '[]';
                        }
                    ?>;
                </script>

                <!-- SUCCES -->

                <script>
                    const serverSuccess = <?php
                        if (!empty($_SESSION['flash_success'])) {
                            $successArray = explode('<br>', $_SESSION['flash_success']);
                            unset($_SESSION['flash_success']);
                            echo json_encode($successArray);
                        } else {
                            echo '[]';
                        }
                    ?>;
                </script>

            </div>
        </div>
    </div>
</div>

<script src="js/login/logInValidator.js"></script>

<script>

    document.querySelectorAll(".btn-toggle-password").forEach(button => {

        button.addEventListener("click", () => {

            const input = document.getElementById(button.dataset.target);
            const icon = button.querySelector("i");

            if (input.type === "password") {

                input.type = "text";

                icon.classList.remove("fa-eye");
                icon.classList.add("fa-eye-slash");

            } else {

                input.type = "password";

                icon.classList.remove("fa-eye-slash");
                icon.classList.add("fa-eye");
            }
        });
    });

</script>