@extends('layouts.admin')

@section('title', 'Manage Transactions')
@section('page-title', 'Transactions')

@section('content')
<div class="space-y-6">
    <h1 class="text-2xl font-bold text-gray-900">Transactions</h1>

    <div class="rounded-xl bg-white shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100">
            <form method="GET" class="flex gap-3 flex-wrap">
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search ref, customer..." class="flex-1 min-w-[200px] rounded-lg border-gray-300 text-sm focus:border-green-950">
                <select name="status" class="rounded-lg border-gray-300 text-sm">
                    <option value="">All Status</option>
                    @foreach(['successful','pending','failed','refunded'] as $s)
                        <option value="{{ $s }}" {{ request('status') === $s ? 'selected' : '' }}>{{ ucfirst($s) }}</option>
                    @endforeach
                </select>
                <select name="type" class="rounded-lg border-gray-300 text-sm">
                    <option value="">All Types</option>
                    @foreach(['airtime','data','cable','electricity','exam_pin'] as $t)
                        <option value="{{ $t }}" {{ request('type') === $t ? 'selected' : '' }}>{{ ucfirst(str_replace('_',' ',$t)) }}</option>
                    @endforeach
                </select>
                <button type="submit" class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200">Filter</button>
            </form>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-100">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Reference</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">User</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Service</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Amount</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Fee</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                        <th class="px-4 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($transactions as $tx)
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 text-xs font-mono text-gray-900">{{ $tx->reference }}</td>
                        <td class="px-4 py-3 text-sm text-gray-900">{{ $tx->user->first_name }} {{ $tx->user->last_name }}</td>
                        <td class="px-4 py-3 text-sm text-gray-500">{{ $tx->service_name }}</td>
                        <td class="px-4 py-3 text-sm font-medium text-gray-900">₦{{ number_format($tx->total_amount, 2) }}</td>
                        <td class="px-4 py-3 text-sm text-gray-500">₦{{ number_format($tx->fee, 2) }}</td>
                        <td class="px-4 py-3">
                            @if($tx->status === 'successful')
                                <span class="inline-flex items-center rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700">OK</span>
                            @elseif($tx->status === 'failed')
                                <span class="inline-flex items-center rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700">Failed</span>
                            @elseif($tx->status === 'refunded')
                                <span class="inline-flex items-center rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700">Refunded</span>
                            @else
                                <span class="inline-flex items-center rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700">{{ ucfirst($tx->status) }}</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-500">{{ $tx->created_at->format('M d, Y H:i') }}</td>
                        <td class="px-4 py-3"><a href="{{ route('admin.transactions.show', $tx) }}" class="text-sm font-medium text-green-950 hover:text-green-700">View</a></td>
                    </tr>
                    @empty
                    <tr><td colspan="8" class="px-4 py-12 text-center text-sm text-gray-500">No transactions found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="px-6 py-4">{{ $transactions->links() }}</div>
    </div>
</div>
@endsection