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)); });