`;
}
function initialize() {
const categories = Object.keys(appStructure);
categories.forEach((category, index) => {
const tab = document.createElement('button');
tab.className = 'tab py-4 px-1 border-b-2 font-medium text-sm text-gray-500 hover:text-green-600 hover:border-gray-300 focus:outline-none whitespace-nowrap';
tab.textContent = category;
tab.dataset.index = index;
tabsContainer.appendChild(tab);
tabs.push(tab);
const content = document.createElement('div');
content.className = 'tab-content';
if (category === 'Dashboard') {
content.innerHTML = `
`;
} else {
let formHtml = `
${category}
`;
for (const key in appStructure[category]) {
const item = appStructure[category][key];
if (item.type === 'number') {
formHtml += `
`;
} else {
selections[key] = 'standard'; // Default selection
formHtml += createOptionGroup(key, item, category);
}
}
formHtml += '
';
content.innerHTML = formHtml;
}
tabContentsContainer.appendChild(content);
tabContents.push(content);
});
updateTabs();
setupEventListeners();
calculateAll();
}
function calculateAll() {
const sqft = parseFloat(document.getElementById('input-sqft')?.value) || 2000;
let totalCost = costDB.base_per_sqft * sqft;
let ecoPremium = 0;
let annualSavings = 0;
for (const key in selections) {
const choice = selections[key];
const costs = costDB[key];
const costPerSqFt = ['framing', 'insulation', 'finishes'].includes(key);
if (costPerSqFt) {
totalCost += costs[choice] * sqft;
} else {
totalCost += costs[choice];
}
if (choice === 'eco') {
const premium = costPerSqFt ? (costs.eco - costs.standard) * sqft : costs.eco - costs.standard;
ecoPremium += premium;
annualSavings += costs.savings || 0;
}
}
updateDashboard(totalCost, ecoPremium, annualSavings);
updateChart(totalCost - ecoPremium, ecoPremium);
}
function updateDashboard(total, premium, savings) {
const summaryContainer = document.getElementById('summary-container');
summaryContainer.innerHTML = `
Total Estimated Cost:
$${total.toLocaleString()}
Eco-Premium (Upfront):
$${premium.toLocaleString()}
Projected 10-Year Savings:
$${(savings * 10).toLocaleString()}
`;
}
function updateChart(baseCost, premium) {
const ctx = document.getElementById('cost-chart').getContext('2d');
const data = {
labels: ['Base Cost', 'Eco-Premium'],
datasets: [{ data: [baseCost, premium], backgroundColor: ['#9ca3af', '#22c55e'] }]
};
if (costChart) {
costChart.data = data;
costChart.update();
} else {
costChart = new Chart(ctx, { type: 'doughnut', data, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } } } });
}
}
function updateTabs() {
tabs.forEach((tab, i) => tab.classList.toggle('active', i === currentTabIndex));
tabContents.forEach((c, i) => c.classList.toggle('active', i === currentTabIndex));
prevBtn.disabled = currentTabIndex === 0;
nextBtn.disabled = currentTabIndex === tabs.length - 1;
prevBtn.classList.toggle('opacity-50', currentTabIndex === 0);
nextBtn.classList.toggle('opacity-50', currentTabIndex === tabs.length - 1);
}
function setupEventListeners() {
tabsContainer.addEventListener('click', (e) => { if (e.target.classList.contains('tab')) { currentTabIndex = parseInt(e.target.dataset.index); updateTabs(); } });
prevBtn.addEventListener('click', () => { if (currentTabIndex > 0) { currentTabIndex--; updateTabs(); } });
nextBtn.addEventListener('click', () => { if (currentTabIndex < tabs.length - 1) { currentTabIndex++; updateTabs(); } });
document.getElementById('input-sqft').addEventListener('input', calculateAll);
document.querySelectorAll('.option-group').forEach(group => {
group.addEventListener('click', (e) => {
const card = e.target.closest('.option-card');
if (!card) return;
const key = group.dataset.key;
const value = card.dataset.value;
selections[key] = value;
group.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected'));
card.classList.add('selected');
calculateAll();
});
});
// Set initial selected styles
document.querySelectorAll('.option-group').forEach(group => {
group.querySelector('[data-value="standard"]').classList.add('selected');
});
document.getElementById('pdf-download-btn').addEventListener('click', generatePdf);
}
function generatePdf() {
const { jsPDF } = jspdf;
const pdf = new jsPDF();
const pdfContainer = document.createElement('div');
pdfContainer.style.cssText = 'position:absolute; left:-9999px; width:800px; padding:20px; font-family:Inter,sans-serif; color:#1f2937; background:white;';
const chartCanvas = document.getElementById('cost-chart');
const chartImgData = chartCanvas.toDataURL('image/png', 1.0);
let html = `
Eco-Home Cost Analysis
${document.getElementById('summary-container').innerHTML}
`;
pdfContainer.innerHTML = html;
document.body.appendChild(pdfContainer);
html2canvas(pdfContainer, { scale: 2 }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const { width, height } = pdf.internal.pageSize;
const imgHeight = canvas.height * width / canvas.width;
pdf.addImage(imgData, 'PNG', 0, 0, width, imgHeight);
pdf.save('eco-home-cost-analysis.pdf');
document.body.removeChild(pdfContainer);
});
}
initialize();
});
