@charset "utf-8";
/* CSS Document */

#popup-form-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#popup-form-container form {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
    width: 80%;
    max-width: 500px;
    margin: 30px auto;
}


// 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 against the pattern and return the result (true or false)
  return emailRegex.test(email);
}

// Function to validate phone numbers
function isValidPhoneNumber(phone) {
  // Define the JS Regex pattern for a valid 10-digit phone number
  const phoneRegex = /^\d{10}$/;
  
  // Test the phone number against the pattern and return the result (true or false)
  return phoneRegex.test(phone);
}// JavaScript Document


document.getElementById("contact-form").addEventListener("submit", (event) => {
  const contactForm = event.target
  if (!validateContactForm(contactForm)) {
    event.preventDefault();
    displayError(contactForm, 'Invalid input')
  }
});

// Function to validate the contact form
function validateContactForm(contactForm) {
  // Get the values entered in the form fields
  const name = contactForm["name"].value;
  const email = contactForm["email"].value;
  const phone = contactForm["phone"].value;
  const message = contactForm["message"].value;

  // Check if the required fields (name, email, and message) are empty
  // If any of them are empty, return false to prevent form submission
  if (!name || !email || !message) {
    return false;
  }

  // Check if the email is valid using the isValidEmail function
  // If the phone field is not empty, also check if it is valid using the isValidPhoneNumber function
  // If either the email or the phone number is invalid, return false to prevent form submission
  if (!isValidEmail(email) || (phone && !isValidPhoneNumber(phone))) {
    return false;
  }

  // If all the validations pass, return true to allow 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";
}