const referrerSection = document.querySelector("[data-referrer-details]");
const referralSection = document.querySelector("[data-referral-details]");
const submitButton = document.querySelector("[data-form-submit-button]");
const referButton = document.querySelector("[data-refer-modal-button]");
const nextButton = document.querySelector("[data-next-button]");
const message = document.querySelector("[data-status-message]");
const form = document.querySelector("#refer-form");

referButton.addEventListener("click", () => {
  referrerSection.classList.remove("hidden");
  referralSection.classList.add("hidden");
  nextButton.classList.remove("hidden");
  submitButton.classList.add("hidden");
});

function isValidForm(inputs) {
  let isValid = true;
  inputs.forEach((input) => {
    if (!input.checkValidity()) {
      input.classList.add("is-invalid");
      isValid = false;
    } else {
      input.classList.remove("is-invalid");
    }
  });
  return isValid;
}

nextButton.addEventListener("click", async (e) => {
  e.preventDefault();
  const inputs = document.querySelectorAll(
    "[data-referrer-details] input, [data-referrer-details] select"
  );

  const isValid = await isValidForm(inputs);

  if (isValid) {
    referralSection.classList.toggle("hidden");
    referrerSection.classList.toggle("hidden");
    submitButton.classList.toggle("hidden");
    nextButton.classList.toggle("hidden");
    message.innerText = "";
  } else {
    message.innerText = "Please fill in all required fields with valid values.";
  }
});

submitButton.addEventListener("click", async (e) => {
  e.preventDefault();
  const inputs = document.querySelectorAll(
    "[data-referral-details] input, [data-referral-details] select"
  );
  const isValid = await isValidForm(inputs);
  if (isValid) {
    message.innerText = "";
    form.submit();
  } else {
    message.innerText = "Please fill in all required fields with valid values.";
  }
});