`; manageList.appendChild(item); }); }; const openModal = (trainingId = null) => { trainingForm.reset(); editingTrainingId = trainingId; const assignedToSelect = document.getElementById('assignedTo'); // Deselect all options Array.from(assignedToSelect.options).forEach(option => option.selected = false); if (trainingId) { const training = trainings.find(t => t.id === trainingId); if (training) { modalTitle.textContent = 'Edit Training Module'; document.getElementById('trainingId').value = training.id; document.getElementById('trainingTitle').value = training.title; document.getElementById('trainingCategory').value = training.category; document.getElementById('dueDate').value = training.dueDate; training.assigned.forEach(empId => { const option = assignedToSelect.querySelector(`option[value="${empId}"]`); if (option) option.selected = true; }); } } else { modalTitle.textContent = 'Add New Training Module'; } trainingModal.classList.remove('hidden'); document.body.classList.add('modal-open'); }; const closeModal = () => { trainingModal.classList.add('hidden'); document.body.classList.remove('modal-open'); editingTrainingId = null; }; const saveTraining = (e) => { e.preventDefault(); const assignedOptions = document.getElementById('assignedTo').selectedOptions; const assignedIds = Array.from(assignedOptions).map(({ value }) => parseInt(value)); const trainingData = { id: editingTrainingId || Date.now(), title: document.getElementById('trainingTitle').value, category: document.getElementById('trainingCategory').value, dueDate: document.getElementById('dueDate').value, assigned: assignedIds, progress: editingTrainingId ? trainings.find(t=>t.id === editingTrainingId).progress : {} }; if (editingTrainingId) { trainings = trainings.map(t => t.id === editingTrainingId ? trainingData : t); } else { trainings.push(trainingData); } renderAll(); closeModal(); }; const deleteTraining = (trainingId) => { trainings = trainings.filter(t => t.id !== trainingId); renderAll(); }; const switchTab = (tabNum) => { currentTab = tabNum; tabButtons.forEach(btn => btn.classList.toggle('active', parseInt(btn.dataset.tab) === tabNum)); tabContents.forEach(content => content.classList.toggle('active', parseInt(content.id.split('-')[2]) === tabNum)); updateNavButtons(); }; const updateNavButtons = () => { prevBtn.disabled = currentTab === 1; nextBtn.disabled = currentTab === totalTabs; }; const generatePDF = () => { const { jsPDF } = window.jspdf; const doc = new jsPDF(); const employeeId = parseInt(employeeSelector.value); const employee = employees.find(e => e.id === employeeId); const employeeTrainings = trainings.filter(t => t.assigned.includes(employeeId)); doc.setFont('helvetica', 'bold'); doc.setFontSize(16); doc.text(`Training Report for ${employee.name}`, 14, 22); doc.setFontSize(10); doc.setTextColor(100); doc.text(`Report generated on: ${new Date().toLocaleDateString()}`, 14, 28); const tableColumn = ["Training Title", "Category", "Due Date", "Progress (%)"]; const tableRows = []; employeeTrainings.forEach(training => { const trainingData = [ training.title, training.category, training.dueDate, training.progress[employeeId] || 0 ]; tableRows.push(trainingData); }); doc.autoTable({ head: [tableColumn], body: tableRows, startY: 35, theme: 'grid', headStyles: { fillColor: [79, 70, 229] }, // Indigo color }); doc.save(`${employee.name}-Training-Report.pdf`); }; // --- Event Listeners --- addTrainingBtn.addEventListener('click', () => openModal()); closeModalBtn.addEventListener('click', closeModal); trainingForm.addEventListener('submit', saveTraining); downloadPdfBtn.addEventListener('click', generatePDF); employeeSelector.addEventListener('change', (e) => renderDashboard(e.target.value)); manageList.addEventListener('click', (e) => { if (e.target.classList.contains('edit-btn')) { openModal(parseInt(e.target.dataset.id)); } if (e.target.classList.contains('delete-btn')) { deleteTraining(parseInt(e.target.dataset.id)); } }); tabButtons.forEach(btn => btn.addEventListener('click', () => switchTab(parseInt(btn.dataset.tab)))); nextBtn.addEventListener('click', () => { if (currentTab < totalTabs) switchTab(currentTab + 1); }); prevBtn.addEventListener('click', () => { if (currentTab > 1) switchTab(currentTab - 1); }); // --- Initialization --- employees = [...sampleEmployees]; trainings = [...sampleTrainings]; populateSelectors(); renderAll(); updateNavButtons(); });