{% extends "pos/base.html" %}
{% load humanize %}
{% block title %}Room Status — {{ today }}{% endblock %}
{% block heading %}Frontdesk — Room Status ({{ today }}){% endblock %}

{% block stylesheets %}
<style>
  .stat-card { border-left: .25rem solid #17a2b8; }
  .stat-card.success { border-left-color:#28a745; }
  .stat-card.warning { border-left-color:#ffc107; }
  .stat-card.danger  { border-left-color:#dc3545; }
  .stat-value { font-size: 1.35rem; font-weight: 700; }
  .table-sm td, .table-sm th { padding: .35rem .5rem; }
  .muted { color: #6c757d; }
  .badge { padding:.35rem .5rem; border-radius:.25rem; font-size:.75rem; }
  .badge-ci { background:#28a745; color:#fff; }
  .badge-rv { background:#ffc107; color:#212529; }
</style>
{% endblock %}

{% block content %}

<div class="row">
  <div class="col-md-3">
    <div class="card stat-card success mb-3">
      <div class="card-body py-2">
        <div class="text-muted small">Total Rooms</div>
        <div class="stat-value">{{ total_rooms }}</div>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card stat-card danger mb-3">
      <div class="card-body py-2">
        <div class="text-muted small">In-Stay (Occupied)</div>
        <div class="stat-value">{{ occupied_count }}</div>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card stat-card warning mb-3">
      <div class="card-body py-2">
        <div class="text-muted small">Reserved (Today)</div>
        <div class="stat-value">{{ reserved_count }}</div>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card stat-card mb-3">
      <div class="card-body py-2">
        <div class="text-muted small">Free</div>
        <div class="stat-value">{{ free_count }}</div>
      </div>
    </div>
  </div>
</div>

<div class="card mb-3">
  <div class="card-header">In-Stay (Checked-In)</div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-sm table-striped mb-0">
        <thead>
          <tr>
            <th>Room</th><th>Category</th><th>Guest</th><th>Pax</th>
            <th>Booking#</th><th>Stay</th><th>Status</th>
          </tr>
        </thead>
        <tbody>
          {% for r in occupied %}
          <tr>
            <td>{{ r.room_no }}</td>
            <td>{{ r.category }}</td>
            <td>{{ r.guest }}</td>
            <td>{{ r.adults }}{% if r.kids %}+{{ r.kids }}{% endif %}</td>
            <td>{{ r.booking_code }}</td>
            <td>{{ r.checkin }} → {{ r.checkout }}</td>
            <td><span class="badge badge-ci">CheckedIn</span></td>
          </tr>
          {% empty %}
          <tr><td colspan="7" class="text-center text-muted">No rooms in stay.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="card mb-3">
  <div class="card-header">Reserved (Today) — With Assigned Rooms</div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-sm table-striped mb-0">
        <thead>
          <tr>
            <th>Room</th><th>Category</th><th>Guest</th><th>Pax</th>
            <th>Booking#</th><th>Stay</th><th>Status</th>
          </tr>
        </thead>
        <tbody>
          {% for r in reserved %}
          <tr>
            <td>{{ r.room_no }}</td>
            <td>{{ r.category }}</td>
            <td>{{ r.guest }}</td>
            <td>{{ r.adults }}{% if r.kids %}+{{ r.kids }}{% endif %}</td>
            <td>{{ r.booking_code }}</td>
            <td>{{ r.checkin }} → {{ r.checkout }}</td>
            <td><span class="badge badge-rv">{{ r.status }}</span></td>
          </tr>
          {% empty %}
          <tr><td colspan="7" class="text-center text-muted">No assigned reservations for today.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="card mb-3">
  <div class="card-header">Reserved (Today) — Unassigned (by Category)</div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-sm table-striped mb-0">
        <thead>
          <tr>
            <th>Booking#</th><th>Guest</th><th>Pax</th>
            <th>Stay</th><th>Categories (qty)</th><th>Status</th>
          </tr>
        </thead>
        <tbody>
          {% for b in unassigned_reservations %}
          <tr>
            <td>{{ b.booking_code }}</td>
            <td>{{ b.guest }}</td>
            <td>{{ b.adults }}{% if b.kids %}+{{ b.kids }}{% endif %}</td>
            <td>{{ b.checkin }} → {{ b.checkout }}</td>
            <td>
              {% for it in b.items %}
                <span class="badge badge-light">{{ it.category }} × {{ it.qty }}</span>
              {% empty %}
                <span class="text-muted">—</span>
              {% endfor %}
            </td>
            <td><span class="badge badge-rv">{{ b.status }}</span></td>
          </tr>
          {% empty %}
          <tr><td colspan="6" class="text-center text-muted">None.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="card mb-3">
  <div class="card-header">Free Rooms</div>
  <div class="card-body">
    {% if free_rooms %}
      {% for r in free_rooms %}
        <span class="badge badge-success mb-1 mr-1">
          {{ r.room_no }}{% if r.category__name %} ({{ r.category__name }}){% endif %}
        </span>
      {% endfor %}
    {% else %}
      <span class="text-muted">No free rooms.</span>
    {% endif %}
  </div>
</div>

<div class="text-right">
  <button class="btn btn-outline-secondary btn-sm" onclick="location.reload()">Refresh</button>
</div>

{% endblock %}


{% block javascripts %}


<script>
  // Auto refresh every 60s (optional)
  setTimeout(function(){ location.reload(); }, 60000);
</script>


{% endblock %}