{% extends 'base.html' %}

{% block main %}
<div x-data="axInvoiceBuilder()">
        <!-- ════════════════ 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">Create Invoice</h1>
              <p class="ax-page-head__subtitle">Build a new invoice — totals update live as you edit. Draft autosaves locally.</p>
            </div>
            <div class="ax-page-head__actions">
              <a class="ax-btn ax-btn--ghost" href="/ecommerce/invoices/">
                <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="M5 12l14 0"/><path d="M5 12l6 6"/><path d="M5 12l6 -6"/></svg>
                <span class="ax-btn__label">Cancel</span>
              </a>
            </div>
          </div>
        </div>

        <!-- sent toast -->
        <div class="ax-alert ax-alert--success" role="status" x-show="sent" x-cloak x-transition style="margin-bottom:var(--ax-space-5);">
          <span class="ax-alert__icon"><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="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/></svg></span>
          <div class="ax-alert__content"><p class="ax-alert__title">Invoice sent</p><p class="ax-alert__message"><span class="ax-num" x-text="meta.number"></span> was emailed to the client and marked Unpaid.</p></div>
        </div>

        <!-- ════════════════ CONTENT GRID ════════════════ -->
        <form @submit.prevent="saveSend()" class="ax-dash-grid">

          <!-- ───────── LEFT FORM (7) ───────── -->
          <div class="ax-col--7" style="display:flex;flex-direction:column;gap:var(--ax-space-6);min-width:0;">

            <!-- CLIENT -->
            <section class="ax-card" role="region" aria-label="Client">
              <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">Client</h2><p class="ax-card__subtitle">Pick an existing customer or enter a new one.</p></div></div>
              <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-4);">
                <div class="ax-field">
                  <label class="ax-label" for="ci-client">Bill to</label>
                  <select id="ci-client" class="ax-select" x-model="clientId" @change="applyClient()">
                    <option value="">Select a customer…</option>
                    <template x-for="c in clients" :key="c.id"><option :value="c.id" x-text="c.name"></option></template>
                    <option value="new">+ New client</option>
                  </select>
                </div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--ax-space-4);" class="ax-ci-2col">
                  <div class="ax-field">
                    <label class="ax-label" for="ci-name">Name / company</label>
                    <input id="ci-name" type="text" class="ax-input" x-model="client.name" placeholder="Clayhouse Ceramics">
                  </div>
                  <div class="ax-field">
                    <label class="ax-label" for="ci-email">Email</label>
                    <input id="ci-email" type="email" class="ax-input" x-model="client.email" placeholder="billing@clayhouse.io">
                  </div>
                </div>
                <div class="ax-field">
                  <label class="ax-label" for="ci-addr">Billing address</label>
                  <textarea id="ci-addr" class="ax-textarea" rows="2" x-model="client.address" placeholder="88 Kiln Road, Unit 4&#10;Portland · OR · 97209 · United States"></textarea>
                </div>
              </div>
            </section>

            <!-- META -->
            <section class="ax-card" role="region" aria-label="Invoice details">
              <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">Details</h2></div></div>
              <div class="ax-card__body" style="padding-top:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--ax-space-4);" class="ax-ci-2col">
                <div class="ax-field">
                  <label class="ax-label" for="ci-number">Invoice #</label>
                  <input id="ci-number" type="text" class="ax-input ax-num" style="font-family:var(--ax-font-mono);" x-model="meta.number">
                </div>
                <div class="ax-field">
                  <label class="ax-label" for="ci-currency">Currency</label>
                  <select id="ci-currency" class="ax-select" x-model="meta.currency">
                    <option value="USD">USD — US Dollar</option>
                    <option value="EUR">EUR — Euro</option>
                    <option value="GBP">GBP — British Pound</option>
                  </select>
                </div>
                <div class="ax-field">
                  <label class="ax-label" for="ci-issued">Issue date</label>
                  <input id="ci-issued" type="date" class="ax-input ax-num" style="font-family:var(--ax-font-mono);" x-model="meta.issued">
                </div>
                <div class="ax-field">
                  <label class="ax-label" for="ci-terms">Payment terms</label>
                  <select id="ci-terms" class="ax-select" x-model="meta.terms" @change="applyTerms()">
                    <option value="receipt">Due on receipt</option>
                    <option value="7">Net 7</option>
                    <option value="14">Net 14</option>
                    <option value="30">Net 30</option>
                  </select>
                </div>
                <div class="ax-field" style="grid-column:1 / -1;">
                  <label class="ax-label" for="ci-due">Due date</label>
                  <input id="ci-due" type="date" class="ax-input ax-num" style="font-family:var(--ax-font-mono);max-width:240px;" x-model="meta.due">
                </div>
              </div>
            </section>

            <!-- LINE ITEMS -->
            <section class="ax-card" role="region" aria-label="Line items">
              <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">Line items</h2><p class="ax-card__subtitle">At least one line is required.</p></div></div>
              <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-3);">
                <!-- column labels -->
                <div class="ax-cluster ax-ci-lh" style="gap:var(--ax-space-3);flex-wrap:nowrap;padding-inline:var(--ax-space-1);">
                  <span class="ax-label" style="flex:1 1 auto;">Description</span>
                  <span class="ax-label" style="flex:none;width:64px;text-align:right;">Qty</span>
                  <span class="ax-label" style="flex:none;width:96px;text-align:right;">Unit price</span>
                  <span class="ax-label" style="flex:none;width:64px;text-align:right;">Tax %</span>
                  <span class="ax-label" style="flex:none;width:96px;text-align:right;">Amount</span>
                  <span style="flex:none;width:32px;"></span>
                </div>
                <template x-for="(li, idx) in lines" :key="li.id">
                  <div class="ax-cluster ax-ci-line" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;">
                    <input type="text" class="ax-input ax-input--sm" style="flex:1 1 auto;min-width:0;" x-model="li.desc" placeholder="Item or service…" :aria-label="'Description for line ' + (idx+1)">
                    <input type="number" min="0" step="1" class="ax-input ax-input--sm ax-num" style="flex:none;width:64px;font-family:var(--ax-font-mono);text-align:right;" x-model.number="li.qty" :aria-label="'Quantity for line ' + (idx+1)">
                    <input type="number" min="0" step="0.01" class="ax-input ax-input--sm ax-num" style="flex:none;width:96px;font-family:var(--ax-font-mono);text-align:right;" x-model.number="li.price" :aria-label="'Unit price for line ' + (idx+1)">
                    <input type="number" min="0" step="1" class="ax-input ax-input--sm ax-num" style="flex:none;width:64px;font-family:var(--ax-font-mono);text-align:right;" x-model.number="li.tax" :aria-label="'Tax rate for line ' + (idx+1)">
                    <span class="ax-num" style="flex:none;width:96px;text-align:right;font-family:var(--ax-font-mono);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);align-self:center;" x-text="money(lineAmount(li))"></span>
                    <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" style="flex:none;align-self:center;" @click="removeLine(idx)" :disabled="lines.length===1" :aria-label="'Remove line ' + (idx+1)"><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 7l16 0"/><path d="M10 11l0 6"/><path d="M14 11l0 6"/><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"/><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"/></svg></button>
                  </div>
                </template>
                <button type="button" class="ax-btn ax-btn--secondary ax-btn--pill ax-btn--sm" style="align-self:flex-start;" @click="addLine()">
                  <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">Add line</span>
                </button>
              </div>
            </section>

            <!-- ADJUSTMENTS -->
            <section class="ax-card" role="region" aria-label="Adjustments">
              <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">Adjustments &amp; notes</h2></div></div>
              <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-4);">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--ax-space-4);" class="ax-ci-2col">
                  <div class="ax-field">
                    <label class="ax-label" for="ci-disc">Discount</label>
                    <div class="ax-input-group">
                      <input id="ci-disc" type="number" min="0" step="0.01" class="ax-input ax-num" style="font-family:var(--ax-font-mono);" x-model.number="adj.discount">
                      <select class="ax-input-group__addon ax-select ax-select--sm" x-model="adj.discountType" aria-label="Discount type" style="border-radius:0;width:64px;">
                        <option value="amt">$</option>
                        <option value="pct">%</option>
                      </select>
                    </div>
                  </div>
                  <div class="ax-field">
                    <label class="ax-label" for="ci-ship">Shipping</label>
                    <input id="ci-ship" type="number" min="0" step="0.01" class="ax-input ax-num" style="font-family:var(--ax-font-mono);" x-model.number="adj.shipping">
                  </div>
                </div>
                <div class="ax-field">
                  <label class="ax-label" for="ci-notes">Notes / terms</label>
                  <textarea id="ci-notes" class="ax-textarea" rows="2" x-model="adj.notes" placeholder="Thanks for your business. Payment due within terms above."></textarea>
                </div>
              </div>
            </section>
          </div>

          <!-- ───────── RIGHT: LIVE PREVIEW (5) ───────── -->
          <aside class="ax-col--5" style="min-width:0;">
            <div style="position:sticky;top:var(--ax-space-6);display:flex;flex-direction:column;gap:var(--ax-space-5);">

              <!-- live invoice paper -->
              <article class="ax-card" role="region" aria-label="Invoice preview">
                <div class="ax-card__header">
                  <div class="ax-card__titles"><span class="ax-card__eyebrow">Live preview</span><h2 class="ax-card__title">Invoice</h2></div>
                  <span class="ax-badge ax-badge--soft ax-badge--neutral ax-badge--pill"><span class="ax-badge__dot"></span>Draft</span>
                </div>
                <div class="ax-card__body" style="padding-top:0;">
                  <div style="border:1px solid var(--ax-border);border-radius:var(--ax-radius-md);padding:var(--ax-space-5);background:var(--ax-surface-subtle);">
                    <!-- head -->
                    <div class="ax-cluster" style="justify-content:space-between;align-items:flex-start;margin-bottom:var(--ax-space-4);">
                      <div class="ax-cluster" style="gap:var(--ax-space-2);">
                        <span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:var(--ax-gradient-accent);color:var(--ax-on-accent);"><svg class="ax-avatar__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="M3 21l18 0"/><path d="M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16"/><path d="M9 8h6M9 12h6M9 16h2"/></svg></span>
                        <b style="font-family:var(--ax-font-display);color:var(--ax-text-strong);">Vireo Inc.</b>
                      </div>
                      <div style="text-align:right;">
                        <div class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-xs);color:var(--ax-accent);font-weight:var(--ax-weight-semibold);" x-text="meta.number"></div>
                        <div class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-2xs);color:var(--ax-text-subtle);" x-text="'Due ' + (meta.due || '—')"></div>
                      </div>
                    </div>
                    <!-- to -->
                    <div style="margin-bottom:var(--ax-space-4);">
                      <div style="font-size:var(--ax-text-2xs);text-transform:uppercase;letter-spacing:.04em;color:var(--ax-text-subtle);margin-bottom:2px;">Billed to</div>
                      <div style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);font-size:var(--ax-text-sm);" x-text="client.name || 'Client name'"></div>
                      <div style="font-size:var(--ax-text-xs);color:var(--ax-text-muted);" x-text="client.email || 'email@client.com'"></div>
                    </div>
                    <!-- lines -->
                    <table style="width:100%;border-collapse:collapse;font-size:var(--ax-text-xs);">
                      <thead>
                        <tr style="border-bottom:1px solid var(--ax-border);">
                          <th style="text-align:left;padding:4px 0;color:var(--ax-text-subtle);font-weight:var(--ax-weight-medium);">Item</th>
                          <th style="text-align:right;padding:4px 0;color:var(--ax-text-subtle);font-weight:var(--ax-weight-medium);">Qty</th>
                          <th style="text-align:right;padding:4px 0;color:var(--ax-text-subtle);font-weight:var(--ax-weight-medium);">Amount</th>
                        </tr>
                      </thead>
                      <tbody>
                        <template x-for="li in lines" :key="li.id">
                          <tr style="border-bottom:1px solid var(--ax-border);">
                            <td style="padding:6px 0;color:var(--ax-text);" x-text="li.desc || 'Untitled item'"></td>
                            <td class="ax-num" style="padding:6px 0;text-align:right;font-family:var(--ax-font-mono);color:var(--ax-text-muted);" x-text="li.qty || 0"></td>
                            <td class="ax-num" style="padding:6px 0;text-align:right;font-family:var(--ax-font-mono);color:var(--ax-text-strong);" x-text="money(lineAmount(li))"></td>
                          </tr>
                        </template>
                      </tbody>
                    </table>
                    <!-- totals -->
                    <div style="display:flex;flex-direction:column;gap:4px;margin-top:var(--ax-space-3);font-size:var(--ax-text-xs);">
                      <div class="ax-cluster" style="justify-content:space-between;"><span style="color:var(--ax-text-muted);">Subtotal</span><span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text);" x-text="money(subtotal())"></span></div>
                      <div class="ax-cluster" style="justify-content:space-between;" x-show="discountAmt()>0"><span style="color:var(--ax-text-muted);">Discount</span><span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-danger-500);" x-text="'−' + money(discountAmt())"></span></div>
                      <div class="ax-cluster" style="justify-content:space-between;"><span style="color:var(--ax-text-muted);">Tax</span><span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text);" x-text="money(taxTotal())"></span></div>
                      <div class="ax-cluster" style="justify-content:space-between;" x-show="adj.shipping>0"><span style="color:var(--ax-text-muted);">Shipping</span><span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text);" x-text="money(adj.shipping)"></span></div>
                      <hr class="ax-divider" style="margin:4px 0;">
                      <div class="ax-cluster" style="justify-content:space-between;align-items:baseline;"><b style="color:var(--ax-text-strong);">Total</b><span class="ax-num" style="font-family:var(--ax-font-display);font-size:var(--ax-text-lg);font-weight:700;color:var(--ax-text-strong);" x-text="money(total())"></span></div>
                    </div>
                  </div>
                </div>
              </article>

              <!-- live order summary card -->
              <section class="ax-card" role="region" aria-label="Totals">
                <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-2);font-size:var(--ax-text-sm);">
                  <div class="ax-cluster" style="justify-content:space-between;"><span style="color:var(--ax-text-muted);">Subtotal <span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-subtle);font-size:var(--ax-text-xs);">(<span x-text="lines.length"></span> lines)</span></span><span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text);" x-text="money(subtotal())"></span></div>
                  <div class="ax-cluster" style="justify-content:space-between;" x-show="discountAmt()>0" x-cloak><span style="color:var(--ax-text-muted);">Discount</span><span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-danger-500);" x-text="'−' + money(discountAmt())"></span></div>
                  <div class="ax-cluster" style="justify-content:space-between;"><span style="color:var(--ax-text-muted);">Tax</span><span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text);" x-text="money(taxTotal())"></span></div>
                  <div class="ax-cluster" style="justify-content:space-between;"><span style="color:var(--ax-text-muted);">Shipping</span><span class="ax-num" style="font-family:var(--ax-font-mono);" :style="adj.shipping>0 ? 'color:var(--ax-text);' : 'color:var(--ax-viz-emerald);'" x-text="adj.shipping>0 ? money(adj.shipping) : 'Free'"></span></div>
                  <hr class="ax-divider" style="margin:var(--ax-space-2) 0;">
                  <div class="ax-cluster" style="justify-content:space-between;align-items:baseline;">
                    <span style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Total due</span>
                    <span class="ax-num" style="font-family:var(--ax-font-display);font-size:var(--ax-text-2xl);font-weight:700;color:var(--ax-text-strong);" x-text="money(total())"></span>
                  </div>
                </div>
              </section>
            </div>
          </aside>

          <!-- ───────── STICKY ACTION BAR (12) ───────── -->
          <div class="ax-col--12" style="position:sticky;bottom:0;z-index:5;">
            <div style="display:flex;align-items:center;gap:var(--ax-space-3);flex-wrap:wrap;padding:var(--ax-space-3) var(--ax-space-5);background:var(--ax-surface);backdrop-filter:blur(18px) saturate(1.1);border:1px solid var(--ax-border);border-radius:var(--ax-radius-lg);box-shadow:var(--ax-shadow-md);">
              <div class="ax-cluster" style="gap:var(--ax-space-2);">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color:var(--ax-viz-emerald);"><path d="M9 12l2 2l4 -4"/><path d="M12 3a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" transform="translate(-3 0)"/></svg>
                <span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Draft saved locally</span>
              </div>
              <span style="flex:1 1 auto;"></span>
              <span class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);font-size:var(--ax-text-sm);margin-inline-end:var(--ax-space-2);">Total <b style="color:var(--ax-text-strong);" x-text="money(total())"></b></span>
              <button type="button" class="ax-btn ax-btn--ghost" @click="saveDraft()" x-text="draftSaved ? 'Saved ✓' : 'Save draft'"></button>
              <a class="ax-btn ax-btn--secondary" href="/ecommerce/invoice-details/">Preview</a>
              <button type="submit" class="ax-btn ax-btn--primary">
                <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="M10 14l11 -11"/><path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"/></svg>
                <span class="ax-btn__label">Save &amp; send</span>
              </button>
            </div>
          </div>
        </form>

        <style>
          @media (max-width: 640px) {
            .ax-ci-2col { grid-template-columns: 1fr !important; }
            .ax-ci-lh { display: none !important; }
            .ax-ci-line { flex-wrap: wrap !important; }
            .ax-ci-line > input[type="text"] { flex: 1 1 100% !important; }
          }
        </style>
</div>
{% endblock %}

{% block scripts %}
<script>
          function axInvoiceBuilder(){
            const C={cyan:'var(--ax-viz-cyan)',violet:'var(--ax-viz-violet)',pink:'var(--ax-viz-pink)',amber:'var(--ax-viz-amber)'};
            let seed=4;
            return {
              clientId:'', sent:false, draftSaved:false,
              client:{ name:'', email:'', address:'' },
              clients:[
                { id:'1', name:'Clayhouse Ceramics', email:'billing@clayhouse.io', address:'88 Kiln Road, Unit 4\nPortland · OR · 97209 · United States' },
                { id:'2', name:'Northwind Furniture', email:'ap@northwind.co', address:'12 Harbor Way\nSeattle · WA · 98104 · United States' },
                { id:'3', name:'Rossi Atelier Ltda.', email:'finance@rossiatelier.com', address:'Av. Paulista 2100, Sala 14\nSão Paulo · SP · 01310-930 · Brazil' },
                { id:'4', name:'Voltic Supply Co.', email:'accounts@voltic.co', address:'400 Circuit Ave\nAustin · TX · 78701 · United States' },
              ],
              meta:{ number:'#INV-2026-0143', currency:'USD', issued:'2026-06-28', due:'2026-07-12', terms:'14' },
              lines:[
                { id:1, desc:'Glazed stoneware mug — wholesale pack of 12', qty:40, price:42.00, tax:8 },
                { id:2, desc:'Matte carafe — 1.2L, slate finish', qty:18, price:52.00, tax:8 },
                { id:3, desc:'Marketplace listing fee — Q3 2026', qty:1, price:120.00, tax:0 },
              ],
              adj:{ discount:5, discountType:'pct', shipping:0, notes:'' },
              money(n){ const s=this.meta.currency==='EUR'?'€':this.meta.currency==='GBP'?'£':'$'; return s + Number(n||0).toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2}); },
              applyClient(){
                if(this.clientId==='new'){ this.client={ name:'', email:'', address:'' }; return; }
                const c=this.clients.find(x=>x.id===this.clientId);
                if(c){ this.client={ name:c.name, email:c.email, address:c.address }; }
              },
              applyTerms(){
                const d=new Date(this.meta.issued+'T00:00:00');
                const add=this.meta.terms==='receipt'?0:parseInt(this.meta.terms,10);
                d.setDate(d.getDate()+add);
                this.meta.due=d.toISOString().slice(0,10);
              },
              lineAmount(li){ return (li.qty||0)*(li.price||0); },
              addLine(){ this.lines.push({ id:++seed, desc:'', qty:1, price:0, tax:0 }); },
              removeLine(i){ if(this.lines.length>1) this.lines.splice(i,1); },
              subtotal(){ return this.lines.reduce((t,li)=>t+this.lineAmount(li),0); },
              discountAmt(){ return this.adj.discountType==='pct' ? this.subtotal()*((this.adj.discount||0)/100) : (this.adj.discount||0); },
              taxTotal(){ const base=this.subtotal(); const dr=base>0?this.discountAmt()/base:0; return this.lines.reduce((t,li)=>t+this.lineAmount(li)*(1-dr)*((li.tax||0)/100),0); },
              total(){ return Math.max(0, this.subtotal()-this.discountAmt()+this.taxTotal()+(this.adj.shipping||0)); },
              saveDraft(){ this.draftSaved=true; try{ localStorage.setItem('ax:ecom:invoiceDraft', JSON.stringify({client:this.client,meta:this.meta,lines:this.lines,adj:this.adj})); }catch(e){} setTimeout(()=>this.draftSaved=false,2000); },
              saveSend(){ this.sent=true; window.scrollTo({top:0,behavior:'smooth'}); setTimeout(()=>this.sent=false,3000); },
            };
          }
        </script>
{% endblock %}