{# templates/sales/ticket_invoice.html #}
{% extends "pos/base.html" %}
{% load static %}
{% block title %}Sale / Refund Invoice{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css">
<style>
:root {
  --ti-blue:#01478f; --ti-blue-light:#1565c0; --ti-gold:#c69c00;
  --ti-gold-bg:#fdf6d8; --ti-green:#28a745; --ti-red:#dc3545;
  --ti-border:#bfc5ce; --ti-header-bg:#e8ecf1; --ti-panel-bg:#f7f8fa;
  --ti-light:#f0f1f3; --ti-input-h:26px; --ti-font:0.75rem;
  --ti-font-sm:0.68rem; --ti-label:0.62rem;
}
*{box-sizing:border-box}
.ti-page{height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--ti-light);padding:4px 6px;overflow:hidden;font-size:var(--ti-font)}
.ti-page input,.ti-page select{height:var(--ti-input-h);font-size:var(--ti-font);padding:1px 5px;border:1px solid var(--ti-border);border-radius:2px;background:#fff;outline:none}
.ti-page input:focus,.ti-page select:focus{border-color:var(--ti-blue);box-shadow:0 0 0 1px rgba(1,71,143,.15)}
.ti-page label{font-size:var(--ti-label);font-weight:600;color:#555;text-transform:uppercase;margin:0;white-space:nowrap}
.ti-readonly{background:var(--ti-gold-bg)!important;font-weight:700;color:#333}
/* TITLE */
.ti-titlebar{background:linear-gradient(135deg,var(--ti-blue),var(--ti-blue-light));color:#fff;padding:4px 10px;border-radius:3px 3px 0 0;font-weight:700;font-size:.82rem;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.ti-status{padding:2px 10px;border-radius:3px;font-size:.72rem;font-weight:700}
.ti-status-issued{background:var(--ti-green);color:#fff}
.ti-status-refunded{background:var(--ti-red);color:#fff}
/* HEADER */
.ti-header{background:var(--ti-header-bg);border:1px solid var(--ti-border);border-top:none;padding:5px 8px;flex-shrink:0}
.ti-header-row{display:flex;gap:6px;align-items:flex-end;margin-bottom:4px}
.ti-header-row:last-child{margin-bottom:0}
.ti-field{display:flex;flex-direction:column}
.ti-party-row{display:flex;gap:8px;align-items:flex-end;background:#fff;border:1px solid #dde;border-radius:2px;padding:4px 6px;margin-top:3px}
.ti-party-box{display:flex;gap:4px;align-items:center}
.ti-party-label{font-size:var(--ti-label);font-weight:700;color:var(--ti-blue);background:#e3edf7;padding:2px 6px;border-radius:2px;white-space:nowrap}
.ti-sale-type{display:flex;border-radius:3px;overflow:hidden;border:1px solid var(--ti-border)}
.ti-sale-type label{padding:3px 14px;font-size:var(--ti-font-sm);font-weight:700;cursor:pointer;background:#fff;color:#666;text-transform:none;margin:0;transition:all .15s;user-select:none}
.ti-sale-type input[type="radio"]{display:none}
.ti-sale-type input[type="radio"]:checked+label{background:var(--ti-blue);color:#fff}
/* SECTION TOGGLES */
.ti-sec-toggles{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid #d0d8e0;border-radius:2px;padding:4px 10px;margin-top:3px}
.ti-sec-toggle{display:flex;align-items:center;gap:5px;cursor:pointer;font-size:var(--ti-font);font-weight:700;color:#555}
.ti-sec-toggle input[type="checkbox"]{width:14px;height:14px;cursor:pointer}
.ti-sec-toggle.on{color:var(--ti-blue)}
/* BODY */
.ti-body{flex:1;display:flex;gap:4px;min-height:0;overflow:hidden;margin-top:4px}
.ti-body-left{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.ti-body-right{flex:0 0 170px;display:flex;flex-direction:column;gap:4px}
/* FLIGHT */
.ti-flight-row{background:#fff;border:1px solid var(--ti-border);border-radius:2px;padding:4px 6px;flex-shrink:0}
.ti-flight-fields{display:flex;gap:5px;flex-wrap:wrap;align-items:flex-end}
.ti-flight-fields .ti-field input,.ti-flight-fields .ti-field select{width:100%}
.ti-flight-row-2{display:flex;gap:5px;flex-wrap:wrap;align-items:flex-end;margin-top:4px;padding-top:4px;border-top:1px solid #eee}
.ti-pax-row{background:#fff;border:1px solid var(--ti-border);border-top:none;border-radius:0 0 2px 2px;padding:4px 6px;display:flex;gap:6px;align-items:flex-end;flex-shrink:0}
/* PANELS */
.ti-calc-panels{display:flex;gap:4px;margin-top:4px;flex-shrink:0}
.ti-panel{flex:1;background:var(--ti-panel-bg);border:1px solid var(--ti-border);border-radius:2px;overflow:hidden}
.ti-panel-title{background:var(--ti-blue);color:#fff;font-size:var(--ti-font-sm);font-weight:700;padding:3px 6px;text-align:center}
.ti-panel-body{padding:4px 6px}
.ti-panel-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.ti-panel-row label{flex:0 0 auto;margin-right:4px}
.ti-panel-row input{width:85px;text-align:right;font-weight:600}
.ti-panel-row.ti-total input{background:var(--ti-gold-bg);font-weight:700;border-color:var(--ti-gold)}
.ti-panel .ti-panel-row-check{display:flex;align-items:center;gap:4px}
.ti-panel-sep{border-top:1px solid #ddd;margin:3px 0}
.ti-panel-summary .ti-panel-row input{width:90px}
.ti-panel-summary .ti-summary-total input{background:var(--ti-blue);color:#fff;font-weight:700;border:none}
.ti-panel-summary .ti-summary-recv input{background:#d4edda;font-weight:700}
.ti-panel-summary .ti-summary-pay input{background:#f8d7da;font-weight:700}
/* TOTALS STRIP */
.ti-totals-strip{display:flex;gap:6px;align-items:center;background:var(--ti-header-bg);border:1px solid var(--ti-border);border-radius:2px;padding:4px 8px;margin-top:4px;flex-shrink:0}
.ti-totals-strip .ti-field input{width:88px;text-align:right;font-weight:700}
.ti-totals-strip .ti-total-grand input{background:var(--ti-blue);color:#fff;font-weight:700;border:none;width:100px}
/* AUDIT */
.ti-audit{display:flex;gap:10px;align-items:center;font-size:var(--ti-font-sm);color:#888;padding:2px 6px;flex-shrink:0}
/* GRID */
.ti-grid-wrap{min-height:60px;overflow-y:auto;margin-top:4px;border:1px solid var(--ti-border);border-radius:2px;background:#fff;flex-shrink:0;max-height:120px}
.ti-grid{width:100%;border-collapse:collapse;font-size:var(--ti-font-sm)}
.ti-grid thead{position:sticky;top:0;z-index:5}
.ti-grid th{background:var(--ti-blue);color:#fff;font-weight:700;padding:3px 5px;text-align:left;font-size:var(--ti-label);text-transform:uppercase;white-space:nowrap}
.ti-grid td{padding:2px 5px;border-bottom:1px solid #eee;white-space:nowrap}
.ti-grid tr:hover{background:#f0f7ff;cursor:pointer}
.ti-grid tr.active{background:#d6e9ff}
.ti-grid tr.active td:first-child::before{content:'\270E ';color:var(--ti-blue);font-weight:700}
.ti-grid .text-right{text-align:right}
.ti-grid .ti-status-badge{padding:1px 5px;border-radius:2px;font-size:var(--ti-label);font-weight:700}
.ti-badge-issued{background:#d4edda;color:#155724}
.ti-badge-refunded{background:#f8d7da;color:#721c24}
/* VISA / HOTEL SECTIONS */
.ti-vsec{margin-top:4px;flex-shrink:0}
.ti-vsec-head{display:flex;align-items:center;justify-content:space-between;background:var(--ti-header-bg);border:1px solid var(--ti-border);border-radius:2px 2px 0 0;padding:3px 8px;font-size:var(--ti-font-sm);font-weight:700;color:var(--ti-blue)}
.ti-vsec-body{background:#fff;border:1px solid var(--ti-border);border-top:none;border-radius:0 0 2px 2px;padding:5px 6px}
.ti-vform-row{display:flex;gap:5px;flex-wrap:wrap;align-items:flex-end}
.ti-vform-row .ti-field input,.ti-vform-row .ti-field select{width:100%}
.ti-vsec-total{text-align:right;font-size:var(--ti-font-sm);font-weight:700;color:var(--ti-blue);margin-top:4px}
/* RIGHT */
.ti-actions{background:#fff;border:1px solid var(--ti-border);border-radius:2px;padding:6px;display:flex;flex-direction:column;gap:4px}
.ti-actions .btn{width:100%;font-size:var(--ti-font);font-weight:700;padding:5px 8px;border-radius:2px}
.ti-btn-save{background:var(--ti-green);border-color:var(--ti-green);color:#fff}
.ti-btn-save:hover{background:#218838;color:#fff}
.ti-btn-update{background:var(--ti-blue);border-color:var(--ti-blue);color:#fff}
.ti-btn-update:hover{background:#0d3f7e;color:#fff}
.ti-btn-add-tkt{background:#6f42c1;border-color:#6f42c1;color:#fff}
.ti-btn-add-tkt:hover{background:#5a32a3;color:#fff}
.ti-btn-delete{background:var(--ti-red);border-color:var(--ti-red);color:#fff}
.ti-bank-panel{background:#fff;border:1px solid var(--ti-border);border-radius:2px;padding:6px}
.ti-bank-panel.hidden-panel{display:none}
.ti-bank-panel h6{font-size:var(--ti-font-sm);font-weight:700;color:var(--ti-blue);margin:0 0 4px 0}
.ti-bank-row{display:flex;gap:3px;margin-bottom:3px;align-items:center}
.ti-bank-row select{flex:1;font-size:var(--ti-font-sm)}
.ti-bank-row input{width:70px;font-size:var(--ti-font-sm);text-align:right}
.ti-bank-row .btn-del{width:20px;height:20px;padding:0;border:none;border-radius:2px;background:var(--ti-red);color:#fff;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ti-bank-total{text-align:right;font-size:var(--ti-font-sm);font-weight:700;color:var(--ti-blue);margin-top:3px;padding-top:3px;border-top:1px solid #ddd}
.ti-balance-due{text-align:right;font-size:var(--ti-font-sm);font-weight:700;color:var(--ti-red);margin-top:2px}
.ti-refund-panel{background:#fff3f3;border:1px solid var(--ti-red);border-radius:2px;padding:6px;display:none;overflow-y:auto}
.ti-refund-panel.show{display:block}
.ti-refund-panel h6{font-size:var(--ti-font-sm);font-weight:700;color:var(--ti-red);margin:0 0 4px 0}
.ti-refund-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.ti-refund-row label{font-size:var(--ti-label)}
.ti-refund-row input{width:80px;text-align:right;font-size:var(--ti-font-sm)}
.ti-refund-output input{background:#f8d7da!important;font-weight:700;color:var(--ti-red)}
.ti-nav{display:flex;gap:3px;align-items:center}
.ti-nav .btn{width:26px;height:26px;padding:0;font-size:11px;border-radius:2px;display:flex;align-items:center;justify-content:center}
.ti-edit-hint{background:#fff3cd;color:#856404;font-size:var(--ti-font-sm);padding:3px 8px;border-radius:2px;display:none;text-align:center;flex-shrink:0;margin-top:2px}
.ti-edit-hint.show{display:block}
.ti-loading{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;z-index:9999}
.ti-loading.hidden{display:none}
.select2-container--default .select2-selection--single{height:var(--ti-input-h)!important;min-height:var(--ti-input-h)!important;border:1px solid var(--ti-border);border-radius:2px;font-size:var(--ti-font)}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:calc(var(--ti-input-h) - 2px);padding-left:5px;font-size:var(--ti-font)}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:calc(var(--ti-input-h) - 2px)}
.select2-results__option{font-size:var(--ti-font);padding:4px 8px}
.flatpickr-input{cursor:pointer!important}
.flatpickr-calendar{font-size:.78rem}
</style>
{% endblock %}

{% block content %}
<div class="ti-loading hidden" id="loadingOverlay"><div class="spinner-border text-primary"></div></div>

<div class="ti-page">

  <!-- TITLE BAR -->
  <div class="ti-titlebar">
    <span><i class="fas fa-plane-departure mr-2"></i>Sale / Refund Invoice</span>
    <div class="d-flex align-items-center gap-2">
      <span class="ti-status ti-status-issued" id="statusBadge">ISSUED</span>
      <div class="ti-nav ml-2">
        <button class="btn btn-sm btn-light" onclick="navInvoice('first')" title="First"><i class="fas fa-angle-double-left"></i></button>
        <button class="btn btn-sm btn-light" onclick="navInvoice('prev')"  title="Prev"><i class="fas fa-angle-left"></i></button>
        <button class="btn btn-sm btn-light" onclick="navInvoice('next')"  title="Next"><i class="fas fa-angle-right"></i></button>
        <button class="btn btn-sm btn-light" onclick="navInvoice('last')"  title="Last"><i class="fas fa-angle-double-right"></i></button>
        <a href="{% url 'ticket:ticket_list' %}"    class="btn btn-sm btn-warning ml-1" title="List"><i class="fas fa-list"></i></a>
        <a href="/"                                 class="btn btn-sm btn-light ml-1"   title="Home"><i class="fas fa-home"></i></a>
        <a href="{% url 'ticket:airline_codes' %}"  class="btn btn-sm btn-light ml-1"   title="Airlines"><i class="fas fa-plane"></i></a>
        <a href="{% url 'ticket:segment_list' %}"   class="btn btn-sm btn-light ml-1"   title="Segments"><i class="fas fa-route"></i></a>
      </div>
    </div>
  </div>

  <!-- HEADER -->
  <div class="ti-header">
    <div class="ti-header-row">
      <div class="ti-field"><label>Inv/Folder#</label><input type="text" id="folder_no" style="width:80px;" class="ti-readonly" readonly></div>
      <div class="ti-field">
        <label>Invoice Date</label>
        <input type="text" id="invoice_date" style="width:105px;" class="ti-datepicker" data-ti-nav placeholder="DD/MM/YYYY">
      </div>
      <div class="ti-field" style="display:none;"><label>Receipt No.</label><input type="text" id="receipt_no" style="width:80px;" class="ti-readonly" readonly></div>
      <div class="ti-field" style="display:none;"><label>Inv Title</label><input type="text" id="inv_title" style="width:160px;" placeholder="Invoice title..." data-ti-nav></div>      <div class="ti-field"><label>Status</label><select id="invoice_status" style="width:100px;" disabled><option value="ISSUED">ISSUED</option><option value="REFUNDED">REFUNDED</option></select></div>
      <div class="ti-field"><label>Sale Type</label>
        <div class="ti-sale-type">
          <input type="radio" name="sale_type" id="sale_cash"   value="cash"><label for="sale_cash">Cash</label>
          <input type="radio" name="sale_type" id="sale_credit" value="credit" checked><label for="sale_credit">Credit</label>
        </div>
      </div>
      <div class="ti-field" style="display:none;"><label>Commission A/c Amt.</label><input type="number" id="commission_ac_amt" style="width:90px;" value="0" step="0.01" data-ti-nav></div>    </div>

    <!-- Client -->
    <div class="ti-party-row">
      <div class="ti-party-box">
        <span class="ti-party-label"><i class="fas fa-user mr-1"></i>Client Receivable</span>
        <input type="hidden" id="client_id" value="0">
        <select id="client_select" style="width:300px;"></select>
      </div>
    </div>

    <!-- Section Toggles -->
    <div class="ti-sec-toggles">
      <label class="ti-sec-toggle on"><input type="checkbox" id="chk_ticket" checked> <i class="fas fa-plane mr-1"></i>Ticket</label>
      <label class="ti-sec-toggle"><input type="checkbox" id="chk_visa"> <i class="fas fa-passport mr-1"></i>Visa</label>
      <label class="ti-sec-toggle"><input type="checkbox" id="chk_hotel"> <i class="fas fa-hotel mr-1"></i>Hotel</label>
      <label class="ti-sec-toggle"><input type="checkbox" id="chk_transport"> <i class="fas fa-car mr-1"></i>Transport</label>
      <label class="ti-sec-toggle"><input type="checkbox" id="chk_insurance"> <i class="fas fa-shield-alt mr-1"></i>Insurance</label>
      <span style="margin-left:auto;font-size:var(--ti-font-sm);color:#888;">Check sections to include</span>
    </div>
  </div>

  <!-- MAIN BODY -->
  <div class="ti-body">
    <div class="ti-body-left">

      <!-- ═══════════════════ TICKET SECTION ═══════════════════ -->
      <div id="secTicket">

        <!-- Flight Row 1 -->
        <div class="ti-flight-row">
          <div class="ti-flight-fields">
            <div class="ti-field"><label>Type</label><select id="flight_type" style="width:80px;" data-ti-nav><option value="INTER">INTER</option><option value="DOMESTIC">DOMESTIC</option></select></div>
            <div class="ti-field"><label>Tkt#</label><input type="text" id="ticket_no" style="width:148px;" placeholder="673-XXXX-XXXXXX" maxlength="15" data-ti-nav></div>
            <div class="ti-field"><label>Flight No.</label><input type="text" id="flight_no" style="width:70px;" placeholder="PF718" data-ti-nav></div>
            <div class="ti-field"><label>Class</label><input type="text" id="flight_class" style="width:45px;" data-ti-nav></div>
            <div class="ti-field"><label>Dep.Date</label><input type="text" id="dep_date" style="width:105px;" class="ti-datepicker" data-ti-nav placeholder="DD/MM/YYYY"></div>
            <div class="ti-field"><label>Sector</label><input type="text" id="sector" style="width:140px;" placeholder="ISB-DMM" data-ti-nav></div>
            <div class="ti-field"><label>Tkt Issu Dt</label><input type="text" id="tkt_issue_date" style="width:105px;" class="ti-datepicker" data-ti-nav placeholder="DD/MM/YYYY"></div>
            <div class="ti-field"><label>Route</label><select id="route" style="width:75px;" data-ti-nav><option value="ONE">ONE</option><option value="RETURN">RETURN</option></select></div>
            <div class="ti-field"><label>PNR #</label><input type="text" id="pnr" style="width:85px;" placeholder="2FFWKN" data-ti-nav></div>
          </div>

          <!-- Flight Row 2: Agent + Airline + Segment -->
          <div class="ti-flight-row-2">
            <div class="ti-field">
              <label>Agent / Airline Payable <span style="color:var(--ti-red);">*</span></label>
              <input type="hidden" id="ln_agent_id" value="0">
              <select id="ln_agent_select" style="width:220px;"></select>
            </div>
            <div class="ti-field">
              <label>Airline (auto / select)</label>
              <select id="ln_airline_select" style="width:185px;" data-ti-nav>
                <option value="">-- Select Airline --</option>
                {% for ac in airline_codes %}
                <option value="{{ ac.short_code }}" data-name="{{ ac.airline_name }}" data-com="{{ ac.commission_pct }}">
                  {{ ac.short_code }} — {{ ac.airline_name }}
                </option>
                {% endfor %}
              </select>
            </div>
            <div class="ti-field">
              <label>Segment</label>
              <select id="ln_segment_sel" style="width:140px;" data-ti-nav>
                <option value="">-- None --</option>
                {% for seg in segments %}
                <option value="{{ seg.id }}" data-charge="{{ seg.per_segment_charge }}" data-name="{{ seg.segment_name }}"{% if seg.is_default %} selected{% endif %}>
                  {{ seg.segment_name }}{% if seg.is_default %} ★{% endif %}
                </option>
                {% endfor %}
              </select>
            </div>
            <div class="ti-field"><label>No.Segs</label><input type="number" id="no_of_segments" style="width:58px;" value="0" min="0" step="1" data-ti-nav data-ti-calc></div>
            <div class="ti-field"><label>Seg/Chg</label><input type="text" id="seg_charge_per" style="width:72px;" readonly class="ti-readonly"></div>
            <div class="ti-field"><label>Seg Total</label><input type="text" id="seg_total" style="width:78px;" readonly class="ti-readonly"></div>
          </div>
        </div>

        <!-- PAX ROW -->
        <div class="ti-pax-row">
          <div class="ti-field"><label>Pax Title</label><select id="pax_title" style="width:80px;" data-ti-nav><option value="ADULT">ADULT</option><option value="CHILD">CHILD</option><option value="INFANT">INFANT</option></select></div>
          <div class="ti-field" style="flex:1;"><label>Pax Name</label><input type="text" id="pax_name" style="width:100%;" placeholder="MR RAJA WASEEM MAJEED" data-ti-nav></div>
          <div class="ti-field" style="flex:1;"><label>Remarks</label><input type="text" id="tkt_remarks" style="width:100%;" placeholder="Remarks..." data-ti-nav></div>
        </div>

        <!-- CALC PANELS -->
        <div class="ti-calc-panels">

          <div class="ti-panel">
            <div class="ti-panel-title">Fare & Tax Segment</div>
            <div class="ti-panel-body">
              <div class="ti-panel-row"><label>IATA Fare</label><input type="number" id="iata_fare" value="0" step="0.01" data-ti-nav data-ti-calc></div>
              <div class="ti-panel-row"><label>Market Fare</label><input type="number" id="market_fare" value="0" step="0.01" data-ti-nav data-ti-calc></div>
              <div class="ti-panel-sep"></div>
              <div class="ti-panel-row"><label>Tax1</label><input type="number" id="tax1" value="0" step="0.01" data-ti-nav data-ti-calc></div>
              <div class="ti-panel-row"><label>Tax2</label><input type="number" id="tax2" value="0" step="0.01" data-ti-nav data-ti-calc></div>
              <div class="ti-panel-row"><label>Tax3</label><input type="number" id="tax3" value="0" step="0.01" data-ti-nav data-ti-calc></div>
              <div class="ti-panel-row"><label>Tax4</label><input type="number" id="tax4" value="0" step="0.01" data-ti-nav data-ti-calc></div>
              <div class="ti-panel-row"><label>Other Tx/Chrgs</label><input type="number" id="other_tx_chrgs" value="0" step="0.01" data-ti-nav data-ti-calc></div>
              <div class="ti-panel-sep"></div>
              <div class="ti-panel-row ti-total"><label>Total Txs</label><input type="text" id="total_txs" value="0.00" readonly class="ti-readonly"></div>
              <div class="ti-panel-row ti-total"><label>Fare+Txs</label><input type="text" id="fare_plus_txs" value="0.00" readonly class="ti-readonly"></div>
            </div>
          </div>

          <div class="ti-panel">
            <div class="ti-panel-title">Airline/Agent Segment</div>
            <div class="ti-panel-body">
              <div class="ti-panel-row"><label>Airline Com%</label><input type="number" id="airline_com_pct" value="0" step="0.001" data-ti-nav data-ti-calc></div>
              <div class="ti-panel-row"><label>Comm. Amount</label><input type="text" id="comm_amount" value="0.00" readonly class="ti-readonly"></div>
              <div class="ti-panel-sep"></div>
              <div class="ti-panel-row"><label>PSA/GSA%</label><input type="number" id="psa_gsa_pct" value="0" step="0.001" data-ti-nav data-ti-calc></div>
              <div class="ti-panel-row"><label>PSA/GSA Amount</label><input type="text" id="psa_gsa_amount" value="0.00" readonly class="ti-readonly"></div>
              <div class="ti-panel-sep"></div>
              <div class="ti-panel-row"><label>Com. Adjustment</label><input type="number" id="com_adjustment" value="0" step="0.01" data-ti-nav data-ti-calc></div>
              <div class="ti-panel-row ti-total"><label>Tot. Commission</label><input type="text" id="tot_commission" value="0.00" readonly class="ti-readonly"></div>
            </div>
          </div>

          <div class="ti-panel">
            <div class="ti-panel-title">Services Segment</div>
            <div class="ti-panel-body">
              <div class="ti-panel-row">
                <label>PSF%</label>
                <input type="number" id="psf_pct"    value="0" step="0.001" style="width:55px;" data-ti-nav data-ti-calc>
                <label style="margin-left:3px;">Amt</label>
                <input type="number" id="psf_amount" value="0" step="0.01"  style="width:60px;" data-ti-nav data-ti-calc>
              </div>
              <div class="ti-panel-sep"></div>
              <div class="ti-panel-row"><label>Adj %</label><input type="number" id="adj_pct" value="0" step="0.01" data-ti-nav data-ti-calc></div>
              <div class="ti-panel-row"><label>Adjustment</label><input type="number" id="adjustment_amt" value="0" step="0.01" data-ti-nav data-ti-calc></div>
              <div class="ti-panel-sep"></div>
              <div class="ti-panel-row"><label>SP Disc.%</label><input type="number" id="sp_disc_pct" value="0" step="0.01" data-ti-nav data-ti-calc></div>
              <div class="ti-panel-row"><label>Amount</label><input type="number" id="sp_disc_amount" value="0" step="0.01" data-ti-nav data-ti-calc></div>
            </div>
          </div>

          <div class="ti-panel ti-panel-summary">
            <div class="ti-panel-title" style="background:var(--ti-gold);">Summary</div>
            <div class="ti-panel-body">
              <div class="ti-panel-row"><label>Incentive Airline</label><input type="text" id="incentive_airline" value="0.00" readonly class="ti-readonly"></div>
              <div class="ti-panel-row"><label>Add PSF Amount</label><input type="text" id="add_psf_amount" value="0.00" readonly class="ti-readonly"></div>
              <div class="ti-panel-row"><label>Less S.P</label><input type="text" id="less_sp" value="0.00" readonly class="ti-readonly"></div>
              <div class="ti-panel-row"><label>Other Srvs Income</label><input type="text" id="other_srvs_income" value="0.00" readonly class="ti-readonly"></div>
              <div class="ti-panel-sep"></div>
              <div class="ti-panel-row ti-summary-total"><label>Total.Income</label><input type="text" id="total_income" value="0.00" readonly></div>
              <div class="ti-panel-sep"></div>
              <div class="ti-panel-row"><label>Ticket Value</label><input type="text" id="ticket_value" value="0.00" readonly class="ti-readonly"></div>
              <div class="ti-panel-row ti-summary-recv"><label>Receivable</label><input type="text" id="ln_receivable" value="0.00" readonly></div>
              <div class="ti-panel-row ti-summary-pay"><label>Payable</label><input type="text" id="ln_payable" value="0.00" readonly></div>
            </div>
          </div>
        </div>

        <!-- TOTALS STRIP -->
        <div class="ti-totals-strip">
          <div class="ti-field"><label>Tkt Recv.</label><input type="text" id="strip_receivable" value="0.00" readonly class="ti-readonly"></div>
          <div class="ti-field"><label>Tkt Payable</label><input type="text" id="strip_payable" value="0.00" readonly class="ti-readonly"></div>
          <div class="ti-field"><label>Visa Total</label><input type="text" id="strip_visa_total" value="0.00" readonly class="ti-readonly"></div>
          <div class="ti-field"><label>Hotel Total</label><input type="text" id="strip_hotel_total" value="0.00" readonly class="ti-readonly"></div>
          <div class="ti-field"><label>Other Payable</label><input type="number" id="strip_other_payable" value="0" step="0.01" style="width:88px;"></div>
          <div class="ti-field"><label>Rfnd Pay Client</label><input type="text" id="strip_rfnd_pay_client" value="0.00" readonly class="ti-readonly"></div>
          <div class="ti-field"><label>Rfnd Rcv Airline</label><input type="text" id="strip_rfnd_rcv_airline" value="0.00" readonly class="ti-readonly"></div>
          <div class="ti-field ti-total-grand"><label>Grand Total</label><input type="text" id="strip_net_net" value="0.00" readonly></div>
        </div>

        <!-- AUDIT -->
        <div class="ti-audit">
          <span>Created By: <strong id="audit_created"></strong></span>
          <span>Edit By: <strong id="audit_edited"></strong></span>
          <span style="margin-left:auto;">Grand Total Receivable: <strong id="grand_total_rcvable" style="color:var(--ti-blue);font-size:.85rem;">0.00</strong></span>
        </div>

        <!-- EDIT HINT -->
        <div class="ti-edit-hint" id="editHint">
          <i class="fas fa-info-circle mr-1"></i>Editing Ticket #<span id="editHintIdx"></span> — Click another row to switch, or press F9 to add new
        </div>

        <!-- TICKET GRID -->
        <div class="ti-grid-wrap">
          <table class="ti-grid">
            <thead>
              <tr>
                <th>#</th><th>Ticket#</th><th>Pax Name</th><th>Sector</th>
                <th>Airline</th><th>Agent</th><th>Segment</th>
                <th class="text-right">Mkt Fare</th><th class="text-right">Taxes</th>
                <th class="text-right">Recv.</th><th>Status</th><th class="text-right">Seg Total</th><th class="text-right">Rfnd Pay</th><th></th>
              </tr>
            </thead>
            <tbody id="gridBody"></tbody>
          </table>
        </div>
      </div><!-- /#secTicket -->

      <!-- ═══════════════════ VISA SECTION ═══════════════════ -->
      <div class="ti-vsec" id="secVisa" style="display:none;">
        <div class="ti-vsec-head">
          <span><i class="fas fa-passport mr-1"></i>Visa Section</span>
          <span id="visaCountBadge" style="background:var(--ti-blue);color:#fff;font-size:var(--ti-label);padding:1px 6px;border-radius:2px;">0 entries</span>
        </div>
        <div class="ti-vsec-body">
          <div class="ti-vform-row">
            <div class="ti-field"><label>Name *</label><input type="text" id="v_name" style="width:120px;" data-ti-nav placeholder="Full Name"></div>
            <div class="ti-field"><label>Passport#</label><input type="text" id="v_passport" style="width:100px;" data-ti-nav></div>
            <div class="ti-field"><label>Visa#</label><input type="text" id="v_visa_no" style="width:90px;" data-ti-nav></div>
            <div class="ti-field"><label>Issue Date</label><input type="text" id="v_issue_date" style="width:100px;" class="ti-datepicker" placeholder="DD/MM/YYYY"></div>
            <div class="ti-field"><label>DOB</label><input type="text" id="v_dob" style="width:100px;" class="ti-datepicker" placeholder="DD/MM/YYYY"></div>
            <div class="ti-field">
              <label>Visa Type</label>
              <select id="v_visa_type" style="width:160px;">
                <option value="">-- Select --</option>
                <option value="Umrah">Umrah</option>
                <option value="Hajj">Hajj</option>
                <option value="Tourist / Visit">Tourist / Visit</option>
                <option value="Business">Business</option>
                <option value="Work / Employment">Work / Employment</option>
                <option value="Student">Student</option>
                <option value="Transit">Transit</option>
                <option value="Residence Permit">Residence Permit</option>
                <option value="Medical">Medical</option>
                <option value="Diplomatic / Official">Diplomatic / Official</option>
                <option value="Crew / Seaman">Crew / Seaman</option>
                <option value="E-Visa">E-Visa</option>
                <option value="Visa on Arrival">Visa on Arrival</option>
                <option value="No Visa Required">No Visa Required</option>
              </select>
            </div>
            <div class="ti-field">
              <label>Travel Country</label>
              <input type="text" id="v_travel_country" style="width:120px;" data-ti-nav placeholder="e.g. Saudi Arabia">
            </div>
            <div class="ti-field">
              <label>Passport Expiry</label>
              <input type="text" id="v_passport_expiry" style="width:100px;" class="ti-datepicker" placeholder="DD/MM/YYYY">
            </div>
            <div class="ti-field"><label>Dep.Date</label><input type="text" id="v_dep_date" style="width:100px;" class="ti-datepicker" placeholder="DD/MM/YYYY"></div>
            <div class="ti-field"><label>Return Date</label><input type="text" id="v_ret_date" style="width:100px;" class="ti-datepicker" placeholder="DD/MM/YYYY"></div>
            <div class="ti-field">
              <label>Currency</label>
              <select id="v_currency_id" style="width:100px;">
                <option value="">PKR Only</option>
                {% for c in currencies %}
                <option value="{{ c.id }}" data-rate="{{ c.exchange_rate }}" data-sym="{{ c.symbol }}">{{ c.symbol }} {{ c.code }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="ti-field"><label>Amt (<span id="v_cur_sym">PKR</span>)</label><input type="number" id="v_amount_foreign" style="width:90px;" value="0" step="0.01" data-ti-nav></div>
            <div class="ti-field"><label>PKR Amount</label><input type="number" id="v_amount_pkr" style="width:90px;" value="0" step="0.01" data-ti-nav data-vi-calc></div>
            <div class="ti-field">
              <label>PSF 1 %</label>
              <input type="number" id="v_psf1_pct" style="width:55px;" value="0" step="0.001" data-vi-calc>
            </div>
            <div class="ti-field">
              <label>PSF 1 Amt</label>
              <input type="number" id="v_psf1_amount" style="width:72px;" value="0" step="0.01" data-vi-calc>
            </div>
            <div class="ti-field">
              <label>PSF 2 %</label>
              <input type="number" id="v_psf2_pct" style="width:55px;" value="0" step="0.001" data-vi-calc>
            </div>
            <div class="ti-field">
              <label>PSF 2 Amt</label>
              <input type="number" id="v_psf2_amount" style="width:72px;" value="0" step="0.01" data-vi-calc>
            </div>
            <div class="ti-field">
              <label>Cust. Recv.</label>
              <input type="text" id="v_customer_receivable" style="width:90px;" value="0.00" readonly class="ti-readonly" style="background:#d4edda!important;font-weight:700;">
            </div>
            <div class="ti-field">
              <label>Disc %</label>
              <input type="number" id="v_disc_pct" style="width:55px;" value="0" step="0.001" data-vi-calc>
            </div>
            <div class="ti-field">
              <label>Disc Amt</label>
              <input type="number" id="v_disc_amount" style="width:72px;" value="0" step="0.01" data-vi-calc>
            </div>
            <div class="ti-field">
              <label>Vendor Payable</label>
              <input type="text" id="v_vendor_payable" style="width:90px;" value="0.00" readonly class="ti-readonly" style="background:#f8d7da!important;font-weight:700;">
            </div>
            <div class="ti-field">
              <label>Vendor</label>
              <input type="hidden" id="v_vendor_id" value="0">
              <select id="v_vendor_select" style="width:180px;"></select>
            </div>
            <div class="ti-field" style="justify-content:flex-end;">
              <label>&nbsp;</label>
              <button class="btn btn-sm btn-primary" id="btnAddVisa" style="height:var(--ti-input-h);font-size:var(--ti-font-sm);padding:0 10px;"><i class="fas fa-plus mr-1"></i>Add</button>
            </div>
          </div>
          <div class="ti-grid-wrap" style="margin-top:6px;">
            <table class="ti-grid">
              <thead><tr>
                <th>#</th><th>Name</th><th>Passport#</th><th>Visa#</th>
                <th>Visa Type</th><th>Travel Country</th><th>Psprt Expiry</th>
                <th>Issue Date</th><th>DOB</th><th>Duration</th><th>Dep.Date</th><th>Return</th>
                <th>Currency</th><th class="text-right">Amt</th><th class="text-right">PKR</th>
                <th class="text-right">PSF1</th><th class="text-right">PSF2</th>
                <th class="text-right" style="color:#d4edda;">Cust.Recv.</th>
                <th class="text-right">Disc</th>
                <th class="text-right" style="color:#f8d7da;">Vend.Pay.</th>
                <th>Vendor</th><th></th>
              </tr></thead>
              <tbody id="visaGrid"></tbody>
            </table>
          </div>
          <div class="ti-vsec-total">Total Visa (PKR): <strong id="visaTotalDisp">0.00</strong></div>
        </div>
      </div><!-- /#secVisa -->

      <!-- ═══════════════════ HOTEL SECTION ═══════════════════ -->
      <div class="ti-vsec" id="secHotel" style="display:none;">
        <div class="ti-vsec-head">
          <span><i class="fas fa-hotel mr-1"></i>Hotel Section</span>
          <span id="hotelCountBadge" style="background:var(--ti-blue);color:#fff;font-size:var(--ti-label);padding:1px 6px;border-radius:2px;">0 entries</span>
        </div>
        <div class="ti-vsec-body">
          <div class="ti-vform-row">
            <div class="ti-field"><label>Passenger Name *</label><input type="text" id="h_pax_name" style="width:120px;" data-ti-nav></div>
            <div class="ti-field"><label>Passport#</label><input type="text" id="h_passport" style="width:100px;" data-ti-nav></div>
            <div class="ti-field"><label>Visa#</label><input type="text" id="h_visa_no" style="width:85px;" data-ti-nav></div>
            <div class="ti-field"><label>Issue Date</label><input type="text" id="h_issue_date" style="width:100px;" class="ti-datepicker" placeholder="DD/MM/YYYY"></div>
            <div class="ti-field"><label>Check-in</label><input type="text" id="h_checkin" style="width:100px;" class="ti-datepicker" placeholder="DD/MM/YYYY"></div>
            <div class="ti-field"><label>Nights</label><input type="number" id="h_duration" style="width:58px;" value="0" min="0" step="1" data-ti-nav></div>
            <div class="ti-field"><label>Checkout</label><input type="text" id="h_checkout" style="width:100px;" class="ti-datepicker" placeholder="DD/MM/YYYY"></div>
            <div class="ti-field"><label>Hotel Name</label><input type="text" id="h_hotel_name" style="width:130px;" data-ti-nav></div>
            <div class="ti-field">
              <label>Vendor</label>
              <input type="hidden" id="h_vendor_id" value="0">
              <select id="h_vendor_select" style="width:175px;"></select>
            </div>
            <div class="ti-field"><label>Rent Amount</label><input type="number" id="h_rent" style="width:90px;" value="0" step="0.01" data-ti-nav data-ho-calc></div>
            <div class="ti-field">
              <label>PSF 1 %</label>
              <input type="number" id="h_psf1_pct" style="width:55px;" value="0" step="0.001" data-ho-calc>
            </div>
            <div class="ti-field">
              <label>PSF 1 Amt</label>
              <input type="number" id="h_psf1_amount" style="width:72px;" value="0" step="0.01" data-ho-calc>
            </div>
            <div class="ti-field">
              <label>PSF 2 %</label>
              <input type="number" id="h_psf2_pct" style="width:55px;" value="0" step="0.001" data-ho-calc>
            </div>
            <div class="ti-field">
              <label>PSF 2 Amt</label>
              <input type="number" id="h_psf2_amount" style="width:72px;" value="0" step="0.01" data-ho-calc>
            </div>
            <div class="ti-field">
              <label>Cust. Recv.</label>
              <input type="text" id="h_customer_receivable" style="width:90px;" value="0.00" readonly class="ti-readonly" style="background:#d4edda!important;font-weight:700;">
            </div>
            <div class="ti-field">
              <label>Disc %</label>
              <input type="number" id="h_disc_pct" style="width:55px;" value="0" step="0.001" data-ho-calc>
            </div>
            <div class="ti-field">
              <label>Disc Amt</label>
              <input type="number" id="h_disc_amount" style="width:72px;" value="0" step="0.01" data-ho-calc>
            </div>
            <div class="ti-field">
              <label>Vendor Payable</label>
              <input type="text" id="h_vendor_payable" style="width:90px;" value="0.00" readonly class="ti-readonly" style="background:#f8d7da!important;font-weight:700;">
            </div>
            <div class="ti-field" style="justify-content:flex-end;">
              <label>&nbsp;</label>
              <button class="btn btn-sm btn-primary" id="btnAddHotel" style="height:var(--ti-input-h);font-size:var(--ti-font-sm);padding:0 10px;"><i class="fas fa-plus mr-1"></i>Add</button>
            </div>
          </div>
          <div class="ti-grid-wrap" style="margin-top:6px;">
            <table class="ti-grid">
              <thead><tr>
                <th>#</th><th>Passenger</th><th>Passport#</th><th>Visa#</th>
                <th>Issue</th><th>Check-in</th><th>Nights</th><th>Checkout</th>
                <th>Hotel</th><th>Vendor</th>
                <th class="text-right">Rent</th>
                <th class="text-right">PSF1</th><th class="text-right">PSF2</th>
                <th class="text-right" style="color:#d4edda;">Cust.Recv.</th>
                <th class="text-right">Disc</th>
                <th class="text-right" style="color:#f8d7da;">Vend.Pay.</th>
                <th></th>
              </tr></thead>
              <tbody id="hotelGrid"></tbody>
            </table>
          </div>
          <div class="ti-vsec-total">Total Hotel (PKR): <strong id="hotelTotalDisp">0.00</strong></div>
        </div>
      </div><!-- /#secHotel -->










      <!-- ═══════════════════ TRANSPORT SECTION ═══════════════════ -->
      <div class="ti-vsec" id="secTransport" style="display:none;">
        <div class="ti-vsec-head">
          <span><i class="fas fa-car mr-1"></i>Transport Section</span>
          <span id="transportCountBadge" style="background:var(--ti-blue);color:#fff;font-size:var(--ti-label);padding:1px 6px;border-radius:2px;">0 entries</span>
        </div>
        <div class="ti-vsec-body">
          <div class="ti-vform-row">
            <div class="ti-field"><label>Passenger Name *</label><input type="text" id="tr_pax_name" style="width:120px;" data-ti-nav></div>
            <div class="ti-field"><label>Passport#</label><input type="text" id="tr_passport" style="width:100px;" data-ti-nav></div>
            <div class="ti-field"><label>Visa#</label><input type="text" id="tr_visa_no" style="width:85px;" data-ti-nav></div>
            <div class="ti-field"><label>Car Type</label><input type="text" id="tr_car_type" style="width:100px;" data-ti-nav placeholder="Sedan / SUV / Bus"></div>
            <div class="ti-field"><label>No.Persons</label><input type="number" id="tr_no_persons" style="width:65px;" value="1" min="1" data-ti-nav></div>
            <div class="ti-field"><label>Arrival Date</label><input type="text" id="tr_arrival_date" style="width:100px;" class="ti-datepicker" placeholder="DD/MM/YYYY"></div>
            <div class="ti-field"><label>Arrival Time</label><input type="text" id="tr_arrival_time" style="width:80px;" data-ti-nav placeholder="14:30"></div>
            <div class="ti-field"><label>Vehicle No.</label><input type="text" id="tr_vehicle_no" style="width:90px;" data-ti-nav></div>
            <div class="ti-field">
              <label>Vendor *</label>
              <input type="hidden" id="tr_vendor_id" value="0">
              <select id="tr_vendor_select" style="width:170px;"></select>
            </div>
            <div class="ti-field"><label>Decided Fare</label><input type="number" id="tr_decided_fare" style="width:90px;" value="0" step="0.01" data-ti-nav></div>
            <div class="ti-field"><label>PSF1%</label><input type="number" id="tr_psf1_pct" style="width:55px;" value="0" step="0.001" data-ti-nav></div>
            <div class="ti-field"><label>PSF1 Amt</label><input type="number" id="tr_psf1_amt" style="width:78px;" value="0" step="0.01" data-ti-nav></div>
            <div class="ti-field"><label>PSF2%</label><input type="number" id="tr_psf2_pct" style="width:55px;" value="0" step="0.001" data-ti-nav></div>
            <div class="ti-field"><label>PSF2 Amt</label><input type="number" id="tr_psf2_amt" style="width:78px;" value="0" step="0.01" data-ti-nav></div>
            <div class="ti-field" style="justify-content:flex-end;">
              <label>&nbsp;</label>
              <div>
                <div style="font-size:var(--ti-label);color:#888;">Client Rcv: <strong id="tr_total_recv_disp">0.00</strong></div>
                <button class="btn btn-sm btn-primary" id="btnAddTransport" style="height:var(--ti-input-h);font-size:var(--ti-font-sm);padding:0 10px;"><i class="fas fa-plus mr-1"></i>Add</button>
              </div>
            </div>
          </div>
          <div class="ti-grid-wrap" style="margin-top:6px;">
            <table class="ti-grid">
              <thead><tr>
                <th>#</th><th>Passenger</th><th>Passport#</th><th>Car Type</th>
                <th>Persons</th><th>Arrival</th><th>Time</th><th>Vehicle#</th>
                <th>Vendor</th><th class="text-right">Fare</th>
                <th class="text-right">PSF1</th><th class="text-right">PSF2</th>
                <th class="text-right">Total Recv.</th><th></th>
              </tr></thead>
              <tbody id="transportGrid"></tbody>
            </table>
          </div>
          <div class="ti-vsec-total">Total Transport (PKR): <strong id="transportTotalDisp">0.00</strong></div>
        </div>
      </div><!-- /#secTransport -->
 
      <!-- ═══════════════════ INSURANCE SECTION ═══════════════════ -->
      <div class="ti-vsec" id="secInsurance" style="display:none;">
        <div class="ti-vsec-head">
          <span><i class="fas fa-shield-alt mr-1"></i>Insurance Section</span>
          <span id="insuranceCountBadge" style="background:var(--ti-blue);color:#fff;font-size:var(--ti-label);padding:1px 6px;border-radius:2px;">0 entries</span>
        </div>
        <div class="ti-vsec-body">
          <div class="ti-vform-row">
            <div class="ti-field"><label>Client Name *</label><input type="text" id="ins_client_name" style="width:120px;" data-ti-nav></div>
            <div class="ti-field"><label>Mobile</label><input type="text" id="ins_mobile" style="width:100px;" data-ti-nav></div>
            <div class="ti-field"><label>Passport/CNIC</label><input type="text" id="ins_passport_cnic" style="width:110px;" data-ti-nav></div>
            <div class="ti-field"><label>Nationality</label><input type="text" id="ins_nationality" style="width:90px;" data-ti-nav></div>
            <div class="ti-field"><label>DOB</label><input type="text" id="ins_dob" style="width:100px;" class="ti-datepicker" placeholder="DD/MM/YYYY"></div>
            <div class="ti-field"><label>Travel Country</label><input type="text" id="ins_travel_country" style="width:110px;" data-ti-nav></div>
            <div class="ti-field"><label>Travel Start</label><input type="text" id="ins_travel_start" style="width:100px;" class="ti-datepicker" placeholder="DD/MM/YYYY"></div>
            <div class="ti-field"><label>Travel End</label><input type="text" id="ins_travel_end" style="width:100px;" class="ti-datepicker" placeholder="DD/MM/YYYY"></div>
            <div class="ti-field"><label>Ins.Company</label><input type="text" id="ins_company" style="width:130px;" data-ti-nav></div>
            <div class="ti-field"><label>Plan/Package</label><input type="text" id="ins_plan" style="width:120px;" data-ti-nav></div>
            <div class="ti-field"><label>Policy No.</label><input type="text" id="ins_policy_no" style="width:100px;" data-ti-nav></div>
            <div class="ti-field"><label>Issue Date</label><input type="text" id="ins_issue_date" style="width:100px;" class="ti-datepicker" placeholder="DD/MM/YYYY"></div>
            <div class="ti-field"><label>Expiry Date</label><input type="text" id="ins_expiry_date" style="width:100px;" class="ti-datepicker" placeholder="DD/MM/YYYY"></div>
            <div class="ti-field"><label>Coverage Amt</label><input type="number" id="ins_coverage" style="width:90px;" value="0" step="0.01" data-ti-nav></div>
            <div class="ti-field"><label>Ins.Fee/Premium</label><input type="number" id="ins_fee" style="width:90px;" value="0" step="0.01" data-ti-nav></div>
            <div class="ti-field"><label>PSF1%</label><input type="number" id="ins_psf1_pct" style="width:55px;" value="0" step="0.001" data-ti-nav></div>
            <div class="ti-field"><label>PSF1 Amt</label><input type="number" id="ins_psf1_amt" style="width:78px;" value="0" step="0.01" data-ti-nav></div>
            <div class="ti-field"><label>PSF2%</label><input type="number" id="ins_psf2_pct" style="width:55px;" value="0" step="0.001" data-ti-nav></div>
            <div class="ti-field"><label>PSF2 Amt</label><input type="number" id="ins_psf2_amt" style="width:78px;" value="0" step="0.01" data-ti-nav></div>
            <div class="ti-field"><label>Pay.Status</label>
              <select id="ins_pay_status" style="width:88px;">
                <option value="PENDING">Pending</option>
                <option value="PAID">Paid</option>
                <option value="PARTIAL">Partial</option>
              </select>
            </div>
            <div class="ti-field"><label>Remarks</label><input type="text" id="ins_remarks" style="width:120px;" data-ti-nav></div>
            <div class="ti-field">
              <label>Vendor</label>
              <input type="hidden" id="ins_vendor_id" value="0">
              <select id="ins_vendor_select" style="width:170px;"></select>
            </div>
            <div class="ti-field" style="justify-content:flex-end;">
              <label>&nbsp;</label>
              <div>
                <div style="font-size:var(--ti-label);color:#888;">Client Rcv: <strong id="ins_total_recv_disp">0.00</strong></div>
                <button class="btn btn-sm btn-primary" id="btnAddInsurance" style="height:var(--ti-input-h);font-size:var(--ti-font-sm);padding:0 10px;"><i class="fas fa-plus mr-1"></i>Add</button>
              </div>
            </div>
          </div>
          <div class="ti-grid-wrap" style="margin-top:6px;">
            <table class="ti-grid">
              <thead><tr>
                <th>#</th><th>Client</th><th>Psprt/CNIC</th><th>Company</th><th>Plan</th>
                <th>Policy#</th><th>Travel Country</th><th>Start</th><th>End</th>
                <th class="text-right">Fee</th><th class="text-right">PSF1</th><th class="text-right">PSF2</th>
                <th class="text-right">Total Recv.</th><th>Status</th><th>Vendor</th><th></th>
              </tr></thead>
              <tbody id="insuranceGrid"></tbody>
            </table>
          </div>
          <div class="ti-vsec-total">Total Insurance (PKR): <strong id="insuranceTotalDisp">0.00</strong></div>
        </div>
      </div><!-- /#secInsurance -->










    </div><!-- /.ti-body-left -->

    <!-- RIGHT PANEL -->
    <div class="ti-body-right">
      <div class="ti-actions">
        <button class="btn ti-btn-save"    id="btnSave"><i class="fas fa-save mr-1"></i>Save</button>
        <button class="btn ti-btn-add-tkt" id="btnAddTkt" style="display:none;"><i class="fas fa-plus mr-1"></i>F9 - Add Tkt</button>
        <button class="btn ti-btn-update"  id="btnUpdate" style="display:none;"><i class="fas fa-edit mr-1"></i>F7 - Update</button>
        <button class="btn ti-btn-delete"  id="btnDelete" style="display:none;"><i class="fas fa-trash mr-1"></i>Delete</button>
        <div class="mt-1">
          <select id="actionDropdown" class="form-control" style="height:var(--ti-input-h);font-size:var(--ti-font-sm);">
            <option value="">-- Actions --</option>
            <option value="refund">Create Refund</option>
            <option value="print">Internal Print</option>
            <option value="customer_invoice">Customer Invoice</option>
          </select>
        </div>
      </div>

      <div class="ti-bank-panel hidden-panel" id="bankPanel">
        <h6><i class="fas fa-university mr-1"></i>Cash Received
          <button class="btn btn-sm btn-outline-primary float-right" style="font-size:9px;padding:1px 5px;" id="btnAddBank"><i class="fas fa-plus"></i></button>
        </h6>
        <div id="bankRows"></div>
        <div class="ti-bank-total">Received: <span id="bankTotal">0.00</span></div>
        <div class="ti-balance-due" id="balanceDueRow" style="display:none;">Balance Due: <span id="balanceDue">0.00</span></div>
      </div>

      <div class="ti-refund-panel" id="refundPanel">
        <h6><i class="fas fa-undo mr-1"></i>Refund Details</h6>
        <div class="ti-refund-row"><label>Receipt No.</label><input type="text" id="rfnd_receipt_no" value="0" readonly></div>
        <div class="ti-refund-row"><label>Used Sector</label><input type="text" id="rfnd_used_sector" placeholder="Sector" data-ti-nav></div>
        <div style="border-top:1px solid #f5c6cb;margin:3px 0;"></div>
        <div class="ti-refund-row"><label>USED Fare</label><input type="number" id="rfnd_used_fare"    value="0" step="0.01" data-ti-nav data-ti-rfnd></div>
        <div class="ti-refund-row"><label>No Show/Srvc</label><input type="number" id="rfnd_no_show" value="0" step="0.01" data-ti-nav data-ti-rfnd></div>
        <div class="ti-refund-row"><label>Canx Chrgs</label><input type="number" id="rfnd_canx"       value="0" step="0.01" data-ti-nav data-ti-rfnd></div>
        <div class="ti-refund-row"><label>Comm.</label><input type="number" id="rfnd_comm"             value="0" step="0.01" data-ti-nav data-ti-rfnd></div>
        <div class="ti-refund-row"><label>Other Tax(s)</label><input type="number" id="rfnd_other_tax" value="0" step="0.01" data-ti-nav data-ti-rfnd></div>
        <div class="ti-refund-row"><label>W.H.Tax</label><input type="number" id="rfnd_wh_tax"        value="0" step="0.01" data-ti-nav data-ti-rfnd></div>
        <div class="ti-refund-row"><label>CVT/RG/FED</label><input type="number" id="rfnd_cvt"        value="0" step="0.01" data-ti-nav data-ti-rfnd></div>
        <div class="ti-refund-row"><label>PSF</label><input type="number" id="rfnd_psf"                value="0" step="0.01" data-ti-nav data-ti-rfnd></div>
        <div style="border-top:1px solid #f5c6cb;margin:3px 0;"></div>
        <div class="ti-refund-row ti-refund-output"><label>Pay to Client</label><input type="text" id="rfnd_pay_client"     value="0.00" readonly></div>
        <div class="ti-refund-row ti-refund-output"><label>Refund Airline</label><input type="text" id="rfnd_refund_airline" value="0.00" readonly></div>
        <div style="border-top:1px solid #f5c6cb;margin:3px 0;"></div>
        <div class="ti-refund-row"><label>Apply Date</label><input type="text" id="rfnd_apply_date" style="width:100%;" class="ti-datepicker" data-ti-nav placeholder="DD/MM/YYYY"></div>
        <div class="ti-refund-row"><label>Rcvd Date</label><input type="text"  id="rfnd_rcvd_date"  style="width:100%;" class="ti-datepicker" data-ti-nav placeholder="DD/MM/YYYY"></div>
      </div>
    </div><!-- /.ti-body-right -->
  </div><!-- /.ti-body -->
</div><!-- /.ti-page -->
{% endblock %}

{% block javascripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>
<script>

(function(){
'use strict';

// ═══════════════════════════════════════════════════════════════════
// CONFIG
// ═══════════════════════════════════════════════════════════════════
var API = {
  save:    "{% url 'ticket:api_ticket_save' %}",
  clients: "{% url 'ticket:api_clients_search' %}",
  agents:  "{% url 'ticket:api_agents_search' %}",
  list:    "{% url 'ticket:api_invoices_list' %}"
  {% if folder_no %}
  ,get: "{% url 'ticket:api_ticket_get' folder_no %}"
  ,apiDel: "{% url 'ticket:api_ticket_delete' folder_no %}"
  {% endif %}
};
var isEdit   = {{ is_edit_mode|yesno:"true,false" }};
var editFN   = {{ folder_no|default:0 }};
var BANKS    = [{% for b in bank_accounts %}{id:{{ b.t_id }},name:"{{ b.name|escapejs }}"},{% endfor %}];
var csrf     = '{{ csrf_token }}';
var todayISO = '{{ today }}';

// ═══════════════════════════════════════════════════════════════════
// STATE
// ═══════════════════════════════════════════════════════════════════
var ticketLines    = [];
var visaLines      = [];
var hotelLines     = [];
var transportLines = [];
var insuranceLines = [];
var activeIdx      = -1;
var isRefundMode   = false;
var _lastPsfChanged = 'pct';
var _mktFareLocked  = false;

// ═══════════════════════════════════════════════════════════════════
// UTILS
// ═══════════════════════════════════════════════════════════════════
function showL(){ $('#loadingOverlay').removeClass('hidden'); }
function hideL(){ $('#loadingOverlay').addClass('hidden'); }
function fmt(n){ return Number(n||0).toLocaleString(undefined,{minimumFractionDigits:2,maximumFractionDigits:2}); }
function fv(id){ return parseFloat($('#'+id).val())||0; }
function fvRaw(id){ return parseFloat(String($('#'+id).val()).replace(/,/g,''))||0; }
function sv(id,v){ $('#'+id).val(typeof v==='number'?fmt(v):v); }
function toast(icon,title,text){
  Swal.fire({icon:icon,title:title,text:text||'',timer:1500,toast:true,position:'top-end',showConfirmButton:false});
}

// ═══════════════════════════════════════════════════════════════════
// FLATPICKR
// ═══════════════════════════════════════════════════════════════════
function initFlatpickr(){
  document.querySelectorAll('.ti-datepicker').forEach(function(el){
    flatpickr(el,{
      dateFormat:'d/m/Y',
      allowInput:true,
      disableMobile:true,
      parseDate:function(datestr){
        var m=String(datestr).match(/^(\d{1,2})\/(\d{1,2})\/(\d{2,4})$/);
        if(!m) return undefined; // let flatpickr fall back to default handling
        var dd=parseInt(m[1],10), mm=parseInt(m[2],10), yy=parseInt(m[3],10);
        if(m[3].length<4) yy=(yy<100?2000+yy:yy);
        if(mm<1||mm>12||dd<1||dd>31) return undefined;
        return new Date(yy, mm-1, dd);
      }
    });
  });
}
function fpISO(id){
  var el=document.getElementById(id); if(!el) return '';
  var fp=el._flatpickr;
  if(fp&&fp.selectedDates&&fp.selectedDates[0]){
    var d=fp.selectedDates[0];
    return d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0')+'-'+String(d.getDate()).padStart(2,'0');
  }
  var v=el.value||'',p=v.split('/');
  return p.length===3?p[2]+'-'+p[1]+'-'+p[0]:v;
}
function fpSet(id,iso){
  var el=document.getElementById(id); if(!el) return;
  if(!iso){el.value='';if(el._flatpickr)el._flatpickr.clear();return;}
  var p=iso.split('-');
  if(p.length!==3) return;
  var disp=p[2]+'/'+p[1]+'/'+p[0];
  el.value=disp;
  if(el._flatpickr)el._flatpickr.setDate(disp,false,'d/m/Y');
}
function dateAddDays(iso,days){
  var d=new Date(iso);d.setDate(d.getDate()+days);
  return d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0')+'-'+String(d.getDate()).padStart(2,'0');
}
function dateDiffDays(iso1,iso2){
  return Math.round((new Date(iso2)-new Date(iso1))/86400000);
}

// ═══════════════════════════════════════════════════════════════════
// DATE INPUTS → AUTO-FORMAT (ddmmyy / ddmmyyyy → dd/mm/yyyy, no slashes needed)
// ═══════════════════════════════════════════════════════════════════
function maskDateInput(raw){
  var d=(raw||'').replace(/\D/g,'').slice(0,8);
  var out=d.slice(0,2);
  if(d.length>2) out+='/'+d.slice(2,4);
  if(d.length>4) out+='/'+d.slice(4,8);
  return out;
}
function finalizeDateInput(el){
  var v=$(el).val();
  var p=v.split('/');
  if(p.length!==3) return;
  var dd=parseInt(p[0],10), mm=parseInt(p[1],10), yRaw=p[2];
  if(!dd || !mm || !yRaw) return;
  var yNum=parseInt(yRaw,10);
  if(isNaN(yNum)) return;
  if(yRaw.length<4) yNum = (yNum<100 ? 2000+yNum : yNum);
  var disp=String(dd).padStart(2,'0')+'/'+String(mm).padStart(2,'0')+'/'+yNum;
  $(el).val(disp);
  var fp=el._flatpickr;
  if(fp){
    var dObj=new Date(yNum, mm-1, dd); // explicit Date object — bypasses flatpickr's string parser entirely
    fp.setDate(dObj, true);
  }
}

$(document).on('input','.ti-datepicker',function(){
  var formatted=maskDateInput($(this).val());
  if($(this).val()!==formatted) $(this).val(formatted);
});

$(document).on('blur','.ti-datepicker',function(){
  var el=this;
  setTimeout(function(){ finalizeDateInput(el); },0);
});

// ═══════════════════════════════════════════════════════════════════
// SECTION TOGGLES
// ═══════════════════════════════════════════════════════════════════
function updateToggleStyle(){
  ['ticket','visa','hotel','transport','insurance'].forEach(function(k){
    var lbl=$('#chk_'+k).closest('.ti-sec-toggle');
    $('#chk_'+k).is(':checked')?lbl.addClass('on'):lbl.removeClass('on');
  });
}
$('#chk_ticket').on('change',   function(){ $('#secTicket').toggle($(this).is(':checked'));    updateToggleStyle(); });
$('#chk_visa').on('change',     function(){ $('#secVisa').toggle($(this).is(':checked'));      updateToggleStyle(); });
$('#chk_hotel').on('change',    function(){ $('#secHotel').toggle($(this).is(':checked'));     updateToggleStyle(); });
$('#chk_transport').on('change',function(){ $('#secTransport').toggle($(this).is(':checked'));updateToggleStyle(); });
$('#chk_insurance').on('change',function(){ $('#secInsurance').toggle($(this).is(':checked'));updateToggleStyle(); });

// ═══════════════════════════════════════════════════════════════════
// CASH / CREDIT
// ═══════════════════════════════════════════════════════════════════
$('input[name="sale_type"]').on('change',function(){
  if($(this).val()==='cash') $('#bankPanel').removeClass('hidden-panel');
  else                       $('#bankPanel').addClass('hidden-panel');
  calcBankTotal();
});

// ═══════════════════════════════════════════════════════════════════
// SELECT2
// ═══════════════════════════════════════════════════════════════════
function makeAjaxS2(sel, hidId, apiUrl){
  $(sel).select2({
    placeholder:'Search...', allowClear:true,
    ajax:{url:apiUrl, dataType:'json', delay:300,
      data:function(p){return{q:p.term};},
      processResults:function(d){
        return{results:(d.clients||d.agents||[]).map(function(c){
          return{id:c.id, text:c.name+(c.phone?' — '+c.phone:'')};
        })};
      }
    }
  })
  .on('select2:select',function(e){$(hidId).val(e.params.data.id);})
  .on('select2:clear', function(){  $(hidId).val(0);});
}

function initSelect2(){
  // Client
  $('#client_select').select2({
    placeholder:'Search client...', allowClear:true,
    ajax:{url:API.clients, dataType:'json', delay:300,
      data:function(p){return{q:p.term};},
      processResults:function(d){
        return{results:(d.clients||[]).map(function(c){
          return{id:c.id, text:c.name+(c.phone?' — '+c.phone:'')};
        })};
      }
    }
  })
  .on('select2:select',function(e){
    $('#client_id').val(e.params.data.id);
    setTimeout(function(){ $('#ticket_no').focus().select(); },80);
  })
  .on('select2:clear', function(){  $('#client_id').val(0);});

  // Ticket agent
  $('#ln_agent_select').select2({
    placeholder:'Search airline/agent...', allowClear:true,
    ajax:{url:API.agents, dataType:'json', delay:300,
      data:function(p){return{q:p.term};},
      processResults:function(d){
        return{results:(d.agents||[]).map(function(a){return{id:a.id,text:a.name};})};
      }
    }
  })
  .on('select2:select',function(e){
    $('#ln_agent_id').val(e.params.data.id);
    setTimeout(function(){$('#ln_airline_select').select2('open');},80);
  })
  .on('select2:clear',function(){$('#ln_agent_id').val(0);});

  // Airline (static)
  $('#ln_airline_select').select2({placeholder:'-- Select Airline --',allowClear:true})
  .on('select2:select',function(e){
    var opt=$('#ln_airline_select option[value="'+e.params.data.id+'"]');
    if(fv('airline_com_pct')===0){$('#airline_com_pct').val(parseFloat(opt.data('com'))||0);}
    calcAll();
    setTimeout(function(){$('#ln_segment_sel').focus();},80);
  });

  // Segment
  $('#ln_segment_sel').on('change',function(){
    var v=$(this).val();
    var chg=v?parseFloat($('#ln_segment_sel option[value="'+v+'"]').data('charge'))||0:0;
    sv('seg_charge_per',chg);
    calcSegTotal();
  }).trigger('change');

  // Visa vendor
  makeAjaxS2('#v_vendor_select','#v_vendor_id',API.agents);
  // Hotel vendor
  makeAjaxS2('#h_vendor_select','#h_vendor_id',API.agents);
  // Transport vendor
  makeAjaxS2('#tr_vendor_select','#tr_vendor_id',API.agents);
  // Insurance vendor
  makeAjaxS2('#ins_vendor_select','#ins_vendor_id',API.agents);
}

// Helper: set select2 with a name/id pair
function s2Set(sel, hidId, id, name){
  $(hidId).val(id||0);
  if(id && name){
    if(!$(sel+' option[value="'+id+'"]').length)
      $(sel).append(new Option(name,id,true,true)).trigger('change');
    else
      $(sel).val(id).trigger('change');
  } else {
    $(sel).val(null).trigger('change');
  }
}

// ═══════════════════════════════════════════════════════════════════
// TICKET# → AIRLINE AUTO-DETECT
// ═══════════════════════════════════════════════════════════════════
function formatTktNo(raw){
  var digits=(raw||'').replace(/\D/g,'').slice(0,13);
  var out=digits.slice(0,3);
  if(digits.length>3) out+='-'+digits.slice(3,7);
  if(digits.length>7) out+='-'+digits.slice(7,13);
  return out;
}
$('#ticket_no').on('input',function(){
  var formatted=formatTktNo($(this).val());
  if($(this).val()!==formatted) $(this).val(formatted);
});

// ═══════════════════════════════════════════════════════════════════
// TICKET# → AIRLINE AUTO-DETECT
// ═══════════════════════════════════════════════════════════════════
$('#ticket_no').on('input',function(){
  var code=($(this).val().split('-')[0]||'').trim().toUpperCase();
  if(!code) return;
  var match=null;
  $('#ln_airline_select option').each(function(){
    if($(this).val().toUpperCase()===code){match=$(this);return false;}
  });
  if(!match||$('#ln_airline_select').val()===match.val()) return;
  $('#ln_airline_select').val(match.val()).trigger('change');
  if(fv('airline_com_pct')===0){$('#airline_com_pct').val(parseFloat(match.data('com'))||0);calcAll();}
});

// ═══════════════════════════════════════════════════════════════════
// TICKET PSF BIDIRECTIONAL
// ═══════════════════════════════════════════════════════════════════
$(document).on('input','#psf_pct',   function(){_lastPsfChanged='pct';calcAll();});
$(document).on('input','#psf_amount',function(){_lastPsfChanged='amt';calcAll();});
$(document).on('focus','#market_fare',function(){_mktFareLocked=true;});
$(document).on('input change','[data-ti-calc]',function(){
  var id=$(this).attr('id');
  if(id==='psf_pct'||id==='psf_amount') return;
  calcAll();
});
$(document).on('input change','[data-ti-rfnd]',function(){calcRefund();});

// ═══════════════════════════════════════════════════════════════════
// SEGMENT CALC
// ═══════════════════════════════════════════════════════════════════
function calcSegTotal(){
  var nos=fv('no_of_segments')||0;
  var chg=parseFloat(String($('#seg_charge_per').val()).replace(/,/g,''))||0;
  sv('seg_total',nos*chg);
}
$(document).on('input','#no_of_segments',calcSegTotal);

// ═══════════════════════════════════════════════════════════════════
// VISA CURRENCY CONVERSION
// ═══════════════════════════════════════════════════════════════════
$('#v_currency_id').on('change',function(){
  $('#v_cur_sym').text($('#v_currency_id option[value="'+$(this).val()+'"]').data('sym')||'PKR');
});
$('#v_amount_foreign').on('input',function(){
  var r=_visaRate();
  if(r>0)$('#v_amount_pkr').val(((parseFloat($(this).val())||0)*r).toFixed(2));
});
$('#v_amount_pkr').on('input',function(){
  var r=_visaRate();
  if(r>0)$('#v_amount_foreign').val(((parseFloat($(this).val())||0)/r).toFixed(2));
});
function _visaRate(){
  return parseFloat($('#v_currency_id option[value="'+$('#v_currency_id').val()+'"]').data('rate'))||1;
}

// ═══════════════════════════════════════════════════════════════════
// HOTEL DATE LOGIC
// ═══════════════════════════════════════════════════════════════════
$('#h_checkin').on('change',function(){
  var ci=fpISO('h_checkin'),dur=parseInt($('#h_duration').val())||0;
  if(ci&&dur>0) fpSet('h_checkout',dateAddDays(ci,dur));
});
$('#h_duration').on('input',function(){
  var ci=fpISO('h_checkin'),dur=parseInt($(this).val())||0;
  if(ci&&dur>0) fpSet('h_checkout',dateAddDays(ci,dur));
});
$('#h_checkout').on('change',function(){
  var ci=fpISO('h_checkin'),co=fpISO('h_checkout');
  if(ci&&co){var d=dateDiffDays(ci,co);if(d>=0)$('#h_duration').val(d);}
});


// ═══════════════════════════════════════════════════════════════════
// VISA PSF CALC  ←  NEW
// ═══════════════════════════════════════════════════════════════════
function calcVisaRow(){
  var apkr     = parseFloat($('#v_amount_pkr').val())    || 0;
  var psf1_pct = parseFloat($('#v_psf1_pct').val())      || 0;
  var psf1_amt = parseFloat($('#v_psf1_amount').val())   || 0;
  var psf2_pct = parseFloat($('#v_psf2_pct').val())      || 0;
  var psf2_amt = parseFloat($('#v_psf2_amount').val())   || 0;
  var disc_pct = parseFloat($('#v_disc_pct').val())      || 0;
  var disc_amt = parseFloat($('#v_disc_amount').val())   || 0;
  var id       = $(document.activeElement).attr('id')    || '';
 
  // Auto-compute PSF amounts from %
  if(id==='v_amount_pkr'||id==='v_psf1_pct'){
    if(psf1_pct>0){ psf1_amt=parseFloat((apkr*psf1_pct/100).toFixed(2)); $('#v_psf1_amount').val(psf1_amt); }
  }
  if(id==='v_amount_pkr'||id==='v_psf2_pct'){
    if(psf2_pct>0){ psf2_amt=parseFloat((apkr*psf2_pct/100).toFixed(2)); $('#v_psf2_amount').val(psf2_amt); }
  }
  // Back-compute % from amount
  if(id==='v_psf1_amount'&&apkr>0) $('#v_psf1_pct').val((psf1_amt/apkr*100).toFixed(3));
  if(id==='v_psf2_amount'&&apkr>0) $('#v_psf2_pct').val((psf2_amt/apkr*100).toFixed(3));
  // Discount
  if(id==='v_disc_pct'&&apkr>0){ disc_amt=parseFloat((apkr*disc_pct/100).toFixed(2)); $('#v_disc_amount').val(disc_amt); }
  if(id==='v_disc_amount'&&apkr>0) $('#v_disc_pct').val((disc_amt/apkr*100).toFixed(3));
 
  // Re-read after auto-updates
  psf1_amt = parseFloat($('#v_psf1_amount').val()) || 0;
  psf2_amt = parseFloat($('#v_psf2_amount').val()) || 0;
  disc_amt = parseFloat($('#v_disc_amount').val()) || 0;
 
  var cust_recv = apkr + psf1_amt + psf2_amt;
  var vend_pay  = apkr - disc_amt;   // vendor ko sirf base amount minus discount
  $('#v_customer_receivable').val(cust_recv.toFixed(2));
  $('#v_vendor_payable').val(vend_pay.toFixed(2));
}
 
$(document).on('input','#v_amount_pkr,#v_psf1_pct,#v_psf1_amount,#v_psf2_pct,#v_psf2_amount,#v_disc_pct,#v_disc_amount', function(){
  calcVisaRow();
  calcStripTotals();
});
 
// ═══════════════════════════════════════════════════════════════════
// HOTEL PSF CALC  ←  NEW
// ═══════════════════════════════════════════════════════════════════
function calcHotelRow(){
  var rent     = parseFloat($('#h_rent').val())           || 0;
  var psf1_pct = parseFloat($('#h_psf1_pct').val())      || 0;
  var psf1_amt = parseFloat($('#h_psf1_amount').val())   || 0;
  var psf2_pct = parseFloat($('#h_psf2_pct').val())      || 0;
  var psf2_amt = parseFloat($('#h_psf2_amount').val())   || 0;
  var disc_pct = parseFloat($('#h_disc_pct').val())      || 0;
  var disc_amt = parseFloat($('#h_disc_amount').val())   || 0;
  var id       = $(document.activeElement).attr('id')    || '';
 
  // Auto-compute PSF amounts from %
  if(id==='h_rent'||id==='h_psf1_pct'){
    if(psf1_pct>0){ psf1_amt=parseFloat((rent*psf1_pct/100).toFixed(2)); $('#h_psf1_amount').val(psf1_amt); }
  }
  if(id==='h_rent'||id==='h_psf2_pct'){
    if(psf2_pct>0){ psf2_amt=parseFloat((rent*psf2_pct/100).toFixed(2)); $('#h_psf2_amount').val(psf2_amt); }
  }
  // Back-compute %
  if(id==='h_psf1_amount'&&rent>0) $('#h_psf1_pct').val((psf1_amt/rent*100).toFixed(3));
  if(id==='h_psf2_amount'&&rent>0) $('#h_psf2_pct').val((psf2_amt/rent*100).toFixed(3));
  // Discount
  if(id==='h_disc_pct'&&rent>0){ disc_amt=parseFloat((rent*disc_pct/100).toFixed(2)); $('#h_disc_amount').val(disc_amt); }
  if(id==='h_disc_amount'&&rent>0) $('#h_disc_pct').val((disc_amt/rent*100).toFixed(3));
 
  // Re-read after auto-updates
  psf1_amt = parseFloat($('#h_psf1_amount').val()) || 0;
  psf2_amt = parseFloat($('#h_psf2_amount').val()) || 0;
  disc_amt = parseFloat($('#h_disc_amount').val()) || 0;
 
  var cust_recv = rent + psf1_amt + psf2_amt;
  var vend_pay  = rent - disc_amt;   // vendor ko sirf rent minus discount
  $('#h_customer_receivable').val(cust_recv.toFixed(2));
  $('#h_vendor_payable').val(vend_pay.toFixed(2));
}
 
$(document).on('input','#h_rent,#h_psf1_pct,#h_psf1_amount,#h_psf2_pct,#h_psf2_amount,#h_disc_pct,#h_disc_amount', function(){
  calcHotelRow();
  calcStripTotals();
});
 
 

// ═══════════════════════════════════════════════════════════════════
// TRANSPORT PSF CALC
// ═══════════════════════════════════════════════════════════════════
$(document).on('input','#tr_decided_fare,#tr_psf1_pct,#tr_psf1_amt,#tr_psf2_pct,#tr_psf2_amt',function(){
  var fare=parseFloat($('#tr_decided_fare').val())||0;
  var id=$(this).attr('id');
  if(id==='tr_decided_fare'||id==='tr_psf1_pct'){
    var p1=parseFloat($('#tr_psf1_pct').val())||0;
    if(p1>0)$('#tr_psf1_amt').val((fare*p1/100).toFixed(2));
  }
  if(id==='tr_decided_fare'||id==='tr_psf2_pct'){
    var p2=parseFloat($('#tr_psf2_pct').val())||0;
    if(p2>0)$('#tr_psf2_amt').val((fare*p2/100).toFixed(2));
  }
  if(id==='tr_psf1_amt'&&fare>0)$('#tr_psf1_pct').val(((parseFloat($('#tr_psf1_amt').val())||0)/fare*100).toFixed(3));
  if(id==='tr_psf2_amt'&&fare>0)$('#tr_psf2_pct').val(((parseFloat($('#tr_psf2_amt').val())||0)/fare*100).toFixed(3));
  var total=fare+(parseFloat($('#tr_psf1_amt').val())||0)+(parseFloat($('#tr_psf2_amt').val())||0);
  $('#tr_total_recv_disp').text(fmt(total));
});

// ═══════════════════════════════════════════════════════════════════
// INSURANCE PSF CALC
// ═══════════════════════════════════════════════════════════════════
$(document).on('input','#ins_fee,#ins_psf1_pct,#ins_psf1_amt,#ins_psf2_pct,#ins_psf2_amt',function(){
  var fee=parseFloat($('#ins_fee').val())||0;
  var id=$(this).attr('id');
  if(id==='ins_fee'||id==='ins_psf1_pct'){
    var p1=parseFloat($('#ins_psf1_pct').val())||0;
    if(p1>0)$('#ins_psf1_amt').val((fee*p1/100).toFixed(2));
  }
  if(id==='ins_fee'||id==='ins_psf2_pct'){
    var p2=parseFloat($('#ins_psf2_pct').val())||0;
    if(p2>0)$('#ins_psf2_amt').val((fee*p2/100).toFixed(2));
  }
  if(id==='ins_psf1_amt'&&fee>0)$('#ins_psf1_pct').val(((parseFloat($('#ins_psf1_amt').val())||0)/fee*100).toFixed(3));
  if(id==='ins_psf2_amt'&&fee>0)$('#ins_psf2_pct').val(((parseFloat($('#ins_psf2_amt').val())||0)/fee*100).toFixed(3));
  var total=fee+(parseFloat($('#ins_psf1_amt').val())||0)+(parseFloat($('#ins_psf2_amt').val())||0);
  $('#ins_total_recv_disp').text(fmt(total));
});

// ═══════════════════════════════════════════════════════════════════
// CALC ENGINE (TICKET)
// ═══════════════════════════════════════════════════════════════════
function calcAll(){
  var iataFare=fv('iata_fare');
  if(!_mktFareLocked && iataFare>0) $('#market_fare').val(iataFare);

  var t1=fv('tax1'),t2=fv('tax2'),t3=fv('tax3'),t4=fv('tax4'),ot=fv('other_tx_chrgs');
  var totalTxs=t1+t2+t3+t4+ot;
  var mf=fv('market_fare');
  var farePlusTxs=mf+totalTxs;
  sv('total_txs',totalTxs); sv('fare_plus_txs',farePlusTxs);

  var comPct=fv('airline_com_pct'), commAmt=iataFare*comPct/100;
  sv('comm_amount',commAmt);
  var psaPct=fv('psa_gsa_pct'), psaAmt=iataFare*psaPct/100;
  sv('psa_gsa_amount',psaAmt);
  var comAdj=fv('com_adjustment'), totComm=commAmt+psaAmt+comAdj;
  sv('tot_commission',totComm);

  var psfAmt,psfPct;
  if(_lastPsfChanged==='pct'){
    psfPct=fv('psf_pct');
    psfAmt=mf>0?mf*psfPct/100:0;
    $('#psf_amount').val(psfAmt?psfAmt.toFixed(2):'0');
  }else{
    psfAmt=fv('psf_amount');
    psfPct=mf>0?(psfAmt/mf)*100:0;
    $('#psf_pct').val(psfPct?psfPct.toFixed(3):'0');
  }
  psfAmt=fv('psf_amount');
  var spDisc=fv('sp_disc_amount');

  sv('incentive_airline',totComm); sv('add_psf_amount',psfAmt);
  sv('less_sp',spDisc); sv('other_srvs_income',0);
  var totalIncome=totComm+psfAmt-spDisc;
  sv('total_income',totalIncome); sv('ticket_value',farePlusTxs);
  var receivable=farePlusTxs+psfAmt-spDisc;
  var payable=farePlusTxs-totComm;
  sv('ln_receivable',receivable); sv('ln_payable',payable);

  calcSegTotal();

  if(activeIdx>=0 && ticketLines[activeIdx]){
    var ln=ticketLines[activeIdx];
    ln.total_txs=totalTxs; ln.fare_plus_txs=farePlusTxs; ln.tot_commission=totComm;
    ln.psf_amount=psfAmt; ln.total_income=totalIncome; ln.ticket_value=farePlusTxs;
    ln.receivable=receivable; ln.payable=payable; ln.market_fare=mf; ln.sp_disc_amount=spDisc;
    ln.no_of_segments=fv('no_of_segments');
    ln.segment_total=fvRaw('seg_total');
  }
  calcStripTotals();
  if(isRefundMode) calcRefund();
}

function calcRefund(){
  var uf=fv('rfnd_used_fare'),ns=fv('rfnd_no_show'),cx=fv('rfnd_canx');
  var cm=fv('rfnd_comm'),otx=fv('rfnd_other_tax'),wh=fv('rfnd_wh_tax');
  var cvt=fv('rfnd_cvt'),psf=fv('rfnd_psf');
  var payClient=fvRaw('fare_plus_txs')-(uf+ns+cx+otx+wh+cvt+psf)+cm;
  sv('rfnd_pay_client',payClient); sv('rfnd_refund_airline',payClient);
}

function calcStripTotals(){
  // Sync active ticket line
  if(activeIdx>=0 && ticketLines[activeIdx]){
    ticketLines[activeIdx].receivable=fvRaw('ln_receivable');
    ticketLines[activeIdx].payable=fvRaw('ln_payable');
    if(ticketLines[activeIdx].refund)
      ticketLines[activeIdx].refund.pay_to_client=fvRaw('rfnd_pay_client');
  }

  var totRecv=0, totPay=0, totRfndPay=0;
  ticketLines.forEach(function(ln){
    totRecv+=ln.receivable||0; totPay+=ln.payable||0;
    if(ln.refund) totRfndPay+=ln.refund.pay_to_client||0;
  });
  if(!ticketLines.length){totRecv=fvRaw('ln_receivable');totPay=fvRaw('ln_payable');}

   
  var totVisa=0;       visaLines.forEach(function(vl){totVisa+=(vl.customer_receivable||vl.amount_pkr||0);});
  var totHotel=0;      hotelLines.forEach(function(hl){totHotel+=(hl.customer_receivable||hl.rent_amount||0);});
 
 
  var totTransport=0;  transportLines.forEach(function(tl){totTransport+=tl.total_receivable||0;});
  var totInsurance=0;  insuranceLines.forEach(function(il){totInsurance+=il.total_receivable||0;});
  var grand=totRecv+totVisa+totHotel+totTransport+totInsurance;

  sv('strip_receivable',totRecv); sv('strip_payable',totPay);
  sv('strip_visa_total',totVisa); sv('strip_hotel_total',totHotel);
  sv('strip_rfnd_pay_client',totRfndPay); sv('strip_rfnd_rcv_airline',totRfndPay);
  sv('strip_net_net',grand);
  $('#grand_total_rcvable').text(fmt(grand));
  $('#visaTotalDisp').text(fmt(totVisa));
  $('#hotelTotalDisp').text(fmt(totHotel));
  if($('#transportTotalDisp').length) $('#transportTotalDisp').text(fmt(totTransport));
  if($('#insuranceTotalDisp').length) $('#insuranceTotalDisp').text(fmt(totInsurance));
  renderGrid(); calcBankTotal();
}

// ═══════════════════════════════════════════════════════════════════
// KEYBOARD FOCUS FLOW
// ═══════════════════════════════════════════════════════════════════

// ── Ticket section: PNR -> Agent select2 ──
$('#invoice_date').on('keydown',function(e){
  if(e.key!=='Enter') return;
  e.preventDefault();
  setTimeout(function(){ $('#client_select').select2('open'); },50);
});
$('#pnr').on('keydown',function(e){
  if(e.key!=='Enter') return;  e.preventDefault(); e.stopImmediatePropagation();
  $('#ln_agent_select').select2('open');
  setTimeout(function(){var sf=document.querySelector('.select2-container--open .select2-search__field');if(sf)sf.focus();},80);
});
$('#ln_segment_sel').on('keydown',function(e){
  if(e.key==='Enter'){e.preventDefault();setTimeout(function(){$('#pax_title').focus();},50);}
});
$('#sp_disc_amount').on('keydown',function(e){
  if(e.key==='Enter'){e.preventDefault();e.stopImmediatePropagation();$('#btnAddTkt').trigger('click');}
});

// ── VISA SECTION: Enter key flow ──
// Field order: v_name > v_passport > v_visa_no > v_travel_country >
//              v_amount_foreign > v_amount_pkr > v_psf1_pct > v_psf1_amount >
//              v_psf2_pct > v_psf2_amount > v_disc_pct > v_disc_amount > v_vendor_select (last: Add)
var VISA_NAV = [
  'v_name','v_passport','v_visa_no','v_travel_country',
  'v_amount_foreign','v_amount_pkr',
  'v_psf1_pct','v_psf1_amount','v_psf2_pct','v_psf2_amount',
  'v_disc_pct','v_disc_amount'
];
$(document).on('keydown', '#secVisa input[type="text"],#secVisa input[type="number"]', function(e){
  if(e.key!=='Enter') return;
  var id = $(this).attr('id');
  if(!id) return;
  e.preventDefault(); e.stopPropagation();
  var idx = VISA_NAV.indexOf(id);
  if(idx >= 0 && idx < VISA_NAV.length - 1){
    $('#'+VISA_NAV[idx+1]).focus().select();
  } else {
    // last input or unknown -> open vendor select2 or click Add
    if(id==='v_disc_amount'){
      $('#v_vendor_select').select2('open');
      setTimeout(function(){var sf=document.querySelector('.select2-container--open .select2-search__field');if(sf)sf.focus();},80);
    } else {
      // disc_pct or any other -> next in VISA_NAV
      $('#btnAddVisa').trigger('click');
    }
  }
});
// v_vendor_select: Enter -> Add
$(document).on('keydown','#secVisa',function(e){
  if(e.key==='Enter' && document.activeElement && document.activeElement.id==='v_disc_amount'){
    // handled above
  }
});
// After select2 closes in visa section, click Add
$('#v_vendor_select').on('select2:close',function(){
  setTimeout(function(){
    if($('#secVisa').is(':visible')) $('#btnAddVisa').trigger('click');
  },120);
});

// ── HOTEL SECTION: Enter key flow ──
// Field order: h_pax_name > h_passport > h_visa_no >
//              h_duration > h_hotel_name >
//              h_rent > h_psf1_pct > h_psf1_amount > h_psf2_pct > h_psf2_amount >
//              h_disc_pct > h_disc_amount > h_vendor_select (last: Add)
var HOTEL_NAV = [
  'h_pax_name','h_passport','h_visa_no',
  'h_duration','h_hotel_name',
  'h_rent','h_psf1_pct','h_psf1_amount','h_psf2_pct','h_psf2_amount',
  'h_disc_pct','h_disc_amount'
];
$(document).on('keydown','#secHotel input[type="text"],#secHotel input[type="number"]',function(e){
  if(e.key!=='Enter') return;
  var id = $(this).attr('id');
  if(!id) return;
  e.preventDefault(); e.stopPropagation();
  var idx = HOTEL_NAV.indexOf(id);
  if(idx >= 0 && idx < HOTEL_NAV.length - 1){
    $('#'+HOTEL_NAV[idx+1]).focus().select();
  } else if(id==='h_disc_amount'){
    $('#h_vendor_select').select2('open');
    setTimeout(function(){var sf=document.querySelector('.select2-container--open .select2-search__field');if(sf)sf.focus();},80);
  } else {
    $('#btnAddHotel').trigger('click');
  }
});
$('#h_vendor_select').on('select2:close',function(){
  setTimeout(function(){
    if($('#secHotel').is(':visible')) $('#btnAddHotel').trigger('click');
  },120);
});

// ── GLOBAL [data-ti-nav] handler (ticket section only) ──
function focusField($el){
  if(!$el||!$el.length) return;
  if($el.hasClass('select2-hidden-accessible')){
    $el.select2('open');
  }else{
    $el.focus();
    if($el.is('input,textarea')) $el.select();
  }
}
$(document).on('keydown','[data-ti-nav]',function(e){
  if(e.key!=='Enter' && e.key!=='Tab') return;
  if(e.key==='Tab' && e.shiftKey) return; // allow native backward tab
  var id=$(this).attr('id');
  // skip IDs handled separately
  if(id==='pnr'||id==='sp_disc_amount'||id==='invoice_date') return;
  // skip visa/hotel section inputs (they have their own handlers)
  if($(this).closest('#secVisa,#secHotel').length) return;
  e.preventDefault();
  var all=$('[data-ti-nav]:visible').not('#secVisa *').not('#secHotel *');
  var idx=all.index(this);
  if(idx<all.length-1) focusField(all.eq(idx+1));
});

// ═══════════════════════════════════════════════════════════════════
// TICKET LINE: COLLECT / LOAD
// ═══════════════════════════════════════════════════════════════════
function collectCurrentLine(){
  var airOpt=$('#ln_airline_select option[value="'+$('#ln_airline_select').val()+'"]');
  var segOpt=$('#ln_segment_sel option[value="'+$('#ln_segment_sel').val()+'"]');
  var noSegs=fv('no_of_segments');
  var segChg=parseFloat(String($('#seg_charge_per').val()).replace(/,/g,''))||0;
  return {
    agent_id:           parseInt($('#ln_agent_id').val())||0,
    agent_name:         $('#ln_agent_select').find(':selected').text()||'',
    airline_code:       $('#ln_airline_select').val()||'',
    airline_name:       airOpt.data('name')||'',
    segment_id:         parseInt($('#ln_segment_sel').val())||0,
    segment_name:       (segOpt.length?segOpt.data('name'):'')||'',
    no_of_segments:     noSegs,
    segment_charge_per: segChg,
    segment_total:      noSegs*segChg,
    flight_type:        $('#flight_type').val(),
    ticket_no:          $('#ticket_no').val(),
    flight_no:          $('#flight_no').val(),
    flight_class:       $('#flight_class').val(),
    dep_date:           fpISO('dep_date'),
    sector:             $('#sector').val(),
    tkt_issue_date:     fpISO('tkt_issue_date'),
    route:              $('#route').val(),
    pnr:                $('#pnr').val(),
    flight_notes:       '',
    pax_title:          $('#pax_title').val(),
    pax_name:           $('#pax_name').val(),
    remarks:            $('#tkt_remarks').val(),
    iata_fare:fv('iata_fare'), market_fare:fv('market_fare'),
    tax1:fv('tax1'), tax2:fv('tax2'), tax3:fv('tax3'), tax4:fv('tax4'),
    other_tx_chrgs:fv('other_tx_chrgs'),
    total_txs:fvRaw('total_txs'), fare_plus_txs:fvRaw('fare_plus_txs'),
    airline_com_pct:fv('airline_com_pct'), comm_amount:fvRaw('comm_amount'),
    psa_gsa_pct:fv('psa_gsa_pct'), psa_gsa_amount:fvRaw('psa_gsa_amount'),
    com_adjustment:fv('com_adjustment'), tot_commission:fvRaw('tot_commission'),
    psf_pct:fv('psf_pct'), psf_amount:fv('psf_amount'), psf_fix:false,
    adj_pct:fv('adj_pct'), adjustment:fv('adjustment_amt'),
    sp_disc_pct:fv('sp_disc_pct'), sp_disc_amount:fv('sp_disc_amount'), other_services:0,
    incentive_airline:fvRaw('incentive_airline'), add_psf_amount:fvRaw('add_psf_amount'),
    less_sp:fvRaw('less_sp'), other_srvs_income:0, total_income:fvRaw('total_income'),
    ticket_value:fvRaw('ticket_value'), receivable:fvRaw('ln_receivable'), payable:fvRaw('ln_payable'),
    refund: isRefundMode ? {
      receipt_no:     parseInt($('#rfnd_receipt_no').val())||0,
      used_sector:    $('#rfnd_used_sector').val(),
      used_fare:      fv('rfnd_used_fare'), no_show_srvc:fv('rfnd_no_show'),
      canx_chrgs:     fv('rfnd_canx'),      commission:fv('rfnd_comm'),
      other_taxes:    fv('rfnd_other_tax'), wh_tax:fv('rfnd_wh_tax'),
      cvt_rg_fed_tx:  fv('rfnd_cvt'),       psf:fv('rfnd_psf'),
      pay_to_client:  fvRaw('rfnd_pay_client'), refund_airline:fvRaw('rfnd_refund_airline'),
      apply_date:fpISO('rfnd_apply_date'), rcvd_date:fpISO('rfnd_rcvd_date'),
    } : null
  };
}

function loadLineToForm(ln){
  _lastPsfChanged='pct';
  _mktFareLocked=false;

  s2Set('#ln_agent_select','#ln_agent_id', ln.agent_id, ln.agent_name);

  if(ln.airline_code) $('#ln_airline_select').val(ln.airline_code).trigger('change');
  else                $('#ln_airline_select').val('').trigger('change');

  if(ln.segment_id)   $('#ln_segment_sel').val(ln.segment_id).trigger('change');
  else                $('#ln_segment_sel').val('').trigger('change');
  $('#no_of_segments').val(ln.no_of_segments||0);

  $('#flight_type').val(ln.flight_type||'INTER');
  $('#ticket_no').val(ln.ticket_no||'');
  $('#flight_no').val(ln.flight_no||'');
  $('#flight_class').val(ln.flight_class||'');
  fpSet('dep_date',ln.dep_date);
  $('#sector').val(ln.sector||'');
  fpSet('tkt_issue_date',ln.tkt_issue_date);
  $('#route').val(ln.route||'ONE');
  $('#pnr').val(ln.pnr||'');
  $('#pax_title').val(ln.pax_title||'ADULT');
  $('#pax_name').val(ln.pax_name||'');
  $('#tkt_remarks').val(ln.remarks||'');

  $('#iata_fare').val(ln.iata_fare||0);
  $('#market_fare').val(ln.market_fare||0);
  $('#tax1').val(ln.tax1||0); $('#tax2').val(ln.tax2||0);
  $('#tax3').val(ln.tax3||0); $('#tax4').val(ln.tax4||0);
  $('#other_tx_chrgs').val(ln.other_tx_chrgs||0);
  $('#airline_com_pct').val(ln.airline_com_pct||0);
  $('#psa_gsa_pct').val(ln.psa_gsa_pct||0);
  $('#com_adjustment').val(ln.com_adjustment||0);
  $('#psf_pct').val(ln.psf_pct||0);
  $('#psf_amount').val(ln.psf_amount||0);
  $('#adj_pct').val(ln.adj_pct||0);
  $('#adjustment_amt').val(ln.adjustment||0);
  $('#sp_disc_pct').val(ln.sp_disc_pct||0);
  $('#sp_disc_amount').val(ln.sp_disc_amount||0);

  if(ln.refund){
    $('#rfnd_used_sector').val(ln.refund.used_sector||'');
    $('#rfnd_used_fare').val(ln.refund.used_fare||0);
    $('#rfnd_no_show').val(ln.refund.no_show_srvc||0);
    $('#rfnd_canx').val(ln.refund.canx_chrgs||0);
    $('#rfnd_comm').val(ln.refund.commission||0);
    $('#rfnd_other_tax').val(ln.refund.other_taxes||0);
    $('#rfnd_wh_tax').val(ln.refund.wh_tax||0);
    $('#rfnd_cvt').val(ln.refund.cvt_rg_fed_tx||0);
    $('#rfnd_psf').val(ln.refund.psf||0);
    fpSet('rfnd_apply_date',ln.refund.apply_date);
    fpSet('rfnd_rcvd_date',ln.refund.rcvd_date);
  }

  _mktFareLocked=true;
  calcAll();
  _mktFareLocked=false;
}

// ═══════════════════════════════════════════════════════════════════
// TICKET GRID
// ═══════════════════════════════════════════════════════════════════
function renderGrid(){
  var html='';
  ticketLines.forEach(function(ln,i){
    var isa=(i===activeIdx);
    var rfndPay=ln.refund?(ln.refund.pay_to_client||0):0;
    var airCell=ln.airline_code?'<span style="background:var(--ti-blue);color:#fff;font-size:.62rem;font-weight:700;padding:1px 4px;border-radius:2px;">'+ln.airline_code+'</span>':'—';
    var agentCell=ln.agent_name?'<span style="font-size:.62rem;color:#555;">'+ln.agent_name+'</span>':'<em class="text-muted" style="font-size:.62rem;">—</em>';
    var segCell=ln.segment_name?'<span style="font-size:.62rem;color:#555;">'+ln.segment_name+'</span>':'—';
    html+='<tr class="'+(isa?'active':'')+'" data-idx="'+i+'">'+
      '<td>'+(i+1)+'</td>'+
      '<td>'+(ln.ticket_no||'<em class="text-muted">—</em>')+'</td>'+
      '<td>'+(ln.pax_name||'<em class="text-muted">—</em>')+'</td>'+
      '<td>'+(ln.sector||'')+'</td>'+
      '<td>'+airCell+'</td>'+
      '<td>'+agentCell+'</td>'+
      '<td>'+segCell+'</td>'+
      '<td class="text-right">'+fmt(ln.market_fare||0)+'</td>'+
      '<td class="text-right">'+fmt(ln.total_txs||0)+'</td>'+
      '<td class="text-right"><strong>'+fmt(ln.receivable||0)+'</strong></td>'+
      '<td><span class="ti-status-badge '+(isRefundMode?'ti-badge-refunded':'ti-badge-issued')+'">'+(isRefundMode?'RFND':'ISS')+'</span></td>'+
      '<td class="text-right">'+fmt(ln.segment_total||0)+'</td>'+
      '<td class="text-right">'+fmt(rfndPay)+'</td>'+
      '<td><button class="btn btn-sm btn-outline-danger ti-grid-del" data-delidx="'+i+'" style="padding:0 4px;font-size:10px;"><i class="fas fa-times"></i></button></td>'+
      '</tr>';
  });
  $('#gridBody').html(html||'<tr><td colspan="14" class="text-center text-muted" style="font-size:.68rem;padding:6px;">No tickets added</td></tr>');
  if(activeIdx>=0 && ticketLines.length>0){
    $('#editHintIdx').text(ticketLines[activeIdx].ticket_no||'#'+(activeIdx+1));
    $('#editHint').addClass('show');
  }else{$('#editHint').removeClass('show');}
}

$(document).on('click','#gridBody tr',function(e){
  if($(e.target).closest('.ti-grid-del').length) return;
  var idx=$(this).data('idx');
  if(idx===activeIdx) return;
  if(activeIdx>=0) ticketLines[activeIdx]=collectCurrentLine();
  activeIdx=idx; loadLineToForm(ticketLines[idx]); renderGrid();
});

$(document).on('click','.ti-grid-del',function(e){
  e.stopPropagation();
  var idx=$(this).data('delidx');
  ticketLines.splice(idx,1);
  if(activeIdx>=ticketLines.length) activeIdx=ticketLines.length-1;
  if(activeIdx>=0) loadLineToForm(ticketLines[activeIdx]);
  else            calcStripTotals();
});

$('#btnAddTkt').on('click',function(){
  var cur=collectCurrentLine();
  if(activeIdx>=0){
    ticketLines[activeIdx]=cur;
  }else{
    var tno=(cur.ticket_no||'').trim();
    var dupIdx=tno?ticketLines.findIndex(function(l){return(l.ticket_no||'').trim()===tno;}):-1;
    if(dupIdx>=0){
      ticketLines[dupIdx]=cur;
      toast('info','Updated','Ticket #'+tno+' updated.');
    }else{
      ticketLines.push(cur);
    }
  }
  activeIdx=-1; _mktFareLocked=false; _lastPsfChanged='pct';
  calcStripTotals(); $('#ticket_no').focus().select();
});

// ═══════════════════════════════════════════════════════════════════
// VISA LINES
// ═══════════════════════════════════════════════════════════════════
function _collectVisa(){
  var rate=_visaRate();
  var af=parseFloat($('#v_amount_foreign').val())||0;
  var apkr=parseFloat($('#v_amount_pkr').val())||(af*rate);
  var curId=parseInt($('#v_currency_id').val())||0;
  var curSym=$('#v_currency_id option[value="'+$('#v_currency_id').val()+'"]').data('sym')||'PKR';

  var vPsf1Amt  = parseFloat($('#v_psf1_amount').val()) || 0;
  var vPsf2Amt  = parseFloat($('#v_psf2_amount').val()) || 0;
  var vDiscAmt  = parseFloat($('#v_disc_amount').val())  || 0;
  var vCustRecv = parseFloat($('#v_customer_receivable').val()) || (apkr + vPsf1Amt + vPsf2Amt);
  var vVendPay  = parseFloat($('#v_vendor_payable').val())      || (vCustRecv - vDiscAmt);
  return {
    name:               $('#v_name').val().trim(),
    passport_no:        $('#v_passport').val(),
    visa_no:            $('#v_visa_no').val(),
    visa_type:          $('#v_visa_type').val()||'',
    travel_country:     $('#v_travel_country').val()||'',
    passport_expiry:    fpISO('v_passport_expiry'),
    issue_date:         fpISO('v_issue_date'),
    dob:                fpISO('v_dob'),
    duration_of_stay:   $('#v_duration').val(),
    departure_date:     fpISO('v_dep_date'),
    return_date:        fpISO('v_ret_date'),
    currency_id:        curId,
    exchange_rate_used: rate,
    currency_sym:       curSym,
    amount_foreign:     af,
    amount_pkr:         apkr,
    psf1_pct:           parseFloat($('#v_psf1_pct').val())    || 0,
    psf1_amount:        vPsf1Amt,
    psf2_pct:           parseFloat($('#v_psf2_pct').val())    || 0,
    psf2_amount:        vPsf2Amt,
    customer_receivable:vCustRecv,
    disc_pct:           parseFloat($('#v_disc_pct').val())    || 0,
    disc_amount:        vDiscAmt,
    vendor_payable:     vVendPay,
    vendor_id:          parseInt($('#v_vendor_id').val())||0,
    vendor_name:        $('#v_vendor_select').find(':selected').text()||''
  };
 



  
}

function _clearVisa(){
  $('#v_name,#v_passport,#v_visa_no,#v_travel_country,#v_duration').val('');
  $('#v_visa_type').val('');
  ['v_passport_expiry','v_issue_date','v_dob','v_dep_date','v_ret_date'].forEach(function(id){fpSet(id,'');});
  $('#v_amount_foreign,#v_amount_pkr').val('0');
  $('#v_currency_id').val('').trigger('change');
  s2Set('#v_vendor_select','#v_vendor_id',0,'');
  $('#v_name').focus();
}

$('#btnAddVisa').on('click',function(){
  var vd=_collectVisa();
  if(!vd.name){Swal.fire('Validation','Passenger name required.','warning');return;}
  visaLines.push(vd);
  renderVisaGrid(); calcStripTotals(); _clearVisa();
});

function renderVisaGrid(){
  var h='';
  visaLines.forEach(function(vl,i){
    h+='<tr>'+
      '<td>'+(i+1)+'</td>'+
      '<td>'+vl.name+'</td>'+
      '<td>'+(vl.passport_no||'')+'</td>'+
      '<td>'+(vl.visa_no||'')+'</td>'+
      '<td style="font-size:.62rem;">'+(vl.visa_type||'')+'</td>'+
      '<td>'+(vl.travel_country||'')+'</td>'+
      '<td>'+(vl.passport_expiry||'')+'</td>'+
      '<td>'+(vl.issue_date||'')+'</td>'+
      '<td>'+(vl.dob||'')+'</td>'+
      '<td>'+(vl.duration_of_stay||'')+'</td>'+
      '<td>'+(vl.departure_date||'')+'</td>'+
      '<td>'+(vl.return_date||'')+'</td>'+
      '<td>'+(vl.currency_sym||'PKR')+'</td>'+
      '<td class="text-right">'+fmt(vl.amount_foreign||0)+'</td>'+
      '<td class="text-right"><strong>'+fmt(vl.amount_pkr||0)+'</strong></td>'+
      '<td class="text-right">'+fmt(vl.psf1_amount||0)+'</td>'+
      '<td class="text-right">'+fmt(vl.psf2_amount||0)+'</td>'+
      '<td class="text-right" style="background:#d4edda;"><strong>'+fmt(vl.customer_receivable||0)+'</strong></td>'+
      '<td class="text-right">'+fmt(vl.disc_amount||0)+'</td>'+
      '<td class="text-right" style="background:#f8d7da;"><strong>'+fmt(vl.vendor_payable||0)+'</strong></td>'+
      '<td style="font-size:.62rem;">'+(vl.vendor_name||'')+'</td>'+
      '<td><button class="btn btn-outline-danger visa-del" data-di="'+i+'" style="padding:0 4px;font-size:10px;"><i class="fas fa-times"></i></button></td>'+
      '</tr>';
  });
  $('#visaGrid').html(h||'<tr><td colspan="22" class="text-center text-muted" style="font-size:.68rem;padding:5px;">No entries</td></tr>');
  $('#visaCountBadge').text(visaLines.length+' entr'+(visaLines.length===1?'y':'ies'));
}

$(document).on('click','.visa-del',function(e){
  e.stopPropagation();
  visaLines.splice($(this).data('di'),1); renderVisaGrid(); calcStripTotals();
});

$(document).on('dblclick','#visaGrid tr',function(){
  var i=parseInt($(this).find('.visa-del').data('di'));
  if(isNaN(i)) return;
  var vl=visaLines[i]; if(!vl) return;
  visaLines.splice(i,1); renderVisaGrid(); calcStripTotals();
  $('#v_name').val(vl.name||'');
  $('#v_passport').val(vl.passport_no||'');
  $('#v_visa_no').val(vl.visa_no||'');
  $('#v_visa_type').val(vl.visa_type||'');
  $('#v_travel_country').val(vl.travel_country||'');
  fpSet('v_passport_expiry',vl.passport_expiry||'');
  fpSet('v_issue_date',vl.issue_date||'');
  fpSet('v_dob',vl.dob||'');
  $('#v_duration').val(vl.duration_of_stay||'');
  fpSet('v_dep_date',vl.departure_date||'');
  fpSet('v_ret_date',vl.return_date||'');
  
  $('#v_currency_id').val(vl.currency_id||'').trigger('change');
  $('#v_amount_foreign').val(vl.amount_foreign||0);
  $('#v_amount_pkr').val(vl.amount_pkr||0);
  $('#v_psf1_pct').val(vl.psf1_pct||0);
  $('#v_psf1_amount').val(vl.psf1_amount||0);
  $('#v_psf2_pct').val(vl.psf2_pct||0);
  $('#v_psf2_amount').val(vl.psf2_amount||0);
  $('#v_disc_pct').val(vl.disc_pct||0);
  $('#v_disc_amount').val(vl.disc_amount||0);
  $('#v_customer_receivable').val((vl.customer_receivable||0).toFixed(2));
  $('#v_vendor_payable').val((vl.vendor_payable||0).toFixed(2));
  s2Set('#v_vendor_select','#v_vendor_id',vl.vendor_id,vl.vendor_name);
  toast('info','Edit Mode','Visa row removed. Update and click Add.');
  $('#v_name').focus();
 
});

// ═══════════════════════════════════════════════════════════════════
// HOTEL LINES
// ═══════════════════════════════════════════════════════════════════
function _collectHotel(){
  var ci=fpISO('h_checkin'),co=fpISO('h_checkout'),dur=parseInt($('#h_duration').val())||0;

  var hRent     = parseFloat($('#h_rent').val())              || 0;
  var hPsf1Amt  = parseFloat($('#h_psf1_amount').val())       || 0;
  var hPsf2Amt  = parseFloat($('#h_psf2_amount').val())       || 0;
  var hDiscAmt  = parseFloat($('#h_disc_amount').val())       || 0;
  var hCustRecv = parseFloat($('#h_customer_receivable').val()) || (hRent + hPsf1Amt + hPsf2Amt);
  var hVendPay  = parseFloat($('#h_vendor_payable').val())      || (hCustRecv - hDiscAmt);
  return {
    passenger_name:     $('#h_pax_name').val().trim(),
    passport_no:        $('#h_passport').val(),
    visa_no:            $('#h_visa_no').val(),
    issue_date:         fpISO('h_issue_date'),
    checkin_date:       ci,
    duration_of_stay:   dur,
    checkout_date:      co,
    hotel_name:         $('#h_hotel_name').val(),
    vendor_id:          parseInt($('#h_vendor_id').val())||0,
    vendor_name:        $('#h_vendor_select').find(':selected').text()||'',
    rent_amount:        hRent,
    psf1_pct:           parseFloat($('#h_psf1_pct').val())    || 0,
    psf1_amount:        hPsf1Amt,
    psf2_pct:           parseFloat($('#h_psf2_pct').val())    || 0,
    psf2_amount:        hPsf2Amt,
    customer_receivable:hCustRecv,
    disc_pct:           parseFloat($('#h_disc_pct').val())    || 0,
    disc_amount:        hDiscAmt,
    vendor_payable:     hVendPay
  };
 
}

function _clearHotel(){
  $('#h_pax_name,#h_passport,#h_visa_no,#h_hotel_name').val('');
  ['h_issue_date','h_checkin','h_checkout'].forEach(function(id){fpSet(id,'');});
  $('#h_duration').val('0'); $('#h_rent').val('0');
  s2Set('#h_vendor_select','#h_vendor_id',0,'');
  $('#h_pax_name').focus();
}

$('#btnAddHotel').on('click',function(){
  var hd=_collectHotel();
  if(!hd.passenger_name){Swal.fire('Validation','Passenger name required.','warning');return;}
  hotelLines.push(hd);
  renderHotelGrid(); calcStripTotals(); _clearHotel();
});

function renderHotelGrid(){
  var h='';
  hotelLines.forEach(function(hl,i){
    h+='<tr>'+
      '<td>'+(i+1)+'</td><td>'+hl.passenger_name+'</td>'+
      '<td>'+(hl.passport_no||'')+'</td><td>'+(hl.visa_no||'')+'</td>'+
      '<td>'+(hl.issue_date||'')+'</td><td>'+(hl.checkin_date||'')+'</td>'+
      '<td>'+(hl.duration_of_stay||0)+'</td><td>'+(hl.checkout_date||'')+'</td>'+
      '<td>'+(hl.hotel_name||'')+'</td>'+
      '<td style="font-size:.62rem;">'+(hl.vendor_name||'')+'</td>'+
      '<td class="text-right"><strong>'+fmt(hl.rent_amount||0)+'</strong></td>'+
      '<td class="text-right">'+fmt(hl.psf1_amount||0)+'</td>'+
      '<td class="text-right">'+fmt(hl.psf2_amount||0)+'</td>'+
      '<td class="text-right" style="background:#d4edda;"><strong>'+fmt(hl.customer_receivable||0)+'</strong></td>'+
      '<td class="text-right">'+fmt(hl.disc_amount||0)+'</td>'+
      '<td class="text-right" style="background:#f8d7da;"><strong>'+fmt(hl.vendor_payable||0)+'</strong></td>'+
      '<td><button class="btn btn-outline-danger hotel-del" data-di="'+i+'" style="padding:0 4px;font-size:10px;"><i class="fas fa-times"></i></button></td>'+
      '</tr>';
  });
  $('#hotelGrid').html(h||'<tr><td colspan="17" class="text-center text-muted" style="font-size:.68rem;padding:5px;">No entries</td></tr>');
  $('#hotelCountBadge').text(hotelLines.length+' entr'+(hotelLines.length===1?'y':'ies'));
}

$(document).on('click','.hotel-del',function(e){
  e.stopPropagation();
  hotelLines.splice($(this).data('di'),1); renderHotelGrid(); calcStripTotals();
});

$(document).on('dblclick','#hotelGrid tr',function(){
  var i=parseInt($(this).find('.hotel-del').data('di'));
  if(isNaN(i)) return;
  var hl=hotelLines[i]; if(!hl) return;
  hotelLines.splice(i,1); renderHotelGrid(); calcStripTotals();
  $('#h_pax_name').val(hl.passenger_name||'');
  $('#h_passport').val(hl.passport_no||'');
  $('#h_visa_no').val(hl.visa_no||'');
  fpSet('h_issue_date',hl.issue_date||'');
  fpSet('h_checkin',hl.checkin_date||'');
  $('#h_duration').val(hl.duration_of_stay||0);
  fpSet('h_checkout',hl.checkout_date||'');
  $('#h_hotel_name').val(hl.hotel_name||'');
  
  $('#h_rent').val(hl.rent_amount||0);
  $('#h_psf1_pct').val(hl.psf1_pct||0);
  $('#h_psf1_amount').val(hl.psf1_amount||0);
  $('#h_psf2_pct').val(hl.psf2_pct||0);
  $('#h_psf2_amount').val(hl.psf2_amount||0);
  $('#h_disc_pct').val(hl.disc_pct||0);
  $('#h_disc_amount').val(hl.disc_amount||0);
  $('#h_customer_receivable').val((hl.customer_receivable||0).toFixed(2));
  $('#h_vendor_payable').val((hl.vendor_payable||0).toFixed(2));
  s2Set('#h_vendor_select','#h_vendor_id',hl.vendor_id,hl.vendor_name);
  toast('info','Edit Mode','Hotel row removed. Update and click Add.');
  $('#h_pax_name').focus();
 
});

// ═══════════════════════════════════════════════════════════════════
// TRANSPORT LINES
// ═══════════════════════════════════════════════════════════════════
function _collectTransport(){
  var fare=parseFloat($('#tr_decided_fare').val())||0;
  var psf1=parseFloat($('#tr_psf1_amt').val())||0;
  var psf2=parseFloat($('#tr_psf2_amt').val())||0;
  return {
    passenger_name: $('#tr_pax_name').val().trim(),
    passport_no:    $('#tr_passport').val(),
    visa_no:        $('#tr_visa_no').val(),
    car_type:       $('#tr_car_type').val(),
    no_of_persons:  parseInt($('#tr_no_persons').val())||1,
    arrival_date:   fpISO('tr_arrival_date'),
    arrival_time:   $('#tr_arrival_time').val(),
    vehicle_no:     $('#tr_vehicle_no').val(),
    vendor_id:      parseInt($('#tr_vendor_id').val())||0,
    vendor_name:    $('#tr_vendor_select').find(':selected').text()||'',
    decided_fare:   fare,
    psf1_pct:       parseFloat($('#tr_psf1_pct').val())||0,
    psf1_amount:    psf1,
    psf2_pct:       parseFloat($('#tr_psf2_pct').val())||0,
    psf2_amount:    psf2,
    total_receivable: fare+psf1+psf2,
    agency_profit:  psf1+psf2
  };
}

function _clearTransport(){
  $('#tr_pax_name,#tr_passport,#tr_visa_no,#tr_car_type,#tr_arrival_time,#tr_vehicle_no').val('');
  $('#tr_no_persons').val('1');
  fpSet('tr_arrival_date','');
  $('#tr_decided_fare,#tr_psf1_pct,#tr_psf1_amt,#tr_psf2_pct,#tr_psf2_amt').val('0');
  $('#tr_total_recv_disp').text('0.00');
  s2Set('#tr_vendor_select','#tr_vendor_id',0,'');
  $('#tr_pax_name').focus();
}

$('#btnAddTransport').on('click',function(){
  var td=_collectTransport();
  if(!td.passenger_name){Swal.fire('Validation','Passenger name required.','warning');return;}
  transportLines.push(td);
  renderTransportGrid(); calcStripTotals(); _clearTransport();
});

function renderTransportGrid(){
  var h='';
  transportLines.forEach(function(tl,i){
    h+='<tr>'+
      '<td>'+(i+1)+'</td><td>'+tl.passenger_name+'</td>'+
      '<td>'+(tl.passport_no||'')+'</td>'+
      '<td>'+(tl.car_type||'')+'</td>'+
      '<td>'+tl.no_of_persons+'</td>'+
      '<td>'+(tl.arrival_date||'')+'</td>'+
      '<td>'+(tl.arrival_time||'')+'</td>'+
      '<td>'+(tl.vehicle_no||'')+'</td>'+
      '<td style="font-size:.62rem;">'+(tl.vendor_name||'')+'</td>'+
      '<td class="text-right">'+fmt(tl.decided_fare)+'</td>'+
      '<td class="text-right">'+fmt(tl.psf1_amount)+'</td>'+
      '<td class="text-right">'+fmt(tl.psf2_amount)+'</td>'+
      '<td class="text-right"><strong>'+fmt(tl.total_receivable)+'</strong></td>'+
      '<td><button class="btn btn-outline-danger tr-del" data-di="'+i+'" style="padding:0 4px;font-size:10px;"><i class="fas fa-times"></i></button></td>'+
      '</tr>';
  });
  $('#transportGrid').html(h||'<tr><td colspan="14" class="text-center text-muted" style="font-size:.68rem;padding:5px;">No entries</td></tr>');
  $('#transportCountBadge').text(transportLines.length+' entr'+(transportLines.length===1?'y':'ies'));
}

$(document).on('click','.tr-del',function(e){
  e.stopPropagation();
  transportLines.splice($(this).data('di'),1); renderTransportGrid(); calcStripTotals();
});

$(document).on('dblclick','#transportGrid tr',function(){
  var i=parseInt($(this).find('.tr-del').data('di'));
  if(isNaN(i)) return;
  var tl=transportLines[i]; if(!tl) return;
  transportLines.splice(i,1); renderTransportGrid(); calcStripTotals();
  $('#tr_pax_name').val(tl.passenger_name||'');
  $('#tr_passport').val(tl.passport_no||'');
  $('#tr_visa_no').val(tl.visa_no||'');
  $('#tr_car_type').val(tl.car_type||'');
  $('#tr_no_persons').val(tl.no_of_persons||1);
  fpSet('tr_arrival_date',tl.arrival_date||'');
  $('#tr_arrival_time').val(tl.arrival_time||'');
  $('#tr_vehicle_no').val(tl.vehicle_no||'');
  $('#tr_decided_fare').val(tl.decided_fare||0);
  $('#tr_psf1_pct').val(tl.psf1_pct||0); $('#tr_psf1_amt').val(tl.psf1_amount||0);
  $('#tr_psf2_pct').val(tl.psf2_pct||0); $('#tr_psf2_amt').val(tl.psf2_amount||0);
  $('#tr_total_recv_disp').text(fmt(tl.total_receivable||0));
  s2Set('#tr_vendor_select','#tr_vendor_id',tl.vendor_id,tl.vendor_name);
  toast('info','Edit Mode','Transport row removed. Update and click Add.');
  $('#tr_pax_name').focus();
});

// ═══════════════════════════════════════════════════════════════════
// INSURANCE LINES
// ═══════════════════════════════════════════════════════════════════
function _collectInsurance(){
  var fee=parseFloat($('#ins_fee').val())||0;
  var psf1=parseFloat($('#ins_psf1_amt').val())||0;
  var psf2=parseFloat($('#ins_psf2_amt').val())||0;
  return {
    client_name:        $('#ins_client_name').val().trim(),
    client_mobile:      $('#ins_mobile').val(),
    passport_cnic:      $('#ins_passport_cnic').val(),
    nationality:        $('#ins_nationality').val(),
    dob:                fpISO('ins_dob'),
    travel_country:     $('#ins_travel_country').val(),
    travel_start_date:  fpISO('ins_travel_start'),
    travel_end_date:    fpISO('ins_travel_end'),
    insurance_company:  $('#ins_company').val(),
    plan_package:       $('#ins_plan').val(),
    policy_number:      $('#ins_policy_no').val(),
    policy_issue_date:  fpISO('ins_issue_date'),
    policy_expiry_date: fpISO('ins_expiry_date'),
    coverage_amount:    parseFloat($('#ins_coverage').val())||0,
    insurance_fee:      fee,
    psf1_pct:           parseFloat($('#ins_psf1_pct').val())||0,
    psf1_amount:        psf1,
    psf2_pct:           parseFloat($('#ins_psf2_pct').val())||0,
    psf2_amount:        psf2,
    payment_status:     $('#ins_pay_status').val(),
    remarks:            $('#ins_remarks').val(),
    vendor_id:          parseInt($('#ins_vendor_id').val())||0,
    vendor_name:        $('#ins_vendor_select').find(':selected').text()||'',
    total_receivable:   fee+psf1+psf2,
    agency_profit:      psf1+psf2
  };
}

function _clearInsurance(){
  $('#ins_client_name,#ins_mobile,#ins_passport_cnic,#ins_nationality').val('');
  $('#ins_travel_country,#ins_company,#ins_plan,#ins_policy_no,#ins_remarks').val('');
  ['ins_dob','ins_travel_start','ins_travel_end','ins_issue_date','ins_expiry_date'].forEach(function(id){fpSet(id,'');});
  $('#ins_coverage,#ins_fee,#ins_psf1_pct,#ins_psf1_amt,#ins_psf2_pct,#ins_psf2_amt').val('0');
  $('#ins_total_recv_disp').text('0.00');
  $('#ins_pay_status').val('PENDING');
  s2Set('#ins_vendor_select','#ins_vendor_id',0,'');
  $('#ins_client_name').focus();
}

$('#btnAddInsurance').on('click',function(){
  var id=_collectInsurance();
  if(!id.client_name){Swal.fire('Validation','Client name required.','warning');return;}
  insuranceLines.push(id);
  renderInsuranceGrid(); calcStripTotals(); _clearInsurance();
});

function renderInsuranceGrid(){
  var h='';
  insuranceLines.forEach(function(il,i){
    var stCol=il.payment_status==='PAID'?'#155724':il.payment_status==='PARTIAL'?'#856404':'#721c24';
    h+='<tr>'+
      '<td>'+(i+1)+'</td><td>'+il.client_name+'</td>'+
      '<td>'+(il.passport_cnic||'')+'</td>'+
      '<td style="font-size:.62rem;">'+(il.insurance_company||'')+'</td>'+
      '<td style="font-size:.62rem;">'+(il.plan_package||'')+'</td>'+
      '<td>'+(il.policy_number||'')+'</td>'+
      '<td>'+(il.travel_country||'')+'</td>'+
      '<td>'+(il.travel_start_date||'')+'</td>'+
      '<td>'+(il.travel_end_date||'')+'</td>'+
      '<td class="text-right">'+fmt(il.insurance_fee)+'</td>'+
      '<td class="text-right">'+fmt(il.psf1_amount)+'</td>'+
      '<td class="text-right">'+fmt(il.psf2_amount)+'</td>'+
      '<td class="text-right"><strong>'+fmt(il.total_receivable)+'</strong></td>'+
      '<td><span style="font-size:.62rem;font-weight:700;color:'+stCol+';">'+(il.payment_status||'')+'</span></td>'+
      '<td style="font-size:.62rem;">'+(il.vendor_name||'')+'</td>'+
      '<td><button class="btn btn-outline-danger ins-del" data-di="'+i+'" style="padding:0 4px;font-size:10px;"><i class="fas fa-times"></i></button></td>'+
      '</tr>';
  });
  $('#insuranceGrid').html(h||'<tr><td colspan="16" class="text-center text-muted" style="font-size:.68rem;padding:5px;">No entries</td></tr>');
  $('#insuranceCountBadge').text(insuranceLines.length+' entr'+(insuranceLines.length===1?'y':'ies'));
}

$(document).on('click','.ins-del',function(e){
  e.stopPropagation();
  insuranceLines.splice($(this).data('di'),1); renderInsuranceGrid(); calcStripTotals();
});

$(document).on('dblclick','#insuranceGrid tr',function(){
  var i=parseInt($(this).find('.ins-del').data('di'));
  if(isNaN(i)) return;
  var il=insuranceLines[i]; if(!il) return;
  insuranceLines.splice(i,1); renderInsuranceGrid(); calcStripTotals();
  $('#ins_client_name').val(il.client_name||'');
  $('#ins_mobile').val(il.client_mobile||'');
  $('#ins_passport_cnic').val(il.passport_cnic||'');
  $('#ins_nationality').val(il.nationality||'');
  fpSet('ins_dob',il.dob||'');
  $('#ins_travel_country').val(il.travel_country||'');
  fpSet('ins_travel_start',il.travel_start_date||'');
  fpSet('ins_travel_end',il.travel_end_date||'');
  $('#ins_company').val(il.insurance_company||'');
  $('#ins_plan').val(il.plan_package||'');
  $('#ins_policy_no').val(il.policy_number||'');
  fpSet('ins_issue_date',il.policy_issue_date||'');
  fpSet('ins_expiry_date',il.policy_expiry_date||'');
  $('#ins_coverage').val(il.coverage_amount||0);
  $('#ins_fee').val(il.insurance_fee||0);
  $('#ins_psf1_pct').val(il.psf1_pct||0); $('#ins_psf1_amt').val(il.psf1_amount||0);
  $('#ins_psf2_pct').val(il.psf2_pct||0); $('#ins_psf2_amt').val(il.psf2_amount||0);
  $('#ins_pay_status').val(il.payment_status||'PENDING');
  $('#ins_remarks').val(il.remarks||'');
  s2Set('#ins_vendor_select','#ins_vendor_id',il.vendor_id,il.vendor_name);
  toast('info','Edit Mode','Insurance row removed. Update and click Add.');
  $('#ins_client_name').focus();
});

// ═══════════════════════════════════════════════════════════════════
// BANK PAYMENTS
// ═══════════════════════════════════════════════════════════════════
function bankOpts(){
  var o='<option value="">-- Bank/Cash --</option>';
  BANKS.forEach(function(b){o+='<option value="'+b.id+'">'+b.name+'</option>';});
  return o;
}
function addBankRow(bid,amt){
  var h='<div class="ti-bank-row">'+
    '<select class="form-control bank-sel">'+bankOpts()+'</select>'+
    '<input type="number" class="form-control bank-amt" value="'+(amt||'')+'" min="0" step="0.01" data-ti-nav>'+
    '<button class="btn-del" onclick="$(this).closest(\'.ti-bank-row\').remove();calcBankTotal()"><i class="fas fa-times"></i></button>'+
    '</div>';
  $('#bankRows').append(h);
  if(bid) $('#bankRows .ti-bank-row:last .bank-sel').val(bid);
}
$('#btnAddBank').on('click',function(){addBankRow();});
$(document).on('input change','.bank-amt',calcBankTotal);

function calcBankTotal(){
  var t=0; $('.bank-amt').each(function(){t+=parseFloat($(this).val())||0;});
  $('#bankTotal').text(fmt(t));
  var grand=fvRaw('strip_net_net')||fvRaw('ln_receivable');
  var due=grand-t;
  if(due>0.01 && $('input[name="sale_type"]:checked').val()==='cash'){
    $('#balanceDueRow').show(); $('#balanceDue').text(fmt(due));
  }else{$('#balanceDueRow').hide();}
}

function collectBanks(){
  var pays=[];
  $('.ti-bank-row').each(function(){
    var bid=parseInt($(this).find('.bank-sel').val())||0;
    var amt=parseFloat($(this).find('.bank-amt').val())||0;
    if(bid&&amt>0) pays.push({bank_id:bid,amount:amt});
  });
  return pays;
}

// ═══════════════════════════════════════════════════════════════════
// SAVE
// ═══════════════════════════════════════════════════════════════════
$('#btnSave,#btnUpdate').on('click',function(){
  var inclTkt  =$('#chk_ticket').is(':checked');
  var inclVisa =$('#chk_visa').is(':checked');
  var inclHotel=$('#chk_hotel').is(':checked');
  var inclTrans=$('#chk_transport').is(':checked');
  var inclIns  =$('#chk_insurance').is(':checked');

  // Sync active ticket line into array
  if(inclTkt){
    if(activeIdx>=0){
      ticketLines[activeIdx]=collectCurrentLine();
    } else {
      var cur=collectCurrentLine();
      if(cur.ticket_no||cur.market_fare>0){
        var tno=(cur.ticket_no||'').trim();
        var di=tno?ticketLines.findIndex(function(l){return(l.ticket_no||'').trim()===tno;}):-1;
        if(di>=0) ticketLines[di]=cur; else ticketLines.push(cur);
      }
    }
  }

  if(!inclTkt&&!inclVisa&&!inclHotel&&!inclTrans&&!inclIns){
    Swal.fire('Error','Select at least one section.','warning'); return;
  }
  if(!parseInt($('#client_id').val())){
    Swal.fire('Error','Please select a Client.','warning'); return;
  }
  if(inclTkt && !ticketLines.length){
    Swal.fire('Error','No ticket lines added.','warning'); return;
  }
  if(inclTkt){
    var mi=ticketLines.findIndex(function(ln){return!(ln.agent_id>0);});
    if(mi>=0){Swal.fire('Error','Ticket #'+(mi+1)+': Agent/Airline Payable required.','warning');return;}
  }

  var saleType=$('input[name="sale_type"]:checked').val();
  var bankPays=collectBanks();
  if(saleType==='cash'&&!bankPays.length){
    Swal.fire('Error','Cash sale requires a bank payment entry.','warning'); return;
  }

  var payload={
    folder_no:          isEdit?editFN:null,
    invoice_date:       fpISO('invoice_date'),
    inv_title:          $('#inv_title').val(),
    sale_type:          saleType,
    client_id:          parseInt($('#client_id').val())||0,
    client_name:        $('#client_select').find(':selected').text()||'',
    commission_ac_amt:  fv('commission_ac_amt'),
    other_payable:      fv('strip_other_payable'),
    include_ticket:     inclTkt,
    include_visa:       inclVisa,
    include_hotel:      inclHotel,
    include_transport:  inclTrans,
    include_insurance:  inclIns,
    ticket_lines:       inclTkt   ? ticketLines    : [],
    visa_lines:         inclVisa  ? visaLines       : [],
    hotel_lines:        inclHotel ? hotelLines      : [],
    transport_lines:    inclTrans ? transportLines  : [],
    insurance_lines:    inclIns   ? insuranceLines  : [],
    bank_payments:      bankPays
  };

  showL();
  $.ajax({
    url:API.save, type:'POST',
    contentType:'application/json', headers:{'X-CSRFToken':csrf},
    data:JSON.stringify(payload),
    success:function(r){
      hideL();
      if(r.ok){
        if(window._printAfterSave){window._printAfterSave=false;window.open('/ticket/print/'+r.folder_no+'/','_blank');}
        Swal.fire({icon:'success',title:'Saved!',text:r.message,timer:1500,showConfirmButton:false})
          .then(function(){window.location.href='/ticket/'+r.folder_no+'/';});
      }else{Swal.fire('Error',r.error||'Failed','error');}
    },
    error:function(x){hideL();Swal.fire('Error',(x.responseJSON&&x.responseJSON.error)||'Server error','error');}
  });
});

// ═══════════════════════════════════════════════════════════════════
// DELETE
// ═══════════════════════════════════════════════════════════════════
$('#btnDelete').on('click',function(){
  if(!isEdit) return;
  Swal.fire({title:'Delete Invoice #'+editFN+'?',icon:'warning',showCancelButton:true,
    confirmButtonColor:'#dc3545',confirmButtonText:'Delete'
  }).then(function(r){
    if(!r.isConfirmed) return;
    showL();
    $.ajax({url:API.apiDel, type:'POST', headers:{'X-CSRFToken':csrf},
      success:function(r){
        hideL();
        if(r.ok) Swal.fire({icon:'success',title:'Deleted!',timer:1500,showConfirmButton:false})
          .then(function(){window.location.href='/ticket/list/';});
        else Swal.fire('Error',r.error,'error');
      },
      error:function(){hideL();Swal.fire('Error','Server error','error');}
    });
  });
});

// ═══════════════════════════════════════════════════════════════════
// ACTIONS DROPDOWN
// ═══════════════════════════════════════════════════════════════════
$('#actionDropdown').on('change',function(){
  var val=$(this).val(); $(this).val('');
  if(val==='refund'&&isEdit){
    Swal.fire({title:'Create Refund for #'+editFN+'?',
      text:'This will open the dedicated refund invoice page.',
      icon:'question',showCancelButton:true,confirmButtonText:'Continue'
    }).then(function(r){
      if(r.isConfirmed) window.location.href='/ticket/refund/?from='+editFN;
    });
  }else if(val==='print'&&isEdit){
    window.open('/ticket/print/'+editFN+'/','_blank');
  }else if(val==='customer_invoice'&&isEdit){
    window.open('/ticket/customer-invoice/'+editFN+'/','_blank');
  }
});

// ═══════════════════════════════════════════════════════════════════
// LOAD INVOICE (edit mode)
// ═══════════════════════════════════════════════════════════════════
function loadInvoice(){
  if(!isEdit) return;
  showL();
  $.getJSON(API.get).done(function(r){
    hideL();
    if(!r.ok){Swal.fire('Error',r.error||'Not found','error');return;}
    var inv=r.invoice;

    // Header
    $('#folder_no').val(inv.folder_no);
    fpSet('invoice_date',inv.invoice_date);
    $('#receipt_no').val(inv.receipt_no);
    $('#inv_title').val(inv.inv_title);
    $('#invoice_status').val(inv.status);
    $('#commission_ac_amt').val(inv.commission_ac_amt||0);

    // Client
    $('#client_id').val(inv.client_id);
    if(inv.client_id&&inv.client_name)
      $('#client_select').append(new Option(inv.client_name,inv.client_id,true,true)).trigger('change');

    // Sale type
    if(inv.bank_payments&&inv.bank_payments.length&&inv.amount_received>0)
      $('#sale_cash').prop('checked',true).trigger('change');
    else
      $('#sale_credit').prop('checked',true).trigger('change');

    // Refund mode
    if(inv.status==='REFUNDED'){
      isRefundMode=true;
      $('#refundPanel').addClass('show');
      $('#statusBadge').text('REFUNDED').removeClass('ti-status-issued').addClass('ti-status-refunded');
    }else{
      $('#statusBadge').text('ISSUED').removeClass('ti-status-refunded').addClass('ti-status-issued');
    }

    // Section flags
    var inclTkt  = inv.include_ticket   !== false;
    var inclVisa = !!inv.include_visa;
    var inclHotel= !!inv.include_hotel;
    var inclTrans= !!inv.include_transport;
    var inclIns  = !!inv.include_insurance;
    $('#chk_ticket').prop('checked',inclTkt).trigger('change');
    $('#chk_visa').prop('checked',inclVisa).trigger('change');
    $('#chk_hotel').prop('checked',inclHotel).trigger('change');
    $('#chk_transport').prop('checked',inclTrans).trigger('change');
    $('#chk_insurance').prop('checked',inclIns).trigger('change');

    // Ticket lines
    ticketLines = inv.ticket_lines||[];
    if(ticketLines.length>0){
      activeIdx=0;
      try{loadLineToForm(ticketLines[0]);}
      catch(e){console.error('[ticket_invoice] loadLineToForm error:',e);}
    }
    renderGrid();

    // Visa lines
    visaLines = (inv.visa_lines||[]).map(function(vl){
      var curSym='PKR';
      if(vl.currency_id){
        var copt=$('#v_currency_id option[value="'+vl.currency_id+'"]');
        curSym=copt.data('sym')||'PKR';
      }
      return Object.assign({},vl,{currency_sym:curSym});
    });
    renderVisaGrid();

    // Hotel lines
    hotelLines = inv.hotel_lines||[];
    renderHotelGrid();

    // Transport lines
    transportLines = inv.transport_lines||[];
    renderTransportGrid();

    // Insurance lines
    insuranceLines = inv.insurance_lines||[];
    renderInsuranceGrid();

    // Bank payments
    $('#bankRows').empty();
    if(inv.bank_payments&&inv.bank_payments.length)
      inv.bank_payments.forEach(function(bp){addBankRow(bp.bank_id,bp.amount);});
    else addBankRow();
    calcBankTotal();

    // Audit
    $('#audit_created').text((inv.created_by||'')+(inv.created_at?' : '+inv.created_at:''));
    $('#audit_edited').text(inv.edited_by||'');

    // Update button stays hidden — Save button (bound to both #btnSave,#btnUpdate logic) handles save/update
    $('#btnDelete').show();
    calcStripTotals();

  }).fail(function(){hideL();Swal.fire('Error','Failed to load invoice.','error');});
}

// ═══════════════════════════════════════════════════════════════════
// NAVIGATION
// ═══════════════════════════════════════════════════════════════════
window.navInvoice=function(dir){
  $.getJSON(API.list).done(function(r){
    if(!r.ok||!r.invoices.length) return;
    var ids=r.invoices.map(function(i){return i.folder_no;});
    var curIdx=ids.indexOf(editFN),target;
    if(dir==='first')      target=ids[ids.length-1];
    else if(dir==='last')  target=ids[0];
    else if(dir==='prev')  target=ids[Math.min(curIdx+1,ids.length-1)];
    else                   target=ids[Math.max(curIdx-1,0)];
    if(target) window.location.href='/ticket/'+target+'/';
  });
};

// ═══════════════════════════════════════════════════════════════════
// KEYBOARD SHORTCUTS
// ═══════════════════════════════════════════════════════════════════
$(document).on('keydown',function(e){
  if(e.key==='F9'){ e.preventDefault(); $('#btnAddTkt').click(); }
  if(e.key==='F7'){ e.preventDefault(); isEdit?$('#btnUpdate').click():$('#btnSave').click(); }
  if(e.ctrlKey&&e.key==='s'){ e.preventDefault(); isEdit?$('#btnUpdate').click():$('#btnSave').click(); }
  if(e.ctrlKey&&e.key==='p'){
    e.preventDefault();
    if(!isEdit){$('#btnSave').click();}
    else{window._printAfterSave=true;$('#btnUpdate').click();}
  }
});

// ═══════════════════════════════════════════════════════════════════
// INIT
// ═══════════════════════════════════════════════════════════════════
$(function(){
  initFlatpickr();
  fpSet('invoice_date',todayISO);
  fpSet('dep_date',todayISO);
  fpSet('tkt_issue_date',todayISO);
  initSelect2();
  addBankRow();
  updateToggleStyle();
  if(isEdit){
    loadInvoice();
  }else{
    calcAll();
    setTimeout(function(){ $('#invoice_date').focus().select(); },300);
  }
});

})();
</script>

{% endblock %}