384 lines
15 KiB
JavaScript
384 lines
15 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
let cart = [];
|
|
const cartItemsContainer = document.getElementById('cart-items');
|
|
const cartTotalPrice = document.getElementById('cart-total-price');
|
|
const cartSubtotal = document.getElementById('cart-subtotal');
|
|
const checkoutBtn = document.getElementById('checkout-btn');
|
|
|
|
// Table Management
|
|
let currentTableId = null;
|
|
let currentTableName = null;
|
|
const tableDisplay = document.getElementById('current-table-display');
|
|
const tableModalEl = document.getElementById('tableSelectionModal');
|
|
const tableSelectionModal = new bootstrap.Modal(tableModalEl);
|
|
|
|
// Customer Search Elements
|
|
const customerSearchInput = document.getElementById('customer-search');
|
|
const customerResults = document.getElementById('customer-results');
|
|
const selectedCustomerId = document.getElementById('selected-customer-id');
|
|
const clearCustomerBtn = document.getElementById('clear-customer');
|
|
const customerInfo = document.getElementById('customer-info');
|
|
const customerNameDisplay = document.getElementById('customer-name-display');
|
|
|
|
// Product Search & Filter
|
|
const productSearchInput = document.getElementById('product-search-input');
|
|
let currentCategory = 'all';
|
|
let currentSearchQuery = '';
|
|
|
|
// Helper for currency
|
|
function formatCurrency(amount) {
|
|
const settings = (typeof COMPANY_SETTINGS !== 'undefined') ? COMPANY_SETTINGS : { currency_symbol: '$', currency_decimals: 2 };
|
|
const symbol = settings.currency_symbol || '$';
|
|
const decimals = parseInt(settings.currency_decimals || 2);
|
|
return symbol + parseFloat(amount).toFixed(decimals);
|
|
}
|
|
|
|
// --- Product Filtering (Category + Search) ---
|
|
function filterProducts() {
|
|
const items = document.querySelectorAll('.product-item');
|
|
items.forEach(item => {
|
|
const matchesCategory = (currentCategory == 'all' || item.dataset.categoryId == currentCategory);
|
|
const name = item.querySelector('.card-title').textContent.toLowerCase();
|
|
const matchesSearch = name.includes(currentSearchQuery);
|
|
|
|
if (matchesCategory && matchesSearch) {
|
|
item.style.display = 'block';
|
|
} else {
|
|
item.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
window.filterCategory = function(categoryId, btnElement) {
|
|
currentCategory = categoryId;
|
|
|
|
// Update Active Button State
|
|
if (btnElement) {
|
|
document.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('active'));
|
|
btnElement.classList.add('active');
|
|
} else if (typeof btnElement === 'undefined' && categoryId !== 'all') {
|
|
// Try to find the button corresponding to this category ID
|
|
// This might happen if triggered programmatically
|
|
}
|
|
|
|
filterProducts();
|
|
};
|
|
|
|
if (productSearchInput) {
|
|
productSearchInput.addEventListener('input', (e) => {
|
|
currentSearchQuery = e.target.value.trim().toLowerCase();
|
|
filterProducts();
|
|
});
|
|
}
|
|
|
|
// --- Customer Search ---
|
|
let searchTimeout;
|
|
if (customerSearchInput) {
|
|
customerSearchInput.addEventListener('input', (e) => {
|
|
const query = e.target.value.trim();
|
|
clearTimeout(searchTimeout);
|
|
|
|
if (query.length < 2) {
|
|
customerResults.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
searchTimeout = setTimeout(() => {
|
|
fetch(`api/search_customers.php?q=${encodeURIComponent(query)}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
customerResults.innerHTML = '';
|
|
if (data.length > 0) {
|
|
data.forEach(cust => {
|
|
const a = document.createElement('a');
|
|
a.href = '#';
|
|
a.className = 'list-group-item list-group-item-action';
|
|
a.innerHTML = `<div class="fw-bold">${cust.name}</div><div class="small text-muted">${cust.phone || ''}</div>`;
|
|
a.onclick = (ev) => {
|
|
ev.preventDefault();
|
|
selectCustomer(cust);
|
|
};
|
|
customerResults.appendChild(a);
|
|
});
|
|
customerResults.style.display = 'block';
|
|
} else {
|
|
customerResults.innerHTML = '<div class="list-group-item text-muted">No results found</div>';
|
|
customerResults.style.display = 'block';
|
|
}
|
|
});
|
|
}, 300);
|
|
});
|
|
|
|
// Close search on click outside
|
|
document.addEventListener('click', (e) => {
|
|
if (!customerSearchInput.contains(e.target) && !customerResults.contains(e.target)) {
|
|
customerResults.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
function selectCustomer(cust) {
|
|
selectedCustomerId.value = cust.id;
|
|
customerNameDisplay.textContent = cust.name;
|
|
customerSearchInput.value = cust.name; // Show name in input
|
|
customerSearchInput.disabled = true; // Lock input
|
|
customerResults.style.display = 'none';
|
|
clearCustomerBtn.classList.remove('d-none');
|
|
// customerInfo.classList.remove('d-none');
|
|
}
|
|
|
|
if (clearCustomerBtn) {
|
|
clearCustomerBtn.addEventListener('click', () => {
|
|
selectedCustomerId.value = '';
|
|
customerSearchInput.value = '';
|
|
customerSearchInput.disabled = false;
|
|
clearCustomerBtn.classList.add('d-none');
|
|
customerInfo.classList.add('d-none');
|
|
customerSearchInput.focus();
|
|
});
|
|
}
|
|
|
|
// --- Table & Order Type Logic ---
|
|
const orderTypeInputs = document.querySelectorAll('input[name="order_type"]');
|
|
|
|
function checkOrderType() {
|
|
const checked = document.querySelector('input[name="order_type"]:checked');
|
|
if (!checked) return;
|
|
|
|
const selected = checked.value;
|
|
if (selected === 'dine-in') {
|
|
if (!currentTableId) openTableSelectionModal();
|
|
if (tableDisplay) tableDisplay.style.display = 'inline-block';
|
|
} else {
|
|
if (tableDisplay) tableDisplay.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
orderTypeInputs.forEach(input => {
|
|
input.addEventListener('change', checkOrderType);
|
|
});
|
|
|
|
function openTableSelectionModal() {
|
|
const container = document.getElementById('table-list-container');
|
|
container.innerHTML = '<div class="text-center py-5"><div class="spinner-border text-primary" role="status"></div></div>';
|
|
tableSelectionModal.show();
|
|
|
|
fetch('api/tables.php')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
renderTables(data.tables);
|
|
} else {
|
|
container.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
|
|
}
|
|
})
|
|
.catch(() => {
|
|
container.innerHTML = `<div class="alert alert-danger">Error loading tables.</div>`;
|
|
});
|
|
}
|
|
|
|
function renderTables(tables) {
|
|
const container = document.getElementById('table-list-container');
|
|
container.innerHTML = '';
|
|
|
|
if (tables.length === 0) {
|
|
container.innerHTML = '<div class="col-12 text-center">No tables found.</div>';
|
|
return;
|
|
}
|
|
|
|
tables.forEach(table => {
|
|
const isOccupied = table.is_occupied;
|
|
const col = document.createElement('div');
|
|
col.className = 'col-6 col-md-4 col-lg-3';
|
|
col.innerHTML = `
|
|
<div class="card h-100 shadow-sm ${isOccupied ? 'bg-secondary text-white opacity-50' : 'border-primary text-primary'}"
|
|
style="cursor: ${isOccupied ? 'not-allowed' : 'pointer'}"
|
|
${!isOccupied ? `onclick="selectTable(${table.id}, '${table.name}')"` : ''}>
|
|
<div class="card-body text-center p-3">
|
|
<h5 class="fw-bold mb-1">${table.name}</h5>
|
|
<small>${table.capacity} Pax</small>
|
|
<div class="mt-2 badge ${isOccupied ? 'bg-dark' : 'bg-success'}">${isOccupied ? 'Occupied' : 'Available'}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
container.appendChild(col);
|
|
});
|
|
}
|
|
|
|
window.selectTable = function(id, name) {
|
|
currentTableId = id;
|
|
currentTableName = name;
|
|
if (tableDisplay) {
|
|
tableDisplay.innerHTML = `Table: ${name}`;
|
|
tableDisplay.style.display = 'block';
|
|
}
|
|
tableSelectionModal.hide();
|
|
showToast(`Selected Table: ${name}`, 'success');
|
|
};
|
|
|
|
// --- Cart Logic ---
|
|
document.querySelectorAll('.add-to-cart').forEach(card => {
|
|
card.addEventListener('click', (e) => {
|
|
// Find closest card just in case click was on child
|
|
const target = e.currentTarget;
|
|
const product = {
|
|
id: target.dataset.id,
|
|
name: target.dataset.name,
|
|
price: parseFloat(target.dataset.price),
|
|
quantity: 1
|
|
};
|
|
addToCart(product);
|
|
});
|
|
});
|
|
|
|
function addToCart(product) {
|
|
const existing = cart.find(item => item.id === product.id);
|
|
if (existing) {
|
|
existing.quantity++;
|
|
} else {
|
|
cart.push(product);
|
|
}
|
|
updateCart();
|
|
}
|
|
|
|
window.changeQuantity = function(index, delta) {
|
|
if (cart[index]) {
|
|
cart[index].quantity += delta;
|
|
if (cart[index].quantity <= 0) {
|
|
removeFromCart(index);
|
|
} else {
|
|
updateCart();
|
|
}
|
|
}
|
|
};
|
|
|
|
function updateCart() {
|
|
if (cart.length === 0) {
|
|
cartItemsContainer.innerHTML = `
|
|
<div class="text-center text-muted mt-5">
|
|
<i class="bi bi-basket3 fs-1 text-light"></i>
|
|
<p class="mt-2">Cart is empty</p>
|
|
</div>`;
|
|
cartSubtotal.innerText = formatCurrency(0);
|
|
cartTotalPrice.innerText = formatCurrency(0);
|
|
checkoutBtn.disabled = true;
|
|
return;
|
|
}
|
|
|
|
cartItemsContainer.innerHTML = '';
|
|
let total = 0;
|
|
|
|
cart.forEach((item, index) => {
|
|
const itemTotal = item.price * item.quantity;
|
|
total += itemTotal;
|
|
|
|
const row = document.createElement('div');
|
|
row.className = 'd-flex justify-content-between align-items-center mb-3 border-bottom pb-2';
|
|
|
|
// Updated Cart Item Layout
|
|
row.innerHTML = `
|
|
<div class="flex-grow-1 me-2">
|
|
<div class="fw-bold text-truncate" style="max-width: 140px;">${item.name}</div>
|
|
<div class="small text-muted">${formatCurrency(item.price)}</div>
|
|
</div>
|
|
<div class="d-flex align-items-center bg-light rounded px-1">
|
|
<button class="btn btn-sm text-secondary p-0" style="width: 24px;" onclick="changeQuantity(${index}, -1)"><i class="bi bi-dash"></i></button>
|
|
<span class="mx-1 fw-bold small" style="min-width: 20px; text-align: center;">${item.quantity}</span>
|
|
<button class="btn btn-sm text-secondary p-0" style="width: 24px;" onclick="changeQuantity(${index}, 1)"><i class="bi bi-plus"></i></button>
|
|
</div>
|
|
<div class="text-end ms-3" style="min-width: 60px;">
|
|
<div class="fw-bold">${formatCurrency(itemTotal)}</div>
|
|
<button class="btn btn-sm text-danger p-0 mt-1" style="font-size: 0.8rem;" onclick="removeFromCart(${index})">Remove</button>
|
|
</div>
|
|
`;
|
|
cartItemsContainer.appendChild(row);
|
|
});
|
|
|
|
cartSubtotal.innerText = formatCurrency(total);
|
|
cartTotalPrice.innerText = formatCurrency(total);
|
|
checkoutBtn.disabled = false;
|
|
}
|
|
|
|
window.removeFromCart = function(index) {
|
|
cart.splice(index, 1);
|
|
updateCart();
|
|
};
|
|
|
|
// --- Checkout ---
|
|
checkoutBtn.addEventListener('click', () => {
|
|
if (cart.length === 0) return;
|
|
|
|
const orderTypeInput = document.querySelector('input[name="order_type"]:checked');
|
|
const orderType = orderTypeInput ? orderTypeInput.value : 'dine-in';
|
|
|
|
if (orderType === 'dine-in' && !currentTableId) {
|
|
showToast('Please select a table first', 'warning');
|
|
openTableSelectionModal();
|
|
return;
|
|
}
|
|
|
|
const totalAmount = cart.reduce((acc, item) => acc + (item.price * item.quantity), 0);
|
|
const custId = selectedCustomerId.value;
|
|
|
|
const orderData = {
|
|
table_number: (orderType === 'dine-in') ? currentTableId : null,
|
|
order_type: orderType,
|
|
customer_id: custId || null,
|
|
total_amount: totalAmount,
|
|
items: cart.map(item => ({
|
|
product_id: item.id,
|
|
quantity: item.quantity,
|
|
unit_price: item.price
|
|
}))
|
|
};
|
|
|
|
// Show loading state
|
|
checkoutBtn.disabled = true;
|
|
checkoutBtn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Processing...';
|
|
|
|
fetch('api/order.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(orderData)
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
checkoutBtn.disabled = false;
|
|
checkoutBtn.innerHTML = 'Place Order <i class="bi bi-arrow-right ms-2"></i>';
|
|
|
|
if (data.success) {
|
|
cart = [];
|
|
updateCart();
|
|
// Reset customer
|
|
if (clearCustomerBtn) clearCustomerBtn.click();
|
|
|
|
showToast(`Order #${data.order_id} placed!`, 'success');
|
|
} else {
|
|
showToast(`Error: ${data.error}`, 'danger');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
checkoutBtn.disabled = false;
|
|
checkoutBtn.innerHTML = 'Place Order';
|
|
showToast('Network Error', 'danger');
|
|
});
|
|
});
|
|
|
|
function showToast(msg, type = 'primary') {
|
|
const toastContainer = document.getElementById('toast-container');
|
|
const id = 'toast-' + Date.now();
|
|
const html = `
|
|
<div id="${id}" class="toast align-items-center text-white bg-${type} border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="d-flex">
|
|
<div class="toast-body">${msg}</div>
|
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
toastContainer.insertAdjacentHTML('beforeend', html);
|
|
const el = document.getElementById(id);
|
|
const t = new bootstrap.Toast(el, { delay: 3000 });
|
|
t.show();
|
|
el.addEventListener('hidden.bs.toast', () => el.remove());
|
|
}
|
|
}); |