@php $fmt = app(\App\Services\Formatter::class); @endphp

<div>
    <x-ui.page-header
        title="Payment history"
        :subtitle="$this->rangeLabel().' — search by transaction ID or sender to match a bank statement line.'"
    />

    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <x-ui.stat label="Claimed" :value="$fmt->money($summary['claimed'])" icon="exchange" />
        <x-ui.stat label="Verified" :value="$fmt->money($summary['verified'])" icon="check" color="green" />
        <x-ui.stat label="Still pending" :value="$fmt->money($summary['pending'])" icon="clock"
                   :color="$summary['pending'] > 0 ? 'amber' : 'slate'" />
        <x-ui.stat label="Rejected" :value="$fmt->money($summary['rejected'])" icon="x" color="red" />
    </div>

    <div class="my-4 flex flex-wrap items-end gap-2">
        <x-ui.search-bar placeholder="Reference, TID, sender, shop…" />

        <x-ui.date-range />

        <select wire:model.live="status" class="field-input w-auto py-1.5 text-xs">
            <option value="">All decisions</option>
            @foreach ($statuses as $value => $label)
                <option value="{{ $value }}">{{ $label }}</option>
            @endforeach
        </select>

        <select wire:model.live="gateway" class="field-input w-auto py-1.5 text-xs">
            <option value="">All methods</option>
            @foreach ($gateways as $value => $label)
                <option value="{{ $value }}">{{ $label }}</option>
            @endforeach
        </select>

        @if ($this->hasActiveFilters())
            <button type="button" wire:click="clearFilters" class="btn btn-ghost btn-sm">
                <x-ui.icon name="x" class="h-3.5 w-3.5" /> Clear
            </button>
        @endif
    </div>

    <x-ui.card :padded="false">
        @if ($rows->isEmpty())
            <x-ui.empty icon="exchange" title="No payments in this range" />
        @else
            <x-ui.table>
                <x-slot:head>
                    <tr>
                        <x-ui.th sortable="{{ $sortField }}" field="reference" :direction="$sortDirection">Reference</x-ui.th>
                        <th>Shop</th>
                        <th>Method</th>
                        <th>Into</th>
                        <th>Transaction ID</th>
                        <x-ui.th sortable="{{ $sortField }}" field="amount" :direction="$sortDirection" align="right">Amount</x-ui.th>
                        <th>Decision</th>
                        <x-ui.th sortable="{{ $sortField }}" field="created_at" :direction="$sortDirection">Submitted</x-ui.th>
                    </tr>
                </x-slot:head>

                @foreach ($rows as $payment)
                    <tr>
                        <td class="tabular text-xs">
                            @if (auth()->user()?->canVerifyPayments())
                                <a href="{{ route('payments.queue', ['selectedId' => $payment->id, 'status' => 'all']) }}"
                                   class="font-medium text-brand hover:underline">{{ $payment->reference }}</a>
                            @else
                                {{ $payment->reference }}
                            @endif
                        </td>
                        <td>
                            <a href="{{ route('tenants.show', $payment->tenant_id) }}" wire:navigate
                               class="text-brand hover:underline">{{ $payment->tenant?->business_name ?? '—' }}</a>
                        </td>
                        <td><x-ui.badge :color="$payment->gateway->color()">{{ $payment->gateway->label() }}</x-ui.badge></td>
                        <td class="text-xs">{{ $payment->account?->title ?? '—' }}</td>
                        <td class="tabular text-xs">{{ $payment->transaction_id ?: '—' }}</td>
                        <td class="num">{{ $fmt->money($payment->amount) }}</td>
                        <td>
                            <x-ui.badge :color="$payment->status->color()">{{ $payment->status->label() }}</x-ui.badge>
                            @if ($payment->reviewed_at)
                                <p class="text-[11px] text-slate-400">{{ $fmt->date($payment->reviewed_at) }}</p>
                            @endif
                        </td>
                        <td class="text-xs">{{ $fmt->dateTime($payment->created_at) }}</td>
                    </tr>
                @endforeach
            </x-ui.table>

            <x-resource.pagination :rows="$rows" />
        @endif
    </x-ui.card>
</div>