<form
  name="contact"
  action=""
  method="POST"
  id="contact-form"
  class=""
>
  <div class="form-field form-group">
    <div id="status-toast" class="toast hidden"></div>
  </div>
  <div class="form-field half left form-group">
    <div class="form-label-wrapper">
      <label class="form-label">Name <span class="required">*</span></label>
    </div>
    <div class="form-data">
      <div class="form-input-wrapper">
        <input
          name="name"
          value=""
          type="text"
          class="form-input"
          placeholder="Name"
          autocomplete="on"
          required="required"
        />
      </div>
    </div>
  </div>

  <div class="form-field half right form-group">
    <div class="form-label-wrapper">
      <label class="form-label">Email <span class="required">*</span></label>
    </div>
    <div class="form-data">
      <div class="form-input-wrapper">
        <input
          name="email"
          value=""
          type="email"
          class="form-input"
          placeholder="Email"
          required="required"
        />
      </div>
    </div>
  </div>

  <div class="form-field form-group">
    <div class="form-label-wrapper">
      <label class="form-label">Message <span class="required">*</span></label>
    </div>
    <div class="form-data">
      <div class="form-textarea-wrapper">
        <textarea
          name="message"
          class="form-input"
          placeholder="Message"
          required="required"
          spellcheck="false"
          data-gramm="false"
          style="line-height: 24px"
        ></textarea>
      </div>
    </div>
  </div>

  <div class="button-wrapper">
    <button id="submit-button" type="submit" class="btn btn-primary">Submit</button>
    <button type="reset" class="btn">Reset</button>
  </div>
</form>

<script>
  var form = document.getElementById("contact-form");
  var statusToast = document.getElementById("status-toast");
  var submitButton = document.getElementById("submit-button")

  submitButton.setLoading = function() {
      this.classList = "btn disabled"
      this.innerHTML = '<div class="loading loading-lg">'
  }

  submitButton.setNormal = function() {
    this.classList = "btn btn-primary"
    this.innerHTML = 'Submit'
  }

  statusToast.show = function(type, content) {
      this.classList = "toast toast-" + type
      this.innerHTML = content
  }

  statusToast.hide = function() {
      this.classList = "hide"
      this.innerHTML = ""
  }

  async function handleSubmit(event) {
    event.preventDefault();
    submitButton.setLoading()
    statusToast.show("primary", "Please wait...")
    var data = new FormData(form);
    fetch("https://api.itsblue.de/f/eb839512-45e8-4c6e-84de-3c88092b1310", {
      method: form.method,
      body: data,
      headers: {
        Accept: "application/json",
      },
    })
      .then((response) => {
        if(response.ok) {
        statusToast.show("success", "Thanks for your submission!");
        form.reset();
        submitButton.setNormal();
        }
        else {
          statusToast.show("error", "Oops! There was a problem submitting your form. Please contact us on a different way.")
          submitButton.setNormal()
        }
      })
      .catch((error) => {
        statusToast.show("error", "Oops! There was a problem submitting your form. Please contact us on a different way.")
        submitButton.setNormal()
      });
  }
  form.addEventListener("submit", handleSubmit);
</script>
