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>';
        });
}