`).join('');
contentEl.innerHTML = `
Goal ${goal.id}
${goal.name}
${reqsHtml}
`;
requirements.forEach(req => {
document.getElementsByName(`req-${req.id}`).forEach(radio => {
radio.addEventListener('change', (e) => handleChecklistChange(req.id, e.target.value));
});
});
};
const handleChecklistChange = (reqId, newStatus) => {
const req = appData.requirements.find(r => r.id === reqId);
if (req) {
req.status = newStatus;
// Live update the dashboard
renderDashboard();
}
};
const generatePdf = () => {
loadingOverlay.style.display = 'flex';
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' });
const totalReqs = appData.requirements.length;
const answeredYes = appData.requirements.filter(r => r.status === 'yes').length;
const complianceScore = totalReqs > 0 ? (answeredYes / totalReqs) * 100 : 0;
let y = 40;
pdf.setFontSize(18);
pdf.setFont('helvetica', 'bold');
pdf.text('PCI DSS Self-Assessment Report', pdf.internal.pageSize.getWidth() / 2, y, { align: 'center' });
y += 20;
pdf.setFontSize(10);
pdf.setFont('helvetica', 'normal');
pdf.text(`Generated on: ${new Date().toLocaleDateString()}`, pdf.internal.pageSize.getWidth() / 2, y, { align: 'center' });
y += 40;
pdf.setFontSize(12);
pdf.setFont('helvetica', 'bold');
pdf.text('Overall Compliance Summary', 40, y);
y+= 20;
pdf.setFontSize(10);
pdf.setFont('helvetica', 'normal');
pdf.text(`Overall Score: ${complianceScore.toFixed(0)}%`, 50, y);
pdf.text(`Compliant Controls (Yes): ${answeredYes}`, 200, y);
y+=30;
appData.goals.forEach(goal => {
const goalReqs = appData.requirements.filter(r => r.goal === goal.id);
pdf.autoTable({
startY: y,
head: [[`Goal ${goal.id}: ${goal.name}`]],
body: goalReqs.map(req => [`${req.title}: ${req.text}`, req.status.toUpperCase()]),
theme: 'grid',
headStyles: { fillColor: [37, 99, 235] }, // Blue header
columnStyles: { 1: { halign: 'center', fontStyle: 'bold', cellWidth: 50 } }
});
y = pdf.autoTable.previous.finalY + 20;
});
pdf.save(`PCI-Compliance-Report.pdf`);
loadingOverlay.style.display = 'none';
};
// --- TAB NAVIGATION & INITIALIZATION ---
const switchTab = (tabIndex) => {
activeTabIndex = tabIndex;
document.querySelectorAll('.tab-btn').forEach((btn, i) => btn.classList.toggle('active', i === tabIndex));
document.querySelectorAll('.tab-content').forEach((content, i) => content.classList.toggle('hidden', i !== tabIndex));
updateNavButtons();
};
const updateNavButtons = () => {
prevTabBtn.disabled = activeTabIndex === 0;
nextTabBtn.disabled = activeTabIndex === tabIdentifiers.length - 1;
};
const initializeUI = () => {
const tabs = [
{ name: 'Dashboard', id: 'dashboard' },
...appData.goals.map(g => ({ name: `Goal ${g.id}`, id: `goal-${g.id}` }))
];
tabIdentifiers = tabs.map(t => t.id);
tabsContainer.innerHTML = tabs.map(tab => `
`).join('');
mainContent.innerHTML = tabs.map(tab => `
`).join('');
tabs.forEach((tab, index) => {
document.getElementById(`tab-${tab.id}`).addEventListener('click', () => switchTab(index));
});
renderDashboard();
appData.goals.forEach(g => renderGoalTab(g.id));
switchTab(0);
lucide.createIcons();
};
initializeUI();
prevTabBtn.addEventListener('click', () => { if (activeTabIndex > 0) switchTab(activeTabIndex - 1); });
nextTabBtn.addEventListener('click', () => { if (activeTabIndex < tabIdentifiers.length - 1) switchTab(activeTabIndex + 1); });
});
