`;
cardList.insertAdjacentHTML('beforeend', item);
});
populateCardSelect();
}
function populateCardSelect() {
giftCardSelect.innerHTML = '';
if (giftCards.length === 0) {
giftCardSelect.innerHTML = '
';
}
giftCards.forEach(card => {
const option = new Option(`${card.name} (${formatUSD(card.balance)})`, card.id);
giftCardSelect.add(option);
});
}
// --- CORE LOGIC ---
function calculatePayment() {
const itemPrice = parseFloat(itemPriceInput.value) || 0;
const selectedCardId = parseInt(giftCardSelect.value);
const card = giftCards.find(c => c.id === selectedCardId);
if (!card) {
// Handle case where no card is selected or found
document.getElementById('summary-original-price').textContent = formatUSD(itemPrice);
document.getElementById('summary-paid-by-card').textContent = formatUSD(0);
document.getElementById('summary-cash-due').textContent = formatUSD(itemPrice);
document.getElementById('summary-card-remaining').textContent = 'N/A';
document.getElementById('summary-savings').textContent = formatUSD(0);
return;
}
const paymentWithCard = Math.min(itemPrice, card.balance);
const cashPayment = itemPrice - paymentWithCard;
const remainingBalance = card.balance - paymentWithCard;
const costOfGiftCardPortion = paymentWithCard * (1 - card.discount / 100);
const savings = paymentWithCard - costOfGiftCardPortion;
// Update UI
document.getElementById('summary-original-price').textContent = formatUSD(itemPrice);
document.getElementById('summary-paid-by-card').textContent = `-${formatUSD(paymentWithCard)}`;
document.getElementById('summary-cash-due').textContent = formatUSD(cashPayment);
document.getElementById('summary-card-remaining').textContent = formatUSD(remainingBalance);
document.getElementById('summary-savings').textContent = formatUSD(savings);
}
function resetForm() {
cardForm.reset();
editingCardId = null;
formTitle.textContent = 'Add Gift Card';
saveBtn.textContent = 'Save Card';
cancelEditBtn.style.display = 'none';
}
function setupEditForm(id) {
const card = giftCards.find(c => c.id === id);
if (!card) return;
document.getElementById('card-name').value = card.name;
document.getElementById('card-balance').value = card.balance;
document.getElementById('card-discount').value = card.discount;
editingCardId = id;
formTitle.textContent = 'Edit Gift Card';
saveBtn.textContent = 'Update Card';
cancelEditBtn.style.display = 'inline-block';
}
function deleteCard(id) {
if (confirm('Are you sure you want to delete this gift card?')) {
giftCards = giftCards.filter(c => c.id !== id);
renderInventory();
calculatePayment();
}
}
// --- EVENT HANDLERS ---
[itemPriceInput, giftCardSelect].forEach(el => el.addEventListener('input', calculatePayment));
cardForm.addEventListener('submit', (e) => {
e.preventDefault();
const cardData = {
name: document.getElementById('card-name').value,
balance: parseFloat(document.getElementById('card-balance').value) || 0,
discount: parseFloat(document.getElementById('card-discount').value) || 0,
};
if (editingCardId) {
const card = giftCards.find(c => c.id === editingCardId);
Object.assign(card, cardData);
} else {
cardData.id = Date.now();
giftCards.push(cardData);
}
resetForm();
renderInventory();
calculatePayment();
});
cancelEditBtn.addEventListener('click', resetForm);
document.getElementById('card-list').addEventListener('click', (e) => {
const button = e.target.closest('.action-btn');
if (!button) return;
const action = button.dataset.action;
const id = parseInt(button.dataset.id);
if (action === 'edit') setupEditForm(id);
if (action === 'delete') deleteCard(id);
});
downloadPdfBtn.addEventListener('click', generatePdf);
// --- TABS & NAVIGATION ---
window.switchTab = (tabName) => {
currentTab = tabName;
Object.values(tabBtns).forEach(btn => btn.classList.replace('tab-active', 'tab-inactive'));
Object.values(tabContents).forEach(content => content.style.display = 'none');
tabBtns[tabName].classList.replace('tab-inactive', 'tab-active');
tabContents[tabName].style.display = 'block';
};
window.navigateTabs = (direction) => {
if (direction === 'next' && currentTab === 'processor') switchTab('inventory');
else if (direction === 'prev' && currentTab === 'inventory') switchTab('processor');
};
// --- PDF GENERATION ---
async function generatePdf() {
const { jsPDF } = window.jspdf;
const pdfReportElement = document.getElementById('pdf-report');
const selectedCard = giftCards.find(c => c.id === parseInt(giftCardSelect.value));
// Populate PDF with current data
document.getElementById('pdf-date').textContent = `Date: ${new Date().toLocaleDateString('en-US')}`;
document.getElementById('pdf-original-price').textContent = document.getElementById('summary-original-price').textContent;
document.getElementById('pdf-card-name').textContent = selectedCard ? selectedCard.name : 'N/A';
document.getElementById('pdf-paid-by-card').textContent = document.getElementById('summary-paid-by-card').textContent;
document.getElementById('pdf-cash-paid').textContent = document.getElementById('summary-cash-due').textContent;
document.getElementById('pdf-savings').textContent = document.getElementById('summary-savings').textContent;
document.getElementById('pdf-remaining-balance').textContent = document.getElementById('summary-card-remaining').textContent;
const canvas = await html2canvas(pdfReportElement, { scale: 2 });
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF('p', 'mm', 'a4');
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
pdf.save('Payment-Receipt.pdf');
}
// --- INITIALIZATION ---
function init() {
giftCards = [
{ id: 1, name: 'Amazon.com', balance: 100.00, discount: 20.0 },
{ id: 2, name: 'Best Buy', balance: 250.00, discount: 15.0 },
{ id: 3, name: 'Walmart', balance: 50.00, discount: 5.0 },
];
renderInventory();
calculatePayment();
}
init();
});
