<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Point of Sale - POS System</title>
<link rel="stylesheet" href="../assets/css/fonts.css">
<link rel="stylesheet" href="../assets/css/styles.css">
</head>
<body>
<div class="app-container">
<div>
<div class="topbar">
<div class="pos-header">
<h1><i class="icon-cart"></i> Point of Sale</h1>
</div>
<div class="user-dropdown">
<button class="user-dropdown-toggle">
<div class="user-avatar">
<i class="icon-user"></i>
</div>
<span class="user-name">Cashier</span>
<i class="icon-down"></i>
</button>
<div class="user-dropdown-menu">
<a href="../admin/index.html"><i class="icon-dashboard"></i> Dashboard</a>
<a href="#" id="logoutBtn"><i class="icon-signout"></i> Logout</a>
</div>
</div>
</div>
</div>
<div class="pos-container">
<div class="pos-products">
<div class="search-bar">
<input type="text" id="productSearch" class="form-control" placeholder="Search products...">
<button class="btn" id="scanBarcode">
<i class="icon-barcode"></i> Scan
</button>
</div>
<div class="category-filter">
<button class="btn btn-sm active" data-category="all">All</button>
<!-- Categories will be added here -->
</div>
<div class="product-grid" id="productGrid">
<!-- Products will be loaded here -->
</div>
</div>
<div class="pos-order">
<div class="order-header">
<h2 class="order-title">Current Order</h2>
<div class="order-info">
<select id="customerSelect" class="form-control">
<option value="1">Walk-in Customer</option>
<!-- More customers will be loaded here -->
</select>
</div>
</div>
<div class="order-items" id="orderItems">
<!-- Order items will appear here -->
<div class="empty-order">
<i class="icon-cart"></i>
<p>No items in cart</p>
</div>
</div>
<div class="order-summary">
<div class="summary-row">
<div class="summary-label">Subtotal</div>
<div class="summary-value" id="subtotal">฿0.00</div>
</div>
<div class="summary-row">
<div class="summary-label">Tax (7%)</div>
<div class="summary-value" id="tax">฿0.00</div>
</div>
<div class="summary-row">
<div class="summary-label">Discount</div>
<div class="summary-value">
<input type="number" id="discountInput" class="form-control" value="0" min="0">
</div>
</div>
<div class="summary-row total-row">
<div class="summary-label">Total</div>
<div class="summary-value" id="total">฿0.00</div>
</div>
</div>
<div class="order-actions">
<button class="btn btn-danger" id="cancelOrder">
<i class="icon-invalid"></i> Cancel
</button>
<button class="btn btn-primary" id="checkoutBtn">
<i class="icon-cart"></i> Checkout
</button>
</div>
</div>
</div>
<!-- Payment Modal -->
<div class="modal" id="paymentModal">
<div class="modal-content">
<div class="modal-header">
<h2>Payment</h2>
<button class="close-modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Total Amount</label>
<h3 id="paymentTotal">฿0.00</h3>
</div>
<div class="form-group">
<label for="paymentMethod">Payment Method</label>
<select id="paymentMethod" class="form-control">
<option value="cash">Cash</option>
<option value="card">Credit/Debit Card</option>
<option value="bank_transfer">Bank Transfer</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group" id="cashPaymentGroup">
<label for="amountPaid">Amount Paid</label>
<input type="number" id="amountPaid" class="form-control" min="0" step="0.01">
<div class="change-calculation">
<span>Change:</span>
<span id="changeAmount">฿0.00</span>
</div>
</div>
<div class="form-group">
<label for="paymentNotes">Notes</label>
<textarea id="paymentNotes" class="form-control"></textarea>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="cancelPayment">Cancel</button>
<button class="btn btn-primary" id="completePayment">Complete Payment</button>
</div>
</div>
</div>
<!-- Receipt Modal -->
<div class="modal" id="receiptModal">
<div class="modal-content">
<div class="modal-header">
<h2>Receipt</h2>
<button class="close-modal">×</button>
</div>
<div class="modal-body">
<div class="receipt" id="receipt">
<!-- Receipt will be generated here -->
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="newOrderBtn">New Order</button>
<button class="btn btn-primary" id="printReceiptBtn">Print Receipt</button>
</div>
</div>
</div>
</div>
<div id="notification-container"></div>
<script src="../assets/js/config.js"></script>
<script src="../assets/js/common.js"></script>
<script src="../assets/js/pos.js"></script>
</body>
</html>