@extends('layouts.admin')

@section('content')
<div class="space-y-6">
    <!-- Top Stats Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
        <!-- Today Sales -->
        <div class="bg-white border border-slate-200/80 rounded-2xl p-5 shadow-sm hover:shadow-md transition flex items-center justify-between">
            <div>
                <div class="text-[11px] font-extrabold text-slate-400 uppercase tracking-wider">Today Sales</div>
                <div class="text-2xl font-black text-slate-900 mt-1 font-mono">₹{{ number_format($todaySales, 2) }}</div>
            </div>
            <div class="w-12 h-12 rounded-2xl bg-amber-50 text-amber-600 flex items-center justify-center text-xl shadow-xs">
                <i class="fa-solid fa-indian-rupee-sign"></i>
            </div>
        </div>

        <!-- Today Orders -->
        <div class="bg-white border border-slate-200/80 rounded-2xl p-5 shadow-sm hover:shadow-md transition flex items-center justify-between">
            <div>
                <div class="text-[11px] font-extrabold text-slate-400 uppercase tracking-wider">Today Orders</div>
                <div class="text-2xl font-black text-slate-900 mt-1 font-mono">{{ $todayOrders }}</div>
            </div>
            <div class="w-12 h-12 rounded-2xl bg-blue-50 text-blue-600 flex items-center justify-center text-xl shadow-xs">
                <i class="fa-solid fa-cart-shopping"></i>
            </div>
        </div>

        <!-- Pending Orders -->
        <div class="bg-white border border-slate-200/80 rounded-2xl p-5 shadow-sm hover:shadow-md transition flex items-center justify-between">
            <div>
                <div class="text-[11px] font-extrabold text-slate-400 uppercase tracking-wider">Pending Orders</div>
                <div class="text-2xl font-black text-rose-600 mt-1 font-mono">{{ $pendingOrders }}</div>
            </div>
            <div class="w-12 h-12 rounded-2xl bg-rose-50 text-rose-600 flex items-center justify-center text-xl shadow-xs">
                <i class="fa-solid fa-clock"></i>
            </div>
        </div>

        <!-- Total Customers -->
        <div class="bg-white border border-slate-200/80 rounded-2xl p-5 shadow-sm hover:shadow-md transition flex items-center justify-between">
            <div>
                <div class="text-[11px] font-extrabold text-slate-400 uppercase tracking-wider">Total Customers</div>
                <div class="text-2xl font-black text-slate-900 mt-1 font-mono">{{ $totalCustomers }}</div>
            </div>
            <div class="w-12 h-12 rounded-2xl bg-purple-50 text-purple-600 flex items-center justify-center text-xl shadow-xs">
                <i class="fa-solid fa-users"></i>
            </div>
        </div>

        <!-- Total Revenue -->
        <div class="bg-white border border-slate-200/80 rounded-2xl p-5 shadow-sm hover:shadow-md transition flex items-center justify-between">
            <div>
                <div class="text-[11px] font-extrabold text-slate-400 uppercase tracking-wider">Total Revenue</div>
                <div class="text-2xl font-black text-emerald-600 mt-1 font-mono">₹{{ number_format($totalRevenue, 2) }}</div>
            </div>
            <div class="w-12 h-12 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center text-xl shadow-xs">
                <i class="fa-solid fa-chart-line"></i>
            </div>
        </div>
    </div>

    <!-- Recent Orders & Low Stock Alert Tables -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        <!-- Recent Orders Card -->
        <div class="lg:col-span-8 bg-white border border-slate-200/80 rounded-3xl p-6 shadow-sm space-y-4">
            <div class="flex items-center justify-between">
                <h3 class="font-extrabold text-slate-900 text-base flex items-center gap-2">
                    <i class="fa-solid fa-receipt text-brand-600"></i> Recent Customer Orders
                </h3>
                <a href="{{ route('admin.orders.index') }}" class="text-xs font-bold text-brand-600 hover:text-brand-700">View All Orders &rarr;</a>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-left text-xs">
                    <thead>
                        <tr class="border-b border-slate-100 text-slate-400 font-extrabold uppercase text-[10px]">
                            <th class="pb-3">Order ID</th>
                            <th class="pb-3">Customer</th>
                            <th class="pb-3">Amount</th>
                            <th class="pb-3">Status</th>
                            <th class="pb-3 text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 font-medium text-slate-800">
                        @forelse($recentOrders as $ord)
                        <tr class="hover:bg-slate-50 transition">
                            <td class="py-3.5 font-mono font-bold text-amber-700">#{{ $ord->order_number }}</td>
                            <td class="py-3.5 font-bold text-slate-900">{{ $ord->user ? $ord->user->name : $ord->customer_name }}</td>
                            <td class="py-3.5 font-black text-slate-900 font-mono">₹{{ number_format($ord->total_amount, 2) }}</td>
                            <td class="py-3.5">
                                <span class="px-2.5 py-0.5 rounded-full text-[10px] font-extrabold uppercase {{ $ord->order_status === 'delivered' ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800' }}">
                                    {{ str_replace('_', ' ', $ord->order_status) }}
                                </span>
                            </td>
                            <td class="py-3.5 text-right">
                                <a href="{{ route('admin.orders.show', $ord->id) }}" class="px-3 py-1.5 rounded-xl bg-slate-100 hover:bg-brand-50 hover:text-brand-700 text-slate-700 text-[11px] font-bold transition">View Details</a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="py-8 text-center text-slate-400 font-medium">No orders placed yet</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Low Stock Alerts Card -->
        <div class="lg:col-span-4 bg-white border border-slate-200/80 rounded-3xl p-6 shadow-sm space-y-4">
            <div class="flex items-center justify-between">
                <h3 class="font-extrabold text-slate-900 text-base flex items-center gap-2">
                    <i class="fa-solid fa-triangle-exclamation text-rose-500"></i> Low Stock Alerts
                </h3>
                <a href="{{ route('admin.inventory.index') }}" class="text-xs font-bold text-brand-600 hover:text-brand-700">Manage Inventory</a>
            </div>

            <div class="space-y-3">
                @forelse($lowStockList as $prod)
                <div class="bg-slate-50 border border-slate-100 rounded-2xl p-3.5 flex items-center justify-between">
                    <div>
                        <div class="font-extrabold text-xs text-slate-900 truncate max-w-[150px]">{{ $prod->name }}</div>
                        <div class="text-[10px] text-slate-400 font-mono">SKU: {{ $prod->sku }}</div>
                    </div>
                    <span class="px-2.5 py-1 rounded-xl bg-rose-100 text-rose-800 font-mono font-bold text-xs">
                        {{ $prod->stock_quantity }} left
                    </span>
                </div>
                @empty
                <div class="py-8 text-center text-slate-400 text-xs font-medium">
                    <i class="fa-solid fa-circle-check text-2xl text-emerald-500 block mb-2"></i>
                    All products have sufficient stock!
                </div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection