@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://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css">
    <style>
        /* Estilos para los errores de validación */
        .uk-input.error {
            border-color: red;
        }

        .error-message {
            color: red;
            font-size: 0.875rem;
            margin-top: 5px;
        }
    </style>
@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-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 ">Crear Nueva Cuenta</h3>

                        <!-- Formulario de Registro -->
                        <form id="registerForm">
                            @csrf
                            <!-- Tipo y Número de Documento -->
                            <input type="hidden" name="redirectTo" value="{{ request('redirecTo', '/') }}">
                            <div class="uk-margin uk-grid-small uk-child-width-1-2@s" uk-grid>
                                <div>
                                    <label for="tipo_documento" class="uk-form-label">Tipo de Documento</label>
                                    <div class="uk-inline uk-width-1-1">
                                        <select class="uk-input" id="tipo_documento" name="tipo_documento" required>
                                            <option value="">Selecciona el tipo de documento</option>
                                            <option value="1">DNI</option>
                                            <option value="2">Cédula</option>
                                        </select>
                                        <span id="tipo_documento_error" class="error-message"></span>
                                    </div>
                                </div>
                                <div>
                                    <label for="numero_documento" class="uk-form-label">Número de Documento</label>
                                    <div class="uk-inline uk-width-1-1">
                                        <input class="uk-input" id="numero_documento" type="text" name="numero_documento"
                                            required placeholder="Número de documento">
                                        <span id="numero_documento_error" class="error-message"></span>
                                    </div>
                                </div>
                            </div>

                            <!-- Nombre y Apellidos -->
                            <div class="uk-margin">
                                <label for="first_name" class="uk-form-label">Nombre(s)</label>
                                <div class="uk-inline uk-width-1-1">
                                    <input class="uk-input" id="first_name" type="text" name="nombre" required
                                        placeholder="Tu nombre(s)">
                                    <span id="first_name_error" class="error-message"></span>
                                </div>
                            </div>

                            <div class="uk-margin uk-grid-small uk-child-width-1-2@s" uk-grid>
                                <div>
                                    <label for="apellido_paterno" class="uk-form-label">Apellido Paterno</label>
                                    <input class="uk-input" id="apellido_paterno" type="text" name="apellido_paterno"
                                        required placeholder="Apellido paterno">
                                    <span id="apellido_paterno_error" class="error-message"></span>
                                </div>
                                <div>
                                    <label for="apellido_materno" class="uk-form-label">Apellido Materno</label>
                                    <input class="uk-input" id="apellido_materno" type="text" name="apellido_materno"
                                        required placeholder="Apellido materno">
                                    <span id="apellido_materno_error" class="error-message"></span>
                                </div>
                            </div>

                            <!-- Correo y Teléfono -->
                            <div class="uk-margin">
                                <label for="email" class="uk-form-label">Correo Electrónico</label>
                                <input class="uk-input" id="email" type="email" name="email" required
                                    placeholder="Tu correo electrónico">
                                <span id="email_error" class="error-message"></span>
                            </div>

                            <div class="uk-margin">

                                <label for="phone" class="uk-form-label">Número de Teléfono</label>
                                <input class="uk-input" id="phone" type="tel" name="celular" required
                                    placeholder="Tu número de teléfono">
                                <span id="phone_error" class="error-message"></span>

                                <!-- <div>
                                                <label for="fecha_nacimiento" class="uk-form-label">Fecha de Nacimiento</label>
                                                <input class="uk-input" id="fecha_nacimiento" type="date" name="fecha_nacimiento" required>
                                                <span id="fecha_nacimiento_error" class="error-message"></span>
                                            </div> -->
                            </div>

                            <!-- Especialidad -->
                            <div class="uk-margin">
                                <label for="especialidad" class="uk-form-label">Especialidad</label>
                                <select class="uk-input" id="especialidad" name="especialidad" required>
                                    <option value="">Selecciona una especialidad</option>
                                    @foreach ($especialidades as $especialidad)
                                        <option value="{{ $especialidad->id_especialidad }}">{{ $especialidad->titulo }}
                                        </option>
                                    @endforeach
                                </select>
                                <span id="especialidad_error" class="error-message"></span>
                            </div>
                            <div class="uk-margin">
                                <label for="especialidad" class="uk-form-label">Eres Nombrado</label>
                                <select class="uk-input" id="tipo_cliente" name="tipo_cliente" required>
                                    <option value="">Selecciona una opcion</option>
                                    <option value="1">SI</option>
                                    <option value="2">NO</option>
                                </select>
                                <span id="tipo_cliente_error" class="error-message"></span>
                            </div>


                            <!-- Contraseña y Confirmar Contraseña -->
                            <div class="uk-margin uk-grid-small uk-child-width-1-2@s" uk-grid>
                                <div>
                                    <label for="password" class="uk-form-label">Contraseña</label>
                                    <div class="uk-inline uk-width-1-1">
                                        <span class="uk-form-icon"><i class="fas fa-lock"></i></span>
                                        <input class="uk-input" id="password" type="password" name="password" required
                                            placeholder="(mín. 8 caracteres)">
                                        <span class="toggle-password"
                                            style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%); cursor: pointer;">
                                            <i class="fa fa-eye"></i>
                                        </span>
                                        <span id="password_error" class="error-message"></span>
                                    </div>
                                </div>

                                <div>
                                    <label for="password_confirmation" class="uk-form-label">Confirmar Contraseña</label>
                                    <div class="uk-inline uk-width-1-1">
                                        <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="Repite 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>
                                        <span id="password_confirmation_error" class="error-message"></span>
                                    </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>

                            <!-- Consentimiento -->
                            <div class="uk-width-1-1">
                                <label style="font-size: 14px;">
                                    <input class="uk-checkbox" id="consentimientoreg" name="consentimientoreg"
                                        type="checkbox" required>
                                    Acepto recibir información de Grupo Auge según las <a
                                        href="https://www.educaauge.com/politicas-privacidad" target="_blank"
                                        style="font-size: 14px;">políticas
                                        de privacidad</a> y los <a href="https://www.educaauge.com/terminos-condiciones"
                                        style="font-size: 14px;" target="_blank">términos y condiciones</a>
                                </label>
                                <span id="consentimientereg_error" class="error-message"></span>
                            </div>

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

                        <hr class="uk-divider-icon">
                        <!-- Enlace para Iniciar Sesión -->
                        <p class="uk-text-center">¿Ya tienes cuenta? <a href="{{ url('/iniciarsesion') }}">Inicia sesión
                                aquí</a>.</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        document.getElementById('numero_documento').addEventListener('blur', function() {
            const tipoDocumento = document.getElementById('tipo_documento').value;
            const numeroDocumento = this.value.trim();

            if (tipoDocumento === '1' && numeroDocumento.length == 8) {

                fetch(`/api/consulta-dni/${numeroDocumento}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            document.getElementById('first_name').value = data.prenombres || '';
                            document.getElementById('apellido_paterno').value = data.apellidoPaterno || '';
                            document.getElementById('apellido_materno').value = data.apellidoMaterno || '';
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'No se encontró información para este DNI.',
                            });
                        }
                    })
                    .catch(() => {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Ocurrió un problema al consultar el DNI.',
                        });
                    });
            }
        });


        // Inicializar intl-tel-input en el campo de teléfono
        let phoneInput;
        document.addEventListener('DOMContentLoaded', function() {
            initializePhoneInput();
        });

        function initializePhoneInput() {
            const phoneInputField = document.querySelector("#phone");
            phoneInput = window.intlTelInput(phoneInputField, {
                initialCountry: "auto",
                separateDialCode: true,
                formatOnDisplay: true,
                autoPlaceholder: "off", // Mejorar la visualización del número de teléfono
                allowDropdown: true,
                dropdownContainer: document.body,
                searchPlaceholder: 'Buscar país', // Esto añade el placeholder de búsqueda en el dropdown
                geoIpLookup: function(callback) {
                    fetch('https://ipinfo.io', {
                            headers: {
                                'Accept': 'application/json'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            const countryCode = data.country || "PE"; // Por defecto, Perú
                            callback(countryCode);

                            // Lógica adicional: Seleccionar tipo de documento basado en el país
                            if (countryCode === "PE") {
                                document.getElementById('tipo_documento').value = "1"; // Selecciona DNI
                            } else {
                                document.getElementById('tipo_documento').value = "2"; // Selecciona Cédula
                            }
                        })
                        .catch(() => {
                            callback("PE"); // Default country as Peru
                            document.getElementById('tipo_documento').value =
                                "1"; // Selecciona DNI por defecto si falla
                        });
                },
                utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/utils.js" // Necesario para la búsqueda
            });
        }


        function validateFormData() {
            clearErrors(); // Limpiar mensajes de error

            const tipoDocumento = document.getElementById('tipo_documento').value.trim();
            const tipoCliente = document.getElementById('tipo_cliente').value.trim();
            const numeroDocumento = document.getElementById('numero_documento').value.trim();
            const nombre = document.getElementById('first_name').value.trim();
            const apellidoPaterno = document.getElementById('apellido_paterno').value.trim();
            const apellidoMaterno = document.getElementById('apellido_materno').value.trim();
            //const fechaNacimiento = document.getElementById('fecha_nacimiento').value.trim();
            const especialidad = document.getElementById('especialidad').value.trim();
            const password = document.getElementById('password').value.trim();
            const confirmPassword = document.getElementById('password_confirmation').value.trim();
            const email = document.getElementById('email').value.trim();
            const acceptTerms = document.getElementById('consentimientoreg').checked;

            let isValid = true;

            // Validación del tipo de documento
            if (tipoDocumento === "") {
                showError('tipo_documento', 'El tipo de documento es obligatorio.');
                isValid = false;
            }

            // Validación del número de documento
            if (numeroDocumento === "") {
                showError('numero_documento', 'El número de documento es obligatorio.');
                isValid = false;
            } else if (tipoDocumento === '1' && numeroDocumento.length !== 8) {
                showError('numero_documento', 'El DNI debe tener exactamente 8 dígitos.');
                isValid = false;
            } else if (tipoDocumento === '2' && numeroDocumento.length < 7) {
                showError('numero_documento', 'La cédula debe tener al menos 7 caracteres.');
                isValid = false;
            }

            // Validación del nombre
            if (nombre === "") {
                showError('first_name', 'El nombre es obligatorio.');
                isValid = false;
            }
            if (tipoCliente === "") {
                showError('tipo_cliente', 'Esta opcion es obligatoria.');
                isValid = false;
            }

            // Validación del apellido paterno
            if (apellidoPaterno === "") {
                showError('apellido_paterno', 'El apellido paterno es obligatorio.');
                isValid = false;
            }

            // Validación del apellido materno
            if (apellidoMaterno === "") {
                showError('apellido_materno', 'El apellido materno es obligatorio.');
                isValid = false;
            }

            // Validación del correo electrónico
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (email === "") {
                showError('email', 'El correo electrónico es obligatorio.');
                isValid = false;
            } else if (!emailPattern.test(email)) {
                showError('email', 'Por favor, ingresa un correo válido.');
                isValid = false;
            }

            // Validación del número de teléfono
            if (!phoneInput.isValidNumber()) {
                showError('phone', 'El número de teléfono no es válido.');
                isValid = false;
            }

            // Validación de la fecha de nacimiento
            // if (fechaNacimiento === "") {
            //     showError('fecha_nacimiento', 'La fecha de nacimiento es obligatoria.');
            //     isValid = false;
            // }

            // Validación de la especialidad
            if (especialidad === "") {
                showError('especialidad', 'La especialidad es obligatoria.');
                isValid = false;
            }

            // Validación de las contraseñas
            if (password === "") {
                showError('password', 'La contraseña es obligatoria.');
                isValid = false;
            } else if (password.length < 8) {
                showError('password', 'La contraseña debe tener al menos 8 caracteres.');
                isValid = false;
            }

            if (confirmPassword === "") {
                showError('password_confirmation', 'La confirmación de contraseña es obligatoria.');
                isValid = false;
            } else if (password !== confirmPassword) {
                showError('password_confirmation', 'Las contraseñas no coinciden.');
                isValid = false;
            }

            if (!acceptTerms) {
                showError('consentimientereg', 'Debes aceptar las políticas y términos para continuar.');
                Swal.fire({
                    icon: 'warning',
                    title: 'Falta tu consentimiento',
                    text: 'Por favor, marca la casilla de aceptación de políticas y términos para continuar.',
                    confirmButtonText: 'Entendido'
                });
                document.getElementById('consentimientereg').focus();
                return false; // <- salimos inmediatamente
            }
            return isValid;
        }

        function showError(inputId, message) {
            const inputField = document.getElementById(inputId);
            if (inputField) inputField.classList.add('error');

            const span = document.getElementById(inputId + '_error');
            if (span) span.innerText = message; // no revienta si no existe
        }

        // Limpiar los errores de validación
        function clearErrors() {
            const errorFields = document.querySelectorAll('.uk-input.error');
            errorFields.forEach(function(field) {
                field.classList.remove('error');
            });

            const errorMessages = document.querySelectorAll('.error-message');
            errorMessages.forEach(function(message) {
                message.innerText = '';
            });
        }

        // Función para enviar el formulario
        function registerUser(e) {
            e.preventDefault();

            if (!validateFormData()) return;

            const countryData = phoneInput.getSelectedCountryData();
            const phoneNumber = phoneInput.getNumber().replace('+' + countryData.dialCode, '');

            const formData = {
                tipo_documento: document.getElementById('tipo_documento').value,
                tipo_cliente: document.getElementById('tipo_cliente').value,
                numero_documento: document.getElementById('numero_documento').value,
                nombre: document.getElementById('first_name').value,
                apellido_paterno: document.getElementById('apellido_paterno').value,
                apellido_materno: document.getElementById('apellido_materno').value,
                celular: phoneNumber,
                celularprefijo: countryData.dialCode,
                //fecha_nacimiento: document.getElementById('fecha_nacimiento').value,
                email: document.getElementById('email').value,
                especialidad: document.getElementById('especialidad').value,
                password: document.getElementById('password').value,
                pais_codigo: countryData.iso2,
                pais_nombre: countryData.name,
                redirecTo: document.querySelector('[name="redirectTo"]').value || '/',
                _token: '{{ csrf_token() }}',
            };

            // Mostrar el indicador de carga
            Swal.fire({
                title: 'Procesando...',
                text: 'Por favor, espera mientras se registra la información.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: () => {
                    Swal.showLoading(); // Mostrar animación de carga
                },
            });

            // Enviar datos vía AJAX
            $.ajax({
                type: 'POST',
                url: '/registrar/alumno',
                data: formData,
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: '¡Registro exitoso!',
                        text: 'Redirigiendo...',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(function() {
                        window.location.href = response.redirect;
                    });
                },
                error: function(response) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.responseJSON.message ||
                            'Ocurrió un error al procesar el registro.',
                        timer: 3000,
                        showConfirmButton: false
                    });
                }
            });
        }
    </script>
@endsection