document.addEventListener(
    'DOMContentLoaded', function () {
        const addBillForm = document.getElementById('addBillForm');
        if (addBillForm) {
            addBillForm.addEventListener(
                'submit', function (e) {
                    e.preventDefault();
                    const formData = new FormData(this);
                    axios.post('/api/add-bill', formData)
                    .then(
                        function (response) {
                            console.log('Bill added successfully');
                            loadBills();
                        }
                    )
                    .catch(
                        function (error) {
                            console.error('Error adding bill:', error);
                        }
                    );
                }
            );
        }

        // Load bills if on the dashboard page
        if (document.getElementById('billsTable')) {
            loadBills();
        }

        // Event delegation for dynamically added "Mark as Paid" buttons
        document.addEventListener(
            'click', function (e) {
                if (e.target && e.target.matches('.mark-bill-paid-btn')) {
                    const billId = e.target.getAttribute('data-bill-id');
                    axios.post('/api/mark-bill-paid', { id: billId })
                    .then(
                        function (response) {
                            console.log('Bill marked as paid successfully');
                            loadBills();
                        }
                    )
                        .catch(
                            function (error) {
                                console.error('Error marking bill as paid:', error);
                            }
                        );
                }
            }
        );
    }
);

function loadBills()
{
    const billsTableBody = document.querySelector('#billsTable tbody');
    billsTableBody.innerHTML = '<tr><td colspan="4" class="text-center">Loading bills...</td></tr>';

    axios.get('/api/bills')
        .then(
            function (response) {
                const bills = response.data;
                billsTableBody.innerHTML = '';

                bills.forEach(
                    function (bill) {
                        const row = `
                        <tr>
                            <td>${bill.description}</td>
                            <td>$${parseFloat(bill.amount).toFixed(2)}</td>
                            <td>${bill.due_date}</td>
                            <td>
                            ${bill.is_paid ? '' : '<button type="button" class="btn btn-success btn-sm mark-bill-paid-btn" data-bill-id="' + bill.id + '">Mark as Paid</button>'}
                            <button type="button" class="btn btn-primary btn-sm edit-bill-btn" data-bill-id="${bill.id}">Edit</button>
                            <button type="button" class="btn btn-danger btn-sm delete-bill-btn" data-bill-id="${bill.id}">Delete</button>
                            </td>
                        </tr>
                        `;
                        billsTableBody.innerHTML += row;
                    }
                );
            }
        )
        .catch(
            function (error) {
                console.error('Error loading bills:', error);
                billsTableBody.innerHTML = '<tr><td colspan="4" class="text-center">Error loading bills.</td></tr>';
            }
        );
}