From 69a9420c03e64fa421bd3db5f48ed777c4f4db84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 15 Jun 2026 13:29:20 +0200
Subject: [PATCH] OTC-Overlay im Home

---
 modules/erp/lager/service.php   |  31 ++++
 modules/shared/auth/ui/home.php | 272 +++++++++++++++++++++++++++++++-
 public/assets/styles.portal.css |  56 +++++++
 public/index.php                |   4 +-
 4 files changed, 360 insertions(+), 3 deletions(-)

diff --git a/modules/erp/lager/service.php b/modules/erp/lager/service.php
index dff6f56..fcfb98e 100644
--- a/modules/erp/lager/service.php
+++ b/modules/erp/lager/service.php
@@ -19,6 +19,37 @@ function get_default_location_ids(PDO $pdo): array
     ];
 }
 
+function get_otc_order_form_products(PDO $pdo): array
+{
+    $stmt = $pdo->query(
+        "SELECT
+            p.id,
+            p.name,
+            COALESCE(SUM(v.qty_net), 0) AS available_qty
+         FROM product p
+         INNER JOIN stock_lot sl
+             ON sl.product_id = p.id
+            AND sl.status = 'current'
+         INNER JOIN v_stock_lot_balance v
+             ON v.stock_lot_id = sl.id
+         WHERE p.status = 'active'
+         GROUP BY p.id, p.name
+         HAVING COALESCE(SUM(v.qty_net), 0) > 0
+         ORDER BY p.name ASC, p.id ASC"
+    );
+
+    $products = [];
+    foreach ($stmt->fetchAll() as $row) {
+        $products[] = [
+            'id' => (int) $row['id'],
+            'name' => (string) $row['name'],
+            'available_qty' => (float) $row['available_qty'],
+        ];
+    }
+
+    return $products;
+}
+
 function get_current_lot_balance_for_update(PDO $pdo, int $productId): array
 {
     $stmt = $pdo->prepare(
diff --git a/modules/shared/auth/ui/home.php b/modules/shared/auth/ui/home.php
index 5e85dc1..b2a9a42 100644
--- a/modules/shared/auth/ui/home.php
+++ b/modules/shared/auth/ui/home.php
@@ -3,8 +3,25 @@ declare(strict_types=1);
 
 require_once __DIR__ . '/../service.php';
 
-function render_auth_home_page(array $user): void
+function render_auth_home_page(array $user, array $otcProducts = []): void
 {
+    $otcProductRows = '';
+    foreach ($otcProducts as $product) {
+        $productId = (int) ($product['id'] ?? 0);
+        $productName = auth_escape_html((string) ($product['name'] ?? ''));
+        $availableQty = (int) max(0, (int) round((float) ($product['available_qty'] ?? 0)));
+        $inputId = 'otc-product-' . $productId;
+
+        $otcProductRows .= '<div class="sg-form-sections-card__field-group">';
+        $otcProductRows .= '<label class="sg-label" for="' . $inputId . '">' . $productName . '</label>';
+        $otcProductRows .= '<input class="sg-interaction-element sg-input-single-line" type="number" id="' . $inputId . '" min="0" max="' . $availableQty . '" step="1" value="0" data-otc-order-product data-product-id="' . $productId . '" data-title="' . $productName . '" data-available-qty="' . $availableQty . '">';
+        $otcProductRows .= '</div>';
+    }
+
+    if ($otcProductRows === '') {
+        $otcProductRows = '<p class="sg-body sg-form-sections-card__sentence">Keine verfügbaren Produkte im Lager.</p>';
+    }
+
     $moduleNavigation = json_encode(
         [
             'Übersicht' => [],
@@ -16,7 +33,7 @@ function render_auth_home_page(array $user): void
     );
     $moduleContentCards = json_encode(
         [
-            'Bestellungen' => '<article class="sg-card" data-component="basic-card"><div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body"><div class="sg-component-row sg-basic-card__actions"><button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">OTC-Bestellung erfassen</button></div></div></article>',
+            'Bestellungen' => '<article class="sg-card" data-component="basic-card"><div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body"><div class="sg-component-row sg-basic-card__actions"><button class="sg-interaction-element sg-button sg-button--active" type="button" aria-haspopup="dialog" aria-expanded="false" data-component="button" data-component-state="active" data-otc-order-open>OTC-Bestellung erfassen</button></div></div></article>',
         ],
         JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES
     );
@@ -100,6 +117,82 @@ function render_auth_home_page(array $user): void
     echo '</div>';
     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 '<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>';
+    echo '</header>';
+    echo '<div class="sg-card-segment sg-card-segment--gray sg-object-card__content">';
+    echo '<div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Formular mit Abschnitten">';
+    echo '<form class="sg-form-sections-card" action="#" method="post" data-otc-order-form aria-label="Neuen OTC-Verkauf erfassen">';
+    echo '<div class="sg-form-sections-card__body" data-pattern-part="form-body">';
+    echo '<section class="sg-form-sections-card__chapter" aria-labelledby="otc-products-title">';
+    echo '<h2 id="otc-products-title" class="sg-strong sg-form-sections-card__chapter-title">PRODUKTE</h2>';
+    echo $otcProductRows;
+    echo '</section>';
+    echo '<section class="sg-form-sections-card__chapter" aria-labelledby="otc-total-price-title">';
+    echo '<h2 id="otc-total-price-title" class="sg-strong sg-form-sections-card__chapter-title">Preis</h2>';
+    echo '<div class="sg-form-sections-card__field-group">';
+    echo '<label class="sg-label" for="otc-total-price">Preis alle Flaschen brutto (CHF)</label>';
+    echo '<input class="sg-interaction-element sg-input-single-line" type="number" id="otc-total-price" min="0" step="0.01" value="0.00" data-otc-order-total-price>';
+    echo '<p class="sg-body sg-form-sections-card__sentence">Der Preis wird durch die Anzahl aller Flaschen geteilt und das Ergebnis ist der Preis jeder einzelnen Flasche.</p>';
+    echo '</div>';
+    echo '</section>';
+    echo '<section class="sg-form-sections-card__chapter" aria-labelledby="otc-payment-title">';
+    echo '<h2 id="otc-payment-title" class="sg-strong sg-form-sections-card__chapter-title">Bezahlung</h2>';
+    echo '<div class="sg-form-sections-card__field-group">';
+    echo '<label class="sg-label" for="otc-payment-method">Bezahlung</label>';
+    echo '<select class="sg-interaction-element sg-input-single-line" id="otc-payment-method" data-otc-order-payment-method>';
+    echo '<option value="twint">Twint</option>';
+    echo '<option value="cash">Barzahlung</option>';
+    echo '<option value="paypal">PayPal</option>';
+    echo '<option value="bank_transfer">Überweisung</option>';
+    echo '</select>';
+    echo '</div>';
+    echo '</section>';
+    echo '<section class="sg-form-sections-card__chapter" aria-labelledby="otc-billing-title">';
+    echo '<h2 id="otc-billing-title" class="sg-strong sg-form-sections-card__chapter-title">Rechnungsadresse</h2>';
+    echo '<div class="sg-form-sections-card__field-group">';
+    echo '<label class="sg-label" for="otc-first-name">Vorname</label>';
+    echo '<input class="sg-interaction-element sg-input-single-line" type="text" id="otc-first-name" value="Fabienne" data-otc-order-first-name>';
+    echo '</div>';
+    echo '<div class="sg-form-sections-card__field-group">';
+    echo '<label class="sg-label" for="otc-last-name">Nachname</label>';
+    echo '<input class="sg-interaction-element sg-input-single-line" type="text" id="otc-last-name" value="Föhn" data-otc-order-last-name>';
+    echo '</div>';
+    echo '<div class="sg-form-sections-card__field-group">';
+    echo '<label class="sg-label" for="otc-street">Strasse</label>';
+    echo '<input class="sg-interaction-element sg-input-single-line" type="text" id="otc-street" value="Im Hochrain" data-otc-order-street>';
+    echo '</div>';
+    echo '<div class="sg-form-sections-card__field-group">';
+    echo '<label class="sg-label" for="otc-house-number">Hausnummer</label>';
+    echo '<input class="sg-interaction-element sg-input-single-line" type="text" id="otc-house-number" value="2" data-otc-order-house-number>';
+    echo '</div>';
+    echo '<div class="sg-form-sections-card__field-group">';
+    echo '<label class="sg-label" for="otc-zip">PLZ</label>';
+    echo '<input class="sg-interaction-element sg-input-single-line" type="text" id="otc-zip" value="8102" data-otc-order-zip>';
+    echo '</div>';
+    echo '<div class="sg-form-sections-card__field-group">';
+    echo '<label class="sg-label" for="otc-city">Ort</label>';
+    echo '<input class="sg-interaction-element sg-input-single-line" type="text" id="otc-city" value="Oberengstringen" data-otc-order-city>';
+    echo '</div>';
+    echo '<div class="sg-form-sections-card__field-group">';
+    echo '<div class="sg-body sg-otc-order-form__status hidden" data-otc-order-success>Bestellung erfolgreich erfasst! Die Bestellnummer wird automatisch generiert.</div>';
+    echo '<div class="sg-body sg-otc-order-form__status sg-otc-order-form__status--error hidden" data-otc-order-error></div>';
+    echo '</div>';
+    echo '</div>';
+    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 '</div>';
+    echo '</footer>';
+    echo '</form>';
+    echo '</div>';
+    echo '</div>';
+    echo '</article>';
+    echo '</section>';
     echo '<script>';
     echo 'const portalModuleNavigation = ' . $moduleNavigation . ';';
     echo 'const portalModuleContentCards = ' . $moduleContentCards . ';';
@@ -205,6 +298,181 @@ function render_auth_home_page(array $user): void
     echo "  syncMode();";
     echo "  mediaQuery.addEventListener('change', syncMode);";
     echo "})();";
+    echo "(() => {";
+    echo "  const overlay = document.querySelector('[data-otc-order-overlay]');";
+    echo "  if (!overlay) { return; }";
+    echo "  const form = overlay.querySelector('[data-otc-order-form]');";
+    echo "  const productInputs = Array.from(form.querySelectorAll('[data-otc-order-product]'));";
+    echo "  const totalPriceInput = form.querySelector('[data-otc-order-total-price]');";
+    echo "  const paymentMethodInput = form.querySelector('[data-otc-order-payment-method]');";
+    echo "  const firstNameInput = form.querySelector('[data-otc-order-first-name]');";
+    echo "  const lastNameInput = form.querySelector('[data-otc-order-last-name]');";
+    echo "  const streetInput = form.querySelector('[data-otc-order-street]');";
+    echo "  const houseNumberInput = form.querySelector('[data-otc-order-house-number]');";
+    echo "  const zipInput = form.querySelector('[data-otc-order-zip]');";
+    echo "  const cityInput = form.querySelector('[data-otc-order-city]');";
+    echo "  const submitBtn = form.querySelector('[data-otc-order-submit]');";
+    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 openTriggers = () => document.querySelectorAll('[data-otc-order-open]');";
+    echo "  const setTriggerState = (expanded) => {";
+    echo "    openTriggers().forEach((trigger) => { trigger.setAttribute('aria-expanded', String(expanded)); });";
+    echo "  };";
+    echo "  const clearError = () => {";
+    echo "    if (errorEl) { errorEl.textContent = ''; errorEl.classList.add('hidden'); }";
+    echo "  };";
+    echo "  const clearSuccess = () => {";
+    echo "    if (successEl) { successEl.textContent = successDefaultText; successEl.classList.add('hidden'); }";
+    echo "  };";
+    echo "  const toggleOverlay = (isOpen) => {";
+    echo "    overlay.dataset.open = String(isOpen);";
+    echo "    overlay.setAttribute('aria-hidden', String(!isOpen));";
+    echo "    document.body.classList.toggle('sg-otc-order-overlay-open', isOpen);";
+    echo "    setTriggerState(isOpen);";
+    echo "    if (isOpen) {";
+    echo "      clearError();";
+    echo "      clearSuccess();";
+    echo "      requestAnimationFrame(() => {";
+    echo "        (productInputs[0] || totalPriceInput || submitBtn)?.focus();";
+    echo "      });";
+    echo "      return;";
+    echo "    }";
+    echo "    clearError();";
+    echo "    clearSuccess();";
+    echo "  };";
+    echo "  const getInputValue = (input) => parseInt(input.value || '0', 10) || 0;";
+    echo "  const getFieldValue = (input) => (input ? input.value.trim() : '');";
+    echo "  const updateFormState = () => {";
+    echo "    const totalQty = productInputs.reduce((sum, input) => sum + getInputValue(input), 0);";
+    echo "    const totalPrice = parseFloat(totalPriceInput.value || '0') || 0;";
+    echo "    const overstockInput = productInputs.find((input) => {";
+    echo "      const maxQty = parseInt(input.max || '0', 10);";
+    echo "      return Number.isFinite(maxQty) && maxQty >= 0 && getInputValue(input) > maxQty;";
+    echo "    });";
+    echo "    const isValid = totalQty > 0";
+    echo "      && totalPrice > 0";
+    echo "      && !!getFieldValue(paymentMethodInput)";
+    echo "      && !!getFieldValue(firstNameInput)";
+    echo "      && !!getFieldValue(lastNameInput)";
+    echo "      && !!getFieldValue(streetInput)";
+    echo "      && !!getFieldValue(houseNumberInput)";
+    echo "      && !!getFieldValue(zipInput)";
+    echo "      && !!getFieldValue(cityInput)";
+    echo "      && overstockInput === undefined;";
+    echo "    let errorMsg = '';";
+    echo "    if (overstockInput) {";
+    echo "      errorMsg = 'Menge für ' + overstockInput.dataset.title + ' überschreitet den Lagerbestand.';";
+    echo "    } else if (totalQty === 0) {";
+    echo "      errorMsg = 'Mindestens ein Produkt mit Menge > 0 erforderlich.';";
+    echo "    } else if (totalPrice <= 0) {";
+    echo "      errorMsg = 'Preis muss größer als 0 sein.';";
+    echo "    } else if (!getFieldValue(paymentMethodInput)) {";
+    echo "      errorMsg = 'Zahlungsart auswählen.';";
+    echo "    } else if (!getFieldValue(firstNameInput) || !getFieldValue(lastNameInput) || !getFieldValue(streetInput) || !getFieldValue(houseNumberInput) || !getFieldValue(zipInput) || !getFieldValue(cityInput)) {";
+    echo "      errorMsg = 'Alle Rechnungsadress-Felder ausfüllen.';";
+    echo "    }";
+    echo "    if (errorEl) {";
+    echo "      errorEl.textContent = errorMsg;";
+    echo "      errorEl.classList.toggle('hidden', errorMsg === '');";
+    echo "    }";
+    echo "    submitBtn.disabled = !isValid;";
+    echo "    submitBtn.setAttribute('aria-disabled', String(!isValid));";
+    echo "    submitBtn.classList.toggle('sg-button--process-inactive', !isValid);";
+    echo "    return isValid;";
+    echo "  };";
+    echo "  const resetForm = (preserveSuccess = false) => {";
+    echo "    form.reset();";
+    echo "    productInputs.forEach((input) => { input.value = '0'; });";
+    echo "    if (totalPriceInput) { totalPriceInput.value = '0.00'; }";
+    echo "    clearError();";
+    echo "    if (!preserveSuccess) { clearSuccess(); }";
+    echo "    updateFormState();";
+    echo "  };";
+    echo "  document.addEventListener('click', (event) => {";
+    echo "    const openTrigger = event.target.closest('[data-otc-order-open]');";
+    echo "    if (openTrigger) {";
+    echo "      event.preventDefault();";
+    echo "      toggleOverlay(true);";
+    echo "      return;";
+    echo "    }";
+    echo "    const closeTrigger = event.target.closest('[data-otc-order-close]');";
+    echo "    if (closeTrigger) {";
+    echo "      event.preventDefault();";
+    echo "      toggleOverlay(false);";
+    echo "    }";
+    echo "  });";
+    echo "  overlay.addEventListener('click', (event) => {";
+    echo "    if (event.target === overlay) {";
+    echo "      toggleOverlay(false);";
+    echo "    }";
+    echo "  });";
+    echo "  document.addEventListener('keydown', (event) => {";
+    echo "    if (event.key === 'Escape' && overlay.dataset.open === 'true') {";
+    echo "      toggleOverlay(false);";
+    echo "    }";
+    echo "  });";
+    echo "  [totalPriceInput, paymentMethodInput, firstNameInput, lastNameInput, streetInput, houseNumberInput, zipInput, cityInput].forEach((input) => {";
+    echo "    if (!input) { return; }";
+    echo "    input.addEventListener('input', updateFormState);";
+    echo "    input.addEventListener('change', updateFormState);";
+    echo "  });";
+    echo "  productInputs.forEach((input) => {";
+    echo "    input.addEventListener('input', updateFormState);";
+    echo "    input.addEventListener('change', updateFormState);";
+    echo "  });";
+    echo "  form.addEventListener('submit', async (event) => {";
+    echo "    event.preventDefault();";
+    echo "    if (!updateFormState()) { return; }";
+    echo "    const products = productInputs";
+    echo "      .filter((input) => getInputValue(input) > 0)";
+    echo "      .map((input) => ({ title: input.dataset.title, qty: getInputValue(input), productId: parseInt(input.dataset.productId || '0', 10) }));";
+    echo "    const orderData = {";
+    echo "      products: products,";
+    echo "      totalPrice: parseFloat(totalPriceInput.value || '0') || 0,";
+    echo "      paymentMethod: paymentMethodInput ? paymentMethodInput.value : '',";
+    echo "      billing: {";
+    echo "        firstName: getFieldValue(firstNameInput),";
+    echo "        lastName: getFieldValue(lastNameInput),";
+    echo "        street: getFieldValue(streetInput),";
+    echo "        houseNumber: getFieldValue(houseNumberInput),";
+    echo "        zip: getFieldValue(zipInput),";
+    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 "    clearError();";
+    echo "    try {";
+    echo "      const response = await fetch('/public/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 "        if (successEl) {";
+    echo "          successEl.textContent = result.externalRef ? 'Bestellung erfolgreich erfasst! Bestellnummer: ' + result.externalRef : successDefaultText;";
+    echo "          successEl.classList.remove('hidden');";
+    echo "        }";
+    echo "        resetForm(true);";
+    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 "      updateFormState();";
+    echo "    }";
+    echo "  });";
+    echo "  updateFormState();";
+    echo "})();";
     echo "renderMainHeading('ERP');";
     echo "renderLeftNavigation('ERP');";
     echo '</script>';
diff --git a/public/assets/styles.portal.css b/public/assets/styles.portal.css
index c1f6497..090758b 100644
--- a/public/assets/styles.portal.css
+++ b/public/assets/styles.portal.css
@@ -26,3 +26,59 @@
 .sg-left-navigation-pattern__group-card--content {
   align-content: flex-start;
 }
+
+body.sg-otc-order-overlay-open {
+  overflow: hidden;
+}
+
+.sg-otc-order-overlay {
+  position: fixed;
+  inset: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-large);
+  background: rgba(15, 23, 42, 0.58);
+  z-index: 1200;
+}
+
+.sg-otc-order-overlay[data-open="true"] {
+  display: flex;
+}
+
+.sg-otc-order-overlay__panel {
+  width: min(960px, 100%);
+  max-height: calc(100vh - (2 * var(--spacing-large)));
+  overflow: auto;
+}
+
+.sg-otc-order-overlay__title {
+  margin: 0;
+}
+
+.sg-otc-order-overlay__close {
+  margin-left: auto;
+}
+
+.sg-otc-order-form__status {
+  margin: 0;
+}
+
+.sg-otc-order-form__status--error {
+  color: var(--color-signal-red);
+}
+
+.sg-otc-order-overlay .sg-form-sections-card__field-group {
+  gap: var(--spacing-small);
+}
+
+.sg-otc-order-overlay .sg-form-sections-card__field-group > .sg-label {
+  display: block;
+}
+
+.sg-otc-order-overlay .sg-form-sections-card__field-group > .sg-input-single-line,
+.sg-otc-order-overlay .sg-form-sections-card__field-group > .sg-input-single-line-wrap,
+.sg-otc-order-overlay .sg-form-sections-card__field-group > .sg-input-multi-line {
+  width: 100%;
+  max-width: none;
+}
diff --git a/public/index.php b/public/index.php
index 51ba967..7138d3f 100644
--- a/public/index.php
+++ b/public/index.php
@@ -4,6 +4,7 @@ declare(strict_types=1);
 require_once __DIR__ . '/../modules/shared/auth/service.php';
 require_once __DIR__ . '/../modules/shared/auth/ui/login.php';
 require_once __DIR__ . '/../modules/shared/auth/ui/home.php';
+require_once __DIR__ . '/../modules/erp/lager/service.php';
 
 $env = expand_env_values(parse_env_file(__DIR__ . '/../.env'));
 $pdo = connect_database($env);
@@ -43,7 +44,8 @@ if (($_SERVER['REQUEST_METHOD'] ?? 'GET') === 'POST') {
 
 $currentUser = auth_current_user($pdo);
 if ($currentUser !== null) {
-    render_auth_home_page($currentUser);
+    $otcProducts = get_otc_order_form_products($pdo);
+    render_auth_home_page($currentUser, $otcProducts);
     exit;
 }