@extends('layouts.app')

@section('content')
        <!-- ════════════════ 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">Point of Sale</h1>
              <p class="ax-page-head__subtitle">Live retail performance — Downtown flagship store, Thu Jun 27.</p>
            </div>
            <div class="ax-page-head__actions">
              <button type="button" class="ax-btn ax-btn--secondary ax-btn--pill">
                <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="M3 21h18"/><path d="M3 10h18"/><path d="M5 6l7 -3l7 3"/><path d="M4 10v11"/><path d="M20 10v11"/><path d="M8 14v3"/><path d="M12 14v3"/><path d="M16 14v3"/></svg>
                <span class="ax-btn__label">Downtown</span>
                <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="M6 9l6 6l6 -6"/></svg>
              </button>
              <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">Z-Report</span>
              </button>
              <button type="button" 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="M12 5l0 14"/><path d="M5 12l14 0"/></svg>
                <span class="ax-btn__label">New Sale</span>
              </button>
            </div>
          </div>
        </div>

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

          <!-- ───── KEY FIGURES — one band, not a row of four separate tiles ───── -->
          <section class="ax-card ax-card--filled ax-col--12" role="region" aria-label="Key figures">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <h2 class="ax-card__title">Key figures</h2>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div class="ax-statgroup">
                <div class="ax-statgroup__cell">
                  <span class="ax-statgroup__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="M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2"/><path d="M12 3v3m0 12v3"/></svg>
                  </span>
                  <span class="ax-statgroup__text">
                    <span class="ax-statgroup__label">Today's Sales</span>
                    <span class="ax-statgroup__value ax-num">$9,840</span>
                  </span>
                  <span class="ax-statgroup__delta ax-statgroup__delta--up">+7.2%</span>
                </div>
                <div class="ax-statgroup__cell">
                  <span class="ax-statgroup__icon ax-statgroup__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="M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16l-3 -2l-2 2l-2 -2l-2 2l-2 -2l-3 2m4 -14h6m-6 4h6m-2 4h2"/></svg>
                  </span>
                  <span class="ax-statgroup__text">
                    <span class="ax-statgroup__label">Transactions</span>
                    <span class="ax-statgroup__value ax-num">412</span>
                  </span>
                  <span class="ax-statgroup__delta ax-statgroup__delta--up">+4.0%</span>
                </div>
                <div class="ax-statgroup__cell">
                  <span class="ax-statgroup__icon ax-statgroup__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="M10 14a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M5.001 8h13.999a2 2 0 0 1 1.977 2.304l-1.255 7.152a3 3 0 0 1 -2.966 2.544h-9.512a3 3 0 0 1 -2.965 -2.544l-1.255 -7.152a2 2 0 0 1 1.977 -2.304"/><path d="M17 10l-2 -6"/><path d="M7 10l2 -6"/></svg>
                  </span>
                  <span class="ax-statgroup__text">
                    <span class="ax-statgroup__label">Avg Basket</span>
                    <span class="ax-statgroup__value ax-num">$23.88</span>
                  </span>
                  <span class="ax-statgroup__delta ax-statgroup__delta--up">+1.1%</span>
                </div>
                <div class="ax-statgroup__cell">
                  <span class="ax-statgroup__icon ax-statgroup__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 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"/><path d="M12 12l8 -4.5"/><path d="M12 12l0 9"/><path d="M12 12l-8 -4.5"/><path d="M16 5.25l-8 4.5"/></svg>
                  </span>
                  <span class="ax-statgroup__text">
                    <span class="ax-statgroup__label">Items Sold</span>
                    <span class="ax-statgroup__value ax-num">1,206</span>
                  </span>
                  <span class="ax-statgroup__delta ax-statgroup__delta--up">+5.5%</span>
                </div>
              </div>
            </div>
          </section>


          <!-- ───── HERO: Hourly Sales column (8) + Quick Sale W-ACTION (4) ───── -->
          <section class="ax-card ax-card--chart ax-col--8" role="region" aria-label="Hourly sales">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Throughput</span>
                <h2 class="ax-card__title">Hourly Sales</h2>
                <p class="ax-card__subtitle">Today vs. yesterday · peak at 1pm</p>
              </div>
              <div class="ax-card__actions">
                <span class="ax-cluster" style="gap:var(--ax-space-2);"><i style="width:9px;height:9px;border-radius:3px;background:var(--ax-accent);"></i><small style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);">Today</small></span>
                <span class="ax-cluster" style="gap:var(--ax-space-2);"><i style="width:9px;height:9px;border-radius:3px;background:var(--ax-viz-cyan);"></i><small style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);">Yesterday</small></span>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div
                data-ax-chart="apex" data-ax-chart-type="bar" data-ax-chart-height="310" data-ax-chart-legend="none" data-ax-chart-accent="true"
                data-ax-chart-series='[{"name":"Today","data":[210,340,520,610,940,1280,1100,860,720,910,640,420]},{"name":"Yesterday","data":[180,300,480,560,820,1140,1020,790,680,840,600,380]}]'
                aria-label="Column chart of hourly sales today versus yesterday"></div>
            </div>
          </section>

          <!-- Quick Sale W-ACTION (form, simulated submit) -->
          <section class="ax-card ax-col--4" role="region" aria-label="Quick sale"
            x-data="{ amount: '', method: 'card', sent: false, submit() { if (!this.amount) return; this.sent = true; setTimeout(() => { this.sent = false; this.amount = ''; }, 2400); } }">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <h2 class="ax-card__title">Quick Sale</h2>
                <p class="ax-card__subtitle">Ring up a cash or card sale</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <form @submit.prevent="submit()" style="display:flex;flex-direction:column;gap:var(--ax-space-4);">
                <div class="ax-field">
                  <label class="ax-label" for="qs-amount">Amount</label>
                  <input id="qs-amount" type="text" inputmode="decimal" class="ax-input" placeholder="$0.00" x-model="amount" autocomplete="off">
                </div>
                <div class="ax-field">
                  <span class="ax-label">Payment method</span>
                  <div class="ax-btn-group ax-btn-group--segmented" role="radiogroup" aria-label="Payment method" style="width:100%;">
                    <button type="button" class="ax-btn ax-btn--sm" role="radio" :aria-checked="method==='cash'" :class="method==='cash' && 'is-selected'" @click="method='cash'" style="flex:1;">Cash</button>
                    <button type="button" class="ax-btn ax-btn--sm" role="radio" :aria-checked="method==='card'" :class="method==='card' && 'is-selected'" @click="method='card'" style="flex:1;">Card</button>
                    <button type="button" class="ax-btn ax-btn--sm" role="radio" :aria-checked="method==='wallet'" :class="method==='wallet' && 'is-selected'" @click="method='wallet'" style="flex:1;">Wallet</button>
                  </div>
                </div>
                <button type="submit" class="ax-btn ax-btn--primary ax-btn--block" :disabled="!amount">
                  <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 12l5 5l10 -10"/></svg>
                  <span class="ax-btn__label">Charge</span>
                </button>
                <div x-show="sent" x-cloak x-transition class="ax-alert ax-alert--success" role="status" aria-live="polite" style="margin:0;">
                  <svg class="ax-alert__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 12l5 5l10 -10"/></svg>
                  <div class="ax-alert__content"><p class="ax-alert__message" style="color:var(--ax-text);">Sale recorded — receipt printed.</p></div>
                </div>
              </form>
              <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--ax-space-3);text-align:center;margin-top:var(--ax-space-5);padding-top:var(--ax-space-4);border-top:1px solid var(--ax-border);">
                <div><small style="display:block;color:var(--ax-text-subtle);font-size:var(--ax-text-xs);margin-bottom:2px;">Drawer</small><b class="ax-num" style="color:var(--ax-text-strong);font-size:var(--ax-text-md);">$1,284.50</b></div>
                <div><small style="display:block;color:var(--ax-text-subtle);font-size:var(--ax-text-xs);margin-bottom:2px;">Register</small><b class="ax-num" style="color:var(--ax-viz-emerald);font-size:var(--ax-text-md);">Open</b></div>
              </div>
            </div>
          </section>

          <!-- ───── Sales by Category donut (4) + Payment Methods (4) + Sales by Register (4) ───── -->
          <section class="ax-card ax-col--4" role="region" aria-label="Sales by category">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <h2 class="ax-card__title">Sales by Category</h2>
                <p class="ax-card__subtitle">Share of today's revenue</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div id="ax-pos-cat" aria-label="Donut: Beverages, Bakery, Snacks, Produce, Household"></div>
              <ul class="ax-list ax-list--compact" style="margin-top:var(--ax-space-2);">
                <li class="ax-list__row" style="border:0;padding-inline:0;"><span class="ax-list__leading"><i style="width:9px;height:9px;border-radius:3px;background:var(--ax-viz-cyan);display:inline-block;"></i></span><span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Beverages</span></span><span class="ax-list__trailing ax-num" style="color:var(--ax-text-strong);">34%</span></li>
                <li class="ax-list__row" style="border:0;padding-inline:0;"><span class="ax-list__leading"><i style="width:9px;height:9px;border-radius:3px;background:var(--ax-viz-violet);display:inline-block;"></i></span><span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Bakery</span></span><span class="ax-list__trailing ax-num" style="color:var(--ax-text-strong);">26%</span></li>
                <li class="ax-list__row" style="border:0;padding-inline:0;"><span class="ax-list__leading"><i style="width:9px;height:9px;border-radius:3px;background:var(--ax-viz-pink);display:inline-block;"></i></span><span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Snacks</span></span><span class="ax-list__trailing ax-num" style="color:var(--ax-text-strong);">18%</span></li>
                <li class="ax-list__row" style="border:0;padding-inline:0;"><span class="ax-list__leading"><i style="width:9px;height:9px;border-radius:3px;background:var(--ax-viz-amber);display:inline-block;"></i></span><span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Produce</span></span><span class="ax-list__trailing ax-num" style="color:var(--ax-text-strong);">13%</span></li>
                <li class="ax-list__row" style="border:0;padding-inline:0;"><span class="ax-list__leading"><i style="width:9px;height:9px;border-radius:3px;background:var(--ax-viz-emerald);display:inline-block;"></i></span><span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);">Household</span></span><span class="ax-list__trailing ax-num" style="color:var(--ax-text-strong);">9%</span></li>
              </ul>
            </div>
          </section>

          <section class="ax-card ax-col--4" role="region" aria-label="Payment methods">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <h2 class="ax-card__title">Payment Methods</h2>
                <p class="ax-card__subtitle">Today's split</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-4);">
              <div>
                <div class="ax-cluster" style="justify-content:space-between;margin-bottom:6px;"><span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Card</span><b class="ax-num" style="color:var(--ax-text-strong);font-size:var(--ax-text-sm);">$5,920</b></div>
                <div class="ax-progress ax-progress--sm"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:60%;background:var(--ax-accent);"></div></div></div>
              </div>
              <div>
                <div class="ax-cluster" style="justify-content:space-between;margin-bottom:6px;"><span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Cash</span><b class="ax-num" style="color:var(--ax-text-strong);font-size:var(--ax-text-sm);">$2,460</b></div>
                <div class="ax-progress ax-progress--sm"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:25%;background:var(--ax-viz-cyan);"></div></div></div>
              </div>
              <div>
                <div class="ax-cluster" style="justify-content:space-between;margin-bottom:6px;"><span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Mobile wallet</span><b class="ax-num" style="color:var(--ax-text-strong);font-size:var(--ax-text-sm);">$980</b></div>
                <div class="ax-progress ax-progress--sm"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:10%;background:var(--ax-viz-violet);"></div></div></div>
              </div>
              <div>
                <div class="ax-cluster" style="justify-content:space-between;margin-bottom:6px;"><span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Split / gift card</span><b class="ax-num" style="color:var(--ax-text-strong);font-size:var(--ax-text-sm);">$480</b></div>
                <div class="ax-progress ax-progress--sm"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:5%;background:var(--ax-viz-pink);"></div></div></div>
              </div>
            </div>
          </section>

          <section class="ax-card ax-col--4" role="region" aria-label="Register status">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <h2 class="ax-card__title">Register Status</h2>
                <p class="ax-card__subtitle">4 lanes</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <ul class="ax-list ax-list--compact">
                <li class="ax-list__row"><span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-emerald) 18%,transparent);color:var(--ax-viz-emerald);font-weight:600;">1</span></span><span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Lane 1 — Maya O.</span><span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">$3,210 · 138 sales</span></span><span class="ax-list__trailing"><span class="ax-badge ax-badge--soft ax-badge--success ax-badge--pill"><span class="ax-badge__dot"></span>Open</span></span></li>
                <li class="ax-list__row"><span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-cyan) 18%,transparent);color:var(--ax-viz-cyan);font-weight:600;">2</span></span><span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Lane 2 — Diego R.</span><span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">$2,890 · 121 sales</span></span><span class="ax-list__trailing"><span class="ax-badge ax-badge--soft ax-badge--success ax-badge--pill"><span class="ax-badge__dot"></span>Open</span></span></li>
                <li class="ax-list__row"><span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-amber) 18%,transparent);color:var(--ax-viz-amber);font-weight:600;">3</span></span><span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Lane 3 — Self-checkout</span><span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">$2,470 · 116 sales</span></span><span class="ax-list__trailing"><span class="ax-badge ax-badge--soft ax-badge--warning ax-badge--pill"><span class="ax-badge__dot"></span>Cash due</span></span></li>
                <li class="ax-list__row"><span class="ax-list__leading"><span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-text-subtle) 18%,transparent);color:var(--ax-text-muted);font-weight:600;">4</span></span><span class="ax-list__content"><span class="ax-list__title" style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Lane 4 — Unstaffed</span><span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Closed since 14:00</span></span><span class="ax-list__trailing"><span class="ax-badge ax-badge--soft ax-badge--pill" style="color:var(--ax-text-muted);"><span class="ax-badge__dot"></span>Closed</span></span></li>
              </ul>
            </div>
          </section>

          <!-- ───── Recent Sales table (8) + Low Stock (4) ───── -->
          <section class="ax-card ax-col--8" role="region" aria-label="Recent sales">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <h2 class="ax-card__title">Recent Sales</h2>
                <p class="ax-card__subtitle">Latest receipts across all lanes</p>
              </div>
              <a class="ax-btn ax-btn--link" href="#">View all</a>
            </div>
            <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">Receipt</th>
                    <th class="ax-table__th" scope="col">Cashier</th>
                    <th class="ax-table__th ax-table__th--num" scope="col">Items</th>
                    <th class="ax-table__th ax-table__th--num" scope="col">Total</th>
                    <th class="ax-table__th" scope="col">Payment</th>
                    <th class="ax-table__th" scope="col">Time</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="ax-table__row">
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">#R-40218</td>
                    <td class="ax-table__td" style="color:var(--ax-text-muted);">Maya Obi</td>
                    <td class="ax-table__td ax-table__td--num">7</td>
                    <td class="ax-table__td ax-table__td--num" style="color:var(--ax-text-strong);">$48.20</td>
                    <td class="ax-table__td"><span class="ax-badge ax-badge--soft ax-badge--info ax-badge--pill">Card</span></td>
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">15:42</td>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">#R-40217</td>
                    <td class="ax-table__td" style="color:var(--ax-text-muted);">Diego Ruiz</td>
                    <td class="ax-table__td ax-table__td--num">3</td>
                    <td class="ax-table__td ax-table__td--num" style="color:var(--ax-text-strong);">$14.75</td>
                    <td class="ax-table__td"><span class="ax-badge ax-badge--soft ax-badge--pill" style="color:var(--ax-text-muted);">Cash</span></td>
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">15:39</td>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">#R-40216</td>
                    <td class="ax-table__td" style="color:var(--ax-text-muted);">Self-checkout</td>
                    <td class="ax-table__td ax-table__td--num">12</td>
                    <td class="ax-table__td ax-table__td--num" style="color:var(--ax-text-strong);">$96.40</td>
                    <td class="ax-table__td"><span class="ax-badge ax-badge--soft ax-badge--info ax-badge--pill">Card</span></td>
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">15:35</td>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">#R-40215</td>
                    <td class="ax-table__td" style="color:var(--ax-text-muted);">Maya Obi</td>
                    <td class="ax-table__td ax-table__td--num">2</td>
                    <td class="ax-table__td ax-table__td--num" style="color:var(--ax-text-strong);">$8.90</td>
                    <td class="ax-table__td"><span class="ax-badge ax-badge--soft ax-badge--pill" style="color:var(--ax-viz-violet);">Wallet</span></td>
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">15:31</td>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">#R-40214</td>
                    <td class="ax-table__td" style="color:var(--ax-text-muted);">Diego Ruiz</td>
                    <td class="ax-table__td ax-table__td--num">5</td>
                    <td class="ax-table__td ax-table__td--num" style="color:var(--ax-text-strong);">$31.10</td>
                    <td class="ax-table__td"><span class="ax-badge ax-badge--soft ax-badge--info ax-badge--pill">Card</span></td>
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">15:28</td>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">#R-40213</td>
                    <td class="ax-table__td" style="color:var(--ax-text-muted);">Maya Obi</td>
                    <td class="ax-table__td ax-table__td--num">1</td>
                    <td class="ax-table__td ax-table__td--num" style="color:var(--ax-danger-500);">−$6.50</td>
                    <td class="ax-table__td"><span class="ax-badge ax-badge--soft ax-badge--danger ax-badge--pill">Refund</span></td>
                    <td class="ax-table__td ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-muted);">15:24</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>

          <!-- Low Stock Alerts -->
          <section class="ax-card ax-col--4" role="region" aria-label="Low stock alerts">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <h2 class="ax-card__title">Stock Alerts</h2>
                <p class="ax-card__subtitle">Below reorder point</p>
              </div>
              <a class="ax-btn ax-btn--link" href="#">Reorder</a>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-4);">
              <div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;">
                <span class="ax-avatar ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-danger-500) 16%,transparent);color:var(--ax-danger-500);"><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="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>
                <div style="flex:1 1 auto;min-width:0;"><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Cold Brew 1L</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">SKU 4821 · Beverages</div></div>
                <div class="ax-num" style="font-family:var(--ax-font-mono);font-weight:600;color:var(--ax-danger-500);">4 left</div>
              </div>
              <div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;">
                <span class="ax-avatar ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-warning-500) 16%,transparent);color:var(--ax-warning-500);"><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="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>
                <div style="flex:1 1 auto;min-width:0;"><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Sourdough Loaf</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">SKU 1190 · Bakery</div></div>
                <div class="ax-num" style="font-family:var(--ax-font-mono);font-weight:600;color:var(--ax-warning-500);">9 left</div>
              </div>
              <div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;">
                <span class="ax-avatar ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-warning-500) 16%,transparent);color:var(--ax-warning-500);"><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="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>
                <div style="flex:1 1 auto;min-width:0;"><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Oat Milk 1L</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">SKU 3302 · Beverages</div></div>
                <div class="ax-num" style="font-family:var(--ax-font-mono);font-weight:600;color:var(--ax-warning-500);">11 left</div>
              </div>
              <div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;">
                <span class="ax-avatar ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-warning-500) 16%,transparent);color:var(--ax-warning-500);"><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="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>
                <div style="flex:1 1 auto;min-width:0;"><div style="font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Sea Salt Chips</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">SKU 2745 · Snacks</div></div>
                <div class="ax-num" style="font-family:var(--ax-font-mono);font-weight:600;color:var(--ax-warning-500);">14 left</div>
              </div>
            </div>
          </section>

        </div>
@endsection

@push('scripts')
  @vite(['resources/js/pages/dashboards-pos.js'])
@endpush