38682-vm/assets/js/main.js
2026-02-24 18:11:49 +00:00

573 lines
26 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,
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 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);
return symbol + parseFloat(amount).toFixed(decimals);
}
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 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');
if (loyaltySection && typeof LOYALTY_SETTINGS !== 'undefined' && LOYALTY_SETTINGS.is_enabled) {
loyaltySection.classList.remove('d-none');
if (loyaltyPointsDisplay) loyaltyPointsDisplay.textContent = cust.points + ' pts';
if (redeemLoyaltyBtn) {
redeemLoyaltyBtn.disabled = !cust.eligible_for_free_meal;
if (loyaltyMessage) {
if (cust.eligible_for_free_meal) loyaltyMessage.innerHTML = '<span class="text-success fw-bold">Eligible for Free Meal!</span>';
else loyaltyMessage.textContent = `${cust.points_needed || 0} pts away from a free meal.`;
}
}
}
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');
if (loyaltySection) loyaltySection.classList.add('d-none');
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.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
});
}
};
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
});
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;
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 (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;
cart.forEach((item, index) => {
const itemTotal = item.price * item.quantity;
subtotal += itemTotal;
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)}</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);
const vatRate = parseFloat(settings.vat_rate) || 0;
const vat = subtotal * (vatRate / 100);
if (cartVatInput) cartVatInput.value = vat.toFixed(2);
const total = subtotal + vat;
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';
const subtotal = cart.reduce((acc, item) => acc + (item.price * item.quantity), 0);
const vatRate = parseFloat(settings.vat_rate) || 0;
const vat = subtotal * (vatRate / 100);
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: subtotal + vat,
vat: vat,
items: cart.map(item => ({ product_id: item.id, quantity: item.quantity, unit_price: item.price, variant_id: item.variant_id })),
redeem_loyalty: 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) {
showToast(`${_t('order_placed')} #${data.order_id}`, 'success');
clearCart();
if (paymentSelectionModal) paymentSelectionModal.hide();
if (clearCustomerBtn) clearCustomerBtn.click();
} else showToast(data.error, 'danger');
});
};
});