document.addEventListener("DOMContentLoaded", function () {
  // Update the char counter of message textarea
  const textarea = document.getElementById("landingContactMsg");
  const charCount = document.getElementById("charCount");

  textarea.addEventListener("input", () => {
    const currentLength = textarea.value.length;
    const maxLength = textarea.getAttribute("maxlength");
    charCount.textContent = `${currentLength}/${maxLength}`;
  });

  // Landing Contact form validation
  const form = document.getElementById("landingContactForm");
  form.addEventListener("submit", function (event) {
      event.preventDefault();

      let isValid = true;

      // Email validation
      const mailInput = document.getElementById("landingContactMail");
      const mailInputFeedback = document.getElementById("landingMailFeedback");
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

      if (!mailInput.value) {
        mailInput.classList.add("is-invalid");
        mailInputFeedback.style.display = "block";
        mailInputFeedback.textContent = "You need to fill out this field";
        isValid = false;
      } else if (!emailRegex.test(mailInput.value)) {
        mailInput.classList.add("is-invalid");
        mailInputFeedback.style.display = "block";
        mailInputFeedback.textContent = "Invalid email";
        isValid = false;
      } else {
        mailInput.classList.remove("is-invalid");
        mailInputFeedback.style.display = "none";
      }

      // Name input validation
      const landingContactName = document.getElementById("landingContactName");
      const landingNameFeedback = document.getElementById(
        "landingNameFeedback"
      );
      if (!landingContactName.value) {
        landingContactName.classList.add("is-invalid");
        landingNameFeedback.style.display = "block";
        isValid = false;
      } else {
        landingContactName.classList.remove("is-invalid");
        landingNameFeedback.style.display = "none";
      }

      // Message input validation
      const landingContactMsg = document.getElementById("landingContactMsg");
      const landingMsgFeedback = document.getElementById("landingMsgFeedback");
      if (!landingContactMsg.value) {
        landingContactMsg.classList.add("is-invalid");
        landingMsgFeedback.style.display = "block";
        isValid = false;
      } else {
        landingContactMsg.classList.remove("is-invalid");
        landingMsgFeedback.style.display = "none";
      }

      // If all fields are valid, form is sent, success text is shown and form is hidden.
      if (isValid) {
        const formData = new FormData(form);

        fetch('mandrill.php', {
          method: "POST",
          body: formData,
        })
          .then((response) => {
            if (!response.ok) {
              throw new Error("Error in server response.");
            }
            return response.json();
          })
          .then((data) => {
            if (data.success) {
              console.log("Form sent successfully.");
              document.getElementById("landingContactForm").classList.add("d-none");
              document
                .getElementById("landingContactFormSuccess")
                .classList.remove("d-none");
            }
          })
          .catch((error) => {
            throw new Error("Error sending form: ", error);
          });
      }
    });

  // Input on click or focus, validation styles are removed. 
  document
    .getElementById("landingContactName")
    .addEventListener("focus", function () {
      this.classList.remove("is-invalid");
      document.getElementById("landingNameFeedback").style.display = "none";
    });

  document
    .getElementById("landingContactMail")
    .addEventListener("focus", function () {
      this.classList.remove("is-invalid");
      document.getElementById("landingMailFeedback").style.display = "none";
    });

  document
    .getElementById("landingContactMsg")
    .addEventListener("focus", function () {
      this.classList.remove("is-invalid");
      document.getElementById("landingMsgFeedback").style.display = "none";
    });
});