@extends('layouts.app')

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

@section('content')
<div class="max-w-7xl mx-auto space-y-6">
    <h1 class="text-4xl font-semibold">Admin Dashboard</h1>

    <!-- Stats -->
    <div class="grid md:grid-cols-4 gap-4">
        <div class="rounded-3xl bg-white p-6 shadow-sm">
            <p class="text-slate-600 text-sm">Total Products</p>
            <p class="text-3xl font-bold">{{ $stats['total_products'] }}</p>
        </div>
        <div class="rounded-3xl bg-white p-6 shadow-sm">
            <p class="text-slate-600 text-sm">Total Orders</p>
            <p class="text-3xl font-bold">{{ $stats['total_orders'] }}</p>
        </div>
        <div class="rounded-3xl bg-white p-6 shadow-sm">
            <p class="text-slate-600 text-sm">Total Users</p>
            <p class="text-3xl font-bold">{{ $stats['total_users'] }}</p>
        </div>
        <div class="rounded-3xl bg-white p-6 shadow-sm">
            <p class="text-slate-600 text-sm">Total Revenue</p>
            <p class="text-3xl font-bold">₹{{ number_format($stats['total_revenue'], 0) }}</p>
        </div>
    </div>

    <div class="grid md:grid-cols-3 gap-4">
        <div class="rounded-3xl bg-white p-6 shadow-sm">
            <p class="text-slate-600 text-sm">Pending Orders</p>
            <p class="text-3xl font-bold text-yellow-600">{{ $stats['pending_orders'] }}</p>
        </div>
        <div class="rounded-3xl bg-white p-6 shadow-sm">
            <p class="text-slate-600 text-sm">Completed Orders</p>
            <p class="text-3xl font-bold text-green-600">{{ $stats['completed_orders'] }}</p>
        </div>
        <div class="rounded-3xl bg-white p-6 shadow-sm">
            <p class="text-slate-600 text-sm">Categories</p>
            <p class="text-3xl font-bold">{{ $stats['total_categories'] }}</p>
        </div>
    </div>

    <!-- Quick Links -->
    <div class="grid md:grid-cols-4 gap-4">
        <a href="{{ route('admin.products.index') }}" class="rounded-3xl bg-slate-900 text-white p-6 shadow-sm hover:bg-slate-800 text-center">
            <p class="font-semibold">Manage Products</p>
        </a>
        <a href="{{ route('admin.orders.index') }}" class="rounded-3xl bg-slate-900 text-white p-6 shadow-sm hover:bg-slate-800 text-center">
            <p class="font-semibold">View Orders</p>
        </a>
        <a href="{{ route('admin.categories.index') }}" class="rounded-3xl bg-slate-900 text-white p-6 shadow-sm hover:bg-slate-800 text-center">
            <p class="font-semibold">Manage Categories</p>
        </a>
        <a href="{{ route('admin.users.index') }}" class="rounded-3xl bg-slate-900 text-white p-6 shadow-sm hover:bg-slate-800 text-center">
            <p class="font-semibold">Manage Users</p>
        </a>
    </div>

    <!-- Recent Orders -->
    <div class="rounded-3xl bg-white p-8 shadow-sm">
        <h2 class="text-2xl font-semibold mb-4">Recent Orders</h2>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-200 text-sm">
                <thead class="bg-slate-50 text-slate-700">
                    <tr>
                        <th class="px-6 py-4 text-left font-semibold">Order ID</th>
                        <th class="px-6 py-4 text-left font-semibold">Customer</th>
                        <th class="px-6 py-4 text-left font-semibold">Total</th>
                        <th class="px-6 py-4 text-left font-semibold">Status</th>
                        <th class="px-6 py-4 text-left font-semibold">Date</th>
                        <th class="px-6 py-4 text-left font-semibold">Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200">
                    @foreach($recentOrders as $order)
                        <tr>
                            <td class="px-6 py-4 font-semibold">{{ $order->order_number }}</td>
                            <td class="px-6 py-4">{{ $order->user->name ?? 'Guest' }}</td>
                            <td class="px-6 py-4">₹{{ number_format($order->total, 2) }}</td>
                            <td class="px-6 py-4">
                                <span class="rounded-full px-3 py-1 text-xs font-semibold
                                    @if($order->status === 'Pending') bg-yellow-100 text-yellow-700
                                    @elseif($order->status === 'Processing') bg-blue-100 text-blue-700
                                    @elseif($order->status === 'Delivered') bg-green-100 text-green-700
                                    @endif">
                                    {{ $order->status }}
                                </span>
                            </td>
                            <td class="px-6 py-4">{{ $order->created_at->format('M d, Y') }}</td>
                            <td class="px-6 py-4">
                                <a href="{{ route('admin.orders.show', $order) }}" class="text-slate-700 hover:text-slate-900">View</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Top Products -->
    <div class="rounded-3xl bg-white p-8 shadow-sm">
        <h2 class="text-2xl font-semibold mb-4">Top Products</h2>
        <div class="grid md:grid-cols-5 gap-4">
            @foreach($topProducts as $product)
                <div class="text-center">
                    <img src="{{ $product->image }}" alt="{{ $product->name }}" class="w-full h-32 object-cover rounded-xl mb-2">
                    <p class="font-semibold text-sm">{{ Str::limit($product->name, 20) }}</p>
                    <p class="text-slate-600 text-xs">{{ $product->order_items_count }} orders</p>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endsection
