{% extends "pos/base.html" %}
{% load static %}

{% block title %}Restaurant POS{% endblock %}

{% block stylesheets %}

<style>

  .tables-grid { display:grid; grid-template-columns: repeat(6, 1fr); gap:8px; }
  .table-box { border:1px solid #d5d9df; border-radius:6px; padding:10px; text-align:center; cursor:pointer; background:#f8fafc; }
  .table-box.reserved { background:#fff3cd; border-color:#e0c97a; }
  .table-box.active { outline:2px solid #0d6efd; }
  .muted{ color:#6c757d } .small{ font-size:12px }
  .right{ text-align:right } .btn-xs{ padding:.25rem .5rem; font-size:.8rem }
  .bluebar { background:#0d6efd; color:#fff; border-radius:8px; padding:8px 10px; margin-bottom:8px; }

  #pos-form { padding-bottom: 96px; }
  .pos-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
                background: #fff; border-top: 1px solid #e5e7eb; padding: 8px 12px; }
  .pos-footer .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .pos-footer .grand { font-weight: 700; font-size: 18px; color: #0d6efd; }
  @media(max-width: 768px){
    .tables-grid{ grid-template-columns: repeat(3, 1fr); }
    .pos-footer .actions { justify-content: space-between; }
  }



</style>

<style>
  /* Container keeps all inputs on one line */
  .line-form{
    display:flex; align-items:center; flex-wrap:nowrap; gap:.5rem; white-space:nowrap;
  }
  /* Name gets max available width */
  .line-form .grow{ flex:1 1 auto; min-width:240px; }
  /* Others size to content */
  .line-form .auto{ flex:0 0 auto; width:auto; }
  /* Handy width utilities using character units */
  .line-form .ch-6{  width:6ch; }
  .line-form .ch-8{  width:8ch; }
  .line-form .ch-10{ width:10ch; }
  .line-form .ch-12{ width:12ch; }
</style>
<style>
  /* ====== TUNABLES ====== */
  :root{
    --hdr-h: 32px;            /* overall control height (30–34 good) */
    --gap-sm: .5rem;
    --chip-radius: 10px;
  }

  /* Card feel (subtle) */
  .pos-hdr .card-body{
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    box-shadow: 0 .5px 0 rgba(16,24,40,.05);
  }

  /* Grid: 2 rows → (types + current) then search row */
  .hdr-grid{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: .35rem 1rem;
    align-items: center;
  }
  .order-types{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
  .current{ white-space:nowrap; font-size:.875rem; color:var(--bs-emphasis-color); }
  .current .kv > span{ color:var(--bs-secondary-color); }
  .current .dot{ opacity:.6; margin:0 .4rem; }

  .search-row{
    grid-column: 1 / span 2;
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) minmax(200px, 1fr);
    gap: .4rem;
  }

  .sect-title{
    font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--bs-secondary-color);
    margin-right:.25rem;
  }

  /* Segmented radios (micro-chips) */
  .seg{
    height: var(--hdr-h);
    padding: 0 .6rem;
    line-height: calc(var(--hdr-h) - 2px);
    border:1px solid var(--bs-border-color);
    border-radius: var(--chip-radius);
    background: var(--bs-body-bg);
    color: var(--bs-emphasis-color);
    font-size:.85rem;
    cursor:pointer;
    user-select:none;
    transition: .12s ease-in-out;
  }
  .seg:hover{ background: var(--bs-secondary-bg); }
  .btn-check:checked + .seg{
    background:#023a73; color:#fff; border-color:#111827;
    box-shadow: 0 0 0 2px rgba(17,24,39,.04) inset;
  }

  /* Inputs: exact same height & icon width => perfect alignment */
  .elegant .input-group-text,
  .elegant .form-control{
    height: var(--hdr-h);
    padding: .2rem .5rem;
    line-height: 1.1;
    border-radius: .5rem;
  }
  .elegant .input-group-text.ico{
    width: 36px; justify-content:center;
    background: var(--bs-body-bg);
    border-right:0;
  }
  .elegant .form-control{ border-left:0; }
  .elegant .form-control:focus{
    border-color:#111827;
    box-shadow: 0 0 0 .12rem rgba(17,24,39,.12);
  }

  /* Responsive: stack current on next line if space is tight */
  @media (max-width: 992px){
    .hdr-grid{ grid-template-columns: 1fr; }
    .current{ justify-self: start; }
    .search-row{ grid-column: 1; }
  }

/* Single-line elegant controls */
.totals-inline{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.6rem .9rem; padding:.35rem .5rem;
  border-top:1px solid var(--bs-border-color);
}
.ti-read{ display:flex; align-items:center; gap:.5rem; }
.tag{
  padding:.2rem .5rem; font-size:.78rem; line-height:1;
  color:var(--bs-secondary-color); background:var(--bs-secondary-bg);
  border:1px solid var(--bs-border-color); border-radius:999px;
  white-space:nowrap;
}
.mono{
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.ti-control{ display:flex; align-items:center; gap:.4rem; }

/* compact input groups */
.mini-group{
  display:inline-flex; align-items:center; height:28px;
  border:1px solid var(--bs-border-color); border-radius:8px; overflow:hidden; background:#fff;
}
.pre,.post{
  padding:0 .45rem; font-size:.8rem; color:var(--bs-secondary-color);
  background:var(--bs-secondary-bg); border-right:1px solid var(--bs-border-color);
}
.post{ border-right:0; border-left:1px solid var(--bs-border-color); }
.num{
  width:7ch; min-width:5ch; border:0; outline:0; height:100%;
  padding:0 .45rem; text-align:right; font-size:.85rem; background:#fff;
}

/* tax bits */
.mini-select{
  height:28px; padding:.1rem .5rem; font-size:.85rem; border-radius:8px;
  border:1px solid var(--bs-border-color); background:#fff;
}
.percent .num{ width:6ch; }


/* small screens */
@media (max-width: 576px){
  .num{ width:6ch; }
}

  #t_subtotal,
  #ft_grand{
    color: #dc3545 !important;   /* Bootstrap red */
    font-weight: 700 !important; /* bold */
  }

  /* small size bump */
  #t_subtotal{ font-size: 1.1rem; }
  #ft_grand{   font-size: 30px;   }

</style>


{% endblock %}

{% block content %}
<form id="pos-form">{% csrf_token %}

  <!-- Top Blue Header -->
  <!-- (once in base) Bootstrap Icons -->

  <div class="card mb-2 border-0 pos-hdr">
    <div class="card-body py-2 px-3">

      <div class="hdr-grid">
        <!-- ROW-1 LEFT: Order Type -->
        <div class="order-types">
          <span class="sect-title">ORDER TYPE</span>

          <input class="btn-check" type="radio" name="order_type" id="ot_dining" value="DINING" checked>
          <label class="seg" for="ot_dining">DINING</label>

          <input class="btn-check" type="radio" name="order_type" id="ot_takeaway" value="TAKEAWAY">
          <label class="seg" for="ot_takeaway">TAKEAWAY</label>

          <input class="btn-check" type="radio" name="order_type" id="ot_delivery" value="DELIVERY">
          <label class="seg" for="ot_delivery">DELIVERY</label>
   
          <input class="btn-check d-none" type="radio" name="order_type" id="ot_drive" value="DRIVE">
          <label class="seg d-none" for="ot_drive">DRIVE</label>

          <input class="btn-check d-none" type="radio" name="order_type" id="ot_credit" value="CREDIT">
          <label class="seg d-none" for="ot_credit">CREDIT</label>

          <input class="btn-check d-none" type="radio" name="order_type" id="ot_room" value="ROOM">
          <label class="seg d-none" for="ot_room">ROOM</label>

          <input class="btn-check d-none" type="radio" name="order_type" id="ot_board" value="BOARD">
          <label class="seg d-none" for="ot_board">BOARD</label>

          <input class="btn-check" type="radio" name="order_type" id="ot_app" value="APP">
          <label class="seg" for="ot_app">FOOD APPS</label>

          <input class="btn-check" type="radio" name="order_type" id="ot_web" value="WEB">
          <label class="seg" for="ot_web">WEBSITE</label>
          
        </div>

        <!-- ROW-1 RIGHT: Current (inline, super-compact) -->
        <div class="current text-end">
          <span class="sect-title me-2">CURRENT</span>
          <span class="kv"><span>Order #</span><strong id="lbl_order_no" class="ms-1">—</strong></span>
          <span class="dot">•</span>
          <span class="kv"><span>Date</span><strong id="lbl_date" class="ms-1">{{ now|date:"Y-m-d" }}</strong></span>
          <span id="lbl_mode" class="tag ms-2 d-none" style="display:none;">EDIT MODE</span>

          <span id="lbl_room_info" class="kv d-none">
            <span>Booking</span>
            <strong id="lbl_booking" class="ms-1">—</strong>
            <span class="dot">•</span>
            <span id="lbl_guest" class="ms-1"></span>
          </span>



          <button type="button" id="btn_help"
            class="btn btn-light btn-sm border rounded-circle ms-2"
            title="Keyboard Shortcuts">Help</button>
        </div>

        <!-- ROW-2: Search (exact heights & alignment) -->
        <div class="search-row">
          <div class="input-group input-group-sm elegant">
            <span class="input-group-text ico">#</span>
            <input id="inp_search_order" class="form-control" placeholder="Order # (Edit/Delete) (F8)">
          </div>

          <div class="input-group input-group-sm elegant">
            <span class="input-group-text ico"><i class="bi bi-upc-scan"></i></span>
            <input id="inp_search_table" class="form-control" placeholder="Table Name (F9)">
          </div>

          <div class="input-group input-group-sm elegant">
            <span class="input-group-text ico"><i class="bi bi-telephone"></i></span>
            <input id="inp_search_phone" class="form-control" placeholder="Phone # (F4)">
          </div>
        </div>
      </div>

    </div>
  </div>


    <!-- ===== Main 2-column layout ===== -->
  <div class="row">
      <!-- LEFT: Fast Entry -> Items -> Payments -->
      <div class="col-lg-7 col-xl-8 order-lg-1 order-2">


        <!-- Items Grid -->
        <div class="card mb-3">

          <div class="card-body">

            <!-- ONE-LINE ENTRY ROW -->
            <div class="line-form">
              <input id="code" class="form-control form-control-sm auto ch-12" placeholder="Code (Enter)">
              <select id="name" class="form-control form-control-sm grow" style="width:100%;"></select>
              <input id="qty"  class="form-control form-control-sm auto ch-6"  placeholder="Qty"  value="1">
              <input id="rate" class="form-control form-control-sm auto ch-8"  placeholder="Rate">
              <input type="hidden" id="disc" class="form-control form-control-sm auto ch-6"  placeholder="Dis">
              <input type="hidden" id="taxp" class="form-control form-control-sm auto ch-6"  placeholder="Tax%">
            </div>

            <!-- NOTE stays below (Enter to add) -->
            <input type="hidden" id="note" class="form-control form-control-sm mt-2" placeholder="Note (Enter to add)">
          </div>


          <div class="card-body table-responsive">
            <table class="table table-sm" id="grid">
              <thead>
                <tr>
                  <th>Item</th><th class="text-right">Qty</th><th class="text-right">Rate</th>
                  <th class="text-right">Disc</th><th class="text-right">Tax%</th><th class="text-right">Total</th><th></th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
            <!-- Totals — single compact line under the table (no grand total here) -->
            <div class="totals-inline mt-2">
              <div class="ti-read">
                <span class="tag">Subtotal</span>
                <strong id="t_subtotal" class="mono">0</strong>
              </div>

              <div class="ti-control">
                <div class="mini-group">
                  <span class="pre">Disc</span>
                  <input id="hdr_discount" class="num" value="0">
                </div>
              </div>

              <div class="ti-control">
                <div class="mini-group">
                  <span class="pre">Service(%)</span>
                  <input id="hdr_service" class="num" value="0">
                </div>
              </div>

              <div class="ti-control">
                <div class="mini-group">
                  <span class="pre">Others</span>
                  <input id="hdr_other" class="num" value="0">
                </div>
              </div>

              <div class="ti-control">
                <span class="tag">Tax</span>
                <span id="t_tax" class="mono me-1 d-none"></span>
                <select id="hdr_tax_mode" class="mini-select">
                  <option value="cash_tax" selected>Cash</option>
                  <option value="digital_tax">Digital</option>
                  <option value="custom">Custom</option>
                  <option value="no_tax">No Tax</option>
                </select>
                <div class="mini-group percent">
                  <input id="hdr_taxp" class="num" value="0" title="Custom tax %">
                  <input type="hidden" id="t_grand" class="num" value="0" title="">
                  <span class="post">%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- RIGHT: Pending/Tables (top) -> Customer (bottom) -->
      <div class="col-lg-5 col-xl-4 order-lg-2 order-1">
        <!-- Tables (Dining) -->
        <div class="card mb-3" id="col_tables">
          <div class="card-body"><div id="tables" class="tables-grid"></div></div>
        </div>
        <!-- Pending (non-dining) -->
        <div class="card mb-3" id="col_pending" style="display:none;">
          <div class="card-header">Pending (non-dining)</div>
          <div class="card-body"><div id="pending_list" class="small"></div></div>
        </div>
        <!-- Customer (non-dining) -->
        <div class="card mb-3" id="card_customer" style="display:none;">
          <!-- <div class="card-header">Customer</div> -->
          <div class="card-body">
            <div class="form-row">
              <div class="col-md-6 mb-2">
                <label class="small mb-1">Name</label>
                <input id="cust_name" class="form-control form-control-sm" placeholder="Customer name">
              </div>
              <div class="col-md-6 mb-2">
                <label class="small mb-1">Phone</label>
                <input id="cust_phone" class="form-control form-control-sm" placeholder="03xxxxxxxxx">
              </div>
            </div>
            <div class="form-row">
              <div class="col-md-12 mb-2">
                <label class="small mb-1">Address</label>
                <textarea id="cust_addr" rows="2" class="form-control form-control-sm" placeholder="Address"></textarea>
              </div>
            </div>
          </div>
        </div>


        <!-- Payments & Actions -->
        <div class="card mb-3">
          <div class="card-body">

            <div class="row align-items-center mb-2">
              <div class="col-auto">
                <label for="cust_remarks" class="small mb-0">Remarks</label>
              </div>
              <div class="col">
                <input id="cust_remarks" class="form-control form-control-sm" placeholder="Optional Remarks / Complimentary Notes">
              </div>
            </div>

            <div id="splits"></div>
            <button class="btn btn-outline-secondary btn-sm mt-2" id="btn_add_split" type="button">+ Add Bank</button>
            <button class="btn btn-sm mt-2 btn-outline-danger" id="btn_cancel" type="button">Cancel Order</button>
          </div>
        </div>


      </div>
  </div>

    <!-- Fixed footer: actions -->
  <div class="pos-footer">
    <div class="container-fluid">
      <div class="d-flex align-items-center">
        <div class="mr-auto">
          <div>Grand Total: <span class="grand" id="ft_grand">0.00</span></div>
        </div>
        <div class="actions">
          <button class="btn btn-secondary btn-sm" id="btn_kot" type="button">KOT (Alt+k)</button>
          <button class="btn btn-secondary btn-sm" id="btn_save" type="button">Save (Alt+S)</button>
          <button class="btn btn-secondary btn-sm" id="btn_preprint_open" type="button">Pre-Print (Alt+P)</button>
          <button class="btn btn-primary btn-sm"  id="btn_settle" type="button">Paid (Ctrl + Enter)</button>
          <button class="btn btn-info btn-sm"   id="btn_room_open"  type="button">Shift to Room</button>
          <button class="btn btn-warning btn-sm" id="btn_credit_open" type="button">Shift to Credit</button>
          <button class="btn btn-danger btn-sm"  id="btn_board_open"  type="button">Attach to Board</button>
          <button class="btn btn-outline-success btn-sm" id="btn_compl"  type="button">Mark Complimentary</button>
        </div>
      </div>
    </div>
  </div>

</form>

<!-- Shift to Room Modal -->
<div class="modal fade" id="mdlRoom" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title">Shift to Room</h6>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">

      <label>Room #</label>
      <input type="text" class="form-control mb-2" id="rm_room_no" placeholder="e.g. 205">

      <!-- Lookup Info (auto-filled) -->
      <div id="rm_info" class="small text-muted border rounded p-2 mb-2" style="display:none;">
        <div><strong>Guest:</strong> <span id="rm_guest">—</span></div>
        <div><strong>Adults:</strong> <span id="rm_adults">0</span> &nbsp; — &nbsp; <strong>Kids:</strong> <span id="rm_kids">0</span></div>
        <div><strong>Booking Code:</strong> <span id="rm_found_code">—</span></div>
        <div><strong>Rooms:</strong> <span id="rm_rooms">—</span></div>
      </div>



        <label>Booking Code</label>
        <input type="number" class="form-control mb-2" id="rm_booking_code" placeholder="e.g. 12045">
        <label>Route To</label>
        <select class="form-control" id="rm_route_to">
          <option value="Guest" selected>Guest</option>
          <option value="Company">Company</option>
        </select>
        <label class="mt-2">Notes (optional)</label>
        <textarea class="form-control" id="rm_notes" rows="2" placeholder=""></textarea>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
        <button class="btn btn-info btn-sm" id="btn_room_submit">Shift</button>
      </div>
    </div>
  </div>
</div>


<!-- Pre-Print Options Modal -->
<div class="modal fade" id="mdlPrePrint" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header"><h6 class="modal-title">Pre-Print</h6>
        <button type="button" class="close" data-dismiss="modal">&times;</button></div>
      <div class="modal-body">
        <div class="form-group">
          <label class="d-block"><input type="radio" name="pp_size" value="80" checked> Thermal (80mm)</label>
          <label class="d-block"><input type="radio" name="pp_size" value="a5"> A5</label>
          <label class="d-block"><input type="radio" name="pp_size" value="a4"> A4</label>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
        <button class="btn btn-primary btn-sm" id="btn_preprint_go">Print</button>
      </div>
    </div>
  </div>
</div>

<!-- Shift to Credit Modal -->
<div class="modal fade" id="mdlCredit" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header"><h6 class="modal-title">Shift to Credit</h6>
        <button type="button" class="close" data-dismiss="modal">&times;</button></div>
      <div class="modal-body">
        <label>Customer t_id</label>
        <input type="number" class="form-control" id="cr_customer_tid" placeholder="e.g. 101">
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
        <button class="btn btn-warning btn-sm" id="btn_credit_submit">Shift</button>
      </div>
    </div>
  </div>
</div>

<!-- Attach to Board Modal -->
<div class="modal fade" id="mdlBoard" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header"><h6 class="modal-title">Attach to Board</h6>
        <button type="button" class="close" data-dismiss="modal">&times;</button></div>
      <div class="modal-body">
        <div class="form-group">
          <label class="mr-3"><input type="radio" name="board_mode" value="attach" checked> Attach to existing</label>
          <label><input type="radio" name="board_mode" value="new"> Create new</label>
        </div>
        <div id="board_attach">
          <label>Existing Board Invoice #</label>
          <input type="number" class="form-control" id="br_invoice_no" placeholder="e.g. 5001">
        </div>
        <div id="board_new" style="display:none;">
          <div class="form-row">
            <div class="col-md-6">
              <label>Customer t_id</label>
              <input type="number" class="form-control" id="br_customer_tid" placeholder="e.g. 101">
            </div>
            <div class="col-md-6">
              <label>Title</label>
              <input type="text" class="form-control" id="br_title" placeholder="Board Title">
            </div>
          </div>
          <label class="mt-2">Notes</label>
          <textarea class="form-control" id="br_notes" rows="2" placeholder="optional"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
        <button class="btn btn-danger btn-sm" id="btn_board_submit">Attach</button>
      </div>
    </div>
  </div>
</div>

<!-- Hotkeys Help Modal -->
<div class="modal fade" id="mdlHotkeys" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header py-2 px-3">
        <h6 class="modal-title">Shortcuts</h6>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body small">
        <div><strong>Order Type</strong></div>
        <ul class="mb-2">
          <li>DINING: <code>Alt + 1</code></li>
          <li>TAKEAWAY: <code>Alt + 2</code></li>
          <li>DELIVERY: <code>Alt + 3</code></li>
          <li>APP: <code>Alt + 4</code></li>
          <li>WEB: <code>Alt + 5</code></li>
          <li>DRIVE: <code>Alt + 6</code></li>
          <li>CREDIT: <code>Alt + 7</code></li>
          <li>ROOM: <code>Alt + 8</code></li>
          <li>BOARD: <code>Alt + 9</code></li>
        </ul>
        <div><strong>Actions</strong></div>
        <ul class="mb-2">
          <li>KOT (Delta): <code>Alt + K</code></li>
          <li>Save (Unsettled): <code>Alt + S</code></li>
          <li>Settle / Paid: <code>Ctrl + Enter</code></li>
          <li>Pre-Print: <code>Alt + P</code></li>
          <li>Shift to Room: <code>Alt + R</code></li>
          <li>Shift to Credit: <code>Alt + D</code></li>
          <li>Attach to Board: <code>Alt + O</code></li>
          <li>Add Bank Split: <code>Alt + A</code></li>
          <li>Cancel Order: <code>Alt + X</code></li>
        </ul>
        <div><strong>Navigation</strong></div>
        <ul class="mb-0">
          <li>Reset & focus origin: <code>Alt + Esc</code></li>
          <li>Search Order#: <code>F8</code></li>
          <li>Search Table: <code>F9</code></li>
          <li>Search Phone: <code>F4</code></li>
          <li>Focus Code: <code>F6</code></li>
          <li>Focus Name (Select2): <code>F7</code></li>
        </ul>
      </div>
      <div class="modal-footer py-2 px-3">
        <button class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


{% endblock %}

{% block javascripts %}


<script>
(function(){
  // ---- State (pure client) ----
  let ORDER_NO = null;
  let ORDER_TYPE = 'DINING';
  let EDIT_MODE = false;
  let SELECTED_TABLE = "";  // name

  let CART = [];            // [{product_id, name, qty, rate, discount, tax_percent, note}]
  let HEADER = { flat_discount:0, service_charges:0, other_charges:0, tax_mode:'auto', invoice_tax_percent:0, pay_mode:'cash' };
  const URL_LOOKUPCUST = "{% url 'hotel:api_resto_lookup_customer' %}";

  let TABLES_CACHE = [];    // last fetched tables (for search)
  let PENDING_CACHE = [];   // last fetched pending (for quick click)

  const API_SEARCH   = "{% url 'hotel:api_rs_product_search' %}";
  const API_BY_CODE  = "{% url 'hotel:api_rs_product_by_code' %}";
  const URL_SAVE     = "{% url 'hotel:api_resto_save_unsettled' %}";
  const URL_KOT      = "{% url 'hotel:api_resto_kot_from_payload' %}";
  const URL_PREPRINT = "{% url 'hotel:api_resto_preprint_from_payload' %}";
  const URL_SETTLE   = "{% url 'hotel:api_resto_settle_from_payload' %}";
  const URL_CREDIT   = "{% url 'hotel:api_resto_credit_from_payload' %}";
  const URL_BOARD    = "{% url 'hotel:api_resto_shift_board_from_payload' %}";
  const URL_INIT     = "{% url 'hotel:api_resto_init' %}";
  const URL_GETORD   = "{% url 'hotel:api_resto_get_order' 0 %}";
  const URL_ROOM     = "{% url 'hotel:api_resto_shift_room_from_payload' %}";
  const URL_CANCEL = "{% url 'hotel:api_resto_cancel_from_payload' %}";
  const URL_COMPL  = "{% url 'hotel:api_resto_complimentary_from_payload' %}";
  const URL_LOOKUP_ROOM    = "{% url 'hotel:api_room_lookup' %}";
  const URL_LOOKUP_BOOKING = "{% url 'hotel:api_booking_lookup' %}";


  const BANKS = {{ banks|safe }};
  const TAX_CASH = {{ tax_cash|safe }};
  const TAX_DIGITAL = {{ tax_digital|safe }};
  const FIXED_SERVICE_CHARGES_PER = {{ fixed_service_charges_per|safe }};
  const csrftoken = (document.querySelector('[name=csrfmiddlewaretoken]')||{}).value || '';
  $.ajaxSetup({ headers:{'X-CSRFToken': csrftoken} });

  $("#btn_help").on("click", ()=> showModalById('mdlHotkeys'));
  
  function enableNormalButtons(){
    const on = ["#btn_kot","#btn_save","#btn_preprint_open","#btn_settle","#btn_credit_open","#btn_board_open","#btn_room_open"];
    on.forEach(sel => $(sel).prop("disabled", false));
  }

  function enableOnlyRoomShift(){
    const all = ["#btn_kot","#btn_save","#btn_preprint_open","#btn_settle","#btn_credit_open","#btn_board_open","#btn_room_open"];
    all.forEach(sel => $(sel).prop("disabled", true));
    $("#btn_room_open").prop("disabled", false);
  }

  function toggleEditingFields(disabled){
    $("#code,#name,#qty,#rate,#note").prop("disabled", disabled);
    $("#hdr_discount,#hdr_service,#hdr_other,#hdr_tax_mode,#hdr_taxp").prop("disabled", disabled);
    $("#splits .bank-sel, #splits .split-amt, #btn_add_split").prop("disabled", disabled);
    $("#cust_name,#cust_phone,#cust_addr,#cust_remarks").prop("disabled", disabled);
    $("#grid button").prop("disabled", disabled);
  }


  function updateEditModeUI(){
    const dis = !!EDIT_MODE;
    // settle allowed in edit; baqi sab band
    $("#btn_kot,#btn_save,#btn_preprint_open,#btn_room_open,#btn_credit_open,#btn_board_open,#btn_cancel")
      .prop("disabled", dis)
      .toggleClass("disabled", dis);
    // splits add button bhi band in edit
    // $("#btn_add_split").prop("disabled", dis).toggleClass("disabled", dis);
  }

  function setOrderType(val){
    const $opt = $("input[name='order_type'][value='"+val+"']");
    if($opt.length){ $opt.prop('checked', true).trigger('change'); }
  }

  function toggleService(){
    const isCustom = ($("#hdr_tax_mode").val() === "custom");
    $("#hdr_taxp").prop("disabled", !isCustom).toggleClass("opacity-50", !isCustom);
  }

  // Enable/disable and set % based on mode
  function toggleTaxPercent(){
    const mode = $("#hdr_tax_mode").val();
    const $taxp = $("#hdr_taxp");

    let disable = true;     // default: locked
    let percent = 0;        // default: 0%

    if (mode === "cash_tax") {
      percent = parseFloat(TAX_CASH || 0);
    } else if (mode === "digital_tax") {
      percent = parseFloat(TAX_DIGITAL || 0);
    } else if (mode === "custom") {
      // editable: keep current input or HEADER value
      const cur = parseFloat($taxp.val() || HEADER.invoice_tax_percent || 0);
      percent = isFinite(cur) ? cur : 0;
      disable = false; // user can type
    } else if (mode === "no_tax") {
      percent = 0;
    }

    // sanitize
    percent = isFinite(percent) ? percent : 0;

    // reflect in UI
    $taxp
      .val(percent.toFixed(2))
      .prop("disabled", disable)
      .prop("readonly", disable)
      .toggleClass("opacity-50", disable);

    // update header model + recalc
    HEADER.tax_mode = mode;
    HEADER.invoice_tax_percent = percent;   // harmless for non-custom; used if custom
    recalc();
  }

  $("#hdr_tax_mode").off("change.taxui").on("change.taxui", toggleTaxPercent);
  toggleTaxPercent(); // initial


  function toast(m){ alert(m); }

  function setEditMode(flag){
    EDIT_MODE = !!flag;
    $("#lbl_mode").toggle(EDIT_MODE);   // badge show/hide
  }


  // DINING → table required guard
  function ensureDiningTableSelected(){
    if (ORDER_TYPE === 'DINING' && !SELECTED_TABLE){
      toast("Please Select Table for Dinning.");
      return false;
    }

    if (ORDER_TYPE != 'DINING'){
      const name  = ($("#cust_name").val()  || "").trim();
      const phone = ($("#cust_phone").val() || "").trim();
      if (!name){ toast("Please enter Customer Name."); return false; }
      if (!phone){ toast("Please enter Customer Phone."); return false; }
      return true;
    }
    return true;
  }


  // ---- Reset helpers ----
  function resetCartHeader(){
    CART = [];
    HEADER = { flat_discount:0, service_charges:0, other_charges:0, tax_mode:'auto', invoice_tax_percent:0, pay_mode:'cash' };
      $("#hdr_discount").val(0)
      $("#hdr_service").val(0)
      $("#hdr_other").val(0)
      $("#hdr_tax_mode")
      $("#hdr_taxp").val(0)
      toggleTaxPercent();
    renderGrid(); recalc();
    setEditMode(false);
    EDIT_MODE = false;
    updateEditModeUI();

  }

  function newDraftForTable(name){
    ORDER_NO = null;
    SELECTED_TABLE = name || "";
    resetCartHeader();
    clearCustomer();
    setEditMode(false);
    $("#splits").empty();
    addSplitRow("");
    EDIT_MODE = false;
    updateEditModeUI();

    $("#lbl_order_no").text("—");
    $("#hdr_service").val(FIXED_SERVICE_CHARGES_PER);
    HEADER.service_charges = FIXED_SERVICE_CHARGES_PER
    $("#tables .table-box").removeClass("active");
    $("#tables .table-box").filter(function(){ return $(this).text()===name; }).addClass("active");
    focus_to_origin();
    enableNormalButtons(); toggleEditingFields(false);
    $("#lbl_room_info").addClass("d-none"); $("#lbl_booking").text("—"); $("#lbl_guest").text("");

  }

  // ---- Tables & pending (pure GET; no reservation here) ----
  function refreshInit(){
    $.get(URL_INIT, {type: ORDER_TYPE}, (res)=>{
      if(!res.ok) return toast(res.error||'init failed');
      if (ORDER_TYPE === 'DINING'){
        TABLES_CACHE = res.data.tables||[];
        $("#col_tables").show(); $("#col_pending").hide();
        renderTables(TABLES_CACHE);
      } else {
        PENDING_CACHE = res.data.pending||[];
        $("#col_tables").hide(); $("#col_pending").show();
        renderPending(PENDING_CACHE);
      }
    });
  }

  function focus_to_origin(){
    $("#code").focus().select();
  }

  // --- Bootstrap modal helpers: BS5 or jQuery plugin both supported ---
  function showModalById(id){
    const el = document.getElementById(id);
    if (!el) return;
    if (window.bootstrap && bootstrap.Modal){           // Bootstrap 5+
      bootstrap.Modal.getOrCreateInstance(el, {backdrop:'static', keyboard:true}).show();
    } else if (window.jQuery && typeof jQuery(el).modal === 'function'){ // BS4 jQuery plugin
      jQuery(el).modal('show');
    } else {
      // very basic fallback
      el.style.display='block'; el.classList.add('show');
    }
  }

  function hideModalById(id){
    const el = document.getElementById(id);
    if (!el) return;
    if (window.bootstrap && bootstrap.Modal){
      bootstrap.Modal.getOrCreateInstance(el).hide();
    } else if (window.jQuery && typeof jQuery(el).modal === 'function'){
      jQuery(el).modal('hide');
    } else {
      el.classList.remove('show'); el.style.display='none';
    }
  }

  function renderTables(list){
    const box = $("#tables").empty();
    list.forEach(t=>{
      const div = $("<div>").addClass("table-box").text(t.name);
      if ((t.status||0) == 1) div.addClass("reserved");
      if (SELECTED_TABLE && SELECTED_TABLE===t.name) div.addClass("active");
      div.click(()=>{
        // If reserved and has invoice -> load existing order
        if ((t.status||0) == 1 && parseInt(t.invoice||0) > 0){
          loadOrder(parseInt(t.invoice));
        } else {
          // empty table -> start a new draft in UI only
          newDraftForTable(t.name);
        }
      });
      box.append(div);
    });
  }

  function renderPending(list){
    const box = $("#pending_list").empty();
    if (!list.length){ box.text("No pending."); return; }
    list.forEach(p=>{
      const label = `#${p.order_no} — ${p.customer_name||'-'} (${p.customer_phone||'-'}) — ${p.status}`;
      const a = $("<a href='#'>").text(label);
      a.click(()=> loadOrder(p.order_no));
      box.append($("<div>").append(a));
    });
  }

  // ---- Product Select2 ----
  const $name  = $("#name"), $code=$("#code"), $qty=$("#qty"), $rate=$("#rate"), $disc=$("#disc"), $taxp=$("#taxp"), $note=$("#note");
  $name.select2({
      theme:"bootstrap4", placeholder:"Search by name/code (F7)",
      ajax:{ url: API_SEARCH, dataType:'json', delay:200, data: p=>({q:p.term||""}), processResults:data=>data },
      minimumInputLength:1, width:"100%"
      }).on('select2:select', e=>{
      const d = e.params.data||{};
      $code.val(d.product_code||"");
      if(!parseFloat($rate.val()||'0')) $rate.val(d.l_sale_price||0);
      $qty.focus().select();
    });
  
  $code.on('keydown', function(ev){
    if(ev.key==='Enter'){
      ev.preventDefault();
      const v = ($code.val()||'').trim();
      if(!v){ $name.select2('open'); return; }
      $.get(API_BY_CODE, {code:v}, res=>{
        if(res && res.ok && res.found){
          const text = (res.name||"")+" ("+(res.product_code||"")+")";
          $name.empty().append(new Option(text, res.id, true, true)).trigger('change');
          $rate.val(res.l_sale_price||0); $qty.focus().select();
        } else { $name.select2('open'); }
      });
      }
    });

  // ---- CART helpers ----
  function lineBase(q,r,d){ return (parseFloat(q||0)*Math.max(0, parseFloat(r||0)-parseFloat(d||0))); }
  

  function recalc(){
    // safe number
    const num = (v) => {
      const n = parseFloat(v);
      return Number.isFinite(n) ? n : 0;
    };

    // 1) Subtotal + line-wise tax (fallback only)
    let subtotal = 0, lineTax = 0;
    CART.forEach(it => {
      const base = lineBase(num(it.qty), num(it.rate), num(it.discount));
      subtotal += base;
      lineTax += base * (num(it.tax_percent) / 100);
    });

    // 2) Pre-adjust (flat_discount -, service/other +)
    var pre_adj =
      subtotal - num(HEADER.flat_discount) +
      num(HEADER.other_charges);

    pre_adj = pre_adj + pre_adj * 0.01 * num(HEADER.service_charges)

    // 3) Tax by mode (UX rules)
    const mode = HEADER.tax_mode || "no_tax";
    const invPct = num(HEADER.invoice_tax_percent);
    let tax = 0;

    if (mode === "custom" || mode === "cash_tax" || mode === "digital_tax") {
      // invoice-level percent applies
      tax = pre_adj * (invPct / 100.0);
    } else if (mode === "no_tax") {
      tax = 0;
    } else {
      // safety fallback if any unexpected mode
      tax = lineTax;
    }

    // 4) Grand total
    const grand = pre_adj + tax;

    // 5) Paint UI
    $("#t_subtotal").text(subtotal.toFixed(2));
    $("#t_tax").text(tax.toFixed(2));
    $("#t_grand").text(grand.toFixed(2));
    $("#ft_grand").text(grand.toFixed(2));
  }

  function renderGrid(){
    const tb = $("#grid tbody").empty();
    CART.forEach((it, idx)=>{
      const base = lineBase(it.qty,it.rate,it.discount).toFixed(2);
      const tr = $("<tr>");
      tr.append($("<td>").text(it.name||it.product_code||it.product_id));
      tr.append($("<td class='text-right'>").text(it.qty));
      tr.append($("<td class='text-right'>").text(it.rate));
      tr.append($("<td class='text-right'>").text(it.discount));
      tr.append($("<td class='text-right'>").text(it.tax_percent));
      tr.append($("<td class='text-right'>").text(base));
      const del = $("<button class='btn btn-danger btn-xs'>").text("Del").click(()=>{ CART.splice(idx,1); renderGrid(); recalc(); });
      tr.append($("<td>").append(del));
      tb.append(tr);
    });
  }

  function addToCartFromInputs(){
    const pid = $name.val(); 
    if (!pid) { toast("Select product"); return; }

    const qty  = parseFloat($qty.val()  || 1);
    const rate = parseFloat($rate.val() || 0);
    const nm   = $name.find(":selected").text();
    const note = $note.val() || "";

    // find same item with same rate (float-safe compare)
    const ix = CART.findIndex(it => String(it.product_id) === String(pid) &&
                                    Math.abs(parseFloat(it.rate || 0) - rate) < 1e-9);

    if (ix > -1) {
      // merge: increase qty (and optionally append note)
      CART[ix].qty = parseFloat(CART[ix].qty || 0) + qty;
      if (note) {
        CART[ix].note = CART[ix].note ? (CART[ix].note + " | " + note) : note;
      }
    } else {
      // add new line
      CART.push({
        product_id: pid,
        name: nm,
        qty: qty,
        rate: rate,
        discount: 0,           // per-line disc/tax off; use invoice-level tax
        tax_percent: 0,
        note: note
      });
    }

    renderGrid(); 
    recalc();

    // clear inputs
    $rate.val('');
    $code.val('');
    $name.val(null).trigger('change');
    $note.val('');
    $code.focus();
  }


  $note.on('keydown', e=>{ if(e.key==='Enter'){ e.preventDefault(); addToCartFromInputs(); } });

  // Header inputs (no AJAX; only client)
  $("#hdr_discount,#hdr_service,#hdr_other,#hdr_tax_mode,#hdr_taxp").on("change input", function(){
    HEADER.flat_discount = parseFloat($("#hdr_discount").val()||0);
    HEADER.service_charges = parseFloat($("#hdr_service").val()||0);
    HEADER.other_charges = parseFloat($("#hdr_other").val()||0);
    HEADER.tax_mode = $("#hdr_tax_mode").val();
    HEADER.invoice_tax_percent = parseFloat($("#hdr_taxp").val()||0);
    recalc();
  });


  $("input[name='order_type']").off('change').on('change', function(){
    ORDER_TYPE = this.value;
    newDraftForTable("");
    // NEW: non-dining => service=0
    if (ORDER_TYPE !== "DINING"){
      $("#hdr_service").val(0);
      HEADER.service_charges = 0;
      recalc();
    }
    $("#col_tables").toggle(ORDER_TYPE === "DINING");
    $("#col_pending").toggle(ORDER_TYPE !== "DINING");
    $("#card_customer").toggle(ORDER_TYPE !== "DINING");
    setEditMode(false);
    refreshInit();
    enableNormalButtons(); toggleEditingFields(false);
    $("#lbl_room_info").addClass("d-none");
  });


  // ---- Search boxes wiring ----
  $("#inp_search_order").on("keydown", function(e){
    if(e.key==="Enter"){
      e.preventDefault();
      const n = parseInt(($(this).val()||"").trim(), 10);
      if (n>0) loadOrder(n);
    }
  });

  $("#inp_search_table").on("keydown", function(e){
    if(e.key==="Enter"){
      e.preventDefault();
      const q = ($(this).val()||"").trim().toLowerCase();
      if(!q) return;
      // Find exact or partial in TABLES_CACHE
      let t = TABLES_CACHE.find(x => (x.name||"").toLowerCase()===q);
      if(!t) t = TABLES_CACHE.find(x => (x.name||"").toLowerCase().indexOf(q)>=0);
      if(!t) { toast("Table not found."); return; }
      if ((t.status||0) == 1 && parseInt(t.invoice||0) > 0){
        loadOrder(parseInt(t.invoice));
        $code.focus().select()
      } else {
        // ensure DINING mode on table search
        ORDER_TYPE = 'DINING';
        $("input[name='order_type'][value='DINING']").prop('checked', true);
        $("#col_tables").show(); $("#col_pending").hide();
        newDraftForTable(t.name);
        $code.focus().select()
        $("#inp_search_table").val('')
      }
    }
  });

  // ---- Pending loader / Order loader ----
  function loadOrder(no){
    $.get(URL_GETORD.replace("/0/","/"+no+"/"), res=>{
      if(!res.ok) return toast(res.error||'load failed');
      ORDER_NO = res.data.header.order_no;
      ORDER_TYPE = res.data.header.order_type;
      setEditMode( (res.data.header.status||"").toLowerCase() === "settled" );

      // ---- Load bank splits if settled ----
      const isSettled = (res.data.header.status||"").toLowerCase() === "settled";
      if (isSettled){
        setSplits(res.data.splits || []);
      } else {
        $("#splits").empty();
        addSplitRow("");
      }

      $("input[name='order_type'][value='"+ORDER_TYPE+"']").prop('checked', true);
      $("#lbl_order_no").text(ORDER_NO);
      SELECTED_TABLE = res.data.header.table_id || "";

      // ---- Room / Booking meta handling for shifted orders ----
      const room = res.data.room_info || null;
      const hdr  = res.data.header || {};
      if ((hdr.status||"").toLowerCase()==="shifted" && (hdr.shift_to||"").toUpperCase()==="ROOM" && room){
        // UI badge (top-right CURRENT)
        $("#lbl_room_info").removeClass("d-none");
        $("#lbl_booking").text("#"+(room.booking_code||hdr.link_ref||"-"));
        const gtxt = (room.guest_name||"-")+" (A:"+ (room.adults||0) +" / K:"+ (room.kids||0) +") ["+(room.status||"-")+"]";
        $("#lbl_guest").text(gtxt);

        // Modal prefill
        $("#rm_booking_code").val(room.booking_code||"");

        if (room.can_edit_room){
          // allow editing items but ONLY allow re-shift to room (folio will update)
          enableOnlyRoomShift();
          toggleEditingFields(false);
        }else{
          // guest checked-in nahi → editing NA; saari actions off
          $("#lbl_room_info").removeClass("d-none");
          enableOnlyRoomShift();            // keep consistent UX, but disable Room too:
          $("#btn_room_open").prop("disabled", true);
          toggleEditingFields(true);
          toast("Guest is not Checked-In anymore; this invoice is read-only.");
        }
      }else{
        // normal (non-room / not shifted)
        enableNormalButtons();
        toggleEditingFields(false);
        $("#lbl_room_info").addClass("d-none");
      }
      flat_discount = parseFloat(res.data.header.flat_discount||0);
      service_charges = parseFloat(res.data.header.service_charges||0);
      other_charges = parseFloat(res.data.header.other_charges||0);
      tax_mode = res.data.header.tax_mode || 'cash_tax';
      invoice_tax_percent = parseFloat(res.data.header.invoice_tax_percent||0);

      HEADER.flat_discount = flat_discount;
      HEADER.service_charges = service_charges;
      HEADER.other_charges = other_charges;
      HEADER.tax_mode = tax_mode;
      HEADER.invoice_tax_percent = invoice_tax_percent;


      // customer
      fillCustomer(res.data.header || {});
      // items
      CART = (res.data.items||[]).map(x=>({
        product_id: x.product_id, name: x.product__name, qty: parseFloat(x.qty||0), rate: parseFloat(x.rate||0),
        discount: parseFloat(x.discount||0), tax_percent: parseFloat(x.tax_percent||0), note: x.note||""
      }));

      $("#hdr_discount").val(flat_discount)
      $("#hdr_service").val(service_charges)
      $("#hdr_other").val(other_charges)
      $("#hdr_tax_mode").val(tax_mode)
      $("#hdr_taxp").val(invoice_tax_percent)

      $("#card_customer").toggle(ORDER_TYPE!=="DINING");
      $("#col_tables").toggle(ORDER_TYPE==="DINING");
      $("#col_pending").toggle(ORDER_TYPE!=="DINING");
      renderGrid(); recalc(); refreshInit(); focus_to_origin();
      updateEditModeUI();
    });
  }

  function rd2(x){ return Math.round((parseFloat(x||0)+Number.EPSILON)*100)/100; }
  
  function readGrand(){ return rd2(($("#t_grand").text()||"0").toString().replace(/,/g,'')); }
  
  function splitsSum(){ let s=0; $(".split-row .split-amt").each(function(){ s+=rd2($(this).val()); }); return rd2(s); }

  // ---- Splits ----
  function addSplitRow(presetAmt, presetBankTid){
    const row = $(`
      <div class="form-row align-items-center split-row mb-1">
        <div class="col">
          <select class="form-control form-control-sm bank-sel" required>
          </select>
        </div>
        <div class="col-md-3">
          <input class="form-control form-control-sm split-amt" placeholder="Amount" value="${presetAmt||''}">
        </div>
        <div class="col-auto">
          <button type="button" class="btn btn-link text-danger btn-sm del-split" title="Remove">&times;</button>
        </div>
      </div>`);
    const sel = row.find(".bank-sel");
    (BANKS||[]).forEach(b => sel.append($("<option>").val(b.t_id).text(b.name)));
    if (presetBankTid){ sel.val(String(presetBankTid)); }   // << pre-select support
    row.find(".del-split").on("click", ()=> row.remove());
    $("#splits").append(row);
  }


  function setSplits(arr){
    $("#splits").empty();
    if (!arr || !arr.length){
      addSplitRow("");           // empty one row
      return;
    }
    arr.forEach(s=>{
      const amt  = (s.amount!=null) ? s.amount : "";
      const bank = (s.bank_tid!=null) ? s.bank_tid : null;
      addSplitRow(amt, bank);
    });
  }


  function payloadSplits(){
    const S=[];
    $(".split-row").each(function(){
      const bank_tid = parseInt($(this).find(".bank-sel").val()||0,10);
      const amount   = rd2($(this).find(".split-amt").val());
      if (bank_tid && amount>0){ S.push({ bank_tid, amount }); }
    });
    return S;
  }

  // ---- Build payload ----
  function buildPayload(){
    const hdr = {...HEADER};
    if (ORDER_TYPE !== 'DINING'){
      Object.assign(hdr, collectCustomer());
    }
    hdr.remarks = ($("#cust_remarks").val()||"").trim();
    return {
      mode: EDIT_MODE ? "edit" : "new",
      order_no: ORDER_NO || null,
      order_type: ORDER_TYPE,
      edit_order_no: ORDER_NO || null,
      table_name: (ORDER_TYPE==='DINING') ? (SELECTED_TABLE||"") : "",
      header: hdr,
      items: CART
    };
  }

  function clearCustomer(){
    $("#cust_name,#cust_phone,#cust_addr,#cust_remarks").val("");
  }

  function fillCustomer(hdr){
    $("#cust_name").val(hdr.customer_name || "");
    $("#cust_phone").val(hdr.customer_phone || "");
    $("#cust_addr").val(hdr.customer_address || "");
    $("#cust_remarks").val(hdr.customer_remarks || "");
  }

  function collectCustomer(){
    return {
      customer_name: ($("#cust_name").val()||"").trim(),
      customer_phone: ($("#cust_phone").val()||"").trim(),
      customer_address: ($("#cust_addr").val()||"").trim(),
      customer_remarks: ($("#cust_remarks").val()||"").trim(),
    };
  }

  function lookupByPhone(ph){
    const phone = (ph||"").trim();
    if(!phone) return;
    $.get(URL_LOOKUPCUST, {phone: phone}, res=>{
      if(res.ok && res.data && res.data.found){
        if(!$("#cust_name").val()) $("#cust_name").val(res.data.name||"");
        if(!$("#cust_addr").val()) $("#cust_addr").val(res.data.address||"");
      }
    });
  }

  $("#inp_search_phone").on("keydown", function(e){
    if(e.key==="Enter"){ e.preventDefault(); lookupByPhone($(this).val()); }
  });

  $("#cust_phone").on("keydown", function(e){
    if(e.key==="Enter"){ e.preventDefault(); lookupByPhone($(this).val()); $("#cust_name").focus().select(); }
  }).on("blur", function(){ lookupByPhone($(this).val()); });

  // Hide Disc/Tax inputs in Fast Entry block
  $("#disc").closest(".col-md-1").hide();
  $("#taxp").closest(".col-md-1").hide();

  // Name select2 already focuses Qty; add Qty/Rate Enter flow
  $qty.on('keydown', function(e){
    if(e.key==='Enter'){ e.preventDefault(); if(!parseFloat($qty.val())) $qty.val(1); $rate.focus().select(); }
  });

  $rate.on('keydown', function(e){
    if(e.key==='Enter'){ e.preventDefault(); addToCartFromInputs(); }//$note.focus().select(); }
  });

  $(document).on('keydown', function(e){
    // --- Ctrl + Enter => Settle / Paid
    if(e.ctrlKey && !e.altKey && e.key === 'Enter'){
      $('#btn_settle').click(); e.preventDefault(); return;
    }

    // --- Alt combos
    if(e.altKey && !e.ctrlKey){
      const k = (e.key || '').toLowerCase();

      // Order types
      if(k==='1') { setOrderType('DINING');   e.preventDefault(); return; }
      if(k==='2') { setOrderType('TAKEAWAY'); e.preventDefault(); return; }
      if(k==='3') { setOrderType('DELIVERY'); e.preventDefault(); return; }
      if(k==='4') { setOrderType('APP');      e.preventDefault(); return; }
      if(k==='5') { setOrderType('WEB');      e.preventDefault(); return; }
      if(k==='6') { setOrderType('DRIVE');    e.preventDefault(); return; }
      if(k==='7') { setOrderType('CREDIT');   e.preventDefault(); return; }
      if(k==='8') { setOrderType('ROOM');     e.preventDefault(); return; }
      if(k==='9') { setOrderType('BOARD');    e.preventDefault(); return; }

      // Actions
      if(k==='k'){ $('#btn_kot').click();             e.preventDefault(); return; }
      if(k==='s'){ $('#btn_save').click();            e.preventDefault(); return; }
      if(k==='p'){ $('#btn_preprint_open').click();   e.preventDefault(); return; }
      if(k==='r'){ $('#btn_room_open').click();       e.preventDefault(); return; }
      if(k==='d'){ $('#btn_credit_open').click();     e.preventDefault(); return; }
      if(k==='o'){ $('#btn_board_open').click();      e.preventDefault(); return; }
      if(k==='a'){ $('#btn_add_split').click();       e.preventDefault(); return; }
      if(k==='x'){ $('#btn_cancel').click();          e.preventDefault(); return; } // aapka cancel button id
      if(e.key === 'Escape'){
        // Alt + Esc => full reset to origin
        ORDER_NO = null; SELECTED_TABLE = "";
        EDIT_MODE = false; updateEditModeUI();
        resetCartHeader(); clearCustomer();
        $("#splits").empty(); addSplitRow("");
        refreshInit(); focus_to_origin();
        e.preventDefault(); return;
      }
    }

    // Quick focus helpers (optional)
    if(!e.altKey && !e.ctrlKey){
      if(e.key === 'F8'){ $('#inp_search_order').focus().select(); e.preventDefault(); }
      if(e.key === 'F9'){ $('#inp_search_table').focus().select(); e.preventDefault(); }
      if(e.key === 'F4'){ $('#inp_search_phone').focus().select(); e.preventDefault(); }
      if(e.key === 'F6'){ $('#code').focus().select(); e.preventDefault(); }
      if(e.key === 'F7'){ $('#name').select2('open'); e.preventDefault(); }
    }
  });




  // ---- Action buttons (all refresh tables after success) ----
  $("#btn_save").click(function(){
    if(!CART.length) return toast("No items.");
    if(!ensureDiningTableSelected()) return;
    const payload = buildPayload();
    $.ajax({url: URL_SAVE, method:"POST", contentType:"application/json", data: JSON.stringify(payload)})
      .done(res=>{
        if(res.ok){
          ORDER_NO=null; $("#lbl_order_no").text("—");
          resetCartHeader(); SELECTED_TABLE=""; refreshInit();
          setEditMode(false);
          EDIT_MODE = false; updateEditModeUI();

          if (ORDER_TYPE !== "DINING"){
            $("#inp_search_order").val("");
            clearCustomer();
          }
          $("#inp_search_table").focus().select()
        } else toast(res.error);
      });
  });

  // Open size modal
  $("#btn_preprint_open").off('click').on('click', function(){
    if(!CART.length){ toast("No items."); return; }
    if(!ensureDiningTableSelected()) return;
    showModalById('mdlPrePrint');
  });

  // Submit preprint with selected size
  $("#btn_preprint_go").off('click').on('click', function(){
    const size = ($("input[name='pp_size']:checked").val() || "80").toLowerCase();
    const payload = buildPayload();
    payload.print = { size: size };

    $.ajax({url: URL_PREPRINT, method:"POST", contentType:"application/json", data: JSON.stringify(payload)})
      .done(res=>{
        if(res.ok){
          hideModalById('mdlPrePrint');
          ORDER_NO = res.data.order_no; $("#lbl_order_no").text(ORDER_NO);
          refreshInit();
          window.open(`/hotel/resto/${ORDER_NO}/preprint/html/${size}?autoprint=1&close=afterprint`, "_blank");
          // window.open(res.data.url, "_blank");
        } else toast(res.error||'Pre-Print failed');
      });
  });


  $("#btn_kot").click(function(){
    if(!CART.length) return toast("No items.");
    if(!ensureDiningTableSelected()) return;
    const payload = buildPayload();
    $.ajax({url: URL_KOT, method:"POST", contentType:"application/json", data: JSON.stringify(payload)})
      .done(res=>{
        if(res.ok){
          ORDER_NO = res.data.order_no; $("#lbl_order_no").text(ORDER_NO);
          refreshInit();     // << update tables

          // const base = $("#btn_kot").data("kotBase"); // optional (see template trick below)
          const url  = ("/hotel/restaurant/order/") + ORDER_NO + "/kot/html/?autoprint=1&close=afterprint&mode=delta&mark=1";
          window.open(url, "_blank");
          // window.open(res.data.url, "_blank");
        } else toast(res.error);
      });
  });

  // Add-bank button: prefills remaining amount
  $("#btn_add_split").off("click").on("click", function(){
    const grand = readGrand();
    const current = splitsSum();
    const left = rd2(grand - current);
    addSplitRow(left>0 ? left.toFixed(2) : "");
  });

  // --- Settle / Paid (STRICT validation) ---
  $("#btn_settle").off("click").on("click", function(){
    if(!CART.length){ toast("No items."); return; }
    if(!ensureDiningTableSelected()) return;

    const grand = readGrand();
    if(grand<=0){ toast("Grand Total is 0."); return; }

    const splits = payloadSplits();

    if (splits.length===0){
      toast("Provide at least one bank split.");
      return;
    }
    // check each split has bank + amount > 0
    for (const s of splits){
      if(!(s.bank_tid>0)){ toast("Select bank for each split."); return; }
      if(!(s.amount>0)){ toast("Split amount must be > 0."); return; }
    }
    const paid = rd2(splits.reduce((a,b)=>a+rd2(b.amount),0));
    if (rd2(paid) !== rd2(grand)){
      toast(`Split total ${paid.toFixed(2)} must equal Grand Total ${grand.toFixed(2)}.`);
      return;
    }

    const payload = buildPayload();
    payload.splits = splits; // only banks

    $.ajax({url: URL_SETTLE, method:"POST", contentType:"application/json", data: JSON.stringify(payload)})
      .done(res=>{
        if(res.ok){
          alert(res.data.message);
          ORDER_NO=null; $("#lbl_order_no").text("—");
          resetCartHeader(); SELECTED_TABLE=""; refreshInit();
          $("#splits").empty(); // clear splits
          addSplitRow("");      // one fresh empty row
          setEditMode(false);
          EDIT_MODE = false; updateEditModeUI();

        } else {
          toast(res.error||"Settle failed");
        }
      });
  });


  $("#btn_credit_submit").click(function(){
    if(!CART.length){ toast("No items."); return; }
    const cust = parseInt($("#cr_customer_tid").val()||0);
    if(!cust){ toast("Customer t_id required"); return; }
    const payload = buildPayload(); payload.credit = { customer_tid: cust };
    $.ajax({url: URL_CREDIT, method:"POST", contentType:"application/json", data: JSON.stringify(payload)})
      .done(res=>{
        if(res.ok){
          $("#mdlCredit").modal('hide');
          alert(res.data.message);
          ORDER_NO=null; $("#lbl_order_no").text("—");
          resetCartHeader(); SELECTED_TABLE=""; refreshInit();
          setEditMode(false);
          EDIT_MODE = false; updateEditModeUI();

        } else toast(res.error);
      });
  });


  $("#btn_board_submit").click(function(){
    if(!CART.length){ toast("No items."); return; }
    const mode = $("input[name='board_mode']:checked").val();
    const payload = buildPayload();
    if(mode === 'attach'){
      const inv = parseInt($("#br_invoice_no").val()||0);
      if(!inv){ toast("Existing Board invoice # required"); return; }
      payload.board = { mode:"attach", invoice_no: inv };
    } else {
      const tid = parseInt($("#br_customer_tid").val()||0);
      if(!tid){ toast("Customer t_id required"); return; }
      payload.board = { mode:"new", customer_tid: tid, title: $("#br_title").val()||"", notes: $("#br_notes").val()||"" };
    }
    $.ajax({url: URL_BOARD, method:"POST", contentType:"application/json", data: JSON.stringify(payload)})
      .done(res=>{
        if(res.ok){
          $("#mdlBoard").modal('hide');
          alert(res.data.message);
          ORDER_NO=null; $("#lbl_order_no").text("—");
          resetCartHeader(); SELECTED_TABLE=""; refreshInit();
          setEditMode(false);
          EDIT_MODE = false; updateEditModeUI();

        } else toast(res.error);
      });
  });

  $("#btn_cancel").off("click").on("click", function(){
    if(!ORDER_NO){ return toast("Load an order first."); }
    const r = ($("#cust_remarks").val()||"").trim();
    if(!r){
      toast("Remarks required to cancel.");
      $('#cust_remarks').focus().select();
      return  
    }
    if(!confirm("Mark this order as CANCELLED?")) return;

    const payload = buildPayload();  // already carries header.remarks
    $.ajax({url: URL_CANCEL, method:"POST", contentType:"application/json", data: JSON.stringify(payload)})
      .done(res=>{
        if(res.ok){
          alert(res.data.message||"Cancelled.");
          ORDER_NO=null; $("#lbl_order_no").text("—");
          resetCartHeader(); SELECTED_TABLE=""; refreshInit(); clearCustomer(); $("#inp_search_order").val("");
          focus_to_origin();
        } else toast(res.error||"Cancel failed");
      });
  });

  $("#btn_compl").off("click").on("click", function(){
    if(!ORDER_NO){ return toast("Load an order first."); }
    const r = ($("#cust_remarks").val()||"").trim();
    if(!r){ return toast("Remarks required for complimentary."); }
    if(!confirm("Mark this order as COMPLIMENTARY (free)?")) return;

    const payload = buildPayload();
    $.ajax({url: URL_COMPL, method:"POST", contentType:"application/json", data: JSON.stringify(payload)})
      .done(res=>{
        if(res.ok){
          alert(res.data.message||"Marked complimentary.");
          ORDER_NO=null; $("#lbl_order_no").text("—");
          resetCartHeader(); SELECTED_TABLE=""; refreshInit(); clearCustomer(); $("#inp_search_order").val("");
          focus_to_origin();
        } else toast(res.error||"Complimentary failed");
      });
  });


  function fillRoomBookingInfo(d){
    if(!d || !d.ok){ $("#rm_info").hide(); return; }
    const x = d.data || {};
    $("#rm_guest").text(x.guest_name || "—");
    $("#rm_adults").text(x.adults ?? 0);
    $("#rm_kids").text(x.kids ?? 0);
    $("#rm_found_code").text(x.booking_code || "—");
    $("#rm_rooms").text((x.rooms || []).join(", ") || "—");
    if(x.booking_code){ $("#rm_booking_code").val(x.booking_code); }
    $("#rm_info").show();
  }

  // Open room modal
  $("#btn_room_open").off("click").on("click", function(){
    if(!CART.length){ toast("No items."); return; }
    showModalById('mdlRoom');
  });


  // Room # → Enter to lookup
  $("#rm_room_no").off("keydown").on("keydown", function(e){
    if(e.key === "Enter"){
      e.preventDefault();
      const room = ($(this).val()||"").trim();
      if(!room){ toast("Enter Room #"); return; }
      $.get(URL_LOOKUP_ROOM, {room_no: room}, function(res){
        if(!res.ok){ toast(res.error || "Room not found"); $("#rm_info").hide(); return; }
        fillRoomBookingInfo(res);
        $("#rm_booking_code").focus().select();
      });
    }
  });

  // Booking Code → Enter to lookup
  $("#rm_booking_code").off("keydown").on("keydown", function(e){
    if(e.key === "Enter"){
      e.preventDefault();
      const code = parseInt(($(this).val()||"0").trim(), 10);
      if(!(code>0)){ toast("Enter valid Booking Code"); return; }
      $.get(URL_LOOKUP_BOOKING, {code: code}, function(res){
        if(!res.ok){ toast(res.error || "Booking not found"); $("#rm_info").hide(); return; }
        fillRoomBookingInfo(res);
        $("#rm_route_to").focus();
      });
    }
  });




  // Submit shift to room
  $("#btn_room_submit").off("click").on("click", function(){
    const code = parseInt($("#rm_booking_code").val()||0, 10);
    if(!(code>0)){ toast("Booking Code required"); return; }

    const payload = buildPayload();
    payload.room = {
      booking_code: code,
      route_to: ($("#rm_route_to").val()||"Guest"),
      notes: ($("#rm_notes").val()||"")
    };
    let EDIT_MODE = window.EDIT_MODE || false;

    $.ajax({url: URL_ROOM, method:"POST", contentType:"application/json", data: JSON.stringify(payload)})
      .done(res=>{
        if(res.ok){
          hideModalById('mdlRoom');
          alert(res.data.message);
          ORDER_NO=null; $("#lbl_order_no").text("—");
          resetCartHeader(); SELECTED_TABLE=""; refreshInit();
          setEditMode(false);
          EDIT_MODE = false; updateEditModeUI();

        } else {
          toast(res.error||"Shift to Room failed");
        }
      });
  });

  $("#btn_credit_open").off('click').on('click', function(){
    if(!CART.length){ toast("No items."); return; }
    showModalById('mdlCredit');
  });

  $("#btn_credit_submit").off('click').on('click', function(){
    const cust = parseInt($("#cr_customer_tid").val()||0);
    if(!cust){ toast("Customer t_id required"); return; }
    const payload = buildPayload(); payload.credit = { customer_tid: cust };
    $.ajax({url: URL_CREDIT, method:"POST", contentType:"application/json", data: JSON.stringify(payload)})
      .done(res=>{
        if(res.ok){
          hideModalById('mdlCredit');
          alert(res.data.message);
          ORDER_NO=null; $("#lbl_order_no").text("—");
          resetCartHeader(); SELECTED_TABLE=""; refreshInit();
          setEditMode(false);
          EDIT_MODE = false; updateEditModeUI();

        } else toast(res.error||'Credit failed');
      });
  });

  $("#btn_board_open").off('click').on('click', function(){
    if(!CART.length){ toast("No items."); return; }
    showModalById('mdlBoard');
  });

  $("input[name='board_mode']").off('change').on('change', function(){
    const m = $(this).val();
    $("#board_attach").toggle(m==='attach');
    $("#board_new").toggle(m==='new');
  });

  $("#btn_board_submit").off('click').on('click', function(){
    const mode = $("input[name='board_mode']:checked").val();
    const payload = buildPayload();
    if(mode === 'attach'){
      const inv = parseInt($("#br_invoice_no").val()||0);
      if(!inv){ toast("Existing Board invoice # required"); return; }
      payload.board = { mode:"attach", invoice_no: inv };
    } else {
      const tid = parseInt($("#br_customer_tid").val()||0);
      if(!tid){ toast("Customer t_id required"); return; }
      payload.board = { mode:"new", customer_tid: tid, title: $("#br_title").val()||"", notes: $("#br_notes").val()||"" };
    }
    $.ajax({url: URL_BOARD, method:"POST", contentType:"application/json", data: JSON.stringify(payload)})
      .done(res=>{
        if(res.ok){
          hideModalById('mdlBoard');
          alert(res.data.message);
          ORDER_NO=null; $("#lbl_order_no").text("—");
          resetCartHeader(); SELECTED_TABLE=""; refreshInit();
          setEditMode(false);
          EDIT_MODE = false; updateEditModeUI();

        } else toast(res.error||'Board attach failed');
      });
  });

  // bootstrap
  refreshInit(); addSplitRow();
  setEditMode(false);

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