feat: Add manual email sending workflow and related database changes

- Implemented a new n8n workflow for manual email sending, including webhook trigger, order data fetching, email building, and sending. - Added logic to format email content with customer and order details. - Introduced new columns in the sales_orders table to track email sending status. - Updated database functions to handle new rental types and email status. - Created new RPCs for updating email status and retrieving email details for sales orders.
2026-05-17 18:04:36 +02:00
parent e24bc743e2
commit e34d56e36a
13 changed files with 1127 additions and 106 deletions
@@ -101,6 +101,7 @@
                            <th data-i18n="adminNameEmail">Name / E-Mail</th>
                            <th data-i18n="adminVehicleTab">Fahrzeug</th>
                            <th data-i18n="adminPeriod">Zeitraum</th>
+                            <th data-i18n="adminRentalType">Miettyp</th>
                            <th data-i18n="adminTotalPrice">Gesamtbetrag</th>
                            <th data-i18n="adminStatus">Status</th>
                            <th></th>
@@ -146,10 +147,12 @@
                            <th data-i18n="adminNameEmail">Name / E-Mail</th>
                            <th data-i18n="adminVehicleTab">Fahrzeug</th>
                            <th data-i18n="adminPeriod">Zeitraum</th>
+                            <th data-i18n="adminRentalType">Miettyp</th>
                            <th data-i18n="adminTotalPrice">Gesamtbetrag</th>
                            <th>Kaution</th>
                            <th>Miete</th>
                            <th data-i18n="adminStatus">Status</th>
+                            <th data-i18n="adminEmailSent">Email</th>
                            <th></th>
                        </tr>
                    </thead>
@@ -192,13 +195,13 @@
                        </div>

                        <div class="row3">
-                            <label><span>Max. km/Tag</span><input type="number" name="max_daily_km" min="0" value="150" /></label>
+                            <label><span>Inkl. km/Tag</span><input type="number" name="included_km_per_day" min="0" value="150" /></label>
+                            <label><span data-i18n="adminPricePerKm">Preis extra km (€)</span><input type="number" name="price_per_km_eur" step="0.01" min="0" value="1.50" /></label>
                            <label><span data-i18n="adminKaution">Kaution (€)</span><input type="number" name="kaution_eur" min="1" value="5000" required /></label>
-                            <label><span data-i18n="adminMaxKmWeekend">Max. km/Wochenendtag</span><input type="number" name="max_km_weekend" min="0" placeholder="wie km/Tag" /></label>
                        </div>

                        <div class="row2">
-                            <label><span data-i18n="adminSort">Reihenfolge</span><input type="number" name="sort_order" value="100" /></label>
+                            <label><span data-i18n="adminSortOrder">Ordnung</span><input type="number" name="sort_order" value="100" /></label>
                            <label><span data-i18n="adminLocation">Standort</span><input name="location" value="Steiermark (TBD)" /></label>
                        </div>

@@ -304,6 +307,6 @@
        <div class="dialog-footer" id="customerDialogFooter"></div>
    </dialog>

-    <script type="module" src="admin.js"></script>
+    <script type="module" src="admin.js?v=3"></script>
 </body>
 </html>
@@ -262,9 +262,9 @@ function loadForEdit(id) {
    vehicleForm.seats.value            = v.seats;
    vehicleForm.daily_price_eur.value  = v.daily_price_eur;
    vehicleForm.weekend_price_eur.value = v.weekend_price_eur || 0;
-    vehicleForm.max_daily_km.value     = v.max_daily_km || 150;
-    vehicleForm.kaution_eur.value      = v.kaution_eur || 5000;
-    vehicleForm.max_km_weekend.value   = v.max_km_weekend || '';
+    vehicleForm.included_km_per_day.value = v.included_km_per_day || 150;
+    vehicleForm.kaution_eur.value         = v.kaution_eur || 5000;
+    vehicleForm.price_per_km_eur.value    = v.price_per_km_eur || 1.50;
    vehicleForm.sort_order.value       = v.sort_order;
    vehicleForm.location.value         = v.location;
    vehicleForm.description_de.value   = v.description_de;
@@ -283,10 +283,10 @@ resetBtn.addEventListener("click", () => {
    vehicleForm.sort_order.value = 100;
    vehicleForm.location.value = "Steiermark (TBD)";
    vehicleForm.seats.value = 2;
-    vehicleForm.max_daily_km.value = 150;
+    vehicleForm.included_km_per_day.value = 150;
    vehicleForm.weekend_price_eur.value = 0;
    vehicleForm.kaution_eur.value = 5000;
-    vehicleForm.max_km_weekend.value = '';
+    vehicleForm.price_per_km_eur.value = 1.50;
    state.currentPhotoPath = null;
    updatePreview("");
    formTitle.textContent = "Neues Fahrzeug";
@@ -309,9 +309,9 @@ vehicleForm.addEventListener("submit", async (e) => {
            seats:           +fd.get("seats") || 2,
            daily_price_eur: +fd.get("daily_price_eur") || 0,
            weekend_price_eur: +fd.get("weekend_price_eur") || 0,
-            max_daily_km:    +fd.get("max_daily_km") || 150,
-            kaution_eur:     +fd.get("kaution_eur") || 5000,
-            max_km_weekend:  fd.get("max_km_weekend") ? +fd.get("max_km_weekend") : null,
+            included_km_per_day: +fd.get("included_km_per_day") || 150,
+            kaution_eur:         +fd.get("kaution_eur") || 5000,
+            price_per_km_eur:    parseFloat(fd.get("price_per_km_eur")) || 1.50,
            sort_order:      +fd.get("sort_order") || 100,
            location:        fd.get("location") || "Steiermark (TBD)",
            description_de:  fd.get("description_de") || "",
@@ -404,6 +404,7 @@ function renderLeads() {
            <td><strong>${esc(l.name)}</strong><br /><span class="muted">${esc(l.email)}${l.phone ? " · " + esc(l.phone) : ""}</span></td>
            <td>${esc(l.vehicle_label || "—")}</td>
            <td>${esc(l.date_from || "—")} → ${esc(l.date_to || "—")}</td>
+            <td style="white-space:nowrap;"><span class="pill pill-${esc(l.rental_type || 'weekend')}">${esc(l.rental_type || 'weekend')}</span></td>
            <td style="font-weight:600;color:var(--accent-strong);">${totalStr}</td>
            <td><span class="pill pill-${esc(l.status)}">${esc(l.status)}</span></td>
            <td style="white-space:nowrap;">
@@ -567,8 +568,9 @@ async function renderLeadTab(tab, l) {
                <div class="price-row muted"><span>${lang === "de" ? t("adminVatLabel") : t("adminVatLabelEn")}</span><span>€ ${vat.toLocaleString("de-DE")}</span></div>
                <div class="price-row total"><span>${lang === "de" ? t("adminTotalLabel") : t("adminTotalLabelEn")}</span><span>€ ${total.toLocaleString("de-DE")}</span></div>
                <div class="price-row muted" style="margin-top:0.8rem;"><span>${lang === "de" ? t("adminDepositLabel") : t("adminDepositLabelEn")}</span><span>€ ${deposit.toLocaleString("de-DE")}</span></div>
-                <div class="price-row muted"><span>${lang === "de" ? t("adminIncludedKmLabel") : t("adminIncludedKmLabelEn")}</span><span>${((l.weekday_count || 0) * (state.vehicleMap.get(l.vehicle_id)?.max_daily_km || 150) + (l.weekend_day_count || 0) * (state.vehicleMap.get(l.vehicle_id)?.max_km_weekend || state.vehicleMap.get(l.vehicle_id)?.max_daily_km || 150))} km</span></div>
-                <div class="price-row muted"><span>${lang === "de" ? t("adminTotalDaysLabel") : t("adminTotalDaysLabelEn")}</span><span>${l.total_days || 0}</span></div>
+                <div class="price-row muted"><span>${lang === "de" ? t("adminIncludedKmLabel") : t("adminIncludedKmLabelEn")}</span><span>${(l.total_days || 0) * (state.vehicleMap.get(l.vehicle_id)?.included_km_per_day || 150)} km</span></div>
+              <div class="price-row muted"><span>${lang === "de" ? t("adminTotalDaysLabel") : t("adminTotalDaysLabelEn")}</span><span>${l.total_days || 0}</span></div>
+                <div class="price-row muted"><span>${lang === "de" ? t("adminRentalType") : t("adminRentalTypeEn")}</span><span><span class="pill pill-${esc(l.rental_type || 'weekend')}">${esc(l.rental_type || 'weekend')}</span></span></div>
            </div>`;
    } else if (tab === "documents") {
        const docs = await loadLeadAttachments(l.id);
@@ -694,10 +696,12 @@ function renderOrders() {
            <td>${cust ? `<strong>${esc(cust.name)}</strong><br><span class="muted">${esc(cust.email)}</span>` : `<span class="muted">${esc(o.customer_id?.slice(0, 8) || "—")}</span>`}</td>
            <td>${esc(o.vehicle_label || "—")}</td>
            <td>${esc(o.date_from || "—")} → ${esc(o.date_to || "—")}</td>
+            <td style="white-space:nowrap;"><span class="pill pill-${esc(o.rental_type || 'weekend')}">${esc(o.rental_type || 'weekend')}</span></td>
            <td style="font-weight:600;color:var(--accent-strong);">${totalStr}</td>
            <td><span class="pill pill-${o.kaution_paid ? "active" : "new"}">${o.kaution_paid ? "✓" : "—"}</span></td>
            <td><span class="pill pill-${o.rental_paid ? "active" : "new"}">${o.rental_paid ? "✓" : "—"}</span></td>
            <td><span class="pill pill-${o.rental_complete ? "qualified" : "new"}">${o.rental_complete ? t("adminCompleteDone") : t("adminCompletePending")}</span></td>
+            <td style="white-space:nowrap;"><span class="pill pill-${o.email_sent === 1 ? 'active' : o.email_sent === 2 ? 'disqualified' : 'new'}">${o.email_sent === 0 ? '—' : o.email_sent === 1 ? '✓' : '✗'}</span></td>
            <td style="white-space:nowrap;"><button class="btn small ghost" data-open-order="${o.id}">${t("adminDetails")}</button></td>`;
        ordersTableBody.appendChild(tr);
    }
@@ -719,6 +723,10 @@ async function openOrder(id) {
    const cust = state.customers.find(c => c.id === o.customer_id);
    const total = o.total_eur || 0;
    const deposit = o.deposit_eur || 0;
+    const emailSent = o.email_sent || 0;
+    const emailSentText = emailSent === 1 ? '✓' : emailSent === 2 ? '✗' : '—';
+    const emailSentPillClass = emailSent === 1 ? 'active' : emailSent === 2 ? 'disqualified' : 'new';
+    const isEmailLocked = emailSent === 1;

    orderDialogTitle.textContent = `${o.order_number || o.id.slice(0, 8)} · ${cust?.name || "—"}`;

@@ -735,8 +743,19 @@ async function openOrder(id) {
            <dt>${lang === "de" ? "Kunde" : "Customer"}</dt><dd>${cust ? `<a href="#" class="link-lead" data-goto-cust="${cust.id}">${esc(cust.name)} (${esc(cust.email)})</a>` : esc(o.customer_id?.slice(0, 8) || "—")}</dd>
            <dt>${lang === "de" ? "Fahrzeug" : "Vehicle"}</dt><dd>${esc(o.vehicle_label || "—")}</dd>
            <dt>${lang === "de" ? "Zeitraum" : "Period"}</dt><dd>${esc(o.date_from || "—")} → ${esc(o.date_to || "—")}</dd>
-            <dt>${t("adminTotalLabel")}</dt><dd style="font-weight:600;">€ ${total.toLocaleString("de-DE")}</dd>
-            <dt>${t("adminDepositLabel")}</dt><dd>€ ${deposit.toLocaleString("de-DE")}</dd>
+            <dt>${t("adminTotalLabel")}</dt><dd id="orderTotalDisplay" style="font-weight:600;">
+                ${o.rental_type === 'individuell' && !isEmailLocked
+                    ? `<input type="number" id="orderTotalInput" step="1" min="0" value="${o.total_eur || 0}" style="font-weight:600;width:120px;" ${isEmailLocked ? 'disabled' : ''} />
+                       <button class="btn small" id="orderTotalSave" style="margin-left:0.4rem;" ${isEmailLocked ? 'disabled' : ''}>${t("adminSave")}</button>`
+                    : '€ ' + total.toLocaleString("de-DE")
+                }
+            </dd>
+            <dt>${t("adminDepositLabel")}</dt><dd>${isEmailLocked
+                ? '€ ' + deposit.toLocaleString("de-DE")
+                : `<input type="number" id="orderDepositInput" step="1" min="0" value="${deposit}" style="width:120px;" ${isEmailLocked ? 'disabled' : ''} /><button class="btn small" id="orderDepositSave" style="margin-left:0.4rem;" ${isEmailLocked ? 'disabled' : ''}>${t("adminSave")}</button>`
+            }</dd>
+            <dt>${t("adminEmailSent")}</dt><dd><span class="pill pill-${emailSentPillClass}">${emailSentText}</span></dd>
+            ${o.rental_type === 'individuell' && !isEmailLocked ? `<dt></dt><dd><button class="btn small" id="manualEmailSend" style="background-color:var(--accent-strong);color:#fff;">${t("sendEmailButton")}</button></dd>` : ''}
        </dl>
        <div style="display:flex;gap:0.4rem;flex-wrap:wrap;margin:1rem 0;">
            <button class="btn small ${o.kaution_paid ? "ghost" : ""}" data-so-toggle="kaution" data-so-id="${o.id}">${o.kaution_paid ? t("adminKautionPaid") : t("adminKautionPending")}</button>
@@ -778,15 +797,77 @@ async function openOrder(id) {
        });
    });

+    // Dirty form tracking
+    let noteIsDirty = false;
+    const orderNoteEl = document.querySelector("#orderNote");
+    const originalNoteValue = o.private_notes || "";
+    const saveBtn = document.querySelector("#orderNoteSave");
+    if (orderNoteEl && saveBtn) {
+        saveBtn.classList.add("ghost");
+        orderNoteEl.addEventListener("input", () => {
+            noteIsDirty = orderNoteEl.value !== originalNoteValue;
+            if (noteIsDirty) {
+                saveBtn.classList.remove("ghost");
+                saveBtn.style.backgroundColor = "var(--accent-strong)";
+                saveBtn.style.color = "#fff";
+                saveBtn.textContent = t("adminSaveNotes") + " (unsaved)";
+            } else {
+                saveBtn.classList.add("ghost");
+                saveBtn.style.backgroundColor = "";
+                saveBtn.style.color = "";
+                saveBtn.textContent = t("adminSaveNotes");
+            }
+        });
+    }
+
    // Save notes
    document.querySelector("#orderNoteSave")?.addEventListener("click", async () => {
        const ok = await saveSalesOrderPrivateNotes(o.id, document.querySelector("#orderNote").value);
        if (ok) {
+            noteIsDirty = false;
            document.querySelector("#orderNoteSave").textContent = "✓";
            setTimeout(() => { document.querySelector("#orderNoteSave").textContent = t("adminSaveNotes"); }, 1500);
        }
    });

+      document.querySelector("#orderTotalSave")?.addEventListener("click", async () => {
+        const input = document.querySelector("#orderTotalInput");
+        if (!input) return;
+        const { error } = await supabase.rpc("sales_order_set_total", {
+            p_so_id: o.id,
+            p_total_eur: +input.value,
+        });
+        if (error) {
+            alert(error.message);
+            return;
+        }
+        await loadSalesOrders();
+        await openOrder(id); // re-render
+    });
+
+    document.querySelector("#manualEmailSend")?.addEventListener("click", async () => {
+        const btn = document.querySelector("#manualEmailSend");
+        btn.disabled = true;
+        
+        showToast(t("emailSentToast"), 3000);
+        
+        const n8nUrl = window.MCCARS_CONFIG?.N8N_WEBHOOK_URL || "http://localhost:55590/webhook/manual-email-send";
+        try {
+            await fetch(n8nUrl, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ sales_order_id: o.id })
+            });
+        } catch (webhookError) {
+            console.error("Webhook error:", webhookError);
+        }
+        
+        setTimeout(async () => {
+            await loadSalesOrders();
+            await openOrder(id);
+        }, 3000);
+    });
+
    orderDialogFooter.innerHTML = "";
    orderDialog.showModal();
    orderDialogClose.addEventListener("click", () => orderDialog.close(), { once: true });
@@ -941,6 +1022,7 @@ async function renderCustomerTab(tab, c) {
                        </div>
                        <div class="price-row"><span>${lang === "de" ? "Fahrzeug" : "Vehicle"}</span><span>${esc(o.vehicle_label || "—")}</span></div>
                        <div class="price-row"><span>${lang === "de" ? "Zeitraum" : "Period"}</span><span>${esc(o.date_from || "—")} → ${esc(o.date_to || "—")}</span></div>
+                        <div class="price-row"><span>${lang === "de" ? "Miettyp" : "Rental type"}</span><span><span class="pill pill-${esc(o.rental_type || 'weekend')}">${esc(o.rental_type || 'weekend')}</span></span></div>
                        <div style="display:flex;gap:0.4rem;flex-wrap:wrap;margin-top:0.7rem;">
                            <button class="btn small ${o.kaution_paid ? "ghost" : ""}" data-so-toggle="kaution" data-so-id="${o.id}">${o.kaution_paid ? t("adminKautionPaid") : t("adminKautionPending")}</button>
                            <button class="btn small ${o.rental_paid ? "ghost" : ""}" data-so-toggle="rental" data-so-id="${o.id}">${o.rental_paid ? t("adminRentalPaid") : t("adminRentalPending")}</button>
@@ -974,8 +1056,32 @@ async function renderCustomerTab(tab, c) {
                const noteEl = customerDialogBody.querySelector(`[data-so-note="${btn.dataset.soSaveNote}"]`);
                const ok = await saveSalesOrderPrivateNotes(btn.dataset.soSaveNote, noteEl?.value || "");
                if (ok) {
+                    btn.classList.remove("ghost");
+                    btn.style.backgroundColor = "";
+                    btn.style.color = "";
                    btn.textContent = "✓";
-                    setTimeout(() => { btn.textContent = t("adminSaveNotes"); }, 1500);
+                    setTimeout(() => { 
+                        btn.textContent = t("adminSaveNotes"); 
+                    }, 1500);
+                }
+            });
+        });
+
+        customerDialogBody.querySelectorAll("[data-so-note]").forEach((noteEl) => {
+            const btn = customerDialogBody.querySelector(`[data-so-save-note="${noteEl.dataset.soNote}"]`);
+            const originalValue = noteEl.value;
+            noteEl.addEventListener("input", () => {
+                const isDirty = noteEl.value !== originalValue;
+                if (isDirty) {
+                    btn.classList.remove("ghost");
+                    btn.style.backgroundColor = "var(--accent-strong)";
+                    btn.style.color = "#fff";
+                    btn.textContent = "Speichern (unsaved)";
+                } else {
+                    btn.classList.add("ghost");
+                    btn.style.backgroundColor = "";
+                    btn.style.color = "";
+                    btn.textContent = t("adminSaveNotes");
                }
            });
        });
@@ -1,5 +1,5 @@
 import { createClient } from "https://esm.sh/@supabase/supabase-js@2.45.4";
-import { translations, REVIEWS, getLang, setLang, t, applyI18n } from "./i18n.js";
+import { translations, REVIEWS, getLang, setLang, t, applyI18n } from "./i18n.js?v=3";

 const SUPA_URL = window.MCCARS_CONFIG?.SUPABASE_URL ?? "";
 const SUPA_KEY = window.MCCARS_CONFIG?.SUPABASE_ANON_KEY || "";
@@ -212,11 +212,11 @@ function openDetails(id) {
            <div><strong>${v.top_speed_kmh}</strong><span>${t("kmh")}</span></div>
            <div><strong>${escapeHtml(v.acceleration)}</strong><span>${t("accel")}</span></div>
        </div>
-        <div class="spec-row" style="margin:1rem 0;">
-            <div><strong>${v.seats}</strong><span>${t("seats")}</span></div>
-            <div><strong>€ ${v.weekend_price_eur || v.daily_price_eur}</strong><span>${t("bpfWeekendRate")}</span></div>
-            <div><strong>${v.max_daily_km || 150}</strong><span>${t("bpfMaxKm")}</span></div>
-        </div>
+       <div class="spec-row" style="margin:1rem 0;">
+                <div><strong>${v.seats}</strong><span>${t("seats")}</span></div>
+                <div><strong>€ ${v.weekend_price_eur || v.daily_price_eur}</strong><span>${t("bpfWeekendRate")}</span></div>
+                <div><strong>${v.included_km_per_day || 150}</strong><span>${t("bpfInclKmPerDay")}</span></div>
+            </div>
        <div class="spec-row" style="margin:1rem 0;grid-template-columns:1fr;">
            <div><strong>€ ${(v.kaution_eur || 5000).toLocaleString("de-DE")}</strong><span>${t("bpfDeposit")}</span></div>
        </div>
@@ -398,29 +398,45 @@ async function updateSidebar() {
    const vat = price.vat_eur;
    const total = price.total_eur;
    const deposit = price.deposit_eur;
-    const kmPerWeekday = price.max_daily_km;
-    const kmPerWeekendDay = price.max_km_weekend;
-    const includedKm = (weekdays * kmPerWeekday) + (weekendDays * kmPerWeekendDay);
+    const includedKmPerDay = price.included_km_per_day || 150;
+    const includedKm = totalDays * includedKmPerDay;
    const photoUrl = optimizedVehiclePhotoUrl(v.photo_url);

-    bpfSidebarPlaceholder.style.display = "none";
-    bpfSidebarContent.style.display = "block";
-    bpfSidebarContent.innerHTML = `
-        <h4>${t("bpfPriceOverview")}</h4>
-        <div class="bpf-price-row"><span>${v.brand} ${v.model} · ${totalDays} ${t("bpfDays")}</span></div>
-        ${weekdays > 0 ? `<div class="bpf-price-row"><span>${t("bpfWeekdays")} (${weekdays} × € ${price.daily_price_eur})</span><span>€ ${weekdayCost.toLocaleString("de-DE")}</span></div>` : ""}
-        ${weekendDays > 0 ? `<div class="bpf-price-row"><span>${t("bpfWeekendDays")} (${weekendDays} × € ${price.weekend_price_eur})</span><span>€ ${weekendCost.toLocaleString("de-DE")}</span></div>` : ""}
-        <div class="bpf-price-row"><span>${t("bpfSubtotal")}</span><span>€ ${subtotal.toLocaleString("de-DE")}</span></div>
-        <div class="bpf-price-row muted"><span>${t("bpfVat")}</span><span>€ ${vat.toLocaleString("de-DE")}</span></div>
-        <div class="bpf-price-row total"><span>${t("bpfTotal")}</span><span>€ ${total.toLocaleString("de-DE")}</span></div>
-        <div class="bpf-price-row muted" style="margin-top:0.8rem;"><span>${t("bpfDeposit")}</span><span>€ ${deposit.toLocaleString("de-DE")}</span></div>
-        <div class="bpf-price-row muted"><span>${t("bpfIncludedKm")}</span><span>${includedKm} km</span></div>
-        <div class="bpf-price-row muted"><span>${t("bpfExtraKm")}</span><span>€ 1,50${t("bpfPerKm")}</span></div>
-        <div class="bpf-car-preview" style="background-image:url('${escapeAttr(photoUrl)}');"></div>
-        <p class="bpf-car-name">${escapeHtml(v.brand)} ${escapeHtml(v.model)}</p>
-        <p class="bpf-car-specs">${v.power_hp} ${t("hp")} • ${v.top_speed_kmh} ${t("kmh")} • ${escapeHtml(v.acceleration)}</p>
-    `;
-}
+    if (totalDays > 2) {
+        // Individuell mode: show info banner instead of pricing
+        bpfSidebarPlaceholder.style.display = "none";
+        bpfSidebarContent.style.display = "block";
+        bpfSidebarContent.innerHTML = `
+            <h4>${t("bpfPriceOverview")}</h4>
+            <div class="bpf-info-banner">
+                <p><strong>${t("bpfIndividuellTitle")}</strong></p>
+                <p>${t("bpfIndividuellDesc")}</p>
+            </div>
+            <div class="bpf-car-preview" style="background-image:url('${escapeAttr(photoUrl)}');"></div>
+            <p class="bpf-car-name">${escapeHtml(v.brand)} ${escapeHtml(v.model)}</p>
+            <p class="bpf-car-specs">${v.power_hp} ${t("hp")} • ${v.top_speed_kmh} ${t("kmh")} • ${escapeHtml(v.acceleration)}</p>
+        `;
+    } else {
+        bpfSidebarPlaceholder.style.display = "none";
+        bpfSidebarContent.style.display = "block";
+        bpfSidebarContent.innerHTML = `
+            <h4>${t("bpfPriceOverview")}</h4>
+            <div class="bpf-price-row"><span>${v.brand} ${v.model} · ${totalDays} ${t("bpfDays")}</span></div>
+            ${weekdays > 0 ? `<div class="bpf-price-row"><span>${t("bpfWeekdays")} (${weekdays} × € ${price.daily_price_eur})</span><span>€ ${weekdayCost.toLocaleString("de-DE")}</span></div>` : ""}
+            ${weekendDays > 0 ? `<div class="bpf-price-row"><span>${t("bpfWeekendDays")} (${weekendDays} × € ${price.weekend_price_eur})</span><span>€ ${weekendCost.toLocaleString("de-DE")}</span></div>` : ""}
+            <div class="bpf-price-row"><span>${t("bpfSubtotal")}</span><span>€ ${subtotal.toLocaleString("de-DE")}</span></div>
+            <div class="bpf-price-row muted"><span>${t("bpfVat")}</span><span>€ ${vat.toLocaleString("de-DE")}</span></div>
+            <div class="bpf-price-row total"><span>${t("bpfTotal")}</span><span>€ ${total.toLocaleString("de-DE")}</span></div>
+            <div class="bpf-price-row muted" style="margin-top:0.8rem;"><span>${t("bpfDeposit")}</span><span>€ ${deposit.toLocaleString("de-DE")}</span></div>
+            <div class="bpf-price-row muted"><span>${t("bpfIncludedKm")}</span><span>${includedKm} km</span></div>
+            <div class="bpf-price-row muted"><span>${t("bpfExtraKm")}</span><span>€ ${(price.price_per_km_eur || 1.50).toFixed(2).replace('.', ',')}${t("bpfPerKm")}</span></div>
+            <div class="bpf-car-preview" style="background-image:url('${escapeAttr(photoUrl)}');"></div>
+            <p class="bpf-car-name">${escapeHtml(v.brand)} ${escapeHtml(v.model)}</p>
+            <p class="bpf-car-specs">${v.power_hp} ${t("hp")} • ${v.top_speed_kmh} ${t("kmh")} • ${escapeHtml(v.acceleration)}</p>
+        `;
+    }
+
+ }

 bpfCar.addEventListener("change", updateSidebar);
 bpfFrom.addEventListener("change", updateSidebar);
@@ -89,6 +89,7 @@ export const translations = {
        bpfWeekendRate: "Wochenendmiete",
        bpfWeekendDef: "Wochenende: Samstag 9:00 – Sonntag 20:00",
        bpfMaxKm: "Max. km/Tag",
+        bpfInclKmPerDay: "Inkl. km/Tag",
        bpfExtraKm: "Extra km",
        bpfPriceOverview: "Preisübersicht",
        bpfSelectForPrice: "Wähle Fahrzeug und Datum für eine Preisübersicht",
@@ -176,7 +177,7 @@ export const translations = {
        adminVehicleTab: "Fahrzeug",
        adminPeriod: "Zeitraum",
        adminKaution: "Kaution (€)",
-        adminMaxKmWeekend: "Max. km/Wochenendtag",
+         adminMaxKmWeekend: "Inkl. km/Wochenende",
        adminTotalPrice: "Gesamtbetrag",
        adminLifetimeValueCol: "Gesamtwert",
        adminTabGeneral: "Allgemein",
@@ -231,9 +232,20 @@ export const translations = {
        adminFirstContacted: "Erster Kontakt",
        adminFirstContactedEn: "First contacted",
        adminNote: "Notiz",
-        adminNoteEn: "Note",
+       adminNoteEn: "Note",
        adminSave: "Speichern",
        adminSaveEn: "Save",
+        adminPricePerKm: "Preis extra km (€)",
+        adminRentalType: "Miettyp",
+        rentalTypeWeekend: "Wochenende",
+        rentalTypeIndividuell: "Individuell",
+        adminSortOrder: "Ordnung",
+        adminEmailSent: "Email",
+        sendEmailButton: "E-Mail senden",
+        emailSentToast: "E-Mail wird erstellt und in Kürze gesendet...",
+        emailAlreadySent: "Bereits gesendet",
+        bpfIndividuellTitle: "Individuelle Mietdauer",
+        bpfIndividuellDesc: "Bei Mietdauer über 2 Tagen erstellen wir ein persönliches Angebot. Wir prüfen Verfügbarkeit und melden uns in Kürze per E-Mail bei Ihnen.",
    },
    en: {
        navCars: "Fleet",
@@ -323,7 +335,8 @@ export const translations = {
        bpfDailyRate: "Daily rate",
        bpfWeekendRate: "Weekend rate",
        bpfWeekendDef: "Weekend: Saturday 9 AM – Sunday 8 PM",
-        bpfMaxKm: "Max. km/day",
+         bpfMaxKm: "Max. km/day",
+        bpfInclKmPerDay: "Included km/day",
        bpfExtraKm: "Extra km",
        bpfPriceOverview: "Price overview",
        bpfSelectForPrice: "Select vehicle and date for a price overview",
@@ -411,7 +424,7 @@ export const translations = {
        adminVehicleTab: "Vehicle",
        adminPeriod: "Period",
        adminKaution: "Deposit (€)",
-        adminMaxKmWeekend: "Max. km/weekend day",
+         adminMaxKmWeekend: "Included km/weekend",
        adminTotalPrice: "Total",
        adminLifetimeValueCol: "Lifetime",
        adminTabGeneral: "General",
@@ -469,6 +482,17 @@ export const translations = {
        adminNoteEn: "Notiz",
        adminSave: "Save",
        adminSaveEn: "Speichern",
+        adminPricePerKm: "Extra km price (€)",
+        adminRentalType: "Rental type",
+        rentalTypeWeekend: "Weekend",
+        rentalTypeIndividuell: "Custom",
+        adminSortOrder: "Order",
+        adminEmailSent: "Email",
+        sendEmailButton: "Send Email",
+        emailSentToast: "Email is being prepared and will be sent shortly...",
+        emailAlreadySent: "Already sent",
+        bpfIndividuellTitle: "Custom Rental Duration",
+        bpfIndividuellDesc: "For rental periods over 2 days, we'll create a personalized quote. We'll check availability and get back to you via email shortly.",
    },
 };

@@ -113,7 +113,6 @@

            <nav class="main-nav" aria-label="Hauptnavigation">
                <a href="#fahrzeuge" data-i18n="navCars">Fahrzeuge</a>
-                <a href="#warum"     data-i18n="navWhy">Warum wir</a>
                <a href="#stimmen"   data-i18n="navReviews">Stimmen</a>
                <a href="#buchen"    data-i18n="navBook">Buchen</a>
                <a class="btn small" href="#buchen" data-i18n="bookNow">Jetzt buchen</a>
@@ -179,37 +178,6 @@
            </div>
        </section>

-        <!-- Why -->
-        <section id="warum" style="background:var(--bg-elev);">
-                    <a href="/impressum" data-i18n="imprint">Impressum</a>
-                    <a href="/agb" data-i18n="terms">AGB</a>
-                    <a href="/mietbedingungen" data-i18n="rentalTerms">Mietbedingungen</a>
-                    <a href="/datenschutz" data-i18n="privacy">Datenschutz</a>
-                        <p class="eyebrow" data-i18n="whyEyebrow">Warum MC Cars</p>
-                        <h2 data-i18n="whyTitle">Keine Kompromisse zwischen Sicherheit und Fahrspaß.</h2>
-                    </div>
-                </div>
-
-                <div class="why-grid">
-                    <article class="why-card">
-                        <div class="icon">🛡</div>
-                        <h3 data-i18n="whyInsurance">Versicherungsschutz</h3>
-                        <p data-i18n="whyInsuranceText">Vollkasko mit klarem Selbstbehalt.</p>
-                    </article>
-                    <article class="why-card">
-                        <div class="icon">★</div>
-                        <h3 data-i18n="whyFleet">Premium Flotte</h3>
-                        <p data-i18n="whyFleetText">Handverlesene Performance-Modelle.</p>
-                    </article>
-                    <article class="why-card">
-                        <div class="icon">€</div>
-                        <h3 data-i18n="whyDeposit">Faire Kaution</h3>
-                        <p data-i18n="whyDepositText">Kein Überziehen. Transparente, faire Kaution ohne unnötige Belastung.</p>
-                    </article>
-                </div>
-            </div>
-        </section>
-
    <!-- Toast Notification -->
    <div id="toast" class="toast" role="status" aria-live="polite" aria-atomic="true"></div>
        <!-- Reviews -->
@@ -409,8 +377,7 @@
                <div>
                    <h4 data-i18n="footerNav">Navigation</h4>
                    <a href="#fahrzeuge" data-i18n="navCars">Fahrzeuge</a>
-                    <a href="#warum"     data-i18n="navWhy">Warum wir</a>
-                    <a href="#buchen"    data-i18n="navBook">Buchen</a>
+                <a href="#buchen"    data-i18n="navBook">Buchen</a>
                </div>

                <div>
@@ -447,6 +414,6 @@
    <div id="toast" class="toast" role="status" aria-live="polite" aria-atomic="true"></div>

    <script src="config.js"></script>
-    <script type="module" src="app.js"></script>
+    <script type="module" src="app.js?v=3"></script>
 </body>
 </html>
@@ -20,10 +20,9 @@ server {
        add_header Cache-Control "public";
        try_files $uri =404;
    }
-    # CSS/JS: 1-week cache; config.js is excluded by its exact-match rule above.
+    # CSS/JS: no cache to prevent stale content during development
    location ~* \.(?:css|js)$ {
-        expires 7d;
-        add_header Cache-Control "public, max-age=604800";
+        add_header Cache-Control "no-store";
        try_files $uri =404;
    }