Average Cost Per Employee (${overallBudgetPeriod}): ${currency}${(totalEmployees > 0 ? grandTotalCostForPeriod / totalEmployees : 0).toFixed(2)}
`;
html += '
';
html += '
Detailed Breakdown:
';
html += '
| Category | Benefit/Perk | Details | Est. Cost for Period |
|---|
';
if (allItems.length === 0) {
html += '| No benefits or perks entered. |
';
} else {
const groupedByCategory = allItems.reduce((acc, item) => {
(acc[item.category] = acc[item.category] || []).push(item);
return acc;
}, {});
for (const category in groupedByCategory) {
html += ``;
let categorySubtotal = 0;
groupedByCategory[category].forEach(item => {
let details = `${currency}${item.costAmount.toFixed(2)} / ${item.itemBillingCycle}`;
if (item.costMethod === 'perEmployee') details += ' per employee';
else if (item.costMethod === 'perParticipant') details += ` per participant (${item.participantsOrRate} ${typeof item.participantsOrRate === 'string' && item.participantsOrRate.includes('%') ? 'rate' : 'fixed'})`;
else if (item.costMethod === 'totalAmount') details += ' total';
html += `
| ${item.name} |
${details} |
${currency}${item.calculatedCost.toFixed(2)} |
`;
categorySubtotal += item.calculatedCost;
});
html += `| Subtotal for ${category}: | ${currency}${categorySubtotal.toFixed(2)} |
`;
}
}
html += `| GRAND TOTAL: | ${currency}${grandTotalCostForPeriod.toFixed(2)} |
`;
html += '
';
summaryOutput.innerHTML = html;
downloadPdfButton.disabled = allItems.length === 0;
}
// PDF Download
downloadPdfButton.addEventListener('click', function () {
if (typeof jspdf === 'undefined' || typeof jspdf.jsPDF === 'undefined') {
alert('Error: jsPDF library is not loaded.'); return;
}
const { jsPDF } = jspdf;
const doc = new jsPDF('p');
const currency = currencySymbolInput.value || '$';
const overallBudgetPeriod = document.getElementById('epbp-budget-period').value;
const totalEmployees = getNum('epbp-num-employees', true);
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--epbp-primary-color').trim();
const secondaryColor = getComputedStyle(document.documentElement).getPropertyValue('--epbp-secondary-color').trim();
const textColor = getComputedStyle(document.documentElement).getPropertyValue('--epbp-text-color').trim();
const buttonTextColor = getComputedStyle(document.documentElement).getPropertyValue('--epbp-button-text-color').trim();
doc.setFontSize(18);
doc.setTextColor(primaryColor);
doc.text('Employee Perks & Benefits Budget', doc.internal.pageSize.getWidth() / 2, 20, { align: 'center' });
doc.setFontSize(12);
doc.setTextColor(textColor);
let lastY = 30;
doc.text(`Business Name: ${document.getElementById('epbp-business-name').value || 'N/A'}`, 14, lastY); lastY += 7;
doc.text(`Budget Period: ${overallBudgetPeriod}`, 14, lastY); lastY += 7;
doc.text(`Total Employees: ${totalEmployees}`, 14, lastY); lastY += 7;
doc.text(`Currency: ${currency}`, 14, lastY); lastY += 10;
const allItemsPdf = []; // Re-collect for PDF to ensure data is current
let grandTotalCostForPeriodPdf = 0;
document.querySelectorAll('.epbp-benefit-item').forEach(item => {
const itemName = item.querySelector('.epbp-item-name').value || 'Unnamed Benefit';
const itemCategory = item.dataset.itemCategory;
const costMethod = item.querySelector('.epbp-item-cost-method').value;
const costAmount = getNum(item.querySelector('.epbp-item-cost-amount').value);
const itemBillingCycle = item.querySelector('.epbp-item-billing-cycle').value;
let participantsOrRate = 0, isRate = false;
if (costMethod === 'perParticipant') {
const participantInput = item.querySelector('.epbp-item-participants').value;
if (participantInput.includes('%')) { participantsOrRate = getNum(participantInput.replace('%','')); isRate = true; }
else { participantsOrRate = getNum(participantInput); }
}
let costForThisItemForPeriod = 0, effectiveNumForCalc = totalEmployees;
if (costMethod === 'perEmployee') effectiveNumForCalc = totalEmployees;
else if (costMethod === 'totalAmount') effectiveNumForCalc = 1;
else if (costMethod === 'perParticipant') {
if (isRate) effectiveNumForCalc = totalEmployees * (participantsOrRate / 100);
else effectiveNumForCalc = participantsOrRate;
}
let itemCostMonthly = costAmount;
if (itemBillingCycle === 'Quarterly') itemCostMonthly = costAmount / 3;
else if (itemBillingCycle === 'Annually') itemCostMonthly = costAmount / 12;
let multiplier = (overallBudgetPeriod === 'Monthly') ? 1 : (overallBudgetPeriod === 'Quarterly') ? 3 : 12;
costForThisItemForPeriod = itemCostMonthly * multiplier * effectiveNumForCalc;
let details = `${currency}${costAmount.toFixed(2)} / ${itemBillingCycle}`;
if (costMethod === 'perEmployee') details += ' per emp.';
else if (costMethod === 'perParticipant') details += ` per part. (${isRate ? `${participantsOrRate}%` : participantsOrRate})`;
else if (costMethod === 'totalAmount') details += ' total';
allItemsPdf.push({ category: itemCategory, name: itemName, details, calculatedCost: costForThisItemForPeriod });
grandTotalCostForPeriodPdf += costForThisItemForPeriod;
});
doc.setFontSize(10);
doc.text(`Total Estimated Budget (${overallBudgetPeriod}): ${currency}${grandTotalCostForPeriodPdf.toFixed(2)}`, 14, lastY); lastY += 7;
doc.text(`Average Cost Per Employee (${overallBudgetPeriod}): ${currency}${(totalEmployees > 0 ? grandTotalCostForPeriodPdf / totalEmployees : 0).toFixed(2)}`, 14, lastY); lastY += 10;
const tableBody = [];
const groupedByCategoryPdf = allItemsPdf.reduce((acc, item) => {
(acc[item.category] = acc[item.category] || []).push(item);
return acc;
}, {});
for (const category in groupedByCategoryPdf) {
tableBody.push([{ content: category, colSpan: 3, styles: { fontStyle: 'bold', fillColor: '#f0f0f0' } }]);
let categorySubtotalPdf = 0;
groupedByCategoryPdf[category].forEach(item => {
tableBody.push([item.name, item.details, `${currency}${item.calculatedCost.toFixed(2)}`]);
categorySubtotalPdf += item.calculatedCost;
});
tableBody.push([
{ content: `Subtotal for ${category}`, colSpan: 2, styles: { halign: 'right', fontStyle: 'bold'} },
{ content: `${currency}${categorySubtotalPdf.toFixed(2)}`, styles: { halign: 'right', fontStyle: 'bold' } }
]);
}
tableBody.push([
{ content: `GRAND TOTAL`, colSpan: 2, styles: { halign: 'right', fontStyle: 'bold', fillColor: primaryColor, textColor: buttonTextColor } },
{ content: `${currency}${grandTotalCostForPeriodPdf.toFixed(2)}`, styles: { halign: 'right', fontStyle: 'bold', fillColor: primaryColor, textColor: buttonTextColor } }
]);
doc.autoTable({
startY: lastY,
head: [['Benefit/Perk', 'Details', `Est. Cost for ${overallBudgetPeriod}`]],
body: tableBody,
theme: 'grid',
headStyles: { fillColor: secondaryColor, textColor: buttonTextColor, fontSize: 9 },
styles: { fontSize: 8, cellPadding: 2 },
columnStyles: { 2: { halign: 'right' } },
didDrawCell: (data) => {
if (data.cell.raw && data.cell.raw.colSpan === 3) { // Category Header Row
// Styling handled by autotable itself
}
}
});
doc.save(`Employee_Perks_Benefits_Budget_${document.getElementById('epbp-business-name').value.replace(/\s+/g, '_') || 'Report'}.pdf`);
});
// Initial setup
const initialCategories = ["epbp-health-wellness-items", "epbp-financial-items", "epbp-profdev-items", "epbp-officeperks-items", "epbp-custom-items"];
initialCategories.forEach(id => checkEmptyState(id));
showTab(0);
updateAllCurrencyPrefixes();
});
