document.getElementById('calculateButton').addEventListener('click', () => {
    const startDate = document.getElementById('startDate').value;
    const endDate = document.getElementById('endDate').value;
    const startTime = document.getElementById('startTime').value || '00:00';
    const endTime = document.getElementById('endTime').value || '23:59';

    if (!startDate || !endDate) {
        alert('Bitte sowohl Start- als auch End-Datum auswählen!');
        return;
    }

    fetch(`/max_time_diff?start_date=${startDate}&end_date=${endDate}&start_time=${startTime}&end_time=${endTime}`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('Max-Diff-Daten:', data);

            const resultElement = document.getElementById('maxTimeDiff');
            if (data.error) {
                resultElement.textContent = `Fehler: ${data.error}`;
            } else if (data.max_time_diff_seconds !== undefined) {
                const maxDiff = data.max_time_diff_seconds;
                const hours = Math.floor(maxDiff / 3600);
                const minutes = Math.floor((maxDiff % 3600) / 60);
                const seconds = maxDiff % 60;

                const startTime = data.start_time;
                const endTime = data.end_time;

                resultElement.textContent = `Maximale Zeitdifferenz: ${hours}h ${minutes}m ${seconds}s zwischen ${startTime} und ${endTime}`;
            } else {
                resultElement.textContent = 'Keine Daten verfügbar.';
            }
        })
        .catch(err => {
            console.error('Fehler bei der Max-Diff-Anfrage:', err);
            document.getElementById('maxTimeDiff').textContent = 'Fehler beim Abrufen der Daten.';
        });
});