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

passwordField.onblur = validatePassword;
repeatPasswordField.onblur = validatePasswordMatch;

var togglePassword4 = document.querySelector('#togglePassword4');
var password4 = document.querySelector('#password');

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

var togglePassword5 = document.querySelector('#togglePassword5');
var password5 = document.querySelector('#password_confirmation');

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