Initale Einrichtung

assets/app.js

@@ -0,0 +1,50 @@
+const forms = document.querySelectorAll('.booking-form');
+
+const formatCurrency = (cents) =>
+  new Intl.NumberFormat('de-DE', {
+    style: 'currency',
+    currency: 'EUR',
+  }).format(cents / 100);
+
+const calculateDays = (start, end) => {
+  if (!start || !end) return null;
+  const startDate = new Date(start);
+  const endDate = new Date(end);
+  if (Number.isNaN(startDate.valueOf()) || Number.isNaN(endDate.valueOf())) return null;
+  const milliseconds = endDate.getTime() - startDate.getTime();
+  const days = Math.floor(milliseconds / 86400000) + 1;
+  return days > 0 ? days : null;
+};
+
+forms.forEach((form) => {
+  const startInput = form.querySelector('[data-booking-start]');
+  const endInput = form.querySelector('[data-booking-end]');
+  const daysOutput = form.querySelector('[data-summary-days]');
+  const totalOutput = form.querySelector('[data-summary-total]');
+  const rateInput = form.querySelector('input[name="price_per_day_cents"]');
+  const defaultRate = Number(form.dataset.dayRate || 9999);
+
+  const render = () => {
+    const days = calculateDays(startInput?.value, endInput?.value);
+    const rate = Number(rateInput?.value || defaultRate);
+
+    if (!days || rate < 0) {
+      if (daysOutput) daysOutput.textContent = 'Noch nicht gewaehlt';
+      if (totalOutput) totalOutput.textContent = formatCurrency(defaultRate);
+      return;
+    }
+
+    if (daysOutput) {
+      daysOutput.textContent = `${days} ${days === 1 ? 'Tag' : 'Tage'}`;
+    }
+
+    if (totalOutput) {
+      totalOutput.textContent = formatCurrency(days * rate);
+    }
+  };
+
+  startInput?.addEventListener('input', render);
+  endInput?.addEventListener('input', render);
+  rateInput?.addEventListener('input', render);
+  render();
+});