@extends('layouts.admin')

@section('title', 'Admin Dashboard')
@section('heading', 'Dashboard')

@push('styles')
    <style>
        .metric-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 18px;
            margin-bottom: 24px;
        }
        .metric-card {
            padding: 22px;
        }
        .metric-value {
            font-size: 2rem;
            color: var(--admin-gold-deep);
            margin-top: 10px;
        }
        @media (max-width: 960px) {
            .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 640px) {
            .metric-grid { grid-template-columns: 1fr; }
        }
    </style>
@endpush

@section('toolbar')
    <a class="button" href="{{ route('admin.products.create') }}">Add Product</a>
@endsection

@section('content')
    <section class="metric-grid">
        <article class="card metric-card"><div class="meta-text">Products</div><div class="metric-value">{{ $productCount }}</div></article>
        <article class="card metric-card"><div class="meta-text">Orders</div><div class="metric-value">{{ $orderCount }}</div></article>
        <article class="card metric-card"><div class="meta-text">Pending Orders</div><div class="metric-value">{{ $pendingCount }}</div></article>
        <article class="card metric-card"><div class="meta-text">Sales Total</div><div class="metric-value">${{ number_format($salesTotal, 2) }}</div></article>
    </section>

    <section class="card">
        <div style="padding: 22px 22px 0;">
            <h2 style="margin: 0;">Recent Orders</h2>
        </div>
        <table>
            <thead>
                <tr>
                    <th>Order</th>
                    <th>Customer</th>
                    <th>Status</th>
                    <th>Total</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @forelse ($recentOrders as $order)
                    <tr>
                        <td>{{ $order->order_number }}</td>
                        <td>{{ $order->customer_name }}</td>
                        <td><span class="pill">{{ ucfirst($order->status) }}</span></td>
                        <td>${{ number_format((float) $order->total_amount, 2) }}</td>
                        <td><a class="ghost-button button" href="{{ route('admin.orders.show', $order) }}">Open</a></td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="meta-text">No orders yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </section>
@endsection