@extends('layouts.user')

@section('page-title', __('Add Funds'))

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 bg-white rounded-xl border border-gray-200 p-6">
        <h2 class="font-semibold mb-4">{{ __('Add Funds to Wallet') }}</h2>
        <form action="{{ route('user.wallet.deposit') }}" method="POST">
            @csrf
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('Amount') }}</label>
                    <input type="number" name="amount" min="0.01" step="0.01" value="{{ old('amount', 10) }}" required
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('Payment Method') }}</label>
                    <div class="space-y-2">
                        @forelse($gateways as $gateway)
                            <label class="flex items-center gap-3 p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 has-[:checked]:border-indigo-500 has-[:checked]:bg-indigo-50">
                                <input type="radio" name="gateway_id" value="{{ $gateway->id }}" required class="text-indigo-600">
                                <div class="flex-1">
                                    <p class="text-sm font-medium">{{ $gateway->name }}</p>
                                    <p class="text-xs text-gray-400">
                                        @if($gateway->fee > 0)
                                            Fee: {{ $gateway->fee_type === 'percent' ? $gateway->fee.'%' : currency($gateway->fee) }}
                                        @else
                                            No fee
                                        @endif
                                        · Min {{ currency($gateway->min_amount) }} / Max {{ currency($gateway->max_amount) }}
                                    </p>
                                </div>
                                @if($gateway->is_custom)
                                    <span class="px-2 py-0.5 text-xs font-medium bg-gray-100 text-gray-600 rounded">Manual</span>
                                @endif
                            </label>
                        @empty
                            <p class="text-sm text-gray-500 p-4 text-center border border-dashed border-gray-300 rounded-lg">
                                {{ __('No payment methods configured yet. Please contact support.') }}
                            </p>
                        @endforelse
                    </div>
                </div>
                <button type="submit" class="w-full py-3 text-white font-semibold bg-indigo-600 rounded-lg hover:bg-indigo-700">
                    {{ __('Continue') }}
                </button>
            </div>
        </form>
    </div>

    <div class="bg-white rounded-xl border border-gray-200 p-6 h-fit">
        <h3 class="font-semibold mb-4">{{ __('Current Balance') }}</h3>
        <p class="text-3xl font-bold text-indigo-600">{{ currency(auth()->user()->balance) }}</p>
        <div class="mt-6 space-y-2 text-sm">
            <div class="flex justify-between"><span class="text-gray-500">{{ __('Total deposited') }}</span><span class="font-medium">{{ currency(auth()->user()->total_deposit) }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">{{ __('Total spent') }}</span><span class="font-medium">{{ currency(auth()->user()->total_spent) }}</span></div>
        </div>
    </div>
</div>

<div class="mt-8 bg-white rounded-xl border border-gray-200 overflow-hidden">
    <div class="p-4 border-b border-gray-200"><h3 class="font-semibold">{{ __('Deposit History') }}</h3></div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 border-b border-gray-200">
                <tr>
                    <th class="text-left px-4 py-3 font-medium text-gray-600">{{ __('Code') }}</th>
                    <th class="text-left px-4 py-3 font-medium text-gray-600">{{ __('Method') }}</th>
                    <th class="text-right px-4 py-3 font-medium text-gray-600">{{ __('Amount') }}</th>
                    <th class="text-center px-4 py-3 font-medium text-gray-600">{{ __('Status') }}</th>
                    <th class="text-left px-4 py-3 font-medium text-gray-600">{{ __('Date') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($deposits as $deposit)
                    <tr>
                        <td class="px-4 py-3 font-mono text-xs">{{ $deposit->code }}</td>
                        <td class="px-4 py-3">{{ ucfirst($deposit->gateway) }}</td>
                        <td class="px-4 py-3 text-right font-semibold">{{ currency($deposit->amount) }}</td>
                        <td class="px-4 py-3 text-center">
                            <span class="px-2 py-1 text-xs font-medium rounded-full
                                {{ $deposit->status === 'completed' ? 'bg-green-100 text-green-700' : '' }}
                                {{ $deposit->status === 'pending' ? 'bg-yellow-100 text-yellow-700' : '' }}
                                {{ in_array($deposit->status, ['failed','cancelled','expired']) ? 'bg-red-100 text-red-700' : '' }}">
                                {{ ucfirst($deposit->status) }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-gray-500">{{ $deposit->created_at->format('M d, Y H:i') }}</td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="px-4 py-8 text-center text-gray-500">{{ __('No deposits yet') }}</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
<div class="mt-4">{{ $deposits->links() }}</div>
@endsection