//Contact Form
document.getElementById("forms").addEventListener("submit_button", (event) => {
    const contactForm = event.target
    if (!validateContactForm(contactForm)) {
        event.preventDefault();
        displayError(contactForm, 'Invalid Input')
    }
});

// Function to validate email addresses
function isValidEmail(email) {
    //Define the JS Regex pattern for a valid email address
    const emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;

    //Test the email to make sure it is valid
    return emailRegex.test(email);
}

//Function to validate phone numbers
function isPhoneValid(phone) {
    const phoneRegex = /^\d{10}$/;

    //Test the phone number to make sure it is valid
    return phoneRegex.test(phone);
}

//Function to check for empty fields
function validateContactForm(contactForm) {
    // Get the values entered in the form fields
    const firstName = contactForm["first-name"].value;
    const lastName = contactForm["last-name"].value;
    const email = contactForm["email"].value;
    const phone = contactForm["phone"].value;
    const subject = contactForm["subject"].value;
    const message = contactForm["message"].value;

    //Check if the required fields are empty
    //if empty, return false, stopping send
    if (!firstName || !lastName || !email || !phone || !subject || !message) {
        return false;
    }

    //Check if email is valid using isValidEmail function
    //If phone field not empty, also validate using isPhoneValid function
    //If either is invalid, return false
    if (!isValidEmail(email) || (phone && !isPhoneValid(phone))) {
        return false;
    }

    //If all validations pass, return true
    //allowing form submission
    return true;

    //
}

// Function to display an error message on the web page
function displayError(formElement, message) {
    const errorElement = formElement.getElementsByClassName("form-error")[0];

    // Set the innerHTML of the error element to the provided error message
    errorElement.innerHTML = message;

    // Change the display style of the error element to "block" to make it visible
    errorElement.style.display = "block";
}