898 lines
52 KiB
PHP
898 lines
52 KiB
PHP
<?php
|
||
declare(strict_types=1);
|
||
|
||
require_once __DIR__ . '/../service.php';
|
||
|
||
function auth_current_path(): string
|
||
{
|
||
$requestUri = (string) ($_SERVER['REQUEST_URI'] ?? '/');
|
||
$path = parse_url($requestUri, PHP_URL_PATH);
|
||
|
||
if (!is_string($path) || $path === '') {
|
||
return '/';
|
||
}
|
||
|
||
return $path;
|
||
}
|
||
|
||
function auth_build_path_with_query(array $query = []): string
|
||
{
|
||
$query = array_filter(
|
||
$query,
|
||
static fn ($value): bool => $value !== null && $value !== ''
|
||
);
|
||
|
||
$path = auth_current_path();
|
||
$queryString = http_build_query($query, '', '&', PHP_QUERY_RFC3986);
|
||
|
||
return $queryString === '' ? $path : $path . '?' . $queryString;
|
||
}
|
||
|
||
function auth_format_bestellung_date(?string $value): string
|
||
{
|
||
if ($value === null || $value === '') {
|
||
return '';
|
||
}
|
||
|
||
try {
|
||
return (new DateTimeImmutable($value))->format('d.m.Y H:i');
|
||
} catch (Throwable) {
|
||
return $value;
|
||
}
|
||
}
|
||
|
||
function auth_format_bestellung_total(?float $value): string
|
||
{
|
||
if ($value === null) {
|
||
return '';
|
||
}
|
||
|
||
return 'CHF ' . number_format($value, 2, '.', '\'');
|
||
}
|
||
|
||
function auth_render_bestellungen_large_table(array $bestellungenTable): string
|
||
{
|
||
$rows = $bestellungenTable['rows'] ?? [];
|
||
$search = (string) ($bestellungenTable['search'] ?? '');
|
||
$sortColumn = (string) ($bestellungenTable['sort_column'] ?? 'order_date');
|
||
$sortDirection = strtoupper((string) ($bestellungenTable['sort_direction'] ?? 'DESC'));
|
||
$limit = (int) ($bestellungenTable['limit'] ?? 20);
|
||
$pageSize = (int) ($bestellungenTable['page_size'] ?? 20);
|
||
$hasMore = (bool) ($bestellungenTable['has_more'] ?? false);
|
||
$nextLimit = (int) ($bestellungenTable['next_limit'] ?? $limit);
|
||
|
||
$sortColumns = [
|
||
'order_date' => 'Bestelldatum',
|
||
'external_ref' => 'Bestellnummer',
|
||
'name' => 'Name',
|
||
'total_amount' => 'Gesamtsumme',
|
||
];
|
||
|
||
$html = [];
|
||
$html[] = '<section class="sg-card-list-page" aria-label="Bestellungen">';
|
||
$html[] = '<article class="sg-card sg-large-table" style="margin-top: var(--spacing-large);" data-component="large-table" data-bestellungen-large-table="true" data-bestellungen-search="' . auth_escape_html($search) . '" data-bestellungen-sort-column="' . auth_escape_html($sortColumn) . '" data-bestellungen-sort-direction="' . auth_escape_html($sortDirection) . '" data-bestellungen-limit="' . $limit . '" data-bestellungen-page-size="' . $pageSize . '" role="table" aria-label="Bestellungen">';
|
||
$html[] = '<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-large-table__title-segment" data-component-part="large-table-header">';
|
||
$html[] = '<div class="sg-strong">Bestellungen</div>';
|
||
$html[] = '<span class="sg-search-field-row" data-component="search-field">';
|
||
$html[] = '<span class="sg-input-single-line-wrap" data-has-value="' . ($search !== '' ? 'true' : 'false') . '" data-component="single-line-input" data-component-state="' . ($search !== '' ? 'active' : 'inactive-selectable') . '">';
|
||
$html[] = '<input class="sg-interaction-element sg-input-single-line sg-search-field-input sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" placeholder="Suche" aria-label="Bestellungen durchsuchen" value="' . auth_escape_html($search) . '" data-large-table-search data-bestellungen-search-input>';
|
||
$html[] = '<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen" data-bestellungen-search-clear>×</button>';
|
||
$html[] = '</span>';
|
||
$html[] = '</span>';
|
||
$html[] = '</div>';
|
||
$html[] = '<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row sg-large-table__row--header" role="row" data-component-part="large-table-header-row">';
|
||
|
||
$headerIndex = 0;
|
||
foreach ($sortColumns as $column => $label) {
|
||
$isActive = $column === $sortColumn;
|
||
$headerDirection = $isActive ? strtolower($sortDirection) : 'none';
|
||
$iconDirection = $isActive ? strtolower($sortDirection) : 'ascending';
|
||
$ariaLabel = $isActive
|
||
? $label . ' ' . ($sortDirection === 'ASC' ? 'aufsteigend sortiert' : 'absteigend sortiert')
|
||
: $label . ' sortieren';
|
||
$targetDirection = $isActive
|
||
? ($sortDirection === 'ASC' ? 'DESC' : 'ASC')
|
||
: ($column === 'order_date' ? 'DESC' : 'ASC');
|
||
|
||
$html[] = '<div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="' . $headerDirection . '" data-sort-key="' . $headerIndex . '">';
|
||
$html[] = '<button class="sg-large-table__sort-button" type="button" aria-label="' . auth_escape_html($ariaLabel) . '" data-bestellungen-sort-button="true" data-bestellungen-sort-column="' . auth_escape_html($column) . '" data-bestellungen-sort-direction="' . auth_escape_html($targetDirection) . '">';
|
||
$html[] = '<span class="sg-large-table__sort-label">' . auth_escape_html($label) . '</span>';
|
||
$html[] = '<span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="' . auth_escape_html($iconDirection) . '"></span>';
|
||
$html[] = '</button>';
|
||
$html[] = '</div>';
|
||
$headerIndex++;
|
||
}
|
||
|
||
$html[] = '</div>';
|
||
|
||
foreach ($rows as $index => $row) {
|
||
$isStriped = $index % 2 === 1;
|
||
$rowClass = 'sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row';
|
||
if ($isStriped) {
|
||
$rowClass .= ' sg-large-table__row--striped-light';
|
||
}
|
||
|
||
$orderNumber = (string) ($row['external_ref'] ?? '');
|
||
$orderDate = auth_format_bestellung_date((string) ($row['order_date'] ?? ''));
|
||
$totalAmount = auth_format_bestellung_total(isset($row['total_amount']) ? (float) $row['total_amount'] : null);
|
||
$firstName = (string) ($row['first_name'] ?? '');
|
||
$lastName = (string) ($row['last_name'] ?? '');
|
||
$name = trim($firstName . ' ' . $lastName);
|
||
$street = (string) ($row['street'] ?? '');
|
||
$houseNumber = (string) ($row['house_number'] ?? '');
|
||
$zip = (string) ($row['zip'] ?? '');
|
||
$city = (string) ($row['city'] ?? '');
|
||
$country = (string) ($row['country_name'] ?? '');
|
||
|
||
$html[] = '<div class="' . $rowClass . '" role="row" data-component-part="large-table-row" data-bestellungen-row="true">';
|
||
$html[] = '<div class="sg-large-table__cell" role="cell">' . auth_escape_html($orderDate) . '</div>';
|
||
$html[] = '<div class="sg-large-table__cell" role="cell">';
|
||
$html[] = '<a class="sg-hyperlink" href="#" aria-haspopup="dialog" aria-expanded="false" data-order-drawer-open="true" data-order-id="' . (int) ($row['id'] ?? 0) . '" data-order-number="' . auth_escape_html($orderNumber) . '" data-order-date="' . auth_escape_html($orderDate) . '" data-order-total="' . auth_escape_html($totalAmount) . '" data-order-first-name="' . auth_escape_html($firstName) . '" data-order-last-name="' . auth_escape_html($lastName) . '" data-order-street="' . auth_escape_html($street) . '" data-order-house-number="' . auth_escape_html($houseNumber) . '" data-order-zip="' . auth_escape_html($zip) . '" data-order-city="' . auth_escape_html($city) . '" data-order-country="' . auth_escape_html($country) . '">' . auth_escape_html($orderNumber) . '</a>';
|
||
$html[] = '</div>';
|
||
$html[] = '<div class="sg-large-table__cell" role="cell">' . auth_escape_html($name) . '</div>';
|
||
$html[] = '<div class="sg-large-table__cell" role="cell">' . auth_escape_html($totalAmount) . '</div>';
|
||
$html[] = '</div>';
|
||
}
|
||
|
||
if ($hasMore) {
|
||
$loadMoreUrl = auth_build_path_with_query([
|
||
'bestellungen_search' => $search !== '' ? $search : null,
|
||
'bestellungen_sort' => $sortColumn,
|
||
'bestellungen_dir' => $sortDirection,
|
||
'bestellungen_limit' => $nextLimit,
|
||
]);
|
||
|
||
$html[] = '<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row sg-large-table__row--load-more" role="row" data-component-part="large-table-row" data-large-table-load-more-row="true">';
|
||
$html[] = '<div class="sg-large-table__cell sg-large-table__cell--load-more" role="cell">';
|
||
$html[] = '<div class="sg-navigation-card-layout sg-large-table__load-more-layout">';
|
||
$html[] = '<div class="sg-navigation-card-block">';
|
||
$html[] = '<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Mehr laden">';
|
||
$html[] = '<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">';
|
||
$html[] = '<div class="sg-navigation-card-center">';
|
||
$html[] = '<a class="sg-hyperlink" href="' . auth_escape_html($loadMoreUrl) . '" data-component="hyperlink" data-large-table-load-more-trigger="true">Mehr laden</a>';
|
||
$html[] = '</div>';
|
||
$html[] = '</div>';
|
||
$html[] = '</article>';
|
||
$html[] = '</div>';
|
||
$html[] = '</div>';
|
||
$html[] = '</div>';
|
||
$html[] = '</div>';
|
||
}
|
||
|
||
$html[] = '</article>';
|
||
$html[] = '</section>';
|
||
|
||
$html[] = '<aside class="sg-card-list-page-drawer" aria-label="Bestell-Details" aria-hidden="true" data-bestellungen-drawer="true" data-open="false">';
|
||
$html[] = '<div class="sg-card-list-page-drawer__header">';
|
||
$html[] = '<h2 class="sg-heading-h2 sg-card-list-page-drawer__title" data-order-drawer-title>Bestellung</h2>';
|
||
$html[] = '<button class="sg-interaction-element sg-hyperlink" type="button" data-order-drawer-close>schliessen</button>';
|
||
$html[] = '</div>';
|
||
$html[] = '<div class="sg-card-list-page-drawer__content">';
|
||
$html[] = '<article class="sg-card sg-vsf-drawer-card" data-component="card" data-pattern="card" aria-label="Bestell-Details">';
|
||
$html[] = '<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-vsf-drawer-card__header">';
|
||
$html[] = '<div class="sg-strong">Bestell-Details</div>';
|
||
$html[] = '</header>';
|
||
$html[] = '<div class="sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content">';
|
||
$html[] = '<p class="sg-body"><strong>Bestellnummer:</strong> <span data-order-drawer-order-number></span></p>';
|
||
$html[] = '<p class="sg-body"><strong>Bestelldatum:</strong> <span data-order-drawer-order-date></span></p>';
|
||
$html[] = '<p class="sg-body"><strong>Lieferadresse:</strong></p>';
|
||
$html[] = '<p class="sg-body" data-order-drawer-address-line-1></p>';
|
||
$html[] = '<p class="sg-body" data-order-drawer-address-line-2></p>';
|
||
$html[] = '<p class="sg-body" data-order-drawer-address-line-3></p>';
|
||
$html[] = '<p class="sg-body"><strong>Gesamtsumme:</strong> <span data-order-drawer-total></span></p>';
|
||
$html[] = '<p class="sg-body">Detailinhalt wird noch definiert.</p>';
|
||
$html[] = '</div>';
|
||
$html[] = '</article>';
|
||
$html[] = '</div>';
|
||
$html[] = '</aside>';
|
||
|
||
return implode('', $html);
|
||
}
|
||
|
||
function auth_render_bestellungen_content(array $bestellungenTable): string
|
||
{
|
||
return '<div data-bestellungen-content="true">'
|
||
. '<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>'
|
||
. auth_render_bestellungen_large_table($bestellungenTable)
|
||
. '</div>';
|
||
}
|
||
|
||
function render_auth_home_page(array $user, array $otcProducts = [], array $bestellungenTable = []): 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" 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' => [],
|
||
'ERP' => ['Bestellungen', 'Lager', 'Kontakte'],
|
||
'Buchhaltung' => [],
|
||
'Kundenberatung' => [],
|
||
],
|
||
JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES
|
||
);
|
||
$bestellungenContent = auth_render_bestellungen_content($bestellungenTable);
|
||
$moduleContentCards = json_encode(
|
||
[
|
||
'Bestellungen' => $bestellungenContent,
|
||
],
|
||
JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES
|
||
);
|
||
$moduleHeadings = json_encode(
|
||
[
|
||
'Übersicht' => 'Willkommen bei Naurua Übersicht',
|
||
'ERP' => 'Willkommen bei Naurua ERP',
|
||
'Buchhaltung' => 'Willkommen bei Naurua Buchhaltung',
|
||
'Kundenberatung' => 'Willkommen bei Naurua Kundenberatung',
|
||
],
|
||
JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES
|
||
);
|
||
|
||
echo '<!doctype html>';
|
||
echo '<html lang="de">';
|
||
echo '<head>';
|
||
echo '<meta charset="UTF-8">';
|
||
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0">';
|
||
echo '<title>Naurua ERP</title>';
|
||
echo '<link rel="stylesheet" href="/assets/styles.css">';
|
||
echo '<link rel="stylesheet" href="/assets/styles.portal.css?v=' . filemtime(__DIR__ . '/../../../../public/assets/styles.portal.css') . '">';
|
||
echo '</head>';
|
||
echo '<body>';
|
||
echo '<section id="pattern-portal-header" class="sg-vsf-list-overview-page-v2">';
|
||
echo '<article class="sg-portal-header-pattern-variant" aria-label="Portal Header">';
|
||
echo '<header class="sg-portal-header" aria-label="Portal Header" data-pattern="portal-header">';
|
||
echo '<div class="sg-portal-header__main" data-pattern-part="portal-header-main">';
|
||
echo '<p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">Naurua ERP</p>';
|
||
echo '<div class="sg-portal-header__menu-wrap sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action">';
|
||
echo '<button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">';
|
||
echo '<span class="sg-sandwich-button__icon" aria-hidden="true">';
|
||
echo '<span class="sg-sandwich-button__line"></span>';
|
||
echo '<span class="sg-sandwich-button__line"></span>';
|
||
echo '<span class="sg-sandwich-button__line"></span>';
|
||
echo '</span>';
|
||
echo '</button>';
|
||
echo '<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">';
|
||
echo '<a class="sg-sandwich-menu-link" href="/" data-component-part="sandwich-menu-link">Startseite</a>';
|
||
echo '<a class="sg-sandwich-menu-link" href="/logout.php" data-component-part="sandwich-menu-link">Abmelden</a>';
|
||
echo '</div>';
|
||
echo '</div>';
|
||
echo '<nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">';
|
||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Übersicht</button>';
|
||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="true" data-component-part="tab-button" data-component-state="active">ERP</button>';
|
||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Buchhaltung</button>';
|
||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Kundenberatung</button>';
|
||
echo '</nav>';
|
||
echo '</div>';
|
||
echo '</header>';
|
||
echo '</article>';
|
||
echo '<div class="sg-transparent-card" data-component="transparent-card">';
|
||
echo '<h1 class="sg-main-heading" data-main-heading aria-live="polite">Willkommen bei Naurua ERP</h1>';
|
||
echo '</div>';
|
||
echo '<section class="sg-left-navigation-pattern" aria-label="Linke Navigation">';
|
||
echo '<div class="sg-left-navigation-pattern__layout" aria-label="Left Navigation Demo">';
|
||
echo '<aside class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--navigation" data-component="group-card" aria-label="Navigation">';
|
||
echo '<div class="sg-group-card__header-row sg-left-navigation-pattern__header-row">';
|
||
echo '<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading" data-left-navigation-title aria-live="polite">ERP</h2>';
|
||
echo '<button class="sg-interaction-element sg-button sg-button--active sg-left-navigation-pattern__toggle" type="button" data-left-navigation-toggle aria-expanded="true" aria-controls="left-navigation-menu">Ausblenden</button>';
|
||
echo '</div>';
|
||
echo '<nav class="sg-tab-button-group" id="left-navigation-menu" role="tablist" aria-label="Linksmenue Items" data-component="tab-navigation" data-component-size="large" data-component-variant="linksmenu-items">';
|
||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" data-component-part="tab-button">Bestellungen</button>';
|
||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Lager</button>';
|
||
echo '<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Kontakte</button>';
|
||
echo '</nav>';
|
||
echo '</aside>';
|
||
echo '<section class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--content" data-component="group-card" aria-hidden="true">';
|
||
echo '<div class="sg-group-card__header-row sg-left-navigation-pattern__header-row">';
|
||
echo '<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading" data-left-navigation-content-title aria-live="polite">Bestellungen</h2>';
|
||
echo '</div>';
|
||
echo '<div data-left-navigation-content-body>';
|
||
echo $bestellungenContent;
|
||
echo '</div>';
|
||
echo '</section>';
|
||
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" 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 src="/scripts/help-icon-overlays.js"></script>';
|
||
echo '<script>';
|
||
echo 'const portalModuleNavigation = ' . $moduleNavigation . ';';
|
||
echo 'const portalModuleContentCards = ' . $moduleContentCards . ';';
|
||
echo 'const portalModuleHeadings = ' . $moduleHeadings . ';';
|
||
echo "const renderMainHeading = (moduleName) => {";
|
||
echo " const heading = document.querySelector('[data-main-heading]');";
|
||
echo " if (heading && portalModuleHeadings[moduleName]) { heading.textContent = portalModuleHeadings[moduleName]; }";
|
||
echo "};";
|
||
echo "const renderLeftNavigation = (moduleName) => {";
|
||
echo " const title = document.querySelector('[data-left-navigation-title]');";
|
||
echo " const contentTitle = document.querySelector('[data-left-navigation-content-title]');";
|
||
echo " const contentBody = document.querySelector('[data-left-navigation-content-body]');";
|
||
echo " const menu = document.getElementById('left-navigation-menu');";
|
||
echo " if (title) { title.textContent = moduleName; }";
|
||
echo " if (!menu) { return; }";
|
||
echo " const entries = portalModuleNavigation[moduleName] || [];";
|
||
echo " const activeEntry = entries[0] || '';";
|
||
echo " if (contentTitle) { contentTitle.textContent = activeEntry; }";
|
||
echo " if (contentBody) { contentBody.innerHTML = portalModuleContentCards[activeEntry] || ''; }";
|
||
echo " if (activeEntry === 'Bestellungen') { initBestellungenBindings(); }";
|
||
echo " menu.innerHTML = '';";
|
||
echo " entries.forEach((entry, index) => {";
|
||
echo " const button = document.createElement('button');";
|
||
echo " button.className = 'sg-interaction-element sg-button sg-tab-button';";
|
||
echo " button.type = 'button';";
|
||
echo " button.setAttribute('role', 'tab');";
|
||
echo " button.setAttribute('data-component-part', 'tab-button');";
|
||
echo " button.setAttribute('aria-selected', String(index === 0));";
|
||
echo " button.textContent = entry;";
|
||
echo " menu.appendChild(button);";
|
||
echo " });";
|
||
echo " menu.querySelectorAll('.sg-tab-button').forEach((button) => {";
|
||
echo " button.addEventListener('click', () => {";
|
||
echo " menu.querySelectorAll('.sg-tab-button').forEach((otherButton) => {";
|
||
echo " otherButton.setAttribute('aria-selected', String(otherButton === button));";
|
||
echo " });";
|
||
echo " const entryName = button.textContent.trim();";
|
||
echo " if (contentTitle) { contentTitle.textContent = entryName; }";
|
||
echo " if (contentBody) { contentBody.innerHTML = portalModuleContentCards[entryName] || ''; }";
|
||
echo " if (entryName === 'Bestellungen') { initBestellungenBindings(); }";
|
||
echo " });";
|
||
echo " });";
|
||
echo "};";
|
||
echo "document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => {";
|
||
echo " group.querySelectorAll('.sg-tab-button').forEach((button) => {";
|
||
echo " button.addEventListener('click', () => {";
|
||
echo " group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {";
|
||
echo " const isActive = otherButton === button;";
|
||
echo " otherButton.setAttribute('aria-selected', String(isActive));";
|
||
echo " otherButton.dataset.componentState = isActive ? 'active' : 'inactive';";
|
||
echo " });";
|
||
echo " renderMainHeading(button.textContent.trim());";
|
||
echo " renderLeftNavigation(button.textContent.trim());";
|
||
echo " });";
|
||
echo " });";
|
||
echo "});";
|
||
echo "document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {";
|
||
echo " const button = wrap.querySelector('.sg-sandwich-button');";
|
||
echo " button.addEventListener('click', (event) => {";
|
||
echo " event.stopPropagation();";
|
||
echo " const nextState = wrap.dataset.open !== 'true';";
|
||
echo " document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((otherWrap) => {";
|
||
echo " const otherButton = otherWrap.querySelector('.sg-sandwich-button');";
|
||
echo " otherWrap.dataset.open = 'false';";
|
||
echo " if (otherButton) { otherButton.setAttribute('aria-expanded', 'false'); }";
|
||
echo " });";
|
||
echo " wrap.dataset.open = String(nextState);";
|
||
echo " button.setAttribute('aria-expanded', String(nextState));";
|
||
echo " });";
|
||
echo "});";
|
||
echo "document.addEventListener('click', (event) => {";
|
||
echo " if (event.target.closest('.sg-sandwich-menu-wrap')) {";
|
||
echo " return;";
|
||
echo " }";
|
||
echo " document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {";
|
||
echo " const button = wrap.querySelector('.sg-sandwich-button');";
|
||
echo " wrap.dataset.open = 'false';";
|
||
echo " if (button) { button.setAttribute('aria-expanded', 'false'); }";
|
||
echo " });";
|
||
echo "});";
|
||
echo "(() => {";
|
||
echo " const mediaQuery = window.matchMedia('(max-width: 767px)');";
|
||
echo " const toggle = document.querySelector('[data-left-navigation-toggle]');";
|
||
echo " const menu = document.getElementById('left-navigation-menu');";
|
||
echo " if (!toggle || !menu) { return; }";
|
||
echo " const setMenuState = (expanded) => {";
|
||
echo " menu.hidden = !expanded;";
|
||
echo " menu.classList.toggle('sg-left-navigation-pattern__menu--collapsed', !expanded);";
|
||
echo " toggle.setAttribute('aria-expanded', String(expanded));";
|
||
echo " toggle.textContent = expanded ? 'Ausblenden' : 'Einblenden';";
|
||
echo " toggle.classList.add('sg-button--active');";
|
||
echo " toggle.classList.remove('sg-button--inactive');";
|
||
echo " };";
|
||
echo " const syncMode = () => {";
|
||
echo " if (mediaQuery.matches) {";
|
||
echo " if (toggle.getAttribute('aria-expanded') !== 'true' && toggle.getAttribute('aria-expanded') !== 'false') { setMenuState(true); return; }";
|
||
echo " setMenuState(toggle.getAttribute('aria-expanded') !== 'false');";
|
||
echo " return;";
|
||
echo " }";
|
||
echo " menu.hidden = false;";
|
||
echo " menu.classList.remove('sg-left-navigation-pattern__menu--collapsed');";
|
||
echo " toggle.setAttribute('aria-expanded', 'true');";
|
||
echo " toggle.textContent = 'Ausblenden';";
|
||
echo " toggle.classList.add('sg-button--active');";
|
||
echo " toggle.classList.remove('sg-button--inactive');";
|
||
echo " };";
|
||
echo " toggle.addEventListener('click', () => { setMenuState(menu.hidden); });";
|
||
echo " menu.querySelectorAll('.sg-tab-button').forEach((button) => {";
|
||
echo " button.addEventListener('click', () => {";
|
||
echo " menu.querySelectorAll('.sg-tab-button').forEach((otherButton) => {";
|
||
echo " otherButton.setAttribute('aria-selected', String(otherButton === button));";
|
||
echo " });";
|
||
echo " });";
|
||
echo " });";
|
||
echo " syncMode();";
|
||
echo " mediaQuery.addEventListener('change', syncMode);";
|
||
echo "})();";
|
||
echo "let bestellungenTableHandlersInstalled = false;";
|
||
echo "function initBestellungenBindings() {";
|
||
echo " const contentRoot = document.querySelector('[data-left-navigation-content-body]');";
|
||
echo " if (!contentRoot) { return; }";
|
||
echo " const getTable = () => contentRoot.querySelector('[data-bestellungen-large-table]');";
|
||
echo " let table = getTable();";
|
||
echo " if (!table) { return; }";
|
||
echo " let searchTimer = null;";
|
||
echo " const getSearchInput = () => {";
|
||
echo " const currentTable = getTable();";
|
||
echo " return currentTable ? currentTable.querySelector('[data-large-table-search]') : null;";
|
||
echo " };";
|
||
echo " const getSearchWrap = () => {";
|
||
echo " const input = getSearchInput();";
|
||
echo " return input ? input.closest('[data-component=\\'single-line-input\\']') : null;";
|
||
echo " };";
|
||
echo " const getSearchValue = () => {";
|
||
echo " const input = getSearchInput();";
|
||
echo " return input ? input.value.trim() : '';";
|
||
echo " };";
|
||
echo " const getSortColumn = () => {";
|
||
echo " const currentTable = getTable();";
|
||
echo " return currentTable ? (currentTable.dataset.bestellungenSortColumn || 'order_date') : 'order_date';";
|
||
echo " };";
|
||
echo " const getSortDirection = () => {";
|
||
echo " const currentTable = getTable();";
|
||
echo " return (currentTable ? (currentTable.dataset.bestellungenSortDirection || 'DESC') : 'DESC').toUpperCase();";
|
||
echo " };";
|
||
echo " const getCurrentLimit = () => {";
|
||
echo " const currentTable = getTable();";
|
||
echo " return parseInt((currentTable ? currentTable.dataset.bestellungenLimit : null) || (currentTable ? currentTable.dataset.bestellungenPageSize : null) || '20', 10);";
|
||
echo " };";
|
||
echo " const getPageSize = () => {";
|
||
echo " const currentTable = getTable();";
|
||
echo " return parseInt((currentTable ? currentTable.dataset.bestellungenPageSize : null) || '20', 10);";
|
||
echo " };";
|
||
echo " const syncSearchState = () => {";
|
||
echo " const input = getSearchInput();";
|
||
echo " const wrap = getSearchWrap();";
|
||
echo " if (!input || !wrap) { return; }";
|
||
echo " const hasValue = input.value.trim().length > 0;";
|
||
echo " wrap.setAttribute('data-has-value', String(hasValue));";
|
||
echo " wrap.dataset.componentState = hasValue ? 'active' : 'inactive-selectable';";
|
||
echo " };";
|
||
echo " const closeDrawer = () => {";
|
||
echo " const drawer = contentRoot.querySelector('[data-bestellungen-drawer]');";
|
||
echo " if (!drawer) { return; }";
|
||
echo " drawer.dataset.open = 'false';";
|
||
echo " drawer.setAttribute('aria-hidden', 'true');";
|
||
echo " contentRoot.querySelectorAll('[data-order-drawer-open]').forEach((trigger) => {";
|
||
echo " trigger.setAttribute('aria-expanded', 'false');";
|
||
echo " });";
|
||
echo " };";
|
||
echo " const openDrawer = (trigger) => {";
|
||
echo " const drawer = contentRoot.querySelector('[data-bestellungen-drawer]');";
|
||
echo " if (!drawer) { return; }";
|
||
echo " const drawerTitle = drawer.querySelector('[data-order-drawer-title]');";
|
||
echo " const drawerOrderNumber = drawer.querySelector('[data-order-drawer-order-number]');";
|
||
echo " const drawerOrderDate = drawer.querySelector('[data-order-drawer-order-date]');";
|
||
echo " const drawerAddressLine1 = drawer.querySelector('[data-order-drawer-address-line-1]');";
|
||
echo " const drawerAddressLine2 = drawer.querySelector('[data-order-drawer-address-line-2]');";
|
||
echo " const drawerAddressLine3 = drawer.querySelector('[data-order-drawer-address-line-3]');";
|
||
echo " const drawerTotal = drawer.querySelector('[data-order-drawer-total]');";
|
||
echo " const orderNumber = trigger.dataset.orderNumber || '';";
|
||
echo " const orderDate = trigger.dataset.orderDate || '';";
|
||
echo " const total = trigger.dataset.orderTotal || '';";
|
||
echo " const street = trigger.dataset.orderStreet || '';";
|
||
echo " const houseNumber = trigger.dataset.orderHouseNumber || '';";
|
||
echo " const zip = trigger.dataset.orderZip || '';";
|
||
echo " const city = trigger.dataset.orderCity || '';";
|
||
echo " const country = trigger.dataset.orderCountry || '';";
|
||
echo " const streetLine = [street, houseNumber].filter((part) => part && part.length > 0).join(' ').trim();";
|
||
echo " const cityLine = [zip, city].filter((part) => part && part.length > 0).join(' ').trim();";
|
||
echo " drawer.dataset.open = 'true';";
|
||
echo " drawer.setAttribute('aria-hidden', 'false');";
|
||
echo " if (drawerTitle) { drawerTitle.textContent = orderNumber !== '' ? 'Bestellung ' + orderNumber : 'Bestellung'; }";
|
||
echo " if (drawerOrderNumber) { drawerOrderNumber.textContent = orderNumber; }";
|
||
echo " if (drawerOrderDate) { drawerOrderDate.textContent = orderDate; }";
|
||
echo " if (drawerAddressLine1) { drawerAddressLine1.textContent = streetLine; }";
|
||
echo " if (drawerAddressLine2) { drawerAddressLine2.textContent = cityLine; }";
|
||
echo " if (drawerAddressLine3) { drawerAddressLine3.textContent = country; }";
|
||
echo " if (drawerTotal) { drawerTotal.textContent = total; }";
|
||
echo " contentRoot.querySelectorAll('[data-order-drawer-open]').forEach((button) => {";
|
||
echo " button.setAttribute('aria-expanded', String(button === trigger));";
|
||
echo " });";
|
||
echo " };";
|
||
echo " const buildUrl = (params) => {";
|
||
echo " const url = new URL(window.location.href);";
|
||
echo " url.hash = '';";
|
||
echo " Object.entries(params).forEach(([key, value]) => {";
|
||
echo " if (value === null || value === undefined || value === '') {";
|
||
echo " url.searchParams.delete(key);";
|
||
echo " return;";
|
||
echo " }";
|
||
echo " url.searchParams.set(key, String(value));";
|
||
echo " });";
|
||
echo " return url;";
|
||
echo " };";
|
||
echo " const buildFragmentUrl = (params) => {";
|
||
echo " const url = buildUrl(params);";
|
||
echo " url.searchParams.set('bestellungen_fragment', '1');";
|
||
echo " return url;";
|
||
echo " };";
|
||
echo " const replaceFragment = (html) => {";
|
||
echo " const doc = new DOMParser().parseFromString(html, 'text/html');";
|
||
echo " const fragment = doc.querySelector('[data-bestellungen-content]');";
|
||
echo " if (!fragment) {";
|
||
echo " return false;";
|
||
echo " }";
|
||
echo " contentRoot.innerHTML = fragment.innerHTML;";
|
||
echo " table = getTable();";
|
||
echo " return !!table;";
|
||
echo " };";
|
||
echo " const loadFragment = async (params) => {";
|
||
echo " if (searchTimer) { window.clearTimeout(searchTimer); searchTimer = null; }";
|
||
echo " const url = buildFragmentUrl(params);";
|
||
echo " const response = await fetch(url.toString(), { credentials: 'same-origin', headers: { 'X-Requested-With': 'XMLHttpRequest' } });";
|
||
echo " const html = await response.text();";
|
||
echo " const replaced = replaceFragment(html);";
|
||
echo " if (replaced) {";
|
||
echo " const historyUrl = buildUrl(params);";
|
||
echo " window.history.replaceState({}, '', historyUrl);";
|
||
echo " bindTable();";
|
||
echo " }";
|
||
echo " };";
|
||
echo " const bindTable = () => {";
|
||
echo " table = getTable();";
|
||
echo " if (!table) { return; }";
|
||
echo " const searchInput = getSearchInput();";
|
||
echo " const clearButton = table.querySelector('[data-bestellungen-search-clear]');";
|
||
echo " if (searchInput && searchInput.dataset.bestellungenBound !== 'true') {";
|
||
echo " searchInput.dataset.bestellungenBound = 'true';";
|
||
echo " searchInput.addEventListener('input', () => {";
|
||
echo " syncSearchState();";
|
||
echo " if (searchTimer) { window.clearTimeout(searchTimer); }";
|
||
echo " searchTimer = window.setTimeout(() => {";
|
||
echo " void loadFragment({";
|
||
echo " bestellungen_search: getSearchValue(),";
|
||
echo " bestellungen_sort: getSortColumn(),";
|
||
echo " bestellungen_dir: getSortDirection(),";
|
||
echo " bestellungen_limit: getPageSize(),";
|
||
echo " });";
|
||
echo " }, 250);";
|
||
echo " });";
|
||
echo " }";
|
||
echo " if (clearButton && clearButton.dataset.bestellungenBound !== 'true') {";
|
||
echo " clearButton.dataset.bestellungenBound = 'true';";
|
||
echo " clearButton.addEventListener('click', () => {";
|
||
echo " if (searchTimer) { window.clearTimeout(searchTimer); searchTimer = null; }";
|
||
echo " const input = getSearchInput();";
|
||
echo " if (input) { input.value = ''; }";
|
||
echo " syncSearchState();";
|
||
echo " void loadFragment({";
|
||
echo " bestellungen_search: '',";
|
||
echo " bestellungen_sort: getSortColumn(),";
|
||
echo " bestellungen_dir: getSortDirection(),";
|
||
echo " bestellungen_limit: getPageSize(),";
|
||
echo " });";
|
||
echo " });";
|
||
echo " }";
|
||
echo " syncSearchState();";
|
||
echo " };";
|
||
echo " if (!bestellungenTableHandlersInstalled) {";
|
||
echo " bestellungenTableHandlersInstalled = true;";
|
||
echo " contentRoot.addEventListener('click', (event) => {";
|
||
echo " const openTrigger = event.target.closest('[data-order-drawer-open]');";
|
||
echo " if (openTrigger) {";
|
||
echo " event.preventDefault();";
|
||
echo " openDrawer(openTrigger);";
|
||
echo " return;";
|
||
echo " }";
|
||
echo " const closeTrigger = event.target.closest('[data-order-drawer-close]');";
|
||
echo " if (closeTrigger) {";
|
||
echo " event.preventDefault();";
|
||
echo " closeDrawer();";
|
||
echo " return;";
|
||
echo " }";
|
||
echo " const sortButton = event.target.closest('[data-bestellungen-sort-button]');";
|
||
echo " if (sortButton) {";
|
||
echo " event.preventDefault();";
|
||
echo " void loadFragment({";
|
||
echo " bestellungen_search: getSearchValue(),";
|
||
echo " bestellungen_sort: sortButton.dataset.bestellungenSortColumn || getSortColumn(),";
|
||
echo " bestellungen_dir: sortButton.dataset.bestellungenSortDirection || getSortDirection(),";
|
||
echo " bestellungen_limit: getPageSize(),";
|
||
echo " });";
|
||
echo " return;";
|
||
echo " }";
|
||
echo " const loadMoreTrigger = event.target.closest('[data-large-table-load-more-trigger]');";
|
||
echo " if (loadMoreTrigger) {";
|
||
echo " event.preventDefault();";
|
||
echo " void loadFragment({";
|
||
echo " bestellungen_search: getSearchValue(),";
|
||
echo " bestellungen_sort: getSortColumn(),";
|
||
echo " bestellungen_dir: getSortDirection(),";
|
||
echo " bestellungen_limit: getCurrentLimit() + getPageSize(),";
|
||
echo " });";
|
||
echo " }";
|
||
echo " });";
|
||
echo " document.addEventListener('keydown', (event) => {";
|
||
echo " if (event.key === 'Escape') {";
|
||
echo " closeDrawer();";
|
||
echo " }";
|
||
echo " });";
|
||
echo " }";
|
||
echo " bindTable();";
|
||
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 " clearError();";
|
||
echo " if (!preserveSuccess) { clearSuccess(); }";
|
||
echo " if (!preserveSuccess) { 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 " let submissionSucceeded = false;";
|
||
echo " if (!updateFormState()) { return; }";
|
||
echo " const products = productInputs";
|
||
echo " .filter((input) => getInputValue(input) > 0)";
|
||
echo " .map((input) => ({ productId: parseInt(input.dataset.productId || '0', 10), qty: getInputValue(input) }));";
|
||
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 " 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(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 " if (!submissionSucceeded) { updateFormState(); }";
|
||
echo " }";
|
||
echo " });";
|
||
echo " updateFormState();";
|
||
echo "})();";
|
||
echo "if (window.sgInitHelpIconOverlays) {";
|
||
echo " window.sgInitHelpIconOverlays({";
|
||
echo " closeOnOpenSelectors: ['.sg-sandwich-menu-wrap'],";
|
||
echo " outsideClickIgnoreSelectors: ['.sg-sandwich-menu-wrap'],";
|
||
echo " });";
|
||
echo "}";
|
||
echo "renderMainHeading('ERP');";
|
||
echo "renderLeftNavigation('ERP');";
|
||
echo '</script>';
|
||
echo '</body>';
|
||
echo '</html>';
|
||
}
|