script.js

let chart;

// LOAD DATA
function loadData(){
    fetch('fetchData.jsp')
    .then(res => res.json())
    .then(data => {

        let table = "";
        let cat = {};
        let total = 0;

        data.forEach(d => {
            total += d.amount;

            cat[d.category] = (cat[d.category] || 0) + d.amount;

            table += `
            <tr>
                <td>${d.title}</td>
                <td>₹ ${d.amount}</td>
                <td>${d.date}</td>
                <td>${d.category}</td>
                <td><button onclick="deleteExpense(${d.id})" class="btn btn-sm btn-danger">X</button></td>
            </tr>`;
        });

        // update table
        document.getElementById("tableData").innerHTML = table;

        // chart
        if(chart) chart.destroy();

        chart = new Chart(document.getElementById("chart"), {
            type: 'pie',
            data: {
                labels: Object.keys(cat),
                datasets: [{
                    data: Object.values(cat)
                }]
            }
        });

    })
    .catch(err => {
        console.log("Fetch Error:", err);
    });
}

// DELETE
function deleteExpense(id){
    fetch('delete.jsp?id=' + id)
    .then(() => loadData())
    .catch(err => console.log(err));
}

// FORM SUBMIT
document.getElementById("addForm").onsubmit = function(e){
    e.preventDefault();

    let form = e.target;
    let formData = new FormData(form);

    // validation
    if(!formData.get("title") || !formData.get("amount") || !formData.get("date")){
        alert("Please fill all fields");
        return;
    }

    fetch('add.jsp?' + new URLSearchParams(formData))
    .then(res => res.text())
    .then(res => {
        console.log(res);

        if(res.includes("success")){
            form.reset(); // ✅ FIXED
            loadData();
        } else {
            alert(res);
        }
    })
    .catch(err => {
        console.log("Add Error:", err);
    });
};

// INITIAL LOAD
loadData();