@extends('user.layouts.app')
@section('title', session('locale') == 'bn' ? 'ফান্ড যুক্ত করুন' : 'Add Fund')
@php $lang = session('locale', 'en'); @endphp

@section('content')

    <div class="mb-8">
        <h1 class="text-3xl font-extrabold text-slate-800 dark:text-white tracking-tight">{{ $lang == 'bn' ? 'ফান্ড যুক্ত করুন' : 'Add Funds' }}</h1>
        <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">{{ $lang == 'bn' ? 'আপনার একাউন্টে ব্যালেন্স যুক্ত করুন পেফাস্টবিডি (PayFastBD) এর মাধ্যমে।' : 'Securely add money to your account via PayFastBD.' }}</p>
    </div>

    @if(session('success'))
        <div class="bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-200 dark:border-emerald-500/20 text-emerald-600 dark:text-emerald-400 px-4 py-3 rounded-xl mb-6 flex items-center gap-3 shadow-sm">
            <i class="fas fa-check-circle text-lg"></i> {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-400 px-4 py-3 rounded-xl mb-6 flex items-center gap-3 shadow-sm">
            <i class="fas fa-exclamation-triangle text-lg"></i> {{ session('error') }}
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <div class="lg:col-span-1">
            <div class="bg-white dark:bg-[#0f172a] border border-slate-200 dark:border-[#1e293b] rounded-2xl p-6 shadow-sm sticky top-20">
                <div class="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl p-5 text-center text-white mb-6 shadow-lg shadow-blue-500/30">
                    <p class="text-blue-100 text-sm font-medium mb-1">{{ $lang == 'bn' ? 'বর্তমান ব্যালেন্স' : 'Current Balance' }}</p>
                    <h2 class="text-4xl font-extrabold">৳{{ number_format($user->balance, 2) }}</h2>
                </div>

                <form action="{{ route('user.fund.pay') }}" method="POST">
                    @csrf
                    <label class="block text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">{{ $lang == 'bn' ? 'এমাউন্ট লিখুন (৳)' : 'Enter Amount (BDT)' }}</label>
                    <input type="number" name="amount" id="amountInput" class="w-full bg-slate-50 dark:bg-[#1e293b] border border-slate-200 dark:border-[#334155] text-slate-800 dark:text-white text-xl font-bold rounded-xl focus:ring-emerald-500 p-4 outline-none mb-4 transition-colors" placeholder="100" min="10" required>
                    
                    <div class="flex flex-wrap gap-2 mb-6">
                        <button type="button" class="amount-btn bg-slate-100 dark:bg-[#1e293b] border border-slate-200 dark:border-[#334155] text-slate-600 dark:text-slate-300 hover:bg-emerald-50 dark:hover:bg-emerald-500/10 hover:text-emerald-600 dark:hover:text-emerald-400 px-4 py-2 rounded-lg font-bold text-sm transition-colors" data-amount="50">50</button>
                        <button type="button" class="amount-btn bg-slate-100 dark:bg-[#1e293b] border border-slate-200 dark:border-[#334155] text-slate-600 dark:text-slate-300 hover:bg-emerald-50 dark:hover:bg-emerald-500/10 hover:text-emerald-600 dark:hover:text-emerald-400 px-4 py-2 rounded-lg font-bold text-sm transition-colors" data-amount="100">100</button>
                        <button type="button" class="amount-btn bg-slate-100 dark:bg-[#1e293b] border border-slate-200 dark:border-[#334155] text-slate-600 dark:text-slate-300 hover:bg-emerald-50 dark:hover:bg-emerald-500/10 hover:text-emerald-600 dark:hover:text-emerald-400 px-4 py-2 rounded-lg font-bold text-sm transition-colors" data-amount="200">200</button>
                        <button type="button" class="amount-btn bg-slate-100 dark:bg-[#1e293b] border border-slate-200 dark:border-[#334155] text-slate-600 dark:text-slate-300 hover:bg-emerald-50 dark:hover:bg-emerald-500/10 hover:text-emerald-600 dark:hover:text-emerald-400 px-4 py-2 rounded-lg font-bold text-sm transition-colors" data-amount="500">500</button>
                    </div>

                    <button type="submit" class="w-full bg-emerald-500 hover:bg-emerald-600 text-white font-bold py-3.5 rounded-xl shadow-lg shadow-emerald-500/30 transition-all hover:scale-[1.02] flex items-center justify-center gap-2">
                        <i class="fas fa-lock"></i> Pay with PayFastBD
                    </button>
                </form>
            </div>
        </div>

        <div class="lg:col-span-2">
            <div class="bg-white dark:bg-[#0f172a] border border-slate-200 dark:border-[#1e293b] rounded-2xl shadow-sm overflow-hidden h-full flex flex-col">
                <div class="p-6 border-b border-slate-200 dark:border-[#1e293b] bg-slate-50/50 dark:bg-slate-800/30">
                    <h3 class="text-lg font-bold text-slate-800 dark:text-white flex items-center gap-2">
                        <i class="fas fa-history text-blue-500 dark:text-blue-400"></i> {{ $lang == 'bn' ? 'ডিপোজিট হিস্ট্রি' : 'Deposit History' }}
                    </h3>
                </div>
                
                <div class="overflow-x-auto flex-1">
                    <table class="w-full text-left text-sm text-slate-600 dark:text-slate-300">
                        <thead class="bg-slate-50 dark:bg-[#1e293b]/80 text-xs uppercase font-bold text-slate-500 dark:text-slate-400">
                            <tr>
                                <th class="px-6 py-4">Date</th>
                                <th class="px-6 py-4">TrxID</th>
                                <th class="px-6 py-4">Amount</th>
                                <th class="px-6 py-4 text-right">Status</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-200 dark:divide-[#1e293b]">
                            @forelse($history as $row)
                            <tr class="hover:bg-slate-50 dark:hover:bg-[#1e293b]/40 transition-colors">
                                <td class="px-6 py-4">
                                    <div class="font-medium text-slate-800 dark:text-white">{{ date('d M Y', strtotime($row->created_at)) }}</div>
                                    <div class="text-xs text-slate-500">{{ date('h:i A', strtotime($row->created_at)) }}</div>
                                </td>
                                <td class="px-6 py-4 font-mono text-xs">
                                    {{ $row->trx_id ?? 'N/A' }}
                                </td>
                                <td class="px-6 py-4 font-bold text-emerald-600 dark:text-emerald-400">
                                    + ৳{{ number_format($row->amount, 2) }}
                                </td>
                                <td class="px-6 py-4 text-right">
                                    @if($row->status == 'approved')
                                        <span class="bg-emerald-100 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-500/20 px-2.5 py-1 rounded text-xs font-bold">Approved</span>
                                    @elseif($row->status == 'pending')
                                        <span class="bg-yellow-100 dark:bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 border border-yellow-200 dark:border-yellow-500/20 px-2.5 py-1 rounded text-xs font-bold">Pending</span>
                                    @else
                                        <span class="bg-red-100 dark:bg-red-500/10 text-red-600 dark:text-red-400 border border-red-200 dark:border-red-500/20 px-2.5 py-1 rounded text-xs font-bold">Rejected</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="px-6 py-12 text-center text-slate-500 dark:text-slate-400">
                                    <i class="fas fa-folder-open text-3xl mb-3 opacity-50 block"></i>
                                    {{ $lang == 'bn' ? 'কোনো রেকর্ড পাওয়া যায়নি।' : 'No deposit history found.' }}
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="p-4 border-t border-slate-200 dark:border-[#1e293b]">
                    {{ $history->links() }}
                </div>
            </div>
        </div>
    </div>

    <script>
        document.querySelectorAll('.amount-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.getElementById('amountInput').value = this.dataset.amount;
                document.querySelectorAll('.amount-btn').forEach(b => {
                    b.classList.remove('bg-emerald-50', 'dark:bg-emerald-500/10', 'text-emerald-600', 'dark:text-emerald-400', 'border-emerald-500');
                });
                this.classList.add('bg-emerald-50', 'dark:bg-emerald-500/10', 'text-emerald-600', 'dark:text-emerald-400', 'border-emerald-500');
            });
        });
    </script>

@endsection
