@extends('layouts.admin')

@section('content')
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-7">
    <div>
        <h1 class="text-3xl md:text-4xl font-headline font-extrabold text-primary">Dashboard</h1>
        <p class="text-slate-500 mt-1">Performance overview of your store operations.</p>
    </div>
    <div class="flex gap-2">
        <a class="px-4 py-2 rounded-md bg-white border border-outline-variant text-primary font-semibold" href="{{ route('admin.categories.index') }}">Manage Categories</a>
        <a class="px-4 py-2 rounded-md bg-primary text-white font-semibold" href="{{ route('admin.products.index') }}">Manage Products</a>
    </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 mb-7">
    <div class="rounded-xl bg-white border border-outline-variant p-5">
        <p class="text-sm text-slate-500">Total Products</p>
        <p class="text-3xl font-headline font-extrabold text-primary mt-2">{{ $productsCount }}</p>
    </div>
    <div class="rounded-xl bg-white border border-outline-variant p-5">
        <p class="text-sm text-slate-500">Total Orders</p>
        <p class="text-3xl font-headline font-extrabold text-primary mt-2">{{ $ordersCount }}</p>
    </div>
    <div class="rounded-xl bg-white border border-outline-variant p-5">
        <p class="text-sm text-slate-500">Pending Orders</p>
        <p class="text-3xl font-headline font-extrabold text-primary mt-2">{{ $pendingOrdersCount }}</p>
    </div>
    <div class="rounded-xl bg-white border border-outline-variant p-5">
        <p class="text-sm text-slate-500">Revenue</p>
        <p class="text-3xl font-headline font-extrabold text-primary mt-2">₹{{ number_format($revenue * 85, 0) }}</p>
    </div>
</div>

<div class="rounded-xl bg-white border border-outline-variant overflow-hidden">
    <div class="px-5 py-4 border-b border-outline-variant flex items-center justify-between">
        <h2 class="font-headline font-bold text-xl text-primary">Recent Orders</h2>
        <span class="text-sm text-slate-500">Last {{ $latestOrders->count() }} orders</span>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-surface-container-low text-slate-500">
                <tr>
                    <th class="text-left font-semibold px-5 py-3">Order #</th>
                    <th class="text-left font-semibold px-5 py-3">Customer</th>
                    <th class="text-left font-semibold px-5 py-3">Status</th>
                    <th class="text-left font-semibold px-5 py-3">Total</th>
                </tr>
            </thead>
            <tbody>
                @foreach($latestOrders as $order)
                    <tr class="border-t border-outline-variant">
                        <td class="px-5 py-3 font-semibold">{{ $order->order_number }}</td>
                        <td class="px-5 py-3">{{ $order->customer_name }}</td>
                        <td class="px-5 py-3">
                            <span class="px-2 py-1 rounded-full text-xs font-bold {{ $order->status === 'pending' ? 'bg-amber-100 text-amber-700' : 'bg-emerald-100 text-emerald-700' }}">
                                {{ ucfirst($order->status) }}
                            </span>
                        </td>
                        <td class="px-5 py-3 font-bold text-primary">₹{{ number_format($order->total * 85, 0) }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection