{% 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:16px;padding:16px;box-shadow:0 2px 10px 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; }

/* 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;
}

/* --- 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(4,minmax(0,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:14px;
  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 */


  </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 'staff_prebook_list' in allowed_features %}
  <a class="qa-card qa-prebook" href="{% url 'hotel:staff_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' %}">
    <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_new' in allowed_features %}
  <a class="qa-card qa-rsvc" href="{% url 'hotel:roomservice_new' %}">
    <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 %}

  <!-- Direct Sale (Restaurant POS) -->
  {% if 'restaurant_pos' in allowed_features %}
  <a class="qa-card qa-sale" href="{% url 'hotel:restaurant_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:inhouse_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 %}
</nav>



<div class="grid-2" style="margin-top:12px">
  <section class="card">
    <h3>Rooms</h3>
    <div id="roomsGrid" class="grid-6" style="gap:6px"></div>
  </section>

{% if 'online_bookings' in allowed_features %}
  <section class="card">
    <h3>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="row right">
      <label class="sr-only" for="upStart">Check-in From</label>
      <input type="date" id="upStart">
      <label class="sr-only" for="upEnd">To</label>
      <input type="date" id="upEnd">
      <button class="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: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', rm.room_no);
    b.style.textAlign='center'; b.style.cursor='pointer'; b.style.padding='10px';

    const st = (rm.status||'').toLowerCase();
    if (st === 'ooo') {
      // OOO = greyed out (quick win)
      b.style.background = '#f3f4f6';
      b.style.color = '#6b7280';
      b.style.cursor = 'not-allowed';
    } else if (st !== 'vacant') {
      // occupied/other = soft red
      b.style.background = '#fee2e2';
    } else {
      // vacant = soft blue
      b.style.background = '#e0f2fe';
    }

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

    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: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_edit'  booking_code='0' %}";
  const FOLIO_URL_T  = "{% url 'hotel:folio_detail'  booking_code=0 %}";
  const CHKOUT_URL_T = "{% url 'hotel:checkout'      booking_code=0 %}";
  const PDF_URL_T    = "{% url 'hotel:checkin_pdf'   booking_code=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: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){
  // lightweight in-page dialog
  const r = await fetch("{% url 'hotel:api_staff_booking_detail' code='__X__' %}".replace('__X__', id)+"?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 r = await fetch("{% url 'hotel:api_staff_booking_confirm' code='__X__' %}".replace('__X__', d.id)+"?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();
  };

  // Open staff_prebook_detail for this booking_id
  wrap.querySelector('#addPayments').onclick = () => {
    // Django will render /hotel/prebook/staff/0/ here; we swap 0 -> d.id in JS.
    const base = "{% url 'hotel:staff_prebook_detail' booking_id=0 %}";
    const url  = base.replace(/\/0\/$/, `/${d.id}/`);
    window.location.href = url;           // or: window.location.assign(url);
  };


  wrap.querySelector('#rvReject').onclick = async ()=>{
    const r = await fetch("{% url 'hotel:api_staff_booking_cancel' code='__X__' %}".replace('__X__', d.id)+"?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();
  };
}



async function openRoomActions(rm){
  const code = rm.current_booking_code;
  if (!code) { alert('Booking code missing for this room.'); return; }

  // Reverse with dummy 0 then inject booking_code
  const PDF_URL_T      = "{% url 'hotel:checkin_pdf'   booking_code=0 %}";
  const EDIT_URL_T     = "{% url 'hotel:checkin_edit'  booking_code='0' %}";
  const FOLIO_URL_T    = "{% url 'hotel:folio_detail'  booking_code=0 %}";
  const CHECKOUT_URL_T = "{% url 'hotel:checkout'      booking_code=0 %}";
  const injectCode = (u, c) => u.replace(/\/0(\/|$)/, `/${c}$1`);

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

  // Booking detail (name/phone/address/check-in)
  const DETAIL_URL_T = "{% url 'hotel:api_staff_booking_detail' code='__X__' %}";
  const detailUrl    = DETAIL_URL_T.replace('__X__', rm.current_booking);

  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 #${code}</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 -->
      <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>
      </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);
}



document.getElementById('btnSearch').addEventListener('click', ()=> loadCurrent());
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: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,
          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.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);
    });
  });
})();
</script>

{% endblock %}