{# templates/pos/dash_ticketing.html #}
{# Travel Agency Dashboard — Clean v3.0                              #}
{# Included inside index.html when pos_type == "ticketing"           #}
<style>
/* ═══════════════════════════════════════════════════════════════════
   TRAVEL AGENCY DASHBOARD  —  v3.0
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --d-blue:    #01478f;
  --d-blue2:   #1d4ed8;
  --d-green:   #16a34a;
  --d-red:     #dc2626;
  --d-gold:    #b45309;
  --d-purple:  #7c3aed;
  --d-cyan:    #0891b2;
  --d-teal:    #0d9488;
  --d-orange:  #ea580c;
  --d-pink:    #be185d;
  --d-border:  #e5e7eb;
  --d-bg:      #f0f2f5;
  --d-card:    #ffffff;
  --d-shadow:  0 2px 8px rgba(2,6,23,.07);
  --d-radius:  10px;
  --d-text:    #0f172a;
  --d-muted:   #64748b;
}

/* ── Quick Actions Bar ─────────────────────────────────────── */
.da-actions {
  display: flex; gap: .4rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--d-border);
  border-radius: var(--d-radius); padding: .5rem .75rem;
  margin-bottom: .65rem; align-items: center;
  box-shadow: var(--d-shadow);
}
.da-actions .da-sep { width: 1px; height: 22px; background: var(--d-border); margin: 0 .1rem; }
.da-action-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .7rem; border-radius: 7px; font-size: .73rem;
  font-weight: 700; text-decoration: none !important; white-space: nowrap;
  transition: all .12s; border: 1.5px solid transparent; cursor: pointer;
}
.da-action-btn.primary { background: var(--d-blue); color: #fff !important; }
.da-action-btn.danger  { background: var(--d-red);  color: #fff !important; }
.da-action-btn.outline { background: #fff; color: var(--d-blue) !important; border-color: var(--d-blue); }
.da-action-btn.ghost   { background: #f1f5f9; color: var(--d-muted) !important; }
.da-action-btn:hover   { opacity: .88; transform: translateY(-1px); }
.da-actions-label { font-size: .65rem; font-weight: 800; color: var(--d-muted); text-transform: uppercase; letter-spacing: .4px; margin-right: .2rem; }

/* ── Section Label ─────────────────────────────────────────── */
.da-sec {
  font-size: .67rem; font-weight: 800; color: var(--d-muted);
  text-transform: uppercase; letter-spacing: .5px;
  padding-left: .5rem; border-left: 3px solid var(--d-blue);
  margin: .45rem 0 .45rem 0;
}

/* ── KPI Cards ─────────────────────────────────────────────── */
.da-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .5rem;
  margin-bottom: .6rem;
}
.da-kpi {
  background: var(--d-card);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius);
  padding: .65rem .8rem .55rem;
  box-shadow: var(--d-shadow);
  position: relative; overflow: hidden;
  transition: transform .12s, box-shadow .12s;
}
.da-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(2,6,23,.1); }
.da-kpi::after {
  content: ''; position: absolute; top: 0; left: 0;
  width: 100%; height: 3px;
}
.da-kpi.k-blue::after   { background: var(--d-blue); }
.da-kpi.k-green::after  { background: var(--d-green); }
.da-kpi.k-red::after    { background: var(--d-red); }
.da-kpi.k-gold::after   { background: var(--d-gold); }
.da-kpi.k-teal::after   { background: var(--d-teal); }
.da-kpi.k-purple::after { background: var(--d-purple); }
.da-kpi.k-orange::after { background: var(--d-orange); }

.da-kpi-head { display: flex; justify-content: space-between; align-items: flex-start; }
.da-kpi-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0;
}
.k-blue .da-kpi-icon   { background: rgba(1,71,143,.1);    color: var(--d-blue); }
.k-green .da-kpi-icon  { background: rgba(22,163,74,.1);   color: var(--d-green); }
.k-red .da-kpi-icon    { background: rgba(220,38,38,.1);   color: var(--d-red); }
.k-gold .da-kpi-icon   { background: rgba(180,83,9,.1);    color: var(--d-gold); }
.k-teal .da-kpi-icon   { background: rgba(13,148,136,.1);  color: var(--d-teal); }
.k-purple .da-kpi-icon { background: rgba(124,58,237,.1);  color: var(--d-purple); }
.k-orange .da-kpi-icon { background: rgba(234,88,12,.1);   color: var(--d-orange); }

.da-kpi-label { font-size: .63rem; font-weight: 700; color: var(--d-muted); text-transform: uppercase; letter-spacing: .3px; margin-top: .5rem; }
.da-kpi-value { font-size: 1.18rem; font-weight: 900; color: var(--d-text); line-height: 1.2; margin-top: .08rem; }
.da-kpi-sub   { font-size: .67rem; color: #94a3b8; margin-top: .1rem; }

/* ── Panel ─────────────────────────────────────────────────── */
.da-panel {
  background: var(--d-card);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius);
  box-shadow: var(--d-shadow);
  overflow: hidden;
}
.da-panel-head {
  padding: .55rem .85rem;
  border-bottom: 1px solid #f1f5f9;
  display: flex; justify-content: space-between; align-items: center;
}
.da-panel-title { font-weight: 900; color: var(--d-text); font-size: .83rem; }
.da-panel-sub   { font-size: .72rem; color: var(--d-muted); }
.da-panel-body  { padding: .7rem .85rem; }

/* ── Service Breakdown Grid ────────────────────────────────── */
.da-svc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .45rem;
  margin-bottom: .6rem;
}
.da-svc-card {
  background: var(--d-card);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius);
  padding: .6rem .7rem;
  box-shadow: var(--d-shadow);
  transition: transform .12s;
}
.da-svc-card:hover { transform: translateY(-2px); }
.da-svc-icon {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; margin-bottom: .35rem;
}
.sv-ticket    .da-svc-icon { background: #dbeafe; color: #1e40af; }
.sv-visa      .da-svc-icon { background: #ede9fe; color: #5b21b6; }
.sv-hotel     .da-svc-icon { background: #fef9c3; color: #854d0e; }
.sv-transport .da-svc-icon { background: #d1fae5; color: #065f46; }
.sv-insurance .da-svc-icon { background: #fee2e2; color: #991b1b; }
.sv-umrah     .da-svc-icon { background: #fdf2f8; color: #9d174d; }
.sv-refund    .da-svc-icon { background: #fff7ed; color: #c2410c; }

.da-svc-name  { font-size: .63rem; font-weight: 800; color: var(--d-muted); text-transform: uppercase; letter-spacing: .3px; }
.da-svc-count { font-size: 1.1rem; font-weight: 900; color: var(--d-text); line-height: 1.1; }
.da-svc-amt   { font-size: .68rem; font-weight: 700; color: var(--d-muted); margin-top: .05rem; }
.sv-ticket    .da-svc-count { color: #1e40af; }
.sv-visa      .da-svc-count { color: #5b21b6; }
.sv-hotel     .da-svc-count { color: #854d0e; }
.sv-transport .da-svc-count { color: #065f46; }
.sv-insurance .da-svc-count { color: #991b1b; }
.sv-umrah     .da-svc-count { color: #9d174d; }
.sv-refund    .da-svc-count { color: #c2410c; }

/* ── Main two-panel row ────────────────────────────────────── */
.da-main-row { display: grid; grid-template-columns: 2fr 1fr; gap: .5rem; margin-bottom: .6rem; }
.da-equal-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .6rem; }
.da-bottom-row { display: grid; grid-template-columns: 7fr 3fr; gap: .5rem; margin-bottom: .6rem; }

/* ── Chart ─────────────────────────────────────────────────── */
.da-chart-box { position: relative; height: 195px; }
.da-chart-box canvas { width: 100% !important; height: 100% !important; display: block; }
.da-chart-sm { height: 150px; }

/* ── Table ─────────────────────────────────────────────────── */
.da-table { width: 100%; border-collapse: collapse; font-size: .77rem; }
.da-table th {
  font-size: .62rem; font-weight: 800; color: var(--d-muted);
  text-transform: uppercase; padding: .38rem .65rem;
  border-bottom: 2px solid #f1f5f9; text-align: left; white-space: nowrap;
  background: #f8fafc;
}
.da-table td { padding: .38rem .65rem; border-bottom: 1px solid #f8fafc; white-space: nowrap; }
.da-table tr:last-child td { border-bottom: none; }
.da-table tr:hover td { background: #f8fafc; }
.da-table .tr { text-align: right; }
.da-table a { color: var(--d-blue); font-weight: 800; text-decoration: none; }
.da-table a:hover { text-decoration: underline; }
.da-tbl-scroll { max-height: 235px; overflow-y: auto; }
.da-tbl-scroll::-webkit-scrollbar { width: 3px; }
.da-tbl-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

/* ── Badges ────────────────────────────────────────────────── */
.da-badge { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .62rem; font-weight: 800; }
.ba-issued    { background: #dcfce7; color: #166534; }
.ba-refunded  { background: #fef2f2; color: #991b1b; }
.ba-ticket    { background: #dbeafe; color: #1e40af; }
.ba-visa      { background: #ede9fe; color: #5b21b6; }
.ba-hotel     { background: #fef9c3; color: #854d0e; }
.ba-transport { background: #d1fae5; color: #065f46; }
.ba-insurance { background: #fee2e2; color: #991b1b; }
.ba-umrah     { background: #fdf2f8; color: #9d174d; }

/* ── Ledger Balance ────────────────────────────────────────── */
.da-balance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.da-bal {
  padding: .5rem .65rem; border-radius: 8px; border: 1px solid;
}
.da-bal .blab { font-size: .6rem; font-weight: 800; color: var(--d-muted); text-transform: uppercase; letter-spacing: .3px; }
.da-bal .bval { font-size: .95rem; font-weight: 900; margin-top: .1rem; }
.ba-ar   { background: #f0fdf4; border-color: #bbf7d0; } .ba-ar .bval   { color: #166534; }
.ba-ap   { background: #fef2f2; border-color: #fecaca; } .ba-ap .bval   { color: #991b1b; }
.ba-vap  { background: #fff7ed; border-color: #fed7aa; } .ba-vap .bval  { color: #c2410c; }
.ba-var  { background: #f0fdf4; border-color: #86efac; } .ba-var .bval  { color: #166534; }
.da-bank-row {
  padding: .55rem .7rem; border-radius: 8px;
  background: #eff6ff; border: 1px solid #bfdbfe;
  margin-top: .45rem; display: flex; justify-content: space-between; align-items: center;
}
.da-bank-row .blab { font-size: .62rem; font-weight: 800; color: #1d4ed8; text-transform: uppercase; }
.da-bank-row .bval { font-size: 1.05rem; font-weight: 900; color: #1d4ed8; }

/* ── Income Bar ────────────────────────────────────────────── */
.da-inc-bar { height: 8px; border-radius: 4px; overflow: hidden; display: flex; margin: .35rem 0; }
.da-inc-bar .seg { transition: width .5s ease; }
.da-inc-legend { display: flex; gap: .85rem; font-size: .67rem; }
.da-inc-legend .dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 3px; }

/* ── Skeleton ──────────────────────────────────────────────── */
.da-skel { background: linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6); background-size: 200% 100%; animation: skl 1.2s infinite; border-radius: 6px; height: 32px; }
@keyframes skl { 0%{background-position:0} 100%{background-position:-200% 0} }

/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:991px) {
  .da-kpi-row { grid-template-columns: repeat(3, 1fr); }
  .da-svc-grid { grid-template-columns: repeat(3, 1fr); }
  .da-main-row, .da-equal-row, .da-bottom-row { grid-template-columns: 1fr; }
}
@media(max-width:575px) {
  .da-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .da-svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media print {
  .da-actions { display: none !important; }
}
</style>

<!-- ═══════════════════════════════════════════════════════════════
     ROW 1 — 5 CORE FINANCIAL KPIs
     ═══════════════════════════════════════════════════════════════ -->
<div class="da-sec"><i class="fas fa-tachometer-alt mr-1"></i>Financial Overview — <span id="dRangeLabel">—</span></div>

<div class="da-kpi-row">

  <!-- Invoices -->
  <div class="da-kpi k-blue">
    <div class="da-kpi-head">
      <div>
        <div class="da-kpi-label">Invoices</div>
        <div class="da-kpi-value" id="dInvCount">—</div>
        <div class="da-kpi-sub"><span id="dIssuedCount">0</span> issued · <span id="dRefundedCount">0</span> refunded</div>
      </div>
      <div class="da-kpi-icon"><i class="fas fa-file-invoice"></i></div>
    </div>
  </div>

  <!-- Receivable -->
  <div class="da-kpi k-green">
    <div class="da-kpi-head">
      <div>
        <div class="da-kpi-label">Total Receivable</div>
        <div class="da-kpi-value" id="dRecv">—</div>
        <div class="da-kpi-sub">Cash recv: <span id="dCashRecv">—</span></div>
      </div>
      <div class="da-kpi-icon"><i class="fas fa-hand-holding-usd"></i></div>
    </div>
  </div>

  <!-- Pending -->
  <div class="da-kpi k-orange">
    <div class="da-kpi-head">
      <div>
        <div class="da-kpi-label">Pending Balance</div>
        <div class="da-kpi-value" id="dPending">—</div>
        <div class="da-kpi-sub">Uncollected</div>
      </div>
      <div class="da-kpi-icon"><i class="fas fa-hourglass-half"></i></div>
    </div>
  </div>

  <!-- Payable -->
  <div class="da-kpi k-red">
    <div class="da-kpi-head">
      <div>
        <div class="da-kpi-label">Airline Payable</div>
        <div class="da-kpi-value" id="dPayable">—</div>
        <div class="da-kpi-sub">To suppliers</div>
      </div>
      <div class="da-kpi-icon"><i class="fas fa-plane-departure"></i></div>
    </div>
  </div>

  <!-- Agency Income -->
  <div class="da-kpi k-gold">
    <div class="da-kpi-head">
      <div>
        <div class="da-kpi-label">Agency Income</div>
        <div class="da-kpi-value" id="dIncome">—</div>
        <div class="da-kpi-sub">Comm: <span id="dComm">—</span> · PSF: <span id="dPSF">—</span></div>
      </div>
      <div class="da-kpi-icon"><i class="fas fa-coins"></i></div>
    </div>
  </div>

</div>

<!-- ═══════════════════════════════════════════════════════════════
     ROW 2 — SERVICE-WISE BREAKDOWN  (6 + Refund card + Balance)
     ═══════════════════════════════════════════════════════════════ -->
<div class="da-sec"><i class="fas fa-layer-group mr-1"></i>Service Breakdown</div>

<div class="da-svc-grid">
  <div class="da-svc-card sv-ticket">
    <div class="da-svc-icon"><i class="fas fa-plane"></i></div>
    <div class="da-svc-name">Tickets</div>
    <div class="da-svc-count" id="svTktCount">—</div>
    <div class="da-svc-amt">Recv: <strong id="svTktRecv">—</strong></div>
    <div class="da-svc-amt">Income: <strong id="svTktInc">—</strong></div>
  </div>
  <div class="da-svc-card sv-visa">
    <div class="da-svc-icon"><i class="fas fa-passport"></i></div>
    <div class="da-svc-name">Visa</div>
    <div class="da-svc-count" id="svVisaCount">—</div>
    <div class="da-svc-amt">Recv: <strong id="svVisaRecv">—</strong></div>
    <div class="da-svc-amt">Income: <strong id="svVisaInc">—</strong></div>
  </div>
  <div class="da-svc-card sv-hotel">
    <div class="da-svc-icon"><i class="fas fa-hotel"></i></div>
    <div class="da-svc-name">Hotel</div>
    <div class="da-svc-count" id="svHotelCount">—</div>
    <div class="da-svc-amt">Recv: <strong id="svHotelRecv">—</strong></div>
    <div class="da-svc-amt">Income: <strong id="svHotelInc">—</strong></div>
  </div>
  <div class="da-svc-card sv-transport">
    <div class="da-svc-icon"><i class="fas fa-car"></i></div>
    <div class="da-svc-name">Transport</div>
    <div class="da-svc-count" id="svTrnCount">—</div>
    <div class="da-svc-amt">Recv: <strong id="svTrnRecv">—</strong></div>
    <div class="da-svc-amt">Income: <strong id="svTrnInc">—</strong></div>
  </div>
  <div class="da-svc-card sv-insurance">
    <div class="da-svc-icon"><i class="fas fa-shield-alt"></i></div>
    <div class="da-svc-name">Insurance</div>
    <div class="da-svc-count" id="svInsCount">—</div>
    <div class="da-svc-amt">Recv: <strong id="svInsRecv">—</strong></div>
    <div class="da-svc-amt">Income: <strong id="svInsInc">—</strong></div>
  </div>
  <div class="da-svc-card sv-umrah">
    <div class="da-svc-icon"><i class="fas fa-kaaba"></i></div>
    <div class="da-svc-name">Umrah/Hajj</div>
    <div class="da-svc-count" id="svUmrahCount">—</div>
    <div class="da-svc-amt">Recv: <strong id="svUmrahRecv">—</strong></div>
    <div class="da-svc-amt">Income: <strong id="svUmrahInc">—</strong></div>
  </div>
</div>

<!-- ═══════════════════════════════════════════════════════════════
     ROW 3 — DAILY TREND CHART + INCOME BREAKDOWN
     ═══════════════════════════════════════════════════════════════ -->
<div class="da-sec"><i class="fas fa-chart-line mr-1"></i>Trends & Income Breakdown</div>
<div class="da-main-row">

  <!-- Daily Trend Chart -->
  <div class="da-panel">
    <div class="da-panel-head">
      <div>
        <div class="da-panel-title"><i class="fas fa-chart-area mr-2" style="color:var(--d-blue);"></i>Daily Trend</div>
        <div class="da-panel-sub">Receivable · Payable · Income</div>
      </div>
      <div style="display:flex;gap:.3rem;">
        <button class="btn btn-xs btn-outline-secondary" id="dChartLine" style="font-size:.67rem;padding:2px 7px;border-radius:5px;font-weight:700;">Line</button>
        <button class="btn btn-xs btn-outline-secondary" id="dChartBar"  style="font-size:.67rem;padding:2px 7px;border-radius:5px;font-weight:700;">Bar</button>
      </div>
    </div>
    <div class="da-panel-body">
      <div class="da-chart-box"><canvas id="dDailyChart"></canvas></div>
    </div>
  </div>

  <!-- Income Breakdown + Balances Panel -->
  <div class="da-panel">
    <div class="da-panel-head">
      <div class="da-panel-title"><i class="fas fa-pie-chart mr-2" style="color:var(--d-gold);"></i>Income & Balances</div>
    </div>
    <div class="da-panel-body" style="padding:.6rem .75rem;">

      <!-- Donut Chart -->
      <div class="da-chart-box da-chart-sm"><canvas id="dSvcPie"></canvas></div>
      <div id="dSvcPieEmpty" class="text-center text-muted mt-1 d-none" style="font-size:.78rem;font-weight:700;">No data</div>

      <!-- Commission vs PSF bar -->
      <div style="margin-top:.75rem;margin-bottom:.2rem;">
        <div style="font-size:.63rem;font-weight:800;color:var(--d-muted);text-transform:uppercase;margin-bottom:.3rem;">Income Composition</div>
        <div class="da-inc-bar" id="dIncBar">
          <div class="seg" style="background:var(--d-blue);width:0%"></div>
          <div class="seg" style="background:var(--d-teal);width:0%"></div>
          <div class="seg" style="background:var(--d-gold);width:0%"></div>
        </div>
        <div class="da-inc-legend">
          <span><span class="dot" style="background:var(--d-blue);"></span>Comm <strong id="dCommPct">0%</strong></span>
          <span><span class="dot" style="background:var(--d-teal);"></span>PSF <strong id="dPSFPct">0%</strong></span>
          <span><span class="dot" style="background:var(--d-gold);"></span>Other <strong id="dOtherPct">0%</strong></span>
        </div>
      </div>

      <!-- Refund line -->
      <div style="background:#fff7ed;border:1px solid #fed7aa;border-radius:7px;padding:.4rem .65rem;margin-top:.55rem;display:flex;justify-content:space-between;align-items:center;">
        <span style="font-size:.68rem;font-weight:700;color:#c2410c;"><i class="fas fa-undo mr-1"></i>Refunds</span>
        <span style="font-size:.78rem;font-weight:900;color:#c2410c;" id="dRfndCount">—</span>
        <span style="font-size:.68rem;color:#92400e;">Paid: <strong id="dRfndPaid">—</strong></span>
      </div>

    </div>
  </div>

</div>

<!-- ═══════════════════════════════════════════════════════════════
     ROW 4 — AIRLINE PERFORMANCE + TOP CLIENTS
     ═══════════════════════════════════════════════════════════════ -->
<div class="da-sec"><i class="fas fa-table mr-1"></i>Airline Performance &amp; Top Clients</div>
<div class="da-equal-row">

  <!-- Airline / Supplier Table -->
  <div class="da-panel">
    <div class="da-panel-head">
      <div>
        <div class="da-panel-title"><i class="fas fa-plane-departure mr-2" style="color:var(--d-blue);"></i>Airline / Supplier</div>
        <div class="da-panel-sub">Grouped by category — <span id="dAirlineCount">0</span> airlines</div>
      </div>
      <a href="{% url 'ticket:ticket_reports' %}" class="btn btn-xs btn-outline-primary" style="font-size:.68rem;padding:2px 9px;border-radius:6px;font-weight:800;">Full Report</a>
    </div>
    <div class="da-tbl-scroll">
      <table class="da-table">
        <thead>
          <tr>
            <th>Airline / Supplier</th>
            <th class="tr">Inv.</th>
            <th class="tr">Receivable</th>
            <th class="tr">Commission</th>
            <th class="tr">Income</th>
          </tr>
        </thead>
        <tbody id="dAirlineBody"><tr><td colspan="5"><div class="da-skel"></div></td></tr></tbody>
      </table>
    </div>
  </div>

  <!-- Top Clients -->
  <div class="da-panel">
    <div class="da-panel-head">
      <div>
        <div class="da-panel-title"><i class="fas fa-users mr-2" style="color:var(--d-blue);"></i>Top Clients</div>
        <div class="da-panel-sub">By receivable — Top 10</div>
      </div>
      <a href="{% url 'customers:ticket_customer_ledger_view' %}" class="btn btn-xs btn-outline-primary" style="font-size:.68rem;padding:2px 9px;border-radius:6px;font-weight:800;">Ledger</a>
    </div>
    <div class="da-tbl-scroll">
      <table class="da-table">
        <thead>
          <tr>
            <th>#</th>
            <th>Client</th>
            <th class="tr">Inv.</th>
            <th class="tr">Receivable</th>
            <th class="tr">Balance Due</th>
            <th class="tr">Income</th>
          </tr>
        </thead>
        <tbody id="dClientBody"><tr><td colspan="6"><div class="da-skel"></div></td></tr></tbody>
      </table>
    </div>
  </div>

</div>

<!-- ═══════════════════════════════════════════════════════════════
     ROW 5 — RECENT INVOICES + LEDGER BALANCES
     ═══════════════════════════════════════════════════════════════ -->
<div class="da-sec"><i class="fas fa-history mr-1"></i>Recent Invoices &amp; Ledger Balances</div>
<div class="da-bottom-row">

  <!-- Recent Invoices -->
  <div class="da-panel">
    <div class="da-panel-head">
      <div>
        <div class="da-panel-title"><i class="fas fa-history mr-2" style="color:var(--d-blue);"></i>Recent Invoices</div>
        <div class="da-panel-sub">Latest 15 across all services</div>
      </div>
      <div style="display:flex;gap:.3rem;">
        <a href="{% url 'ticket:ticket_list' %}"  class="btn btn-xs btn-outline-primary" style="font-size:.68rem;padding:2px 9px;border-radius:6px;font-weight:800;"><i class="fas fa-list mr-1"></i>All</a>
        <a href="{% url 'ticket:refund_list' %}"  class="btn btn-xs btn-outline-danger"  style="font-size:.68rem;padding:2px 9px;border-radius:6px;font-weight:800;"><i class="fas fa-undo mr-1"></i>Refunds</a>
      </div>
    </div>
    <div class="da-tbl-scroll" style="max-height:255px;">
      <table class="da-table">
        <thead>
          <tr>
            <th>Folder#</th>
            <th>Date</th>
            <th>Type</th>
            <th>Client</th>
            <th>Airline / Category</th>
            <th>Status</th>
            <th class="tr">Receivable</th>
            <th class="tr">Income</th>
          </tr>
        </thead>
        <tbody id="dRecentBody"><tr><td colspan="8"><div class="da-skel"></div></td></tr></tbody>
      </table>
    </div>
  </div>

  <!-- Ledger Balances -->
  <div class="da-panel">
    <div class="da-panel-head">
      <div class="da-panel-title"><i class="fas fa-balance-scale mr-2" style="color:var(--d-blue);"></i>Ledger Balances</div>
    </div>
    <div class="da-panel-body">
      <div class="da-balance-grid">
        <div class="da-bal ba-ar">
          <div class="blab"><i class="fas fa-arrow-circle-down mr-1"></i>Client AR</div>
          <div class="bval" id="dCustAR">—</div>
          <div style="font-size:.6rem;color:#64748b;margin-top:.05rem;">Clients owe us</div>
        </div>
        <div class="da-bal ba-ap">
          <div class="blab"><i class="fas fa-arrow-circle-up mr-1"></i>Client AP</div>
          <div class="bval" id="dCustAP">—</div>
          <div style="font-size:.6rem;color:#64748b;margin-top:.05rem;">We owe clients</div>
        </div>
        <div class="da-bal ba-vap">
          <div class="blab"><i class="fas fa-plane mr-1"></i>Airline AP</div>
          <div class="bval" id="dVendAP">—</div>
          <div style="font-size:.6rem;color:#64748b;margin-top:.05rem;">We owe airlines</div>
        </div>
        <div class="da-bal ba-var">
          <div class="blab"><i class="fas fa-plane-arrival mr-1"></i>Airline AR</div>
          <div class="bval" id="dVendAR">—</div>
          <div style="font-size:.6rem;color:#64748b;margin-top:.05rem;">Airlines owe us</div>
        </div>
      </div>

      <div class="da-bank-row">
        <div>
          <div class="blab"><i class="fas fa-university mr-1"></i>Bank / Cash</div>
          <div class="bval" id="dBank">—</div>
        </div>
        <i class="fas fa-university" style="font-size:1.5rem;color:rgba(29,78,216,.2);"></i>
      </div>

      <!-- Avg Income & Total Tickets -->
      <div style="margin-top:.55rem;display:flex;gap:.4rem;">
        <div style="flex:1;background:#f8fafc;border:1px solid #e5e7eb;border-radius:7px;padding:.4rem .65rem;">
          <div style="font-size:.6rem;font-weight:800;color:var(--d-muted);text-transform:uppercase;">Avg Income/Inv</div>
          <div style="font-size:.95rem;font-weight:900;color:var(--d-gold);" id="dAvgIncome">—</div>
        </div>
        <div style="flex:1;background:#f8fafc;border:1px solid #e5e7eb;border-radius:7px;padding:.4rem .65rem;">
          <div style="font-size:.6rem;font-weight:800;color:var(--d-muted);text-transform:uppercase;">Total Tickets</div>
          <div style="font-size:.95rem;font-weight:900;color:var(--d-blue);" id="dTktCount">—</div>
        </div>
      </div>
    </div>
  </div>

</div>

<!-- ═══════════════════════════════════════════════════════════════
     DASHBOARD JS
     ═══════════════════════════════════════════════════════════════ -->
<script>
(function(){
'use strict';

/* ── Helpers ── */
function $id(id){ return document.getElementById(id); }
function fmt(n){ return Number(n||0).toLocaleString('en-PK',{minimumFractionDigits:0,maximumFractionDigits:0}); }
function fmtK(n){
  n = Number(n||0);
  if(n >= 1000000) return (n/1000000).toFixed(1)+'M';
  if(n >= 100000)  return (n/1000).toFixed(0)+'K';
  if(n >= 1000)    return (n/1000).toFixed(1)+'K';
  return n.toFixed(0);
}
function esc(s){
  return String(s||'').replace(/[&<>"']/g, function(c){
    return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
  });
}

/* ── Range ── */
function ymd(d){ return d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0')+'-'+String(d.getDate()).padStart(2,'0'); }
function getRange(){
  var p = $id('datePreset'); var preset = p ? p.value : 'this_month';
  var today = new Date();
  if(preset==='custom'){
    var fEl=$id('from'), tEl=$id('to');
    return {from:fEl?fEl.value:'', to:tEl?tEl.value:''};
  }
  var f, t = today;
  if(preset==='today')   { f=today; }
  else if(preset==='7d') { f=new Date(today); f.setDate(f.getDate()-6); }
  else if(preset==='30d'){ f=new Date(today); f.setDate(f.getDate()-29); }
  else                   { f=new Date(today.getFullYear(),today.getMonth(),1); }
  return {from:ymd(f), to:ymd(t)};
}
function rp(){ var r=getRange(); return '?from='+r.from+'&to='+r.to; }

/* ── URLs ── */
var URLS = {
  summary:  "{% url 'pos:tkt_dash_summary' %}",
  chart:    "{% url 'pos:tkt_dash_chart_daily' %}",
  airline:  "{% url 'pos:tkt_dash_airline' %}",
  clients:  "{% url 'pos:tkt_dash_clients' %}",
  recent:   "{% url 'pos:tkt_dash_recent' %}",
  svcBreak: "{% url 'pos:tkt_dash_svc_breakdown' %}",
};

/* ── Chart instances ── */
var _dailyChart, _pieChart;
var _chartType = 'line';

/* ── Service classify ── */
function classify(cat){
  var c=(cat||'').toLowerCase();
  if(c.includes('visa'))                               return 'visa';
  if(c.includes('hotel'))                              return 'hotel';
  if(c.includes('transport')||c.includes('car')||c.includes('bus')) return 'transport';
  if(c.includes('insurance'))                          return 'insurance';
  if(c.includes('umrah')||c.includes('hajj')||c.includes('ziyarat')) return 'umrah';
  return 'ticket';
}

var SVC_COLORS = {
  ticket:'#01478f', visa:'#7c3aed', hotel:'#b45309',
  transport:'#0d9488', insurance:'#dc2626', umrah:'#be185d'
};
var BADGE_MAP = {ticket:'ba-ticket',visa:'ba-visa',hotel:'ba-hotel',transport:'ba-transport',insurance:'ba-insurance',umrah:'ba-umrah'};

/* ════════════════════════════════════════════════════════════════
   1. SUMMARY KPIs
════════════════════════════════════════════════════════════════ */
async function loadSummary(){
  try{
    var j = await fetch(URLS.summary+rp()).then(r=>r.json());
    var k = j.kpis||{};
    var rng = j.range||{};

    $id('dRangeLabel').textContent = (rng.from||'')+(rng.from?' → ':'')+( rng.to||'');

    // Core KPIs
    $id('dInvCount').textContent    = k.total_invoices||0;
    $id('dIssuedCount').textContent = k.issued_count||0;
    $id('dRefundedCount').textContent = k.refunded_count||0;
    $id('dRecv').textContent        = fmtK(k.total_receivable);
    $id('dCashRecv').textContent    = fmtK(k.cash_received);
    $id('dPending').textContent     = fmtK(k.pending_receivable);
    $id('dPayable').textContent     = fmtK(k.total_payable);
    $id('dIncome').textContent      = fmtK(k.total_income);
    $id('dComm').textContent        = fmtK(k.total_commission);
    $id('dPSF').textContent         = fmtK(k.total_psf);
    $id('dAvgIncome').textContent   = fmtK(k.avg_income);
    $id('dTktCount').textContent    = k.ticket_count||0;

    // Refunds
    $id('dRfndCount').textContent = k.refunded_count||0;
    $id('dRfndPaid').textContent  = fmtK(k.rfnd_to_client);

    // Ledger Balances
    $id('dCustAR').textContent = fmtK(k.cust_ar);
    $id('dCustAP').textContent = fmtK(k.cust_ap);
    $id('dVendAP').textContent = fmtK(k.vend_ap);
    $id('dVendAR').textContent = fmtK(k.vend_ar);
    $id('dBank').textContent   = fmtK(k.bank_sum);

    // Income Composition Bar
    var inc = k.total_income||1;
    var cp  = Math.round((k.total_commission/inc)*100);
    var pp  = Math.round((k.total_psf/inc)*100);
    var op  = Math.max(0,100-cp-pp);
    var segs = document.querySelectorAll('#dIncBar .seg');
    if(segs[0]) segs[0].style.width=cp+'%';
    if(segs[1]) segs[1].style.width=pp+'%';
    if(segs[2]) segs[2].style.width=op+'%';
    $id('dCommPct').textContent = cp+'%';
    $id('dPSFPct').textContent  = pp+'%';
    $id('dOtherPct').textContent= op+'%';

  }catch(e){ console.error('[dash-summary]',e); }
}

/* ════════════════════════════════════════════════════════════════
   2. SERVICE BREAKDOWN  (uses svc_breakdown endpoint)
════════════════════════════════════════════════════════════════ */
async function loadSvcBreakdown(){
  try{
    var j = await fetch(URLS.svcBreak+rp()).then(r=>r.json());
    var b = j.breakdown||{};

    function svc(id, key, sk){
      $id('sv'+id+'Count').textContent = sk?b[key]?.[sk]||'—':b[key]?.count||'—';
    }

    // Update all service cards
    var svcs = ['ticket','visa','hotel','transport','insurance','umrah'];
    var ids  = ['Tkt','Visa','Hotel','Trn','Ins','Umrah'];
    svcs.forEach(function(s,i){
      var d = b[s]||{};
      var countEl = $id('sv'+ids[i]+'Count');
      var recvEl  = $id('sv'+ids[i]+'Recv');
      var incEl   = $id('sv'+ids[i]+'Inc');
      if(countEl) countEl.textContent = d.count||'—';
      if(recvEl)  recvEl.textContent  = fmtK(d.recv||0);
      if(incEl)   incEl.textContent   = fmtK(d.income||0);
    });

    // Service Mix Pie
    var labels = ['Tickets','Visa','Hotel','Transport','Insurance','Umrah'];
    var data   = svcs.map(function(s){ return (b[s]||{}).income||0; });
    var clrs   = svcs.map(function(s){ return SVC_COLORS[s]; });
    var hasData = data.some(function(v){ return v>0; });

    var ctx = document.getElementById('dSvcPie').getContext('2d');
    if(_pieChart) _pieChart.destroy();
    if(!hasData){
      $id('dSvcPieEmpty').classList.remove('d-none');
      return;
    }
    $id('dSvcPieEmpty').classList.add('d-none');
    _pieChart = new Chart(ctx, {
      type: 'doughnut',
      data: { labels:labels, datasets:[{data:data,backgroundColor:clrs,borderColor:'#fff',borderWidth:2}] },
      options: {
        responsive:true, maintainAspectRatio:false, animation:{duration:350},
        plugins:{ legend:{ position:'bottom', labels:{ usePointStyle:true, boxWidth:8, font:{size:9.5} } } },
        cutout:'62%'
      }
    });
  }catch(e){ console.error('[dash-svc]',e); }
}

/* ════════════════════════════════════════════════════════════════
   3. DAILY TREND CHART
════════════════════════════════════════════════════════════════ */
async function loadChart(){
  try{
    var j = await fetch(URLS.chart+rp()).then(r=>r.json());
    var ctx = document.getElementById('dDailyChart').getContext('2d');
    if(_dailyChart) _dailyChart.destroy();

    var isLine = _chartType==='line';
    var ds = [
      { label:'Receivable', data:j.receivable||[], fill:isLine, borderColor:'#22c55e', backgroundColor:'rgba(34,197,94,.1)', tension:.35, pointRadius:0, borderWidth:2 },
      { label:'Payable',    data:j.payable||[],    fill:isLine, borderColor:'#ef4444', backgroundColor:'rgba(239,68,68,.09)', tension:.35, pointRadius:0, borderWidth:2 },
      { label:'Income',     data:j.income||[],     fill:false,  borderColor:'#01478f', backgroundColor:'rgba(1,71,143,.75)', tension:.35, pointRadius:0, borderWidth:2.5 },
    ];

    _dailyChart = new Chart(ctx, {
      type: _chartType,
      data: { labels:j.labels||[], datasets:ds },
      options: {
        responsive:true, maintainAspectRatio:false, animation:{duration:350},
        interaction:{mode:'index',intersect:false},
        plugins:{ legend:{ position:'bottom', labels:{ usePointStyle:true, boxWidth:8, font:{size:10} } } },
        scales:{ y:{ beginAtZero:true, ticks:{ callback:function(v){ return fmtK(v); } } } }
      }
    });
  }catch(e){ console.error('[dash-chart]',e); }
}

document.getElementById('dChartLine').addEventListener('click',function(){ _chartType='line'; loadChart(); });
document.getElementById('dChartBar' ).addEventListener('click',function(){ _chartType='bar';  loadChart(); });

/* ════════════════════════════════════════════════════════════════
   4. AIRLINE TABLE
════════════════════════════════════════════════════════════════ */
async function loadAirline(){
  try{
    var j = await fetch(URLS.airline+rp()).then(r=>r.json());
    var items = j.items||[];
    var tb = $id('dAirlineBody');

    $id('dAirlineCount').textContent = items.length;

    if(!items.length){
      tb.innerHTML='<tr><td colspan="5" class="text-muted text-center py-3" style="font-size:.78rem;">No data for this period</td></tr>';
      return;
    }
    tb.innerHTML = items.map(function(a){
      var svc = classify(a.airline);
      return '<tr>' +
        '<td><span class="da-badge '+BADGE_MAP[svc]+'" style="margin-right:.3rem;">'+svc.slice(0,3).toUpperCase()+'</span><strong>'+esc(a.airline)+'</strong></td>' +
        '<td class="tr">'+a.count+'</td>' +
        '<td class="tr">'+fmt(a.receivable)+'</td>' +
        '<td class="tr" style="color:var(--d-green);font-weight:700;">'+fmt(a.commission)+'</td>' +
        '<td class="tr" style="color:var(--d-blue);font-weight:900;">'+fmt(a.income)+'</td>' +
        '</tr>';
    }).join('');
  }catch(e){ console.error('[dash-airline]',e); }
}

/* ════════════════════════════════════════════════════════════════
   5. TOP CLIENTS
════════════════════════════════════════════════════════════════ */
async function loadClients(){
  try{
    var j = await fetch(URLS.clients+rp()).then(r=>r.json());
    var items = j.items||[];
    var tb = $id('dClientBody');

    if(!items.length){
      tb.innerHTML='<tr><td colspan="6" class="text-muted text-center py-3" style="font-size:.78rem;">No client data</td></tr>';
      return;
    }
    tb.innerHTML = items.map(function(c,i){
      var cls = c.balance>0?'color:var(--d-red);font-weight:800;':'color:var(--d-green);font-weight:800;';
      return '<tr>' +
        '<td style="font-size:.67rem;color:#94a3b8;font-weight:800;">'+(i+1)+'</td>' +
        '<td style="font-weight:700;max-width:110px;overflow:hidden;text-overflow:ellipsis;">'+esc(c.name)+'</td>' +
        '<td class="tr">'+c.count+'</td>' +
        '<td class="tr">'+fmt(c.receivable)+'</td>' +
        '<td class="tr" style="'+cls+'">'+fmt(c.balance)+'</td>' +
        '<td class="tr" style="color:var(--d-blue);font-weight:800;">'+fmt(c.income)+'</td>' +
        '</tr>';
    }).join('');
  }catch(e){ console.error('[dash-clients]',e); }
}

/* ════════════════════════════════════════════════════════════════
   6. RECENT INVOICES
════════════════════════════════════════════════════════════════ */
async function loadRecent(){
  try{
    var j = await fetch(URLS.recent).then(r=>r.json());
    var items = j.items||[];
    var tb = $id('dRecentBody');

    if(!items.length){
      tb.innerHTML='<tr><td colspan="8" class="text-muted text-center py-3" style="font-size:.78rem;">No recent invoices</td></tr>';
      return;
    }
    tb.innerHTML = items.map(function(inv){
      var bc  = inv.status==='REFUNDED'?'ba-refunded':'ba-issued';
      var svc = classify(inv.category);
      return '<tr style="cursor:pointer;" onclick="window.location.href=\'/ticket/'+inv.folder_no+'/\'">' +
        '<td><a href="/ticket/'+inv.folder_no+'/" style="color:var(--d-blue);font-weight:900;">'+inv.folder_no+'</a></td>' +
        '<td style="font-size:.73rem;">'+inv.date+'</td>' +
        '<td><span class="da-badge '+BADGE_MAP[svc]+'">'+svc.slice(0,4).toUpperCase()+'</span></td>' +
        '<td style="font-weight:600;max-width:100px;overflow:hidden;text-overflow:ellipsis;">'+esc(inv.client||'')+'</td>' +
        '<td style="font-size:.72rem;color:var(--d-muted);">'+esc(inv.agent||inv.category||'')+'</td>' +
        '<td><span class="da-badge '+bc+'">'+inv.status+'</span></td>' +
        '<td class="tr">'+fmt(inv.receivable)+'</td>' +
        '<td class="tr" style="color:var(--d-green);font-weight:800;">'+fmt(inv.income)+'</td>' +
        '</tr>';
    }).join('');
  }catch(e){ console.error('[dash-recent]',e); }
}

/* ════════════════════════════════════════════════════════════════
   MASTER RUN
════════════════════════════════════════════════════════════════ */
window.tkRunAll = async function(){
  await Promise.all([
    loadSummary(),
    loadSvcBreakdown(),
    loadChart(),
    loadAirline(),
    loadClients(),
    loadRecent(),
  ].map(function(p){ return p.catch(function(e){ console.error('[dash]',e); }); }));
};

$(function(){ tkRunAll(); });

})();
</script>