@extends('admin.layouts.app')
@section('page-title', 'Dashboard')
@section('content')
    <section class="summary-section" aria-labelledby="summary-heading">
        <h2 id="summary-heading" class="sr-only">Daily business summary</h2>
        <div class="metric-grid">
            @foreach($preview['metrics'] as $metric)
                <article class="metric-card"><div class="metric-heading"><span class="metric-symbol tone-{{ $metric['tone'] }}"><x-icon :name="$metric['icon']" :size="18" /></span><span @class(['metric-change', 'positive' => $metric['trend'] === 'up'])>@if($metric['trend'] === 'up')<x-icon name="trend" :size="12" />@endif{{ $metric['change'] }}</span></div><h3>{{ $metric['label'] }}</h3><p class="metric-value">{{ $metric['value'] }}</p><p class="metric-note">{{ $metric['note'] }}</p></article>
            @endforeach
        </div>
    </section>
    <section class="insight-grid" aria-label="Sample sales insights">
        <article class="panel sales-panel">
            <div class="panel-heading"><div><h2>Sales overview</h2><p>A little perspective on the week.</p></div><span class="quiet-badge">02–08 Nov</span></div>
            <div class="sales-total"><strong>৳483,050</strong><span><x-icon name="trend" :size="14" /> 14.2% <small>vs previous week</small></span></div>
            <figure class="sales-chart"><figcaption class="sr-only">Sample sales for the week of 2 to 8 November 2026</figcaption><div class="chart-axis" aria-hidden="true"><span>100k</span><span>75k</span><span>50k</span><span>25k</span><span>0</span></div><div class="chart-bars">
                @foreach($preview['sales'] as $sale)
                    <div class="chart-column"><div class="bar-track"><div @class(['chart-bar', 'is-today' => $loop->last]) style="--bar-height: {{ $sale['height'] }}%" title="{{ $sale['day'] }}: {{ $sale['amount'] }}"><span class="sr-only">{{ $sale['day'] }}: {{ $sale['amount'] }}</span></div></div><span aria-hidden="true">{{ $sale['day'] }}</span></div>
                @endforeach
            </div></figure>
        </article>
        <article class="panel channel-panel"><div class="panel-heading"><div><h2>Sales by channel</h2><p>Every channel, one overview.</p></div><x-icon name="sales" :size="20" /></div><div class="channel-total"><strong>৳86,450</strong><span>Sample daily sales</span></div><div class="channel-stacked" aria-hidden="true">@foreach($preview['channels'] as $channel)<span class="channel-fill tone-{{ $channel['tone'] }}" style="width: {{ $channel['share'] }}%"></span>@endforeach</div><div class="channel-rows">@foreach($preview['channels'] as $channel)<div class="channel-row"><span class="channel-dot tone-{{ $channel['tone'] }}"></span><span>{{ $channel['label'] }}<small>{{ $channel['share'] }}%</small></span><strong>{{ $channel['amount'] }}</strong></div>@endforeach</div><p class="channel-footnote">A preview of your business mix.</p></article>
    </section>
    <section class="panel orders-panel" aria-labelledby="orders-heading">
        <div class="panel-heading"><div><h2 id="orders-heading">Recent orders</h2><p>A snapshot of the latest activity.</p></div><span class="quiet-badge">Sample orders</span></div>
        <div class="table-scroll" tabindex="0" role="region" aria-label="Sample recent orders, scroll horizontally on small screens"><table class="orders-table"><caption class="sr-only">Four sample orders for dashboard design preview</caption><thead><tr><th scope="col">Order</th><th scope="col">Customer</th><th scope="col">Channel</th><th scope="col">Amount</th><th scope="col">Status</th><th scope="col">Time</th></tr></thead><tbody>
            @foreach($preview['orders'] as $order)
                <tr><th scope="row">{{ $order['reference'] }}</th><td><span class="customer-cell"><span class="customer-avatar">{{ $order['initials'] }}</span>{{ $order['name'] }}</span></td><td>{{ $order['channel'] }}</td><td class="order-amount">{{ $order['amount'] }}</td><td><span class="status-badge tone-{{ $order['tone'] }}"><span></span>{{ $order['status'] }}</span></td><td class="order-time">{{ $order['time'] }}</td></tr>
            @endforeach
        </tbody></table></div>
    </section>
    <p class="dashboard-disclosure"><x-icon name="sparkles" :size="14" /> Design preview · Figures and orders are sample data.</p>
@endsection