Buchungskalender eingefügt

assets/app.js

@@ -1,4 +1,7 @@
 const forms = document.querySelectorAll('.booking-form');
+const navToggle = document.querySelector('[data-nav-toggle]');
+const navMenu = document.querySelector('[data-nav-menu]');
+const navLinks = document.querySelectorAll('.site-nav-public a');
 
 const formatCurrency = (cents) =>
   new Intl.NumberFormat('de-DE', {
@@ -26,17 +29,54 @@ 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 rateOutput = form.querySelector('[data-summary-rate]');
   const totalOutput = form.querySelector('[data-summary-total]');
   const rateInput = form.querySelector('input[name="price_per_day_cents"]');
+  const deliveryModeInput = form.querySelector('[data-delivery-mode]');
+  const deliveryZoneInput = form.querySelector('[data-delivery-zone]');
   const defaultRate = Number(form.dataset.dayRate || rateInput?.value || 9999);
+  const priceRates = (() => {
+    try {
+      return JSON.parse(form.dataset.priceRates || '{}');
+    } catch {
+      return {};
+    }
+  })();
+
+  const resolveRate = () => {
+    if (deliveryModeInput?.value === 'self_pickup') {
+      return Number(priceRates.self_pickup || defaultRate);
+    }
+
+    return Number(priceRates[deliveryZoneInput?.value || ''] || defaultRate);
+  };
+
+  const syncRate = () => {
+    if (deliveryZoneInput) {
+      if (deliveryModeInput?.value === 'self_pickup') {
+        deliveryZoneInput.value = 'self_pickup';
+      } else if (deliveryZoneInput.value === 'self_pickup') {
+        deliveryZoneInput.value = 'hannover';
+      }
+    }
+
+    const rate = resolveRate();
+
+    if (rateInput) {
+      rateInput.value = String(rate);
+    }
+
+    return rate;
+  };
 
   const render = () => {
     const rentalDays = calculateRentalDays(startInput?.value, endInput?.value);
-    const rate = Number(rateInput?.value || defaultRate);
+    const rate = syncRate();
 
     if (!rentalDays || rate < 0) {
       if (daysOutput) daysOutput.textContent = 'Noch nicht gewählt';
-      if (totalOutput) totalOutput.textContent = formatCurrency(defaultRate);
+      if (rateOutput) rateOutput.textContent = formatCurrency(rate);
+      if (totalOutput) totalOutput.textContent = formatCurrency(rate);
       return;
     }
 
@@ -44,6 +84,10 @@ forms.forEach((form) => {
       daysOutput.textContent = `${rentalDays} ${rentalDays === 1 ? 'Miettag' : 'Miettage'}`;
     }
 
+    if (rateOutput) {
+      rateOutput.textContent = formatCurrency(rate);
+    }
+
     if (totalOutput) {
       totalOutput.textContent = formatCurrency(rentalDays * rate);
     }
@@ -52,5 +96,29 @@ forms.forEach((form) => {
   startInput?.addEventListener('input', render);
   endInput?.addEventListener('input', render);
   rateInput?.addEventListener('input', render);
+  deliveryModeInput?.addEventListener('change', render);
+  deliveryZoneInput?.addEventListener('change', render);
   render();
 });
+
+if (navToggle && navMenu) {
+  const closeMenu = () => {
+    navToggle.setAttribute('aria-expanded', 'false');
+    navMenu.classList.remove('is-open');
+  };
+
+  navToggle.addEventListener('click', () => {
+    const isOpen = navMenu.classList.toggle('is-open');
+    navToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+  });
+
+  navLinks.forEach((link) => {
+    link.addEventListener('click', closeMenu);
+  });
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      closeMenu();
+    }
+  });
+}