<x-layouts.admin title="Deposits | Admin Suite" activePage="admin-deposits">
<div class="space-y-8">
    <div>
        <h2 class="font-serif text-3xl text-on-surface">Deposit Requests</h2>
        <p class="text-on-surface-variant text-sm mt-1">Review and process incoming deposit requests.</p>
    </div>

    <div class="bg-surface-container-lowest overflow-x-auto">
        <table class="w-full text-left border-collapse min-w-[800px]">
            <thead>
                <tr class="bg-surface-container-low text-on-surface-variant uppercase text-[10px] tracking-widest font-bold">
                    <th class="px-6 py-4">User</th>
                    <th class="px-6 py-4">Account</th>
                    <th class="px-6 py-4">Method</th>
                    <th class="px-6 py-4">Amount</th>
                    <th class="px-6 py-4">Proof</th>
                    <th class="px-6 py-4">Status</th>
                    <th class="px-6 py-4">Date</th>
                    <th class="px-6 py-4 text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-surface-container">
                @forelse($deposits as $deposit)
                <tr class="hover:bg-surface-container-low transition-colors group">
                    <td class="px-6 py-5">
                        <div>
                            <p class="text-sm font-semibold">{{ $deposit->user->first_name }} {{ $deposit->user->last_name }}</p>
                            <p class="text-xs text-on-surface-variant">{{ $deposit->user->email }}</p>
                        </div>
                    </td>
                    <td class="px-6 py-5 text-sm">{{ $deposit->account->account_number }}</td>
                    <td class="px-6 py-5 text-sm">{{ $deposit->paymentMethod?->name ?? '—' }}</td>
                    <td class="px-6 py-5 font-serif text-primary font-semibold">{{ $deposit->account->currency->symbol() }}{{ number_format($deposit->amount, 2) }}</td>
                    <td class="px-6 py-5">
                        @if($deposit->proof_path)
                            <a href="{{ asset('storage/' . $deposit->proof_path) }}" target="_blank" class="text-xs text-primary font-bold flex items-center gap-1">
                                <span class="material-symbols-outlined text-sm">attachment</span> View
                            </a>
                        @else
                            <span class="text-xs text-on-surface-variant">—</span>
                        @endif
                    </td>
                    <td class="px-6 py-5">
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-[10px] font-bold uppercase tracking-tighter
                            @if($deposit->status->value === 'pending') bg-surface-container-highest text-on-surface-variant
                            @elseif($deposit->status->value === 'approved') bg-secondary-container text-secondary
                            @else bg-error-container text-on-error-container @endif
                        ">{{ $deposit->status->value }}</span>
                    </td>
                    <td class="px-6 py-5 text-xs text-on-surface-variant">{{ $deposit->created_at->format('M d, Y') }}</td>
                    <td class="px-6 py-5 text-right">
                        @if($deposit->status->value === 'pending')
                        <div class="flex justify-end gap-2" x-data="{ showReject: false }">
                            <form method="POST" action="{{ route('admin.deposits.approve', $deposit) }}">
                                @csrf
                                <button type="submit" class="p-2 bg-secondary-container text-secondary hover:bg-secondary hover:text-on-secondary transition-colors rounded-sm" title="Approve">
                                    <span class="material-symbols-outlined text-lg">check</span>
                                </button>
                            </form>
                            <button @click="showReject = !showReject" class="p-2 bg-error-container text-on-error-container hover:bg-error hover:text-on-error transition-colors rounded-sm" title="Reject">
                                <span class="material-symbols-outlined text-lg">close</span>
                            </button>
                            <div x-show="showReject" x-cloak class="absolute right-6 mt-10 bg-surface-container-lowest shadow-lg p-4 rounded-md z-10 w-64">
                                <form method="POST" action="{{ route('admin.deposits.reject', $deposit) }}">
                                    @csrf
                                    <label class="block text-xs font-label uppercase tracking-widest text-on-surface-variant mb-2">Rejection Note</label>
                                    <textarea name="admin_note" rows="2" required class="w-full bg-surface-container-high border-none rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-secondary mb-2"></textarea>
                                    <button type="submit" class="w-full bg-error text-on-error py-2 rounded-md text-xs font-bold">Reject</button>
                                </form>
                            </div>
                        </div>
                        @else
                            <span class="text-xs text-on-surface-variant">{{ $deposit->admin_note ?? '—' }}</span>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="px-6 py-12 text-center text-on-surface-variant text-sm">No deposit requests found.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-6">
        {{ $deposits->links() }}
    </div>
</div>
</x-layouts.admin>
