document.addEventListener('DOMContentLoaded', function () {
    const overrideBtns = document.querySelectorAll('.btn-override');

    overrideBtns.forEach(btn => {
        btn.addEventListener('click', function () {
            const projectId = this.dataset.projectId;
            const month = this.dataset.month;

            if (this.textContent.trim() === 'Override') {
                this.textContent = 'Save';
                this.classList.remove('btn-outline-primary');
                this.classList.add('btn-success');

                makeEditable('WIP', month);
                makeEditable('Opening Balance', month);
                makeEditable('Billings', month);
                makeEditable('Expenses', month);
                makeEditable('Cost', month);

            } else if (this.textContent.trim() === 'Save') {
                const formData = new FormData();
                formData.append('projectId', projectId);
                formData.append('month', month + '-01');
                formData.append('wip', document.getElementById(`wip-${month}-input`).value);
                formData.append('openingBalance', document.getElementById(`opening-balance-${month}-input`).value);
                formData.append('billings', document.getElementById(`billings-${month}-input`).value);
                formData.append('expenses', document.getElementById(`expenses-${month}-input`).value);
                formData.append('cost', document.getElementById(`cost-${month}-input`).value);

                fetch('save_override.php', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Replace button with "Overridden" badge
                        this.parentElement.innerHTML = '<span class="badge bg-success">Overridden</span>';

                        updateMetricCell('WIP', month, data.wip);
                        updateMetricCell('Opening Balance', month, data.openingBalance);
                        updateMetricCell('Billings', month, data.billings);
                        updateMetricCell('Expenses', month, data.expenses);
                        updateMetricCell('Cost', month, data.cost);
                        updateMetricCell('NSR', month, data.nsr);
                        updateMetricCell('Margin', month, data.margin);

                        // Show the next override button
                        const nextButtonCell = this.parentElement.nextElementSibling;
                        if (nextButtonCell) {
                            const nextButton = nextButtonCell.querySelector('.btn-override');
                            if (nextButton) {
                                nextButton.style.display = 'block';
                            }
                        }

                    } else {
                        alert('Error saving override: ' + data.error);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An unexpected error occurred.');
                });
            }
        });
    });

    function makeEditable(metric, month) {
        const cellId = `${metric.toLowerCase().replace(/\s/g, '-')}-${month}`;
        const cell = document.getElementById(cellId);
        if (cell) {
            let value = cell.textContent.replace(/[€%]/g, '').replace(/,/g, '').trim();
            let numericValue = parseFloat(value);
            if (isNaN(numericValue)) {
                numericValue = 0;
            }
            if (metric === 'Margin') {
                numericValue = numericValue / 100;
            }
            cell.innerHTML = `<input type="number" step="0.01" id="${cellId}-input" class="form-control" value="${numericValue.toFixed(2)}">`;
        }
    }

    function updateMetricCell(metric, month, value) {
        const cellId = `${metric.toLowerCase().replace(/\s/g, '-')}-${month}`;
        const cell = document.getElementById(cellId);
        if (cell) {
            const numericValue = value === '' ? 0 : parseFloat(value);
            if (metric === 'Margin') {
                cell.innerHTML = `${(numericValue * 100).toFixed(2)}%`;
            } else {
                cell.innerHTML = `€${numericValue.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
            }
        }
    }
});