`;
spacesContainer.appendChild(card);
// Render map marker
const marker = L.marker([space.lat, space.lng]).addTo(map).bindPopup(`
${space.name}`);
markers.push(marker);
});
}
function openModal(spaceId) {
const space = spacesDB.find(s => s.id === spaceId);
const isFavorite = favoriteSpaces.has(space.id);
modalContent.innerHTML = `
${space.name}
${space.description}
Price: $${space.price}/month
`;
modal.classList.remove('hidden');
document.getElementById('close-modal-btn').addEventListener('click', () => modal.classList.add('hidden'));
const favBtn = modalContent.querySelector('.favorite-btn');
favBtn.addEventListener('click', () => {
if (favoriteSpaces.has(space.id)) {
favoriteSpaces.delete(space.id);
favBtn.textContent = 'Add to Favorites';
favBtn.classList.remove('bg-red-500', 'text-white');
} else {
favoriteSpaces.add(space.id);
favBtn.textContent = 'Remove Favorite';
favBtn.classList.add('bg-red-500', 'text-white');
}
});
}
spacesContainer.addEventListener('click', (e) => {
if (e.target.classList.contains('view-details-btn')) {
openModal(parseInt(e.target.dataset.id));
}
});
allFilters.forEach(el => el.addEventListener('input', renderSpaces));
document.getElementById('pdf-download-btn').addEventListener('click', () => {
if (favoriteSpaces.size === 0) {
alert("Please add some spaces to your favorites before downloading.");
return;
}
const { jsPDF } = jspdf;
const pdf = new jsPDF();
pdf.setFontSize(22);
pdf.text(`Your Favorite Spaces`, 105, 20, { align: 'center' });
let y = 35;
Array.from(favoriteSpaces).forEach((spaceId, index) => {
const space = spacesDB.find(s => s.id === spaceId);
if (y > 260) { pdf.addPage(); y = 20; }
pdf.setFontSize(16);
pdf.setTextColor(79, 70, 229);
pdf.text(`${index + 1}. ${space.name} - ${space.location}`, 15, y);
y += 7;
pdf.setFontSize(11);
pdf.setTextColor(50, 50, 50);
const descLines = pdf.splitTextToSize(space.description, 180);
pdf.text(descLines, 20, y);
y += (descLines.length * 5) + 5;
});
pdf.save('my-favorite-spaces.pdf');
});
renderSpaces();
});
