{% extends 'base.html' %}
{% block title %}Bookings{% endblock %}
{% block page_title %}Bookings{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <div class="text-muted small">Manage all hotel bookings & reservations</div>
  <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#bookingModal">
    <i class="bi bi-calendar-plus me-1"></i>New Booking
  </button>
</div>

<!-- Stats -->
<div class="row g-3 mb-4">
  <div class="col-6 col-md-3">
    <div class="stat-card">
      <div class="icon bg-info bg-opacity-10 text-info"><i class="bi bi-bookmark"></i></div>
      <div><div class="label">Reserved</div><div class="value">{{ reserved_count }}</div></div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card">
      <div class="icon bg-success bg-opacity-10 text-success"><i class="bi bi-door-open"></i></div>
      <div><div class="label">Checked In</div><div class="value">{{ checkedin_count }}</div></div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card">
      <div class="icon bg-warning bg-opacity-10 text-warning"><i class="bi bi-door-closed"></i></div>
      <div><div class="label">Due Checkout Today</div><div class="value">{{ today_checkouts }}</div></div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card">
      <div class="icon bg-primary bg-opacity-10 text-primary"><i class="bi bi-calendar3"></i></div>
      <div>
        <div class="label">Filter by Status</div>
        <div class="value" style="font-size:.78rem; line-height:1.6;">
          <a href="{% url 'booking_list' %}" class="text-decoration-none {% if not status_filter %}fw-bold text-dark{% endif %}">All</a>
          {% for val, label in status_choices %}
          &middot; <a href="?status={{ val }}" class="text-decoration-none {% if status_filter == val %}fw-bold text-dark{% endif %}">{{ label }}</a>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Bookings Table -->
<div class="card">
  <div class="card-header">
    <span><i class="bi bi-calendar2-week me-2"></i>Bookings{% if status_filter %} — {{ status_filter|title }}{% endif %}</span>
  </div>
  <div class="table-responsive">
    <table class="table table-hover mb-0 align-middle">
      <thead>
        <tr>
          <th>Booking</th>
          <th>Guest</th>
          <th>Hotel / Room</th>
          <th>Check-In</th>
          <th>Check-Out</th>
          <th>Nights</th>
          <th>Amount</th>
          <th>Payment</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for bk in bookings %}
        <tr>
          <td><code>BK{{ bk.pk|stringformat:"04d" }}</code></td>
          <td><a href="{% url 'guest_detail' bk.guest.pk %}" class="text-decoration-none">{{ bk.guest.full_name }}</a></td>
          <td>
            <span class="small text-muted">{{ bk.room.hotel.name }}</span><br>
            <span class="fw-semibold">Room {{ bk.room.room_number }}</span>
          </td>
          <td>{{ bk.check_in_date|date:"d M Y" }}</td>
          <td>{{ bk.check_out_date|date:"d M Y" }}</td>
          <td class="text-center">{{ bk.number_of_nights }}</td>
          <td>TSh {{ bk.total_amount|floatformat:0 }}</td>
          <td>
            {% if bk.payment_status == 'paid' %}<span class="badge bg-success">Paid</span>
            {% elif bk.payment_status == 'partial' %}<span class="badge bg-warning text-dark">Partial</span>
            {% else %}<span class="badge bg-danger">Pending</span>{% endif %}
          </td>
          <td>
            {% if bk.booking_status == 'reserved' %}<span class="badge bg-info text-dark">Reserved</span>
            {% elif bk.booking_status == 'checked_in' %}<span class="badge bg-success">Checked In</span>
            {% elif bk.booking_status == 'checked_out' %}<span class="badge bg-secondary">Checked Out</span>
            {% else %}<span class="badge bg-danger">Cancelled</span>{% endif %}
          </td>
          <td>
            <a href="{% url 'booking_detail' bk.pk %}" class="btn btn-sm btn-outline-primary"><i class="bi bi-eye"></i></a>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="10" class="text-center text-muted py-4">
          No bookings found.
          <button class="btn btn-sm btn-link p-0" data-bs-toggle="modal" data-bs-target="#bookingModal">Create one now.</button>
        </td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- ══════════════════════════════════════════════════════════════
     MODAL 1 — New Booking
     ══════════════════════════════════════════════════════════════ -->
<div class="modal fade" id="bookingModal" tabindex="-1" data-bs-backdrop="static" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form method="post" action="{% url 'booking_list' %}">
        {% csrf_token %}
        <div class="modal-header">
          <h5 class="modal-title"><i class="bi bi-calendar-plus me-2"></i>New Booking</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          {% if show_booking_modal and booking_form.errors %}
          <div class="alert alert-danger py-2 small">Please fix the errors below.</div>
          {% endif %}
          <div class="row g-3">
            <div class="col-12">
              <label class="form-label">Guest <span class="text-danger">*</span></label>
              {{ booking_form.guest }}
              {% if booking_form.guest.errors %}<div class="text-danger small mt-1">{{ booking_form.guest.errors }}</div>{% endif %}
              <div class="form-text">
                Guest not listed?
                <a href="#" id="openQuickGuestBtn" class="fw-semibold">
                  <i class="bi bi-person-plus me-1"></i>Register new guest
                </a>
              </div>
            </div>
            <div class="col-12">
              <label class="form-label">Room <span class="text-danger">*</span></label>
              {{ booking_form.room }}
              {% if booking_form.room.errors %}<div class="text-danger small mt-1">{{ booking_form.room.errors }}</div>{% endif %}
              <div class="form-text">
                Only available rooms are shown.
                <a href="#" id="openQuickRoomBtn" class="fw-semibold ms-2">
                  <i class="bi bi-door-open me-1"></i>Add new room
                </a>
              </div>
            </div>
            <div class="col-md-6">
              <label class="form-label">Check-In Date <span class="text-danger">*</span></label>
              {{ booking_form.check_in_date }}
              {% if booking_form.check_in_date.errors %}<div class="text-danger small mt-1">{{ booking_form.check_in_date.errors }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label">Check-Out Date <span class="text-danger">*</span></label>
              {{ booking_form.check_out_date }}
              {% if booking_form.check_out_date.errors %}<div class="text-danger small mt-1">{{ booking_form.check_out_date.errors }}</div>{% endif %}
            </div>
            <div class="col-12">
              <div id="modalBookingSummary" class="alert alert-info py-2 d-none">
                <div class="row">
                  <div class="col-6 small"><strong>Nights:</strong> <span id="modalSumNights">—</span></div>
                  <div class="col-6 small"><strong>Est. Total:</strong> <span id="modalSumTotal">—</span></div>
                </div>
              </div>
            </div>
            <div class="col-12">
              <label class="form-label">Notes</label>
              {{ booking_form.notes }}
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary"><i class="bi bi-calendar-check me-1"></i>Confirm Booking</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════════════════════════
     MODAL 2 — Quick Guest Registration
     ══════════════════════════════════════════════════════════════ -->
<div class="modal fade" id="quickGuestModal" tabindex="-1" data-bs-backdrop="static" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-person-plus me-2"></i>Register New Guest</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div id="quickGuestAlert" class="alert alert-danger d-none py-2 small"></div>
        <div class="row g-3">
          <div class="col-12">
            <label class="form-label">Full Name <span class="text-danger">*</span></label>
            <input type="text" id="qg_full_name" class="form-control" placeholder="e.g. John Mwangi">
          </div>
          <div class="col-md-6">
            <label class="form-label">Phone <span class="text-danger">*</span></label>
            <input type="text" id="qg_phone" class="form-control" placeholder="e.g. 0712345678">
          </div>
          <div class="col-md-6">
            <label class="form-label">Email</label>
            <input type="email" id="qg_email" class="form-control" placeholder="optional">
          </div>
          <div class="col-md-4">
            <label class="form-label">ID Type <span class="text-danger">*</span></label>
            <select id="qg_id_type" class="form-select">
              <option value="nida">NIDA</option>
              <option value="passport">Passport</option>
              <option value="voter">Voter's Card</option>
            </select>
          </div>
          <div class="col-md-8">
            <label class="form-label">ID Number <span class="text-danger">*</span></label>
            <input type="text" id="qg_id_number" class="form-control" placeholder="ID / Passport number">
          </div>
          <div class="col-12">
            <label class="form-label">Address</label>
            <textarea id="qg_address" class="form-control" rows="2" placeholder="optional"></textarea>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="saveQuickGuestBtn">
          <i class="bi bi-save me-1"></i>Save & Select Guest
        </button>
      </div>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════════════════════════
     MODAL 3 — Quick Room Add
     ══════════════════════════════════════════════════════════════ -->
<div class="modal fade" id="quickRoomModal" tabindex="-1" data-bs-backdrop="static" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-door-open me-2"></i>Add New Room</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div id="quickRoomAlert" class="alert alert-danger d-none py-2 small"></div>
        <div class="row g-3">
          <div class="col-12">
            <label class="form-label">Hotel <span class="text-danger">*</span></label>
            <select id="qr_hotel" class="form-select">
              <option value="">-- Select Hotel --</option>
              {% for h in hotels %}
              <option value="{{ h.pk }}">{{ h.name }}</option>
              {% endfor %}
            </select>
            <div class="form-text">
              Hotel not listed?
              <a href="#" id="openQuickHotelBtn" class="fw-semibold">
                <i class="bi bi-building me-1"></i>Register new hotel
              </a>
            </div>
          </div>
          <div class="col-md-6">
            <label class="form-label">Room Number <span class="text-danger">*</span></label>
            <input type="text" id="qr_room_number" class="form-control" placeholder="e.g. 101">
          </div>
          <div class="col-md-6">
            <label class="form-label">Room Type <span class="text-danger">*</span></label>
            <select id="qr_room_type" class="form-select">
              <option value="single">Single</option>
              <option value="double">Double</option>
              <option value="vip">VIP</option>
              <option value="suite">Suite</option>
            </select>
          </div>
          <div class="col-md-6">
            <label class="form-label">Price per Night (TSh) <span class="text-danger">*</span></label>
            <input type="number" id="qr_price" class="form-control" min="0" step="0.01" placeholder="e.g. 50000">
          </div>
          <div class="col-md-6">
            <label class="form-label">Capacity</label>
            <input type="number" id="qr_capacity" class="form-control" min="1" value="2">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="saveQuickRoomBtn">
          <i class="bi bi-save me-1"></i>Save & Select Room
        </button>
      </div>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════════════════════════
     MODAL 4 — Quick Hotel Registration
     ══════════════════════════════════════════════════════════════ -->
<div class="modal fade" id="quickHotelModal" tabindex="-1" data-bs-backdrop="static" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-building me-2"></i>Register New Hotel</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div id="quickHotelAlert" class="alert alert-danger d-none py-2 small"></div>
        <div class="row g-3">
          <div class="col-md-8">
            <label class="form-label">Hotel Name <span class="text-danger">*</span></label>
            <input type="text" id="qh_name" class="form-control" placeholder="e.g. Kilimanjaro Lodge">
          </div>
          <div class="col-md-4">
            <label class="form-label">Owner (User)</label>
            <select id="qh_owner" class="form-select">
              <option value="">-- Select Owner --</option>
              {% for u in lodge_users %}
              <option value="{{ u.pk }}">{{ u.get_full_name|default:u.username }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="col-md-6">
            <label class="form-label">Phone <span class="text-danger">*</span></label>
            <input type="text" id="qh_phone" class="form-control" placeholder="e.g. 0712345678">
          </div>
          <div class="col-md-6">
            <label class="form-label">Email</label>
            <input type="email" id="qh_email" class="form-control" placeholder="optional">
          </div>
          <div class="col-md-6">
            <label class="form-label">Region <span class="text-danger">*</span></label>
            <select id="qh_region" class="form-select">
              <option value="">-- Select Region --</option>
              {% for r in regions %}
              <option value="{{ r.pk }}">{{ r.name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="col-md-6">
            <label class="form-label">District <span class="text-danger">*</span></label>
            <select id="qh_district" class="form-select">
              <option value="">-- Select District --</option>
            </select>
          </div>
          <div class="col-12">
            <label class="form-label">Address</label>
            <input type="text" id="qh_address" class="form-control" placeholder="Street / area address">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="saveQuickHotelBtn">
          <i class="bi bi-save me-1"></i>Save & Select Hotel
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// ── District data for region → district cascade ──────────────────────────────
const allDistricts = [
  {% for d in all_districts %}{id: {{ d.id }}, name: "{{ d.name|escapejs }}", regionId: {{ d.region_id }}},
  {% endfor %}
];

document.getElementById('qh_region').addEventListener('change', function () {
  const regionId = parseInt(this.value);
  const sel = document.getElementById('qh_district');
  sel.innerHTML = '<option value="">-- Select District --</option>';
  if (regionId) {
    allDistricts.filter(d => d.regionId === regionId).forEach(function (d) {
      const opt = document.createElement('option');
      opt.value = d.id; opt.textContent = d.name;
      sel.appendChild(opt);
    });
  }
});

// ── Room price map for live summary ─────────────────────────────────────────
const roomPrices = {};
{% for room in booking_form.room.field.queryset %}
roomPrices[{{ room.pk }}] = {{ room.price_per_night }};
{% endfor %}

function updateModalSummary() {
  const checkIn  = document.querySelector('#bookingModal [name="check_in_date"]').value;
  const checkOut = document.querySelector('#bookingModal [name="check_out_date"]').value;
  const roomId   = document.querySelector('#bookingModal #id_room').value;
  const summary  = document.getElementById('modalBookingSummary');
  if (checkIn && checkOut && roomId) {
    const nights = Math.round((new Date(checkOut) - new Date(checkIn)) / 86400000);
    if (nights > 0) {
      const price = roomPrices[roomId] || 0;
      document.getElementById('modalSumNights').textContent = nights;
      document.getElementById('modalSumTotal').textContent  = 'TSh ' + (nights * price).toLocaleString();
      summary.classList.remove('d-none');
      return;
    }
  }
  summary.classList.add('d-none');
}
document.querySelector('#bookingModal [name="check_in_date"]').addEventListener('change', updateModalSummary);
document.querySelector('#bookingModal [name="check_out_date"]').addEventListener('change', updateModalSummary);
document.querySelector('#bookingModal #id_room').addEventListener('change', updateModalSummary);

// ── Modal stack navigation ───────────────────────────────────────────────────
// Supports unlimited depth: each "open child" push parent to stack;
// each "child close" pops and shows previous modal.
const modalStack = [];
let   transitioning = false;

function openChildModal(parentEl, childEl, onBeforeShow) {
  transitioning = true;
  parentEl.addEventListener('hidden.bs.modal', function once() {
    parentEl.removeEventListener('hidden.bs.modal', once);
    transitioning = false;
    if (onBeforeShow) onBeforeShow();
    modalStack.push(parentEl);
    bootstrap.Modal.getOrCreateInstance(childEl).show();
  });
  bootstrap.Modal.getInstance(parentEl).hide();
}

// Every child modal (2, 3, 4) uses this to go back
[
  document.getElementById('quickGuestModal'),
  document.getElementById('quickRoomModal'),
  document.getElementById('quickHotelModal'),
].forEach(function (el) {
  el.addEventListener('hidden.bs.modal', function () {
    if (transitioning) return;           // currently opening a grandchild — skip
    const prev = modalStack.pop();
    if (prev) bootstrap.Modal.getOrCreateInstance(prev).show();
  });
});

// ── Trigger: Booking → Quick Guest ──────────────────────────────────────────
document.getElementById('openQuickGuestBtn').addEventListener('click', function (e) {
  e.preventDefault();
  openChildModal(
    document.getElementById('bookingModal'),
    document.getElementById('quickGuestModal'),
    function () {
      ['qg_full_name','qg_phone','qg_email','qg_id_number','qg_address']
        .forEach(function (id) { document.getElementById(id).value = ''; });
      document.getElementById('qg_id_type').value = 'nida';
      document.getElementById('quickGuestAlert').classList.add('d-none');
    }
  );
});

// ── Trigger: Booking → Quick Room ───────────────────────────────────────────
document.getElementById('openQuickRoomBtn').addEventListener('click', function (e) {
  e.preventDefault();
  openChildModal(
    document.getElementById('bookingModal'),
    document.getElementById('quickRoomModal'),
    function () {
      document.getElementById('qr_hotel').value       = '';
      document.getElementById('qr_room_number').value = '';
      document.getElementById('qr_room_type').value   = 'single';
      document.getElementById('qr_price').value       = '';
      document.getElementById('qr_capacity').value    = '2';
      document.getElementById('quickRoomAlert').classList.add('d-none');
    }
  );
});

// ── Trigger: Quick Room → Quick Hotel ───────────────────────────────────────
document.getElementById('openQuickHotelBtn').addEventListener('click', function (e) {
  e.preventDefault();
  openChildModal(
    document.getElementById('quickRoomModal'),
    document.getElementById('quickHotelModal'),
    function () {
      ['qh_name','qh_phone','qh_email','qh_address']
        .forEach(function (id) { document.getElementById(id).value = ''; });
      document.getElementById('qh_owner').value    = '';
      document.getElementById('qh_region').value   = '';
      document.getElementById('qh_district').innerHTML = '<option value="">-- Select District --</option>';
      document.getElementById('quickHotelAlert').classList.add('d-none');
    }
  );
});

// ── AJAX helpers ─────────────────────────────────────────────────────────────
function ajaxSave(url, data, btn, defaultLabel, onSuccess, alertId) {
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Saving…';
  fetch(url, { method: 'POST', body: data })
    .then(function (r) { return r.json(); })
    .then(function (resp) {
      if (resp.success) {
        onSuccess(resp);
        document.getElementById(alertId).classList.add('d-none');
      } else {
        const d = document.getElementById(alertId);
        d.textContent = Object.values(resp.errors).flat().join(' ');
        d.classList.remove('d-none');
      }
    })
    .catch(function () {
      const d = document.getElementById(alertId);
      d.textContent = 'An error occurred. Please try again.';
      d.classList.remove('d-none');
    })
    .finally(function () {
      btn.disabled = false;
      btn.innerHTML = defaultLabel;
    });
}

// ── Save: Quick Guest ────────────────────────────────────────────────────────
document.getElementById('saveQuickGuestBtn').addEventListener('click', function () {
  const data = new FormData();
  data.append('csrfmiddlewaretoken', '{{ csrf_token }}');
  data.append('full_name', document.getElementById('qg_full_name').value);
  data.append('phone',     document.getElementById('qg_phone').value);
  data.append('email',     document.getElementById('qg_email').value);
  data.append('id_type',   document.getElementById('qg_id_type').value);
  data.append('id_number', document.getElementById('qg_id_number').value);
  data.append('address',   document.getElementById('qg_address').value);
  ajaxSave(
    '{% url "guest_quick_create" %}', data, this,
    '<i class="bi bi-save me-1"></i>Save & Select Guest',
    function (resp) {
      const sel = document.querySelector('#bookingModal [name="guest"]');
      sel.appendChild(new Option(resp.name, resp.id, true, true));
      sel.value = resp.id;
      bootstrap.Modal.getInstance(document.getElementById('quickGuestModal')).hide();
    },
    'quickGuestAlert'
  );
});

// ── Save: Quick Room ─────────────────────────────────────────────────────────
document.getElementById('saveQuickRoomBtn').addEventListener('click', function () {
  const data = new FormData();
  data.append('csrfmiddlewaretoken', '{{ csrf_token }}');
  data.append('hotel',           document.getElementById('qr_hotel').value);
  data.append('room_number',     document.getElementById('qr_room_number').value);
  data.append('room_type',       document.getElementById('qr_room_type').value);
  data.append('price_per_night', document.getElementById('qr_price').value);
  data.append('capacity',        document.getElementById('qr_capacity').value);
  data.append('status',          'available');
  ajaxSave(
    '{% url "room_quick_create" %}', data, this,
    '<i class="bi bi-save me-1"></i>Save & Select Room',
    function (resp) {
      roomPrices[resp.id] = resp.price_per_night;
      const sel = document.querySelector('#bookingModal #id_room');
      sel.appendChild(new Option(resp.label, resp.id, true, true));
      sel.value = resp.id;
      updateModalSummary();
      bootstrap.Modal.getInstance(document.getElementById('quickRoomModal')).hide();
    },
    'quickRoomAlert'
  );
});

// ── Save: Quick Hotel ────────────────────────────────────────────────────────
document.getElementById('saveQuickHotelBtn').addEventListener('click', function () {
  const data = new FormData();
  data.append('csrfmiddlewaretoken', '{{ csrf_token }}');
  data.append('name',            document.getElementById('qh_name').value);
  data.append('owner',           document.getElementById('qh_owner').value);
  data.append('phone',           document.getElementById('qh_phone').value);
  data.append('email',           document.getElementById('qh_email').value);
  data.append('region',          document.getElementById('qh_region').value);
  data.append('district',        document.getElementById('qh_district').value);
  data.append('address',         document.getElementById('qh_address').value);
  data.append('number_of_rooms', '0');
  data.append('is_active',       'on');
  ajaxSave(
    '{% url "hotel_quick_create" %}', data, this,
    '<i class="bi bi-save me-1"></i>Save & Select Hotel',
    function (resp) {
      // Add new hotel to the Quick Room hotel dropdown and select it
      const sel = document.getElementById('qr_hotel');
      sel.appendChild(new Option(resp.name, resp.id, true, true));
      sel.value = resp.id;
      bootstrap.Modal.getInstance(document.getElementById('quickHotelModal')).hide();
    },
    'quickHotelAlert'
  );
});
</script>

{% if show_booking_modal %}
<script>
  document.addEventListener('DOMContentLoaded', function () {
    bootstrap.Modal.getOrCreateInstance(document.getElementById('bookingModal')).show();
  });
</script>
{% endif %}
{% endblock %}