No gateways configured.

`; return; } const cheapest = results.reduce((prev, curr) => prev.totalFee < curr.totalFee ? prev : curr); resultsContainer.innerHTML = results.map(r => { const isCheapest = r.id === cheapest.id; return ` ` }).join(''); }; // --- CORE LOGIC --- const handleCalculation = () => { calculateBtnSpinner.classList.remove('hidden'); calculateBtnText.textContent = 'Calculating...'; calculateBtn.disabled = true; setTimeout(() => { const amount = parseFloat(document.getElementById('transaction-amount').value) || 0; const results = gateways.map(g => { const totalFee = (amount * (g.percentFee / 100)) + g.fixedFee; const netAmount = amount - totalFee; return { ...g, totalFee, netAmount }; }); renderDashboard(results); switchTab('dashboard'); downloadPdfBtn.disabled = false; calculateBtnSpinner.classList.add('hidden'); calculateBtnText.textContent = 'Calculate Fees'; calculateBtn.disabled = false; }, 500); }; // --- UI & EVENT HANDLERS --- const switchTab = (tabId) => { currentTab = tabId; Object.values(tabPanes).forEach(pane => pane.classList.add('hidden')); tabPanes[tabId].classList.remove('hidden'); Object.values(tabButtons).forEach(btn => btn.classList.replace('tab-active', 'tab-inactive')); tabButtons[tabId].classList.replace('tab-inactive', 'tab-active'); updateNavButtons(); }; const navigateTabs = (direction) => { const currentIndex = tabs.indexOf(currentTab); const newIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1; if (newIndex >= 0 && newIndex < tabs.length) switchTab(tabs[newIndex]); }; const updateNavButtons = () => { const currentIndex = tabs.indexOf(currentTab); prevBtn.disabled = currentIndex === 0; nextBtn.disabled = currentIndex === tabs.length - 1; prevBtn.classList.toggle('opacity-50', prevBtn.disabled); nextBtn.classList.toggle('opacity-50', nextBtn.disabled); }; const handlePdfDownload = () => { const pdfRenderContainer = document.getElementById('pdf-render-content'); const amount = document.getElementById('transaction-amount').value; const pdfContent = document.getElementById('pdf-content').innerHTML; const header = `'; html2canvas(pdfRenderContainer, { scale: 2 }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(), margin = 40; const contentWidth = pdfWidth - margin * 2; const pdfHeight = (canvas.height * contentWidth) / canvas.width; pdf.addImage(imgData, 'PNG', margin, margin, contentWidth, pdfHeight); pdf.save('Payment-Gateway-Fee-Comparison.pdf'); }); }; // --- EVENT LISTENERS --- window.switchTab = switchTab; window.navigateTabs = navigateTabs; calculateBtn.addEventListener('click', handleCalculation); downloadPdfBtn.addEventListener('click', handlePdfDownload); addGatewayBtn.addEventListener('click', () => { gateways.push({ id: nextId++, name: 'New Gateway', percentFee: 0, fixedFee: 0 }); renderConfigTable(); }); configTableBody.addEventListener('input', e => { if (!e.target.classList.contains('cfg-input')) return; const id = parseInt(e.target.closest('tr').dataset.id); const prop = e.target.dataset.prop; const item = gateways.find(g => g.id === id); if (item) item[prop] = e.target.type === 'number' ? parseFloat(e.target.value) : e.target.value; }); configTableBody.addEventListener('click', e => { if (!e.target.classList.contains('rm-btn')) return; const id = parseInt(e.target.closest('tr').dataset.id); gateways = gateways.filter(g => g.id !== id); renderConfigTable(); }); // --- INITIALIZATION --- renderConfigTable(); updateNavButtons(); switchTab('dashboard'); });