document.getElementById('freedomCalculator').addEventListener('submit', function(event) {
    event.preventDefault();

    // Eingabewerte abrufen
    const initialInvestment = parseFloat(document.getElementById('initialInvestment').value) || 0;
    const monthlySavings = parseFloat(document.getElementById('monthlySavings').value) || 0;
    const investmentDuration = parseInt(document.getElementById('investmentDuration').value, 10);
    const expectedReturn = parseFloat(document.getElementById('expectedReturn').value) / 100;

    // Prüfen, ob alle Eingaben Zahlen sind
    if (isNaN(initialInvestment) || isNaN(monthlySavings) || isNaN(investmentDuration) || isNaN(expectedReturn)) {
        alert("Bitte füllen Sie alle Felder korrekt aus.");
        return;
    }

    // Berechnung der Werte für das Diagramm
    const monthlyReturn = expectedReturn / 12;
    let futureValue = initialInvestment;
    let totalDeposits = initialInvestment;
    let totalInterestEarned = 0;

    let depositsData = [initialInvestment];
    let interestData = [0];

    for (let i = 1; i <= investmentDuration * 12; i++) {
        totalDeposits += monthlySavings;
        let interest = futureValue * monthlyReturn;
        totalInterestEarned += interest;
        futureValue += interest + monthlySavings;

        if (i % 12 === 0) { // Jährliche Daten für das Balkendiagramm
            depositsData.push(totalDeposits);
            interestData.push(totalInterestEarned);
        }
    }

    document.getElementById('result').innerText = Zukünftiges Kapital: ${futureValue.toFixed(2)} €;
    document.getElementById('result').style.display = 'block';

    // Chart.js Diagramm erstellen
    const ctx = document.getElementById('savingsChart').getContext('2d');
    if (window.savingsChart instanceof Chart) {
        window.savingsChart.destroy(); // Vorhandenes Diagramm löschen
    }
    window.savingsChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: Array.from({length: investmentDuration}, (_, i) => i + 1),
            datasets: [
                {
                    label: 'Zinsen',
                    data: interestData,
                    backgroundColor: 'rgba(255, 159, 64, 0.2)',
                    borderColor: 'rgba(255, 159, 64, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Einzahlungen',
                    data: depositsData,
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }
            ]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Prognose der Investition über die Zeit'
                }
            }
        }
    });

    // Container für das Diagramm einblenden
    document.getElementById('chartContainer').style.display = 'block';
});