No tokens generated in this session.
`;
return;
}
container.innerHTML = tokenLog.map(log => `
${log.token.substring(0, 15)}...
${log.cardType.name} ending in ${log.last4}
${log.timestamp.toLocaleTimeString()}
`).join('');
}
// --- EVENT HANDLERS ---
paymentForm.addEventListener('submit', generateToken);
downloadPdfBtn.addEventListener('click', generatePdf);
cardNumberInput.addEventListener('input', (e) => {
let value = e.target.value.replace(/\D/g, '');
if (value.length > 16) value = value.slice(0, 16);
e.target.value = value.replace(/(.{4})/g, '$1 ').trim();
const cardType = detectCardType(value);
e.target.style.backgroundImage = `url('${cardType.logo}')`;
});
document.getElementById('expiry-date').addEventListener('input', (e) => {
let value = e.target.value.replace(/\D/g, '');
if (value.length > 4) value = value.slice(0, 4);
if (value.length > 2) value = value.slice(0, 2) + '/' + value.slice(2);
e.target.value = value;
});
document.getElementById('cvv').addEventListener('input', (e) => {
e.target.value = e.target.value.replace(/\D/g, '').slice(0, 4);
});
// --- TABS & NAVIGATION ---
window.switchTab = (tabName) => { currentTab = tabName; Object.values(tabBtns).forEach(b=>b.classList.replace('tab-active', 'tab-inactive')); Object.values(tabContents).forEach(c=>c.style.display='none'); tabBtns[tabName].classList.replace('tab-inactive', 'tab-active'); tabContents[tabName].style.display = 'block'; };
function showToast(message) { const toast = document.getElementById('toast'); toast.textContent = message; toast.classList.remove('opacity-0','translate-y-10'); setTimeout(() => { toast.classList.add('opacity-0','translate-y-10'); }, 3000); }
// --- PDF GENERATION ---
async function generatePdf() {
if (!lastGeneratedToken) return;
const { jsPDF } = window.jspdf;
const pdfReportElement = document.getElementById('pdf-report');
document.getElementById('pdf-date').textContent = lastGeneratedToken.timestamp.toLocaleString();
document.getElementById('pdf-cardholder').textContent = lastGeneratedToken.cardholderName;
document.getElementById('pdf-card-info').textContent = `${lastGeneratedToken.cardType.name} ending in ${lastGeneratedToken.last4}`;
document.getElementById('pdf-token').textContent = lastGeneratedToken.token;
const canvas = await html2canvas(pdfReportElement, { scale: 2 });
const imgData = canvas.toDataURL('image/jpeg', 0.85);
const pdf = new jsPDF('p', 'mm', 'a4');
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);
pdf.save(`Token-Receipt-${lastGeneratedToken.last4}.pdf`);
}
});
