{% extends "pos/base.html" %}
{% load static %}
{% block title %}Frontdesk Check-in{% endblock %}
{% block heading %}Frontdesk Check-in{% endblock %}

{% block stylesheets %}
<style>
  .cat-block{margin-bottom:16px;border:1px solid #e5e7eb;border-radius:12px;background:#fff}
  .cat-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid #eee}
  .cat-name{font-weight:600}
  .rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;padding:12px}
  .room-card{border:1px solid #e5e7eb;border-radius:10px;padding:10px;text-align:center;cursor:pointer;user-select:none}
  .room-card.small{padding:8px}
  .room-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.06)}
  .room-card.selected{border-color:#2563eb;outline:2px solid #93c5fd}
  .badge{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;background:#eef2ff;color:#3730a3}
  .btn-xs{padding:4px 8px;font-size:12px}
  .sticky-right{position:sticky; top:12px}
  .totals .v{font-weight:600}
  .tender-row{display:flex;gap:8px;margin-bottom:8px}
  .tender-row select, .tender-row input{width:100%}
  @media (max-width: 991px){
    .sticky-right{position:static}
  }

  .tender-row{display:flex; align-items:center; gap:8px; margin-bottom:8px}
  .tender-row select,
  .tender-row input[type="number"]{flex:1 1 0; min-width:0}
  .tender-row input[type="date"]{flex:0 0 140px}
  .tender-row button.remove-tender{flex:0 0 auto}
  
</style>
{% endblock %}

{% block content %}
<form method="post" id="ci-form">
  {% csrf_token %}
  <input type="hidden" name="selected_rooms_payload" id="selected_rooms_payload">
  <input type="hidden" name="adv_payload" id="adv_payload">
  <input type="hidden" name="override_holds" id="override_holds" value="0">
  <input type="hidden" name="action" id="action" value="save">
  <input type="hidden" name="booking_id" id="booking_id">
  <input type="hidden" name="booking_code" id="booking_code">
  <input type="hidden" name="op" id="op" value="">


<div class="card mb-3">
  <div class="card-body py-2">
    <div class="form-row align-items-center">
      <div class="col-auto">
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
          <label class="btn btn-outline-secondary active"><input type="radio" name="sr_mode" value="booking" checked> Booking</label>
          <label class="btn btn-outline-secondary"><input type="radio" name="sr_mode" value="contact"> Contact</label>
          <label class="btn btn-outline-secondary"><input type="radio" name="sr_mode" value="cnic"> CNIC</label>
        </div>
      </div>
      <div class="col-md-5">
        <input type="text" id="sr_q" class="form-control" placeholder="Search by Booking # / Contact / CNIC">
      </div>
      <div class="col-auto">
        <button type="button" id="btnSearch" class="btn btn-primary">Search</button>
      </div>
    </div>
  </div>
</div>



  <div class="row">
    <!-- LEFT: Details + Grids -->
    <div class="col-lg-8">
      <!-- Stay & Guest -->
      <div class="card mb-3">
        <div class="card-header">Stay Details</div>
        <div class="card-body">
          <div class="form-row">
            <div class="col-md-3">
              <label>Check-in</label>
              <input type="date" class="form-control" name="checkin_date" value="{{ today|date:'Y-m-d' }}">
            </div>
            <div class="col-md-3">
              <label>Check-out</label>
              <input type="date" class="form-control" name="checkout_date" value="{{ tomorrow|date:'Y-m-d' }}">
            </div>
            <div class="col-md-3">
              <label class="d-block">&nbsp;</label>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="include_tonight" name="include_tonight">
                <label for="include_tonight" class="form-check-label">Include Tonight</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="mark_previous_date" name="mark_previous_date">
                <label for="mark_previous_date" class="form-check-label">Mark Previous Day</label>
              </div>
            </div>
            <div class="col-md-3">
              <label>Billing Profile</label>
              <select class="form-control" name="billing_profile">
                <option value="WalkIn">Walk-In</option>
                <option value="BB_BTC">B&B BTC</option>
                <option value="ALL_BTC">All BTC</option>
                <option value="BB_ENT">B&B ENT</option>
                <option value="ALL_ENT">All ENT</option>
              </select>
            </div>
          </div>
        </div>
      </div>

      <div class="card mb-3">
        <div class="card-header">Guest</div>
        <div class="card-body">

        <div class="form-row">
          <div class="col-md-4">
            <label>Guest Name</label>
            <input type="text" class="form-control" name="guest_name" required>
          </div>
          <div class="col-md-4">
            <label>Guest Email</label>
            <input type="email" class="form-control" name="guest_email" placeholder="name@example.com">
          </div>
          <div class="col-md-4">
            <label>Contact</label>
            <input type="text" class="form-control" name="contact">
          </div>
        </div>


<!--           <div class="form-row">
            <div class="col-md-4"><label>Name*</label><input class="form-control" name="guest_name" required></div>
            <div class="col-md-4"><label>Contact</label><input class="form-control" name="contact"></div>
          </div> -->
          <div class="form-row mt-2">
            <div class="col-md-4"><label>CNIC</label><input class="form-control" name="cnic"></div>
            <div class="col-md-4"><label>Passport</label><input class="form-control" name="passport"></div>
            <div class="col-md-4"><label>Nationality</label><input class="form-control" name="nationality"></div>
          </div>
          <div class="form-row mt-2">
            <div class="col-md-4"><label>Profession</label><input class="form-control" name="profession"></div>
            <div class="col-md-4"><label>Car #</label><input class="form-control" name="car_no"></div>
            <div class="col-md-4"><label>Address</label><input class="form-control" name="address"></div>
          </div>
          <div class="form-row mt-2">
            <div class="col-md-4"><label>Company</label><input class="form-control" name="company_name"></div>
            <div class="col-md-4"><label>Description</label><input class="form-control" name="description"></div>
            <div class="col-md-4"><label>Remarks</label><input class="form-control" name="remarks"></div>
          </div>
          <div class="form-row mt-2">
            <div class="col-md-3"><label>Adults</label><input type="number" min="1" class="form-control" name="no_of_adults" value="1"></div>
            <div class="col-md-3"><label>Kids</label><input type="number" min="0" class="form-control" name="no_of_kids" value="0"></div>
          </div>
        </div>
      </div>

      <!-- Category-wise VACANT grids -->
      <div id="cats-root"></div>
    </div>

    <!-- RIGHT: Sticky totals + tenders -->
    <div class="col-lg-4">
      <div class="card sticky-right">
        <div class="card-header">Totals & Payments</div>
        <div class="card-body totals">
          <div class="mb-2">Nights: <span class="v" id="v_nights">1</span></div>
          <div class="mb-1">Per-night Sum: <span class="v" id="v_pernight">0.00</span></div>
          <div class="mb-1">Subtotal: <span class="v" id="v_subtotal">0.00</span></div>
          <div class="form-group mb-1">
            <label>Discount</label>
            <input type="number" step="0.01" class="form-control" id="inp_discount" name="discount_amount" value="0">
          </div>
          <div class="form-group mb-2">
            <label class="d-block">Tax Mode</label>
            <div class="btn-group btn-group-toggle" data-toggle="buttons">
              <label class="btn btn-outline-primary active">
                <input type="radio" name="pay_mode" value="cash" autocomplete="off" checked> Cash
              </label>
              <label class="btn btn-outline-primary">
                <input type="radio" name="pay_mode" value="digital" autocomplete="off"> Digital
              </label>
            </div>
          </div>


          <div class="form-group mb-1">
            <label>Tax %</label>
            <input type="number" step="0.01" class="form-control" id="inp_taxp" name="tax_percent" value="{{ tax_default|floatformat:'2' }}" readonly>
          </div>



          <div class="mb-1">Tax: <span class="v" id="v_tax">0.00</span></div>
          <div class="mb-2"><b>Grand Total: <span class="v" id="v_total">0.00</span></b></div>
          <div class="mb-1">Prior Advance: <span class="v" id="v_prior">0.00</span></div>
          <div class="mb-1">Receivable Now: <span class="v" id="v_recv">0.00</span></div>

          <hr>
          <div class="card mt-3">
            <div class="card-header py-2">C/I Advance (Multi-Tender)</div>
            <div class="card-body py-2">
            <div id="tenders">
              <div class="tender-row">
                <select class="form-control" name="t_bank[]" data-bank>
                  {% for b in banks %}
                    <option value="{{ b.t_id }}">{{ b.name }}</option>
                  {% endfor %}
                </select>
                <input type="number" step="0.01" min="0" class="form-control" name="t_amount[]" data-amt placeholder="Amount">
                <input type="hidden" class="form-control" name="t_date[]" data-date value="{{ today|date:'Y-m-d' }}">
                <button type="button" class="btn btn-outline-danger remove-tender">&times;</button>
              </div>
            </div>
            <button type="button" id="add-tender" class="btn btn-sm btn-outline-secondary mt-2">+ Add tender</button>

              <button type="button" id="add-tender" class="btn btn-sm btn-outline-secondary mt-2">+ Add tender</button>
            </div>
          </div>




          <div class="text-right small text-muted">Advance Sum: <span id="v_advsum">0.00</span></div>
          <div class="text-right small"><b>Remaining: <span id="v_remain">0.00</span></b></div>

        <div class="mt-3 d-flex">
          <!-- <button type="button" id="btnSave" class="btn btn-success mr-2" name="action" value="save">Save</button> -->
          <button type="button" id="btnSavePrint" class="btn btn-primary" name="action" value="save_print">Save &amp; Print</button>
        </div>

        </div>
      </div>
    </div>
  </div>
</form>


<div class="modal fade" id="lookupModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg"><div class="modal-content">
    <div class="modal-header">
      <h6 class="modal-title">Booking Lookup</h6>
      <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
    </div>
    <div class="modal-body">
      <div id="lkpBody">Loading...</div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
      <button class="btn btn-outline-success" id="btnLkpConvert">Check-In Guest</button>
      <button class="btn btn-primary" id="btnLkpEdit">Edit This Check-In</button>
    </div>
  </div></div>
</div>


<!-- Simple modal for availability -->
<div class="modal fade" id="availModal" tabindex="-1" role="dialog" aria-labelledby="availLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header"><h6 class="modal-title" id="availLabel">Category Availability</h6>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body" id="availBody">Loading...</div>
      <div class="modal-footer"><button class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button></div>
    </div>
  </div>
</div>
{% endblock %}


{% block javascripts %}
<style>
  /* same-line tender row */
  .tender-row{display:flex; align-items:center; gap:8px; margin-bottom:8px}
  .tender-row select,
  .tender-row input[type="number"]{flex:1 1 0; min-width:0}
  .tender-row input[type="date"]{flex:0 0 140px}
  .tender-row button.remove-tender{flex:0 0 auto}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
  // -------- helpers --------
  const safeParse = (s, def) => { try { return JSON.parse(s); } catch(e){ return def; } };
  const fmt2 = x => (Math.round((Number(x)+Number.EPSILON)*100)/100).toFixed(2);

  // -------- safe JSON from server (with fallbacks) --------
  const vacantPrimary   = safeParse('{{ vacant_by_cat_json|default:"{}"|escapejs }}', {});
  const vacantFallback  = safeParse('{{ rooms_by_cat_json|default:"{}"|escapejs }}', {});
  const vacantByCat     = Object.keys(vacantPrimary).length ? vacantPrimary : vacantFallback;

  const ratesPrimary    = safeParse('{{ rates_by_cat_json|default:"{}"|escapejs }}', {});
  const ratesFallback   = safeParse('{{ cat_defaults_json|default:"{}"|escapejs }}', {});
  const ratesByCatRaw   = Object.keys(ratesPrimary).length ? ratesPrimary : ratesFallback;
  // normalize to simple number {catId: rate}
  const ratesByCat = {};
  Object.keys(ratesByCatRaw).forEach(k=>{
    const v = ratesByCatRaw[k];
    ratesByCat[k] = typeof v === 'object' && v && 'rate' in v ? parseFloat(v.rate||0) : parseFloat(v||0);
  });

  const today   = "{{ today|date:'Y-m-d' }}";
  const catsRoot= document.getElementById('cats-root');

  // Bank <option> list built server-side (no JSON objects in JS)
  const BANK_OPTIONS_HTML = `{% for b in banks %}<option value="{{ b.t_id }}">{{ b.name|escapejs }}</option>{% endfor %}`;

  // Tax defaults (from server config)
  const taxCash    = parseFloat('{{ tax_default_cash|default:0 }}') || 0;
  const taxDigital = parseFloat('{{ tax_default_digital|default:0 }}') || 0;

  // Map: cat_id -> Set(room_id)
  const selected = new Map();

  // ============= Category blocks (rooms grid) =============
  {% for c in categories %}
    renderCategory({{ c.id }}, "{{ c.name|escapejs }}");
  {% endfor %}

  function renderCategory(catId, catName){
    const block = document.createElement('div');
    block.className = 'cat-block';
    block.dataset.catId = catId;

    const head = document.createElement('div');
    head.className = 'cat-head';
    head.innerHTML = `
      <div>
        <span class="cat-name">${catName}</span>
        <span class="badge ml-2">Selected: <span data-sel-count>0</span></span>
      </div>
      <div>
        <button class="btn btn-sm btn-outline-secondary btn-xs" type="button" data-act="check">Check Availability</button>
        <button class="btn btn-sm btn-outline-danger btn-xs ml-2" type="button" data-act="clear">Clear</button>
      </div>`;
    block.appendChild(head);

    const grid = document.createElement('div');
    grid.className = 'rooms-grid';
    (vacantByCat[catId] || []).forEach(r => {
      const card = document.createElement('div');
      card.className = 'room-card small';
      card.textContent = r.room_no;
      card.dataset.roomId = r.id;
      card.addEventListener('click', () => toggleRoom(catId, r.id, card, block));
      grid.appendChild(card);
    });
    block.appendChild(grid);

    head.querySelector('[data-act="check"]').addEventListener('click', () => checkAvailability(catId, catName));
    head.querySelector('[data-act="clear"]').addEventListener('click', () => {
      selected.set(catId, new Set());
      block.querySelectorAll('.room-card.selected').forEach(el => el.classList.remove('selected'));
      updateSelCount(block);
      recalcTotals();
    });

    catsRoot.appendChild(block);
  }

  function toggleRoom(catId, roomId, el, block){
    if (!selected.has(catId)) selected.set(catId, new Set());
    const s = selected.get(catId);
    if (s.has(roomId)){ s.delete(roomId); el.classList.remove('selected'); }
    else { s.add(roomId); el.classList.add('selected'); }
    updateSelCount(block);
    recalcTotals();
  }

  function updateSelCount(block){
    const catId = parseInt(block.dataset.catId);
    const s = selected.get(catId) || new Set();
    block.querySelector('[data-sel-count]').textContent = s.size;
  }

  // ============= Availability modal =============
  async function checkAvailability(catId, catName){
    const ci = document.querySelector('[name="checkin_date"]').value;
    const co = document.querySelector('[name="checkout_date"]').value;
    if (!ci || !co){ return alert('Select check-in and check-out first.'); }
    const params = new URLSearchParams({cat: catId, start: ci, end: co});
    const res = await fetch("{% url 'hotel:api_category_availability' %}?"+params.toString(), {credentials:'same-origin'});
    const data = await res.json();
    const b = document.getElementById('availBody');
    if (!data.ok){ b.innerHTML = '<div class="text-danger">Bad params.</div>'; $('#availModal').modal('show'); return; }
    b.innerHTML = `
      <div><b>${catName}</b></div>
      <div class="mt-2 small">
        Total: <b>${data.total_rooms}</b><br>
        Booked (max): <b>${data.booked_max}</b><br>
        Pending holds (max): <b>${data.pending_max}</b><br>
        OOO: <b>${data.ooo}</b><br>
        <hr class="my-1">
        Min Available in range: <b>${data.available_min}</b>
      </div>`;
    $('#availModal').modal('show');
  }

  // ============= Multi-tender (dynamic) =============
  const tendersBox = document.getElementById('tenders');
  const addTenderBtn = document.getElementById('add-tender') || document.getElementById('btnAddTender'); // support either id
  const advSumEl = document.getElementById('v_advsum');
  const Remain = document.getElementById('v_remain');

  // wire existing row (if present) and compute first sum
  wireExistingTenderRows();
  recalcAdvanceSum();

  if (addTenderBtn) addTenderBtn.addEventListener('click', () => addTenderRow());

  function wireExistingTenderRows(){
    tendersBox.querySelectorAll('.tender-row').forEach(row => {
      // ensure inputs have both name + data-* (so server + JS both work)
      const bankSel = row.querySelector('select');
      const amtInp  = row.querySelector('input[type="number"]');
      const dateInp = row.querySelector('input[type="date"]');
      if (bankSel){ bankSel.setAttribute('name','t_bank[]'); bankSel.setAttribute('data-bank',''); }
      if (amtInp){  amtInp.setAttribute('name','t_amount[]'); amtInp.setAttribute('data-amt','');  }
      // if (dateInp){ dateInp.setAttribute('name','t_date[]');  dateInp.setAttribute('data-date',''); }

      // add remove button if missing
      if (!row.querySelector('.remove-tender')) {
        const rm = document.createElement('button');
        rm.type = 'button';
        rm.className = 'btn btn-outline-danger remove-tender';
        rm.innerHTML = '&times;';
        rm.addEventListener('click', () => { row.remove(); recalcAdvanceSum(); });
        row.appendChild(rm);
      }
      if (amtInp) amtInp.addEventListener('input', recalcAdvanceSum);
    });
  }

  function addTenderRow(pref = {bank_tid:"0", amount:"", date: today}){
    const row = document.createElement('div');
    row.className = 'tender-row';
    row.innerHTML = `
      <select class="form-control" name="t_bank[]" data-bank>
        ${BANK_OPTIONS_HTML}
      </select>
      <input type="number" step="0.01" min="0" class="form-control" name="t_amount[]" data-amt placeholder="Amount" value="${pref.amount || ''}">
      <input type="hidden" class="form-control" name="t_date[]" data-date value="${pref.date || today}">
      <button type="button" class="btn btn-outline-danger remove-tender">&times;</button>
    `;
    // preset bank if provided
    row.querySelector('select[name="t_bank[]"]').value = String(pref.bank_tid || "0");
    row.querySelector('.remove-tender').addEventListener('click', () => { row.remove(); recalcAdvanceSum(); });
    row.querySelector('input[name="t_amount[]"]').addEventListener('input', recalcAdvanceSum);
    tendersBox.appendChild(row);
    recalcAdvanceSum();
  }

  function collectTenders(){
    const out = [];
    tendersBox.querySelectorAll('.tender-row').forEach(r => {
      const bank_tid = parseInt((r.querySelector('[data-bank]')||{}).value || '0');
      const amount   = parseFloat((r.querySelector('[data-amt]')||{}).value || '0');
      const date     = (r.querySelector('[data-date]')||{}).value || '';
      if (!isNaN(amount) && amount>0) out.push({bank_tid, amount, date});
    });
    return out;
  }

  function recalcAdvanceSum(){
    const sum = collectTenders().reduce((a,x)=>a + (parseFloat(x.amount)||0), 0);
    advSumEl.textContent = fmt2(sum);
    recalcTotals();

    // const prior = parseFloat(document.getElementById('v_prior')?.textContent || '0') || 0;
    // const recv = Math.max(total - prior, 0);
    // setTxt('v_recv', fmt2(recv));
    // const advSum = parseFloat(document.getElementById('v_advsum')?.textContent || '0') || 0;
    // const remain = Math.max(recv - advSum, 0);


    // Remain.textContent = fmt2(remain);

  }

  // ============= Tax Mode -> Tax % input =============
  const taxInput   = document.getElementById('inp_taxp');
  const payModeRadios = document.querySelectorAll('input[name="pay_mode"]');

  function applyTaxByMode(){
    const mode = (document.querySelector('input[name="pay_mode"]:checked')?.value || 'cash').toLowerCase();
    // Don’t override if both are zero (not provided by server)
    if ((taxCash || 0) === 0 && (taxDigital || 0) === 0) { recalcTotals(); return; }
    if (taxInput) taxInput.value = (mode === 'digital') ? taxDigital : taxCash;
    recalcTotals();
  }

  payModeRadios.forEach(r => r.addEventListener('change', applyTaxByMode));
  applyTaxByMode();

  // ============= Totals =============
  function parseDate(v){ if(!v) return null; const d=new Date(v); return isNaN(d)?null:d; }
  function nightsVal(){
    let ci = parseDate(document.querySelector('[name="checkin_date"]').value);
    let co = parseDate(document.querySelector('[name="checkout_date"]').value);
    if(!ci || !co) return 0;
    let n = Math.max( (co - ci)/(1000*60*60*24), 0);
    if (document.getElementById('include_tonight')?.checked) n += 1;
    if (document.getElementById('mark_previous_date')?.checked) n += 1; // aligns with server shifting ci-1
    return Math.max(1, Math.round(n));
  }
  function perNightSum(){
    let sum = 0;
    for (const [catId, set] of selected.entries()){
      const rate = parseFloat(ratesByCat[catId] || 0);
      sum += rate * (set ? set.size : 0);
    }
    return sum;
  }
  function recalcTotals(){
    const pn = perNightSum();
    const n = nightsVal();
    const subtotal = pn * n;
    const disc = parseFloat((document.getElementById('inp_discount')||{}).value || '0');
    const taxp = parseFloat((document.getElementById('inp_taxp')||{}).value || '0');
    const base = Math.max(subtotal - (isNaN(disc)?0:disc), 0);
    const tax = base * (isNaN(taxp)?0:taxp)/100.0;
    const total = base + tax;

    const setTxt = (id,val)=>{ const el=document.getElementById(id); if(el) el.textContent=val; };
    setTxt('v_nights', n);
    setTxt('v_pernight', fmt2(pn));
    setTxt('v_subtotal', fmt2(subtotal));
    setTxt('v_tax', fmt2(tax));
    setTxt('v_total', fmt2(total));

   // NEW: prior & remaining
   const prior = parseFloat(document.getElementById('v_prior')?.textContent || '0') || 0;
   const recv = Math.max(total - prior, 0);
   setTxt('v_recv', fmt2(recv));
   const advSum = parseFloat(document.getElementById('v_advsum')?.textContent || '0') || 0;
   const remain = Math.max(recv - advSum, 0);
   setTxt('v_remain', fmt2(remain));


  }

  ['checkin_date','checkout_date','include_tonight','mark_previous_date','inp_discount','inp_taxp']
    .forEach(n=>{
      const el = document.getElementsByName(n)[0] || document.getElementById(n);
      if(!el) return;
      ['change','input'].forEach(e=> el.addEventListener(e, recalcTotals));
    });

  // initial
  recalcTotals();

  // ============= Preflight + Submit =============
  async function preflightAndSubmit(action){
    const payload = [];
    for (const [catId, set] of selected.entries()){
      if (set && set.size>0) payload.push({category_id: parseInt(catId), room_ids: Array.from(set)});
    }
    if (payload.length===0){ return alert('Please select at least one room.'); }

    // Hidden inputs (your form must have these)
    const selInp = document.getElementById('selected_rooms_payload');
    if (selInp) selInp.value = JSON.stringify(payload);
    const advInp = document.getElementById('adv_payload');
    if (advInp) advInp.value = JSON.stringify(collectTenders());
    const actInp = document.getElementById('action');
    if (actInp) actInp.value = action;

    const ci = document.querySelector('[name="checkin_date"]').value;
    const co = document.querySelector('[name="checkout_date"]').value;

    // Validate overlaps/holds (server)
    const fd = new FormData();
    fd.append('csrfmiddlewaretoken', document.querySelector('[name="csrfmiddlewaretoken"]').value);
    fd.append('selected_rooms_payload', JSON.stringify(payload));
    fd.append('start', ci); fd.append('end', co);

    // NEW: pass booking_id (if present) so server can ignore self holds
    const curBookingId = (document.getElementById('booking_id')?.value || '').trim();
    if (curBookingId) fd.append('ignore', curBookingId);


    const res = await fetch("{% url 'hotel:api_checkin_validate' %}", {method:'POST', body: fd, credentials: 'same-origin'});
    const data = await res.json();
    if (!data.ok){ return alert('Validation failed.'); }

    let msg = '';
    if (data.blocking_rooms && data.blocking_rooms.length){
      msg += `The following rooms overlap in selected dates: ${data.blocking_rooms.join(', ')}.\n`;
    }
    if (data.holds_conflict){
      msg += `Some dates have pending holds/capacity issues.\n`;
    }
    if (msg){
      msg += '\nDo you still want to proceed?';
      if (!confirm(msg)){ return; }
      const ov = document.getElementById('override_holds'); if (ov) ov.value = '1';
    }

    // Submit the form
    document.getElementById('ci-form').submit();
  }

  // const btnSave = document.getElementById('btnSave');
  const btnSavePrint = document.getElementById('btnSavePrint');
  // if (btnSave) btnSave.addEventListener('click', ()=> preflightAndSubmit('save'));
  if (btnSavePrint) btnSavePrint.addEventListener('click', ()=> preflightAndSubmit('save_print'));





  // ---- SAFETY-NET: normal submit par bhi payload inject ho ----
  const form = document.getElementById('ci-form');

  function buildSelectedPayload(){
    const out = [];
    for (const [catId, set] of selected.entries()){
      if (set && set.size > 0) out.push({ category_id: parseInt(catId), room_ids: Array.from(set) });
    }
    return out;
  }

  form.addEventListener('submit', () => {
    const sel = document.getElementById('selected_rooms_payload');
    const adv = document.getElementById('adv_payload');
    if (sel && (!sel.value || sel.value.trim()==="")) sel.value = JSON.stringify(buildSelectedPayload());
    if (adv && (!adv.value || adv.value.trim()==="")) adv.value = JSON.stringify(collectTenders());
  });

  // --- NEW: lookup state ---
  let LKP = { mode: 'booking', data: null, priorAdvance: 0, op: '' };

  // use mode radio
  document.querySelectorAll('input[name="sr_mode"]').forEach(r=>{
    r.addEventListener('change', ()=> LKP.mode = r.value);
  });

  async function fetchJSON(url){
    const r = await fetch(url, {credentials:'same-origin'});
    if(!r.ok) throw new Error(await r.text());
    return await r.json();
  }

  function setHidden(id, val){
    const el = document.getElementById(id);
    if(el) el.value = (val==null? "": String(val));
  }


  const btnSearch = document.getElementById('btnSearch');
  if(btnSearch){
    btnSearch.addEventListener('click', async ()=>{
      const q = (document.getElementById('sr_q')?.value || '').trim();
      if(!q){ alert('Enter a value to search.'); return; }
      try{
        const url = "{% url 'hotel:api_prebook_lookup' %}" + `?mode=${encodeURIComponent(LKP.mode)}&q=${encodeURIComponent(q)}`;
        const data = await fetchJSON(url);
        LKP.data = data.booking;
        LKP.priorAdvance = parseFloat(data.booking.prior_advance || 0);
        // render modal body
        const b = document.getElementById('lkpBody');
        const itRows = (data.booking.items||[]).map(it=>`
          <tr>
            <td>${it.category_name}</td>
            <td class="text-right">${it.qty}</td>
            <td class="text-right">${(+it.rate_per_night).toFixed(2)}</td>
            <td class="text-right">${(+it.discount_per_night).toFixed(2)}</td>
          </tr>`).join('');
        b.innerHTML = `
          <div class="mb-2"><b>B# ${data.booking.booking_code || '—'}</b> — Status: <b>${data.booking.status}</b></div>
          <div class="small mb-2">
            Guest: <b>${data.booking.guest.name || ''}</b> (${data.booking.guest.contact || ''})<br>
            Stay: ${data.booking.checkin_date} → ${data.booking.checkout_date}
          </div>
          <table class="table table-sm">
            <thead><tr><th>Category</th><th class="text-right">Qty</th><th class="text-right">Rate</th><th class="text-right">Disc</th></tr></thead>
            <tbody>${itRows || '<tr><td colspan="4" class="text-muted">No items</td></tr>'}</tbody>
          </table>
          <div class="small">Prior Advance: <b>${(+LKP.priorAdvance).toFixed(2)}</b></div>
        `;
        // buttons visibility
        const isCheckedIn = (data.booking.status||'').toUpperCase()==='CHECKEDIN';
        document.getElementById('btnLkpConvert').style.display = isCheckedIn? 'none':'inline-block';
        document.getElementById('btnLkpEdit').style.display = isCheckedIn? 'inline-block':'none';
        $('#lookupModal').modal('show');
      }catch(e){
        alert('Not found or error.\n'+e);
      }
    });
  }

  async function rebuildGridForDates(ds, de, ignoreId){
    // Refresh free rooms for the window, optionally ignoring this booking (to include its current rooms).
    const p = new URLSearchParams({start: ds, end: de});
    if(ignoreId) p.append('ignore', String(ignoreId));
    const dat = await fetchJSON("{% url 'hotel:api_rooms_free_all' %}?"+p.toString());
    // remake local vacantByCat
    Object.keys(vacantByCat).forEach(k=> delete vacantByCat[k]);
    for(const row of dat){
      vacantByCat[row.category_id] = row.rooms || [];
    }
    // rerender categories
    catsRoot.innerHTML = '';
    {% for c in categories %}
      renderCategory({{ c.id }}, "{{ c.name|escapejs }}");
    {% endfor %}
  }

  function prefillCommon(b){
    // set identifiers & op
    setHidden('booking_id', b.id || '');
    setHidden('booking_code', b.booking_code || '');
    setHidden('op', LKP.op);

    // guest
    const setVal = (name, val)=>{ const el=document.querySelector(`[name="${name}"]`); if(el) el.value = val||''; };
    setVal('guest_name', b.guest.name);
    setVal('guest_email', b.guest.email);
    setVal('contact', b.guest.contact);
    setVal('cnic', b.guest.cnic);
    setVal('passport', b.guest.passport);
    setVal('nationality', b.guest.nationality);
    setVal('profession', b.guest.profession);
    setVal('car_no', b.guest.car_no);
    setVal('address', b.guest.address);
    setVal('company_name', b.guest.company_name);
    setVal('no_of_adults', b.guest.no_of_adults);
    setVal('no_of_kids', b.guest.no_of_kids);

    // stay & profile
    setVal('checkin_date', b.checkin_date);
    setVal('checkout_date', b.checkout_date);
    document.getElementById('include_tonight').checked = !!b.include_tonight;
    document.getElementById('mark_previous_date').checked = !!b.mark_previous_date;
    setVal('billing_profile', b.billing_profile);

    // pay mode → tax %
    const mode = (b.pay_mode||'cash').toLowerCase();
    const radio = document.querySelector(`input[name="pay_mode"][value="${mode}"]`);
    if(radio){ radio.checked = true; }
    if (typeof b.tax_percent === 'number'){
      const taxEl = document.getElementById('inp_taxp');
      if(taxEl){ taxEl.value = String(b.tax_percent.toFixed(2)); }
    }

    // const discVal = document.getElementById('inp_discount');
    // discVal.value = b.discount_note;


    const discVal = document.getElementById('inp_discount');
    // 1) String → Float
    let discount = parseFloat(b.discount_note);

    // 2) Agar NaN aaye to 0 use karo
    if (isNaN(discount)) {
        discount = 0;
    }

    // 3) Ab input me numeric value set karo
    discVal.value = discount;



    // prior advance to UI
    document.getElementById('v_prior').textContent = fmt2(LKP.priorAdvance||0);
  }

  function preselectRooms(assignedIdsByCat){
    // assignedIdsByCat: {catId: [room_ids]}
    // toggle selection on those cards
    document.querySelectorAll('.cat-block').forEach(block=>{
      const catId = parseInt(block.dataset.catId);
      const want = new Set(assignedIdsByCat[catId]||[]);
      block.querySelectorAll('.room-card').forEach(card=>{
        const rid = parseInt(card.dataset.roomId);
        if(want.has(rid) && !card.classList.contains('selected')){
          card.click();
        }
      });
    });
  }

  document.getElementById('btnLkpConvert')?.addEventListener('click', async ()=>{
    if(!LKP.data) return;
    LKP.op = 'convert';
    $('#lookupModal').modal('hide');
    prefillCommon(LKP.data);
    // refresh grid for booking window (no ignore)
    await rebuildGridForDates(LKP.data.checkin_date, LKP.data.checkout_date, null);
    recalcTotals();
  });

  document.getElementById('btnLkpEdit')?.addEventListener('click', async ()=>{
    if(!LKP.data) return;
    LKP.op = 'edit';
    $('#lookupModal').modal('hide');
    prefillCommon(LKP.data);
    // refresh grid for booking window INCLUDING its current rooms
    await rebuildGridForDates(LKP.data.checkin_date, LKP.data.checkout_date, LKP.data.id);
    // preselect existing assignments
    const byCat = {};
    (LKP.data.assigned_room_ids||[]).forEach(rid=>{
      // find category for rid from the rebuilt grid source
      for(const catId of Object.keys(vacantByCat)){
        if((vacantByCat[catId]||[]).some(r=> r.id===rid)){ 
          byCat[parseInt(catId)] = (byCat[parseInt(catId)]||[]); 
          byCat[parseInt(catId)].push(rid); 
          break;
        }
      }
    });
    preselectRooms(byCat);


   // ---- NEW: prefill existing CI tenders into the right pane ----
   try{
     const box = document.getElementById('tenders');
     if (box){
       box.innerHTML = ''; // clear all existing rows
       const rows = (LKP.data.ci_payments || []);
       if (rows.length === 0){
         addTenderRow(); // keep one empty row
       } else {
         rows.forEach(p => addTenderRow({bank_tid: String(p.bank_tid||"0"), amount: p.amount||"", date: p.date}));
       }
       recalcAdvanceSum();
     }
   }catch(e){ /* ignore UI prefill errors */ }


    recalcTotals();
  });



// ===== Auto-lookup from query (?tid=...) -> OPEN MODAL ONLY =====
(async function autoOpenLookupModalFromQuery(){
  try{
    const qp = new URLSearchParams(location.search);
    const tid = qp.get('tid') || qp.get('id');   // support both tid or id
    if(!tid) return;

    // Use same lookup API (mode=booking handles numeric t_id now)
    const url = "{% url 'hotel:api_prebook_lookup' %}" + `?mode=booking&q=${encodeURIComponent(tid)}`;
    const data = await fetchJSON(url);
    LKP.data = data.booking;
    LKP.priorAdvance = parseFloat(data.booking.prior_advance || 0);

    // === render the modal body (same template you use in btnSearch) ===
    const b = document.getElementById('lkpBody');
    const itRows = (data.booking.items||[]).map(it=>`
      <tr>
        <td>${it.category_name}</td>
        <td class="text-right">${it.qty}</td>
        <td class="text-right">${(+it.rate_per_night).toFixed(2)}</td>
        <td class="text-right">${(+it.discount_per_night).toFixed(2)}</td>
      </tr>`).join('');
    b.innerHTML = `
      <div class="mb-2"><b>B# ${data.booking.booking_code || '—'}</b> — Status: <b>${data.booking.status}</b></div>
      <div class="small mb-2">
        Guest: <b>${data.booking.guest.name || ''}</b> (${data.booking.guest.contact || ''})<br>
        Stay: ${data.booking.checkin_date} → ${data.booking.checkout_date}
      </div>
      <table class="table table-sm">
        <thead><tr><th>Category</th><th class="text-right">Qty</th><th class="text-right">Rate</th><th class="text-right">Disc</th></tr></thead>
        <tbody>${itRows || '<tr><td colspan="4" class="text-muted">No items</td></tr>'}</tbody>
      </table>
      <div class="small">Prior Advance: <b>${(+LKP.priorAdvance).toFixed(2)}</b></div>
    `;

    // Buttons visibility based on status
    const isCheckedIn = (data.booking.status||'').toUpperCase()==='CHECKEDIN';
    document.getElementById('btnLkpConvert').style.display = isCheckedIn? 'none':'inline-block';
    document.getElementById('btnLkpEdit').style.display    = isCheckedIn? 'inline-block':'none';

    // *** OPEN MODAL — DO NOT PREFILL FORM ***
    $('#lookupModal').modal('show');

    // NOTE: After this, user will click “Edit This Check-In” (which already calls prefillCommon + rebuildGrid etc.)

  }catch(e){
    console.warn('Auto lookup from ?tid failed:', e);
  }
})();



});
</script>
{% endblock %}