62 lines
2.4 KiB
HTML
62 lines
2.4 KiB
HTML
{% extends 'base.html' %}
|
|
{% block title %}Booking{% endblock %}
|
|
|
|
{% block content %}
|
|
<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
|
|
oninput="setCheckOutMinDate(); disableUnavailableDates();">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="check_out" class="form-label">Check-out Date</label>
|
|
<input type="date" class="form-control" id="check_out" name="check_out" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="guests" class="form-label">Number of Guests</label>
|
|
<input type="number" class="form-control" id="guests" name="guests" required min="1" max="{{ listing.guests }}" value="1">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary w-100">Confirm Booking</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<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 %} |