<x-layouts.dashboard title="GTS Admin Dashboard">
    <section class="gts-admin-hero card">
        <div>
            <p class="eyebrow">Ghaffar Trusted Seller</p>
            <h2>Social service sales desk</h2>
            <p>Use one seller lane for platform packages, client trust checks, payment follow-up, delivery proof, and repeat orders.</p>
        </div>
        <div class="gts-trust-points">
            <span>Safe service brief</span>
            <span>Fast price quote</span>
            <span>Proof-led delivery</span>
        </div>
    </section>

    <div class="stats gts-metrics">
        @foreach($metrics as $label => $value)
            <article class="stat">
                <small>{{ $label }}</small>
                <strong>{{ number_format($value) }}</strong>
                <span>{{ $loop->first ? 'Incoming social buyers' : ($loop->last ? 'Open fulfilment work' : 'Sales point tracked') }}</span>
            </article>
        @endforeach
    </div>

    <div class="dashboard-charts gts-admin-grid">
        <section class="card saas-chart">
            <header><div><h3>Sales Flow</h3><p>Seller conversion points</p></div><span class="badge">GTS</span></header>
            <ol class="gts-sales-flow">
                <li><b>1</b><strong>Select platform</strong><small>TikTok, Instagram, Facebook, WhatsApp, or account lane.</small></li>
                <li><b>2</b><strong>Choose quantity</strong><small>Match views, likes, followers, comments, votes, or account tier.</small></li>
                <li><b>3</b><strong>Confirm price</strong><small>Share quote and payment method with the buyer.</small></li>
                <li><b>4</b><strong>Deliver proof</strong><small>Track completion, support note, and next service suggestion.</small></li>
            </ol>
        </section>
        <section class="card saas-chart">
            <header><div><h3>Service Mix</h3><p>Reference sales concentration</p></div><button class="ghost small">This Month</button></header>
            @forelse($mix as [$name, $share, $detail])
                <div class="bar-row"><span>{{ $name }}<small>{{ $detail }}</small></span><div class="progress"><i style="width:{{ $share }}%"></i></div><b>{{ $share }}%</b></div>
            @empty
                <div class="empty-state">Service mix appears after GTS orders are created.</div>
            @endforelse
        </section>
        <section class="card saas-chart">
            <header><div><h3>Seller Pulse</h3><p>Quote to repeat sale rhythm</p></div></header>
            <div class="gts-sales-chart" aria-label="GTS sales chart">
                @foreach([32, 46, 38, 62, 74, 68, 86] as $point)<i style="--point:{{ $point }}%"></i>@endforeach
            </div>
            <div class="gts-chart-labels"><span>Lead</span><span>Quote</span><span>Pay</span><span>Deliver</span><span>Review</span><span>Upsell</span><span>Repeat</span></div>
        </section>
    </div>

    <div class="grid two gts-tracking-grid">
        <section class="table-card">
            <header class="table-head"><div><h3>Deposit Tracking</h3><p>Wallet top-up proof review points for the seller lane.</p></div><a class="ghost small" href="{{ route('gts-admin.gts-wallet-transactions.index') }}">Wallet Transactions</a></header>
            <table>
                <thead><tr><th>Deposit</th><th>Client</th><th>Method</th><th>Status</th></tr></thead>
                <tbody>
                @forelse($tracking as $transaction)
                    <tr><td>GTS-{{ str_pad((string) $transaction->id, 4, '0', STR_PAD_LEFT) }}</td><td>{{ $transaction->wallet?->user?->name ?: 'GTS Client' }}</td><td>{{ $transaction->paymentMethod?->name ?: $transaction->reference }}</td><td><span class="badge status-{{ str($transaction->status)->slug() }}">{{ str($transaction->status)->headline() }}</span></td></tr>
                @empty
                    <tr><td colspan="4">No GTS deposit requests yet.</td></tr>
                @endforelse
                </tbody>
            </table>
        </section>
        <section class="table-card">
            <header class="table-head"><div><h3>Delivery Tracking</h3><p>GTS order fulfilment and proof checkpoints.</p></div><a class="ghost small" href="{{ route('gts-admin.gts-orders.index') }}">GTS Orders</a></header>
            <table>
                <thead><tr><th>Order</th><th>Buyer</th><th>Service</th><th>Status</th></tr></thead>
                <tbody>
                @forelse($deliveryTasks as $order)
                    <tr><td>{{ $order->order_number }}</td><td>{{ $order->user?->name ?: 'GTS Client' }}</td><td>{{ $order->service?->name ?: 'Service' }}</td><td><span class="badge status-{{ str($order->status)->slug() }}">{{ str($order->status)->headline() }}</span></td></tr>
                @empty
                    <tr><td colspan="4">No GTS orders yet.</td></tr>
                @endforelse
                </tbody>
            </table>
        </section>
    </div>

    <section class="table-card gts-service-board">
        <header class="table-head"><div><h3>Seller Service Board</h3><p>Packages inspired by the GTS social service catalog.</p></div><a class="ghost small" href="{{ route('gts') }}">Public GTS Page</a></header>
        <div class="gts-pack-grid">
            @foreach([
                ['TikTok Likes', '500 to 20K', 'Rs. 90 start', 'Fast engagement'],
                ['TikTok Followers', '100 to 5K', 'Rs. 85 start', 'Active account growth'],
                ['TikTok Views', '1K to 500K', 'Rs. 35 start', 'Reach and retention'],
                ['TikTok Comments', '100 to 1.5K', 'Rs. 192 start', 'Audience conversation'],
                ['Instagram Services', 'Followers / likes / views', 'Mix pricing', 'One seller menu'],
                ['Facebook Services', 'Followers / reactions', 'Rs. 240 start', 'Page trust'],
                ['WhatsApp Poll Votes', '100 votes', 'Rs. 250', 'Poll support'],
                ['UK Account', 'Premium tier', 'Rs. 999', 'Account lane'],
            ] as [$name, $range, $price, $note])
                <article><span>{{ $name }}</span><strong>{{ $range }}</strong><b>{{ $price }}</b><small>{{ $note }}</small></article>
            @endforeach
        </div>
    </section>

    <section class="card gts-admin-panel">
        <div>
            <p class="eyebrow">SMM Panel Desk</p>
            <h2>Service intake checklist</h2>
            <p>Capture the platform, link, quantity, price, payment proof, processing status, refill/support note, and delivery evidence before marking a seller order complete.</p>
        </div>
        <ol>
            <li>New Order</li><li>Validate Target</li><li>Payment Review</li><li>Processing</li><li>Completed</li>
        </ol>
    </section>
</x-layouts.dashboard>
