pedidos-express/public/register/app.js

function showErrorMessage(message) {
    const errorMessageElement = document.getElementById('registerErrorMessage');
    if (errorMessageElement) {
        errorMessageElement.textContent = message;
        errorMessageElement.classList.remove('hidden');
    }
}

function showRegisterModal() {
    document.getElementById('registerModal').classList.remove('hidden');
}

function hideRegisterModal() {
    document.getElementById('registerModal').classList.add('hidden');
}

// Formateo automático del RUT mientras se escribe
document.getElementById('rutInput').addEventListener('input', function (e) {
    let rut = e.target.value.replace(/[^0-9kK]/g, '');

    if (rut.length > 1) {
        let body = rut.slice(0, -1);
        let dv = rut.slice(-1);

        if (body.length > 0) {
            // Agregar puntos cada 3 dígitos desde la derecha
            body = body.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
            rut = body + '-' + dv;
        }
    }

    e.target.value = rut;
});

// Manejo del envío del formulario
document.getElementById('registerForm').addEventListener('submit', function (e) {
    e.preventDefault();
    showGlobalLoader();
    const formData = new FormData(e.target);
    const data = {
        name: formData.get('name'),
        email: formData.get('email'),
        rut: formData.get('rut')
    };
    console.log('Datos del formulario:', data);
    fetch('/api/users/register', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
        .then(response => {
            if (response.status === 400) {
                return response.json().then(errorData => {
                    showErrorMessage(errorData.message || 'Error al registrar el usuario.');
                });
            }
            return response.json();
        })
        .then(data => {
            if (!data) {
                showErrorMessage("El usuario ya existe.");
                throw new Error("El usuario ya existe.");
            }else{
                console.log('Registro exitoso:', data);
                document.querySelector('#successPage').classList.remove('hidden');
                hideRegisterModal();
            }
        }).finally(() => {
            hideGlobalLoader();
        })
});

function createGlobalLoader() {
    if (document.getElementById('globalLoader')) return;
    globalLoaderElement = document.createElement('div');
    globalLoaderElement.id = 'globalLoader';
    globalLoaderElement.className = 'fixed inset-0 bg-black bg-opacity-80 flex flex-col items-center justify-center z-[2000] transition-opacity duration-300 ease-in-out pointer-events-none';
    globalLoaderElement.style.opacity = '0';
    globalLoaderElement.innerHTML = `
        <div style="border: 6px solid rgba(255, 255, 255, 0.2); border-radius: 50%; border-top: 6px solidrgb(172, 85, 85); width: 60px; height: 60px; animation: spin 1s linear infinite;"></div>
        <p class="text-white text-xl mt-4">Procesando su registro...</p>
    `;
    document.body.appendChild(globalLoaderElement);
}

function showGlobalLoader() {
    if (!globalLoaderElement) createGlobalLoader();
    globalLoaderElement.style.display = 'flex';
    setTimeout(() => { if (globalLoaderElement) globalLoaderElement.style.opacity = '1'; }, 10);
}

function hideGlobalLoader() {
    if (globalLoaderElement) {
        globalLoaderElement.style.opacity = '0';
        setTimeout(() => { if (globalLoaderElement) globalLoaderElement.style.display = 'none'; }, 300);
    }
}

document.addEventListener('DOMContentLoaded', function () {
    createGlobalLoader();
    hideGlobalLoader();
    showRegisterModal();
});