@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') }}" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
@endsection

@section('content')
    <main class="page-main">
        <!-- <div class="fl-subnav">
            <ul class=" uk-subnav uk-subnav-pill">
                <li><a href="{{ url('/categoria') }}">Todo</a></li>
                <li><a href="{{ url('/categoria') }}">Premiunm</a></li>
                <li><a href="{{ url('/categoria') }}">Gratuito</a></li>
                <li><a href="{{ url('/categoria') }}">Gratuito con registro</a></li>
                <li><a href="{{ url('/categoria') }}">Recientes</a></li>
                <li><a href="{{ url('/categoria') }}">Programados</a></li>
            </ul>
        </div> -->

        <div class="bodyfull">
            <div class="uk-section uk-flex uk-flex-middle uk-animation-fade">
                <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">Recuperar Contraseña</h3>

                        <!-- Formulario de Olvidar Contraseña -->
                        <form id="forgot-password-form">
                            @csrf
                            <!-- Campo de Correo Electrónico -->
                            <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="Ingresa tu correo electrónico">
                                </div>
                            </div>

                            <!-- Botón de Enviar -->
                            <div class="uk-margin btnlogin">
                                <button type="button" class="uk-button uk-button-primary uk-width-1-1" onclick="submitForgotPassword(event)">Enviar Enlace de Recuperación</button>
                            </div>
                        </form>

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

                        <!-- Enlace para Iniciar Sesión -->
                        <p class="uk-text-center">¿Recordaste tu contraseña? <a href="/iniciarsesion">Inicia sesión aquí</a>.</p>

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

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        function submitForgotPassword(e) {
            e.preventDefault();
            let email = document.getElementById('email').value;

            // Validar el correo electrónico
            if (!email || !validateEmail(email)) {
                Swal.fire({
                    icon: 'error',
                    title: 'Correo inválido',
                    text: 'Por favor, ingresa un correo electrónico válido.'
                });
                return;
            }

            // Hacer la solicitud AJAX
            $.ajax({
                url: '/forgot-password', // Ruta de la solicitud
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    email: email,
                },
                success: function (response) {
                    if (response.status === 'ok') {
                        Swal.fire({
                            icon: 'success',
                            title: 'Código de recuperación enviado a su correo',
                            text:' Ingrese a su correo, copie el código de verificación, y dar clic en el siguiente botón para continuar.',
                            confirmButtonText: 'GENERAR NUEVA CLAVE'
                        }).then(() => {
                            window.location.href = '/newpassword'; // Redirigir después de la validación
                        });
                    }
                },
                error: function (response) {
                    if (response.status === 404) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Correo no encontrado',
                            text: response.responseJSON.message
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Hubo un problema al enviar el correo de restablecimiento.'
                        });
                    }
                }
            });
        }
        function validateEmail(email) {
            const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return re.test(String(email).toLowerCase());
        }
    </script>
@endsection