function initBillingPage(projectId) {
    const saveBtn = document.getElementById('save-billing');
    const billingAmountInputs = document.querySelectorAll('.billing-amount');
    const totalBillingCell = document.getElementById('total-billing');

    function updateTotalBilling() {
        let total = 0;
        billingAmountInputs.forEach(input => {
            total += parseFloat(input.value) || 0;
        });
        totalBillingCell.textContent = `€${total.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
    }

    billingAmountInputs.forEach(input => {
        input.addEventListener('keyup', updateTotalBilling);
    });

    if (saveBtn) {
        saveBtn.addEventListener('click', function() {
            const billingData = [];
            billingAmountInputs.forEach(input => {
                billingData.push({
                    month: input.dataset.month,
                    amount: input.value
                });
            });

            const formData = new FormData();
            formData.append('projectId', projectId);
            formData.append('billingData', JSON.stringify(billingData));

            fetch('save_billing.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Billing data saved successfully!');
                } else {
                    alert('Error saving billing data: ' + data.error);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An unexpected error occurred.');
            });
        });
    }

    // Initial calculation
    updateTotalBilling();
}