// filepath: payment-report-system/frontend/js/scripts.js

document.addEventListener('DOMContentLoaded', function() {
    const reportForm = document.getElementById('reportForm');
    const reportList = document.getElementById('reportList');

    // Function to fetch and display reports
    function fetchReports() {
        fetch('backend/routes/api.php')
            .then(response => response.json())
            .then(data => {
                reportList.innerHTML = '';
                data.forEach(report => {
                    const listItem = document.createElement('li');
                    listItem.textContent = `ID: ${report.id}, Amount: ${report.amount}, Date: ${report.date}, Status: ${report.status}`;
                    reportList.appendChild(listItem);
                });
            })
            .catch(error => console.error('Error fetching reports:', error));
    }

    // Function to create a new report
    reportForm.addEventListener('submit', function(event) {
        event.preventDefault();
        const formData = new FormData(reportForm);

        fetch('backend/routes/api.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            alert('Report created successfully!');
            fetchReports(); // Refresh the report list
            reportForm.reset(); // Reset the form
        })
        .catch(error => console.error('Error creating report:', error));
    });

    // Initial fetch of reports
    fetchReports();
});