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

{% block stylesheets %}
<style>
  .grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-gap:12px; }
  .room-card {
    border-radius:10px; padding:10px; color:#fff; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.08);
    display:flex; flex-direction:column; justify-content:space-between; min-height:86px;
  }
  .room-free { background: #28a745; }
  .room-occupied { background: #dc3545; }
  .room-no { font-weight:700; font-size:18px; }
  .room-cat { font-size:12px; opacity:.85; }
  .room-badge { margin-top:6px; background:rgba(255,255,255,.2); padding:2px 6px; border-radius:12px; font-size:12px; display:inline-block; }
  .stats { display:flex; gap:16px; margin-bottom:10px; }
  .stat { background:#f5f6f8; padding:8px 12px; border-radius:8px; font-size:13px; }
  .modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; align-items:center; justify-content:center; z-index:999; }
  .modal { background:#fff; border-radius:10px; width:680px; max-width:94vw; box-shadow:0 12px 30px rgba(0,0,0,.25); overflow:hidden; }
  .modal-hdr { padding:12px 16px; font-weight:700; background:#f7f7f9; border-bottom:1px solid #e6e6e9; }
  .modal-bd { padding:14px 16px; }
  .modal-ft { padding:10px 16px; display:flex; justify-content:flex-end; gap:8px; background:#fafbfc; border-top:1px solid #e6e6e9; }
  .btn { border:none; border-radius:8px; padding:8px 12px; cursor:pointer; }
  .btn-close { background:#e9ecef; }
  .btn-primary { background:#007bff; color:#fff; }
  table.slim { width:100%; border-collapse:collapse; }
  table.slim th, table.slim td { padding:6px 8px; border-bottom:1px solid #eee; font-size:13px; }
  table.slim th { background:#fafafa; text-align:left; }
  .num { text-align:right; }
</style>
{% endblock %}

{% block content %}

<div class="stats">
  <div class="stat">Total Rooms: <b>{{ total_rooms }}</b></div>
  <div class="stat">Occupied: <b>{{ occupied_count }}</b></div>
  <div class="stat">Free: <b>{{ free_count }}</b></div>
  <div class="stat"><button class="btn" onclick="location.reload()">Refresh</button></div>
</div>

<div class="grid">
  {% for r in boxes %}
    <div class="room-card {% if r.status == 'occupied' %}room-occupied{% else %}room-free{% endif %}" data-room-id="{{ r.id }}">
      <div class="room-no">Room {{ r.room_no }}</div>
      <div class="room-cat">{{ r.category }}</div>
      <div class="room-badge">{{ r.badge }}</div>
    </div>
  {% empty %}
    <div>No rooms found.</div>
  {% endfor %}
</div>

<!-- Modal -->
<div id="backdrop" class="modal-backdrop">
  <div class="modal">
    <div class="modal-hdr" id="modal-title">Room</div>
    <div class="modal-bd" id="modal-body">
      Loading...
    </div>
    <div class="modal-ft">
      <button class="btn btn-close" onclick="hideModal()">Close</button>
      <a id="btn-folio" class="btn btn-primary" href="#" target="_blank">Folio</a>
      <a id="btn-checkout" class="btn btn-primary" href="#" target="_blank">Checkout</a>
    </div>
  </div>
</div>

{% endblock %}

{% block javascripts %}
<script>
function showModal(){ document.getElementById('backdrop').style.display='flex'; }
function hideModal(){ document.getElementById('backdrop').style.display='none'; }

async function openRoom(roomId) {
  try {
    const res = await fetch(`/hotel/frontdesk/rooms/${roomId}/snapshot/`, {headers:{'X-Requested-With':'XMLHttpRequest'}});
    const data = await res.json();

    const title = document.getElementById('modal-title');
    const body  = document.getElementById('modal-body');
    const btnF  = document.getElementById('btn-folio');
    const btnC  = document.getElementById('btn-checkout');

    title.textContent = `Room ${data.room_no} — ${data.category}`;
    if (!data.occupied) {
      body.innerHTML = `<div>This room is <b>Free</b>.</div>`;
      btnF.style.display = 'none';
      btnC.style.display = 'none';
    } else {
      btnF.style.display = '';
      btnC.style.display = '';
      btnF.href = data.links.folio;
      btnC.href = data.links.checkout;

      body.innerHTML = `
        <div style="margin-bottom:10px;">
          <div><b>Guest:</b> ${data.guest}</div>
          <div><b>Booking#:</b> ${data.booking_code || '-'}</div>
          <div><b>Check-in:</b> ${data.checkin} &nbsp; <b>Stay:</b> ${data.stay_days} day(s)</div>
          <div><b>Pax:</b> ${data.pax.adults}${data.pax.kids ? ('+'+data.pax.kids) : ''}</div>
        </div>
        <table class="slim">
          <thead><tr><th>Component</th><th class="num">Amount</th></tr></thead>
          <tbody>
            <tr><td>Room Nights</td><td class="num">${data.charges.room_nights.toFixed(2)}</td></tr>
            <tr><td>Room Service</td><td class="num">${data.charges.room_service.toFixed(2)}</td></tr>
            <tr><td>Restaurant</td><td class="num">${data.charges.restaurant.toFixed(2)}</td></tr>
            <tr><td>Others</td><td class="num">${data.charges.other.toFixed(2)}</td></tr>
            <tr><td><b>Subtotal</b></td><td class="num"><b>${data.charges.subtotal.toFixed(2)}</b></td></tr>
            <tr><td>Advance</td><td class="num">${data.charges.advance.toFixed(2)}</td></tr>
            <tr><td><b>Due (so far)</b></td><td class="num"><b>${data.charges.due_so_far.toFixed(2)}</b></td></tr>
          </tbody>
        </table>
      `;
    }
    showModal();
  } catch (e) {
    alert('Failed to load snapshot');
  }
}

document.querySelectorAll('.room-card').forEach(card => {
  card.addEventListener('click', () => openRoom(card.dataset.roomId));
});
</script>
{% endblock %}