@extends('layouts.admin')
@section('title', 'Dashboard')
@section('page_title', 'Dashboard')

@section('content')

{{-- ── TODAY STRIP ───────────────────────────────────────────────────────── --}}
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <div class="bg-electric-blue text-white rounded-2xl p-5">
        <p class="text-xs font-semibold uppercase tracking-widest opacity-80 mb-1">Orders Today</p>
        <p class="text-3xl font-bold">{{ $ordersToday }}</p>
        <p class="text-xs opacity-70 mt-1">{{ $ordersThisMonth }} this month</p>
    </div>
    <div class="bg-emerald-600 text-white rounded-2xl p-5">
        <p class="text-xs font-semibold uppercase tracking-widest opacity-80 mb-1">Revenue Today</p>
        <p class="text-2xl font-bold">KES {{ number_format($revenueToday) }}</p>
        <p class="text-xs opacity-70 mt-1">KES {{ number_format($revenueThisWeek) }} this week</p>
    </div>
    <div class="bg-amber-500 text-white rounded-2xl p-5">
        <p class="text-xs font-semibold uppercase tracking-widest opacity-80 mb-1">Pending Action</p>
        <p class="text-3xl font-bold">{{ $pendingOrders + $pendingPayment }}</p>
        <p class="text-xs opacity-70 mt-1">{{ $pendingOrders }} orders · {{ $pendingPayment }} payments</p>
    </div>
    <div class="{{ $outOfStock > 0 ? 'bg-red-600' : 'bg-slate-600' }} text-white rounded-2xl p-5">
        <p class="text-xs font-semibold uppercase tracking-widest opacity-80 mb-1">Stock Alerts</p>
        <p class="text-3xl font-bold">{{ $outOfStock + $lowStock }}</p>
        <p class="text-xs opacity-70 mt-1">{{ $outOfStock }} out · {{ $lowStock }} low (≤5)</p>
    </div>
</div>

{{-- ── ALL-TIME STATS ───────────────────────────────────────────────────── --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
        <div class="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center mb-3">
            <i class="fas fa-shopping-bag text-electric-blue"></i>
        </div>
        <p class="text-2xl font-bold text-navy">{{ number_format($totalOrders) }}</p>
        <p class="text-sm text-gray-500">Total Orders</p>
    </div>
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
        <div class="w-10 h-10 bg-green-50 rounded-xl flex items-center justify-center mb-3">
            <i class="fas fa-coins text-emerald-600"></i>
        </div>
        <p class="text-xl font-bold text-navy">KES {{ number_format($totalRevenue) }}</p>
        <p class="text-sm text-gray-500">Total Revenue</p>
        <p class="text-xs text-emerald-600 mt-1 font-medium">KES {{ number_format($revenueThisMonth) }} this month</p>
    </div>
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
        <div class="w-10 h-10 bg-purple-50 rounded-xl flex items-center justify-center mb-3">
            <i class="fas fa-box text-purple-600"></i>
        </div>
        <p class="text-2xl font-bold text-navy">{{ number_format($totalProducts) }}</p>
        <p class="text-sm text-gray-500">Active Products</p>
    </div>
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
        <div class="w-10 h-10 bg-yellow-50 rounded-xl flex items-center justify-center mb-3">
            <i class="fas fa-users text-yellow-600"></i>
        </div>
        <p class="text-2xl font-bold text-navy">{{ number_format($totalUsers) }}</p>
        <p class="text-sm text-gray-500">Total Customers</p>
        @if($newCustomersWeek > 0)
        <p class="text-xs text-electric-blue mt-1 font-medium">+{{ $newCustomersWeek }} this week</p>
        @endif
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">

    {{-- ── PENDING ORDERS (needs action) ──────────────────────────────── --}}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
            <h3 class="font-semibold text-navy flex items-center gap-2">
                <span class="w-2.5 h-2.5 bg-amber-500 rounded-full animate-pulse"></span>
                Needs Action
                @if($pendingOrders + $pendingPayment > 0)
                <span class="bg-red-500 text-white text-xs font-bold px-2 py-0.5 rounded-full">{{ $pendingOrders + $pendingPayment }}</span>
                @endif
            </h3>
            <a href="{{ route('admin.orders.index') }}" class="text-xs text-electric-blue hover:underline">View all</a>
        </div>
        @if($urgentOrders->isEmpty())
        <div class="p-8 text-center text-gray-400">
            <i class="fas fa-check-circle text-3xl text-emerald-400 mb-2"></i>
            <p class="text-sm font-medium text-emerald-600">All caught up! No pending orders.</p>
        </div>
        @else
        <div class="divide-y divide-gray-50">
            @foreach($urgentOrders as $order)
            <div class="flex items-center gap-3 px-5 py-3 hover:bg-gray-50 transition-colors">
                <div class="shrink-0">
                    @if($order->payment_status === 'pending')
                    <span class="w-8 h-8 bg-red-100 text-red-600 rounded-full flex items-center justify-center text-xs"><i class="fas fa-exclamation"></i></span>
                    @else
                    <span class="w-8 h-8 bg-amber-100 text-amber-600 rounded-full flex items-center justify-center text-xs"><i class="fas fa-clock"></i></span>
                    @endif
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-semibold text-navy truncate">{{ $order->order_number }}</p>
                    <p class="text-xs text-gray-500">{{ $order->shipping_name }} · {{ $order->created_at->diffForHumans() }}</p>
                </div>
                <div class="text-right shrink-0">
                    <p class="text-sm font-bold text-navy">KES {{ number_format($order->total) }}</p>
                    <span class="text-xs px-2 py-0.5 rounded-full font-semibold
                        {{ $order->payment_status === 'pending' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700' }}">
                        {{ $order->payment_status === 'pending' ? 'Unpaid' : ucfirst($order->status) }}
                    </span>
                </div>
                <a href="{{ route('admin.orders.show', $order->id) }}" class="shrink-0 w-7 h-7 bg-gray-100 rounded-lg flex items-center justify-center hover:bg-electric-blue hover:text-white transition-colors text-gray-500">
                    <i class="fas fa-arrow-right text-xs"></i>
                </a>
            </div>
            @endforeach
        </div>
        @endif
    </div>

    {{-- ── LOW STOCK ALERT ─────────────────────────────────────────────── --}}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
            <h3 class="font-semibold text-navy flex items-center gap-2">
                <span class="w-2.5 h-2.5 bg-red-500 rounded-full {{ $outOfStock > 0 ? 'animate-pulse' : '' }}"></span>
                Stock Alerts
                @if($outOfStock + $lowStock > 0)
                <span class="bg-red-500 text-white text-xs font-bold px-2 py-0.5 rounded-full">{{ $outOfStock + $lowStock }}</span>
                @endif
            </h3>
            <a href="{{ route('admin.products.index') }}?stock=low" class="text-xs text-electric-blue hover:underline">View all</a>
        </div>
        @if($lowStockProducts->isEmpty())
        <div class="p-8 text-center text-gray-400">
            <i class="fas fa-boxes text-3xl text-emerald-400 mb-2"></i>
            <p class="text-sm font-medium text-emerald-600">All products well stocked.</p>
        </div>
        @else
        <div class="divide-y divide-gray-50">
            @foreach($lowStockProducts as $product)
            <div class="flex items-center gap-3 px-5 py-3 hover:bg-gray-50 transition-colors">
                <div class="w-9 h-9 rounded-lg overflow-hidden bg-gray-50 border border-gray-100 shrink-0">
                    @if($product->primary_image)
                    <img src="{{ asset($product->primary_image) }}" class="w-full h-full object-contain p-0.5">
                    @else
                    <div class="w-full h-full flex items-center justify-center"><i class="fas fa-image text-gray-300 text-xs"></i></div>
                    @endif
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-navy truncate">{{ $product->name }}</p>
                    <p class="text-xs text-gray-400">{{ $product->category?->name }}</p>
                </div>
                <div class="shrink-0 text-right">
                    <span class="text-lg font-bold {{ $product->stock === 0 ? 'text-red-600' : 'text-amber-500' }}">
                        {{ $product->stock }}
                    </span>
                    <p class="text-xs {{ $product->stock === 0 ? 'text-red-500' : 'text-amber-500' }} font-medium">
                        {{ $product->stock === 0 ? 'Out of stock' : 'units left' }}
                    </p>
                </div>
                <a href="{{ route('admin.products.edit', $product->id) }}" class="shrink-0 w-7 h-7 bg-gray-100 rounded-lg flex items-center justify-center hover:bg-electric-blue hover:text-white transition-colors text-gray-500">
                    <i class="fas fa-edit text-xs"></i>
                </a>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</div>

{{-- ── RECENT ORDERS ────────────────────────────────────────────────────── --}}
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
        <h3 class="font-semibold text-navy">Recent Orders</h3>
        <a href="{{ route('admin.orders.index') }}" class="text-xs text-electric-blue hover:underline">View all orders</a>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 border-b border-gray-100">
                <tr>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Order</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Customer</th>
                    <th class="px-5 py-3 text-right text-xs font-semibold text-gray-500 uppercase">Amount</th>
                    <th class="px-5 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Payment</th>
                    <th class="px-5 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Status</th>
                    <th class="px-5 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Date</th>
                    <th class="px-5 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @forelse($recentOrders as $order)
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-5 py-3 font-mono text-xs text-electric-blue font-semibold">{{ $order->order_number }}</td>
                    <td class="px-5 py-3">
                        <p class="font-medium text-navy text-xs">{{ $order->shipping_name }}</p>
                        <p class="text-gray-400 text-xs">{{ $order->shipping_phone }}</p>
                    </td>
                    <td class="px-5 py-3 text-right font-bold text-navy text-xs">KES {{ number_format($order->total) }}</td>
                    <td class="px-5 py-3 text-center">
                        <span class="px-2 py-1 rounded-full text-xs font-semibold
                            {{ $order->payment_status === 'paid' ? 'bg-green-100 text-green-700' : ($order->payment_status === 'failed' ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700') }}">
                            {{ ucfirst($order->payment_status) }}
                        </span>
                    </td>
                    <td class="px-5 py-3 text-center">
                        <span class="px-2 py-1 rounded-full text-xs font-semibold
                            {{ $order->status === 'delivered' ? 'bg-green-100 text-green-700' : ($order->status === 'processing' ? 'bg-blue-100 text-blue-700' : ($order->status === 'shipped' ? 'bg-indigo-100 text-indigo-700' : 'bg-yellow-100 text-yellow-700')) }}">
                            {{ ucfirst($order->status) }}
                        </span>
                    </td>
                    <td class="px-5 py-3 text-center text-xs text-gray-400">{{ $order->created_at->format('d M, H:i') }}</td>
                    <td class="px-5 py-3">
                        <a href="{{ route('admin.orders.show', $order->id) }}" class="w-7 h-7 bg-gray-100 rounded-lg flex items-center justify-center hover:bg-electric-blue hover:text-white transition-colors text-gray-500 mx-auto">
                            <i class="fas fa-eye text-xs"></i>
                        </a>
                    </td>
                </tr>
                @empty
                <tr><td colspan="7" class="px-5 py-10 text-center text-gray-400 text-sm">No orders yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@endsection