<x-vendor-layout>
<x-slot name="title">Dashboard</x-slot>
@php $vendor = Auth::user()->vendor; @endphp
{{-- KPI Cards --}}
<div class="vp-kgrid">
<div class="vp-kcard">
<div class="vp-kcard-top">
<div class="vp-kcard-label">Total Orders</div>
<div class="vp-kcard-icon vp-kicon-blue">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
</div>
</div>
<div class="vp-kcard-value">{{ $stats['total_orders'] ?? 0 }}</div>
<div class="vp-kcard-delta">All time</div>
</div>
<div class="vp-kcard">
<div class="vp-kcard-top">
<div class="vp-kcard-label">Pending Orders</div>
<div class="vp-kcard-icon vp-kicon-yellow">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
</div>
</div>
<div class="vp-kcard-value">{{ $stats['pending_orders'] ?? 0 }}</div>
<div class="vp-kcard-delta" style="color:var(--wa)">Awaiting action</div>
</div>
<div class="vp-kcard">
<div class="vp-kcard-top">
<div class="vp-kcard-label">Total Revenue</div>
<div class="vp-kcard-icon vp-kicon-green">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>
</div>
</div>
<div class="vp-kcard-value">Rs. {{ number_format($stats['revenue'] ?? 0, 0) }}</div>
<div class="vp-kcard-delta">Lifetime earnings</div>
</div>
<div class="vp-kcard">
<div class="vp-kcard-top">
<div class="vp-kcard-label">Products</div>
<div class="vp-kcard-icon vp-kicon-purple">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
</div>
</div>
<div class="vp-kcard-value">{{ $stats['products'] ?? 0 }}</div>
<div class="vp-kcard-delta">In catalog</div>
</div>
</div>
{{-- Recent Orders + Quick Actions --}}
<div style="display:grid;grid-template-columns:1fr 320px;gap:18px">
{{-- Recent Orders --}}
<div class="vp-card">
<div class="vp-card-header">
<span class="vp-card-title">Recent Orders</span>
<a href="{{ route('vendor.orders') }}" class="vp-btn vp-btn-secondary vp-btn-sm">View All →</a>
</div>
<div class="vp-table-wrap">
<table class="vp-table">
<thead>
<tr>
<th>Order</th>
<th>Customer</th>
<th>Amount</th>
<th>Status</th>
</tr>
</thead>
<tbody>
@forelse($recentOrders ?? [] as $order)
<tr>
<td>
<span style="font-weight:600">#{{ $order->order_number }}</span><br>
<span style="font-size:11px;color:var(--mu)">{{ $order->created_at->diffForHumans() }}</span>
</td>
<td>{{ $order->user->name ?? 'Guest' }}</td>
<td style="font-weight:600;color:var(--ac)">Rs. {{ number_format($order->total_amount, 0) }}</td>
<td>
@php
$sc = match($order->status) {
'delivered' => 'vp-pill-green',
'shipped' => 'vp-pill-blue',
'cancelled' => 'vp-pill-red',
'processing' => 'vp-pill-purple',
default => 'vp-pill-yellow',
};
@endphp
<span class="vp-pill {{ $sc }}">{{ ucfirst($order->status) }}</span>
</td>
</tr>
@empty
<tr>
<td colspan="4">
<div class="vp-empty">
<div class="vp-empty-title">No orders yet</div>
<div class="vp-empty-sub">Orders placed by customers will appear here.</div>
</div>
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
{{-- Quick Actions --}}
<div class="vp-card">
<div class="vp-card-header">
<span class="vp-card-title">Quick Actions</span>
</div>
<div class="vp-card-body" style="display:flex;flex-direction:column;gap:10px">
<a href="{{ route('vendor.products.create') }}" class="vp-btn vp-btn-primary" style="justify-content:center">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
Add New Product
</a>
<a href="{{ route('vendor.orders') }}" class="vp-btn vp-btn-secondary" style="justify-content:center">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2"/></svg>
Manage Orders
</a>
<a href="{{ route('vendor.products.export') }}" class="vp-btn vp-btn-secondary" style="justify-content:center">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Export Products CSV
</a>
<a href="{{ route('vendor.returns.index') }}" class="vp-btn vp-btn-secondary" style="justify-content:center">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
Pending Returns
</a>
<a href="{{ route('vendor.reviews') }}" class="vp-btn vp-btn-secondary" style="justify-content:center">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>
Product Reviews
</a>
</div>
{{-- Balance snapshot --}}
@if(($vendor->balance ?? 0) > 0)
<div style="margin:0 16px 16px">
<div class="vp-balance-card">
<div class="vp-balance-label">Available Balance</div>
<div class="vp-balance-value">Rs. {{ number_format($vendor->balance, 0) }}</div>
<div class="vp-balance-note"><a href="{{ route('vendor.payouts.index') }}" style="color:rgba(255,255,255,.8);text-decoration:underline">Request payout →</a></div>
</div>
</div>
@endif
</div>
</div>
</x-vendor-layout>