`).join('');
}
// --- FORM & CONFIG LOGIC ---
function clearForm() {
ui.addEditForm.reset();
document.getElementById('fic-item-id').value = '';
ui.formTitle.textContent = "Add New Fossil";
}
ui.addEditForm.addEventListener('submit', e => {
e.preventDefault();
const id = parseInt(document.getElementById('fic-item-id').value);
const item = {
id: id || Date.now(),
name: document.getElementById('fic-item-name').value,
category: document.getElementById('fic-item-category').value.trim(),
description: document.getElementById('fic-item-desc').value,
imageUrl: document.getElementById('fic-item-image').value
};
if (id) {
const index = fossilLibrary.findIndex(i => i.id === id);
fossilLibrary[index] = item;
} else {
fossilLibrary.push(item);
}
saveState();
renderAll();
clearForm();
});
ui.clearFormBtn.addEventListener('click', clearForm);
ui.contentList.addEventListener('click', e => {
const id = parseInt(e.target.dataset.id);
if (e.target.classList.contains('fic-edit-btn')) {
const item = fossilLibrary.find(i => i.id === id);
document.getElementById('fic-item-id').value = item.id;
document.getElementById('fic-item-name').value = item.name;
document.getElementById('fic-item-category').value = item.category;
document.getElementById('fic-item-desc').value = item.description;
document.getElementById('fic-item-image').value = item.imageUrl;
ui.formTitle.textContent = "Edit Fossil";
}
if (e.target.classList.contains('fic-delete-btn')) {
fossilLibrary = fossilLibrary.filter(item => item.id !== id);
saveState();
renderAll();
}
});
// --- DASHBOARD LOGIC ---
ui.categorySelector.addEventListener('change', e => {
if (e.target.classList.contains('fic-category-checkbox')) {
renderPreview();
}
});
// --- PDF LOGIC ---
ui.downloadPdfBtn.addEventListener('click', () => {
const { jsPDF } = window.jspdf;
if (!jsPDF) { alert("PDF library not loaded!"); return; }
const selectedCategories = getSelectedCategories();
if (selectedCategories.length === 0) {
alert("Please select at least one category to include.");
return;
}
const doc = new jsPDF();
let yPos = 30;
doc.setFontSize(18);
doc.text("Fossil Identification Chart", 14, 22);
selectedCategories.forEach(category => {
const items = fossilLibrary.filter(item => item.category === category);
if (yPos > 260) { doc.addPage(); yPos = 20; }
doc.setFontSize(14);
doc.setFont(undefined, 'bold');
doc.text(category, 14, yPos);
const tableBody = items.map(item => [item.name, item.description]);
doc.autoTable({
startY: yPos + 5,
head: [['Fossil', 'Key Characteristics']],
body: tableBody,
theme: 'striped',
headStyles: { fillColor: [84, 110, 122] } // var(--primary-color)
});
yPos = doc.autoTable.previous.finalY + 15;
});
doc.save("Fossil_Identification_Chart.pdf");
});
// --- TABBING LOGIC ---
function switchTab(targetTabId) {
ui.tabContents.forEach(c => c.classList.remove('active'));
ui.tabButtons.forEach(b => b.classList.remove('active'));
document.getElementById(`fic-tab-${targetTabId}`).classList.add('active');
document.querySelector(`.fic-tab-button[data-tab="${targetTabId}"]`).classList.add('active');
}
function navigateTabs(dir) {
const tabs = Array.from(ui.tabButtons);
const active = tabs.find(t => t.classList.contains('active'));
let index = tabs.indexOf(active) + dir;
if (index < 0) index = 0; if (index >= tabs.length) index = tabs.length - 1;
switchTab(tabs[index].dataset.tab);
}
ui.tabButtons.forEach(button => button.addEventListener('click', () => switchTab(button.dataset.tab)));
ui.nextTabBtn.addEventListener('click', () => navigateTabs(1));
ui.prevTabBtn.addEventListener('click', () => navigateTabs(-1));
// --- UTILITY ---
function escapeHTML(str) { const p = document.createElement('p'); p.textContent = str; return p.innerHTML; }
// --- INITIALIZATION ---
loadState();
renderAll();
});
