{% 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 %}