<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact us form</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        /* background-color: orange; */
      }

      .container {
        max-width: 600px;
        margin: 20px auto;
        padding: 20px;
        border-radius: 5px;
        border: 1px solid #ccc;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }

      h2 {
        text-align: center;
        margin-bottom: 20px;
      }

      form {
        display: flex;
        flex-direction: column;
        min-width: 50%;
        align-items: center;
        /* background-color: orange; */
      }

      label {
        width: 100%;
        margin-top: 15px;
      }

      input,
      select,
      textarea {
        width: 97%;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
        font-size: 15px;
        margin-top: 7px;
      }

      textarea {
        resize: vertical;
      }

      .button-submit {
        width: 100%;
        margin-top: 20px;
        padding: 12px;
        font-size: 15px;
        font-weight: bold;
        color: white;
        background: #727cf5;
        border: none;
        border-radius: 5px;
        transition: background-color 0.3s ease;
        cursor: pointer;
      }
      .button-submit:hover {
        background: #5c63d9;
      }

      #toast {
        visibility: hidden;
        position: fixed;
        top: 10px;
        right: 10px;
        padding: 10px;
        min-width: 300px;
        border-radius: 5px;
        font-size: 15px;
        color: white;
        text-align: center;
        z-index: 1000;
        opacity: 0;
        transition: visibility 0s, opacity 0.5s ease-in-out;
      }
      #toast.success {
        background-color: #4caf50;
      }
      #toast.error {
        background-color: #f44336;
      }
      #toast.show {
        visibility: visible;
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Connect With Us</h2>

      <form id="formConnect" novalidate>
        <label style="margin-top: 0" for="firstName">First name*</label>
        <input
          type="text"
          id="firstName"
          name="firstName"
          placeholder="Enter first name"
          value=""
        />

        <label for="lastName">Last name*</label>
        <input
          type="text"
          id="lastName"
          name="lastName"
          placeholder="Enter last name"
          value=""
        />

        <label for="email">Email*</label>
        <input
          type="email"
          id="email"
          name="email"
          placeholder="Enter your email"
          value="sd@gmail.com"
        />

        <label for="email">Phone number*</label>
        <input
          type="text"
          id="phoneNumber"
          name="phoneNumber"
          placeholder="Enter your phone number"
          value=""
        />

        <label for="howDidYouHear">How did you hear about us?</label>
        <select style="width: 100%" id="howDidYouHear" name="howDidYouHear">
          <option value="">--Please choose an option--</option>
          <option value="searchEngine">
            Search Engine (e.g., Google, Bing)
          </option>
          <option value="friendOrFamilyRecommendation">
            Friend or Family Recommendation
          </option>
          <option value="onlineAdvertisement">Online Advertisement</option>
          <option value="companyWebsite">Company Website</option>
          <option value="blogOrOnlineArticle">Blog or Online Article</option>
          <option value="emailCampaign">Email Campaign</option>
          <option value="other">Other</option>
        </select>

        <label for="message">Message</label>
        <textarea
          id="message"
          name="message"
          rows="3"
          placeholder="Write your message here"
        ></textarea>

        <label style="display: none" for="userFeedback">User feedback</label>
        <input
          style="display: none"
          type="text"
          id="userFeedback"
          name="userFeedback"
          placeholder="Enter your feedback"
          value=""
        />

        <button class="button-submit" type="submit">Submit</button>
      </form>

      <div id="toast" role="alert" aria-live="polite"></div>

      <script>
        const startTime = Date.now();
        let lastSubmissionTime = 0;

        document
          .getElementById("formConnect")
          .addEventListener("submit", async function (event) {
            const elapsedTime = Date.now() - startTime;
            const currentTime = Date.now();

            if (elapsedTime < 3000) {
              showToast("Submission too fast, possible bot.", "error");
              event.preventDefault();
              return;
            }

            if (lastSubmissionTime && currentTime - lastSubmissionTime < 5000) {
              showToast("Submission too fast, possible bot.", "error");
              event.preventDefault();
              return;
            }

            event.preventDefault();

            const entriesFormData = {};
            const formData = new FormData(event?.target);
            for (const [key, value] of formData?.entries()) {
              entriesFormData[key] = value.trim();
            }
            console.log("dataObject = ", entriesFormData);

            // const emailRegex = /@[^.]*\./;
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            // const phoneNumberRegex = /^\d{10}$/;
            const phoneNumberRegex = /^\+?(\d{10,14})$/;

            // TODO - Hardcode "entriesFormData?.userFeedback" is for testing only - It should check honeypot from the server-side API
            if (entriesFormData?.userFeedback) {
              showToast("Bot submission detected!", "error");
              return;
            } else if (!entriesFormData?.firstName) {
              showToast("Please enter first name", "error");
              return;
            } else if (
              entriesFormData?.firstName?.length < 2 ||
              entriesFormData?.firstName?.length > 20
            ) {
              showToast("Please enter valid first name", "error");
              return;
            } else if (!entriesFormData?.lastName) {
              showToast("Please enter last name", "error");
              return;
            } else if (
              entriesFormData?.lastName?.length < 2 ||
              entriesFormData?.lastName?.length > 20
            ) {
              showToast("Please enter valid last name", "error");
              return;
            } else if (!entriesFormData?.email) {
              showToast("Please enter email", "error");
              return;
            } else if (!emailRegex.test(entriesFormData?.email)) {
              showToast("Please enter a valid email", "error");
              return;
            } else if (!entriesFormData?.phoneNumber) {
              showToast("Please enter phone number", "error");
              return;
            } else if (!phoneNumberRegex.test(entriesFormData?.phoneNumber)) {
              showToast("Please enter a valid phone number", "error");
              return;
            }

            try {
              const response = await fetch("https://dummyjson.com/posts/1", {
                method: "GET",
              });

              if (response.ok) {
                const data = await response.json();
                console.log("API Response:", data);
                lastSubmissionTime = Date.now();
                event.target.reset();
                showToast("Success! Your message has been sent.", "success");
              } else {
                showToast("Error! Failed to send your message.", "error");
              }
            } catch (error) {
              console.error("API Error:", error);
              showToast("Error! Unable to connect to the server.", "error");
            }
          });

        function showToast(message, type) {
          const toast = document.getElementById("toast");
          toast.textContent = message;
          toast.className = type === "success" ? "success show" : "error show";

          setTimeout(() => {
            toast.className = toast.className.replace("show", "");
          }, 3000);
        }
      </script>
    </div>
  </body>
</html>
