document.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector('.room-booking-manager form');
const startInput = form.querySelector('input[name="start"]');
const endInput = form.querySelector('input[name="end"]');
const statusDisplay = document.createElement('div'); // Für Feedback-Texte
statusDisplay.className = 'availability-check-msg';
form.appendChild(statusDisplay);
const checkAvailability = async () => {
const roomId = form.querySelector('input[name="room_id"]:checked')?.value;
const start = startInput.value;
const end = endInput.value;
// Nur prüfen, wenn alle Daten vorhanden sind
if (!roomId || !start || !end) return;
statusDisplay.innerHTML = 'Prüfe Verfügbarkeit...';
statusDisplay.style.color = '#666';
try {
const response = await fetch('/share/check-room', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ roomId, start, end })
});
const result = await response.json();
if (result.available) {
statusDisplay.innerHTML = '✔ Raum ist verfügbar!';
statusDisplay.style.color = 'green';
form.querySelector('button[type="submit"]').disabled = false;
} else {
statusDisplay.innerHTML = '✖ ' + result.message;
statusDisplay.style.color = 'red';
form.querySelector('button[type="submit"]').disabled = true;
}
} catch (error) {
console.error('Fehler beim Check:', error);
}
};
// Events registrieren
[startInput, endInput].forEach(el => el.addEventListener('change', checkAvailability));
form.querySelectorAll('input[name="room_id"]').forEach(el => el.addEventListener('change', checkAvailability));
});