From e24394866f327d079301776951861c368e29bd0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Sun, 6 Sep 2026 15:12:53 +0200
Subject: [PATCH] =?UTF-8?q?OTC-Verkauf=20vor=20dem=20Absenden=20best=C3=A4?=
 =?UTF-8?q?tigen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 modules/shared/auth/ui/home.php | 126 ++++++++++++++++++++++----------
 1 file changed, 89 insertions(+), 37 deletions(-)

diff --git a/modules/shared/auth/ui/home.php b/modules/shared/auth/ui/home.php
index bb226ef..76d9ca5 100644
--- a/modules/shared/auth/ui/home.php
+++ b/modules/shared/auth/ui/home.php
@@ -554,7 +554,8 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo '</section>';
     echo '</section>';
     echo '<section class="sg-otc-order-overlay" data-otc-order-overlay data-open="false" aria-hidden="true">';
-    echo '<article class="sg-card sg-object-card sg-object-card--variable-height sg-otc-order-overlay__panel" data-pattern="object-card" aria-labelledby="otc-order-modal-title" role="dialog" aria-modal="true">';
+    echo '<div class="sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host sg-object-card" data-pattern="overlay-card" data-dialog-open="false" data-otc-confirmation-stage>';
+    echo '<article class="sg-card sg-object-card sg-object-card--variable-height sg-otc-order-overlay__panel sg-delete-confirmation-pattern__target" data-pattern="object-card" aria-labelledby="otc-order-modal-title" role="dialog" aria-modal="true">';
     echo '<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">';
     echo '<h2 id="otc-order-modal-title" class="sg-strong sg-otc-order-overlay__title">Neuen OTC-Verkauf erfassen</h2>';
     echo '<button class="sg-interaction-element sg-button sg-button--active sg-otc-order-overlay__close" type="button" data-otc-order-close>Schliessen</button>';
@@ -624,13 +625,26 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo '<footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">';
     echo '<div class="sg-form-sections-card__actions" data-pattern-part="form-actions">';
     echo '<button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button" data-otc-order-close>Abbrechen</button>';
-    echo '<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true" data-otc-order-submit>Verkaufen</button>';
+    echo '<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true" data-otc-order-submit>Weiter</button>';
     echo '</div>';
     echo '</footer>';
     echo '</form>';
     echo '</div>';
     echo '</div>';
     echo '</article>';
+    echo '<article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Verkaufsbestätigung" role="dialog" aria-modal="true" aria-labelledby="otc-confirmation-title" data-otc-confirmation-card hidden>';
+    echo '<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">';
+    echo '<p class="sg-body sg-delete-confirmation-pattern__text" id="otc-confirmation-title"><strong>Verkauf bestätigen</strong></p>';
+    echo '<div class="sg-delete-confirmation-pattern__list" data-otc-confirmation-products aria-label="Produkte"></div>';
+    echo '<p class="sg-body sg-delete-confirmation-pattern__text"><strong>Gesamtzahl Flaschen: <span data-otc-confirmation-quantity>0</span></strong></p>';
+    echo '<p class="sg-body sg-delete-confirmation-pattern__text"><strong>Gesamtbetrag: CHF <span data-otc-confirmation-total>0.00</span></strong></p>';
+    echo '<div class="sg-delete-confirmation-pattern__actions">';
+    echo '<button class="sg-interaction-element sg-button sg-button--active" type="button" data-otc-confirmation-cancel>Abbrechen</button>';
+    echo '<button class="sg-interaction-element sg-button sg-button--process" type="button" data-otc-confirmation-submit>Verkaufen</button>';
+    echo '</div>';
+    echo '</div>';
+    echo '</article>';
+    echo '</div>';
     echo '</section>';
     echo '<script src="/scripts/help-icon-overlays.js"></script>';
     echo '<script>';
@@ -1208,6 +1222,13 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "  const errorEl = form.querySelector('[data-otc-order-error]');";
     echo "  const successEl = form.querySelector('[data-otc-order-success]');";
     echo "  const successDefaultText = successEl ? successEl.textContent : '';";
+    echo "  const confirmationStage = overlay.querySelector('[data-otc-confirmation-stage]');";
+    echo "  const confirmationCard = overlay.querySelector('[data-otc-confirmation-card]');";
+    echo "  const confirmationProducts = overlay.querySelector('[data-otc-confirmation-products]');";
+    echo "  const confirmationQuantity = overlay.querySelector('[data-otc-confirmation-quantity]');";
+    echo "  const confirmationTotal = overlay.querySelector('[data-otc-confirmation-total]');";
+    echo "  const confirmationSubmit = overlay.querySelector('[data-otc-confirmation-submit]');";
+    echo "  let pendingOrderData = null;";
     echo "  const openTriggers = () => document.querySelectorAll('[data-otc-order-open]');";
     echo "  const setTriggerState = (expanded) => {";
     echo "    openTriggers().forEach((trigger) => { trigger.setAttribute('aria-expanded', String(expanded)); });";
@@ -1288,6 +1309,27 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "    if (!preserveSuccess) { clearSuccess(); }";
     echo "    if (!preserveSuccess) { updateFormState(); }";
     echo "  };";
+    echo "  const closeConfirmation = () => {";
+    echo "    pendingOrderData = null;";
+    echo "    confirmationStage.dataset.dialogOpen = 'false';";
+    echo "    confirmationCard.hidden = true;";
+    echo "  };";
+    echo "  const openConfirmation = (orderData) => {";
+    echo "    pendingOrderData = orderData;";
+    echo "    confirmationProducts.replaceChildren();";
+    echo "    orderData.products.forEach((product) => {";
+    echo "      const input = productInputs.find((candidate) => parseInt(candidate.dataset.productId || '0', 10) === product.productId);";
+    echo "      const item = document.createElement('div');";
+    echo "      item.className = 'sg-body';";
+    echo "      item.textContent = (input?.dataset.title || 'Produkt') + ': ' + product.qty;";
+    echo "      confirmationProducts.appendChild(item);";
+    echo "    });";
+    echo "    confirmationQuantity.textContent = String(orderData.products.reduce((sum, product) => sum + product.qty, 0));";
+    echo "    confirmationTotal.textContent = orderData.payments.reduce((sum, payment) => sum + payment.amount, 0).toFixed(2);";
+    echo "    confirmationStage.dataset.dialogOpen = 'true';";
+    echo "    confirmationCard.hidden = false;";
+    echo "    requestAnimationFrame(() => confirmationSubmit.focus());";
+    echo "  };";
     echo "  overlay.addEventListener('pointerdown', (event) => {";
     echo "    backdropPointerDown = event.target === overlay;";
     echo "  });";
@@ -1345,9 +1387,47 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "  addPaymentButton.addEventListener('click', addPaymentRow);";
     echo "  bindPaymentRow(paymentRows.querySelector('[data-otc-payment-row]'));";
     echo "  updatePaymentAddButton();";
-    echo "  form.addEventListener('submit', async (event) => {";
-    echo "    event.preventDefault();";
+    echo "  const submitOrder = async (orderData) => {";
     echo "    let submissionSucceeded = false;";
+    echo "    const originalBtnText = confirmationSubmit.innerHTML;";
+    echo "    confirmationSubmit.innerHTML = '<span class=\"loading\"></span> Wird verarbeitet...';";
+    echo "    confirmationSubmit.disabled = true;";
+    echo "    clearError();";
+    echo "    try {";
+    echo "      const response = await fetch('/api/otc-order.php', {";
+    echo "        method: 'POST',";
+    echo "        headers: { 'Content-Type': 'application/json' },";
+    echo "        body: JSON.stringify(orderData)";
+    echo "      });";
+    echo "      const result = await response.json();";
+    echo "      if (response.ok && result.ok) {";
+    echo "        submissionSucceeded = true;";
+    echo "        if (successEl) {";
+    echo "          successEl.textContent = result.externalRef ? 'Bestellung erfolgreich erfasst! Bestellnummer: ' + result.externalRef : successDefaultText;";
+    echo "          successEl.classList.remove('hidden');";
+    echo "        }";
+    echo "        closeConfirmation();";
+    echo "        resetForm();";
+    echo "        toggleOverlay(false);";
+    echo "      } else if (errorEl) {";
+    echo "        errorEl.textContent = result.error || 'Unbekannter Fehler';";
+    echo "        errorEl.classList.remove('hidden');";
+    echo "        closeConfirmation();";
+    echo "      }";
+    echo "    } catch (error) {";
+    echo "      if (errorEl) {";
+    echo "        errorEl.textContent = 'Netzwerkfehler: ' + error.message;";
+    echo "        errorEl.classList.remove('hidden');";
+    echo "      }";
+    echo "      closeConfirmation();";
+    echo "    } finally {";
+    echo "      confirmationSubmit.innerHTML = originalBtnText;";
+    echo "      confirmationSubmit.disabled = false;";
+    echo "      if (!submissionSucceeded) { updateFormState(); }";
+    echo "    }";
+    echo "  };";
+    echo "  form.addEventListener('submit', (event) => {";
+    echo "    event.preventDefault();";
     echo "    if (!updateFormState()) { return; }";
     echo "    const products = productInputs";
     echo "      .filter((input) => getInputValue(input) > 0)";
@@ -1365,39 +1445,11 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "        city: getFieldValue(cityInput)";
     echo "      }";
     echo "    };";
-    echo "    const originalBtnText = submitBtn.innerHTML;";
-    echo "    submitBtn.innerHTML = '<span class=\"loading\"></span> Wird verarbeitet...';";
-    echo "    submitBtn.disabled = true;";
-    echo "    submitBtn.classList.add('sg-button--process-inactive');";
-    echo "    clearError();";
-    echo "    try {";
-    echo "      const response = await fetch('/api/otc-order.php', {";
-    echo "        method: 'POST',";
-    echo "        headers: { 'Content-Type': 'application/json' },";
-    echo "        body: JSON.stringify(orderData)";
-    echo "      });";
-    echo "      const result = await response.json();";
-    echo "      if (response.ok && result.ok) {";
-    echo "        submissionSucceeded = true;";
-    echo "        if (successEl) {";
-    echo "          successEl.textContent = result.externalRef ? 'Bestellung erfolgreich erfasst! Bestellnummer: ' + result.externalRef : successDefaultText;";
-    echo "          successEl.classList.remove('hidden');";
-    echo "        }";
-    echo "        resetForm();";
-    echo "        toggleOverlay(false);";
-    echo "      } else if (errorEl) {";
-    echo "        errorEl.textContent = result.error || 'Unbekannter Fehler';";
-    echo "        errorEl.classList.remove('hidden');";
-    echo "      }";
-    echo "    } catch (error) {";
-    echo "      if (errorEl) {";
-    echo "        errorEl.textContent = 'Netzwerkfehler: ' + error.message;";
-    echo "        errorEl.classList.remove('hidden');";
-    echo "      }";
-    echo "    } finally {";
-    echo "      submitBtn.innerHTML = originalBtnText;";
-    echo "      if (!submissionSucceeded) { updateFormState(); }";
-    echo "    }";
+    echo "    openConfirmation(orderData);";
+    echo "  });";
+    echo "  confirmationStage.addEventListener('click', (event) => {";
+    echo "    if (event.target.closest('[data-otc-confirmation-cancel]')) { closeConfirmation(); return; }";
+    echo "    if (event.target.closest('[data-otc-confirmation-submit]') && pendingOrderData) { submitOrder(pendingOrderData); }";
     echo "  });";
     echo "  updateFormState();";
     echo "})();";