
nameField = document.getElementById('name');
surnameField = document.getElementById('surname');
usernameField = document.getElementById('username');
emailField = document.getElementById('email');
passwordField = document.getElementById('password');
repeatPasswordField = document.getElementById('password_confirmation');

function validateField(field) {
    // Eliminar cualquier mensaje de error anterior específico
    var existingError = field.parentNode.querySelector('.error-message');
    if (existingError) {
        existingError.remove();
    }

    // Reiniciar estilos
    field.style.border = '2px solid #ccc';

    if (field.value.trim() === '') {
        var errorMessage = document.createElement('p');
        errorMessage.className = 'error-message';
        errorMessage.style.color = 'red';
        errorMessage.textContent = `Your ${field.name} is required`;
        field.style.border = '3px solid red';
        field.parentNode.appendChild(errorMessage);
        return false;
    }

    return true;
    
}

function validateName() {

    // Elimina mensaje de error previo si existe
    var existingError = nameField.parentNode.querySelector('.error-message');
    if (existingError) {
        existingError.remove();
    }

    if (!validateField(nameField)) {
        return false;
    }

    var pattern = /^[a-zA-Z]+$/;
    if (!pattern.test(nameField.value.trim())) {
        var errorMessage = document.createElement('p');
        errorMessage.className = 'error-message';
        errorMessage.style.color = 'red';
        errorMessage.textContent = "Name must contain letters only, without spaces";
        nameField.style.border = '3px solid red';
        nameField.parentNode.appendChild(errorMessage);
        return false;
    }

    return true;
}

function validateSurname() {

    // Elimina mensaje de error previo si existe
    var existingError = surnameField.parentNode.querySelector('.error-message');
    if (existingError) {
        existingError.remove();
    }

    if (!validateField(surnameField)) {
        return false;
    }

    var errorMessage = document.createElement('p');
    errorMessage.style.color = 'red';

    var pattern = /^[a-zA-Z\s]+$/;
    if (!pattern.test(surnameField.value.trim())) {
        var errorMessage = document.createElement('p');
        errorMessage.className = 'error-message';
        errorMessage.style.color = 'red';
        errorMessage.textContent = "Surname must contain letters only";
        surnameField.style.border = '3px solid red';
        surnameField.parentNode.appendChild(errorMessage);
        return false;
    }

    return true;
}

function validateUsername() {

    // Elimina mensaje de error previo si existe
    var existingError = usernameField.parentNode.querySelector('.error-message');
    if (existingError) {
        existingError.remove();
    }

    if (!validateField(usernameField)) {
        return false;
    }

    var pattern = /^[a-zA-Z0-9]+$/;
    if (!pattern.test(usernameField.value.trim())) {
        var errorMessage = document.createElement('p');
        errorMessage.className = 'error-message';
        errorMessage.style.color = 'red';
        errorMessage.textContent = "Username must contain letters and numbers only, without spaces";
        usernameField.style.border = '3px solid red';
        usernameField.parentNode.appendChild(errorMessage);
        return false;
    }

    return true;
}

function validateEmail() {

    // Elimina mensaje de error previo si existe
    var existingError = emailField.parentNode.querySelector('.error-message');
    if (existingError) {
        existingError.remove();
    }

    if (!validateField(emailField)) {
        return false;
    }

    var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (!emailPattern.test(emailField.value.trim())) {
        errorMessage = document.createElement('p');
        errorMessage.className = 'error-message';
        errorMessage.style.color = 'red';
        errorMessage.textContent = "This email format is not valid";
        emailField.style.border = '3px solid red';
        emailField.parentNode.appendChild(errorMessage);
        return false;
    }

    return true;
}

function validatePassword() {

    // Elimina mensaje de error previo si existe
    var existingError = passwordField.parentNode.querySelector('.error-message');
    if (existingError) {
        existingError.remove();
    }
    
    if (!validateField(passwordField)) {
        return false;
    }

    if (passwordField.value.length < 8) {
        errorMessage = document.createElement('p');
        errorMessage.className = 'error-message';
        errorMessage.style.color = 'red';
        errorMessage.textContent = "Password must have at least 8 characters";
        passwordField.style.border = '3px solid red';
        passwordField.parentNode.appendChild(errorMessage);
        return false;
    }

    return true;
}

function validatePasswordMatch() {

    // Elimina mensaje de error previo si existe
    var existingError = repeatPasswordField.parentNode.querySelector('.error-message');
    if (existingError) {
        existingError.remove();
    }

    if (!validateField(repeatPasswordField)) {
        return false;
    } 

    if (passwordField.value !== repeatPasswordField.value) {
        errorMessage = document.createElement('p');
        errorMessage.className = 'error-message';
        errorMessage.style.color = 'red';
        errorMessage.textContent = "Passwords do not match";
        repeatPasswordField.style.border = '3px solid red';
        repeatPasswordField.parentNode.appendChild(errorMessage);
        return false;
    }

    return true;
}

emailField.onblur = validateEmail;
passwordField.onblur = validatePassword;
repeatPasswordField.onblur = validatePasswordMatch;
nameField.onblur = validateName;
surnameField.onblur = validateSurname;
usernameField.onblur = validateUsername;

var togglePassword2 = document.querySelector('#togglePassword2');
var password2 = document.querySelector('#password');

togglePassword2.onclick = function(e) {
    var type = password2.getAttribute('type') === 'password' ? 'text' : 'password';
    password2.setAttribute('type', type);
    e.target.classList.toggle('bi-eye');
};

var togglePassword3 = document.querySelector('#togglePassword3');
var password3 = document.querySelector('#password_confirmation');

togglePassword3.onclick = function(e) {
    var type = password3.getAttribute('type') === 'password' ? 'text' : 'password';
    password3.setAttribute('type', type);
    e.target.classList.toggle('bi-eye');
};