document.addEventListener("DOMContentLoaded", function () {
    const verbruikPerKwhInput = document.getElementById("verbruik_per_kwh");
    const verbruikskostInput = document.getElementById("verbruikskost");

    verbruikPerKwhInput.addEventListener("input", function () {
        const verbruikPerKwh = parseFloat(verbruikPerKwhInput.value);
        if (!isNaN(verbruikPerKwh)) {
            fetch('/api/bereken-verbruik', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({ verbruik_per_kwh: verbruikPerKwh })
            })
            .then(response => response.json())
            .then(data => {
                if (data.berekening) {
                    verbruikskostInput.value = data.berekening;
                } else {
                    verbruikskostInput.value = "Fout bij berekening";
                }
            })
            .catch(error => console.error('Error:', error));
        } else {
            verbruikskostInput.value = "";
        }
    });
});