{% extends "pos/base.html" %}
{% block title %}Front Desk Board{% endblock %}
  
{% block stylesheets %}

  <style>
    :root{--bg:#ffffff;--ink:#111827;--muted:#6b7280;--brand:#b8860b;--soft:#f8f7f3;--card:#fff;--bd:#e5e7eb}
    *{box-sizing:border-box} body{margin:0;font:16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI}
    header{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--bd);background:var(--soft)}
    .brand{font-weight:700;letter-spacing:.3px}
    .nav a{color:var(--ink);text-decoration:none;margin:0 8px;font-weight:600}
    .nav a.btn{padding:8px 12px;border-radius:10px;border:1px solid var(--bd);background:#fff}
    .container{max-width:1120px;margin:22px auto;padding:0 16px}
    .grid{display:grid;grid-template-columns:1fr 360px;gap:22px}
    .card{
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:8px;
  padding:16px;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}
    .chip{display:inline-block;padding:4px 10px;border-radius:999px;background:#f1f5f9;color:#0f172a;font-size:12px;margin-right:6px}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--bd);background:#fff;cursor:pointer}
    .btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
    .btn.block{width:100%;justify-content:center}
    .thumb{width:100%;height:180px;object-fit:cover;border-radius:12px;border:1px solid var(--bd)}
    .list{display:grid;gap:14px}
    .row{display:flex;gap:10px;align-items:center}
    .row.right{justify-content:flex-end}
    .muted{color:var(--muted)}
    .field{display:grid;gap:6px;margin-bottom:10px}
    input,select{padding:10px 12px;border:1px solid var(--bd);border-radius:10px;width:100%}
    .sticky{position:sticky;top:14px}
    .totalBox h3{margin:8px 0}
    .stepper{display:flex;gap:10px;margin-bottom:10px}
    .step{padding:6px 10px;border-radius:10px;border:1px solid var(--bd);background:#fff;font-weight:600}
    .step.active{background:var(--brand);color:#fff;border-color:var(--brand)}
/* header + arrow */
 .card > h3{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px 0; padding-right:36px}
 .card .toggle{
   width:28px;height:28px; display:inline-flex; align-items:center; justify-content:center;
   border:1px solid var(--bd); border-radius:10px; background:#fff; cursor:pointer;
   box-shadow:0 1px 3px rgba(0,0,0,.06); margin-left:auto;
 }
 .card .toggle svg{width:16px;height:16px;transition:transform .2s ease}
 .card:not(.collapsed) .toggle svg{transform:rotate(180deg)} /* expand=chevron up */
/* collapse: header ke ilawa sab hide */
.card.collapsed > :not(h3){display:none}

 /* Rooms → responsive grid wrap */
 #roomsGrid{
   display:grid;
   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
   gap:8px;
 }
 #roomsGrid .card{ text-align:center; padding:10px; }

#roomsGrid .room-card{
  position: relative;
  min-height: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-weight: 800;

  /* rectangle feel */
  border-radius: 6px !important;
  padding: 8px 10px !important;
  box-shadow: none !important;
  border-width: 1px;
}

.room-no-text{
  font-size: 15px;
  font-weight: 900;
  line-height: 1.1;
}

.room-status-text{
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  opacity: .85;
  text-transform: capitalize;
}

.dnd-pill{
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  color: #9a3412;
  background: #ffedd5;
  border: 1px solid #fb923c;
  border-radius: 999px;
  padding: 4px 7px;
  box-shadow: 0 1px 4px rgba(249,115,22,.22);
  letter-spacing: .3px;
}
/* Category header line inside rooms grid */
#roomsGrid .cat-head{
  grid-column: 1 / -1;
  padding:6px 10px; font-weight:700;
  background:#f8f9fc; border:1px solid var(--bd); border-radius:10px;
}
.room-status-vacant {
  background: #e0f2fe;
  color: #075985;
  border-color: #38bdf8;
}

.room-status-occupied {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

.room-status-dirty {
  background: #fef3c7;
  color: #92400e;
  border-color: #facc15;
}

.room-status-cleaning {
  background: #ffedd5;
  color: #9a3412;
  border-color: #fb923c;
}

.room-status-maintenance {
  background: #ede9fe;
  color: #5b21b6;
  border-color: #8b5cf6;
}

.room-status-out-of-order {
  background: #f3f4f6;
  color: #6b7280;
  border-color: #d1d5db;
}

.room-status-blocked {
  background: #e5e7eb;
  color: #374151;
  border-color: #9ca3af;
}

.room-status-reserved {
  background: #fde68a;
  color: #78350f;
  border-color: #f59e0b;
}

.section-title-with-action{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 8px 0;
  padding-right:0 !important;
}

.section-head-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 11px;
  border-radius:10px;
  border:1px solid var(--bd);
  background:#fff;
  color:var(--brand);
  font-size:13px;
  font-weight:800;
  text-decoration:none;
}

.section-head-link:hover{
  text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  color:var(--brand);
}

/*new blcok*/
.pending-rs-inline{
  margin: 8px 0 14px;
  padding: 12px;
  border: 1px solid #facc15;
  background: #fffbeb;
  border-radius: 14px;
}

.pending-rs-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.pending-rs-title{
  font-weight:800;
  color:#92400e;
}

.pending-rs-list{
  display:grid;
  gap:8px;
}

.pending-rs-item{
  background:#fff;
  border:1px solid var(--bd);
  border-radius:12px;
  padding:10px;
}

.pending-rs-item .top{
  display:flex;
  align-items:center;
  gap:8px;
}

.pending-rs-item .amount{
  margin-left:auto;
  font-weight:800;
  color:var(--brand);
}

/* --- Frontdesk Room Actions popup (nice, compact) --- */
.popup-card{max-width:720px;width:min(92vw,720px)}
.kv-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0}
.kv{border:1px solid var(--bd);border-radius:10px;background:#f8f9fc;padding:8px 10px}
.kv label{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
.kv .val{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.action-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:10px;
  margin:10px 0;
}
.action-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:12px;border:1px solid var(--bd);
  background:#fff;cursor:pointer;font-weight:600;text-decoration:none
}
.action-btn:hover{box-shadow:0 2px 6px rgba(0,0,0,.06)}
.action-btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}

/* Current Stays actions (small icon buttons) */
.icon-stack{display:flex;gap:8px;flex-wrap:wrap}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--bd);border-radius:10px;
  background:#fff;text-decoration:none;cursor:pointer
}
.icon-btn:hover{box-shadow:0 2px 6px rgba(0,0,0,.06)}
.icon-btn svg{width:16px;height:16px}
.icon-btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.icon-btn.muted{opacity:.45;pointer-events:none}



/* --- Upcoming: compact right-aligned filters + table + icon buttons --- */
.row.right{justify-content:flex-end}
#upFilters{gap:8px; margin-bottom:10px}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:1px solid var(--bd); border-radius:10px;
  background:#fff; cursor:pointer;
}
.icon-btn:hover{box-shadow:0 1px 4px rgba(0,0,0,.08)}
.icon-btn svg{width:18px; height:18px}
.table{width:100%; border-collapse:collapse}
.table th, .table td{border-bottom:1px solid var(--bd); padding:8px; vertical-align:middle}
.table th{text-align:left; color:var(--muted); font-weight:700; font-size:14px}


/* Hide the old search row cleanly */
.toolbar-old{ display:none; }

/* Quick actions bar */
.quick-actions{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:12px; margin: 6px 0 14px;
}
.qa-card{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border:1px solid var(--bd); border-radius:7px;
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.04);
  text-decoration:none; color:var(--ink);
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.qa-card:hover{
  transform: translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  border-color:#d1d5db;
}
.qa-ico{
  width:42px; height:42px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#ffffff,#f3f4f6);
  border:1px solid #e5e7eb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.qa-ico svg{ width:22px; height:22px; }

.qa-text{ display:flex; flex-direction:column; line-height:1.2; }
.qa-title{ font-weight:700; font-size:14px; }
.qa-sub{ color:var(--muted); font-size:12px; }

/* Optional: screen-reader-only utility */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;
}

/* Font Awesome icon sizing/colors inside circular badge */
.qa-ico i{ font-size:18px; line-height:1; }

/* Optional per-action accent colors */
.qa-prebook  .qa-ico i{ color:#2563eb; } /* blue */
.qa-checkin  .qa-ico i{ color:#059669; } /* green */
.qa-rsvc     .qa-ico i{ color:#8b5cf6; } /* purple */
.qa-sale     .qa-ico i{ color:#dc2626; } /* red */
.qa-checkout .qa-ico i{ color:var(--brand); } /* your brand gold */

/* ============================
   WhatsApp Status (Quick Actions card)
============================ */
.qa-wa{ cursor:pointer; }
.qa-wa .qa-ico{ position:relative; }
.qa-wa .qa-ico i{ color:#25D366; }
.qa-wa .wa-dot{
  position:absolute; top:-3px; right:-3px;
  width:13px; height:13px; border-radius:50%;
  border:2px solid #fff; background:#9ca3af;
}
.qa-wa.connected .wa-dot{ background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,.6); }
.qa-wa.connected .qa-sub{ color:#15803d; font-weight:700; }
.qa-wa.disconnected .wa-dot{ background:#ef4444; box-shadow:0 0 8px rgba(239,68,68,.5); }
.qa-wa.disconnected .qa-sub{ color:#dc2626; font-weight:700; }
.qa-wa .wa-spinner{
  display:inline-block; width:12px; height:12px;
  border:2px solid rgba(37,211,102,.3);
  border-top-color:#25D366; border-radius:50%;
  vertical-align:middle;
  animation: wa-spin .8s linear infinite;
}
@keyframes wa-spin{ to{ transform:rotate(360deg); } }


/* Upcoming Bookings filter bar */
.upcoming-filter-bar{
  display:flex;
  align-items:end;
  justify-content:flex-end;
  gap:10px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

.upcoming-date-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:150px;
}

.upcoming-date-field label{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}

.upcoming-date-field input{
  height:38px;
  padding:8px 10px;
  border-radius:8px;
}

.upcoming-load-btn{
  height:38px;
  padding:8px 16px;
  border-radius:8px;
}
  </style>


{% endblock %}

{% block content %}
<h2>Front Desk Board</h2>

<div class="row toolbar-old" style="gap:10px">
  <div class="field"><label>Room #</label><input id="f_room" placeholder="e.g. 101"></div>
  <div class="field"><label>Booking #</label><input id="f_booking" placeholder="e.g. 123"></div>
  <button class="btn" id="btnSearch">Search</button>
</div>

<nav class="quick-actions" aria-label="Frontdesk Quick Actions">
  <!-- Pre-Book -->
  {% if 'prebook_list' in allowed_features %}
  <a class="qa-card qa-prebook" href="{% url 'hotel:prebook:prebook_list' %}">
    <span class="qa-ico" aria-hidden="true">
      <i class="fas fa-calendar-plus"></i>
    </span>
    <span class="qa-text">
      <span class="qa-title">Pre-Book</span>
      <span class="qa-sub">Online / staff holds</span>
    </span>
  </a>
  {% endif %}

  <!-- Check-In -->
  {% if 'checkin' in allowed_features %}
  <a class="qa-card qa-checkin" href="{% url 'hotel:checkin:checkin' %}">
    <span class="qa-ico" aria-hidden="true">
      <i class="fas fa-sign-in-alt"></i>
    </span>
    <span class="qa-text">
      <span class="qa-title">Check-In</span>
      <span class="qa-sub">Walk-in / confirm</span>
    </span>
  </a>
  {% endif %}

  <!-- Room Service -->
  {% if 'roomservice_form' in allowed_features %}
  <a class="qa-card qa-rsvc" href="{% url 'hotel:roomservice:form' %}">
    <span class="qa-ico" aria-hidden="true">
      <i class="fas fa-concierge-bell"></i>
    </span>
    <span class="qa-text">
      <span class="qa-title">Room Service</span>
      <span class="qa-sub">Create KOT</span>
    </span>
  </a>
  {% endif %}

  <!-- Pending Room Service -->
  {% if 'roomservice_form' in allowed_features %}
  <a class="qa-card qa-rsvc" href="{% url 'hotel:roomservice:pending_list' %}">
    <span class="qa-ico" aria-hidden="true">
      <i class="fas fa-bell"></i>
    </span>
    <span class="qa-text">
      <span class="qa-title">
        Pending RS
        <span id="pendingRsCountQuick" class="chip" style="margin-left:6px;">0</span>
      </span>
      <span class="qa-sub">Guest app requests</span>
    </span>
  </a>
  {% endif %}

  <!-- Direct Sale (Restaurant POS) -->
  {% if 'restaurant_pos' in allowed_features %}
  <a class="qa-card qa-sale" href="{% url 'restaurant:sales:pos' %}">
    <span class="qa-ico" aria-hidden="true">
      <i class="fas fa-utensils"></i>
    </span>
    <span class="qa-text">
      <span class="qa-title">Direct Sale</span>
      <span class="qa-sub">Restaurant POS</span>
    </span>
  </a>
  {% endif %}

  <!-- Checkout -->
  {% if 'inhouse_list' in allowed_features %}
  <a class="qa-card qa-checkout" href="{% url 'hotel:checkin:checkin_list' %}">
    <span class="qa-ico" aria-hidden="true">
      <i class="fas fa-file-invoice-dollar"></i>
    </span>
    <span class="qa-text">
      <span class="qa-title">Checkout</span>
      <span class="qa-sub">In-house list</span>
    </span>
  </a>
  {% endif %}

  <!-- WhatsApp Status -->
  <div class="qa-card qa-wa disconnected" id="waStatusCard" onclick="handleWaCardClick()">
    <span class="qa-ico" aria-hidden="true">
      <i class="fab fa-whatsapp"></i>
      <span class="wa-dot" id="waStatusDot"></span>
    </span>
    <span class="qa-text">
      <span class="qa-title">WhatsApp</span>
      <span class="qa-sub" id="waStatusLabel">Checking...</span>
    </span>
  </div>
</nav>



<section class="card">
  <h3 class="section-title-with-action">
    <span>Rooms</span>

    <a class="section-head-link" href="{% url 'hotel:rooms:status_manager' %}">
      Room Status
    </a>
  </h3>

  <div id="pendingRsTopBox" class="pending-rs-inline">
    <div class="pending-rs-head">
      <div>
        <div class="pending-rs-title">
          Pending Room Service
          <span id="pendingRsCountQuick" class="chip" style="margin-left:6px;">0</span>
        </div>
        <div class="muted" style="font-size:13px;">Guest app requests waiting for approval</div>
      </div>

      <a class="btn primary" href="{% url 'hotel:roomservice:pending_list' %}" style="font-size:13px;">
        View All
      </a>
    </div>

    <div id="pendingRsBox" class="pending-rs-list"></div>
  </div>

  <div id="roomsGrid" class="grid-6" style="gap:6px"></div>
</section>

{% if 'online_bookings' in allowed_features %}
  <section class="card mt-3">
    <h3 class='text-primary'>Pending Online</h3>
    <div id="pendingBox"></div>
 </section>
{% endif %}



{% if 'staff_prebook_upcoming' in allowed_features %}
  <section class="card" data-section="upcoming" style="margin-top:12px">
    <h3>Upcoming Bookings</h3>

    <!-- Right aligned filter bar -->

   <div id="upFilters" class="upcoming-filter-bar">
      <div class="upcoming-date-field">
        <label for="upStart">From</label>
        <input type="date" id="upStart">
      </div>

      <div class="upcoming-date-field">
        <label for="upEnd">To</label>
        <input type="date" id="upEnd">
      </div>

      <button class="btn primary upcoming-load-btn" id="btnUpcoming">
        Load
      </button>
    </div>

    <!-- Results table -->
    <table class="table" id="tblUpcoming">
      <thead>
        <tr>
          <th>Booking</th>
          <th>Guest</th>
          <th>Check-in</th>
          <th>Check-out</th>
          <th>Nights</th>
          <th>Items</th>
          <th>Status</th>
          <th style="width:72px; text-align:right">Action</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </section>
{% endif %}

</div>

<section class="card" style="margin-top:12px">
  <h3>Current Stays (Today)</h3>
  <table class="table" id="tblCurrent">
    <thead><tr>
      <th>Booking</th><th>Guest</th><th>Dates</th><th>Nights</th><th>Rooms</th><th>Actions</th>
    </tr></thead>

    <tbody></tbody>
  </table>
</section>

<script>
const params = new URLSearchParams(location.search);
// const TENANT = params.get('t') || '1';
const TENANT = params.get('t') || '{{ TENANT|escapejs }}';
function getCookie(name){const v=`; ${document.cookie}`;const p=v.split(`; ${name}=`);if(p.length===2)return p.pop().split(';').shift();return '';}
const CSRF=getCookie('csrftoken');

function el(tag, cls, text){const e=document.createElement(tag); if(cls) e.className=cls; if(text) e.textContent=text; return e;}

async function loadRooms(){
  const r = await fetch("{% url 'hotel:board:api_staff_board_rooms' %}?t="+TENANT);
  const out = await r.json();
  const grid = document.getElementById('roomsGrid'); grid.innerHTML='';
  let lastCat = null;
  out.results.forEach(rm=>{
    if(rm.category !== lastCat){
      const head = el('div','cat-head', rm.category);
      grid.appendChild(head);
      lastCat = rm.category;
    }
    // const b = el('div','card room-card', rm.room_no);
    // b.style.textAlign='center'; b.style.cursor='pointer'; b.style.padding='10px';

    const b = el('div', 'card room-card');

    const roomNoText = el('div', 'room-no-text', rm.room_no);

    const statusLabelMap = {
      vacant: 'Vacant',
      occupied: 'Occupied',
      dirty: 'Dirty',
      cleaning: 'Cleaning',
      maintenance: 'Maintenance',
      out_of_order: 'Out of Order',
      ooo: 'Out of Order',
      blocked: 'Blocked',
      reserved: 'Reserved',
    };

    const st = (rm.status || '').toLowerCase();

    const statusText = el(
      'div',
      'room-status-text',
      statusLabelMap[st] || rm.status || 'Vacant'
    );

    b.append(roomNoText, statusText);

    const statusClassMap = {
      vacant: 'room-status-vacant',
      occupied: 'room-status-occupied',
      dirty: 'room-status-dirty',
      cleaning: 'room-status-cleaning',
      maintenance: 'room-status-maintenance',
      out_of_order: 'room-status-out-of-order',
      ooo: 'room-status-out-of-order',
      blocked: 'room-status-blocked',
      reserved: 'room-status-reserved',
    };

    b.classList.add(statusClassMap[st] || 'room-status-vacant');

    b.style.textAlign = 'center';
    b.style.cursor = 'pointer';
    b.style.padding = '10px';

    if (st === 'out_of_order' || st === 'ooo' || st === 'blocked') {
      b.style.cursor = 'not-allowed';
    }



    b.title = rm.status + (rm.current_booking ? ` (#${rm.current_booking})` : ``);

      if (rm.dnd_active) {
        const pill = el('span', 'dnd-pill', 'DND');
        pill.title = rm.dnd_note || 'Do Not Disturb';

        b.appendChild(pill);

        b.title += ` | DND${rm.dnd_note ? ': ' + rm.dnd_note : ''}`;
      }


    b.addEventListener('click', ()=>{
      // Agar current booking hai to action popup khol dein; warna filter karke current stays reload
      if (rm.current_booking) {
        openRoomActions(rm);
      } else {
        document.getElementById('f_room').value = rm.room_no;
        loadCurrent();
      }
    });



    grid.appendChild(b);
  });
}

async function loadCurrent(){
  // filters
  const qb = encodeURIComponent(document.getElementById('f_booking').value || '');
  const qr = encodeURIComponent(document.getElementById('f_room').value || '');

  // API URL (session-based tenant; koi ?t= nahi)
  let url = "{% url 'hotel:board:api_staff_board_current' %}";
  const qs = [];
  if (qb) qs.push("booking="+qb);
  if (qr) qs.push("room="+qr);
  if (qs.length) url += "?" + qs.join("&");

  // table body
  const tb = document.querySelector('#tblCurrent tbody');
  tb.innerHTML = '';

  // fetch
  let out = {results:[]};
  try{
    const r = await fetch(url);
    out = await r.json();
  }catch(e){
    const tr = document.createElement('tr');
    const td = document.createElement('td');
    td.colSpan = 6;
    td.textContent = 'Failed to load current stays.';
    tr.appendChild(td); tb.appendChild(tr);
    return;
  }

  // URL templates (dummy 0 → inject booking_code)
  const EDIT_URL_T   = "{% url 'hotel:checkin:checkin_edit' t_id='0' %}";
  const FOLIO_URL_T  = "{% url 'hotel:folio:detail' t_id=0 %}";
  const CHKOUT_URL_T = "{% url 'hotel:checkout:checkout' t_id=0 %}";
  const PDF_URL_T    = "{% url 'hotel:checkin:checkin_pdf' t_id=0 %}";
  const injectCode   = (u, c) => u.replace(/\/0(\/|$)/, `/${c}$1`);

  // inline SVG icons (small, clean)
  const svgView = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
    stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z"/><circle cx="12" cy="12" r="3"/></svg>`;
  const svgEdit = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
    stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/></svg>`;
  const svgFile = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
    stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>`;
  const svgOut  = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
    stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="M16 17l5-5-5-5"/><path d="M21 12H9"/></svg>`;
  const svgPOS  = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
    stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>`;

  // no data?
  if (!out.results || !out.results.length){
    const tr = document.createElement('tr');
    const td = document.createElement('td');
    td.colSpan = 6;
    td.textContent = 'No current stays found.';
    tr.appendChild(td); tb.appendChild(tr);
    return;
  }

  // helper to create element
  function el(tag, cls, text){const e=document.createElement(tag); if(cls) e.className=cls; if(text!=null) e.textContent=text; return e;}

  // render rows
  out.results.forEach(row=>{
    const tr = document.createElement('tr');

    // columns (Booking, Guest, Dates, Nights, Rooms)
    tr.appendChild(el('td','', '#'+(row.code ?? row.id)));
    tr.appendChild(el('td','', row.guest || ''));
    tr.appendChild(el('td','', row.dates || ''));
    tr.appendChild(el('td','', (row.nights!=null? row.nights : '')));
    tr.appendChild(el('td','', row.rooms || ''));

    // actions (icon-only)
    const td = document.createElement('td');
    const stack = el('div','icon-stack');

    const code = row.code;
    const editUrl   = code ? injectCode(EDIT_URL_T,   code) : '#';
    const folioUrl  = code ? injectCode(FOLIO_URL_T,  code) : '#';
    const chkUrl    = code ? injectCode(CHKOUT_URL_T, code) : '#';
    const pdfUrl    = code ? injectCode(PDF_URL_T,    code) : '#';

    const btnView = el('a','icon-btn' + (code?'':' muted')); btnView.innerHTML = svgView; btnView.title='View (PDF)';
    btnView.href = code ? pdfUrl : '#'; if (code) btnView.target = '_blank';

    const btnEdit = el('a','icon-btn' + (code?'':' muted')); btnEdit.innerHTML = svgEdit; btnEdit.title='Edit';
    btnEdit.href = editUrl;

    const btnFolio = el('a','icon-btn' + (code?'':' muted')); btnFolio.innerHTML = svgFile; btnFolio.title='Folio';
    btnFolio.href = folioUrl;

    const btnChk = el('a','icon-btn' + (code?' primary':' muted')); btnChk.innerHTML = svgOut; btnChk.title='Checkout';
    btnChk.href = code ? chkUrl : '#';

    const btnRS = el('a','icon-btn'); btnRS.innerHTML = svgPOS; btnRS.title='Add Room Service';
    btnRS.href = '#'; btnRS.addEventListener('click', e=>{ e.preventDefault(); alert('Hook to restaurant/POS'); });

    stack.append(btnView, btnEdit, btnFolio, btnChk, btnRS);
    td.appendChild(stack);
    tr.appendChild(td);

    tb.appendChild(tr);
  });
}


async function loadPending(){
  const r = await fetch("{% url 'hotel:board:api_staff_board_pending' %}?t="+TENANT);
  const out = await r.json();
  const box = document.getElementById('pendingBox'); box.innerHTML='';
  out.results.forEach(b=>{
    const card = el('div','card');
    const head = el('div','row'); head.append(el('div','', `#${b.id}`), el('div','', b.total.toFixed(2))); head.lastChild.style.marginLeft='auto';
    const ln1 = el('div','muted', b.dates + ` (${b.nights} nights)`);
    const ln2 = el('div','', b.guest||'');
    const badges = el('div'); 
    const ev = el('span','badge '+(b.has_evidence?'success':''), b.has_evidence?'Evidence ✓':'No evidence');
    badges.appendChild(ev);
    if(b.overdue){ const ov=el('span','badge warn','Over-due'); badges.appendChild(document.createTextNode(' ')); badges.appendChild(ov); }
    const actions = el('div');
    const view = el('a','btn sm','Review'); view.href = "#"; view.addEventListener('click', async (e)=>{ e.preventDefault(); openReview(b.id); });
    actions.appendChild(view);
    card.append(head, ln1, ln2, badges, actions);
    if(b.has_evidence){ card.style.background = '#ecfdf5'; } // greenish
    box.appendChild(card);
  });
}



  async function openReview(id){
    const DETAIL_URL_T  = "{% url 'hotel:board:api_staff_booking_detail' t_id=0 %}";
    const CONFIRM_URL_T = "{% url 'hotel:board:api_staff_booking_confirm' t_id=0 %}";
    const CANCEL_URL_T  = "{% url 'hotel:board:api_staff_booking_cancel' t_id=0 %}";

    function injectId(url, id){
      return url.replace(/\/0(\/|$)/, "/" + id + "$1");
    }

    const detailUrl = injectId(DETAIL_URL_T, id);

    const r = await fetch(detailUrl + "?t=" + TENANT);
    const d = await r.json();

    const html = `
      <div class="card" style="max-width:640px">
        <h3>Booking #${d.id}</h3>

        <div><b>Guest:</b> ${d.guest.name || ''} ${d.guest.phone ? '(' + d.guest.phone + ')' : ''}</div>
        <div><b>Dates:</b> ${d.dates.in} → ${d.dates.out} (${d.dates.nights} nights)</div>

        <div style="margin:6px 0"><b>Items</b></div>
        <ul>
          ${d.items.map(i => `<li>${i.category} × ${i.qty} @ ${i.rate}</li>`).join('')}
        </ul>

        <div><b>Total:</b> ${d.money.total.toFixed(2)} — Tax ${d.money.tax_percent}%</div>

        <div style="margin-top:6px">
          ${d.has_evidence ? `<a target="_blank" href="${d.evidence_url}">View Evidence</a>` : `<span class="badge">Evidence missing</span>`}
          ${d.overdue ? ` <span class="badge warn">Over-due</span>` : ``}
        </div>

        <div style="margin-top:10px" class="row">
          <button class="btn" id="rvCancel">Cancel</button>

          <div style="margin-left:auto">
            <button class="btn primary" id="addPayments">Open</button>
            <button class="btn" id="rvReject">Reject</button>
            <button class="btn primary" id="rvConfirm">Confirm without Payments</button>
          </div>
        </div>

        <div id="rvMsg" class="muted" style="margin-top:6px"></div>
      </div>
    `;

    const wrap = document.createElement('div');
    wrap.style.position = 'fixed';
    wrap.style.inset = '0';
    wrap.style.background = 'rgba(0,0,0,0.3)';
    wrap.style.display = 'flex';
    wrap.style.alignItems = 'center';
    wrap.style.justifyContent = 'center';
    wrap.innerHTML = html;

    document.body.appendChild(wrap);

    function close(){
      document.body.removeChild(wrap);
    }

    wrap.querySelector('#rvCancel').onclick = close;

    wrap.querySelector('#rvConfirm').onclick = async () => {
      const confirmUrl = injectId(CONFIRM_URL_T, d.id);

      const r = await fetch(confirmUrl + "?t=" + TENANT, {
        method: 'POST',
        headers: {
          'X-CSRFToken': CSRF
        }
      });

      if (!r.ok) {
        wrap.querySelector('#rvMsg').textContent = 'Failed: ' + await r.text();
        return;
      }

      close();
      await loadPending();
      await loadCurrent();
    };

    wrap.querySelector('#rvReject').onclick = async () => {
      const cancelUrl = injectId(CANCEL_URL_T, d.id);

      const r = await fetch(cancelUrl + "?t=" + TENANT, {
        method: 'POST',
        headers: {
          'X-CSRFToken': CSRF
        }
      });

      if (!r.ok) {
        wrap.querySelector('#rvMsg').textContent = 'Failed: ' + await r.text();
        return;
      }

      close();
      await loadPending();
      await loadCurrent();
    };

    wrap.querySelector('#addPayments').onclick = () => {
      const base = "{% url 'hotel:prebook:prebook_detail' t_id=0 %}";
      const url = base.replace(/\/0\/$/, "/" + d.id + "/");
      window.location.href = url;
    };
  }



async function openRoomActions(rm){
  const bookingTid = rm.current_booking_t_id || rm.current_booking;
  const bookingCode = rm.current_booking_code || '';

  if (!bookingTid) {
    alert('Booking t_id missing for this room.');
    return;
  }
  // Reverse with dummy 0 then inject booking_code
  const PDF_URL_T      = "{% url 'hotel:checkin:checkin_pdf' t_id=0 %}";
  const EDIT_URL_T     = "{% url 'hotel:checkin:checkin_edit' t_id='0' %}";
  const FOLIO_URL_T    = "{% url 'hotel:folio:detail' t_id=0 %}";
  const CHECKOUT_URL_T = "{% url 'hotel:checkout:checkout' t_id=0 %}";
  // new for dnd
  const DND_CLEAR_URL_T = "{% url 'hotel:board:api_staff_board_room_dnd_clear' room_id=0 %}";
  const dndClearUrl = DND_CLEAR_URL_T.replace(/\/0(\/|$)/, `/${rm.id}$1`);
  const injectCode = (u, c) => u.replace(/\/0(\/|$)/, `/${c}$1`);

  const pdfUrl      = injectCode(PDF_URL_T,      bookingTid);
  const editUrl     = injectCode(EDIT_URL_T,     bookingTid);
  const folioUrl    = injectCode(FOLIO_URL_T,    bookingTid);
  const checkoutUrl = injectCode(CHECKOUT_URL_T, bookingTid);

  // Booking detail (name/phone/address/check-in)
  const DETAIL_URL_T = "{% url 'hotel:board:api_staff_booking_detail' t_id=0 %}";
  const detailUrl = injectCode(DETAIL_URL_T, bookingTid);

  let d = {guest:{name:'',phone:'',address:''}, dates:{in:''}};
  try{
    const r = await fetch(detailUrl);
    d = await r.json();
  }catch(e){/* ignore; fallback already set */ }

  const guestName  = (d.guest && d.guest.name)    ? d.guest.name : '';
  const guestPhone = (d.guest && d.guest.phone)   ? d.guest.phone : '';
  const guestAddr  = (d.guest && d.guest.address) ? d.guest.address : '';
  const checkin    = (d.dates && d.dates.in)      ? d.dates.in : '';

  const html = `
    <div class="card popup-card">
      <h3>Room ${rm.room_no} — Booking #${bookingTid}</h3>

      <!-- Row-1: Guest Name + Phone -->
      <div class="kv-row">
        <div class="kv">
          <label>Guest & Phone</label>
          <div class="val">${(guestName||'-')}${guestPhone ? ' — ' + guestPhone : ''}</div>
        </div>

        <!-- Row-2: Address + Check-in -->
        <div class="kv">
          <label>Address & Check-in</label>
          <div class="val">${(guestAddr||'-')}${checkin ? ' — ' + checkin : ''}</div>
        </div>
      </div>

      <!-- Actions: 4 buttons in one line -->
            ${rm.dnd_active ? `
        <div class="kv-row">
          <div class="kv" style="grid-column:1 / -1; border-color:#fb923c; background:#fff7ed;">
            <label>Do Not Disturb</label>
            <div class="val">
              Active${rm.dnd_note ? ' — ' + rm.dnd_note : ''}
            </div>
          </div>
        </div>
      ` : ``}

      <div class="action-grid">
        <a class="action-btn" target="_blank" href="${pdfUrl}">Print Receipt</a>
        <a class="action-btn" href="${editUrl}">Edit</a>
        <a class="action-btn" href="${folioUrl}">Folio</a>
        <a class="action-btn primary" href="${checkoutUrl}">Checkout</a>

        ${rm.dnd_active ? `
          <button class="action-btn" id="btnClearDnd" type="button">Clear DND</button>
        ` : ``}
      </div>

      <div class="row right"><button class="btn" id="raClose">Close</button></div>
    </div>`;

  const wrap = document.createElement('div');
  wrap.style.position='fixed';
  wrap.style.inset='0';
  wrap.style.background='rgba(0,0,0,0.3)';
  wrap.style.display='flex';
  wrap.style.alignItems='center';
  wrap.style.justifyContent='center';
  wrap.innerHTML = html;

  document.body.appendChild(wrap);
  wrap.querySelector('#raClose').onclick = ()=> document.body.removeChild(wrap);

  const clearDndBtn = wrap.querySelector('#btnClearDnd');

  if (clearDndBtn) {
    clearDndBtn.onclick = async () => {
      const ok = confirm('Clear Do Not Disturb for this room?');
      if (!ok) return;

      clearDndBtn.disabled = true;
      clearDndBtn.textContent = 'Clearing...';

      try {
        const r = await fetch(dndClearUrl, {
          method: 'POST',
          headers: {
            'X-CSRFToken': CSRF,
          },
        });

        const out = await r.json();

        if (!r.ok || out.ok === false) {
          alert(out.message || 'DND clear failed.');
          clearDndBtn.disabled = false;
          clearDndBtn.textContent = 'Clear DND';
          return;
        }

        document.body.removeChild(wrap);
        await loadRooms();
        await loadCurrent();
      } catch (e) {
        alert('DND clear failed.');
        clearDndBtn.disabled = false;
        clearDndBtn.textContent = 'Clear DND';
      }
    };
  }
}




// ════════════════ WhatsApp Status Card ════════════════
const WA_SERVER = 'http://localhost:3000';
let waConnected = false;
let waChecking = false;

function updateWaCard(status) {
  const card = document.getElementById('waStatusCard');
  const label = document.getElementById('waStatusLabel');
  if (!card || !label) return;

  card.classList.remove('connected', 'disconnected');

  if (status === 'connected') {
    waConnected = true;
    card.classList.add('connected');
    label.textContent = 'Connected';
  } else if (status === 'checking') {
    label.innerHTML = '<span class="wa-spinner"></span>';
  } else {
    waConnected = false;
    card.classList.add('disconnected');
    label.textContent = status === 'offline' ? 'Server Off' : 'Disconnected';
  }
}

async function checkWaStatus() {
  if (waChecking) return;
  waChecking = true;
  updateWaCard('checking');

  try {
    const resp = await fetch(WA_SERVER + '/api/status', { mode: 'cors' });
    const data = await resp.json();

    if (data.connected) {
      updateWaCard('connected');
    } else {
      updateWaCard('disconnected');
    }
  } catch (err) {
    updateWaCard('offline');
  } finally {
    waChecking = false;
  }
}

async function handleWaCardClick() {
  if (waConnected) {
    // Already connected, go to settings
    window.location.href = "{% url 'pos:whatsapp_settings' %}";
    return;
  }

  // Try to reconnect
  updateWaCard('checking');

  try {
    const resp = await fetch(WA_SERVER + '/api/connect', { mode: 'cors' });
    const data = await resp.json();

    if (data.status === 'connected') {
      updateWaCard('connected');
      return;
    }

    // Need QR scan, redirect to settings
    window.location.href = "{% url 'pos:whatsapp_settings' %}";
  } catch (err) {
    // Server offline or error, go to settings anyway
    window.location.href = "{% url 'pos:whatsapp_settings' %}";
  }
}

// Check WhatsApp status on load and every 30 seconds
checkWaStatus();
setInterval(checkWaStatus, 30000);


document.getElementById('btnSearch').addEventListener('click', ()=> loadCurrent());
loadPendingRoomService();
loadRooms();
loadCurrent();
loadPending();



// --- Upcoming ---
// --- Upcoming (direct per-day fetch; tenant-safe) ---
function iso(d){ return d.toISOString().slice(0,10); }

// Inclusive date iterator
function* dateIterISO(startISO, endISO){
  try{
    const s = new Date(startISO+"T00:00:00");
    const e = new Date(endISO+"T00:00:00");
    for(let d = new Date(s); d <= e; d.setDate(d.getDate()+1)){
      yield iso(d);
    }
  }catch(e){}
}

async function loadUpcomingRange(){
  const s   = document.getElementById('upStart').value;
  const e   = document.getElementById('upEnd').value;
  const tb  = document.querySelector('#tblUpcoming tbody');
  const btn = document.getElementById('btnUpcoming');
  const base = "{% url 'hotel:board:api_staff_board_upcoming' %}";

  tb.innerHTML = '';
  if(!s || !e){
    tb.innerHTML = '<tr><td colspan="8" class="muted">Please select both dates.</td></tr>';
    return;
  }

  // loading UI
  const oldText = btn.textContent;
  btn.disabled = true; btn.textContent = 'Loading…';

  try{
    // Build list of days (inclusive)
    const days = Array.from(dateIterISO(s, e));
    if(days.length === 0){
      tb.innerHTML = '<tr><td colspan="8" class="muted">No date(s) in range.</td></tr>';
      return;
    }

    // Fetch details for each day directly: ?d=YYYY-MM-DD&t=TENANT
    const reqs = days.map(d =>
      fetch(`${base}?t=${encodeURIComponent(TENANT)}&d=${encodeURIComponent(d)}`)
        .then(r => r.ok ? r.json() : {results:[]})
        .catch(() => ({results:[]}))
    );
    const all = await Promise.all(reqs);

    // Flatten bookings
    const rows = [];
    all.forEach(dayObj => {
      const list = (dayObj && dayObj.results) ? dayObj.results : [];
      list.forEach(b => {
        // b.dates is "YYYY-MM-DD → YYYY-MM-DD"
        const parts = String(b.dates||'').split('→');
        const cin  = (parts[0]||'').trim();
        const cout = (parts[1]||'').trim();
        rows.push({
          id: b.id,
          t_id: b.t_id || '',
          guest: b.guest || '',
          in: cin,
          out: cout,
          nights: b.nights || 0,
          items: b.items || '',
          status: b.status || ''
        });
      });
    });

    // Sort by check-in then id
    rows.sort((a,b)=>{
      if(a.in === b.in) return (a.id||0) - (b.id||0);
      return a.in < b.in ? -1 : 1;
    });

    // Render helper(s)
    const makeIconBtn = (title, onClick) => {
      const btn = document.createElement('button');
      btn.className = 'icon-btn'; btn.type='button'; btn.title = title;
      btn.innerHTML = `
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"></path>
          <circle cx="12" cy="12" r="3"></circle>
        </svg>`;
      btn.addEventListener('click', onClick);
      return btn;
    };

    if(rows.length === 0){
      tb.innerHTML = '<tr><td colspan="8" class="muted">No upcoming bookings in this range.</td></tr>';
      return;
    }

    rows.forEach(r=>{
      const tr = document.createElement('tr');
      tr.appendChild(el('td', '', r.t_id ? '#'+r.t_id : '#'+r.id));
      tr.appendChild(el('td','', r.guest));
      tr.appendChild(el('td','', r.in));
      tr.appendChild(el('td','', r.out));
      tr.appendChild(el('td','', String(r.nights)));
      tr.appendChild(el('td','', r.items));
      tr.appendChild(el('td','', r.status));
      const tdAct = document.createElement('td');
      tdAct.style.textAlign='right';
      tdAct.appendChild(makeIconBtn('View', ()=> openReview(r.id)));
      tr.appendChild(tdAct);
      tb.appendChild(tr);
    });

  }catch(err){
    console.error(err);
    tb.innerHTML = '<tr><td colspan="8" class="muted">Failed to load upcoming bookings.</td></tr>';
  }finally{
    btn.disabled = false; btn.textContent = oldText;
  }
}

// defaults: today → +7
(function initUpcomingDefaults(){
  const today = new Date(), to = new Date(); to.setDate(to.getDate()+2);
  document.getElementById('upStart').value = iso(today);
  document.getElementById('upEnd').value   = iso(to);
})();
document.getElementById('btnUpcoming').addEventListener('click', loadUpcomingRange);
loadUpcomingRange();


(function(){
  const STATE_KEY='fdpub_fold';
  function readState(){try{return JSON.parse(localStorage.getItem(STATE_KEY)||'{}');}catch(e){return {};}}
  function writeState(s){localStorage.setItem(STATE_KEY, JSON.stringify(s));}
  function slug(t){return (t||'').toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/(^-|-$)/g,'');}

  const state = readState();
  document.querySelectorAll('section.card').forEach((sec,i)=>{
    const h3 = sec.querySelector('h3'); if(!h3) return; // sirf un cards par jinka h3 hai
    const key = sec.dataset.section || slug(h3.textContent) || ('sec'+i);
    sec.dataset.section = key;

    // button banayein (default open = ▲)
    const btn = document.createElement('button');
    btn.type='button'; btn.className='toggle';
    btn.title = 'Collapse / Expand';
    const collapsed = !!state[key];
    if(collapsed) sec.classList.add('collapsed');
    // btn.textContent = collapsed ? '▼' : '▲';
    btn.innerHTML = `
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
           stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <polyline points="6 9 12 15 18 9"></polyline>
      </svg>`;
    btn.setAttribute('aria-expanded', String(!collapsed));
    h3.appendChild(btn);

    btn.addEventListener('click', ()=>{
      sec.classList.toggle('collapsed');
      const isCol = sec.classList.contains('collapsed');
      // btn.textContent = isCol ? '▼' : '▲';
      btn.setAttribute('aria-expanded', String(!isCol));
      state[key] = isCol; writeState(state);
    });
  });
})();

async function loadPendingRoomService(){
  const box = document.getElementById('pendingRsBox');
  const quickCount = document.getElementById('pendingRsCountQuick');
  const topBox = document.getElementById('pendingRsTopBox');

  if(!box) return;

  box.innerHTML = '<div class="muted">Loading pending room service...</div>';

  let out = {count: 0, results: []};

  try{
    const r = await fetch("{% url 'hotel:board:api_staff_board_pending_roomservice' %}?t=" + encodeURIComponent(TENANT));
    out = await r.json();
  }catch(e){
    box.innerHTML = '<div class="muted">Failed to load pending room service.</div>';
    return;
  }

  const count = Number(out.count || 0);

  if(quickCount){
    quickCount.textContent = count;
  }

  box.innerHTML = '';

  if(!out.results || !out.results.length){
    box.innerHTML = '<div class="muted">No pending room service requests.</div>';

    // Agar empty state hide karni ho to next line uncomment kar dena:
    // if(topBox) topBox.style.display = 'none';

    return;
  }

  if(topBox) topBox.style.display = '';

  out.results.forEach(rs => {
    const card = el('div', 'pending-rs-item');

    const head = el('div', 'top');

    const left = el('div', '', `RS Request #${rs.request_no}`);
    left.style.fontWeight = '800';

    const amount = el('div', 'amount', `Rs ${Number(rs.total || 0).toFixed(2)}`);

    head.append(left, amount);

    const guest = el('div', 'muted', `Guest: ${rs.guest || '-'}`);
    const room = el('div', 'muted', `Booking: #${rs.booking || '-'} • Room: ${rs.room_no || '-'}`);
    const items = el('div', '', `Items: ${rs.line_count || 0}`);

    card.append(head, guest, room, items);

    if(rs.remarks){
      const remarks = el('div', 'muted', `Remarks: ${rs.remarks}`);
      card.appendChild(remarks);
    }

    const actions = el('div', 'row right');
    actions.style.marginTop = '8px';

    const view = el('a', 'btn primary', 'View');
    view.href = "{% url 'hotel:roomservice:pending_list' %}";

    actions.appendChild(view);
    card.appendChild(actions);

    box.appendChild(card);
  });
}
</script>

{% endblock %}