`;
dashboardContent.appendChild(card);
});
};
const renderManageList = () => {
manageList.innerHTML = '';
if (trainings.length === 0) {
manageList.innerHTML = `
No training modules created.
`;
return;
}
trainings.forEach(training => {
const assignedNames = training.assigned.map(id => employees.find(e => e.id === id)?.name || 'Unknown').join(', ');
const item = document.createElement('div');
item.className = 'flex justify-between items-center bg-gray-50 p-3 rounded-md border';
item.innerHTML = `
${training.title}
Assigned to: ${assignedNames}
`;
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();
});
