@extends('layouts.admin')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard')
@section('content')
<!-- KPI Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
    <div class="bg-white rounded-xl shadow p-5 border-l-4 border-indigo-500">
        <div class="flex justify-between items-start">
            <div><p class="text-sm text-gray-500">Total Users</p><p class="text-3xl font-bold">{{ $totalUsers }}</p></div>
            <div class="bg-indigo-100 p-3 rounded-lg"><i class="fas fa-users text-indigo-600 text-xl"></i></div>
        </div>
        <p class="text-indigo-600 text-xs mt-2">{{ $activeUsers }} active</p>
    </div>
    <div class="bg-white rounded-xl shadow p-5 border-l-4 border-green-500">
        <div class="flex justify-between items-start">
            <div><p class="text-sm text-gray-500">Survey Completions</p><p class="text-3xl font-bold">{{ $totalCompletions }}</p></div>
            <div class="bg-green-100 p-3 rounded-lg"><i class="fas fa-tasks text-green-600 text-xl"></i></div>
        </div>
        <p class="text-green-600 text-xs mt-2">{{ $todayCompletions }} today</p>
    </div>
    <div class="bg-white rounded-xl shadow p-5 border-l-4 border-yellow-500">
        <div class="flex justify-between items-start">
            <div><p class="text-sm text-gray-500">Total Rewards Paid</p><p class="text-3xl font-bold">${{ number_format($totalRewards, 2) }}</p></div>
            <div class="bg-yellow-100 p-3 rounded-lg"><i class="fas fa-dollar-sign text-yellow-600 text-xl"></i></div>
        </div>
        <p class="text-yellow-600 text-xs mt-2">${{ number_format($totalPaidOut, 2) }} withdrawn</p>
    </div>
    <div class="bg-white rounded-xl shadow p-5 border-l-4 border-red-500">
        <div class="flex justify-between items-start">
            <div><p class="text-sm text-gray-500">Pending Requests</p><p class="text-3xl font-bold">{{ $pendingDeposits + $pendingWithdrawals }}</p></div>
            <div class="bg-red-100 p-3 rounded-lg"><i class="fas fa-clock text-red-600 text-xl"></i></div>
        </div>
        <p class="text-red-600 text-xs mt-2">{{ $pendingDeposits }} deposits, {{ $pendingWithdrawals }} withdrawals</p>
    </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 mb-8">
    <div class="bg-white rounded-xl shadow p-5">
        <p class="text-sm text-gray-500">Active Surveys</p>
        <p class="text-3xl font-bold text-indigo-600">{{ $activeSurveys }}</p>
        <p class="text-xs text-gray-400">of {{ $totalSurveys }} total</p>
    </div>
    <div class="bg-white rounded-xl shadow p-5">
        <p class="text-sm text-gray-500">Active Plans (users)</p>
        <p class="text-3xl font-bold text-green-600">{{ $activePlans }}</p>
        <p class="text-xs text-gray-400">currently subscribed</p>
    </div>
    <div class="bg-white rounded-xl shadow p-5">
        <p class="text-sm text-gray-500">Total Withdrawn</p>
        <p class="text-3xl font-bold text-purple-600">${{ number_format($totalPaidOut, 2) }}</p>
        <p class="text-xs text-gray-400">approved withdrawals</p>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Recent Users -->
    <div class="bg-white rounded-xl shadow">
        <div class="p-5 border-b flex justify-between items-center">
            <h3 class="font-bold text-gray-800">Recent Users</h3>
            <a href="{{ route('admin.users.index') }}" class="text-indigo-600 text-sm hover:underline">View All</a>
        </div>
        <div class="divide-y">
            @foreach($recentUsers as $u)
            <div class="px-5 py-3 flex justify-between items-center">
                <div>
                    <p class="font-medium text-sm text-gray-800">{{ $u->name }}</p>
                    <p class="text-xs text-gray-400">{{ $u->email }}</p>
                </div>
                <div class="text-right">
                    <span class="text-xs {{ $u->is_active ? 'text-green-600' : 'text-red-500' }}">{{ $u->is_active ? 'Active' : 'Suspended' }}</span>
                    <p class="text-xs text-gray-400">{{ $u->created_at->diffForHumans() }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    <!-- Recent Payments -->
    <div class="bg-white rounded-xl shadow">
        <div class="p-5 border-b flex justify-between items-center">
            <h3 class="font-bold text-gray-800">Recent Payment Requests</h3>
            <a href="{{ route('admin.payments.index') }}" class="text-indigo-600 text-sm hover:underline">View All</a>
        </div>
        <div class="divide-y">
            @forelse($recentPayments as $p)
            <div class="px-5 py-3 flex justify-between items-center">
                <div>
                    <p class="font-medium text-sm text-gray-800">{{ $p->user->name ?? 'N/A' }}</p>
                    <p class="text-xs text-gray-400">{{ ucfirst($p->type) }} via {{ $p->paymentMethod->name ?? 'N/A' }}</p>
                </div>
                <div class="text-right">
                    <p class="font-bold text-sm {{ $p->type === 'deposit' ? 'text-green-600' : 'text-blue-600' }}">${{ number_format($p->amount, 2) }}</p>
                    <span class="text-xs px-2 py-0.5 rounded-full {{ $p->status === 'approved' ? 'bg-green-100 text-green-800' : ($p->status === 'rejected' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800') }}">{{ ucfirst($p->status) }}</span>
                </div>
            </div>
            @empty
            <div class="px-5 py-6 text-center text-gray-400 text-sm">No recent payments.</div>
            @endforelse
        </div>
    </div>
</div>
@endsection