@extends('layouts.app')
@section('title', 'My Wallet')
@section('content')
<div class="max-w-5xl mx-auto px-4 py-8">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-gradient-to-br from-purple-600 to-indigo-600 rounded-xl text-white p-6">
            <p class="text-purple-200 text-sm">Available Balance</p>
            <p class="text-4xl font-extrabold mt-1">${{ number_format($user->balance, 2) }}</p>
        </div>
        <a href="{{ route('wallet.deposit') }}" class="bg-white rounded-xl shadow p-6 card-hover flex items-center space-x-4">
            <div class="bg-green-100 p-4 rounded-xl">
                <i class="fas fa-plus-circle text-green-600 text-2xl"></i>
            </div>
            <div>
                <p class="font-bold text-gray-800">Deposit</p>
                <p class="text-gray-500 text-sm">Add funds to wallet</p>
            </div>
        </a>
        <a href="{{ route('wallet.withdraw') }}" class="bg-white rounded-xl shadow p-6 card-hover flex items-center space-x-4">
            <div class="bg-blue-100 p-4 rounded-xl">
                <i class="fas fa-arrow-down text-blue-600 text-2xl"></i>
            </div>
            <div>
                <p class="font-bold text-gray-800">Withdraw</p>
                <p class="text-gray-500 text-sm">Cash out earnings</p>
            </div>
        </a>
    </div>

    <div class="bg-white rounded-xl shadow">
        <div class="p-6 border-b">
            <h2 class="font-bold text-lg text-gray-800">Transaction History</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Amount</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Method</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    @forelse($transactions as $t)
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4">
                            <span class="flex items-center">
                                <i class="fas {{ $t->type === 'deposit' ? 'fa-arrow-up text-green-500' : 'fa-arrow-down text-blue-500' }} mr-2"></i>
                                {{ ucfirst($t->type) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 font-bold {{ $t->type === 'deposit' ? 'text-green-600' : 'text-blue-600' }}">
                            ${{ number_format($t->amount, 2) }}
                        </td>
                        <td class="px-6 py-4 text-gray-500">{{ $t->paymentMethod->name ?? 'N/A' }}</td>
                        <td class="px-6 py-4">
                            <span class="px-2 py-1 rounded-full text-xs font-semibold
                                {{ $t->status === 'approved' ? 'bg-green-100 text-green-800' : ($t->status === 'rejected' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800') }}">
                                {{ ucfirst($t->status) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-gray-500 text-sm">{{ $t->created_at->format('M d, Y H:i') }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="5" class="px-6 py-8 text-center text-gray-400">No transactions yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="p-4">{{ $transactions->links() }}</div>
    </div>
</div>
@endsection