(() => {
  // capture the input fields
  let name = document.getElementById("name");
  let email = document.getElementById("email");
  let phone = document.getElementById("phone");
  let select = document.getElementById("select");
  let message = document.getElementById("message");
  let submitBtn = document.getElementById("button");

  // submit button click listener
  submitBtn.addEventListener("click", () => {
    // check fields are populated
    if (!name.value.length || !email.value.length || !phone.value.length || !select.value.length) {
      alert("Please fill the fields");
    } else {
      // submitForm( 'https://contact.utopia.co.uk/api/contact-details' );
      submitForm("http://localhost:3005/api/contact-details");
    }
  });

  let submitForm = async (url) => {
    // construct request
    let data = {
      name: name.value,
      email: email.value,
      phone: phone.value,
      hearFrom: select.value,
      message: message.value,
    };

    // submit form
    try {
      const response = await fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      });

      if (response.ok) {
        alert("Response Submitted Successfully");
        location.reload();
      } else {
        alert("Response Submission Failed");
      }
    } catch (error) {
      alert("Response Submission Failed");
    }
  };
})();