abiball/assets/controllers/form_controller.js

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(),
    };
  }
}