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

        <!-- COLUMNA 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" alt="ByteCenter" 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">Bienvenido de nuevo!
                <br>Inicie sesión para continuar.
            </p>

        </div>

        <!-- COLUMNA DERECHA (FORMULARIO) -->

        <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-5">Iniciar Sesión</h4>

                <!-- FORMULARIO -->

                <form method="POST" id="form-login" action="?opt=login" novalidate>

                    <div class="form-floating mb-4">
                        <input type="text" name="usuario" 
                            class="form-control input-lg" 
                            id="floatingUserInput" 
                            placeholder="Nombre de Usuario">
                        <label for="floatingUserInput">Usuario</label> 
                    </div>

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

                        <div class="form-floating">
                            <input 
                                type="password" 
                                name="password"
                                class="form-control input-lg pe-5"
                                id="floatingPasswordInput"
                                placeholder="Contraseña"
                            >

                            <label for="floatingPasswordInput">
                                Contraseña
                            </label>
                        </div>

                        <!-- BOTÓN OJO -->

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

                    </div>

                    <div class="text-center mt-3">
                        <a href="?opt=recuperar_cuenta" class="text-decoration-none fw-semibold">
                            Olvidé mi contraseña
                        </a>
                    </div>

                    <button type="submit" class="btn btn-primary w-100 btn-lg mt-3">
                        Entrar
                    </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>

<!-- Validar mediante js -->

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

<!-- Ojo de contrasenia -->

<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>