384 lines
17 KiB
PHP
384 lines
17 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
require_once __DIR__ . '/db/config.php';
|
|
require_once __DIR__ . '/includes/functions.php';
|
|
|
|
$pdo = db();
|
|
$settings = get_company_settings();
|
|
|
|
$table_id = isset($_GET['table_id']) ? (int)$_GET['table_id'] : 0;
|
|
|
|
if ($table_id <= 0) {
|
|
die("Invalid table ID. Please scan the QR code on your table.");
|
|
}
|
|
|
|
// Fetch table and outlet info
|
|
$stmt = $pdo->prepare("
|
|
SELECT t.id, t.name as table_name, a.outlet_id, o.name as outlet_name
|
|
FROM tables t
|
|
JOIN areas a ON t.area_id = a.id
|
|
JOIN outlets o ON a.outlet_id = o.id
|
|
WHERE t.id = ?
|
|
");
|
|
$stmt->execute([$table_id]);
|
|
$table_info = $stmt->fetch();
|
|
|
|
if (!$table_info) {
|
|
die("Table not found. Please contact staff.");
|
|
}
|
|
|
|
$outlet_id = (int)$table_info['outlet_id'];
|
|
$categories = $pdo->query("SELECT * FROM categories ORDER BY sort_order")->fetchAll();
|
|
$all_products = $pdo->query("SELECT p.*, c.name as category_name FROM products p JOIN categories c ON p.category_id = c.id")->fetchAll();
|
|
|
|
// Fetch variants
|
|
$variants_raw = $pdo->query("SELECT * FROM product_variants ORDER BY price_adjustment ASC")->fetchAll();
|
|
$variants_by_product = [];
|
|
foreach ($variants_raw as $v) {
|
|
$variants_by_product[$v['product_id']][] = $v;
|
|
}
|
|
|
|
?>
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
|
<title><?= htmlspecialchars($settings['company_name']) ?> - Order Online</title>
|
|
<?php if (!empty($settings['favicon_url'])): ?>
|
|
<link rel="icon" href="<?= htmlspecialchars($settings['favicon_url']) ?>">
|
|
<?php endif; ?>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; background-color: #f8f9fa; padding-bottom: 80px; }
|
|
.category-nav { overflow-x: auto; white-space: nowrap; background: #fff; padding: 10px; position: sticky; top: 0; z-index: 1020; border-bottom: 1px solid #eee; }
|
|
.category-item { display: inline-block; padding: 8px 16px; border-radius: 20px; background: #f1f3f5; margin-right: 8px; font-weight: 500; font-size: 0.9rem; cursor: pointer; border: 1px solid transparent; }
|
|
.category-item.active { background: #0d6efd; color: #fff; }
|
|
.product-card { border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform 0.2s; }
|
|
.product-card:active { transform: scale(0.98); }
|
|
.product-img { height: 140px; object-fit: cover; }
|
|
.cart-footer { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; padding: 15px; border-top: 1px solid #eee; z-index: 1030; display: none; }
|
|
.badge-price { position: absolute; bottom: 10px; right: 10px; background: rgba(255,255,255,0.9); padding: 2px 8px; border-radius: 12px; font-weight: bold; font-size: 0.85rem; }
|
|
.quantity-controls { display: flex; align-items: center; gap: 10px; }
|
|
.quantity-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #dee2e6; background: #fff; display: flex; align-items: center; justify-content: center; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Header -->
|
|
<header class="bg-white p-3 border-bottom d-flex align-items-center justify-content-between">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<?php if (!empty($settings['logo_url'])): ?>
|
|
<img src="<?= htmlspecialchars($settings['logo_url']) ?>" alt="Logo" style="height: 32px;">
|
|
<?php endif; ?>
|
|
<span class="fw-bold"><?= htmlspecialchars($settings['company_name']) ?></span>
|
|
</div>
|
|
<div class="badge bg-light text-dark border">Table <?= htmlspecialchars($table_info['table_name']) ?></div>
|
|
</header>
|
|
|
|
<!-- Category Nav -->
|
|
<div class="category-nav shadow-sm">
|
|
<div class="category-item active" onclick="filterCategory('all', this)">All</div>
|
|
<?php foreach ($categories as $cat): ?>
|
|
<div class="category-item" onclick="filterCategory(<?= $cat['id'] ?>, this)"><?= htmlspecialchars($cat['name']) ?></div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<div class="container py-3">
|
|
<div class="row g-3" id="products-container">
|
|
<?php foreach ($all_products as $product):
|
|
$has_variants = !empty($variants_by_product[$product['id']]);
|
|
$effective_price = get_product_price($product);
|
|
$is_promo = $effective_price < (float)$product['price'];
|
|
?>
|
|
<div class="col-6 col-md-4 product-item" data-category-id="<?= $product['category_id'] ?>">
|
|
<div class="card h-100 product-card"
|
|
onclick="handleProductClick(<?= htmlspecialchars(json_encode([
|
|
'id' => $product['id'],
|
|
'name' => $product['name'],
|
|
'price' => (float)$effective_price,
|
|
'has_variants' => $has_variants
|
|
])) ?>)">
|
|
<div class="position-relative">
|
|
<img src="https://picsum.photos/seed/<?= $product['id'] ?>/400/300" class="card-img-top product-img" alt="<?= htmlspecialchars($product['name']) ?>">
|
|
<div class="badge-price text-primary">
|
|
<?php if ($is_promo): ?>
|
|
<span class="text-danger fw-bold"><?= number_format($effective_price, 3) ?></span>
|
|
<small class="text-muted text-decoration-line-through ms-1" style="font-size: 0.7rem;"><?= number_format((float)$product['price'], 3) ?></small>
|
|
<?php else: ?>
|
|
<?= number_format((float)$product['price'], 3) ?>
|
|
<?php endif; ?>
|
|
OMR
|
|
</div>
|
|
<?php if ($is_promo): ?>
|
|
<div class="position-absolute top-0 start-0 m-2">
|
|
<span class="badge bg-warning text-dark fw-bold rounded-pill" style="font-size: 0.6rem;">SALE</span>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1 small fw-bold text-truncate"><?= htmlspecialchars($product['name']) ?></h6>
|
|
<p class="card-text small text-muted mb-0" style="font-size: 0.75rem;"><?= htmlspecialchars($product['category_name']) ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cart Footer -->
|
|
<div class="cart-footer shadow-lg" id="cart-footer">
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div>
|
|
<div class="small text-muted" id="cart-items-count">0 Items</div>
|
|
<div class="fw-bold fs-5 text-primary" id="cart-total-display">0.000 OMR</div>
|
|
</div>
|
|
<button class="btn btn-primary px-4 fw-bold" onclick="showCart()">
|
|
View Cart <i class="bi bi-cart-fill ms-1"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cart Modal -->
|
|
<div class="modal fade" id="cartModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title fw-bold">Your Order</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body p-0">
|
|
<div id="cart-list" class="list-group list-group-flush">
|
|
<!-- Cart items here -->
|
|
</div>
|
|
<div class="p-3 bg-light border-top">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span>Subtotal</span>
|
|
<span id="modal-subtotal">0.000 OMR</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between fw-bold fs-5">
|
|
<span>Total</span>
|
|
<span id="modal-total">0.000 OMR</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-3">
|
|
<div class="mb-3">
|
|
<label class="form-label small text-muted">Your Name (Optional)</label>
|
|
<input type="text" id="cust-name" class="form-control" placeholder="To identify your order">
|
|
</div>
|
|
<button class="btn btn-primary btn-lg w-100 fw-bold" id="btn-place-order" onclick="placeOrder()">
|
|
Place Order <i class="bi bi-send-fill ms-1"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Variant Selection Modal -->
|
|
<div class="modal fade" id="variantModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="variantTitle">Select Option</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="variant-list" class="list-group">
|
|
<!-- Variants injected by JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<script>
|
|
const TABLE_ID = <?= $table_id ?>;
|
|
const OUTLET_ID = <?= $outlet_id ?>;
|
|
const PRODUCT_VARIANTS = <?= json_encode($variants_by_product) ?>;
|
|
|
|
let cart = [];
|
|
const cartModal = new bootstrap.Modal(document.getElementById('cartModal'));
|
|
const variantModal = new bootstrap.Modal(document.getElementById('variantModal'));
|
|
|
|
function filterCategory(catId, el) {
|
|
document.querySelectorAll('.category-item').forEach(i => i.classList.remove('active'));
|
|
el.classList.add('active');
|
|
|
|
document.querySelectorAll('.product-item').forEach(item => {
|
|
if (catId === 'all' || item.dataset.categoryId == catId) {
|
|
item.style.display = 'block';
|
|
} else {
|
|
item.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
function handleProductClick(product) {
|
|
if (product.has_variants) {
|
|
showVariants(product);
|
|
} else {
|
|
addToCart(product.id, product.name, product.price);
|
|
}
|
|
}
|
|
|
|
function showVariants(product) {
|
|
const variants = PRODUCT_VARIANTS[product.id] || [];
|
|
const container = document.getElementById('variant-list');
|
|
document.getElementById('variantTitle').textContent = product.name;
|
|
container.innerHTML = '';
|
|
|
|
variants.forEach(v => {
|
|
const btn = document.createElement('button');
|
|
btn.className = 'list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3';
|
|
const adj = parseFloat(v.price_adjustment);
|
|
const finalPrice = product.price + adj;
|
|
btn.innerHTML = `
|
|
<div>
|
|
<div class="fw-bold">${v.name}</div>
|
|
<div class="small text-muted">${adj > 0 ? '+' : ''}${adj.toFixed(3)} OMR</div>
|
|
</div>
|
|
<div class="fw-bold text-primary">${finalPrice.toFixed(3)} OMR</div>
|
|
`;
|
|
btn.onclick = () => {
|
|
addToCart(product.id, `${product.name} (${v.name})`, finalPrice, v.id);
|
|
variantModal.hide();
|
|
};
|
|
container.appendChild(btn);
|
|
});
|
|
variantModal.show();
|
|
}
|
|
|
|
function addToCart(pid, name, price, vid = null) {
|
|
const existing = cart.find(i => i.product_id === pid && i.variant_id === vid);
|
|
if (existing) {
|
|
existing.quantity++;
|
|
} else {
|
|
cart.push({ product_id: pid, name, unit_price: price, variant_id: vid, quantity: 1 });
|
|
}
|
|
updateCartUI();
|
|
showToast(name + ' added to cart');
|
|
}
|
|
|
|
function updateCartUI() {
|
|
const total = cart.reduce((sum, item) => sum + (item.unit_price * item.quantity), 0);
|
|
const count = cart.reduce((sum, item) => sum + item.quantity, 0);
|
|
|
|
document.getElementById('cart-items-count').textContent = count + ' Items';
|
|
document.getElementById('cart-total-display').textContent = total.toFixed(3) + ' OMR';
|
|
|
|
const footer = document.getElementById('cart-footer');
|
|
if (count > 0) {
|
|
footer.style.display = 'block';
|
|
} else {
|
|
footer.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function showCart() {
|
|
const list = document.getElementById('cart-list');
|
|
list.innerHTML = '';
|
|
|
|
cart.forEach((item, index) => {
|
|
const div = document.createElement('div');
|
|
div.className = 'list-group-item p-3';
|
|
div.innerHTML = `
|
|
<div class="d-flex justify-content-between align-items-start mb-2">
|
|
<div class="fw-bold text-truncate me-2">${item.name}</div>
|
|
<div class="fw-bold">${(item.unit_price * item.quantity).toFixed(3)}</div>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="text-muted small">${item.unit_price.toFixed(3)} / unit</div>
|
|
<div class="quantity-controls">
|
|
<button class="quantity-btn" onclick="updateQty(${index}, -1)"><i class="bi bi-dash"></i></button>
|
|
<span class="fw-bold">${item.quantity}</span>
|
|
<button class="quantity-btn" onclick="updateQty(${index}, 1)"><i class="bi bi-plus"></i></button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
list.appendChild(div);
|
|
});
|
|
|
|
const total = cart.reduce((sum, item) => sum + (item.unit_price * item.quantity), 0);
|
|
document.getElementById('modal-subtotal').textContent = total.toFixed(3) + ' OMR';
|
|
document.getElementById('modal-total').textContent = total.toFixed(3) + ' OMR';
|
|
|
|
cartModal.show();
|
|
}
|
|
|
|
function updateQty(index, delta) {
|
|
cart[index].quantity += delta;
|
|
if (cart[index].quantity <= 0) {
|
|
cart.splice(index, 1);
|
|
}
|
|
if (cart.length === 0) {
|
|
cartModal.hide();
|
|
} else {
|
|
showCart();
|
|
}
|
|
updateCartUI();
|
|
}
|
|
|
|
function placeOrder() {
|
|
if (cart.length === 0) return;
|
|
|
|
const btn = document.getElementById('btn-place-order');
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Placing Order...';
|
|
|
|
const total = cart.reduce((sum, item) => sum + (item.unit_price * item.quantity), 0);
|
|
const customerName = document.getElementById('cust-name').value;
|
|
|
|
const payload = {
|
|
outlet_id: OUTLET_ID,
|
|
table_number: TABLE_ID, // api/order.php expects table ID in table_number
|
|
order_type: 'dine-in',
|
|
customer_name: customerName,
|
|
items: cart,
|
|
total_amount: total,
|
|
payment_type_id: null // Unpaid
|
|
};
|
|
|
|
fetch('api/order.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
Swal.fire({
|
|
title: 'Order Placed!',
|
|
text: 'Your order has been sent to the kitchen. Thank you!',
|
|
icon: 'success',
|
|
confirmButtonText: 'Great!'
|
|
}).then(() => {
|
|
cart = [];
|
|
updateCartUI();
|
|
cartModal.hide();
|
|
document.getElementById('cust-name').value = '';
|
|
});
|
|
} else {
|
|
throw new Error(data.error || 'Failed to place order');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
Swal.fire('Error', err.message, 'error');
|
|
})
|
|
.finally(() => {
|
|
btn.disabled = false;
|
|
btn.innerHTML = 'Place Order <i class="bi bi-send-fill ms-1"></i>';
|
|
});
|
|
}
|
|
|
|
function showToast(msg) {
|
|
// Simple alert for now, or use a toast
|
|
console.log(msg);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|