160 lines
6.7 KiB
HTML
160 lines
6.7 KiB
HTML
<!doctype html>
|
||
<html lang="pl">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Karczma Biesiada – Twoje Zamówienie</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="assets/css/stolik2_api.css">
|
||
</head>
|
||
<body>
|
||
|
||
<div id="loadingScreen">
|
||
<div class="loader-icon"></div>
|
||
<div class="loader-text">
|
||
<h2>Karczma Biesiada</h2>
|
||
<div class="loader-msg" id="loaderMsg">Łączenie z kuchnią...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<header>
|
||
<h1 class="logo-text">Karczma Biesiada</h1>
|
||
<div id="tableLabel" class="table-badge">Wybierz stolik</div>
|
||
</header>
|
||
|
||
<main id="mainContent">
|
||
<section class="action-card">
|
||
<h3>Przywołaj kelnera</h3>
|
||
<div class="action-buttons">
|
||
<button class="btn btn-primary action-btn" onclick="callWaiter('order')">
|
||
<span>🛎️</span> Złóż zamówienie
|
||
</button>
|
||
<button class="btn btn-secondary action-btn" onclick="openBillDialog()">
|
||
<span>💳</span> Poproś o rachunek
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="status-card">
|
||
<div class="status-header">
|
||
<div>
|
||
<span class="status-title">Aktualny status</span>
|
||
<div id="prepStatus" class="status-value">Oczekiwanie...</div>
|
||
</div>
|
||
<div id="statusIcon" style="font-size: 28px;">⏳</div>
|
||
</div>
|
||
|
||
<div class="progress-container">
|
||
<div id="progressBar" class="progress-bar"></div>
|
||
</div>
|
||
|
||
<div id="statusMeta" style="font-size: 12px; color: var(--text-muted);">
|
||
Sprawdzamy co pysznego się przygotowuje...
|
||
</div>
|
||
</section>
|
||
|
||
<section class="items-container">
|
||
<h3>Twoje zamówione dania</h3>
|
||
<div id="emptyState" class="empty-state hidden">
|
||
<div class="empty-icon">🍽️</div>
|
||
<p style="color: var(--text-muted)">Aktualnie nie przygotowujemy niczego dla tego stolika.</p>
|
||
<p style="font-size: 14px">Jeśli właśnie złożyłeś zamówienie, daj nam chwilkę na jego przetworzenie.</p>
|
||
</div>
|
||
<div id="itemsList"></div>
|
||
</section>
|
||
|
||
<section id="historySection" class="items-container history-section hidden">
|
||
<h3>Twoje poprzednie zamówienia</h3>
|
||
<p class="history-note">To są pozycje z innych wizyt, które były widoczne na tym telefonie po zeskanowaniu kodów QR. Jeśli kiedyś byłeś w restauracji bez skanowania kodu, tych pozycji tu nie będzie 🙂</p>
|
||
<div id="historyList"></div>
|
||
</section>
|
||
|
||
<div id="metaFooter" class="meta-footer"></div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- BILL DIALOG -->
|
||
<div class="modal-overlay" id="billModal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3 id="modalTitle">Rozliczenie</h3>
|
||
<button class="close-btn" onclick="closeBillDialog()">×</button>
|
||
</div>
|
||
|
||
<!-- Step 1: Payment Method -->
|
||
<div class="step active" id="stepPayment">
|
||
<p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Wybierz preferowaną formę płatności:</p>
|
||
<div class="option-grid">
|
||
<div class="option-card" onclick="selectPayment('karta')">
|
||
<span class="option-icon">💳</span>
|
||
<span class="option-label">Karta</span>
|
||
</div>
|
||
<div class="option-card" onclick="selectPayment('gotówka')">
|
||
<span class="option-icon">💵</span>
|
||
<span class="option-label">Gotówka</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Step 2: Document Type -->
|
||
<div class="step" id="stepDocument">
|
||
<p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Jakiego dokumentu potrzebujesz?</p>
|
||
<div class="option-grid">
|
||
<div class="option-card" onclick="selectDocument('paragon')">
|
||
<span class="option-icon">🧾</span>
|
||
<span class="option-label">Paragon</span>
|
||
</div>
|
||
<div class="option-card" onclick="selectDocument('faktura')">
|
||
<span class="option-icon">📄</span>
|
||
<span class="option-label">Faktura</span>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-secondary" onclick="goToStep('stepPayment')" style="margin-top: 8px;">Wróć</button>
|
||
</div>
|
||
|
||
<!-- Step 3: NIP Input -->
|
||
<div class="step" id="stepNIP">
|
||
<p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Wprowadź NIP firmy, abyśmy mogli automatycznie pobrać dane.</p>
|
||
<div class="input-group">
|
||
<label class="input-label">Numer NIP</label>
|
||
<input type="text" id="nipInput" class="input-field" placeholder="np. 1234567890" autocomplete="off" />
|
||
</div>
|
||
<div style="display:flex; gap:12px; margin-top: 24px;">
|
||
<button class="btn btn-secondary" style="flex:1;" onclick="goToStep('stepDocument')">Wróć</button>
|
||
<button class="btn btn-primary" style="flex:2;" onclick="fetchGUS()" id="btnGUS">Pobierz z GUS</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Step 4: Verify Data -->
|
||
<div class="step" id="stepVerify">
|
||
<p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Czy poniższe dane do faktury są prawidłowe?</p>
|
||
|
||
<div class="company-details">
|
||
<input type="text" id="cmpName" class="company-input" style="font-weight:700; margin-bottom:4px;" readonly />
|
||
<input type="text" id="cmpAddress" class="company-input" style="margin-bottom:4px;" readonly />
|
||
<input type="text" id="cmpNip" class="company-input muted" readonly />
|
||
</div>
|
||
|
||
<div style="display:flex; gap:12px; flex-direction:column;">
|
||
<button class="btn btn-primary" onclick="confirmInvoice()">Tak, poproszę fakturę!</button>
|
||
<div style="display:flex; gap:12px;">
|
||
<button class="btn btn-secondary" onclick="goToStep('stepNIP')">Zmień NIP</button>
|
||
<button class="btn btn-secondary" onclick="editCompanyData()" id="btnEditCompany">Popraw ręcznie</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Toast -->
|
||
<div class="toast" id="toastMsg">
|
||
<span style="font-size:20px;">✓</span> <span id="toastText">Wysłano!</span>
|
||
</div>
|
||
|
||
<script src="assets/js/stolik2_api.js"></script>
|
||
</body>
|
||
</html> |