@extends('layouts.admin')
@section('title', 'Transactions')
@section('page-title', 'Transactions')

@section('content')
{{-- Tabs --}}
<div class="flex gap-2 mb-6 border-b border-slate-700 pb-4">
    @foreach(['pending_deposits' => 'Pending Deposits', 'pending_withdrawals' => 'Pending Withdrawals', 'all' => 'All Transactions'] as $key => $label)
    <a href="{{ route('admin.transactions.index', ['tab' => $key]) }}"
       class="px-4 py-2 rounded-lg text-sm font-medium transition {{ $tab === $key ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-400 hover:bg-slate-700' }}">
        {{ $label }}
        @if($key === 'pending_deposits' && $pendingDepositCount > 0)
        <span class="ml-1 bg-red-500 text-white text-xs rounded-full px-1.5 py-0.5">{{ $pendingDepositCount }}</span>
        @elseif($key === 'pending_withdrawals' && $pendingWithdrawCount > 0)
        <span class="ml-1 bg-red-500 text-white text-xs rounded-full px-1.5 py-0.5">{{ $pendingWithdrawCount }}</span>
        @endif
    </a>
    @endforeach
</div>

{{-- Filters --}}
<form method="GET" action="{{ route('admin.transactions.index') }}" class="flex gap-3 mb-6 flex-wrap">
    <input type="hidden" name="tab" value="{{ $tab }}">
    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search TRX ID / Phone..."
        class="flex-1 min-w-48 bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-sm text-white focus:outline-none focus:border-indigo-500">
    <input type="date" name="date_from" value="{{ request('date_from') }}" class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-indigo-500">
    <input type="date" name="date_to" value="{{ request('date_to') }}" class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-indigo-500">
    <button type="submit" class="btn-primary text-sm px-4">Filter</button>
    <a href="{{ route('admin.transactions.export', request()->all()) }}" class="btn-secondary text-sm px-4">Export CSV</a>
</form>

{{-- Transactions Table --}}
<div class="card rounded-xl overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-slate-800/50">
                <tr>
                    <th class="text-left px-4 py-3 text-slate-400 font-medium">User</th>
                    <th class="text-left px-4 py-3 text-slate-400 font-medium">Type</th>
                    <th class="text-left px-4 py-3 text-slate-400 font-medium">Amount</th>
                    <th class="text-left px-4 py-3 text-slate-400 font-medium">Method</th>
                    <th class="text-left px-4 py-3 text-slate-400 font-medium">TRX ID</th>
                    @if($tab === 'pending_withdrawals' || $tab === 'all')<th class="text-left px-4 py-3 text-slate-400 font-medium">Account</th>@endif
                    <th class="text-left px-4 py-3 text-slate-400 font-medium">Status</th>
                    <th class="text-left px-4 py-3 text-slate-400 font-medium">Date</th>
                    @if($tab !== 'all')<th class="text-left px-4 py-3 text-slate-400 font-medium">Actions</th>@endif
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-800">
                @forelse($transactions as $txn)
                <tr class="hover:bg-white/[0.02] transition">
                    <td class="px-4 py-3">
                        <p class="text-white font-medium">{{ $txn->user->name ?? 'Deleted' }}</p>
                        <p class="text-slate-500 text-xs">{{ $txn->user->phone ?? '-' }}</p>
                    </td>
                    <td class="px-4 py-3 capitalize text-slate-300">{{ str_replace('_',' ',$txn->type) }}</td>
                    <td class="px-4 py-3 font-bold {{ in_array($txn->type, ['deposit','prize','refund','referral_bonus']) ? 'text-green-400' : 'text-red-400' }}">
                        ৳{{ number_format($txn->amount, 2) }}
                    </td>
                    <td class="px-4 py-3 text-slate-400">{{ $txn->method ?? '-' }}</td>
                    <td class="px-4 py-3 font-mono text-xs text-slate-400">{{ $txn->trx_id ?? '-' }}</td>
                    @if($tab === 'pending_withdrawals' || $tab === 'all')
                    <td class="px-4 py-3 font-mono text-xs text-slate-400">{{ $txn->account_number ?? '-' }}</td>
                    @endif
                    <td class="px-4 py-3">
                        <span class="badge {{ $txn->status === 'completed' ? 'badge-success' : ($txn->status === 'rejected' ? 'badge-danger' : 'badge-warning') }}">
                            {{ ucfirst($txn->status) }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-slate-500 text-xs">{{ $txn->created_at->format('d M Y\ng:ia') }}</td>
                    @if($tab !== 'all')
                    <td class="px-4 py-3">
                        @if($txn->status === 'pending')
                        <div class="flex items-center gap-2">
                            @if($txn->type === 'deposit')
                            <form method="POST" action="{{ route('admin.transactions.approve-deposit', $txn) }}">
                                @csrf
                                <button type="submit" class="text-xs bg-green-600 hover:bg-green-500 text-white px-3 py-1.5 rounded-lg transition">Approve</button>
                            </form>
                            <button onclick="showRejectModal('deposit', {{ $txn->id }})" class="text-xs bg-red-600 hover:bg-red-500 text-white px-3 py-1.5 rounded-lg transition">Reject</button>
                            @elseif($txn->type === 'withdraw')
                            <form method="POST" action="{{ route('admin.transactions.approve-withdraw', $txn) }}">
                                @csrf
                                <button type="submit" class="text-xs bg-green-600 hover:bg-green-500 text-white px-3 py-1.5 rounded-lg transition">Approve</button>
                            </form>
                            <button onclick="showRejectModal('withdraw', {{ $txn->id }})" class="text-xs bg-red-600 hover:bg-red-500 text-white px-3 py-1.5 rounded-lg transition">Reject</button>
                            @endif
                        </div>
                        @endif
                    </td>
                    @endif
                </tr>
                @empty
                <tr><td colspan="9" class="px-4 py-10 text-center text-slate-500">No transactions found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<div class="mt-4">{{ $transactions->withQueryString()->links() }}</div>

{{-- Reject Modal --}}
<div id="rejectModal" class="hidden fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4">
    <div class="bg-slate-800 border border-slate-700 rounded-2xl p-6 w-full max-w-md">
        <h3 class="text-white font-bold text-lg mb-4">Reject Transaction</h3>
        <form id="rejectForm" method="POST">
            @csrf
            <div class="mb-4">
                <label class="text-slate-400 text-sm mb-2 block">Rejection Reason</label>
                <textarea name="reason" rows="3" required placeholder="Explain why this transaction is being rejected..."
                    class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-red-500 resize-none"></textarea>
            </div>
            <div class="flex gap-3">
                <button type="submit" class="flex-1 bg-red-600 hover:bg-red-500 text-white font-bold py-2.5 rounded-xl transition">Reject</button>
                <button type="button" onclick="closeRejectModal()" class="flex-1 bg-slate-700 hover:bg-slate-600 text-white font-bold py-2.5 rounded-xl transition">Cancel</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function showRejectModal(type, id) {
        const base = '{{ url("/admin/transactions") }}/' + id + '/reject-' + type;
        document.getElementById('rejectForm').action = base;
        document.getElementById('rejectModal').classList.remove('hidden');
    }
    function closeRejectModal() {
        document.getElementById('rejectModal').classList.add('hidden');
    }
</script>
@endpush