@extends('layouts.admin')
@section('title','Dashboard')
@section('page-title','Admin Dashboard')
@section('content')
{{-- Stats Row --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    @foreach([
        ['Total Users',     $stats['total_users'],      'group',         'blue'],
        ['Active Orders',   $stats['active_orders'],    'receipt_long',  'orange'],
        ['Pending Orders',  $stats['pending_orders'],   'hourglass_empty','red'],
        ['Open Chats',      $stats['open_chats'],       'chat_bubble',   'green'],
    ] as [$label, $val, $icon, $clr])
    <div class="glass-card p-5 rounded-2xl">
        <div class="flex items-start justify-between mb-3">
            <span class="material-symbols-outlined text-{{ $clr }}-400">{{ $icon }}</span>
            <span class="text-[10px] text-slate-500 uppercase tracking-wider font-bold">Today</span>
        </div>
        <p class="text-3xl font-black">{{ number_format($val) }}</p>
        <p class="text-xs text-slate-400 mt-1 font-medium">{{ $label }}</p>
    </div>
    @endforeach
</div>

{{-- Volume Cards --}}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
    <div class="glass-card p-6 rounded-2xl">
        <p class="text-xs text-slate-500 uppercase tracking-wider font-bold mb-1">Today's Volume</p>
        <p class="text-4xl font-black text-primary">₦{{ number_format($stats['volume_today'], 2) }}</p>
        <p class="text-xs text-slate-500 mt-2 flex items-center gap-1"><span class="material-symbols-outlined text-sm text-green-500">trending_up</span> {{ now()->format('M d, Y') }}</p>
    </div>
    <div class="glass-card p-6 rounded-2xl">
        <p class="text-xs text-slate-500 uppercase tracking-wider font-bold mb-1">Total Volume (All Time)</p>
        <p class="text-4xl font-black">₦{{ number_format($stats['total_volume'], 2) }}</p>
        <p class="text-xs text-slate-500 mt-2">Completed orders</p>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    {{-- Pending Orders --}}
    <div class="lg:col-span-2">
        <div class="flex items-center justify-between mb-4">
            <h4 class="font-bold">Pending Orders</h4>
            <a href="{{ route('admin.orders') }}" class="text-xs text-primary font-bold hover:underline">View All →</a>
        </div>
        <div class="glass-card rounded-2xl overflow-hidden">
            <table class="w-full text-left">
                <thead><tr class="border-b border-white/5 bg-white/5">
                    <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Order ID</th>
                    <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">User</th>
                    <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Asset</th>
                    <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Payout</th>
                    <th class="px-4 py-3 text-[10px] uppercase tracking-wider text-slate-500 font-bold">Action</th>
                </tr></thead>
                <tbody class="divide-y divide-white/5">
                    @forelse($pendingOrders->take(5) as $order)
                    <tr class="hover:bg-white/3 transition-colors group">
                        <td class="px-4 py-3 font-mono text-xs text-primary">{{ $order->order_id }}</td>
                        <td class="px-4 py-3"><div><p class="text-sm font-medium">{{ $order->user->name }}</p><p class="text-[10px] text-slate-500">{{ $order->user->email }}</p></div></td>
                        <td class="px-4 py-3"><span class="text-sm font-bold">{{ $order->asset_type }}</span></td>
                        <td class="px-4 py-3"><span class="text-sm font-bold text-primary">₦{{ number_format($order->calculated_payout, 0) }}</span></td>
                        <td class="px-4 py-3">
                            <a href="{{ route('admin.orders', ['search' => $order->order_id]) }}" class="px-3 py-1.5 bg-primary/10 text-primary rounded-lg text-xs font-bold hover:bg-primary hover:text-white transition-all border border-primary/20">Review</a>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="5" class="px-4 py-8 text-center text-slate-500 text-sm">No pending orders 🎉</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Quick Actions --}}
    <div>
        <h4 class="font-bold mb-4">Quick Actions</h4>
        <div class="space-y-3">
            <a href="{{ route('admin.orders') }}?status=pending" class="glass-card p-4 rounded-xl flex items-center gap-3 hover:border-primary/20 transition-all group">
                <div class="w-10 h-10 bg-orange-500/10 rounded-xl flex items-center justify-center"><span class="material-symbols-outlined text-orange-400 text-lg">pending</span></div>
                <div><p class="font-semibold text-sm">Pending Orders</p><p class="text-xs text-slate-500">{{ $stats['pending_orders'] }} awaiting review</p></div>
                <span class="material-symbols-outlined text-slate-600 ml-auto text-sm">arrow_forward</span>
            </a>
            <a href="{{ route('admin.rates') }}" class="glass-card p-4 rounded-xl flex items-center gap-3 hover:border-primary/20 transition-all">
                <div class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center"><span class="material-symbols-outlined text-primary text-lg">trending_up</span></div>
                <div><p class="font-semibold text-sm">Update Rates</p><p class="text-xs text-slate-500">Manage exchange rates</p></div>
                <span class="material-symbols-outlined text-slate-600 ml-auto text-sm">arrow_forward</span>
            </a>
            <a href="{{ route('admin.users') }}" class="glass-card p-4 rounded-xl flex items-center gap-3 hover:border-primary/20 transition-all">
                <div class="w-10 h-10 bg-blue-500/10 rounded-xl flex items-center justify-center"><span class="material-symbols-outlined text-blue-400 text-lg">group</span></div>
                <div><p class="font-semibold text-sm">Manage Users</p><p class="text-xs text-slate-500">{{ $stats['new_users_today'] }} new today</p></div>
                <span class="material-symbols-outlined text-slate-600 ml-auto text-sm">arrow_forward</span>
            </a>
            {{-- Broadcast --}}
            <div class="glass-card p-4 rounded-xl border border-white/5">
                <p class="text-sm font-bold mb-3 flex items-center gap-2"><span class="material-symbols-outlined text-primary text-base">campaign</span> Broadcast</p>
                <form method="POST" action="{{ route('admin.broadcast') }}" class="space-y-2">
                    @csrf
                    <input type="text" name="title" placeholder="Notification title" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-xs text-white focus:border-primary/50 focus:ring-0 focus:outline-none"/>
                    <textarea name="message" rows="2" placeholder="Message..." class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-xs text-white focus:border-primary/50 focus:ring-0 focus:outline-none resize-none"></textarea>
                    <button class="w-full py-2 bg-primary text-white rounded-lg text-xs font-bold hover:bg-primary/90 transition-all">Send to All Users</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection