async function loadInventory() {
    const res = await fetch('/api/toner');
    const data = await res.json();

    const table = document.getElementById("inventory") || document.getElementById("adminInventory");
    table.innerHTML = "";

    data.forEach(item => {
        const row = document.createElement("tr");

        row.innerHTML = `
            <td>${item.name}</td>
            <td>
                <input value="${item.quantity}" id="qty-${item.id}">
            </td>
            <td>
                <button onclick="updateItem(${item.id})">Save</button>
            </td>
        `;

        table.appendChild(row);
    });
}

async function addItem() {
    const name = document.getElementById("name").value;
    const qty = document.getElementById("qty").value;

    await fetch("/api/add", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({name: name, quantity: qty})
    });

    loadInventory();
}

async function updateItem(id) {
    const qty = document.getElementById(`qty-${id}`).value;

    await fetch("/api/update", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({id: id, quantity: qty})
    });

    loadInventory();
}

window.onload = loadInventory;