|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Self-Service Ordering</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.category-btn.active { |
|
|
background-color: #3b82f6; |
|
|
color: white; |
|
|
} |
|
|
.item-btn:hover { |
|
|
transform: scale(1.02); |
|
|
} |
|
|
.cart-item:hover { |
|
|
background-color: #f3f4f6; |
|
|
} |
|
|
.num-pad-btn:active { |
|
|
transform: scale(0.95); |
|
|
} |
|
|
@media (max-width: 640px) { |
|
|
.category-scroll { |
|
|
overflow-x: auto; |
|
|
white-space: nowrap; |
|
|
padding-bottom: 8px; |
|
|
} |
|
|
.category-scroll::-webkit-scrollbar { |
|
|
height: 4px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
<div class="flex flex-col h-screen max-w-md mx-auto bg-white shadow-lg"> |
|
|
|
|
|
<header class="bg-blue-600 text-white p-4 shadow-md"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h1 class="text-xl font-bold">Self-Service Ordering</h1> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text-sm">Table #<span id="table-number">5</span></span> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-hidden flex flex-col"> |
|
|
|
|
|
<div class="p-2 bg-gray-200 category-scroll"> |
|
|
<div class="inline-flex space-x-2"> |
|
|
<button class="category-btn active px-3 py-2 rounded-lg bg-blue-500 text-white text-sm" data-category="all"> |
|
|
All |
|
|
</button> |
|
|
<button class="category-btn px-3 py-2 rounded-lg bg-white hover:bg-gray-300 text-sm" data-category="food"> |
|
|
Food |
|
|
</button> |
|
|
<button class="category-btn px-3 py-2 rounded-lg bg-white hover:bg-gray-300 text-sm" data-category="drinks"> |
|
|
Drinks |
|
|
</button> |
|
|
<button class="category-btn px-3 py-2 rounded-lg bg-white hover:bg-gray-300 text-sm" data-category="snacks"> |
|
|
Snacks |
|
|
</button> |
|
|
<button class="category-btn px-3 py-2 rounded-lg bg-white hover:bg-gray-300 text-sm" data-category="alcohol"> |
|
|
Beverages |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 p-2 overflow-y-auto grid grid-cols-2 gap-2" id="product-grid"> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="sticky bottom-0 bg-white border-t border-gray-300"> |
|
|
<div class="flex justify-between items-center p-2"> |
|
|
<div class="text-sm"> |
|
|
<span id="cart-count">0</span> item(s) | ₱<span id="cart-total">0.00</span> |
|
|
</div> |
|
|
<button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-sm" id="view-cart"> |
|
|
<i class="fas fa-shopping-cart mr-1"></i> View Cart |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="cart-modal"> |
|
|
<div class="bg-white rounded-t-lg w-full max-w-md absolute bottom-0 max-h-[80vh] flex flex-col"> |
|
|
<div class="p-4 border-b border-gray-300 flex justify-between items-center sticky top-0 bg-white"> |
|
|
<h2 class="text-lg font-bold">Your Order</h2> |
|
|
<button class="text-gray-500" id="close-cart"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex-1 overflow-y-auto p-4" id="cart-items"> |
|
|
|
|
|
<div class="text-center text-gray-500 py-10" id="empty-cart-message"> |
|
|
<i class="fas fa-shopping-cart text-4xl mb-2"></i> |
|
|
<p>Your cart is empty</p> |
|
|
<p class="text-sm">Select items to add to your order</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 bg-white border-t border-gray-300"> |
|
|
<div class="flex justify-between mb-1 text-sm"> |
|
|
<span>Subtotal:</span> |
|
|
<span id="subtotal">₱0.00</span> |
|
|
</div> |
|
|
<div class="flex justify-between mb-1 text-sm"> |
|
|
<span>Tax (10%):</span> |
|
|
<span id="tax">₱0.00</span> |
|
|
</div> |
|
|
<div class="flex justify-between font-bold mt-2"> |
|
|
<span>TOTAL:</span> |
|
|
<span id="total">₱0.00</span> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-2 mt-4"> |
|
|
<button class="bg-gray-200 hover:bg-gray-300 py-2 rounded-lg text-sm" id="keep-shopping"> |
|
|
Keep Shopping |
|
|
</button> |
|
|
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg text-sm" id="proceed-payment"> |
|
|
Checkout |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="table-modal"> |
|
|
<div class="bg-white rounded-lg p-6 w-5/6 max-w-sm"> |
|
|
<h2 class="text-lg font-bold mb-4">Select Your Table</h2> |
|
|
<div class="grid grid-cols-4 gap-2"> |
|
|
<button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="1">1</button> |
|
|
<button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="2">2</button> |
|
|
<button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="3">3</button> |
|
|
<button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="4">4</button> |
|
|
<button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="5">5</button> |
|
|
<button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="6">6</button> |
|
|
<button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="7">7</button> |
|
|
<button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="8">8</button> |
|
|
<button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="9">9</button> |
|
|
<button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="10">10</button> |
|
|
<button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="11">11</button> |
|
|
<button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="12">12</button> |
|
|
</div> |
|
|
<div class="mt-4 flex justify-center"> |
|
|
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm" id="confirm-table"> |
|
|
Confirm |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="payment-modal"> |
|
|
<div class="bg-white rounded-lg p-6 w-5/6 max-w-sm"> |
|
|
<h2 class="text-lg font-bold mb-4">Payment</h2> |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>Total:</span> |
|
|
<span id="payment-total">₱0.00</span> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label class="block text-gray-700 mb-1 text-sm">Payment Method</label> |
|
|
<select class="w-full p-2 border rounded text-sm" id="payment-method"> |
|
|
<option value="cash">Cash</option> |
|
|
<option value="card">Credit/Debit Card</option> |
|
|
<option value="mobile">Mobile Payment</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-3" id="cash-payment"> |
|
|
<label class="block text-gray-700 mb-1 text-sm">Amount Received</label> |
|
|
<input type="number" class="w-full p-2 border rounded text-sm" id="amount-received"> |
|
|
<div class="grid grid-cols-3 gap-2 mt-2" id="payment-keypad"> |
|
|
<button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">1</button> |
|
|
<button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">2</button> |
|
|
<button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">3</button> |
|
|
<button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">4</button> |
|
|
<button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">5</button> |
|
|
<button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">6</button> |
|
|
<button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">7</button> |
|
|
<button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">8</button> |
|
|
<button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">9</button> |
|
|
<button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">.</button> |
|
|
<button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">0</button> |
|
|
<button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded"> |
|
|
<i class="fas fa-backspace"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden" id="change-display"> |
|
|
<div class="flex justify-between"> |
|
|
<span>Change:</span> |
|
|
<span id="change-amount">₱0.00</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="flex-1 bg-gray-500 hover:bg-gray-600 text-white py-2 rounded-lg text-sm" id="cancel-payment"> |
|
|
Cancel |
|
|
</button> |
|
|
<button class="flex-1 bg-green-500 hover:bg-green-600 text-white py-2 rounded-lg text-sm" id="complete-payment"> |
|
|
Pay Now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="confirmation-modal"> |
|
|
<div class="bg-white rounded-lg p-6 w-5/6 max-w-sm text-center"> |
|
|
<div class="text-green-500 text-5xl mb-4"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
</div> |
|
|
<h2 class="text-xl font-bold mb-2">Order Placed Successfully!</h2> |
|
|
<p class="text-gray-600 mb-4">Your order #<span id="order-number">123</span> has been received.</p> |
|
|
<p class="text-sm text-gray-500 mb-4">Estimated preparation time: 15-20 minutes</p> |
|
|
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg w-full" id="new-order"> |
|
|
Start New Order |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const products = [ |
|
|
{ id: 1, name: "Cheeseburger", price: 5.99, category: "food" }, |
|
|
{ id: 2, name: "Pepperoni Pizza", price: 8.99, category: "food" }, |
|
|
{ id: 3, name: "French Fries", price: 2.99, category: "food" }, |
|
|
{ id: 4, name: "Soda", price: 1.50, category: "drinks" }, |
|
|
{ id: 5, name: "Bottled Water", price: 1.00, category: "drinks" }, |
|
|
{ id: 6, name: "Orange Juice", price: 2.50, category: "drinks" }, |
|
|
{ id: 7, name: "Potato Chips", price: 1.25, category: "snacks" }, |
|
|
{ id: 8, name: "Chocolate Bar", price: 1.00, category: "snacks" }, |
|
|
{ id: 9, name: "Craft Beer", price: 3.50, category: "alcohol" }, |
|
|
{ id: 10, name: "House Wine", price: 5.00, category: "alcohol" }, |
|
|
{ id: 11, name: "Garden Salad", price: 4.50, category: "food" }, |
|
|
{ id: 12, name: "Coffee", price: 2.00, category: "drinks" } |
|
|
]; |
|
|
|
|
|
|
|
|
let cart = []; |
|
|
let currentTable = 5; |
|
|
let orderNumber = Math.floor(Math.random() * 9000) + 1000; |
|
|
|
|
|
|
|
|
const productGrid = document.getElementById('product-grid'); |
|
|
const cartItemsContainer = document.getElementById('cart-items'); |
|
|
const emptyCartMessage = document.getElementById('empty-cart-message'); |
|
|
const subtotalElement = document.getElementById('subtotal'); |
|
|
const taxElement = document.getElementById('tax'); |
|
|
const totalElement = document.getElementById('total'); |
|
|
const cartTotalElement = document.getElementById('cart-total'); |
|
|
const cartCountElement = document.getElementById('cart-count'); |
|
|
const categoryButtons = document.querySelectorAll('.category-btn'); |
|
|
const tableNumberElement = document.getElementById('table-number'); |
|
|
|
|
|
|
|
|
function init() { |
|
|
renderProducts('all'); |
|
|
updateTableNumber(); |
|
|
|
|
|
|
|
|
document.getElementById('table-modal').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function renderProducts(category) { |
|
|
productGrid.innerHTML = ''; |
|
|
|
|
|
const filteredProducts = category === 'all' |
|
|
? products |
|
|
: products.filter(product => product.category === category); |
|
|
|
|
|
filteredProducts.forEach(product => { |
|
|
const productBtn = document.createElement('div'); |
|
|
productBtn.className = 'item-btn bg-white p-3 rounded-lg shadow-sm border border-gray-200 flex flex-col items-center'; |
|
|
productBtn.dataset.id = product.id; |
|
|
|
|
|
productBtn.innerHTML = ` |
|
|
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-2 overflow-hidden"> |
|
|
${product.image ? `<img src="${product.image}" class="w-full h-full object-cover">` : ` |
|
|
<i class="fas ${getProductIcon(product.category)} text-blue-500"></i>`} |
|
|
</div> |
|
|
<span class="font-semibold text-sm text-center">${product.name}</span> |
|
|
<span class="text-blue-600 text-sm">₱${product.price.toFixed(2)}</span> |
|
|
`; |
|
|
|
|
|
productBtn.addEventListener('click', () => addToCart(product.id)); |
|
|
productGrid.appendChild(productBtn); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function getProductIcon(category) { |
|
|
switch(category) { |
|
|
case 'food': return 'fa-utensils'; |
|
|
case 'drinks': return 'fa-glass-whiskey'; |
|
|
case 'snacks': return 'fa-cookie'; |
|
|
case 'alcohol': return 'fa-wine-glass-alt'; |
|
|
default: return 'fa-shopping-bag'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function addToCart(productId) { |
|
|
const product = products.find(p => p.id === productId); |
|
|
const existingItem = cart.find(item => item.id === productId); |
|
|
|
|
|
if (existingItem) { |
|
|
existingItem.quantity++; |
|
|
} else { |
|
|
cart.push({ |
|
|
id: product.id, |
|
|
name: product.name, |
|
|
price: product.price, |
|
|
quantity: 1 |
|
|
}); |
|
|
} |
|
|
|
|
|
updateCartDisplay(); |
|
|
showAddedToCartFeedback(product.name); |
|
|
} |
|
|
|
|
|
|
|
|
function showAddedToCartFeedback(productName) { |
|
|
const feedback = document.createElement('div'); |
|
|
feedback.className = 'fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg z-50 animate-fade'; |
|
|
feedback.innerHTML = `Added ${productName} to cart`; |
|
|
document.body.appendChild(feedback); |
|
|
|
|
|
setTimeout(() => { |
|
|
feedback.classList.add('opacity-0', 'transition-opacity', 'duration-300'); |
|
|
setTimeout(() => feedback.remove(), 300); |
|
|
}, 1500); |
|
|
} |
|
|
|
|
|
|
|
|
function updateCartMiniDisplay() { |
|
|
const itemCount = cart.reduce((sum, item) => sum + item.quantity, 0); |
|
|
const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); |
|
|
|
|
|
cartCountElement.textContent = itemCount; |
|
|
cartTotalElement.textContent = total.toFixed(2); |
|
|
} |
|
|
|
|
|
|
|
|
function renderCart() { |
|
|
if (cart.length === 0) { |
|
|
emptyCartMessage.classList.remove('hidden'); |
|
|
cartItemsContainer.innerHTML = ''; |
|
|
return; |
|
|
} |
|
|
|
|
|
emptyCartMessage.classList.add('hidden'); |
|
|
cartItemsContainer.innerHTML = ''; |
|
|
|
|
|
cart.forEach(item => { |
|
|
const cartItem = document.createElement('div'); |
|
|
cartItem.className = 'cart-item flex justify-between items-center p-3 mb-2 bg-white rounded-lg shadow-sm'; |
|
|
cartItem.innerHTML = ` |
|
|
<div class="flex-1"> |
|
|
<div class="font-semibold text-sm">${item.name}</div> |
|
|
<div class="text-xs text-gray-500">₱${item.price.toFixed(2)} each</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<button class="qty-btn minus w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-xs" data-id="${item.id}"> |
|
|
<i class="fas fa-minus"></i> |
|
|
</button> |
|
|
<span class="mx-2 w-6 text-center text-sm">${item.quantity}</span> |
|
|
<button class="qty-btn plus w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-xs" data-id="${item.id}"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
<div class="ml-3 w-16 text-right text-sm font-semibold">₱${(item.price * item.quantity).toFixed(2)}</div> |
|
|
<button class="delete-btn ml-2 w-6 h-6 rounded-full bg-red-100 text-red-600 flex items-center justify-center text-xs" data-id="${item.id}"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
cartItemsContainer.appendChild(cartItem); |
|
|
}); |
|
|
|
|
|
updateCartTotals(); |
|
|
} |
|
|
|
|
|
|
|
|
function updateCartTotals() { |
|
|
const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); |
|
|
const tax = subtotal * 0.10; |
|
|
const total = subtotal + tax; |
|
|
|
|
|
subtotalElement.textContent = `₱${subtotal.toFixed(2)}`; |
|
|
taxElement.textContent = `₱${tax.toFixed(2)}`; |
|
|
totalElement.textContent = `₱${total.toFixed(2)}`; |
|
|
} |
|
|
|
|
|
|
|
|
function updateCartDisplay() { |
|
|
updateCartMiniDisplay(); |
|
|
renderCart(); |
|
|
updateCartTotals(); |
|
|
} |
|
|
|
|
|
|
|
|
function updateTableNumber() { |
|
|
tableNumberElement.textContent = currentTable; |
|
|
} |
|
|
|
|
|
|
|
|
categoryButtons.forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
categoryButtons.forEach(b => b.classList.remove('active', 'bg-blue-500', 'text-white')); |
|
|
this.classList.add('active', 'bg-blue-500', 'text-white'); |
|
|
renderProducts(this.getAttribute('data-category')); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('view-cart').addEventListener('click', function() { |
|
|
document.getElementById('cart-modal').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('close-cart').addEventListener('click', function() { |
|
|
document.getElementById('cart-modal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('keep-shopping').addEventListener('click', function() { |
|
|
document.getElementById('cart-modal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('proceed-payment').addEventListener('click', function() { |
|
|
if (cart.length === 0) return; |
|
|
|
|
|
document.getElementById('payment-total').textContent = totalElement.textContent; |
|
|
document.getElementById('cart-modal').classList.add('hidden'); |
|
|
document.getElementById('payment-modal').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('cancel-payment').addEventListener('click', function() { |
|
|
document.getElementById('payment-modal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('complete-payment').addEventListener('click', function() { |
|
|
const paymentMethod = document.getElementById('payment-method').value; |
|
|
const amountReceived = parseFloat(document.getElementById('amount-received').value) || 0; |
|
|
const total = parseFloat(totalElement.textContent.substring(1)); |
|
|
|
|
|
|
|
|
if (paymentMethod === 'cash' && amountReceived < total) { |
|
|
alert('Amount received is less than total amount'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
processPayment(); |
|
|
}); |
|
|
|
|
|
|
|
|
function processPayment() { |
|
|
|
|
|
document.getElementById('payment-modal').classList.add('hidden'); |
|
|
document.getElementById('order-number').textContent = orderNumber++; |
|
|
document.getElementById('confirmation-modal').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
cart = []; |
|
|
updateCartDisplay(); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('new-order').addEventListener('click', function() { |
|
|
document.getElementById('confirmation-modal').classList.add('hidden'); |
|
|
document.getElementById('table-modal').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.table-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
|
|
|
document.querySelectorAll('.table-btn').forEach(b => |
|
|
b.classList.remove('bg-blue-500', 'text-white')); |
|
|
this.classList.add('bg-blue-500', 'text-white'); |
|
|
currentTable = parseInt(this.dataset.table); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('confirm-table').addEventListener('click', function() { |
|
|
document.getElementById('table-modal').classList.add('hidden'); |
|
|
updateTableNumber(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', function(e) { |
|
|
if (e.target.closest('.qty-btn')) { |
|
|
const btn = e.target.closest('.qty-btn'); |
|
|
const itemId = parseInt(btn.getAttribute('data-id')); |
|
|
const item = cart.find(i => i.id === itemId); |
|
|
|
|
|
if (btn.classList.contains('minus')) { |
|
|
if (item.quantity > 1) { |
|
|
item.quantity--; |
|
|
} else { |
|
|
cart = cart.filter(i => i.id !== itemId); |
|
|
} |
|
|
} else if (btn.classList.contains('plus')) { |
|
|
item.quantity++; |
|
|
} |
|
|
|
|
|
updateCartDisplay(); |
|
|
} |
|
|
|
|
|
if (e.target.closest('.delete-btn')) { |
|
|
const itemId = parseInt(e.target.closest('.delete-btn').getAttribute('data-id')); |
|
|
cart = cart.filter(i => i.id !== itemId); |
|
|
updateCartDisplay(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('#payment-keypad .num-pad-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
const input = document.getElementById('amount-received'); |
|
|
let currentValue = input.value || ''; |
|
|
|
|
|
if (this.textContent.trim() === '<i class="fas fa-backspace"></i>') { |
|
|
input.value = currentValue.slice(0, -1); |
|
|
} else if (this.textContent.trim() === '.' && currentValue.includes('.')) { |
|
|
return; |
|
|
} else { |
|
|
input.value = currentValue + this.textContent.trim(); |
|
|
} |
|
|
|
|
|
|
|
|
const amountReceived = parseFloat(input.value) || 0; |
|
|
const total = parseFloat(totalElement.textContent.substring(1)); |
|
|
|
|
|
if (amountReceived >= total) { |
|
|
const change = amountReceived - total; |
|
|
document.getElementById('change-amount').textContent = `₱${change.toFixed(2)}`; |
|
|
document.getElementById('change-display').classList.remove('hidden'); |
|
|
} else { |
|
|
document.getElementById('change-display').classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('payment-method').addEventListener('change', function() { |
|
|
if (this.value === 'cash') { |
|
|
document.getElementById('cash-payment').classList.remove('hidden'); |
|
|
} else { |
|
|
document.getElementById('cash-payment').classList.add('hidden'); |
|
|
document.getElementById('change-display').classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('DOMContentLoaded', init); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
