@extends('layout.master')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/login.css') }}" />
@endsection

@section('content')
    <main class="page-main">


        <div class="bodyfull">
            <div class="uk-section uk-flex uk-flex-middle uk-animation-fade" uk-height-viewport="expand: true">
                <div class="uk-width-1-3@m uk-width-1-2@s uk-margin-auto">
                    <div class="uk-card uk-card-default uk-card-body uk-box-shadow-large loginnuevo">
                        <h3 class="uk-card-title uk-text-center">Iniciar Sesión</h3>

                        <!-- Formulario de Login -->
                        <form id="loginForm">
                            @csrf
                            <!-- Campo de Correo -->
                            <div class="uk-margin">
                                <label for="email" class="uk-form-label">Correo Electrónico</label>
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon">
                                        <i class="fas fa-envelope"></i>
                                    </span>
                                    <input class="uk-input" id="email" type="email" name="email" required
                                        placeholder="example@dominio.com">
                                </div>
                                <small id="emailError" class="text-danger" style="display: none;">Correo inválido.</small>
                            </div>

                            <!-- Campo de Contraseña para Iniciar Sesión -->
                            <div class="uk-margin">
                                <label for="password" class="uk-form-label">Contraseña</label>
                                <div class="uk-inline uk-width-1-1" style="position: relative;">
                                    <span class="uk-form-icon">
                                        <i class="fas fa-lock"></i>
                                    </span>
                                    <input class="uk-input" id="password" type="password" name="password" required
                                        placeholder="Tu contraseña...">
                                    <span class="toggle-password"
                                        style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%); cursor: pointer;">
                                        <i class="fa fa-eye"></i>
                                    </span>
                                </div>
                            </div>




                            <div class="uk-margin olvidocontraseña">
                                <a href="{{ url('/recuperarpassword') }}" class="uk-link-reset">¿Olvidaste tu
                                    contraseña?</a>
                            </div>

                            <!-- Botón de Enviar -->
                            {{-- <div class="uk-margin btnlogin">
                                <button type="button" onclick="loginev(event)" class="uk-button uk-button-primary uk-width-1-1">Iniciar Sesión</button>
                            </div> --}}

                            <div class="uk-margin btnlogin">
                                <!-- Cambiamos el tipo a submit y removemos el onclick -->
                                <button type="submit" class="uk-button uk-button-primary uk-width-1-1">Iniciar
                                    Sesión</button>
                            </div>
                        </form>

                        <hr class="uk-divider-icon">

                        <!-- Enlace para Registrarse -->
                        <p class="uk-text-center">¿No tienes cuenta? <a href="/registrar">Regístrate aquí</a>.</p>
                    </div>
                </div>
            </div>
        </div>

        <script>
            document.querySelectorAll('.toggle-password').forEach(item => {
                item.addEventListener('click', function() {
                    let input = this.previousElementSibling; // El campo de contraseña anterior al ícono
                    let icon = this.querySelector('i'); // El ícono del ojo

                    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>

        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            function togglePasswordVisibility() {
                var passwordField = document.getElementById("password");
                var eyeIcon = document.getElementById("eyeIcon");
                if (passwordField.type === "password") {
                    passwordField.type = "text";
                    eyeIcon.classList.remove("fa-eye");
                    eyeIcon.classList.add("fa-eye-slash");
                } else {
                    passwordField.type = "password";
                    eyeIcon.classList.remove("fa-eye-slash");
                    eyeIcon.classList.add("fa-eye");
                }
            }

            function isValidEmail(email) {
                const re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
                return re.test(email);
            }

            document.getElementById('loginForm').addEventListener('submit', function(e) {
                // Llama a tu función loginev pasando el evento
                loginev(e);
            });

            function loginev(e) {
                e.preventDefault(); // Detener el comportamiento predeterminado del botón

                // Validar el correo antes de enviar
                const email = document.getElementById("email").value;
                const password = document.getElementById("password").value;

                if (!isValidEmail(email)) {
                    document.getElementById("emailError").style.display = "block";
                    return;
                } else {
                    document.getElementById("emailError").style.display = "none";
                }

                if (password.length < 8) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Contraseña demasiado corta',
                        text: 'La contraseña debe tener al menos 8 caracteres.',
                        timer: 3000,
                        showConfirmButton: false
                    });
                    return;
                }

                // Mostrar el loader mientras se procesa la petición
                Swal.fire({
                    title: 'Procesando...',
                    text: 'Por favor, espera mientras procesamos tu inicio de sesión.',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading()
                    }
                });

                // Datos del formulario
                var formData = {
                    email: $('#email').val(),
                    password: $('#password').val(),
                    url: '{{ $redirectTo }}',
                    _token: '{{ csrf_token() }}'
                };

                // Enviar datos vía AJAX
                $.ajax({
                    type: 'POST',
                    url: '/aulavirtuallogin',
                    data: formData,
                    success: function(response) {
                        // Cuando el login es exitoso
                        Swal.fire({
                            icon: 'success',
                            title: '¡Inicio de sesión exitoso!',
                            text: 'Redirigiendo...',
                            timer: 2000,
                            showConfirmButton: false
                        }).then(function() {
                            window.location.href = "/aulavirtual/miscursos"; // Redirigir a la ruta correcta
                        });
                    },
                    error: function(response) {
                        // Si hay un error (email o contraseña incorrectos)
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.responseJSON.error,
                            timer: 3000,
                            showConfirmButton: false
                        });
                    }
                });
            }
        </script>
    </main>
@endsection