`;
hotelsGrid.appendChild(card);
});
}
window.toggleCompare = function(hotelId) {
const index = comparisonList.indexOf(hotelId);
if (index > -1) {
comparisonList.splice(index, 1);
} else {
comparisonList.push(hotelId);
}
applyFilters(); // Re-render to update button state
}
function renderComparisonTable() {
if (comparisonList.length === 0) {
comparisonTableContainer.innerHTML = '
Add hotels from the dashboard to compare them.
';
return;
}
const hotelsToCompare = hotelData.filter(h => comparisonList.includes(h.id));
let tableHTML = '
| Feature | ';
hotelsToCompare.forEach(h => { tableHTML += `${h.name} | `; });
tableHTML += '
|---|
';
tableHTML += `| Price/Night | ${hotelsToCompare.map(h => `$${h.price} | `).join('')}
|---|
`;
tableHTML += `| Star Rating | ${hotelsToCompare.map(h => `${h.stars} Stars | `).join('')}
|---|
`;
tableHTML += `| Pool | ${hotelsToCompare.map(h => `${h.pool ? '' : '—'} | `).join('')}
|---|
`;
tableHTML += `| Spa | ${hotelsToCompare.map(h => `${h.spa ? '' : '—'} | `).join('')}
|---|
`;
tableHTML += `| Gym | ${hotelsToCompare.map(h => `${h.gym ? '' : '—'} | `).join('')}
|---|
`;
tableHTML += '
';
comparisonTableContainer.innerHTML = tableHTML;
}
function renderConfigTable() {
configTbody.innerHTML = hotelData.map(h => `
|
|
|
|
|
|
|
`).join('');
}
window.updateConfig = function(element) {
const { id, prop } = element.dataset;
let value = element.type === 'checkbox' ? element.checked : element.value;
const hotel = hotelData.find(h => h.id == id);
if (hotel) {
if (['stars', 'price'].includes(prop)) {
value = parseInt(value, 10);
}
hotel[prop] = value;
applyFilters();
populateFilters();
}
}
// --- TAB & NAVIGATION ---
window.openTab = function(evt, tabName) {
if (tabName === 'comparison') renderComparisonTable();
const tabContents = document.getElementsByClassName("tab-content");
Array.from(tabContents).forEach(tab => tab.style.display = "none");
const tabButtons = document.getElementsByClassName("tab-btn");
Array.from(tabButtons).forEach(btn => btn.classList.remove("active"));
document.getElementById(tabName).style.display = "block";
if (evt) {
evt.currentTarget.classList.add("active");
} else {
const btnToActivate = Array.from(tabButtons).find(btn => btn.getAttribute('onclick').includes(`'${tabName}'`));
if (btnToActivate) btnToActivate.classList.add("active");
}
updateNavButtons();
}
window.navigateTabs = function(direction) {
const tabs = Array.from(document.querySelectorAll('.tab-btn'));
const activeTabIndex = tabs.findIndex(tab => tab.classList.contains('active'));
let newIndex = (direction === 'next')
? (activeTabIndex + 1) % tabs.length
: (activeTabIndex - 1 + tabs.length) % tabs.length;
tabs[newIndex].click();
}
function updateNavButtons() {
const tabs = Array.from(document.querySelectorAll('.tab-btn'));
const activeTabIndex = tabs.findIndex(tab => tab.classList.contains('active'));
document.getElementById('prev-btn').style.visibility = activeTabIndex === 0 ? 'hidden' : 'visible';
document.getElementById('next-btn').style.visibility = activeTabIndex === tabs.length - 1 ? 'hidden' : 'visible';
}
// --- PDF DOWNLOAD ---
if(downloadPdfBtn) {
downloadPdfBtn.addEventListener('click', function() {
const { jsPDF } = window.jspdf;
const contentToDownload = document.getElementById('comparison-to-download');
if (!contentToDownload || comparisonList.length === 0) {
console.warn("Please select hotels to compare before downloading.");
return;
}
const originalButtonText = downloadPdfBtn.innerHTML;
downloadPdfBtn.innerHTML = 'Generating...';
downloadPdfBtn.disabled = true;
html2canvas(contentToDownload, { scale: 2, useCORS: true }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'l', unit: 'mm', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const imgProps = pdf.getImageProperties(imgData);
const imgHeight = (imgProps.height * pdfWidth) / imgProps.width;
pdf.addImage(imgData, 'PNG', 10, 10, pdfWidth - 20, imgHeight > 0 ? imgHeight - 20 : 0);
pdf.save('Hotel-Comparison.pdf');
}).catch(err => {
console.error("Error generating PDF:", err);
}).finally(() => {
downloadPdfBtn.innerHTML = originalButtonText;
downloadPdfBtn.disabled = false;
});
});
}
// --- INITIALIZATION ---
function initializeTool() {
populateFilters();
applyFilters();
renderConfigTable();
updateNavButtons();
}
initializeTool();
});
