@extends('layouts.user')

@section('page-title', __('Dashboard'))

@section('content')
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
    <div class="p-5 bg-white rounded-xl border border-gray-200">
        <p class="text-sm text-gray-500">{{ __('Wallet Balance') }}</p>
        <p class="text-2xl font-bold text-indigo-600 mt-1">{{ currency($stats['balance']) }}</p>
        <a href="{{ route('user.wallet') }}" class="text-xs text-indigo-600 font-medium mt-2 inline-block">{{ __('Add funds →') }}</a>
    </div>
    <div class="p-5 bg-white rounded-xl border border-gray-200">
        <p class="text-sm text-gray-500">{{ __('Total Orders') }}</p>
        <p class="text-2xl font-bold mt-1">{{ number_format($stats['orders']) }}</p>
        <a href="{{ route('user.orders.index') }}" class="text-xs text-indigo-600 font-medium mt-2 inline-block">{{ __('View orders →') }}</a>
    </div>
    <div class="p-5 bg-white rounded-xl border border-gray-200">
        <p class="text-sm text-gray-500">{{ __('Active Orders') }}</p>
        <p class="text-2xl font-bold text-yellow-600 mt-1">{{ number_format($stats['active_orders']) }}</p>
        <p class="text-xs text-gray-400 mt-2">{{ __('In progress') }}</p>
    </div>
    <div class="p-5 bg-white rounded-xl border border-gray-200">
        <p class="text-sm text-gray-500">{{ __('Referral Earnings') }}</p>
        <p class="text-2xl font-bold text-green-600 mt-1">{{ currency($stats['referral_earnings']) }}</p>
        <a href="{{ route('user.referrals') }}" class="text-xs text-indigo-600 font-medium mt-2 inline-block">{{ __('Invite friends →') }}</a>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
        <div class="p-4 border-b border-gray-200 flex items-center justify-between">
            <h2 class="font-semibold">{{ __('Recent Orders') }}</h2>
            <a href="{{ route('user.orders.index') }}" class="text-sm text-indigo-600 font-medium">{{ __('View all') }}</a>
        </div>
        @if($recentOrders->isEmpty())
            <div class="p-8 text-center text-gray-500">
                <p>{{ __('No orders yet') }}</p>
                <a href="{{ route('user.orders.create') }}" class="mt-3 inline-block px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg">{{ __('Place your first order') }}</a>
            </div>
        @else
            <div class="divide-y divide-gray-100">
                @foreach($recentOrders as $order)
                    <a href="{{ route('user.orders.show', $order) }}" class="flex items-center gap-4 p-4 hover:bg-gray-50">
                        <div class="flex-1 min-w-0">
                            <p class="font-medium text-sm truncate">{{ $order->service->name }}</p>
                            <p class="text-xs text-gray-400">{{ $order->code }} · {{ $order->created_at->diffForHumans() }}</p>
                        </div>
                        <span class="px-2 py-1 text-xs font-medium rounded-full
                            {{ $order->status === 'completed' ? 'bg-green-100 text-green-700' : '' }}
                            {{ $order->status === 'pending' || $order->status === 'processing' ? 'bg-yellow-100 text-yellow-700' : '' }}
                            {{ $order->status === 'in_progress' ? 'bg-blue-100 text-blue-700' : '' }}
                            {{ in_array($order->status, ['cancelled','failed']) ? 'bg-red-100 text-red-700' : '' }}">
                            {{ ucfirst(str_replace('_', ' ', $order->status)) }}
                        </span>
                    </a>
                @endforeach
            </div>
        @endif
    </div>

    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
        <div class="p-4 border-b border-gray-200 flex items-center justify-between">
            <h2 class="font-semibold">{{ __('Recent Transactions') }}</h2>
            <a href="{{ route('user.transactions') }}" class="text-sm text-indigo-600 font-medium">{{ __('View all') }}</a>
        </div>
        @if($recentTransactions->isEmpty())
            <div class="p-8 text-center text-gray-500">
                <p>{{ __('No transactions yet') }}</p>
            </div>
        @else
            <div class="divide-y divide-gray-100">
                @foreach($recentTransactions as $transaction)
                    <div class="flex items-center gap-4 p-4">
                        <div class="flex-1 min-w-0">
                            <p class="font-medium text-sm truncate">{{ $transaction->description ?? ucfirst($transaction->type) }}</p>
                            <p class="text-xs text-gray-400">{{ $transaction->created_at->diffForHumans() }}</p>
                        </div>
                        <span class="font-semibold {{ $transaction->isCredit() ? 'text-green-600' : 'text-red-600' }}">
                            {{ $transaction->isCredit() ? '+' : '' }}{{ currency($transaction->amount) }}
                        </span>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</div>
@endsection