@extends('layouts.app')

@section('content')
<div class="container mx-auto py-8">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
        <!-- Total Orders -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-1">
                    <p class="text-gray-500 text-sm">Total Orders</p>
                    <p class="text-2xl font-bold">{{ $user->orders()->count() }}</p>
                </div>
                <div class="text-3xl text-blue-500">📦</div>
            </div>
        </div>

        <!-- Total Spent -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-1">
                    <p class="text-gray-500 text-sm">Total Spent</p>
                    <p class="text-2xl font-bold">${{ number_format($user->orders()->sum('total'), 2) }}</p>
                </div>
                <div class="text-3xl text-green-500">💰</div>
            </div>
        </div>

        <!-- Pending Withdrawals -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-1">
                    <p class="text-gray-500 text-sm">Pending Withdrawals</p>
                    <p class="text-2xl font-bold">{{ $user->withdrawals()->where('status', 'pending')->count() }}</p>
                </div>
                <div class="text-3xl text-yellow-500">⏳</div>
            </div>
        </div>

        <!-- Commissions -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-1">
                    <p class="text-gray-500 text-sm">Total Commission</p>
                    <p class="text-2xl font-bold">${{ number_format($user->commissions()->sum('amount'), 2) }}</p>
                </div>
                <div class="text-3xl text-purple-500">📊</div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Recent Orders -->
        <div class="bg-white rounded-lg shadow">
            <div class="p-6 border-b">
                <h2 class="text-xl font-bold">Recent Orders</h2>
            </div>
            <div class="p-6">
                @forelse($user->orders()->latest()->take(5)->get() as $order)
                <div class="flex justify-between items-center py-3 border-b">
                    <div>
                        <p class="font-semibold">Order #{{ $order->id }}</p>
                        <p class="text-sm text-gray-500">{{ $order->created_at->format('M d, Y') }}</p>
                    </div>
                    <div class="text-right">
                        <p class="font-semibold">${{ number_format($order->total, 2) }}</p>
                        <span class="text-sm px-2 py-1 rounded {{ $order->status === 'completed' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                            {{ ucfirst($order->status) }}
                        </span>
                    </div>
                </div>
                @empty
                <p class="text-gray-500">No orders yet</p>
                @endforelse
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="bg-white rounded-lg shadow">
            <div class="p-6 border-b">
                <h2 class="text-xl font-bold">Quick Actions</h2>
            </div>
            <div class="p-6 space-y-3">
                <a href="{{ route('products.index') }}" class="block p-4 border rounded-lg hover:bg-blue-50 transition">
                    <p class="font-semibold">🛍️ Shop Products</p>
                    <p class="text-sm text-gray-500">Browse and purchase products</p>
                </a>
                <a href="{{ route('member.withdrawals') }}" class="block p-4 border rounded-lg hover:bg-green-50 transition">
                    <p class="font-semibold">💸 Withdraw Funds</p>
                    <p class="text-sm text-gray-500">Request withdrawal of earnings</p>
                </a>
                <a href="{{ route('member.commissions') }}" class="block p-4 border rounded-lg hover:bg-purple-50 transition">
                    <p class="font-semibold">📊 View Commissions</p>
                    <p class="text-sm text-gray-500">Check your commission history</p>
                </a>
                <a href="{{ route('member.profile') }}" class="block p-4 border rounded-lg hover:bg-gray-50 transition">
                    <p class="font-semibold">👤 Edit Profile</p>
                    <p class="text-sm text-gray-500">Update your profile information</p>
                </a>
            </div>
        </div>
    </div>
</div>
@endsection
