@extends('admin.layout')

@section('title', 'Dashboard')

@section('admin-content')
<div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900">Admin Dashboard</h1>
    <p class="text-gray-500 mt-1">Overview of your platform</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl p-6 text-white shadow-lg">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-blue-100 text-sm">Total Users</p>
                <p class="text-3xl font-bold">{{ $stats['totalUsers'] }}</p>
            </div>
            <div class="w-14 h-14 bg-white/20 rounded-2xl flex items-center justify-center">
                <i class="fas fa-users text-2xl"></i>
            </div>
        </div>
    </div>
    <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-2xl p-6 text-white shadow-lg">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-green-100 text-sm">Active Pairings</p>
                <p class="text-3xl font-bold">{{ $stats['activePairings'] }}</p>
            </div>
            <div class="w-14 h-14 bg-white/20 rounded-2xl flex items-center justify-center">
                <i class="fas fa-handshake text-2xl"></i>
            </div>
        </div>
    </div>
    <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl p-6 text-white shadow-lg">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-purple-100 text-sm">Total Orders</p>
                <p class="text-3xl font-bold">{{ $stats['totalOrders'] }}</p>
            </div>
            <div class="w-14 h-14 bg-white/20 rounded-2xl flex items-center justify-center">
                <i class="fas fa-box text-2xl"></i>
            </div>
        </div>
    </div>
    <div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl p-6 text-white shadow-lg">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-orange-100 text-sm">Pending Payments</p>
                <p class="text-3xl font-bold">{{ $stats['pendingPayments'] }}</p>
            </div>
            <div class="w-14 h-14 bg-white/20 rounded-2xl flex items-center justify-center">
                <i class="fas fa-credit-card text-2xl"></i>
            </div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
    <div class="bg-white rounded-2xl shadow-card p-6">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-xl font-bold text-gray-900">Recent Orders</h2>
            <a href="{{ route('admin.orders.index') }}" class="text-primary-600 text-sm font-semibold hover:text-primary-700">View All</a>
        </div>
        @if($recentOrders->isEmpty())
            <div class="text-center py-8">
                <p class="text-gray-500">No orders yet</p>
            </div>
        @else
            <div class="space-y-4">
                @foreach($recentOrders as $order)
                <div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-primary-100 rounded-xl flex items-center justify-center mr-4">
                            <i class="fas fa-shopping-bag text-primary-600"></i>
                        </div>
                        <div>
                            <p class="font-semibold text-gray-900">{{ $order->order_number }}</p>
                            <p class="text-sm text-gray-500">{{ $order->user->name }}</p>
                        </div>
                    </div>
                    <div class="text-right">
                        <p class="font-bold text-gray-900">₦{{ number_format($order->total, 0) }}</p>
                        <span class="text-xs px-2 py-0.5 rounded-full 
                            @if($order->payment_status === 'paid') bg-green-100 text-green-600
                            @else bg-red-100 text-red-600 @endif">
                            {{ ucfirst($order->payment_status) }}
                        </span>
                    </div>
                </div>
                @endforeach
            </div>
        @endif
    </div>

    <div class="bg-white rounded-2xl shadow-card p-6">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-xl font-bold text-gray-900">Recent Payments</h2>
            <a href="{{ route('admin.payments.index') }}" class="text-primary-600 text-sm font-semibold hover:text-primary-700">View All</a>
        </div>
        @if($recentPayments->isEmpty())
            <div class="text-center py-8">
                <p class="text-gray-500">No payments yet</p>
            </div>
        @else
            <div class="space-y-4">
                @foreach($recentPayments as $payment)
                <div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center mr-4">
                            <i class="fas fa-money-bill-wave text-green-600"></i>
                        </div>
                        <div>
                            <p class="font-semibold text-gray-900">{{ $payment->user->name }}</p>
                            <p class="text-sm text-gray-500">{{ $payment->order->order_number }}</p>
                        </div>
                    </div>
                    <div class="text-right">
                        <p class="font-bold text-green-600">₦{{ number_format($payment->amount, 0) }}</p>
                        <span class="text-xs px-2 py-0.5 rounded-full 
                            @if($payment->status === 'confirmed') bg-green-100 text-green-600
                            @elseif($payment->status === 'rejected') bg-red-100 text-red-600
                            @else bg-yellow-100 text-yellow-600 @endif">
                            {{ ucfirst($payment->status) }}
                        </span>
                    </div>
                </div>
                @endforeach
            </div>
        @endif
    </div>
</div>

<div class="mt-8 bg-white rounded-2xl shadow-card p-6">
    <h2 class="text-xl font-bold text-gray-900 mb-6">Quick Actions</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <form method="POST" action="{{ route('admin.process-deadlines') }}">
            @csrf
            <button type="submit" class="w-full py-4 bg-gradient-to-r from-blue-500 to-blue-600 text-white font-semibold rounded-xl hover:from-blue-600 hover:to-blue-700 shadow-lg hover:shadow-xl transition-all flex items-center justify-center">
                <i class="fas fa-clock mr-2"></i>Process Deadlines
            </button>
        </form>
        <a href="{{ route('admin.products.create') }}" class="block w-full py-4 bg-gradient-to-r from-green-500 to-green-600 text-white font-semibold rounded-xl hover:from-green-600 hover:to-green-700 shadow-lg hover:shadow-xl transition-all text-center">
            <i class="fas fa-plus mr-2"></i>Add New Product
        </a>
        <a href="{{ route('admin.settings') }}" class="block w-full py-4 bg-gradient-to-r from-purple-500 to-purple-600 text-white font-semibold rounded-xl hover:from-purple-600 hover:to-purple-700 shadow-lg hover:shadow-xl transition-all text-center">
            <i class="fas fa-bullhorn mr-2"></i>Broadcast Message
        </a>
    </div>
</div>
@endsection