{% extends "pos/base.html" %}
{% load static %}
{% block title %}Ticket Vendor Ledger{% endblock %}

{% block stylesheets %}
<style>
/* ══════════════════════════════════════════════════════════
   TICKET VENDOR LEDGER  —  Clean Professional v1
   ══════════════════════════════════════════════════════════ */
:root {
  --lv-navy:   #1a3a2e;   /* deep green — vendor theme */
  --lv-blue:   #1d4ed8;
  --lv-green:  #16a34a;
  --lv-red:    #dc2626;
  --lv-amber:  #b45309;
  --lv-border: #e2e8f0;
  --lv-bg:     #f8fafc;
  --lv-text:   #1e293b;
  --lv-muted:  #64748b;
}

/* ── Filter Panel ─────────────────────────────────────── */
.lv-filter {
  background:#fff; border:1px solid var(--lv-border);
  border-radius:8px; padding:12px 16px; margin-bottom:14px;
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
}
.lv-fg { display:flex; flex-direction:column; gap:3px; }
.lv-fg label {
  font-size:.63rem; font-weight:700; color:var(--lv-muted);
  text-transform:uppercase; letter-spacing:.4px;
}
.lv-fg input, .lv-fg select {
  height:31px; font-size:.78rem; border:1px solid #cbd5e1;
  border-radius:6px; padding:0 8px; background:#fff;
  transition:border-color .15s;
}
.lv-fg input:focus, .lv-fg select:focus {
  border-color:var(--lv-navy); outline:none;
  box-shadow:0 0 0 2px rgba(26,58,46,.1);
}
.lv-btn {
  height:31px; padding:0 14px; border-radius:6px; font-size:.78rem;
  font-weight:700; cursor:pointer; border:none; display:inline-flex;
  align-items:center; gap:5px; text-decoration:none; white-space:nowrap;
}
.lv-btn-navy    { background:var(--lv-navy); color:#fff; }
.lv-btn-outline { background:#fff; color:var(--lv-navy); border:1.5px solid var(--lv-navy); }
.lv-btn-red     { background:var(--lv-red);  color:#fff; }
.lv-btn-slate   { background:#475569; color:#fff; }
.lv-btn:hover   { opacity:.88; }

/* ── KPI Bar ──────────────────────────────────────────── */
.lv-kpi-bar {
  display:flex; gap:0; border-radius:8px; overflow:hidden;
  border:1px solid var(--lv-border); margin-bottom:14px;
}
.lv-kpi-cell {
  flex:1; padding:9px 12px; text-align:center;
  border-right:1px solid rgba(0,0,0,.07);
}
.lv-kpi-cell:last-child { border-right:none; }
.lv-kpi-label { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:var(--lv-muted); margin-bottom:2px; }
.lv-kpi-value { font-size:.98rem; font-weight:800; }
.lv-kpi-sub   { font-size:.6rem; color:var(--lv-muted); margin-top:1px; }
.k-navy   { background:#f0fdf4; } .k-navy .lv-kpi-value   { color:var(--lv-navy); }
.k-green  { background:#f0fdf4; } .k-green .lv-kpi-value  { color:var(--lv-green); }
.k-amber  { background:#fffbeb; } .k-amber .lv-kpi-value  { color:var(--lv-amber); }
.k-red    { background:#fef2f2; } .k-red .lv-kpi-value    { color:var(--lv-red); }
.k-slate  { background:#f1f5f9; } .k-slate .lv-kpi-value  { color:var(--lv-text); }
.k-purple { background:#faf5ff; } .k-purple .lv-kpi-value { color:#6d28d9; }
.k-dark   { background:#1a3a2e; border-color:#0f2218; }
.k-dark .lv-kpi-label  { color:#a7d7b9; }
.k-dark .lv-kpi-value  { color:#f1f5f9; }
.k-dark .lv-kpi-sub    { color:#64748b; }

/* ── Main layout ──────────────────────────────────────── */
.lv-main-layout { display:flex; gap:14px; align-items:flex-start; }
.lv-table-area  { flex:1; min-width:0; }
.lv-right-panel { width:280px; flex-shrink:0; }

/* ── Search Box ───────────────────────────────────────── */
.lv-search-box {
  background:#fff; border:1px solid var(--lv-border);
  border-radius:8px; overflow:hidden; margin-bottom:12px;
}
.lv-search-head {
  background:var(--lv-navy); color:#fff;
  padding:8px 12px; font-size:.75rem; font-weight:800;
  display:flex; align-items:center; gap:6px;
}
.lv-search-inner { padding:10px 12px; }
.lv-search-input {
  width:100%; height:32px; font-size:.8rem;
  border:1px solid var(--lv-border); border-radius:6px;
  padding:0 10px 0 32px; background:#f8fafc;
}
.lv-search-input:focus { border-color:var(--lv-navy); outline:none; background:#fff; box-shadow:0 0 0 2px rgba(26,58,46,.1); }
.lv-search-wrap { position:relative; }
.lv-search-wrap i { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--lv-muted); font-size:.75rem; }
.lv-search-count { font-size:.65rem; color:var(--lv-muted); margin-top:5px; }
.lv-no-match    { font-size:.73rem; color:var(--lv-muted); text-align:center; padding:8px 0; display:none; }

/* ── Service Badge ────────────────────────────────────── */
.svc-badge {
  display:inline-block; padding:1px 6px; border-radius:4px;
  font-size:.6rem; font-weight:800; white-space:nowrap;
}
.svc-ticket    { background:#dbeafe; color:#1e40af; }
.svc-visa      { background:#ede9fe; color:#5b21b6; }
.svc-hotel     { background:#fef9c3; color:#854d0e; }
.svc-transport { background:#d1fae5; color:#065f46; }
.svc-insurance { background:#fee2e2; color:#991b1b; }

/* ── Ledger Table ─────────────────────────────────────── */
.lv-table-wrap { border-radius:8px; overflow:hidden; border:1px solid var(--lv-border); }
.lv-table { width:100%; border-collapse:collapse; font-size:.76rem; }
.lv-table th {
  background:var(--lv-navy); color:#fff;
  padding:7px 9px; font-size:.63rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.35px; text-align:left;
  white-space:nowrap;
}
.lv-table th.tr { text-align:right; }
.lv-table th.tc { text-align:center; }
.lv-table td { padding:5px 9px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.lv-table tfoot td {
  background:var(--lv-navy); color:#fff;
  font-weight:800; font-size:.76rem; padding:7px 9px;
  border-top:2px solid var(--lv-navy);
}

/* Row types */
.lv-row-opening td { background:#f8fafc; color:var(--lv-muted); font-weight:600; }
.lv-row-invoice td { background:#f1f5f9; }
.lv-row-invoice:hover td { background:#e2f0e8 !important; cursor:pointer; }
.lv-row-svc:hover td { opacity:.88; }
.svc-bg-ticket    td { background:#f0f7ff; }
.svc-bg-visa      td { background:#f8f5ff; }
.svc-bg-hotel     td { background:#fffdf0; }
.svc-bg-transport td { background:#f0fdf6; }
.svc-bg-insurance td { background:#fff5f5; }
.lv-row-hidden { display:none !important; }
.lv-table .tr  { text-align:right; }
.lv-table .tc  { text-align:center; }
.lv-table a    { color:var(--lv-navy); font-weight:800; text-decoration:none; }
.lv-table a:hover { text-decoration:underline; }

/* ── Breakdown table ──────────────────────────────────── */
.lv-breakdown {
  background:#fff; border:1px solid var(--lv-border);
  border-radius:8px; overflow:hidden;
}
.lv-breakdown-head {
  background:var(--lv-navy); color:#fff;
  padding:8px 12px; font-size:.75rem; font-weight:800;
}
.lv-breakdown table { width:100%; border-collapse:collapse; font-size:.73rem; }
.lv-breakdown th {
  background:#f1f5f9; color:var(--lv-muted);
  padding:5px 10px; font-size:.63rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.3px; text-align:left;
}
.lv-breakdown th.tr { text-align:right; }
.lv-breakdown td { padding:5px 10px; border-bottom:1px solid #f1f5f9; }
.lv-breakdown tfoot td { background:#f1f5f9; font-weight:800; border-top:1px solid var(--lv-border); }
.lv-breakdown .tr { text-align:right; }

/* ── Empty state ──────────────────────────────────────── */
.lv-empty { text-align:center; padding:2.5rem 1rem; color:var(--lv-muted); }
.lv-empty i { font-size:2rem; display:block; margin-bottom:.5rem; }
.lv-empty p { font-size:.82rem; font-weight:600; margin:0; }

@media(max-width:900px) {
  .lv-main-layout  { flex-direction:column; }
  .lv-right-panel  { width:100%; }
  .lv-kpi-bar      { flex-wrap:wrap; }
  .lv-kpi-cell     { min-width:48%; flex:unset; }
}
@media print {
  .lv-filter, .lv-right-panel, .no-print { display:none !important; }
  .lv-main-layout { display:block; }
}
</style>
{% endblock %}

{% block heading %}
<i class="fas fa-building mr-2" style="color:var(--lv-navy,#1a3a2e);font-size:.95rem;"></i>
Ticket Vendor Ledger
{% endblock %}

{% block content %}

<!-- ── Filter Panel ── -->
<form method="get" id="lvForm">
  <div class="lv-filter no-print">
    <div class="lv-fg">
      <label><i class="fas fa-building mr-1"></i>Vendor / Airline</label>
      <select id="lvVend" name="vendor_id" style="width:220px;">
        <option></option>
        {% if vendor_obj %}
          <option value="{{ vendor_obj.t_id }}" selected>{{ vendor_obj.name }}</option>
        {% endif %}
      </select>
    </div>
    <div class="lv-fg">
      <label><i class="fas fa-calendar mr-1"></i>Date From</label>
      <input type="date" name="start_date" value="{{ start_date }}" style="width:130px;">
    </div>
    <div class="lv-fg">
      <label><i class="fas fa-calendar-check mr-1"></i>Date To</label>
      <input type="date" name="end_date" value="{{ end_date }}" style="width:130px;">
    </div>
    <div class="lv-fg">
      <label><i class="fas fa-filter mr-1"></i>Service Type</label>
      <select name="svc_type" style="width:130px;">
        <option value="">All Services</option>
        <option value="ticket"    {% if svc_type == "ticket"    %}selected{% endif %}>Ticket</option>
        <option value="visa"      {% if svc_type == "visa"      %}selected{% endif %}>Visa</option>
        <option value="hotel"     {% if svc_type == "hotel"     %}selected{% endif %}>Hotel</option>
        <option value="transport" {% if svc_type == "transport" %}selected{% endif %}>Transport</option>
        <option value="insurance" {% if svc_type == "insurance" %}selected{% endif %}>Insurance</option>
      </select>
    </div>
    <div class="lv-fg" style="flex-direction:row;gap:6px;padding-top:1.05rem;">
      <button type="submit" class="lv-btn lv-btn-navy"><i class="fas fa-search"></i>Search</button>
      {% if vendor_obj %}
        <a href="?vendor_id={{ vendor_obj.t_id }}&show_all=1" class="lv-btn lv-btn-outline" id="lvShowAll">
          <i class="fas fa-list"></i>Show All
        </a>
      {% endif %}
    </div>
    {% if vendor_obj %}
    <div class="lv-fg ml-auto" style="flex-direction:row;gap:6px;padding-top:1.05rem;margin-left:auto;">
      <a href="{% url 'vendors:ticket_vendor_ledger_pdf' %}?{{ request.GET.urlencode }}"
         class="lv-btn lv-btn-red" target="_blank">
        <i class="fas fa-file-pdf"></i>PDF
      </a>
      <button type="button" class="lv-btn lv-btn-slate" onclick="window.print()">
        <i class="fas fa-print"></i>Print
      </button>
    </div>
    {% endif %}
  </div>
</form>

{% if vendor_obj %}

<!-- ── Vendor heading ── -->
<div class="d-flex align-items-center justify-content-between mb-2">
  <div>
    <h6 class="mb-0 font-weight-bold" style="color:var(--lv-text,#1e293b);">
      <i class="fas fa-building mr-2" style="color:var(--lv-navy);"></i>
      {{ vendor_obj.name|title }}
      <small class="text-muted ml-1" style="font-size:.7rem;font-weight:600;">[ID: {{ vendor_obj.t_id }}]</small>
    </h6>
    <small class="text-muted" style="font-size:.68rem;">
      {% if show_all %}Complete ledger — all time
      {% else %}{{ start_date|default:"—" }} → {{ end_date|default:"—" }}
        {% if svc_type %} · <span class="svc-badge svc-{{ svc_type }}">{{ svc_type|upper }}</span>{% endif %}
      {% endif %}
    </small>
  </div>
</div>

<!-- ── KPI Bar ── -->
<div class="lv-kpi-bar">
  <div class="lv-kpi-cell k-navy">
    <div class="lv-kpi-label">Account Balance</div>
    <div class="lv-kpi-value">{{ vendor_obj.balance|floatformat:0 }}</div>
    <div class="lv-kpi-sub">Current</div>
  </div>
  <div class="lv-kpi-cell k-red">
    <div class="lv-kpi-label">Total Payable</div>
    <div class="lv-kpi-value">{{ total_payable|floatformat:0 }}</div>
    <div class="lv-kpi-sub">This period</div>
  </div>
  <div class="lv-kpi-cell k-amber">
    <div class="lv-kpi-label">Paid</div>
    <div class="lv-kpi-value">{{ total_paid|floatformat:0 }}</div>
    <div class="lv-kpi-sub">Settled</div>
  </div>
  <div class="lv-kpi-cell k-red">
    <div class="lv-kpi-label">Pending Balance</div>
    <div class="lv-kpi-value">{{ pending_balance|floatformat:0 }}</div>
    <div class="lv-kpi-sub">Outstanding</div>
  </div>
  <div class="lv-kpi-cell k-slate">
    <div class="lv-kpi-label">Ticket Invoices</div>
    <div class="lv-kpi-value">{{ svc_counts.ticket|default:0 }}</div>
    <div class="lv-kpi-sub">Air tickets</div>
  </div>
  <div class="lv-kpi-cell k-purple">
    <div class="lv-kpi-label">Other Services</div>
    <div class="lv-kpi-value">{{ other_svc_count }}</div>
    <div class="lv-kpi-sub">Visa / Hotel / etc.</div>
  </div>
  <div class="lv-kpi-cell k-dark">
    <div class="lv-kpi-label">Closing Balance</div>
    <div class="lv-kpi-value">{{ closing_balance|floatformat:0 }}</div>
    <div class="lv-kpi-sub">End of period</div>
  </div>
</div>

<!-- ── Main Layout ── -->
<div class="lv-main-layout">

  <!-- ── Ledger Table ── -->
  <div class="lv-table-area">
    <div class="lv-table-wrap">
      <table class="lv-table" id="lvTable">
        <thead>
          <tr>
            <th style="width:30px;" class="tc">#</th>
            <th style="width:78px;">Date</th>
            <th style="width:62px;" class="tc">Folder#</th>
            <th style="width:78px;" class="tc">Services</th>
            <th>Client / Description</th>
            <th style="width:88px;" class="tc">PNR / Ref</th>
            <th style="width:90px;" class="tc">Ticket #</th>
            <th style="width:62px;" class="tc">Flight</th>
            <th style="width:100px;" class="tc">Category</th>
            <th style="width:88px;" class="tr">Payable</th>
            <th style="width:82px;" class="tr">Paid</th>
            <th style="width:88px;" class="tr">Balance</th>
          </tr>
        </thead>
        <tbody id="lvBody">

          {% for row in ledger_rows %}

            {% if row.row_type == 'opening' %}
            <tr class="lv-row-opening" data-searchtext="opening">
              <td class="tc" style="font-size:.65rem;">—</td>
              <td style="font-size:.72rem;">{{ row.date }}</td>
              <td class="tc">—</td>
              <td class="tc"></td>
              <td colspan="7" style="font-weight:700;font-size:.76rem;">Opening Balance</td>
              <td class="tr" style="font-weight:900;color:var(--lv-navy);">{{ row.balance|floatformat:2 }}</td>
            </tr>

            {% elif row.row_type == 'invoice' %}
            <tr class="lv-row-invoice"
                data-invid="{{ row.folder_no }}"
                data-searchtext="{{ row.folder_no }} {{ row.inv_category }} {{ row.client_name }} {{ row.inv_title }} {{ row.svc_flags }}"
                onclick="window.location.href='/ticket/{{ row.folder_no }}/'">
              <td class="tc" style="font-size:.65rem;color:var(--lv-muted);">{{ forloop.counter }}</td>
              <td style="font-size:.73rem;font-weight:700;">{{ row.date }}</td>
              <td class="tc">
                <a href="/ticket/{{ row.folder_no }}/" style="font-weight:900;color:var(--lv-navy);"
                   onclick="event.stopPropagation();">#{{ row.folder_no }}</a>
              </td>
              <td class="tc">
                <span style="font-size:.62rem;font-weight:800;color:var(--lv-muted);">{{ row.svc_flags }}</span>
              </td>
              <td>
                <span style="font-weight:800;color:var(--lv-text);">{{ row.client_name }}</span>
                {% if row.inv_title %}<br><span style="font-size:.65rem;color:var(--lv-muted);">{{ row.inv_title }}</span>{% endif %}
                {% if row.status == 'REFUNDED' %}
                  &nbsp;<span style="font-size:.58rem;background:#fef2f2;color:#991b1b;padding:1px 4px;border-radius:3px;font-weight:800;border:1px solid #fecaca;">REFUNDED</span>
                {% endif %}
              </td>
              <td class="tc" style="color:var(--lv-muted);font-size:.7rem;">—</td>
              <td class="tc" style="color:var(--lv-muted);font-size:.7rem;">—</td>
              <td class="tc" style="color:var(--lv-muted);font-size:.7rem;">—</td>
              <td class="tc" style="font-size:.7rem;font-weight:700;color:var(--lv-navy);">{{ row.inv_category }}</td>
              <td class="tr" style="font-weight:800;color:var(--lv-red);">{{ row.inv_amount|floatformat:2 }}</td>
              <td class="tr" style="color:var(--lv-green);font-weight:700;">
                {% if row.received %}{{ row.received|floatformat:2 }}{% else %}—{% endif %}
              </td>
              <td class="tr" style="font-weight:900;color:{% if row.balance > 0 %}var(--lv-red){% else %}var(--lv-green){% endif %};">
                {{ row.balance|floatformat:2 }}
              </td>
            </tr>

            {# Service sub-rows #}
            {% for sr in row.sub_rows %}
            <tr class="lv-row-svc svc-bg-{{ sr.svc }}"
                data-parentinv="{{ row.folder_no }}"
                data-searchtext="{{ row.folder_no }} {{ sr.svc }} {{ sr.pax_name }} {{ sr.pnr }} {{ sr.ticket_no }} {{ sr.client }} {{ sr.passport }}">
              <td></td>
              <td></td>
              <td></td>
              <td class="tc">
                <span class="svc-badge svc-{{ sr.svc }}">{{ sr.svc|upper|slice:":4" }}</span>
              </td>
              <td>
                <span style="font-weight:700;font-size:.75rem;">{{ sr.pax_name }}</span>
                {% if sr.passport and sr.passport != '—' %}
                  &nbsp;<span style="font-size:.62rem;color:var(--lv-muted);">PP: {{ sr.passport }}</span>
                {% endif %}
              </td>
              <td class="tc" style="font-size:.7rem;font-family:monospace;">{{ sr.pnr|default:"—" }}</td>
              <td class="tc" style="font-size:.68rem;font-family:monospace;">{{ sr.ticket_no|default:"—" }}</td>
              <td class="tc" style="font-size:.7rem;">{{ sr.flight_no|default:"—" }}</td>
              <td class="tc" style="font-size:.7rem;font-weight:700;color:var(--lv-navy);">{{ sr.client|default:"—" }}</td>
              <td class="tr" style="font-size:.74rem;font-weight:700;color:var(--lv-red);">
                {% if sr.amount %}{{ sr.amount|floatformat:2 }}{% else %}—{% endif %}
              </td>
              <td></td>
              <td></td>
            </tr>
            {% endfor %}

            {% endif %}

          {% empty %}
          <tr>
            <td colspan="12">
              <div class="lv-empty">
                <i class="fas fa-inbox"></i>
                <p>No transactions found.</p>
              </div>
            </td>
          </tr>
          {% endfor %}

        </tbody>
        <tfoot>
          <tr>
            <td colspan="9" style="text-align:right;font-size:.68rem;letter-spacing:.3px;">PERIOD TOTALS</td>
            <td class="tr" style="color:#fca5a5;">{{ total_payable|floatformat:2 }}</td>
            <td class="tr" style="color:#4ade80;">{{ total_paid|floatformat:2 }}</td>
            <td class="tr" style="color:{% if closing_balance > 0 %}#fca5a5{% else %}#4ade80{% endif %};">
              {{ closing_balance|floatformat:2 }}
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

  <!-- ── Right Panel ── -->
  <div class="lv-right-panel">

    <!-- Quick Search -->
    <div class="lv-search-box">
      <div class="lv-search-head">
        <i class="fas fa-search"></i> Quick Search
      </div>
      <div class="lv-search-inner">
        <div class="lv-search-wrap">
          <i class="fas fa-search"></i>
          <input type="text" class="lv-search-input" id="lvSearch"
                 placeholder="Folder#, PNR, Client, Ticket...">
        </div>
        <div class="lv-search-count" id="lvSearchCount"></div>
        <div class="lv-no-match" id="lvNoMatch">
          <i class="fas fa-search-minus mr-1"></i>No matching records
        </div>
      </div>
    </div>

    <!-- Service-wise Breakdown -->
    {% if cat_breakdown %}
    <div class="lv-breakdown">
      <div class="lv-breakdown-head">
        <i class="fas fa-chart-bar mr-1"></i> Service-wise Breakdown
      </div>
      <table>
        <thead>
          <tr>
            <th>Service</th>
            <th class="tr">Inv.</th>
            <th class="tr">Payable</th>
            <th class="tr">Balance</th>
          </tr>
        </thead>
        <tbody>
          {% for cat in cat_breakdown %}
          <tr>
            <td>
              <span class="svc-badge svc-{{ cat.svc_type }}">{{ cat.svc_type|upper|slice:":4" }}</span>
              <span style="margin-left:5px;font-size:.73rem;font-weight:600;">{{ cat.label }}</span>
            </td>
            <td class="tr" style="font-weight:700;">{{ cat.count }}</td>
            <td class="tr" style="font-weight:700;color:var(--lv-red);">{{ cat.total_amount|floatformat:0 }}</td>
            <td class="tr" style="font-weight:800;color:{% if cat.balance > 0 %}var(--lv-red){% else %}var(--lv-green){% endif %};">
              {{ cat.balance|floatformat:0 }}
            </td>
          </tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr>
            <td style="font-weight:800;font-size:.73rem;">Grand Total</td>
            <td class="tr" style="font-weight:800;">{{ total_inv_count }}</td>
            <td class="tr" style="font-weight:800;color:var(--lv-red);">{{ total_payable|floatformat:0 }}</td>
            <td class="tr" style="font-weight:800;color:{% if closing_balance > 0 %}var(--lv-red){% else %}var(--lv-green){% endif %};">
              {{ closing_balance|floatformat:0 }}
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
    {% endif %}

  </div><!-- end lv-right-panel -->

</div><!-- end lv-main-layout -->

{% else %}
<div class="lv-empty" style="background:#fff;border-radius:8px;border:1px solid var(--lv-border);margin-top:1rem;">
  <i class="fas fa-building text-muted"></i>
  <p>Select a vendor / airline and click <strong>Search</strong> to view their ledger.</p>
  <p style="font-size:.72rem;color:var(--lv-muted);margin-top:4px;">Use <strong>Show All</strong> for complete history.</p>
</div>
{% endif %}

{% endblock %}

{% block javascripts %}
<script>
$(function(){

  function getCsrf(){
    var name='csrftoken', ca=document.cookie.split(';');
    for(var i=0;i<ca.length;i++){
      var c=ca[i].trim();
      if(c.indexOf(name+'=')===0) return decodeURIComponent(c.substring(name.length+1));
    }
    return '';
  }
  $.ajaxSetup({ beforeSend:function(xhr,s){ if(!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(s.type)) xhr.setRequestHeader('X-CSRFToken',getCsrf()); } });

  /* ── Select2 for Vendor ── */
  $('#lvVend').select2({
    placeholder:'Search vendor / airline...',
    allowClear:true, minimumInputLength:1, width:'220px',
    ajax:{
      url:'{% url "vendors:get_vendors" %}',
      type:'POST',
      headers:{'X-CSRFToken':getCsrf()},
      data:function(p){ return{term:p.term}; },
      processResults:function(d){
        // get_vendors returns {results:[...]} — pass through directly
        return d;
      }
    },
    templateResult:function(item){
      if(item.loading) return item.text;
      var $el=$('<div style="padding:2px 0;border-bottom:1px solid #f1f5f9;"></div>');
      $el.append('<div style="font-size:13px;font-weight:700;color:#111;">'+item.text+'</div>');
      if(item.address) $el.append('<div style="font-size:11px;color:#666;font-style:italic;margin-top:2px;">'+item.address+'</div>');
      if(item.balance !== undefined)
        $el.append('<div style="font-size:11px;color:#888;margin-top:1px;">Balance: '+item.balance.toLocaleString()+'</div>');
      return $el;
    },
    templateSelection:function(item){ return item.text||item.id; }
  });

  /* ── Default dates ── */
  var now=new Date(), today=now.toISOString().split('T')[0];
  var m1ago=new Date(now.getFullYear(),now.getMonth()-1,now.getDate()).toISOString().split('T')[0];
  if(!$('[name=start_date]').val()) $('[name=start_date]').val(m1ago);
  if(!$('[name=end_date]').val())   $('[name=end_date]').val(today);

  /* ── Show All href ── */
  $('#lvVend').on('change',function(){
    var vid=$(this).val()||'';
    $('#lvShowAll').attr('href','?vendor_id='+vid+'&show_all=1');
  });

  /* ── Client-side Quick Search ── */
  var $searchInput = $('#lvSearch');
  var $countEl     = $('#lvSearchCount');
  var $noMatch     = $('#lvNoMatch');

  function doSearch(){
    var q = $searchInput.val().trim().toLowerCase();
    if(!q){
      $('#lvBody tr').removeClass('lv-row-hidden');
      $countEl.text('');
      $noMatch.hide();
      return;
    }
    var matchedInvoices = 0;
    $('#lvBody tr.lv-row-invoice').each(function(){
      var $invRow  = $(this);
      var invId    = $invRow.data('invid');
      var invText  = ($invRow.data('searchtext') || '').toLowerCase();
      var $subRows = $('#lvBody tr.lv-row-svc[data-parentinv="'+invId+'"]');
      var subMatch = false;
      $subRows.each(function(){
        var st = ($(this).data('searchtext') || '').toLowerCase();
        if(st.indexOf(q) !== -1){ subMatch = true; }
      });
      var invMatch = invText.indexOf(q) !== -1 || subMatch;
      if(invMatch){
        $invRow.removeClass('lv-row-hidden');
        $subRows.removeClass('lv-row-hidden');
        matchedInvoices++;
      } else {
        $invRow.addClass('lv-row-hidden');
        $subRows.addClass('lv-row-hidden');
      }
    });
    $('#lvBody tr.lv-row-opening').removeClass('lv-row-hidden');
    if(matchedInvoices === 0){
      $countEl.text('');
      $noMatch.show();
    } else {
      $countEl.text(matchedInvoices + ' invoice(s) found');
      $noMatch.hide();
    }
  }

  $searchInput.on('input', doSearch);
  $searchInput.on('keydown', function(e){ if(e.key==='Escape'){ $(this).val(''); doSearch(); } });

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