{% extends "pos/base.html" %}
{% block title %}Bookings — {{ checkin }} → {{ checkout }}{% endblock %}
{% block heading %}Bookings in Range — {{ checkin }} → {{ checkout }}{% endblock %}

{% block content %}

<div class="mb-3 d-flex justify-content-between align-items-center">
  <div class="small text-muted">
    Window: <b>{{ checkin }}</b> → <b>{{ checkout }}</b>
  </div>
  <div>
    <a class="btn btn-outline-secondary btn-sm" href="{% url 'hotel:staff_prebook_list' %}">Back</a>
  </div>
</div>

<div class="card mb-3">
  <div class="card-header">Confirmed (CONFIRMED / CHECKEDIN)</div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-sm table-striped mb-0">
        <thead>
          <tr>
            <th>#</th><th>Guest</th><th>Dates</th><th>Nights</th><th>Items</th>
          </tr>
        </thead>
        <tbody>
          {% for b in confirmed %}
          <tr>
            <td>B#{{ b.t_id }}</td>
            <td>{{ b.guest.name }}</td>
            <td>{{ b.checkin_date }} → {{ b.checkout_date }}</td>
            <td>{{ b.nights }}</td>
            <td>
              {% for it in b.items.all %}
                <span class="badge badge-light">{{ it.category.name }} × {{ it.qty }}</span>
              {% endfor %}
            </td>
          </tr>
          {% empty %}
          <tr><td colspan="5">No confirmed bookings.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="card mb-3">
  <div class="card-header d-flex justify-content-between">
    <span>Unconfirmed (PENDING)</span>
    <small class="text-muted">You can cancel vouchers to free inventory.</small>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-sm table-striped mb-0">
        <thead>
          <tr>
            <th>#</th><th>Guest</th><th>Dates</th><th>Nights</th><th>Items</th><th class="text-right">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for b in unconfirmed %}
          <tr>
            <td>B#{{ b.t_id }}</td>
            <td>{{ b.guest.name }}</td>
            <td>{{ b.checkin_date }} → {{ b.checkout_date }}</td>
            <td>{{ b.nights }}</td>
            <td>
              {% for it in b.items.all %}
                <span class="badge badge-light">{{ it.category.name }} × {{ it.qty }}</span>
              {% endfor %}
            </td>
            <td class="text-right">
              <a class="btn btn-sm btn-outline-danger"
                 href="{% url 'hotel:staff_prebook_cancel' b.id %}?next={{ request.get_full_path|urlencode }}"
                 onclick="return confirm('Cancel this voucher and release holds?');">
                <i class="fas fa-times"></i> Cancel
              </a>
            </td>
          </tr>
          {% empty %}
          <tr><td colspan="6">No unconfirmed bookings.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{% endblock %}