<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>POS System - ร้านขนมไทย</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=Kanit:wght@300;400;500;600;700&family=Mitr:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body class="pos-body">
<!-- Header -->
<header class="pos-header">
<div class="header-content">
<div class="logo">
<i class="bi bi-cup-straw"></i>
<span>ร้านขนมไทย - POS</span>
</div>
<div class="header-actions">
<a href="index.html" class="btn btn-outline">หน้าร้าน</a>
<a href="orders.html" class="btn btn-outline">คำสั่งซื้อ</a>
<a href="admin.html" class="btn btn-outline">แอดมิน</a>
</div>
</div>
</header>
<!-- Main POS Content -->
<main class="pos-main">
<div class="pos-container">
<!-- Product Selection -->
<div class="pos-products">
<div class="pos-search">
<input type="text" id="posSearchInput" placeholder="ค้นหาสินค้า...">
<button><i class="bi bi-search"></i></button>
</div>
<div class="pos-categories">
<div class="pos-category active" data-category="all">ทั้งหมด</div>
<div class="pos-category" data-category="ขนมหวาน">ขนมหวาน</div>
<div class="pos-category" data-category="ขนมคำ">ขนมคำ</div>
<div class="pos-category" data-category="ขนมชั้น">ขนมชั้น</div>
<div class="pos-category" data-category="ขนมทอด">ขนมทอด</div>
</div>
<div class="pos-product-grid" id="posProductGrid">
<!-- Products will be loaded here -->
</div>
</div>
<!-- Cart & Checkout -->
<div class="pos-cart">
<div class="pos-cart-header">
<h2>ตะกร้าสินค้า</h2>
<button class="btn btn-small btn-outline" id="clearCartBtn">ล้างตะกร้า</button>
</div>
<div class="pos-cart-items" id="posCartItems">
<!-- Cart items will be loaded here -->
</div>
<div class="pos-cart-summary">
<div class="summary-row">
<span>รวม:</span>
<span id="posSubtotal">฿0</span>
</div>
<div class="summary-row">
<span>ส่วนลด:</span>
<span id="posDiscount">฿0</span>
</div>
<div class="summary-row total">
<span>ทั้งหมด:</span>
<span id="posTotal">฿0</span>
</div>
</div>
<div class="pos-delivery">
<label>วิธีการรับ/จัดส่ง:</label>
<div class="delivery-methods">
<div class="delivery-method active" data-method="instore">รับที่ร้าน</div>
<div class="delivery-method" data-method="delivery">จัดส่ง</div>
<div class="delivery-method" data-method="pickup">รับที่จุดรับ</div>
</div>
</div>
<div class="customer-details hidden" id="customerDetails">
<div class="form-group">
<label>ชื่อผู้รับ:</label>
<input type="text" id="customerName" placeholder="ชื่อผู้รับ">
</div>
<div class="form-group">
<label>เบอร์โทร:</label>
<input type="text" id="customerPhone" placeholder="0812345678">
</div>
<div class="form-group hidden" id="customerAddressGroup">
<label>ที่อยู่จัดส่ง:</label>
<textarea id="customerAddress" placeholder="ที่อยู่สำหรับจัดส่ง"></textarea>
</div>
</div>
<div class="pos-payment">
<div class="payment-methods">
<div class="payment-method active" data-method="cash">
<i class="bi bi-cash"></i>
<span>เงินสด</span>
</div>
<div class="payment-method" data-method="promptpay">
<i class="bi bi-qr-code"></i>
<span>PromptPay</span>
</div>
<div class="payment-method" data-method="card">
<i class="bi bi-credit-card"></i>
<span>บัตรเครดิต</span>
</div>
</div>
<div class="payment-details" id="cashPayment">
<div class="form-group">
<label>รับเงิน:</label>
<input type="number" id="cashReceived" placeholder="0">
</div>
<div class="form-group">
<label>เงินทอน:</label>
<input type="text" id="cashChange" placeholder="0" readonly>
</div>
</div>
<div class="payment-details hidden" id="promptpayPayment">
<div class="qr-code">
<img src="https://picsum.photos/seed/promptpay-qr-pos/200/200.webp" alt="PromptPay QR">
<p>สแกน QR Code เพื่อชำระเงิน</p>
</div>
</div>
<div class="payment-details hidden" id="cardPayment">
<div class="form-group">
<label>หมายเลขบัตร:</label>
<input type="text" id="cardNumber" placeholder="xxxx-xxxx-xxxx-xxxx">
</div>
</div>
<button class="btn btn-primary" id="processPaymentBtn">ชำระเงิน</button>
</div>
</div>
</div>
</main>
<!-- Receipt Modal -->
<div class="modal" id="receiptModal">
<div class="modal-content receipt-modal">
<div class="modal-header">
<h2>ใบเสร็จ</h2>
<span class="close-modal">×</span>
</div>
<div class="modal-body">
<div class="receipt" id="receiptContent">
<!-- Receipt content will be generated here -->
</div>
</div>
<div class="modal-footer">
<button class="btn btn-outline" id="printReceiptBtn">พิมพ์ใบเสร็จ</button>
<button class="btn btn-primary" id="newTransactionBtn">ทำรายการใหม่</button>
</div>
</div>
</div>
<!-- Toast Notification -->
<div class="toast" id="toast">
<div class="toast-content">
<i class="bi bi-check-circle"></i>
<span id="toastMessage">สินค้าถูกเพิ่มในตะกร้าแล้ว</span>
</div>
</div>
<script src="js/db.js"></script>
<script src="js/components.js"></script>
<script src="js/pos.js"></script>
</body>
</html>