@extends('layouts.app')
@section('title', 'Wallet')
@section('show-header', true)
@section('page-title', 'My Wallet')

@section('content')
{{-- Balance Cards --}}
<div class="px-4 pt-4 grid grid-cols-2 gap-3">
    <div class="bg-gradient-to-br from-indigo-600 to-purple-700 rounded-2xl p-4 shadow-lg shadow-indigo-500/20">
        <p class="text-indigo-200 text-xs mb-1">Deposit Balance</p>
        <p class="text-white font-black text-2xl">{{ $settings['currency_symbol'] }}{{ number_format($user->balance, 2) }}</p>
        <p class="text-indigo-200 text-xs mt-2">For joining tournaments</p>
    </div>
    <div class="bg-gradient-to-br from-yellow-500 to-orange-600 rounded-2xl p-4 shadow-lg shadow-yellow-500/20">
        <p class="text-yellow-100 text-xs mb-1">Winning Balance</p>
        <p class="text-white font-black text-2xl">{{ $settings['currency_symbol'] }}{{ number_format($user->winning, 2) }}</p>
        <p class="text-yellow-100 text-xs mt-2">Prize earnings</p>
    </div>
</div>

{{-- Action Tabs --}}
<div id="wallet-tabs" class="mt-4">
    <div class="flex px-4 gap-2 overflow-x-auto pb-1 scrollbar-hide">
        @foreach(['deposit' => '💳 Add Money', 'withdraw' => '💸 Withdraw', 'transfer' => '🔄 Transfer', 'history' => '📜 History'] as $tab => $label)
        <button onclick="switchTab('{{ $tab }}')" id="tab-btn-{{ $tab }}"
            class="flex-shrink-0 px-4 py-2 rounded-xl text-sm font-semibold transition {{ $tab === 'deposit' ? 'bg-indigo-500 text-white' : 'bg-white/5 text-gray-400' }}">
            {{ $label }}
        </button>
        @endforeach
    </div>

    {{-- Deposit Tab --}}
    <div id="tab-deposit" class="tab-content px-4 pt-4">
        <div class="bg-white/5 border border-white/10 rounded-2xl p-4">
            <h3 class="text-white font-bold mb-1">Add Money</h3>
            <p class="text-gray-400 text-xs mb-4">Min: {{ $settings['currency_symbol'] }}{{ $settings['min_deposit'] }} · Max: {{ $settings['currency_symbol'] }}{{ $settings['max_deposit'] }}</p>

            {{-- Payment Numbers --}}
            <div class="grid grid-cols-3 gap-2 mb-4">
                @if($settings['bkash_number'])
                <div class="bg-pink-500/10 border border-pink-500/20 rounded-xl p-2 text-center">
                    <p class="text-pink-400 text-xs font-bold">bKash</p>
                    <p class="text-white text-xs font-mono mt-1">{{ $settings['bkash_number'] }}</p>
                </div>
                @endif
                @if($settings['nagad_number'])
                <div class="bg-orange-500/10 border border-orange-500/20 rounded-xl p-2 text-center">
                    <p class="text-orange-400 text-xs font-bold">Nagad</p>
                    <p class="text-white text-xs font-mono mt-1">{{ $settings['nagad_number'] }}</p>
                </div>
                @endif
                @if($settings['rocket_number'])
                <div class="bg-purple-500/10 border border-purple-500/20 rounded-xl p-2 text-center">
                    <p class="text-purple-400 text-xs font-bold">Rocket</p>
                    <p class="text-white text-xs font-mono mt-1">{{ $settings['rocket_number'] }}</p>
                </div>
                @endif
            </div>

            <form method="POST" action="{{ route('wallet.deposit') }}" class="space-y-3">
                @csrf
                <div>
                    <label class="text-xs text-gray-400 mb-1 block">Payment Method</label>
                    <select name="method" required class="w-full bg-black/30 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-indigo-500">
                        <option value="">Select method</option>
                        <option value="bKash" {{ old('method') === 'bKash' ? 'selected' : '' }}>bKash</option>
                        <option value="Nagad" {{ old('method') === 'Nagad' ? 'selected' : '' }}>Nagad</option>
                        <option value="Rocket" {{ old('method') === 'Rocket' ? 'selected' : '' }}>Rocket</option>
                    </select>
                    @error('method')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="text-xs text-gray-400 mb-1 block">Amount</label>
                    <input type="number" name="amount" value="{{ old('amount') }}" placeholder="Enter amount"
                        min="{{ $settings['min_deposit'] }}" max="{{ $settings['max_deposit'] }}" step="1"
                        class="w-full bg-black/30 border @error('amount') border-red-500 @else border-white/10 @enderror rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-indigo-500" required>
                    @error('amount')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="text-xs text-gray-400 mb-1 block">Transaction ID</label>
                    <input type="text" name="trx_id" value="{{ old('trx_id') }}" placeholder="e.g. BK8XXXXXX"
                        class="w-full bg-black/30 border @error('trx_id') border-red-500 @else border-white/10 @enderror rounded-xl px-4 py-3 text-white text-sm font-mono focus:outline-none focus:border-indigo-500" required>
                    @error('trx_id')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <p class="text-yellow-400/80 text-xs bg-yellow-500/10 rounded-xl p-3">
                    ⚠️ Send money first, then enter the transaction ID above.
                    @if($settings['payment_mode'] === 'manual') Your request will be reviewed by admin. @else It will be verified automatically. @endif
                </p>
                <button type="submit" class="w-full py-3.5 bg-gradient-to-r from-green-500 to-emerald-600 text-white font-bold rounded-xl hover:from-green-600 hover:to-emerald-700 transition">
                    Submit Deposit Request
                </button>
            </form>
        </div>
    </div>

    {{-- Withdraw Tab --}}
    <div id="tab-withdraw" class="tab-content hidden px-4 pt-4">
        <div class="bg-white/5 border border-white/10 rounded-2xl p-4">
            <h3 class="text-white font-bold mb-1">Withdraw Money</h3>
            <p class="text-gray-400 text-xs mb-4">Min: {{ $settings['currency_symbol'] }}{{ $settings['min_withdraw'] }} · Max: {{ $settings['currency_symbol'] }}{{ $settings['max_withdraw'] }}
                @if($settings['withdraw_commission_percent'] > 0) · {{ $settings['withdraw_commission_percent'] }}% commission @endif
            </p>
            <form method="POST" action="{{ route('wallet.withdraw') }}" class="space-y-3">
                @csrf
                <div>
                    <label class="text-xs text-gray-400 mb-1 block">Payment Method</label>
                    <select name="method" required class="w-full bg-black/30 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-indigo-500">
                        <option value="">Select method</option>
                        <option value="bKash">bKash</option>
                        <option value="Nagad">Nagad</option>
                        <option value="Rocket">Rocket</option>
                    </select>
                </div>
                <div>
                    <label class="text-xs text-gray-400 mb-1 block">Your Account Number</label>
                    <input type="text" name="account_number" placeholder="01XXXXXXXXX"
                        class="w-full bg-black/30 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-indigo-500" required>
                    @error('account_number')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="text-xs text-gray-400 mb-1 block">Amount</label>
                    <input type="number" name="amount" placeholder="Enter amount"
                        min="{{ $settings['min_withdraw'] }}" max="{{ $settings['max_withdraw'] }}"
                        class="w-full bg-black/30 border @error('amount') border-red-500 @else border-white/10 @enderror rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-indigo-500" required>
                    @error('amount')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <button type="submit" class="w-full py-3.5 bg-gradient-to-r from-orange-500 to-red-600 text-white font-bold rounded-xl hover:from-orange-600 hover:to-red-700 transition">
                    Submit Withdrawal
                </button>
            </form>
        </div>
    </div>

    {{-- Transfer Tab --}}
    <div id="tab-transfer" class="tab-content hidden px-4 pt-4">
        <div class="bg-white/5 border border-white/10 rounded-2xl p-4">
            <h3 class="text-white font-bold mb-1">Transfer Balance</h3>
            <p class="text-gray-400 text-xs mb-4">Move your winning balance to deposit balance for joining tournaments.</p>
            <div class="bg-yellow-500/10 border border-yellow-500/20 rounded-xl p-3 mb-4 text-sm text-yellow-300">
                Available Winning Balance: <strong>{{ $settings['currency_symbol'] }}{{ number_format($user->winning, 2) }}</strong>
            </div>
            <form method="POST" action="{{ route('wallet.transfer') }}" class="space-y-3">
                @csrf
                <div>
                    <label class="text-xs text-gray-400 mb-1 block">Amount to Transfer</label>
                    <input type="number" name="amount" placeholder="Enter amount" min="1" max="{{ $user->winning }}"
                        class="w-full bg-black/30 border @error('amount') border-red-500 @else border-white/10 @enderror rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-indigo-500" required>
                    @error('amount')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <button type="submit" class="w-full py-3.5 bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-bold rounded-xl transition">
                    Transfer to Deposit Wallet
                </button>
            </form>
        </div>
    </div>

    {{-- History Tab --}}
    <div id="tab-history" class="tab-content hidden px-4 pt-4 pb-4">
        <div class="space-y-2">
            @forelse($transactions as $txn)
            <div class="bg-white/5 border border-white/10 rounded-xl px-4 py-3 flex items-center justify-between">
                <div>
                    <p class="text-white text-sm font-medium capitalize">{{ str_replace('_', ' ', $txn->type) }}</p>
                    <p class="text-gray-500 text-xs">{{ $txn->created_at->format('d M Y, g:ia') }}</p>
                    @if($txn->trx_id)<p class="text-gray-600 text-xs font-mono">{{ $txn->trx_id }}</p>@endif
                </div>
                <div class="text-right">
                    <p class="{{ in_array($txn->type, ['deposit','prize','refund','referral_bonus','transfer']) ? 'text-green-400' : 'text-red-400' }} font-bold">
                        {{ in_array($txn->type, ['deposit','prize','refund','referral_bonus','transfer']) ? '+' : '-' }}{{ $settings['currency_symbol'] }}{{ number_format($txn->amount, 2) }}
                    </p>
                    <span class="text-xs px-2 py-0.5 rounded-full {{ $txn->status === 'completed' ? 'bg-green-500/20 text-green-300' : ($txn->status === 'rejected' ? 'bg-red-500/20 text-red-300' : 'bg-yellow-500/20 text-yellow-300') }}">
                        {{ ucfirst($txn->status) }}
                    </span>
                </div>
            </div>
            @empty
            <div class="text-center py-10 text-gray-500">
                <p>No transactions yet</p>
            </div>
            @endforelse
            {{ $transactions->links('user.components.pagination') }}
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function switchTab(tab) {
        document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
        document.querySelectorAll('[id^="tab-btn-"]').forEach(btn => {
            btn.classList.remove('bg-indigo-500', 'text-white');
            btn.classList.add('bg-white/5', 'text-gray-400');
        });
        document.getElementById('tab-' + tab).classList.remove('hidden');
        const btn = document.getElementById('tab-btn-' + tab);
        btn.classList.add('bg-indigo-500', 'text-white');
        btn.classList.remove('bg-white/5', 'text-gray-400');
    }
    @if(session('success') || $errors->any())
    // If there was a form submission, try to show the relevant tab
    @if(request()->is('*/wallet*') && old('_token'))
    @endif
    @endif
</script>
@endpush