script.js

const GOOGLE_SCRIPT_URL = "https://script.google.com/macros/s/AKfycbzoZSTgqfS1xtpQDI9src2dWXn-7X2vZi_Zs-hw00tsw4W7Z9xZlYwJuPTa2HkXhjJM/exec";
const REGISTRATION_CLOSED = true;

const form = document.querySelector("#registrationForm");
const submitButton = form.querySelector(".submit-button");
const formStatus = document.querySelector("#formStatus");

const fieldErrors = {
  name: document.querySelector('[data-error-for="name"]'),
  phone: document.querySelector('[data-error-for="phone"]'),
  email: document.querySelector('[data-error-for="email"]'),
  isMember: document.querySelector('[data-error-for="isMember"]'),
};

const errorMessages = {
  name: "請填寫姓名。",
  phone: "請填寫電話或 WhatsApp。",
  email: "請填寫有效 Email。",
  isMember: "請選擇是否學會會員。",
};

function setLoading(isLoading) {
  submitButton.disabled = isLoading;
  submitButton.classList.toggle("is-loading", isLoading);
  submitButton.querySelector(".button-text").textContent = isLoading ? "提交中..." : "提交報名";
}

function setStatus(message, type = "") {
  formStatus.textContent = message;
  formStatus.className = `form-status${type ? ` is-${type}` : ""}`;
}

function closeRegistrationForm() {
  form.classList.add("is-closed");
  Array.from(form.elements).forEach((element) => {
    element.disabled = true;
  });
  submitButton.querySelector(".button-text").textContent = "報名已截止";
  setStatus("名額已滿，報名已截止。", "error");
}

function getFormData() {
  const formData = new FormData(form);

  return {
    name: String(formData.get("name") || "").trim(),
    phone: String(formData.get("phone") || "").trim(),
    email: String(formData.get("email") || "").trim(),
    isMember: String(formData.get("isMember") || "").trim(),
  };
}

function validate(data) {
  const errors = {};
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (!data.name) errors.name = errorMessages.name;
  if (!data.phone) errors.phone = errorMessages.phone;
  if (!emailPattern.test(data.email)) errors.email = errorMessages.email;
  if (!data.isMember) errors.isMember = errorMessages.isMember;

  return errors;
}

function showErrors(errors) {
  Object.entries(fieldErrors).forEach(([field, element]) => {
    element.textContent = errors[field] || "";
  });
}

async function submitRegistration(data) {
  if (GOOGLE_SCRIPT_URL.includes("PASTE_YOUR")) {
    throw new Error("Google Apps Script URL is not configured.");
  }

  const response = await fetch(GOOGLE_SCRIPT_URL, {
    method: "POST",
    mode: "cors",
    headers: {
      "Content-Type": "text/plain;charset=utf-8",
    },
    body: JSON.stringify(data),
  });

  const result = await response.json();

  if (!response.ok || !result.ok) {
    const error = new Error(result.error || "Submission failed.");
    error.code = result.code;
    throw error;
  }

  return result;
}

form.addEventListener("submit", async (event) => {
  event.preventDefault();

  if (REGISTRATION_CLOSED) {
    setStatus("名額已滿，報名已截止。", "error");
    return;
  }

  setStatus("");

  const data = getFormData();
  const errors = validate(data);
  showErrors(errors);

  if (Object.keys(errors).length > 0) {
    setStatus("請先修正以上資料。", "error");
    return;
  }

  try {
    setLoading(true);
    await submitRegistration(data);
    form.reset();
    setStatus("已成功提交報名，多謝你！活動後歡迎填寫意見問卷：survey.html", "success");
  } catch (error) {
    if (error.code === "QUOTA_FULL") {
      setStatus("名額已滿，報名已截止。", "error");
    } else {
      setStatus("暫時未能提交，請稍後再試或聯絡主辦方。", "error");
    }

    console.error(error);
  } finally {
    setLoading(false);
  }
});

if (REGISTRATION_CLOSED) {
  closeRegistrationForm();
}