
nameField = document.getElementById('name');
surnameField = document.getElementById('surname');
emailField = document.getElementById('email');
cvField = document.querySelector('input[name="cv"]');
portfolioField = document.querySelector('input[name="portfolio"]');
linkedinField = document.getElementById('linkedin');

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 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 validateLinkedIn() {

    var existingError = linkedinField.parentNode.querySelector('.error-message');
    if (existingError) existingError.remove();

    var value = linkedinField.value.trim();
    if (value === '') return true;

    var pattern = /^(https?:\/\/)?(www\.)?linkedin\.com\/.*$/;
    if (!pattern.test(value)) {
        var error = document.createElement('p');
        error.className = 'error-message';
        error.style.color = 'red';
        error.textContent = "LinkedIn URL is not valid";
        linkedinField.style.border = '3px solid red';
        linkedinField.parentNode.appendChild(error);
        return false;
    }

    return true;

}

function validateCV() {

    var existingError = cvField.parentNode.querySelector('.error-message');
    if (existingError) existingError.remove();

    if (!cvField.files.length) {
        var error = document.createElement('p');
        error.className = 'error-message';
        error.style.color = 'red';
        error.textContent = "CV is required";
        cvField.parentNode.appendChild(error);
        return false;
    }

    var file = cvField.files[0];
    if (file.type !== "application/pdf") {
        var error = document.createElement('p');
        error.className = 'error-message';
        error.style.color = 'red';
        error.textContent = "CV must be a PDF file";
        cvField.parentNode.appendChild(error);
        return false;
    }

    return true;

}

function validatePortfolio() {

    var existingError = portfolioField.parentNode.querySelector('.error-message');
    if (existingError) existingError.remove();

    if (!portfolioField.files.length) {
        var error = document.createElement('p');
        error.className = 'error-message';
        error.style.color = 'red';
        error.textContent = "Portfolio is required";
        portfolioField.parentNode.appendChild(error);
        return false;
    }

    var file = portfolioField.files[0];
    if (file.type !== "application/pdf") {
        var error = document.createElement('p');
        error.className = 'error-message';
        error.style.color = 'red';
        error.textContent = "Portfolio must be a PDF file";
        portfolioField.parentNode.appendChild(error);
        return false;
    }

    return true;

}

nameField.onblur = validateName;
surnameField.onblur = validateSurname;
emailField.onblur = validateEmail;
linkedinField.onblur = validateLinkedIn;
cvField.onchange = validateCV;
portfolioField.onchange = validatePortfolio;