@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
<div class="mb-8">
    <h1 class="text-2xl font-bold text-gray-900 mb-2">Dashboard Overview</h1>
    <p class="text-gray-600">Monitor your donation platform performance</p>
</div>

<!-- Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <div class="stat-card">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-600 mb-1">Total Donations</p>
                <p class="text-2xl font-bold text-gray-900">${{ number_format($stats['total_donations'], 2) }}</p>
                <p class="text-xs text-green-600 mt-1">
                    <i data-feather="trending-up" class="w-3 h-3 inline mr-1"></i>
                    All time
                </p>
            </div>
            <div class="p-3 bg-green-100 rounded-full">
                <i data-feather="dollar-sign" class="w-6 h-6 text-green-600"></i>
            </div>
        </div>
    </div>

    <div class="stat-card">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-600 mb-1">Total Donors</p>
                <p class="text-2xl font-bold text-gray-900">{{ number_format($stats['total_count']) }}</p>
                <p class="text-xs text-blue-600 mt-1">
                    <i data-feather="users" class="w-3 h-3 inline mr-1"></i>
                    Completed donations
                </p>
            </div>
            <div class="p-3 bg-blue-100 rounded-full">
                <i data-feather="heart" class="w-6 h-6 text-blue-600"></i>
            </div>
        </div>
    </div>

    <div class="stat-card">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-600 mb-1">Average Gift</p>
                <p class="text-2xl font-bold text-gray-900">${{ number_format($stats['average_donation'], 2) }}</p>
                <p class="text-xs text-purple-600 mt-1">
                    <i data-feather="bar-chart" class="w-3 h-3 inline mr-1"></i>
                    Per donation
                </p>
            </div>
            <div class="p-3 bg-purple-100 rounded-full">
                <i data-feather="trending-up" class="w-6 h-6 text-purple-600"></i>
            </div>
        </div>
    </div>

    <div class="stat-card">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-600 mb-1">This Month</p>
                <p class="text-2xl font-bold text-gray-900">${{ number_format($stats['monthly_total'], 2) }}</p>
                <p class="text-xs text-orange-600 mt-1">
                    <i data-feather="calendar" class="w-3 h-3 inline mr-1"></i>
                    {{ now()->format('F Y') }}
                </p>
            </div>
            <div class="p-3 bg-orange-100 rounded-full">
                <i data-feather="calendar" class="w-6 h-6 text-orange-600"></i>
            </div>
        </div>
    </div>
</div>

<!-- Status Overview -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900">Status Overview</h3>
            <i data-feather="pie-chart" class="w-5 h-5 text-gray-400"></i>
        </div>
        <div class="space-y-3">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                    <span class="text-sm text-gray-600">Completed</span>
                </div>
                <span class="text-sm font-medium text-gray-900">{{ $stats['total_count'] }}</span>
            </div>
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
                    <span class="text-sm text-gray-600">Pending</span>
                </div>
                <span class="text-sm font-medium text-gray-900">{{ $stats['pending_count'] }}</span>
            </div>
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <div class="w-3 h-3 bg-red-500 rounded-full"></div>
                    <span class="text-sm text-gray-600">Failed</span>
                </div>
                <span class="text-sm font-medium text-gray-900">{{ $stats['failed_count'] }}</span>
            </div>
        </div>
    </div>

    <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900">Quick Actions</h3>
            <i data-feather="zap" class="w-5 h-5 text-gray-400"></i>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <a href="{{ route('admin.donations') }}" class="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg hover:border-primary-300 hover:bg-primary-50 transition-colors">
                <div class="p-2 bg-primary-100 rounded-lg">
                    <i data-feather="list" class="w-4 h-4 text-primary-600"></i>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-900">View All Donations</p>
                    <p class="text-xs text-gray-500">Manage donation records</p>
                </div>
            </a>
            
            <a href="{{ route('admin.users') }}" class="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg hover:border-primary-300 hover:bg-primary-50 transition-colors">
                <div class="p-2 bg-primary-100 rounded-lg">
                    <i data-feather="user-plus" class="w-4 h-4 text-primary-600"></i>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-900">Manage Users</p>
                    <p class="text-xs text-gray-500">Add or edit users</p>
                </div>
            </a>
        </div>
    </div>
</div>

<!-- Recent Donations -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
    <div class="border-b border-gray-200 px-6 py-4">
        <div class="flex items-center justify-between">
            <h3 class="text-lg font-semibold text-gray-900">Recent Donations</h3>
            <a href="{{ route('admin.donations') }}" class="text-sm font-medium text-primary-600 hover:text-primary-700 flex items-center space-x-1">
                <span>View all</span>
                <i data-feather="arrow-right" class="w-4 h-4"></i>
            </a>
        </div>
    </div>
    
    <div class="overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Donor</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse($stats['recent_donations'] as $donation)
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mr-3">
                                <i data-feather="user" class="w-4 h-4 text-gray-500"></i>
                            </div>
                            <div>
                                <div class="text-sm font-medium text-gray-900">{{ $donation->donor_name }}</div>
                                <div class="text-sm text-gray-500">{{ $donation->donor_email }}</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">${{ number_format($donation->amount, 2) }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="inline-flex px-2 py-1 text-xs font-medium rounded-full 
                            @if($donation->status === 'completed') bg-green-100 text-green-800
                            @elseif($donation->status === 'pending') bg-yellow-100 text-yellow-800
                            @else bg-red-100 text-red-800 @endif">
                            {{ ucfirst($donation->status) }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {{ $donation->created_at->format('M j, g:i A') }}
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" class="px-6 py-8 text-center text-gray-500">
                        <i data-feather="inbox" class="w-8 h-8 mx-auto mb-2 text-gray-300"></i>
                        <p>No donations yet</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection