unavailable dates

templates/booking.html

@@ -5,10 +5,14 @@
 <div class="row justify-content-center">
     <div class="col-md-6">
         <h1 class="text-center">Book {{ listing.title }}</h1>
+        {% if error %}
+            <div class="alert alert-danger">{{ error }}</div>
+        {% endif %}
         <form method="POST">
             <div class="mb-3">
                 <label for="check_in" class="form-label">Check-in Date</label>
-                <input type="date" class="form-control" id="check_in" name="check_in" required>
+                <input type="date" class="form-control" id="check_in" name="check_in" required
+                oninput="setCheckOutMinDate(); disableUnavailableDates();">
             </div>
             <div class="mb-3">
                 <label for="check_out" class="form-label">Check-out Date</label>
@@ -22,4 +26,37 @@
         </form>
     </div>
 </div>
-{% endblock %}
+
+<script>
+    const unavailableDates = {{ unavailable_dates|tojson }};
+
+    function setCheckOutMinDate() {
+        const checkIn = document.getElementById('check_in').value;
+        const checkOut = document.getElementById('check_out');
+        checkOut.min = checkIn;
+    }
+
+    function disableUnavailableDates() {
+        const checkIn = document.getElementById('check_in');
+        const checkOut = document.getElementById('check_out');
+
+        checkIn.addEventListener('input', () => {
+            unavailableDates.forEach(([start, end]) => {
+                if (checkIn.value >= start && checkIn.value <= end) {
+                    alert('Selected date is unavailable. Please choose another date.');
+                    checkIn.value = '';
+                }
+            });
+        });
+
+        checkOut.addEventListener('input', () => {
+            unavailableDates.forEach(([start, end]) => {
+                if (checkOut.value >= start && checkOut.value <= end) {
+                    alert('Selected date is unavailable. Please choose another date.');
+                    checkOut.value = '';
+                }
+            });
+        });
+    }
+</script>
+{% endblock %}