{% extends 'base.html' %}

{% block main %}
<div x-data="axInvoices()">
        <!-- ════════════════ PAGE HEAD ════════════════ -->
        <div class="ax-page-head">
          <div class="ax-page-head__row">
            <div>
              <nav class="ax-breadcrumb" data-ax-breadcrumb aria-label="Breadcrumb"></nav>
              <h1 class="ax-page-head__title">Invoices</h1>
              <p class="ax-page-head__subtitle"><span class="ax-num">94</span> invoices this quarter — <span class="ax-num">7</span> overdue totalling <span class="ax-num">$18,240.00</span>.</p>
            </div>
            <div class="ax-page-head__actions">
              <button type="button" class="ax-btn ax-btn--ghost">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"/><path d="M7 11l5 5l5 -5"/><path d="M12 4l0 12"/></svg>
                <span class="ax-btn__label">Export</span>
              </button>
              <a class="ax-btn ax-btn--primary" href="/ecommerce/create-invoice/">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5l0 14"/><path d="M5 12l14 0"/></svg>
                <span class="ax-btn__label">Create invoice</span>
              </a>
            </div>
          </div>
        </div>

        <!-- ════════════════ CONTENT ════════════════ -->
        <div class="ax-dash-grid">

          <!-- ───── KPI STRIP ───── -->
          <div class="ax-card ax-kpi ax-col--3" role="region" aria-label="Outstanding $42,180">
            <div class="ax-card__body">
              <div class="ax-kpi__top">
                <span class="ax-kpi__icon ax-kpi__icon--c1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 7v5l3 3"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/></svg></span>
                <span class="ax-kpi__delta ax-kpi__delta--down"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6l6 -6"/></svg>5.4%</span>
              </div>
              <div class="ax-kpi__label">Outstanding</div>
              <div class="ax-kpi__value ax-num">$42,180</div>
            </div>
          </div>
          <div class="ax-card ax-kpi ax-col--3" role="region" aria-label="Overdue $18,240">
            <div class="ax-card__body">
              <div class="ax-kpi__top">
                <span class="ax-kpi__icon ax-kpi__icon--c4"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4"/><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0"/><path d="M12 16h.01"/></svg></span>
                <span class="ax-kpi__delta ax-kpi__delta--up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 15l6 -6l6 6"/></svg>2 inv</span>
              </div>
              <div class="ax-kpi__label">Overdue</div>
              <div class="ax-kpi__value ax-num" style="color:var(--ax-danger-500);">$18,240</div>
            </div>
          </div>
          <div class="ax-card ax-kpi ax-col--3" role="region" aria-label="Paid in last 30 days $128,940, up 9.1%">
            <div class="ax-card__body">
              <div class="ax-kpi__top">
                <span class="ax-kpi__icon ax-kpi__icon--c2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 12l2 2l4 -4"/><path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"/></svg></span>
                <span class="ax-kpi__delta ax-kpi__delta--up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 15l6 -6l6 6"/></svg>9.1%</span>
              </div>
              <div class="ax-kpi__label">Paid · 30 days</div>
              <div class="ax-kpi__value ax-num">$128,940</div>
            </div>
          </div>
          <div class="ax-card ax-kpi ax-col--3" role="region" aria-label="Drafts 5">
            <div class="ax-card__body">
              <div class="ax-kpi__top">
                <span class="ax-kpi__icon ax-kpi__icon--c3"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"/><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3z"/><path d="M16 5l3 3"/></svg></span>
              </div>
              <div class="ax-kpi__label">Drafts</div>
              <div class="ax-kpi__value ax-num">5</div>
            </div>
          </div>

          <!-- ───── INVOICE TABLE ───── -->
          <section class="ax-card ax-col--12" role="region" aria-label="Invoice list">

            <!-- status tabs -->
            <div class="ax-card__header" style="padding-bottom:0;border:0;">
              <div class="ax-cluster" style="gap:var(--ax-space-1);flex-wrap:wrap;">
                <template x-for="t in statusTabs" :key="t.id">
                  <button type="button" class="ax-btn ax-btn--ghost ax-btn--sm" @click="fStatus=t.id"
                    :style="fStatus===t.id ? 'box-shadow:inset 0 -2px 0 var(--ax-accent);color:var(--ax-accent);border-radius:0;' : 'border-radius:0;'">
                    <span x-text="t.label"></span>
                    <span class="ax-badge ax-badge--soft ax-badge--neutral ax-badge--sm ax-num" style="margin-inline-start:6px;" x-text="t.count"></span>
                  </button>
                </template>
              </div>
            </div>

            <!-- toolbar -->
            <div class="ax-card__header" style="flex-wrap:wrap;gap:var(--ax-space-3);border-top:1px solid var(--ax-border);">
              <div style="position:relative;flex:1 1 220px;max-width:320px;">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="position:absolute;inset-inline-start:11px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ax-text-subtle);"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/><path d="M21 21l-6 -6"/></svg>
                <input type="search" class="ax-input" placeholder="Search invoice # or client…" x-model="q" style="padding-inline-start:36px;" aria-label="Search invoices">
              </div>
              <div class="ax-card__actions" style="flex-wrap:wrap;gap:var(--ax-space-2);">
                <button type="button" class="ax-btn ax-btn--secondary ax-btn--sm">
                  <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12"/><path d="M16 3v4"/><path d="M8 3v4"/><path d="M4 11h16"/></svg>
                  <span class="ax-btn__label">This quarter</span>
                </button>
                <select class="ax-select ax-select--sm" x-model="fClient" aria-label="Filter by client" style="min-width:150px;">
                  <option value="">All clients</option>
                  <template x-for="c in clientNames()" :key="c"><option :value="c" x-text="c"></option></template>
                </select>
                <select class="ax-select ax-select--sm" x-model="sort" aria-label="Sort invoices" style="min-width:140px;">
                  <option value="newest">Newest</option>
                  <option value="due">Due date</option>
                  <option value="amount-desc">Amount: High</option>
                  <option value="amount-asc">Amount: Low</option>
                  <option value="client">Client</option>
                  <option value="status">Status</option>
                </select>
              </div>
            </div>

            <!-- bulk bar -->
            <div x-show="selected.length" x-cloak x-transition
              style="display:flex;align-items:center;gap:var(--ax-space-3);margin:var(--ax-space-4) var(--ax-space-5) 0;padding:var(--ax-space-2) var(--ax-space-4);background:var(--ax-accent-wash);border:1px solid var(--ax-accent);border-radius:var(--ax-radius-md);flex-wrap:wrap;">
              <b class="ax-num" style="color:var(--ax-accent);font-size:var(--ax-text-sm);"><span x-text="selected.length"></span> selected</b>
              <span style="width:1px;height:18px;background:var(--ax-border-strong);"></span>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--sm">Mark paid</button>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--sm">Send</button>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--sm">Download</button>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--sm" style="color:var(--ax-danger-500);">Delete</button>
              <span style="flex:1 1 auto;"></span>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" aria-label="Clear selection" @click="selected=[]"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button>
            </div>

            <!-- table -->
            <div class="ax-table-wrap">
              <table class="ax-table ax-table--hover">
                <thead class="ax-table__head">
                  <tr>
                    <th class="ax-table__th" scope="col" style="width:38px;"><input type="checkbox" class="ax-checkbox" aria-label="Select all" :checked="allSelected()" @change="toggleAll($event.target.checked)"></th>
                    <th class="ax-table__th" scope="col">Invoice</th>
                    <th class="ax-table__th" scope="col">Client</th>
                    <th class="ax-table__th" scope="col">Issued</th>
                    <th class="ax-table__th" scope="col">Due</th>
                    <th class="ax-table__th ax-table__th--num" scope="col">Amount</th>
                    <th class="ax-table__th" scope="col">Status</th>
                    <th class="ax-table__th" scope="col" style="width:44px;"></th>
                  </tr>
                </thead>
                <tbody>
                  <template x-for="iv in filtered()" :key="iv.id">
                    <tr class="ax-table__row" :style="selected.includes(iv.id) ? 'background:var(--ax-accent-wash);' : ''">
                      <td class="ax-table__td"><input type="checkbox" class="ax-checkbox" :value="iv.id" x-model.number="selected" :aria-label="'Select ' + iv.number"></td>
                      <td class="ax-table__td">
                        <a href="/ecommerce/invoice-details/" class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-accent);font-weight:var(--ax-weight-semibold);text-decoration:none;" x-text="iv.number"></a>
                      </td>
                      <td class="ax-table__td">
                        <div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;">
                          <span class="ax-avatar ax-avatar--sm ax-avatar--squircle" :style="`background:color-mix(in oklab,${iv.color} 18%,transparent);color:${iv.color};`"><span class="ax-avatar__initials" x-text="iv.initials"></span></span>
                          <div style="min-width:0;"><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);" x-text="iv.client"></div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);" x-text="iv.email"></div></div>
                        </div>
                      </td>
                      <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);" x-text="iv.issued"></td>
                      <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);" :style="iv.status==='overdue' ? 'color:var(--ax-danger-500);font-weight:var(--ax-weight-medium);' : 'color:var(--ax-text-muted);'">
                        <span x-text="iv.due"></span>
                        <span x-show="iv.status==='overdue'" style="font-size:var(--ax-text-2xs);display:block;" x-text="iv.overdueDays + 'd overdue'"></span>
                      </td>
                      <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);font-weight:var(--ax-weight-semibold);" x-text="money(iv.amount)"></td>
                      <td class="ax-table__td"><span x-html="statusPill(iv.status)"></span></td>
                      <td class="ax-table__td">
                        <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" :aria-label="'Actions for ' + iv.number"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/></svg></button>
                      </td>
                    </tr>
                  </template>
                </tbody>
                <!-- totals row -->
                <tfoot>
                  <tr class="ax-table__row" style="background:var(--ax-surface-subtle);">
                    <td class="ax-table__td" colspan="4" style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Totals · <span class="ax-num" x-text="filtered().length"></span> shown</td>
                    <td class="ax-table__td" style="text-align:right;">
                      <span class="ax-badge ax-badge--soft ax-badge--success ax-badge--sm" style="border-radius:var(--ax-radius-xs);">Paid <span class="ax-num" x-text="money(sumByStatus('paid'))"></span></span>
                    </td>
                    <td class="ax-table__td ax-table__td--num ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);font-weight:var(--ax-weight-semibold);" x-text="money(sumAll())"></td>
                    <td class="ax-table__td" colspan="2" style="text-align:right;">
                      <span style="font-size:var(--ax-text-xs);color:var(--ax-text-muted);">Outstanding </span><span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-danger-500);font-weight:var(--ax-weight-semibold);" x-text="money(outstanding())"></span>
                    </td>
                  </tr>
                </tfoot>
              </table>
            </div>

            <!-- empty -->
            <div x-show="!filtered().length" x-cloak style="text-align:center;padding:var(--ax-space-10) var(--ax-space-5);">
              <span class="ax-avatar ax-avatar--xl ax-avatar--squircle" style="background:var(--ax-surface-subtle);color:var(--ax-text-subtle);margin:0 auto var(--ax-space-4);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:28px;height:28px;"><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 21v-16a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"/><path d="M9 9l1 0"/><path d="M9 13l6 0"/><path d="M9 17l6 0"/></svg></span>
              <h3 style="color:var(--ax-text-strong);font-family:var(--ax-font-display);margin-bottom:var(--ax-space-2);">No invoices here</h3>
              <p style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);margin-bottom:var(--ax-space-4);">Try a different status tab or clear your search.</p>
              <button type="button" class="ax-btn ax-btn--secondary" @click="q='';fStatus='';fClient='';">Show all invoices</button>
            </div>

            <!-- pagination -->
            <div class="ax-card__footer ax-flex" style="justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--ax-space-3);" x-show="filtered().length" x-cloak>
              <span class="ax-pagination__summary ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-xs);">Showing <span x-text="filtered().length"></span> of 94 invoices</span>
              <nav class="ax-pagination" aria-label="Pagination">
                <button type="button" class="ax-pagination__prev" disabled aria-disabled="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6l6 6"/></svg></button>
                <ul class="ax-pagination__pages">
                  <li><a href="#" class="ax-pagination__page is-active" aria-current="page">1</a></li>
                  <li><a href="#" class="ax-pagination__page">2</a></li>
                  <li><a href="#" class="ax-pagination__page">3</a></li>
                  <li><span class="ax-pagination__ellipsis">…</span></li>
                  <li><a href="#" class="ax-pagination__page">8</a></li>
                </ul>
                <button type="button" class="ax-pagination__next"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6l-6 6"/></svg></button>
              </nav>
            </div>
          </section>
        </div>
</div>
{% endblock %}

{% block scripts %}
<script>
          function axInvoices(){
            const C={cyan:'var(--ax-viz-cyan)',violet:'var(--ax-viz-violet)',pink:'var(--ax-viz-pink)',amber:'var(--ax-viz-amber)',emerald:'var(--ax-viz-emerald)',red:'var(--ax-viz-red)',accent:'var(--ax-accent)'};
            return {
              q:'', fStatus:'', fClient:'', sort:'newest', selected:[],
              statusTabs:[
                { id:'', label:'All', count:94 },
                { id:'paid', label:'Paid', count:71 },
                { id:'unpaid', label:'Unpaid', count:11 },
                { id:'overdue', label:'Overdue', count:7 },
                { id:'draft', label:'Draft', count:5 },
              ],
              invoices:[
                { id:1, number:'#INV-2026-0142', client:'Rossi Atelier Ltda.', email:'finance@rossiatelier.com', initials:'RA', issued:'Jun 24, 2026', due:'Jul 08, 2026', amount:4820.00, status:'unpaid', overdueDays:0, color:C.cyan },
                { id:2, number:'#INV-2026-0141', client:'Northwind Furniture', email:'ap@northwind.co', initials:'NF', issued:'Jun 22, 2026', due:'Jul 06, 2026', amount:12640.00, status:'paid', overdueDays:0, color:C.violet },
                { id:3, number:'#INV-2026-0140', client:'Clayhouse Ceramics', email:'billing@clayhouse.io', initials:'CC', issued:'Jun 18, 2026', due:'Jun 25, 2026', amount:3180.00, status:'overdue', overdueDays:3, color:C.pink },
                { id:4, number:'#INV-2026-0139', client:'Voltic Supply Co.', email:'accounts@voltic.co', initials:'VS', issued:'Jun 15, 2026', due:'Jun 29, 2026', amount:7420.00, status:'paid', overdueDays:0, color:C.amber },
                { id:5, number:'#INV-2026-0138', client:'Paperleaf Goods', email:'hello@paperleaf.com', initials:'PG', issued:'Jun 12, 2026', due:'Jun 19, 2026', amount:2340.00, status:'overdue', overdueDays:9, color:C.emerald },
                { id:6, number:'#INV-2026-0137', client:'Brassworks Atelier', email:'pay@brassworks.studio', initials:'BA', issued:'Jun 10, 2026', due:'Jun 24, 2026', amount:5610.00, status:'paid', overdueDays:0, color:C.cyan },
                { id:7, number:'#INV-2026-0136', client:'Inkwell Press', email:'finance@inkwell.press', initials:'IP', issued:'Jun 08, 2026', due:'Jul 22, 2026', amount:1890.00, status:'paid', overdueDays:0, color:C.red },
                { id:8, number:'#INV-2026-0135', client:'Slate & Pine', email:'orders@slateandpine.com', initials:'SP', issued:'Jun 05, 2026', due:'—', amount:3270.00, status:'draft', overdueDays:0, color:C.violet },
                { id:9, number:'#INV-2026-0134', client:'Tundra Outdoors', email:'billing@tundra.io', initials:'TO', issued:'Jun 02, 2026', due:'Jun 16, 2026', amount:9840.00, status:'overdue', overdueDays:12, color:C.amber },
                { id:10, number:'#INV-2026-0133', client:'Lumière Studio', email:'compta@lumiere.fr', initials:'LS', issued:'May 28, 2026', due:'Jun 11, 2026', amount:6120.00, status:'paid', overdueDays:0, color:C.accent },
                { id:11, number:'#INV-2026-0132', client:'Driftwood Decor', email:'ar@driftwood.shop', initials:'DD', issued:'May 24, 2026', due:'Jun 07, 2026', amount:2880.00, status:'unpaid', overdueDays:0, color:C.pink },
                { id:12, number:'#INV-2026-0131', client:'Copperline Mugs', email:'accounts@copperline.co', initials:'CM', issued:'May 20, 2026', due:'—', amount:1450.00, status:'draft', overdueDays:0, color:C.emerald },
              ],
              money(n){ return '$' + Number(n).toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2}); },
              clientNames(){ return [...new Set(this.invoices.map(i=>i.client))].sort(); },
              statusPill(st){
                const map={
                  paid:['ax-badge--success','Paid','M9 12l2 2l4 -4M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'],
                  unpaid:['ax-badge--info','Unpaid','M12 7v5l3 3M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'],
                  overdue:['ax-badge--danger','Overdue','M12 9v4M12 16h.01M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0'],
                  draft:['ax-badge--neutral','Draft','M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3z'],
                };
                const m=map[st]||map.draft;
                return '<span class="ax-badge ax-badge--soft '+m[0]+' ax-badge--pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:13px;height:13px;"><path d="'+m[2]+'"/></svg>'+m[1]+'</span>';
              },
              filtered(){
                let r=this.invoices.filter(iv=>{
                  const term=this.q.trim().toLowerCase();
                  if(term && !(iv.number.toLowerCase().includes(term) || iv.client.toLowerCase().includes(term) || iv.email.toLowerCase().includes(term))) return false;
                  if(this.fStatus && iv.status!==this.fStatus) return false;
                  if(this.fClient && iv.client!==this.fClient) return false;
                  return true;
                });
                const by={
                  'amount-asc':(a,b)=>a.amount-b.amount,
                  'amount-desc':(a,b)=>b.amount-a.amount,
                  client:(a,b)=>a.client.localeCompare(b.client),
                  status:(a,b)=>a.status.localeCompare(b.status),
                  due:(a,b)=>b.overdueDays-a.overdueDays,
                  newest:(a,b)=>a.id-b.id,
                };
                if(by[this.sort]) r=[...r].sort(by[this.sort]);
                return r;
              },
              sumAll(){ return this.filtered().reduce((t,i)=>t+i.amount,0); },
              sumByStatus(st){ return this.filtered().filter(i=>i.status===st).reduce((t,i)=>t+i.amount,0); },
              outstanding(){ return this.filtered().filter(i=>i.status==='unpaid'||i.status==='overdue').reduce((t,i)=>t+i.amount,0); },
              allSelected(){ const ids=this.filtered().map(i=>i.id); return ids.length>0 && ids.every(id=>this.selected.includes(id)); },
              toggleAll(on){ this.selected = on ? this.filtered().map(i=>i.id) : []; },
            };
          }
        </script>
{% endblock %}