@extends('layouts.app')
@section('title', 'Deposit Funds')
@section('content')
<div class="max-w-2xl mx-auto px-4 py-8">
    <a href="{{ route('wallet.index') }}" class="text-purple-600 hover:underline text-sm mb-6 inline-block"><i class="fas fa-arrow-left mr-1"></i>Back to Wallet</a>
    <div class="bg-white rounded-2xl shadow-lg p-8">
        <h1 class="text-2xl font-bold text-gray-800 mb-6"><i class="fas fa-plus-circle text-green-500 mr-2"></i>Deposit Funds</h1>
        <form action="{{ route('wallet.deposit.submit') }}" method="POST" class="space-y-5">
            @csrf
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Payment Method</label>
                <select name="payment_method_id" required class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-purple-500" id="methodSelect">
                    <option value="">Select Method</option>
                    @foreach($paymentMethods as $m)
                    <option value="{{ $m->id }}" data-instructions="{{ $m->instructions }}" data-min="{{ $m->min_deposit }}">
                        {{ $m->name }} (Min: ${{ number_format($m->min_deposit, 2) }})
                    </option>
                    @endforeach
                </select>
            </div>
            <div id="methodInstructions" class="hidden bg-blue-50 rounded-lg p-4 text-sm text-blue-800">
                <strong>Instructions:</strong><br><span id="instrText"></span>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Amount ($)</label>
                <input type="number" name="amount" step="0.01" min="1" required placeholder="Enter amount"
                    class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-purple-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Transaction ID / Reference</label>
                <input type="text" name="transaction_id" required placeholder="Your payment transaction ID"
                    class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-purple-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Additional Notes (optional)</label>
                <textarea name="notes" rows="2" placeholder="Any additional details"
                    class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-purple-500"></textarea>
            </div>
            <button type="submit" class="w-full gradient-bg text-white py-3 rounded-xl font-bold hover:opacity-90 transition">
                Submit Deposit Request
            </button>
        </form>
    </div>
</div>
<script>
    document.getElementById('methodSelect').addEventListener('change', function() {
        const opt = this.options[this.selectedIndex];
        const instr = opt.dataset.instructions;
        const box = document.getElementById('methodInstructions');
        if (instr) {
            document.getElementById('instrText').textContent = instr;
            box.classList.remove('hidden');
        } else {
            box.classList.add('hidden');
        }
    });
</script>
@endsection