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(async response => {
        const responseData = await response.json().catch(() => ({}));
        if (!response.ok) {
            const errorMsg = responseData.detail || 'Error al registrar el usuario.';
            console.error('Error en el registro:', errorMsg);
            showErrorMessage(errorMsg);
            return null;
        }
        return responseData;
    })
    .then(result => {
        if (result) {
            console.log('Registro exitoso:', result);
            document.getElementById('successPage').classList.remove('hidden');
            hideRegisterModal();
        }
    })
    .catch(error => {
        console.error('Error de red o conexión:', error);
        showErrorMessage('Error de conexión. Por favor, intenta nuevamente.');
    })
    .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();
});