add ticket purchase page

Co-authored-by: Jan-Marlon Leibl <jleibl@proton.me>
Reviewed-on: http://git.simonis.lol/projects/abiball/pulls/13
Reviewed-by: jank1619 <jan@kjan.email>

assets/controllers/form_controller.js

@@ -0,0 +1,204 @@
+import { Controller } from "@hotwired/stimulus";
+import { loadStripe } from "@stripe/stripe-js";
+
+export default class extends Controller {
+  static targets = [
+    "key",
+    "submit",
+    "firstname",
+    "lastname",
+    "email",
+    "phone",
+    "ticketType",
+    "foodType",
+    "note",
+  ];
+
+  stripe;
+
+  async connect() {
+    this.stripe = await loadStripe(this.keyTarget.textContent);
+  }
+
+  addEntry(event) {
+    event.preventDefault();
+
+    const template = this.element
+      .querySelector(".forms")
+      .firstElementChild.cloneNode(true);
+
+    template.querySelectorAll("select, input").forEach((element) => {
+      element.value = "";
+      if (element.id) {
+        element.id = `${element.id}_${Date.now()}`;
+      }
+    });
+
+    template.querySelectorAll("label").forEach((label) => {
+      const forAttribute = label.getAttribute("for");
+      if (forAttribute) {
+        label.setAttribute("for", `${forAttribute}_${Date.now()}`);
+      }
+    });
+
+    template.classList.add("opacity-0");
+    this.element.querySelector(".forms").appendChild(template);
+
+    requestAnimationFrame(() => {
+      template.classList.remove("opacity-0");
+      template.classList.add("transition-all", "duration-300");
+    });
+  }
+
+  removeEntry(event) {
+    event.preventDefault();
+
+    const forms = this.element.querySelector(".forms");
+    if (forms.childElementCount <= 1) {
+      return;
+    }
+
+    const ticketElement = event.currentTarget.closest(".bg-white\\/80");
+    if (!ticketElement) return;
+
+    ticketElement.classList.add("opacity-0", "transition-all", "duration-300");
+    setTimeout(() => {
+      ticketElement.remove();
+    }, 300);
+  }
+
+  submit(event) {
+    event.preventDefault();
+    if (!this.validateForm()) {
+      return;
+    }
+
+    this.submitTarget.querySelector("span").classList.add("hidden");
+    this.submitTarget.querySelector("svg.arrow").classList.add("hidden");
+    this.submitTarget.querySelector("svg.loader").classList.remove("hidden");
+
+    const tickets = this.element.querySelectorAll(".forms > div");
+    const personalData = this.getPersonalData();
+    const ticketData = this.getTicketData(tickets);
+
+    const formData = {
+      personal: personalData,
+      tickets: ticketData,
+    };
+
+    fetch("/ticket/submit", {
+      method: "POST",
+      body: JSON.stringify(formData),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    }).then((response) => {
+      if (!response.ok) {
+        this.submitTarget.querySelector("svg.error").classList.add("hidden");
+        this.submitTarget
+          .querySelector("svg.loader")
+          .classList.remove("hidden");
+        this.submitTarget.querySelector("span").classList.remove("hidden");
+        this.showError(
+          "Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.",
+        );
+      } else {
+        response.json().then((data) => {
+          this.stripe.redirectToCheckout({
+            sessionId: data.id,
+          });
+        });
+      }
+    });
+  }
+
+  validateForm() {
+    let isValid = true;
+
+    ["firstname", "lastname", "email"].forEach((field) => {
+      const target = this[`${field}Target`];
+      if (!target.value.trim()) {
+        this.showFieldError(target);
+        isValid = false;
+      }
+    });
+
+    this.element.querySelectorAll(".forms > div").forEach((ticket) => {
+      const selects = ticket.querySelectorAll("select[required]");
+      selects.forEach((select) => {
+        if (!select.value) {
+          this.showFieldError(select);
+          isValid = false;
+        }
+      });
+    });
+
+    return isValid;
+  }
+
+  showFieldError(element) {
+    element.classList.add(
+      "border-red-500",
+      "focus:border-red-500",
+      "focus:ring-red-200",
+    );
+    element.addEventListener(
+      "input",
+      () => {
+        element.classList.remove(
+          "border-red-500",
+          "focus:border-red-500",
+          "focus:ring-red-200",
+        );
+      },
+      { once: true },
+    );
+  }
+
+  showError(message) {
+    const errorDiv = document.createElement("div");
+    errorDiv.className =
+      "fixed top-4 right-4 bg-red-50 border-l-4 border-red-500 p-4 rounded shadow-lg transform transition-all duration-500 opacity-0 translate-x-4";
+    errorDiv.innerHTML = `
+      <div class="flex items-center">
+        <div class="flex-shrink-0">
+          <twig:ux:icon name="mdi:alert-circle" class="w-5 h-5 text-red-400" />
+        </div>
+        <div class="ml-3">
+          <p class="text-sm text-red-700">${message}</p>
+        </div>
+      </div>
+    `;
+
+    document.body.appendChild(errorDiv);
+    requestAnimationFrame(() => {
+      errorDiv.classList.remove("opacity-0", "translate-x-4");
+    });
+
+    setTimeout(() => {
+      errorDiv.classList.add("opacity-0", "translate-x-4");
+      setTimeout(() => errorDiv.remove(), 500);
+    }, 5000);
+  }
+
+  getTicketData(tickets) {
+    return Array.from(tickets).map((ticket) => this.extractTicketData(ticket));
+  }
+
+  getPersonalData() {
+    return {
+      firstname: this.firstnameTarget.value.trim(),
+      lastname: this.lastnameTarget.value.trim(),
+      email: this.emailTarget.value.trim(),
+      phone: this.phoneTarget.value.trim(),
+    };
+  }
+
+  extractTicketData(ticket) {
+    return {
+      ticket: parseInt(ticket.querySelector('select[name="ticket"]').value),
+      food: parseInt(ticket.querySelector('select[name="food"]').value),
+      note: ticket.querySelector('input[name="note"]').value.trim(),
+    };
+  }
+}