893 lines
43 KiB
JavaScript
893 lines
43 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
// SweetAlert2 Toast Mixin
|
|
const Toast = (typeof Swal !== 'undefined') ? 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);
|
|
}
|
|
}) : null;
|
|
|
|
function showToast(msg, type = 'primary') {
|
|
if (!Toast) {
|
|
console.log(`Toast: ${msg} (${type})`);
|
|
return;
|
|
}
|
|
let icon = 'info';
|
|
if (type === 'success') icon = 'success';
|
|
if (type === 'danger') icon = 'error';
|
|
if (type === 'warning') icon = 'warning';
|
|
|
|
Toast.fire({
|
|
icon: icon,
|
|
title: msg
|
|
});
|
|
}
|
|
|
|
// Global settings with fallbacks
|
|
const settings = (typeof COMPANY_SETTINGS !== 'undefined') ? COMPANY_SETTINGS : {
|
|
currency_symbol: '$',
|
|
currency_decimals: 2,
|
|
currency_position: 'before',
|
|
vat_rate: 0
|
|
};
|
|
|
|
let cart = [];
|
|
let currentOrderId = null;
|
|
const cartItemsContainer = document.getElementById('cart-items');
|
|
const cartTotalPrice = document.getElementById('cart-total-price');
|
|
const cartSubtotal = document.getElementById('cart-subtotal');
|
|
const cartVatAmount = document.getElementById('cart-vat-amount');
|
|
const cartVatRow = document.getElementById('cart-vat-row');
|
|
const cartVatInput = document.getElementById('cart-vat-input');
|
|
|
|
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');
|
|
|
|
const recallModalEl = document.getElementById('recallOrderModal');
|
|
const recallModal = recallModalEl ? new bootstrap.Modal(recallModalEl) : null;
|
|
const recallList = document.getElementById('recall-orders-list');
|
|
|
|
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');
|
|
|
|
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');
|
|
|
|
const addCustomerModalEl = document.getElementById('addCustomerModal');
|
|
const addCustomerModal = addCustomerModalEl ? new bootstrap.Modal(addCustomerModalEl) : null;
|
|
const saveNewCustomerBtn = document.getElementById('save-new-customer');
|
|
|
|
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;
|
|
|
|
const variantModalEl = document.getElementById('variantSelectionModal');
|
|
const variantSelectionModal = variantModalEl ? new bootstrap.Modal(variantModalEl) : null;
|
|
let pendingProduct = null;
|
|
|
|
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;
|
|
|
|
const paymentModalEl = document.getElementById('paymentSelectionModal');
|
|
const paymentSelectionModal = paymentModalEl ? new bootstrap.Modal(paymentModalEl) : null;
|
|
const paymentMethodsContainer = document.getElementById('payment-methods-container');
|
|
|
|
const productSearchInput = document.getElementById('product-search');
|
|
let currentCategory = 'all';
|
|
let currentSearchQuery = '';
|
|
|
|
// Translation helper check
|
|
const _t = (key) => (typeof t === 'function') ? t(key) : key;
|
|
|
|
function formatCurrency(amount) {
|
|
const symbol = settings.currency_symbol || '$';
|
|
const decimals = parseInt(settings.currency_decimals || 2);
|
|
const position = settings.currency_position || 'before';
|
|
const formatted = parseFloat(Math.abs(amount)).toFixed(decimals);
|
|
|
|
if (position === 'after') {
|
|
return formatted + ' ' + symbol;
|
|
} else {
|
|
return symbol + formatted;
|
|
}
|
|
}
|
|
|
|
function filterProducts() {
|
|
const items = document.querySelectorAll('.product-item');
|
|
items.forEach(item => {
|
|
const matchesCategory = (currentCategory == 'all' || item.dataset.category == currentCategory);
|
|
const name = (item.dataset.name || '').toLowerCase();
|
|
const name_ar = (item.dataset.nameAr || '').toLowerCase();
|
|
const sku = (item.dataset.sku || '').toLowerCase();
|
|
const matchesSearch = name.includes(currentSearchQuery) || name_ar.includes(currentSearchQuery) || sku.includes(currentSearchQuery);
|
|
|
|
item.style.display = (matchesCategory && matchesSearch) ? 'block' : 'none';
|
|
});
|
|
}
|
|
|
|
window.filterCategory = function(categoryId, btnElement) {
|
|
currentCategory = categoryId;
|
|
document.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('active'));
|
|
if (btnElement) {
|
|
btnElement.classList.add('active');
|
|
} else {
|
|
const btn = document.querySelector(`.category-btn[data-category="${categoryId}"]`);
|
|
if (btn) btn.classList.add('active');
|
|
}
|
|
filterProducts();
|
|
};
|
|
|
|
document.querySelectorAll('.category-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
filterCategory(btn.dataset.category, btn);
|
|
});
|
|
});
|
|
|
|
if (productSearchInput) {
|
|
productSearchInput.addEventListener('input', (e) => {
|
|
currentSearchQuery = e.target.value.trim().toLowerCase();
|
|
filterProducts();
|
|
});
|
|
}
|
|
|
|
window.openRecallOrderModal = function() {
|
|
if (!recallModal) return;
|
|
fetchRecallOrders();
|
|
recallModal.show();
|
|
};
|
|
|
|
function fetchRecallOrders() {
|
|
if (!recallList) return;
|
|
recallList.innerHTML = '<div class="text-center py-5"><div class="spinner-border text-primary"></div></div>';
|
|
|
|
const outletId = CURRENT_OUTLET ? CURRENT_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">${_t('none')}</div>`;
|
|
}
|
|
})
|
|
.catch(() => {
|
|
recallList.innerHTML = `<div class="alert alert-danger">${_t('error')}</div>`;
|
|
});
|
|
}
|
|
|
|
function loadRecalledOrder(orderId) {
|
|
fetch(`api/recall_orders.php?action=details&id=${orderId}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
currentOrderId = data.order.id;
|
|
if (data.customer) selectCustomer(data.customer);
|
|
else if (clearCustomerBtn) clearCustomerBtn.click();
|
|
|
|
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();
|
|
}
|
|
}
|
|
cart = data.items;
|
|
updateCart();
|
|
if (recallModal) recallModal.hide();
|
|
showToast(`Order #${orderId} loaded!`, 'success');
|
|
} else {
|
|
showToast(data.error || _t('error'), 'danger');
|
|
}
|
|
});
|
|
}
|
|
|
|
if (customerSearchInput) {
|
|
let searchTimeout;
|
|
customerSearchInput.addEventListener('input', (e) => {
|
|
const query = e.target.value.trim();
|
|
clearTimeout(searchTimeout);
|
|
if (query.length < 2) {
|
|
if (customerResults) customerResults.style.display = 'none';
|
|
return;
|
|
}
|
|
searchTimeout = setTimeout(() => {
|
|
fetch(`api/search_customers.php?q=${encodeURIComponent(query)}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (!customerResults) return;
|
|
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">${_t('none')}</div>`;
|
|
customerResults.style.display = 'block';
|
|
}
|
|
});
|
|
}, 300);
|
|
});
|
|
document.addEventListener('click', (e) => {
|
|
if (customerResults && !customerSearchInput.contains(e.target) && !customerResults.contains(e.target)) {
|
|
customerResults.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateLoyaltyUI() {
|
|
if (!loyaltySection || typeof LOYALTY_SETTINGS === 'undefined' || !LOYALTY_SETTINGS.is_enabled) return;
|
|
|
|
if (currentCustomer) {
|
|
loyaltySection.classList.remove('d-none');
|
|
if (loyaltyPointsDisplay) loyaltyPointsDisplay.textContent = currentCustomer.points + ' pts';
|
|
|
|
if (redeemLoyaltyBtn) {
|
|
const totalLoyaltyQuantity = cart.reduce((sum, item) => item.is_loyalty ? sum + item.quantity : sum, 0);
|
|
const hasLoyaltyItem = totalLoyaltyQuantity > 0;
|
|
const hasNonLoyaltyItem = cart.some(item => !item.is_loyalty);
|
|
const eligibleCount = currentCustomer.eligible_count || 1;
|
|
|
|
const isOverLimit = totalLoyaltyQuantity > eligibleCount;
|
|
|
|
redeemLoyaltyBtn.disabled = !currentCustomer.eligible_for_free_meal || !hasLoyaltyItem || hasNonLoyaltyItem || isOverLimit;
|
|
|
|
if (loyaltyMessage) {
|
|
if (currentCustomer.eligible_for_free_meal) {
|
|
loyaltyMessage.innerHTML = `<span class="text-success fw-bold">Eligible for ${eligibleCount} Free Product${eligibleCount > 1 ? 's' : ''}!</span>`;
|
|
|
|
if (hasNonLoyaltyItem) {
|
|
loyaltyMessage.innerHTML += '<div class="text-danger small" style="font-size: 0.7rem;">(Remove non-loyalty products to redeem)</div>';
|
|
} else if (!hasLoyaltyItem) {
|
|
loyaltyMessage.innerHTML += '<div class="text-warning small" style="font-size: 0.7rem;">(Add a loyalty product to redeem)</div>';
|
|
} else if (isOverLimit) {
|
|
loyaltyMessage.innerHTML += `<div class="text-danger small" style="font-size: 0.7rem;">(Maximum ${eligibleCount} free products allowed)</div>`;
|
|
}
|
|
} else {
|
|
loyaltyMessage.textContent = `${currentCustomer.points_needed || 0} pts away from a free product.`;
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
loyaltySection.classList.add('d-none');
|
|
}
|
|
}
|
|
|
|
function selectCustomer(cust) {
|
|
currentCustomer = cust;
|
|
if (selectedCustomerId) selectedCustomerId.value = cust.id;
|
|
if (customerNameDisplay) customerNameDisplay.textContent = cust.name;
|
|
if (customerSearchInput) {
|
|
customerSearchInput.value = cust.name;
|
|
customerSearchInput.disabled = true;
|
|
}
|
|
if (customerResults) customerResults.style.display = 'none';
|
|
if (clearCustomerBtn) clearCustomerBtn.classList.remove('d-none');
|
|
|
|
updateLoyaltyUI();
|
|
isLoyaltyRedemption = false;
|
|
}
|
|
|
|
if (clearCustomerBtn) {
|
|
clearCustomerBtn.addEventListener('click', () => {
|
|
currentCustomer = null;
|
|
if (selectedCustomerId) selectedCustomerId.value = '';
|
|
if (customerSearchInput) {
|
|
customerSearchInput.value = '';
|
|
customerSearchInput.disabled = false;
|
|
}
|
|
clearCustomerBtn.classList.add('d-none');
|
|
if (customerInfo) customerInfo.classList.add('d-none');
|
|
updateLoyaltyUI();
|
|
isLoyaltyRedemption = false;
|
|
updateCart();
|
|
});
|
|
}
|
|
|
|
if (redeemLoyaltyBtn) {
|
|
redeemLoyaltyBtn.addEventListener('click', () => {
|
|
if (!currentCustomer) return;
|
|
isLoyaltyRedemption = true;
|
|
processOrder(null, 'Loyalty Redeem');
|
|
});
|
|
}
|
|
|
|
if (viewPointsHistoryBtn) {
|
|
viewPointsHistoryBtn.addEventListener('click', () => {
|
|
if (!currentCustomer || !pointsHistoryModal) return;
|
|
pointsHistoryBody.innerHTML = '<div class="text-center py-3"><div class="spinner-border spinner-border-sm text-primary"></div></div>';
|
|
pointsHistoryEmpty.classList.add('d-none');
|
|
pointsHistoryModal.show();
|
|
|
|
fetch(`api/customer_loyalty_history.php?customer_id=${currentCustomer.id}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
pointsHistoryBody.innerHTML = '';
|
|
if (data.success && data.history.length > 0) {
|
|
data.history.forEach(h => {
|
|
const item = document.createElement('div');
|
|
item.className = 'list-group-item px-0 border-0 border-bottom';
|
|
const badgeClass = h.points_change > 0 ? 'bg-success' : 'bg-danger';
|
|
item.innerHTML = `
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="fw-bold text-capitalize">${h.reason}</div>
|
|
<span class="badge ${badgeClass}">${h.points_change > 0 ? '+' : ''}${h.points_change}</span>
|
|
</div>
|
|
<div class="text-muted small">${h.created_at}</div>
|
|
`;
|
|
pointsHistoryBody.appendChild(item);
|
|
});
|
|
} else {
|
|
pointsHistoryEmpty.classList.remove('d-none');
|
|
}
|
|
})
|
|
.catch(() => {
|
|
pointsHistoryBody.innerHTML = `<div class="alert alert-danger p-2 small">${_t('error')}</div>`;
|
|
});
|
|
});
|
|
}
|
|
|
|
if (saveNewCustomerBtn) {
|
|
saveNewCustomerBtn.addEventListener('click', () => {
|
|
const name = document.getElementById('new-customer-name').value.trim();
|
|
const phone = document.getElementById('new-customer-phone').value.trim();
|
|
|
|
if (!name || !phone) {
|
|
showToast('Please fill in both name and phone', 'warning');
|
|
return;
|
|
}
|
|
|
|
saveNewCustomerBtn.disabled = true;
|
|
saveNewCustomerBtn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
|
|
|
|
fetch('api/create_customer.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name, phone })
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
saveNewCustomerBtn.disabled = false;
|
|
saveNewCustomerBtn.innerHTML = 'Add Customer';
|
|
|
|
if (data.success) {
|
|
showToast('Customer added successfully', 'success');
|
|
selectCustomer(data.customer);
|
|
if (addCustomerModal) addCustomerModal.hide();
|
|
|
|
// Clear inputs
|
|
document.getElementById('new-customer-name').value = '';
|
|
document.getElementById('new-customer-phone').value = '';
|
|
} else {
|
|
showToast(data.error || 'Failed to add customer', 'danger');
|
|
}
|
|
})
|
|
.catch(() => {
|
|
saveNewCustomerBtn.disabled = false;
|
|
saveNewCustomerBtn.innerHTML = 'Add Customer';
|
|
showToast('An error occurred', 'danger');
|
|
});
|
|
});
|
|
}
|
|
|
|
window.openTableSelectionModal = function() {
|
|
if (!tableSelectionModal) return;
|
|
fetchTables();
|
|
tableSelectionModal.show();
|
|
};
|
|
|
|
function fetchTables() {
|
|
const grid = document.getElementById("tables-grid");
|
|
if (!grid) return;
|
|
grid.innerHTML = "<div class=\"text-center py-5 w-100\"><div class=\"spinner-border text-primary\"></div></div>";
|
|
|
|
const outletId = CURRENT_OUTLET ? CURRENT_OUTLET.id : 1;
|
|
fetch(`api/tables.php?outlet_id=${outletId}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
grid.innerHTML = "";
|
|
if (data.success && data.tables.length > 0) {
|
|
renderTables(data.tables);
|
|
} else {
|
|
grid.innerHTML = `<div class=\"p-4 text-center text-muted w-100">${_t("none")}</div>`;
|
|
}
|
|
})
|
|
.catch(() => {
|
|
grid.innerHTML = `<div class=\"alert alert-danger w-100">${_t("error")}</div>`;
|
|
});
|
|
}
|
|
|
|
function renderTables(tables) {
|
|
const grid = document.getElementById("tables-grid");
|
|
if (!grid) return;
|
|
grid.innerHTML = "";
|
|
|
|
const areas = {};
|
|
tables.forEach(t => {
|
|
const area = t.area_name || "General";
|
|
if (!areas[area]) areas[area] = [];
|
|
areas[area].push(t);
|
|
});
|
|
|
|
for (const area in areas) {
|
|
const areaHeader = document.createElement("div");
|
|
areaHeader.className = "col-12 mt-3";
|
|
areaHeader.innerHTML = `<h6 class=\"fw-bold text-muted text-uppercase small border-bottom pb-2">${area}</h6>`;
|
|
grid.appendChild(areaHeader);
|
|
|
|
areas[area].forEach(table => {
|
|
const col = document.createElement("div");
|
|
col.className = "col-3 col-sm-2";
|
|
const statusClass = table.is_occupied ? "btn-outline-danger" : "btn-outline-success";
|
|
col.innerHTML = `
|
|
<button class=\"btn ${statusClass} w-100 py-3 rounded-3 position-relative\" onclick=\"selectTable(${table.id}, '${table.name}')\">
|
|
<div class=\"fw-bold">${table.name}</div>
|
|
<div class=\"small\" style=\"font-size: 0.7rem;\">Cap: ${table.capacity}</div>
|
|
${table.is_occupied ? '<span class="position-absolute top-0 start-100 translate-middle p-1 bg-danger border border-light rounded-circle" title="Occupied"></span>' : ''}
|
|
</button>
|
|
`;
|
|
grid.appendChild(col);
|
|
});
|
|
}
|
|
}
|
|
|
|
window.selectTable = function(id, name) {
|
|
currentTableId = id;
|
|
currentTableName = name;
|
|
const nameDisplay = document.getElementById("selected-table-name");
|
|
if (nameDisplay) nameDisplay.textContent = name;
|
|
if (tableSelectionModal) tableSelectionModal.hide();
|
|
|
|
const dineInInput = document.getElementById("ot-dine-in");
|
|
if (dineInInput) {
|
|
dineInInput.checked = true;
|
|
checkOrderType();
|
|
}
|
|
};
|
|
|
|
window.checkOrderType = function() {
|
|
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';
|
|
}
|
|
};
|
|
|
|
document.querySelectorAll('input[name="order_type"]').forEach(input => {
|
|
input.addEventListener('change', checkOrderType);
|
|
});
|
|
|
|
window.handleProductClick = function(product, variants) {
|
|
if (variants && variants.length > 0) {
|
|
openVariantModal(product, variants);
|
|
} else {
|
|
addToCart({
|
|
id: product.id, name: product.name, name_ar: product.name_ar || "",
|
|
price: parseFloat(product.price), base_price: parseFloat(product.price),
|
|
hasVariants: false, quantity: 1, variant_id: null, variant_name: null,
|
|
is_loyalty: parseInt(product.is_loyalty) === 1,
|
|
vat_percent: parseFloat(product.vat_percent || settings.vat_rate || 0)
|
|
});
|
|
}
|
|
};
|
|
|
|
function openVariantModal(product, variants) {
|
|
if (!variantSelectionModal) return;
|
|
const list = document.getElementById('variant-list');
|
|
const title = document.getElementById('variantModalTitle');
|
|
if (title) title.textContent = `${_t('variant')}: ${LANG === 'ar' && product.name_ar ? product.name_ar : 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 finalPrice = parseFloat(product.price) + parseFloat(v.price_adjustment);
|
|
const vName = (LANG === 'ar' && v.name_ar) ? v.name_ar : v.name;
|
|
btn.innerHTML = `<span>${vName}</span><span class="fw-bold">${formatCurrency(finalPrice)}</span>`;
|
|
btn.onclick = () => {
|
|
addToCart({
|
|
id: product.id, name: product.name, name_ar: product.name_ar || "",
|
|
price: finalPrice, base_price: parseFloat(product.price),
|
|
hasVariants: true, quantity: 1, variant_id: v.id, variant_name: v.name,
|
|
is_loyalty: parseInt(product.is_loyalty) === 1,
|
|
vat_percent: parseFloat(product.vat_percent || settings.vat_rate || 0)
|
|
});
|
|
variantSelectionModal.hide();
|
|
};
|
|
list.appendChild(btn);
|
|
});
|
|
variantSelectionModal.show();
|
|
}
|
|
|
|
window.addToCart = function(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) cart.splice(index, 1);
|
|
updateCart();
|
|
}
|
|
};
|
|
|
|
window.removeFromCart = function(index) {
|
|
cart.splice(index, 1);
|
|
updateCart();
|
|
};
|
|
|
|
window.clearCart = function() {
|
|
if (cart.length === 0) return;
|
|
cart = [];
|
|
currentOrderId = null;
|
|
isLoyaltyRedemption = false;
|
|
updateCart();
|
|
showToast("Cart cleared", "success");
|
|
};
|
|
|
|
function updateCart() {
|
|
if (!cartItemsContainer) return;
|
|
|
|
updateLoyaltyUI();
|
|
|
|
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">${_t('cart_empty')}</p></div>`;
|
|
if (cartSubtotal) cartSubtotal.innerText = formatCurrency(0);
|
|
if (cartVatAmount) cartVatAmount.innerText = formatCurrency(0);
|
|
// Always show VAT row even if 0
|
|
if (cartVatRow) cartVatRow.classList.remove('d-none');
|
|
if (cartTotalPrice) cartTotalPrice.innerText = formatCurrency(0);
|
|
if (quickOrderBtn) { quickOrderBtn.disabled = true; quickOrderBtn.innerText = _t('quick_pay'); }
|
|
if (placeOrderBtn) { placeOrderBtn.disabled = true; placeOrderBtn.innerText = _t('save_bill'); }
|
|
return;
|
|
}
|
|
|
|
cartItemsContainer.innerHTML = '';
|
|
let subtotal = 0;
|
|
let totalVat = 0;
|
|
cart.forEach((item, index) => {
|
|
const itemTotal = item.price * item.quantity;
|
|
const itemVat = itemTotal * (item.vat_percent / 100);
|
|
subtotal += itemTotal;
|
|
totalVat += itemVat;
|
|
|
|
const row = document.createElement('div');
|
|
row.className = 'd-flex justify-content-between align-items-center mb-3 border-bottom pb-2';
|
|
const itemName = (LANG === 'ar' && item.name_ar) ? item.name_ar : item.name;
|
|
const otherName = (LANG === 'ar') ? item.name : item.name_ar;
|
|
|
|
row.innerHTML = `
|
|
<div class="flex-grow-1 me-2">
|
|
<div class="fw-bold text-truncate" style="max-width: 140px;">${itemName}</div>
|
|
${otherName ? `<div class="text-muted small" style="font-size: 0.75rem;">${otherName}</div>` : ''}
|
|
<div class="small text-muted">${formatCurrency(item.price)} ${item.vat_percent > 0 ? `<span class="badge bg-light text-dark border ms-1" style="font-size: 0.6rem;">${item.vat_percent}% VAT</span>` : ''}</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})">${_t('remove')}</button>
|
|
</div>
|
|
`;
|
|
cartItemsContainer.appendChild(row);
|
|
});
|
|
|
|
if (cartSubtotal) cartSubtotal.innerText = formatCurrency(subtotal);
|
|
if (cartVatAmount) cartVatAmount.innerText = formatCurrency(totalVat);
|
|
// Always show VAT row
|
|
if (cartVatRow) cartVatRow.classList.remove('d-none');
|
|
if (cartVatInput) cartVatInput.value = totalVat.toFixed(3);
|
|
|
|
const total = subtotal + totalVat;
|
|
if (cartTotalPrice) cartTotalPrice.innerText = formatCurrency(total);
|
|
|
|
if (quickOrderBtn) { quickOrderBtn.disabled = false; quickOrderBtn.innerText = _t('quick_pay'); }
|
|
if (placeOrderBtn) { placeOrderBtn.disabled = false; placeOrderBtn.innerText = _t('save_bill'); }
|
|
}
|
|
|
|
if (quickOrderBtn) {
|
|
quickOrderBtn.addEventListener('click', () => {
|
|
if (cart.length > 0 && paymentSelectionModal) {
|
|
renderPaymentMethods();
|
|
paymentSelectionModal.show();
|
|
}
|
|
});
|
|
}
|
|
|
|
if (placeOrderBtn) {
|
|
placeOrderBtn.addEventListener('click', () => {
|
|
if (cart.length > 0) processOrder(null, 'Pay Later');
|
|
});
|
|
}
|
|
|
|
function renderPaymentMethods() {
|
|
if (!paymentMethodsContainer) return;
|
|
paymentMethodsContainer.innerHTML = '';
|
|
if (typeof PAYMENT_TYPES !== 'undefined') {
|
|
PAYMENT_TYPES.forEach(pt => {
|
|
const col = document.createElement('div');
|
|
col.className = 'col-12';
|
|
col.innerHTML = `<button class="btn btn-outline-primary w-100 py-3 payment-btn" onclick="processOrder(${pt.id}, '${pt.name}')">${pt.name}</button>`;
|
|
paymentMethodsContainer.appendChild(col);
|
|
});
|
|
}
|
|
}
|
|
|
|
window.processOrder = function(paymentTypeId, paymentTypeName) {
|
|
const orderTypeInput = document.querySelector('input[name="order_type"]:checked');
|
|
const orderType = orderTypeInput ? orderTypeInput.value : 'takeaway';
|
|
|
|
let subtotal = 0;
|
|
let totalVat = 0;
|
|
const itemsData = cart.map(item => {
|
|
const itemTotal = item.price * item.quantity;
|
|
const itemVat = itemTotal * (item.vat_percent / 100);
|
|
subtotal += itemTotal;
|
|
totalVat += itemVat;
|
|
return {
|
|
product_id: item.id,
|
|
quantity: item.quantity,
|
|
unit_price: item.price,
|
|
variant_id: item.variant_id,
|
|
vat_percent: item.vat_percent,
|
|
vat_amount: itemVat
|
|
};
|
|
});
|
|
|
|
const orderData = {
|
|
order_id: currentOrderId,
|
|
table_number: (orderType === 'dine-in') ? currentTableId : null,
|
|
order_type: orderType,
|
|
customer_id: selectedCustomerId ? selectedCustomerId.value : null,
|
|
outlet_id: CURRENT_OUTLET ? CURRENT_OUTLET.id : 1,
|
|
payment_type_id: paymentTypeId,
|
|
total_amount: isLoyaltyRedemption ? 0 : (subtotal + totalVat), // If loyalty redeemed, total is 0 for this transaction
|
|
vat: isLoyaltyRedemption ? 0 : totalVat,
|
|
items: itemsData,
|
|
redeem_loyalty: isLoyaltyRedemption
|
|
};
|
|
|
|
// Prepare receipt data before clearing cart
|
|
const receiptData = {
|
|
orderId: null,
|
|
customer: currentCustomer ? { name: currentCustomer.name, phone: currentCustomer.phone, address: currentCustomer.address || '' } : null,
|
|
items: cart.map(item => ({
|
|
name: item.name,
|
|
variant_name: item.variant_name,
|
|
quantity: item.quantity,
|
|
price: isLoyaltyRedemption ? 0 : item.price, // If loyalty redeemed, price is 0 for this transaction
|
|
vat_percent: isLoyaltyRedemption ? 0 : item.vat_percent,
|
|
vat_amount: isLoyaltyRedemption ? 0 : ((item.price * item.quantity) * (item.vat_percent / 100))
|
|
})),
|
|
subtotal: isLoyaltyRedemption ? 0 : subtotal,
|
|
total: isLoyaltyRedemption ? 0 : (subtotal + totalVat),
|
|
vat: isLoyaltyRedemption ? 0 : totalVat,
|
|
orderType: orderType,
|
|
tableNumber: (orderType === 'dine-in') ? currentTableName : null,
|
|
date: new Date().toLocaleString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }),
|
|
paymentMethod: paymentTypeName || (isLoyaltyRedemption ? 'Loyalty Redeem' : 'Unpaid'),
|
|
loyaltyRedeemed: isLoyaltyRedemption
|
|
};
|
|
|
|
fetch('api/order.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(orderData) })
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
receiptData.orderId = data.order_id;
|
|
|
|
// Show receipt for both Quick Pay and Place Order
|
|
printThermalReceipt(receiptData);
|
|
|
|
showToast(`${_t('order_placed')} #${data.order_id}`, 'success');
|
|
clearCart();
|
|
if (paymentSelectionModal) paymentSelectionModal.hide();
|
|
if (clearCustomerBtn) clearCustomerBtn.click();
|
|
} else showToast(data.error, 'danger');
|
|
});
|
|
};
|
|
|
|
window.printThermalReceipt = function(data) {
|
|
const width = 450;
|
|
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 thermal 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.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: center; vertical-align: middle; font-size: 11px;">${item.vat_percent > 0 ? item.vat_percent + '%' : '-'}</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 && data.orderType === 'dine-in' ? `
|
|
<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 logoHtml = settings.logo_url ? `<img src="${BASE_URL}${settings.logo_url}" style="max-height: 80px; max-width: 150px; margin-bottom: 10px;">` : '';
|
|
|
|
const vatRate = settings.vat_rate || 0;
|
|
|
|
const html = `
|
|
<html dir="ltr">
|
|
<head>
|
|
<title>Receipt #${data.orderId}</title>
|
|
<style>
|
|
body { font-family: 'Courier New', 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 { body { width: 80mm; padding: 5mm; } @page { size: 80mm auto; margin: 0; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
${logoHtml}
|
|
<h2>${settings.company_name}</h2>
|
|
<div style="font-weight: bold;">${CURRENT_OUTLET.name}</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> ${CURRENT_USER.name}</span><span><strong>${tr['Staff']}:</strong> ${CURRENT_USER.name}</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: center; padding-bottom: 5px; font-size: 10px;">VAT / الضريبة</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(data.subtotal)}</td></tr>
|
|
<tr><td>VAT (${vatRate}%) / ${tr['VAT']}</td><td style="text-align: right">${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();
|
|
};
|
|
|
|
window.openRatingQRModal = function() {
|
|
const qrContainer = document.getElementById('rating-qr-container');
|
|
const ratingUrl = BASE_URL + '/rate.php';
|
|
const qrCodeUrl = "https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=" + encodeURIComponent(ratingUrl);
|
|
|
|
qrContainer.innerHTML = '<img src="' + qrCodeUrl + '" alt="Rating QR Code" class="img-fluid rounded-3 shadow-sm">';
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('qrRatingModal'));
|
|
modal.show();
|
|
};
|
|
}); |