1131 lines
48 KiB
JavaScript
1131 lines
48 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
// SweetAlert2 Toast Mixin
|
|
const Toast = Swal.mixin({
|
|
toast: true,
|
|
position: 'top-end',
|
|
showConfirmButton: false,
|
|
timer: 3000,
|
|
timerProgressBar: true,
|
|
didOpen: (toast) => {
|
|
toast.addEventListener('mouseenter', Swal.stopTimer);
|
|
toast.addEventListener('mouseleave', Swal.resumeTimer);
|
|
}
|
|
});
|
|
|
|
// Global settings with fallbacks
|
|
const settings = (typeof COMPANY_SETTINGS !== 'undefined') ? COMPANY_SETTINGS : {
|
|
currency_symbol: '$',
|
|
currency_decimals: 2,
|
|
vat_rate: 0
|
|
};
|
|
|
|
let cart = [];
|
|
let currentOrderId = null; // Track order ID for updates
|
|
const cartItemsContainer = document.getElementById('cart-items');
|
|
const cartTotalPrice = document.getElementById('cart-total-price');
|
|
const cartSubtotal = document.getElementById('cart-subtotal');
|
|
const cartVatInput = document.getElementById('cart-vat-input');
|
|
|
|
// Updated Button References
|
|
const quickOrderBtn = document.getElementById('quick-order-btn');
|
|
const placeOrderBtn = document.getElementById('place-order-btn');
|
|
const recallBtn = document.getElementById('recall-bill-btn');
|
|
const reprintReceiptBtn = document.getElementById('reprint-receipt-btn');
|
|
|
|
// Recall Modal
|
|
const recallModalEl = document.getElementById('recallOrderModal');
|
|
const recallModal = recallModalEl ? new bootstrap.Modal(recallModalEl) : null;
|
|
const recallList = document.getElementById('recall-orders-list');
|
|
|
|
// Loyalty State
|
|
let isLoyaltyRedemption = false;
|
|
const loyaltySection = document.getElementById('loyalty-section');
|
|
const loyaltyPointsDisplay = document.getElementById('loyalty-points-display');
|
|
const loyaltyMessage = document.getElementById('loyalty-message');
|
|
const redeemLoyaltyBtn = document.getElementById('redeem-loyalty-btn');
|
|
const viewPointsHistoryBtn = document.getElementById('view-points-history-btn');
|
|
|
|
// Points History Modal
|
|
const pointsHistoryModalEl = document.getElementById('pointsHistoryModal');
|
|
const pointsHistoryModal = pointsHistoryModalEl ? new bootstrap.Modal(pointsHistoryModalEl) : null;
|
|
const pointsHistoryBody = document.getElementById('points-history-body');
|
|
const pointsHistoryEmpty = document.getElementById('points-history-empty');
|
|
|
|
// Table Management
|
|
let currentTableId = null;
|
|
let currentTableName = null;
|
|
const tableDisplay = document.getElementById('current-table-display');
|
|
const tableModalEl = document.getElementById('tableSelectionModal');
|
|
const tableSelectionModal = tableModalEl ? new bootstrap.Modal(tableModalEl) : null;
|
|
|
|
// Variant Management
|
|
const variantModalEl = document.getElementById('variantSelectionModal');
|
|
const variantSelectionModal = variantModalEl ? new bootstrap.Modal(variantModalEl) : null;
|
|
let pendingProduct = null;
|
|
|
|
// 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');
|
|
let currentCustomer = null;
|
|
|
|
// Payment Modal
|
|
const paymentModalEl = document.getElementById('paymentSelectionModal');
|
|
const paymentSelectionModal = paymentModalEl ? new bootstrap.Modal(paymentModalEl) : null;
|
|
const paymentMethodsContainer = document.getElementById('payment-methods-container');
|
|
|
|
// Product Search & Filter
|
|
const productSearchInput = document.getElementById('product-search-input');
|
|
let currentCategory = 'all';
|
|
let currentSearchQuery = '';
|
|
|
|
// Helper for currency
|
|
function formatCurrency(amount) {
|
|
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');
|
|
}
|
|
|
|
filterProducts();
|
|
};
|
|
|
|
if (productSearchInput) {
|
|
productSearchInput.addEventListener('input', (e) => {
|
|
currentSearchQuery = e.target.value.trim().toLowerCase();
|
|
filterProducts();
|
|
});
|
|
}
|
|
|
|
// --- Recall Order Logic ---
|
|
if (recallBtn) {
|
|
recallBtn.addEventListener('click', () => {
|
|
fetchRecallOrders();
|
|
});
|
|
}
|
|
|
|
function fetchRecallOrders() {
|
|
if (!recallList) return;
|
|
recallList.innerHTML = '<div class="text-center py-5"><div class="spinner-border text-primary" role="status"></div></div>';
|
|
if (recallModal) recallModal.show();
|
|
|
|
const outletId = new URLSearchParams(window.location.search).get('outlet_id') || 1;
|
|
fetch(`api/recall_orders.php?action=list&outlet_id=${outletId}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
recallList.innerHTML = '';
|
|
if (data.success && data.orders.length > 0) {
|
|
data.orders.forEach(order => {
|
|
const item = document.createElement('button');
|
|
item.className = 'list-group-item list-group-item-action d-flex justify-content-between align-items-center';
|
|
item.innerHTML = `
|
|
<div>
|
|
<div class="fw-bold">Order #${order.id} <span class="badge bg-secondary ms-1">${order.order_type}</span></div>
|
|
<small class="text-muted">
|
|
${order.customer_name || 'Guest'}
|
|
${order.table_number ? ' • Table ' + order.table_number : ''}
|
|
• ${order.time_formatted}
|
|
</small>
|
|
</div>
|
|
<div class="text-end">
|
|
<div class="fw-bold text-primary">${formatCurrency(order.total_amount)}</div>
|
|
<small class="text-muted">${order.item_count} items</small>
|
|
</div>
|
|
`;
|
|
item.onclick = () => loadRecalledOrder(order.id);
|
|
recallList.appendChild(item);
|
|
});
|
|
} else {
|
|
recallList.innerHTML = '<div class="p-4 text-center text-muted">No unpaid bills found.</div>';
|
|
}
|
|
})
|
|
.catch(err => {
|
|
recallList.innerHTML = '<div class="alert alert-danger">Error fetching orders.</div>';
|
|
});
|
|
}
|
|
|
|
function loadRecalledOrder(orderId) {
|
|
fetch(`api/recall_orders.php?action=details&id=${orderId}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Set Order ID
|
|
currentOrderId = data.order.id;
|
|
|
|
// Set Customer
|
|
if (data.customer) {
|
|
selectCustomer(data.customer);
|
|
} else {
|
|
if (clearCustomerBtn) clearCustomerBtn.click();
|
|
}
|
|
|
|
// Set Table/Order Type
|
|
const otInput = document.querySelector(`input[name="order_type"][value="${data.order.order_type}"]`);
|
|
if (otInput) {
|
|
otInput.checked = true;
|
|
if (data.order.order_type === 'dine-in' && data.order.table_id) {
|
|
selectTable(data.order.table_id, data.order.table_number);
|
|
} else {
|
|
checkOrderType();
|
|
}
|
|
}
|
|
|
|
// Populate Cart
|
|
cart = data.items;
|
|
|
|
updateCart();
|
|
if (recallModal) recallModal.hide();
|
|
showToast(`Order #${orderId} loaded!`, 'success');
|
|
} else {
|
|
showToast(data.error || 'Failed to load order', 'danger');
|
|
}
|
|
})
|
|
.catch(err => showToast('Error loading order details', 'danger'));
|
|
}
|
|
|
|
// --- 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) {
|
|
currentCustomer = 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');
|
|
|
|
// Loyalty Logic
|
|
if (loyaltySection && typeof LOYALTY_SETTINGS !== 'undefined' && LOYALTY_SETTINGS.is_enabled) {
|
|
loyaltySection.classList.remove('d-none');
|
|
loyaltyPointsDisplay.textContent = cust.points + ' pts';
|
|
|
|
if (cust.eligible_for_free_meal) {
|
|
redeemLoyaltyBtn.disabled = false;
|
|
loyaltyMessage.innerHTML = '<span class="text-success fw-bold">Eligible for Free Meal!</span>';
|
|
} else {
|
|
redeemLoyaltyBtn.disabled = true;
|
|
const needed = cust.points_needed || 0;
|
|
loyaltyMessage.textContent = `${needed} pts away from a free meal.`;
|
|
}
|
|
}
|
|
|
|
isLoyaltyRedemption = false;
|
|
}
|
|
|
|
if (clearCustomerBtn) {
|
|
clearCustomerBtn.addEventListener('click', () => {
|
|
currentCustomer = null;
|
|
selectedCustomerId.value = '';
|
|
customerSearchInput.value = '';
|
|
customerSearchInput.disabled = false;
|
|
clearCustomerBtn.classList.add('d-none');
|
|
if (customerInfo) customerInfo.classList.add('d-none');
|
|
|
|
if (loyaltySection) loyaltySection.classList.add('d-none');
|
|
isLoyaltyRedemption = false;
|
|
updateCart();
|
|
|
|
customerSearchInput.focus();
|
|
});
|
|
}
|
|
|
|
// Loyalty Redeem Click
|
|
if (redeemLoyaltyBtn) {
|
|
redeemLoyaltyBtn.addEventListener('click', () => {
|
|
if (typeof LOYALTY_SETTINGS === 'undefined' || !LOYALTY_SETTINGS.is_enabled) return;
|
|
|
|
if (cart.length === 0) {
|
|
showToast("Cart is empty!", "warning");
|
|
return;
|
|
}
|
|
|
|
if (cart.length > 1) {
|
|
showToast("Can only redeem a free meal with exactly one item in cart!", "warning");
|
|
return;
|
|
}
|
|
|
|
if (!currentCustomer || !currentCustomer.eligible_for_free_meal) return;
|
|
|
|
Swal.fire({
|
|
title: 'Redeem Loyalty?',
|
|
text: "Redeem points for a free meal? This will finalize the order immediately.",
|
|
icon: 'question',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#198754',
|
|
cancelButtonColor: '#6c757d',
|
|
confirmButtonText: 'Yes, redeem and finish!'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
isLoyaltyRedemption = true;
|
|
updateCart();
|
|
processOrder(null, 'Loyalty Redeem');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Points History View
|
|
if (viewPointsHistoryBtn) {
|
|
viewPointsHistoryBtn.addEventListener('click', () => {
|
|
if (!currentCustomer) return;
|
|
fetchPointsHistory(currentCustomer.id);
|
|
});
|
|
}
|
|
|
|
function fetchPointsHistory(customerId) {
|
|
if (!pointsHistoryBody || !pointsHistoryModal) return;
|
|
pointsHistoryBody.innerHTML = '<tr><td colspan="3" class="text-center py-4"><div class="spinner-border spinner-border-sm text-primary"></div> Loading...</td></tr>';
|
|
pointsHistoryEmpty.classList.add('d-none');
|
|
pointsHistoryModal.show();
|
|
|
|
fetch(`api/customer_loyalty_history.php?customer_id=${customerId}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
pointsHistoryBody.innerHTML = '';
|
|
if (data.success && data.history.length > 0) {
|
|
data.history.forEach(item => {
|
|
const tr = document.createElement('tr');
|
|
const dateObj = new Date(item.created_at);
|
|
const date = dateObj.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' }) + ' ' +
|
|
dateObj.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
|
|
|
|
const pointsClass = item.points_change > 0 ? 'text-success' : 'text-danger';
|
|
const pointsPrefix = item.points_change > 0 ? '+' : '';
|
|
|
|
tr.innerHTML = `
|
|
<td class="ps-3 small align-middle" style="font-size: 0.75rem; white-space: nowrap;">${date}</td>
|
|
<td class="align-middle">
|
|
<div class="small fw-bold">${item.reason}</div>
|
|
${item.order_id ? `<div class="x-small text-muted" style="font-size: 0.65rem;">Order #${item.order_id}</div>` : ''}
|
|
</td>
|
|
<td class="text-end pe-3 fw-bold ${pointsClass} align-middle">${pointsPrefix}${item.points_change}</td>
|
|
`;
|
|
pointsHistoryBody.appendChild(tr);
|
|
});
|
|
} else {
|
|
pointsHistoryEmpty.classList.remove('d-none');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
pointsHistoryBody.innerHTML = '<tr><td colspan="3" class="text-center text-danger">Error loading history</td></tr>';
|
|
});
|
|
}
|
|
|
|
// --- 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 && tableSelectionModal) openTableSelectionModal();
|
|
if (tableDisplay) tableDisplay.style.display = 'inline-block';
|
|
} else {
|
|
if (tableDisplay) tableDisplay.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
orderTypeInputs.forEach(input => {
|
|
input.addEventListener('change', checkOrderType);
|
|
});
|
|
|
|
function openTableSelectionModal() {
|
|
if (!tableSelectionModal) return;
|
|
const container = document.getElementById('table-list-container');
|
|
if (!container) return;
|
|
container.innerHTML = '<div class="text-center py-5"><div class="spinner-border text-primary" role="status"></div></div>';
|
|
|
|
// Update Modal Title
|
|
const modalTitle = document.querySelector('#tableSelectionModal .modal-title');
|
|
if (modalTitle && typeof CURRENT_OUTLET !== 'undefined') {
|
|
modalTitle.textContent = `Select Table - ${CURRENT_OUTLET.name}`;
|
|
}
|
|
|
|
tableSelectionModal.show();
|
|
|
|
const outletId = new URLSearchParams(window.location.search).get('outlet_id') || 1;
|
|
fetch(`api/tables.php?outlet_id=${outletId}`)
|
|
.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');
|
|
if (!container) return;
|
|
container.innerHTML = '';
|
|
|
|
if (tables.length === 0) {
|
|
const outletName = (typeof CURRENT_OUTLET !== 'undefined') ? CURRENT_OUTLET.name : 'this outlet';
|
|
container.innerHTML = `<div class="col-12 text-center text-muted py-4">
|
|
<i class="bi bi-slash-circle fs-1 d-block mb-2"></i>
|
|
No tables found for <strong>${outletName}</strong>.
|
|
</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';
|
|
}
|
|
if (tableSelectionModal) tableSelectionModal.hide();
|
|
showToast(`Selected Table: ${name}`, 'success');
|
|
};
|
|
|
|
// --- Cart Logic ---
|
|
document.querySelectorAll('.add-to-cart').forEach(card => {
|
|
card.addEventListener('click', (e) => {
|
|
const target = e.currentTarget;
|
|
const product = {
|
|
id: target.dataset.id,
|
|
name: target.dataset.name,
|
|
name_ar: target.dataset.nameAr || '',
|
|
price: parseFloat(target.dataset.price),
|
|
base_price: parseFloat(target.dataset.price),
|
|
hasVariants: target.dataset.hasVariants === 'true',
|
|
quantity: 1,
|
|
variant_id: null,
|
|
variant_name: null
|
|
};
|
|
|
|
if (product.hasVariants) {
|
|
openVariantModal(product);
|
|
} else {
|
|
addToCart(product);
|
|
}
|
|
});
|
|
});
|
|
|
|
function openVariantModal(product) {
|
|
if (!variantSelectionModal) return;
|
|
pendingProduct = product;
|
|
const variants = (typeof PRODUCT_VARIANTS !== 'undefined') ? (PRODUCT_VARIANTS[product.id] || []) : [];
|
|
const list = document.getElementById('variant-list');
|
|
const title = document.getElementById('variantModalTitle');
|
|
if (title) title.textContent = `Select option for ${product.name}`;
|
|
|
|
if (!list) return;
|
|
list.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';
|
|
const adj = parseFloat(v.price_adjustment);
|
|
const finalPrice = product.base_price + adj;
|
|
|
|
btn.innerHTML = `
|
|
<span>${v.name}</span>
|
|
<span class="fw-bold">${formatCurrency(finalPrice)}</span>
|
|
`;
|
|
btn.onclick = () => {
|
|
pendingProduct.variant_id = v.id;
|
|
pendingProduct.variant_name = v.name;
|
|
pendingProduct.price = finalPrice;
|
|
addToCart(pendingProduct);
|
|
variantSelectionModal.hide();
|
|
};
|
|
list.appendChild(btn);
|
|
});
|
|
|
|
variantSelectionModal.show();
|
|
}
|
|
|
|
function addToCart(product) {
|
|
const existing = cart.find(item => item.id === product.id && item.variant_id === product.variant_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 (reprintReceiptBtn) {
|
|
if (currentOrderId) reprintReceiptBtn.classList.remove('d-none');
|
|
else reprintReceiptBtn.classList.add('d-none');
|
|
}
|
|
|
|
if (cart.length === 0) {
|
|
if (cartItemsContainer) {
|
|
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>`;
|
|
}
|
|
if (cartSubtotal) cartSubtotal.innerText = formatCurrency(0);
|
|
if (cartVatInput) cartVatInput.value = 0;
|
|
if (cartTotalPrice) cartTotalPrice.innerText = formatCurrency(0);
|
|
if (quickOrderBtn) quickOrderBtn.disabled = true;
|
|
if (placeOrderBtn) placeOrderBtn.disabled = true;
|
|
return;
|
|
}
|
|
|
|
if (cartItemsContainer) cartItemsContainer.innerHTML = '';
|
|
let subtotal = 0;
|
|
|
|
cart.forEach((item, index) => {
|
|
const itemTotal = item.price * item.quantity;
|
|
subtotal += itemTotal;
|
|
|
|
if (cartItemsContainer) {
|
|
const row = document.createElement('div');
|
|
row.className = 'd-flex justify-content-between align-items-center mb-3 border-bottom pb-2';
|
|
|
|
const variantLabel = item.variant_name ? `<span class="badge bg-light text-dark border ms-1">${item.variant_name}</span>` : '';
|
|
const arabicNameDisplay = item.name_ar ? `<div class="text-primary small fw-semibold" dir="rtl" style="font-size: 0.75rem;">${item.name_ar}</div>` : '';
|
|
|
|
row.innerHTML = `
|
|
<div class="flex-grow-1 me-2">
|
|
<div class="fw-bold text-truncate" style="max-width: 140px;">${item.name}</div>
|
|
${arabicNameDisplay}
|
|
<div class="small text-muted">${formatCurrency(item.price)} ${variantLabel}</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);
|
|
}
|
|
});
|
|
|
|
if (cartSubtotal) cartSubtotal.innerText = formatCurrency(subtotal);
|
|
|
|
let vat = 0;
|
|
if (isLoyaltyRedemption) {
|
|
vat = -subtotal;
|
|
} else {
|
|
const vatRate = parseFloat(settings.vat_rate) || 0;
|
|
vat = subtotal * (vatRate / 100);
|
|
}
|
|
|
|
if (cartVatInput) cartVatInput.value = vat.toFixed(2);
|
|
|
|
let total = subtotal + vat;
|
|
if (total < 0) total = 0;
|
|
|
|
if (cartTotalPrice) cartTotalPrice.innerText = formatCurrency(total);
|
|
if (quickOrderBtn) quickOrderBtn.disabled = false;
|
|
if (placeOrderBtn) placeOrderBtn.disabled = false;
|
|
}
|
|
|
|
window.removeFromCart = function(index) {
|
|
cart.splice(index, 1);
|
|
updateCart();
|
|
};
|
|
|
|
window.clearCart = function() {
|
|
if (cart.length === 0) return;
|
|
Swal.fire({
|
|
title: 'Clear Cart?',
|
|
text: "Are you sure you want to remove all items from the cart?",
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#dc3545',
|
|
cancelButtonColor: '#6c757d',
|
|
confirmButtonText: 'Yes, clear it!'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
cart = [];
|
|
if (cartVatInput) cartVatInput.value = 0;
|
|
currentOrderId = null;
|
|
isLoyaltyRedemption = false;
|
|
updateCart();
|
|
showToast("Cart cleared", "success");
|
|
}
|
|
});
|
|
};
|
|
|
|
// --- Payment Selection Logic ---
|
|
function renderPaymentMethods() {
|
|
if (!paymentMethodsContainer) return;
|
|
paymentMethodsContainer.innerHTML = '';
|
|
|
|
if (typeof PAYMENT_TYPES !== 'undefined' && PAYMENT_TYPES.length > 0) {
|
|
PAYMENT_TYPES.forEach(pt => {
|
|
const col = document.createElement('div');
|
|
col.className = 'col-6';
|
|
col.innerHTML = `
|
|
<button class="btn btn-outline-primary w-100 payment-btn d-flex flex-column align-items-center justify-content-center"
|
|
onclick="processOrder(${pt.id}, '${pt.name}')">
|
|
<i class="bi ${getPaymentIcon(pt.name)} fs-3 mb-1"></i>
|
|
<span>${pt.name}</span>
|
|
</button>
|
|
`;
|
|
paymentMethodsContainer.appendChild(col);
|
|
});
|
|
} else {
|
|
paymentMethodsContainer.innerHTML = '<div class="alert alert-warning">No payment methods configured.</div>';
|
|
}
|
|
}
|
|
|
|
function getPaymentIcon(name) {
|
|
const n = name.toLowerCase();
|
|
if (n.includes('cash')) return 'bi-cash-coin';
|
|
if (n.includes('card') || n.includes('visa') || n.includes('master')) return 'bi-credit-card';
|
|
if (n.includes('qr') || n.includes('scan')) return 'bi-qr-code';
|
|
if (n.includes('bank') || n.includes('transfer')) return 'bi-building-columns';
|
|
return 'bi-wallet2';
|
|
}
|
|
|
|
renderPaymentMethods();
|
|
|
|
// --- Checkout Flow (Quick Order) ---
|
|
function validateOrder() {
|
|
if (cart.length === 0) return false;
|
|
|
|
const orderTypeInput = document.querySelector('input[name="order_type"]:checked');
|
|
const orderType = orderTypeInput ? orderTypeInput.value : 'takeaway';
|
|
|
|
if (orderType === 'dine-in' && !currentTableId) {
|
|
showToast('Please select a table first', 'warning');
|
|
openTableSelectionModal();
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
if (quickOrderBtn) {
|
|
quickOrderBtn.addEventListener('click', () => {
|
|
if (validateOrder() && paymentSelectionModal) {
|
|
paymentSelectionModal.show();
|
|
}
|
|
});
|
|
}
|
|
|
|
// --- Place Order (Pay Later) Flow ---
|
|
if (placeOrderBtn) {
|
|
placeOrderBtn.addEventListener('click', () => {
|
|
if (validateOrder()) {
|
|
Swal.fire({
|
|
title: 'Place Order?',
|
|
text: "Place order without immediate payment?",
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#ffc107',
|
|
cancelButtonColor: '#6c757d',
|
|
confirmButtonText: 'Yes, place order'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
processOrder(null, 'Pay Later');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
window.processOrder = function(paymentTypeId, paymentTypeName) {
|
|
const orderTypeInput = document.querySelector('input[name="order_type"]:checked');
|
|
const orderType = orderTypeInput ? orderTypeInput.value : 'takeaway';
|
|
const subtotal = cart.reduce((acc, item) => acc + (item.price * item.quantity), 0);
|
|
const vat = parseFloat(cartVatInput ? cartVatInput.value : 0) || 0;
|
|
const totalAmount = Math.max(0, subtotal + vat);
|
|
const custId = selectedCustomerId ? selectedCustomerId.value : null;
|
|
|
|
const orderData = {
|
|
order_id: currentOrderId,
|
|
table_number: (orderType === 'dine-in') ? currentTableId : null,
|
|
order_type: orderType,
|
|
customer_id: custId || null,
|
|
outlet_id: new URLSearchParams(window.location.search).get('outlet_id') || 1,
|
|
payment_type_id: paymentTypeId,
|
|
total_amount: totalAmount,
|
|
vat: vat,
|
|
redeem_loyalty: isLoyaltyRedemption,
|
|
items: cart.map(item => ({
|
|
product_id: item.id,
|
|
quantity: item.quantity,
|
|
unit_price: item.price,
|
|
variant_id: item.variant_id
|
|
}))
|
|
};
|
|
|
|
// Disable buttons
|
|
if (paymentMethodsContainer) {
|
|
const btns = paymentMethodsContainer.querySelectorAll('button');
|
|
btns.forEach(b => b.disabled = true);
|
|
}
|
|
if (quickOrderBtn) quickOrderBtn.disabled = true;
|
|
if (placeOrderBtn) placeOrderBtn.disabled = true;
|
|
|
|
fetch('api/order.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(orderData)
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (paymentMethodsContainer) {
|
|
const btns = paymentMethodsContainer.querySelectorAll('button');
|
|
btns.forEach(b => b.disabled = false);
|
|
}
|
|
if (quickOrderBtn) quickOrderBtn.disabled = false;
|
|
if (placeOrderBtn) placeOrderBtn.disabled = false;
|
|
|
|
if (paymentSelectionModal) paymentSelectionModal.hide();
|
|
|
|
if (data.success) {
|
|
// Print Receipt
|
|
printReceipt({
|
|
orderId: data.order_id,
|
|
customer: currentCustomer,
|
|
items: [...cart],
|
|
total: totalAmount,
|
|
vat: vat,
|
|
orderType: orderType,
|
|
tableNumber: (orderType === 'dine-in') ? currentTableName : null,
|
|
date: new Date().toLocaleString(),
|
|
paymentMethod: paymentTypeName,
|
|
loyaltyRedeemed: isLoyaltyRedemption
|
|
});
|
|
|
|
cart = [];
|
|
if (cartVatInput) cartVatInput.value = 0;
|
|
currentOrderId = null;
|
|
isLoyaltyRedemption = false;
|
|
updateCart();
|
|
if (clearCustomerBtn) clearCustomerBtn.click();
|
|
showToast(`Order #${data.order_id} placed!`, 'success');
|
|
} else {
|
|
showToast(`Error: ${data.error}`, 'danger');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
if (paymentMethodsContainer) {
|
|
const btns = paymentMethodsContainer.querySelectorAll('button');
|
|
btns.forEach(b => b.disabled = false);
|
|
}
|
|
if (quickOrderBtn) quickOrderBtn.disabled = false;
|
|
if (placeOrderBtn) placeOrderBtn.disabled = false;
|
|
|
|
if (paymentSelectionModal) paymentSelectionModal.hide();
|
|
showToast('Network Error', 'danger');
|
|
});
|
|
};
|
|
|
|
function showToast(msg, type = 'primary') {
|
|
let icon = 'info';
|
|
if (type === 'success') icon = 'success';
|
|
if (type === 'danger') icon = 'error';
|
|
if (type === 'warning') icon = 'warning';
|
|
|
|
Toast.fire({
|
|
icon: icon,
|
|
title: msg
|
|
});
|
|
}
|
|
|
|
window.reprintCurrentReceipt = function() {
|
|
if (!currentOrderId) return;
|
|
|
|
const subtotal = cart.reduce((acc, item) => acc + (item.price * item.quantity), 0);
|
|
const vat = parseFloat(cartVatInput ? cartVatInput.value : 0) || 0;
|
|
const totalAmount = Math.max(0, subtotal + vat);
|
|
const orderType = document.querySelector('input[name="order_type"]:checked').value;
|
|
|
|
printReceipt({
|
|
orderId: currentOrderId,
|
|
customer: currentCustomer,
|
|
items: [...cart],
|
|
total: totalAmount,
|
|
vat: vat,
|
|
orderType: orderType,
|
|
tableNumber: (orderType === 'dine-in') ? currentTableName : null,
|
|
date: new Date().toLocaleString() + ' (Reprint)',
|
|
paymentMethod: 'Previously Settled',
|
|
loyaltyRedeemed: isLoyaltyRedemption
|
|
});
|
|
};
|
|
|
|
function printReceipt(data) {
|
|
const width = 400;
|
|
const height = 800;
|
|
const left = (screen.width - width) / 2;
|
|
const top = (screen.height - height) / 2;
|
|
|
|
const win = window.open('', '_blank', `width=${width},height=${height},top=${top},left=${left}`);
|
|
|
|
if (!win) {
|
|
alert('Please allow popups for this website to print receipts.');
|
|
return;
|
|
}
|
|
|
|
const tr = {
|
|
'Order': 'الطلب',
|
|
'Type': 'النوع',
|
|
'Date': 'التاريخ',
|
|
'Staff': 'الموظف',
|
|
'Table': 'طاولة',
|
|
'Payment': 'الدفع',
|
|
'ITEM': 'الصنف',
|
|
'TOTAL': 'المجموع',
|
|
'Subtotal': 'المجموع الفرعي',
|
|
'VAT': 'ضريبة القيمة المضافة',
|
|
'Tax Included': 'شامل الضريبة',
|
|
'THANK YOU FOR YOUR VISIT!': 'شكراً لزيارتكم!',
|
|
'Please come again.': 'يرجى زيارتنا مرة أخرى.',
|
|
'Customer Details': 'تفاصيل العميل',
|
|
'Tel': 'هاتف',
|
|
'takeaway': 'سفري',
|
|
'dine-in': 'محلي',
|
|
'delivery': 'توصيل',
|
|
'VAT No': 'الرقم الضريبي',
|
|
'CTR No': 'رقم السجل التجاري'
|
|
};
|
|
|
|
const itemsHtml = data.items.map(item => `
|
|
<tr>
|
|
<td style="padding: 5px 0; border-bottom: 1px solid #eee;">
|
|
<div style="font-weight: bold;">${item.name}</div>
|
|
${item.name_ar ? `<div style="font-size: 11px; color: #0d6efd; font-weight: 600;" dir="rtl">${item.name_ar}</div>` : ''}
|
|
${item.variant_name ? `<div style="font-size: 10px; color: #555;">(${item.variant_name})</div>` : ''}
|
|
<div style="font-size: 11px;">${item.quantity} x ${formatCurrency(item.price)}</div>
|
|
</td>
|
|
<td style="text-align: right; vertical-align: middle; font-weight: bold;">${formatCurrency(item.quantity * item.price)}</td>
|
|
</tr>
|
|
`).join('');
|
|
|
|
const customerHtml = data.customer ? `
|
|
<div style="margin-bottom: 10px; border: 1px solid #eee; padding: 8px; border-radius: 4px;">
|
|
<div style="font-weight: bold; text-transform: uppercase; font-size: 10px; color: #666; margin-bottom: 3px;">
|
|
<span style="float: left;">Customer Details</span>
|
|
<span style="float: right;">${tr['Customer Details']}</span>
|
|
<div style="clear: both;"></div>
|
|
</div>
|
|
<div style="font-weight: bold;">${data.customer.name}</div>
|
|
${data.customer.phone ? `<div>Tel: ${data.customer.phone}</div>` : ''}
|
|
${data.customer.address ? `<div style="font-size: 11px;">${data.customer.address}</div>` : ''}
|
|
</div>
|
|
` : '';
|
|
|
|
const tableHtml = data.tableNumber ? `
|
|
<div style="display: flex; justify-content: space-between;">
|
|
<span><strong>Table:</strong> ${data.tableNumber}</span>
|
|
<span><strong>${tr['Table']}:</strong> ${data.tableNumber}</span>
|
|
</div>` : '';
|
|
|
|
const paymentHtml = data.paymentMethod ? `
|
|
<div style="display: flex; justify-content: space-between;">
|
|
<span><strong>Payment:</strong> ${data.paymentMethod}</span>
|
|
<span><strong>${tr['Payment']}:</strong> ${data.paymentMethod}</span>
|
|
</div>` : '';
|
|
|
|
const loyaltyHtml = data.loyaltyRedeemed ? `<div style="color: #d63384; font-weight: bold; margin: 5px 0; text-align: center;">* Loyalty Reward Applied *</div>` : '';
|
|
|
|
const subtotal = data.total - data.vat;
|
|
const baseUrl = (typeof BASE_URL !== 'undefined') ? BASE_URL : '';
|
|
const logoHtml = settings.logo_url ? `<img src="${baseUrl}${settings.logo_url}" style="max-height: 80px; max-width: 150px; margin-bottom: 10px;">` : '';
|
|
const outletName = (typeof CURRENT_OUTLET !== 'undefined') ? CURRENT_OUTLET.name : '';
|
|
const staffName = (typeof CURRENT_USER !== 'undefined') ? CURRENT_USER.name : '';
|
|
|
|
const html = `
|
|
<html dir="ltr">
|
|
<head>
|
|
<title>Receipt #${data.orderId}</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: 'Courier New', 'Noto Sans Arabic', Courier, monospace;
|
|
font-size: 13px;
|
|
margin: 0;
|
|
padding: 15px;
|
|
color: #000;
|
|
line-height: 1.4;
|
|
}
|
|
.header { text-align: center; margin-bottom: 15px; }
|
|
.header h2 { margin: 0 0 5px 0; font-size: 20px; font-weight: bold; }
|
|
.header div { font-size: 12px; }
|
|
table { width: 100%; border-collapse: collapse; }
|
|
.divider { border-bottom: 2px dashed #000; margin: 10px 0; }
|
|
.thick-divider { border-bottom: 2px solid #000; margin: 10px 0; }
|
|
.totals td { padding: 3px 0; }
|
|
.footer { text-align: center; margin-top: 25px; font-size: 12px; }
|
|
.order-info { font-size: 11px; margin-bottom: 10px; }
|
|
.order-info-row { display: flex; justify-content: space-between; margin-bottom: 2px; }
|
|
.rtl { direction: rtl; unicode-bidi: embed; }
|
|
@media print {
|
|
@page { size: 80mm auto; margin: 0; }
|
|
body { width: 80mm; margin: 0; padding: 5mm; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
${logoHtml}
|
|
<h2>${settings.company_name}</h2>
|
|
<div style="font-weight: bold;">${outletName}</div>
|
|
<div>${settings.address}</div>
|
|
<div>Tel: ${settings.phone}</div>
|
|
${settings.vat_number ? `<div style="margin-top: 4px;">VAT No / الرقم الضريبي: ${settings.vat_number}</div>` : ''}
|
|
${settings.ctr_number ? `<div>CTR No / رقم السجل: ${settings.ctr_number}</div>` : ''}
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="order-info">
|
|
<div class="order-info-row">
|
|
<span><strong>Order:</strong> #${data.orderId}</span>
|
|
<span><strong>${tr['Order']}:</strong> #${data.orderId}</span>
|
|
</div>
|
|
<div class="order-info-row">
|
|
<span><strong>Type:</strong> ${data.orderType.toUpperCase()}</span>
|
|
<span><strong>${tr['Type']}:</strong> ${tr[data.orderType] || data.orderType}</span>
|
|
</div>
|
|
<div class="order-info-row">
|
|
<span><strong>Date:</strong> ${data.date}</span>
|
|
<span><strong>${tr['Date']}:</strong> ${data.date}</span>
|
|
</div>
|
|
<div class="order-info-row">
|
|
<span><strong>Staff:</strong> ${staffName}</span>
|
|
<span><strong>${tr['Staff']}:</strong> ${staffName}</span>
|
|
</div>
|
|
</div>
|
|
|
|
${tableHtml}
|
|
${paymentHtml}
|
|
${loyaltyHtml}
|
|
|
|
<div class="thick-divider"></div>
|
|
${customerHtml}
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style="text-align: left; padding-bottom: 5px;">
|
|
ITEM / الصنف
|
|
</th>
|
|
<th style="text-align: right; padding-bottom: 5px;">
|
|
TOTAL / المجموع
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${itemsHtml}
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="totals">
|
|
<table style="width: 100%">
|
|
<tr>
|
|
<td>Subtotal / ${tr['Subtotal']}</td>
|
|
<td style="text-align: right">${formatCurrency(subtotal)}</td>
|
|
</tr>
|
|
${Math.abs(data.vat) > 0 ? `
|
|
<tr>
|
|
<td>${data.vat < 0 ? 'Discount' : 'VAT'} / ${tr['VAT']}</td>
|
|
<td style="text-align: right">${data.vat < 0 ? '-' : '+'}${formatCurrency(Math.abs(data.vat))}</td>
|
|
</tr>` : ''}
|
|
<tr style="font-weight: bold; font-size: 18px;">
|
|
<td style="padding-top: 10px;">TOTAL / ${tr['TOTAL']}</td>
|
|
<td style="text-align: right; padding-top: 10px;">${formatCurrency(data.total)}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="thick-divider"></div>
|
|
|
|
<div class="footer">
|
|
<div style="font-weight: bold; font-size: 14px; margin-bottom: 2px;">THANK YOU FOR YOUR VISIT!</div>
|
|
<div style="font-weight: bold; font-size: 14px; margin-bottom: 5px;" class="rtl">${tr['THANK YOU FOR YOUR VISIT!']}</div>
|
|
<div>Please come again.</div>
|
|
<div class="rtl">${tr['Please come again.']}</div>
|
|
${settings.email ? `<div style="margin-top: 5px; font-size: 10px;">${settings.email}</div>` : ''}
|
|
<div style="margin-top: 15px; font-size: 10px; color: #888;">Powered by Abidarcafe</div>
|
|
</div>
|
|
|
|
<script>
|
|
window.onload = function() {
|
|
window.print();
|
|
setTimeout(function() { window.close(); }, 1500);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
`;
|
|
|
|
win.document.write(html);
|
|
win.document.close();
|
|
}
|
|
|
|
// Initialize logic
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
if (!urlParams.has('order_type')) {
|
|
const otTakeaway = document.getElementById('ot-takeaway');
|
|
if (otTakeaway) {
|
|
otTakeaway.checked = true;
|
|
}
|
|
}
|
|
checkOrderType();
|
|
|
|
// --- Add Customer Logic ---
|
|
const addCustomerModalEl = document.getElementById('addCustomerModal');
|
|
const saveCustomerBtn = document.getElementById('save-new-customer');
|
|
const newCustomerName = document.getElementById('new-customer-name');
|
|
const newCustomerPhone = document.getElementById('new-customer-phone');
|
|
|
|
if (saveCustomerBtn && newCustomerName && newCustomerPhone) {
|
|
saveCustomerBtn.addEventListener('click', () => {
|
|
const name = newCustomerName.value.trim();
|
|
const phone = newCustomerPhone.value.trim();
|
|
|
|
if (name === '') {
|
|
showToast('Name is required', 'warning');
|
|
return;
|
|
}
|
|
|
|
saveCustomerBtn.disabled = true;
|
|
saveCustomerBtn.textContent = 'Saving...';
|
|
|
|
fetch('api/create_customer.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name: name, phone: phone })
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
saveCustomerBtn.disabled = false;
|
|
saveCustomerBtn.textContent = 'Save Customer';
|
|
|
|
if (data.success) {
|
|
if (addCustomerModalEl) {
|
|
const modal = bootstrap.Modal.getInstance(addCustomerModalEl);
|
|
if (modal) modal.hide();
|
|
}
|
|
selectCustomer(data.customer);
|
|
showToast('Customer created successfully', 'success');
|
|
} else {
|
|
showToast(data.error || 'Error creating customer', 'danger');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
saveCustomerBtn.disabled = false;
|
|
saveCustomerBtn.textContent = 'Save Customer';
|
|
showToast('Network error', 'danger');
|
|
});
|
|
});
|
|
}
|
|
});
|