@extends('layouts.admin')

@section('title', 'Admin Overview & Metrics')

@section('content')

<div class="space-y-8">
    
    <!-- Primary KPI Cards (4 cols) -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
        
        <!-- Total Revenue -->
        <div class="bg-gradient-to-br from-ink-card to-brand-dark/40 border border-white/10 rounded-3xl p-6 shadow-xl relative overflow-hidden">
            <div class="flex items-center justify-between text-xs text-slate-400 mb-2">
                <span class="font-bold uppercase tracking-wider">Total Sales Revenue</span>
                <span class="p-2 rounded-xl bg-emerald-500/10 text-emerald-400 text-lg">💰</span>
            </div>
            <p class="font-display font-black text-2xl sm:text-3xl text-white">₹{{ number_format($stats['revenue'], 2) }}</p>
            <p class="text-[11px] text-emerald-400 mt-2 flex items-center gap-1 font-semibold">
                <span>⚡ Today: ₹{{ number_format($stats['today_revenue'], 2) }}</span>
            </p>
        </div>

        <!-- Total Orders -->
        <div class="bg-ink-card border border-white/10 rounded-3xl p-6 shadow-xl">
            <div class="flex items-center justify-between text-xs text-slate-400 mb-2">
                <span class="font-bold uppercase tracking-wider">Total Orders</span>
                <span class="p-2 rounded-xl bg-brand/10 text-brand-light text-lg">📦</span>
            </div>
            <p class="font-display font-black text-2xl sm:text-3xl text-white">{{ $stats['orders'] }}</p>
            <p class="text-[11px] text-amber-400 mt-2 font-semibold">
                <span>⏳ {{ $stats['pending_orders'] }} Processing / Pending</span>
            </p>
        </div>

        <!-- Footwear Products -->
        <div class="bg-ink-card border border-white/10 rounded-3xl p-6 shadow-xl">
            <div class="flex items-center justify-between text-xs text-slate-400 mb-2">
                <span class="font-bold uppercase tracking-wider">Active Inventory</span>
                <span class="p-2 rounded-xl bg-cyan-500/10 text-cyan-400 text-lg">👟</span>
            </div>
            <p class="font-display font-black text-2xl sm:text-3xl text-white">{{ $stats['products'] }}</p>
            <p class="text-[11px] text-slate-400 mt-2 font-semibold">
                Across {{ $stats['categories'] }} Categories
            </p>
        </div>

        <!-- Customer Count / Low Stock -->
        <div class="bg-ink-card border border-white/10 rounded-3xl p-6 shadow-xl">
            <div class="flex items-center justify-between text-xs text-slate-400 mb-2">
                <span class="font-bold uppercase tracking-wider">Customers / Stock</span>
                <span class="p-2 rounded-xl bg-purple-500/10 text-purple-400 text-lg">👥</span>
            </div>
            <p class="font-display font-black text-2xl sm:text-3xl text-white">{{ $stats['customers'] }}</p>
            <p class="text-[11px] {{ $stats['low_stock'] > 0 ? 'text-rose-400' : 'text-slate-400' }} mt-2 font-semibold">
                {{ $stats['low_stock'] }} Low Stock Alert(s)
            </p>
        </div>

    </div>

    <!-- Quick Actions Bar -->
    <div class="flex flex-wrap items-center gap-3">
        <a href="{{ route('admin.products.create') }}" class="bg-brand hover:bg-brand-hover text-white text-xs font-bold px-4 py-2.5 rounded-xl shadow-glow transition flex items-center gap-2">
            <span>+ Add New Product</span>
        </a>
        <a href="{{ route('admin.categories.create') }}" class="bg-white/5 hover:bg-white/10 text-slate-200 border border-white/10 text-xs font-bold px-4 py-2.5 rounded-xl transition flex items-center gap-2">
            <span>+ Add Category</span>
        </a>
        <a href="{{ route('admin.orders.index') }}" class="bg-white/5 hover:bg-white/10 text-brand-light border border-brand/20 text-xs font-bold px-4 py-2.5 rounded-xl transition flex items-center gap-2">
            <span>📦 Manage All Orders &rarr;</span>
        </a>
    </div>

    <!-- Recent Orders Table -->
    <div class="bg-ink-card rounded-3xl border border-white/10 p-6 shadow-xl space-y-4">
        <div class="flex items-center justify-between border-b border-white/10 pb-4">
            <div>
                <h2 class="font-display font-bold text-base text-white">Recent Customer Orders</h2>
                <p class="text-xs text-slate-400">Latest incoming purchases and shipment statuses.</p>
            </div>
            <a href="{{ route('admin.orders.index') }}" class="text-xs text-brand-light hover:underline font-bold">
                View All Orders &rarr;
            </a>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-xs text-left border-collapse">
                <thead>
                    <tr class="text-slate-400 border-b border-white/10 pb-2">
                        <th class="py-2.5 font-bold">Order #</th>
                        <th class="py-2.5 font-bold">Customer</th>
                        <th class="py-2.5 font-bold">Items</th>
                        <th class="py-2.5 font-bold">Total Paid</th>
                        <th class="py-2.5 font-bold">Payment</th>
                        <th class="py-2.5 font-bold">Status</th>
                        <th class="py-2.5 text-right font-bold">Action</th>
                    </tr>
                </thead>
                <tbody class="text-slate-300">
                    @forelse($recentOrders as $order)
                        <tr class="border-b border-white/5 hover:bg-white/5 transition">
                            <td class="py-3 font-mono font-bold text-white">{{ $order->order_number }}</td>
                            <td class="py-3">
                                <span class="font-semibold text-slate-200 block">{{ $order->shipping_name }}</span>
                                <span class="text-[10px] text-slate-500">{{ $order->shipping_phone }}</span>
                            </td>
                            <td class="py-3">{{ $order->items->sum('quantity') }} items</td>
                            <td class="py-3 font-heading font-bold text-white">₹{{ number_format($order->grand_total, 2) }}</td>
                            <td class="py-3">
                                <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase {{ $order->payment_badge_classes }}">
                                    {{ $order->payment_status }}
                                </span>
                            </td>
                            <td class="py-3">
                                <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase {{ $order->status_badge_classes }}">
                                    {{ $order->status_label }}
                                </span>
                            </td>
                            <td class="py-3 text-right">
                                <a href="{{ route('admin.orders.show', $order) }}" class="bg-brand/20 hover:bg-brand/30 text-brand-light border border-brand/30 px-3 py-1 rounded-lg text-xs font-bold transition">
                                    Manage &rarr;
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="py-6 text-center text-slate-500">No orders placed yet.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>

@endsection