@extends('admin.layouts.app')

@section('title', 'All Transactions')

@section('content')
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-xl font-bold text-white tracking-tight">All Transactions</h1>
            <p class="text-xs text-slate-500 mt-1">Global transaction history across the platform.</p>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-[#101828] border border-white/5 rounded-xl p-4 mb-6">
        <form action="{{ route('admin.transactions.index') }}" method="GET" class="flex flex-wrap items-center gap-4">
            <div class="flex-1 min-w-[200px] relative">
                <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500"></i>
                <input type="text" name="search" value="{{ request('search') }}"
                    placeholder="Search by Payment ID or User name..."
                    class="w-full pl-10 pr-4 py-2 bg-white/5 border border-white/10 rounded-lg text-xs text-white focus:outline-none focus:border-yellow-500/50">
            </div>

            <select name="type"
                class="bg-white/5 border border-white/10 rounded-lg text-xs text-white px-4 py-2 focus:outline-none focus:border-yellow-500/50">
                <option value="">All Types</option>
                <option value="enrollment_fee" {{ request('type') == 'enrollment_fee' ? 'selected' : '' }}>Enrollment Fee
                </option>
                <option value="wallet_recharge" {{ request('type') == 'wallet_recharge' ? 'selected' : '' }}>Wallet Recharge
                </option>
            </select>

            <button type="submit"
                class="bg-yellow-500 hover:bg-yellow-400 text-slate-900 px-6 py-2 rounded-lg text-xs font-bold transition-all">
                Filter
            </button>

            @if(request()->anyFilled(['search', 'type']))
                <a href="{{ route('admin.transactions.index') }}"
                    class="text-xs text-slate-500 hover:text-white transition-colors">
                    Reset
                </a>
            @endif
        </form>
    </div>

    <div class="bg-[#101828] border border-white/5 rounded-xl overflow-hidden shadow-sm">
        <table class="w-full text-left">
            <thead>
                <tr class="bg-white/[0.02] border-b border-white/5">
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Date</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">User</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Type</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Amount</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Method</th>
                    <th class="px-6 py-3.5 text-[11px] uppercase font-semibold text-slate-400 tracking-wider">Status</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-white/5">
                @forelse($transactions as $trx)
                    <tr class="hover:bg-white/[0.01] transition-colors group">
                        <td class="px-6 py-4 text-[11px] text-slate-400">
                            {{ $trx->created_at->format('d M, Y h:i A') }}
                        </td>
                        <td class="px-6 py-4">
                            <p class="text-xs font-semibold text-white">{{ $trx->user->name ?? 'Deleted User' }}</p>
                            <p class="text-[10px] text-slate-500 font-mono">{{ $trx->payment_id }}</p>
                        </td>
                        <td class="px-6 py-4">
                            <span class="text-[10px] bg-white/5 px-2 py-1 rounded text-slate-300">
                                {{ str_replace('_', ' ', strtoupper($trx->type)) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-xs font-bold text-white">
                            ₹{{ number_format($trx->amount, 2) }}
                        </td>
                        <td class="px-6 py-4 text-[11px] text-slate-400 uppercase">
                            {{ $trx->gateway }}
                        </td>
                        <td class="px-6 py-4">
                            <span
                                class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase {{ $trx->status == 'success' ? 'bg-emerald-500/10 text-emerald-400' : 'bg-red-500/10 text-red-400' }}">
                                {{ $trx->status }}
                            </span>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-6 py-12 text-center text-slate-500">
                            No transactions found.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-6">
        {{ $transactions->links() }}
    </div>
@endsection