@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">Restablecer Contraseña</h3>

                        <!-- Mensajes informativos -->
                        <p class="uk-text-center uk-text-muted">Si el correo ingresado está registrado, recibirás un código verificador para restablecer tu contraseña.</p>
                        <p class="uk-text-center uk-text-muted">Ingresa una nueva contraseña para tu cuenta y evita que se repita con las que utilizaste anteriormente.</p>

                        <form id="reset-password-form">
                            @csrf

                            <!-- Campo de Código de Verificación -->
                            <div class="uk-margin">
                                <label for="verification_code" class="uk-form-label">Código de Verificación</label>
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-key"></i></span>
                                    <input class="uk-input" id="verification_code" type="text" name="verification_code" required placeholder="Ingresa el código que recibiste">
                                </div>
                            </div>
                            <div class="uk-margin">
                                <label for="password" class="uk-form-label">Nueva 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="Ingresa tu nueva 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>

                            <!-- Campo de Confirmación de Nueva Contraseña -->
                            <div class="uk-margin">
                                <label for="password_confirmation" class="uk-form-label">Confirmar Nueva 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_confirmation" type="password" name="password_confirmation" required placeholder="Confirma tu nueva 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>

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



                            <!-- Botón de Restablecer Contraseña -->
                            <div class="uk-margin btnlogin">
                                <button type="button" class="uk-button uk-button-primary uk-width-1-1" onclick="submitResetPassword()">Restablecer Contraseña</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://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
       

        // Función para enviar el formulario de restablecimiento de contraseña con AJAX
        function submitResetPassword() {
            let verificationCode = $('#verification_code').val();
            let password = $('#password').val();
            let passwordConfirmation = $('#password_confirmation').val();

            // Validar que las contraseñas coincidan
            if (password !== passwordConfirmation) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Las contraseñas no coinciden'
                });
                return;
            }

            // Hacer la solicitud AJAX
            $.ajax({
                url: '{{ route("password.reset") }}', // Ruta de la solicitud
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    verification_code: verificationCode,
                    password: password,
                    password_confirmation: passwordConfirmation
                },
                success: function (response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Contraseña restablecida',
                        text: 'Tu contraseña ha sido restablecida con éxito'
                    }).then(() => {
                        window.location.href = '/iniciarsesion'; // Redirigir después de la validación
                    });
                },
                error: function (response) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.responseJSON.message || 'Hubo un problema al restablecer la contraseña'
                    });
                }
            });
        }
    </script>
@endsection