@extends('layouts.super-admin', ['title' => 'Payments - Booklio Super Admin', 'pageTitle' => 'Payments / Transactions', 'active' => 'payments'])

@section('content')
    <div class="space-y-5">
        <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            @foreach ($kpis as $kpi)
                @include('super-admin.partials.kpi', $kpi)
            @endforeach
        </div>

        <x-ui.card title="Payments / Transactions" description="Business, amount, payment method, transaction ID, status, and date.">
            <form method="GET" action="{{ route('super-admin.payments.index') }}" class="mb-4 grid gap-3 lg:grid-cols-[minmax(0,1fr)_180px_180px_auto_auto]">
                <x-form.input name="q" label="Search" value="{{ $filters['q'] ?? '' }}" placeholder="Business or transaction ID" />
                <x-form.select name="status" label="Status" value="{{ $filters['status'] ?? 'all' }}" :options="['all' => 'All statuses'] + $statuses" />
                <x-form.select name="method" label="Method" value="{{ $filters['method'] ?? 'all' }}" :options="['all' => 'All methods', 'stripe' => 'Stripe', 'paypal' => 'PayPal', 'bank_transfer' => 'Bank transfer', 'manual' => 'Manual']" />
                <div class="flex items-end">
                    <x-ui.button type="submit" class="w-full">Filter</x-ui.button>
                </div>
                <div class="flex items-end">
                    <x-ui.button href="{{ route('super-admin.payments.index') }}" variant="secondary" class="w-full">Reset</x-ui.button>
                </div>
            </form>

            <x-ui.table :headers="['Business', 'Amount', 'Payment method', 'Transaction ID', 'Status', 'Date', 'Actions']">
                @forelse ($payments as $payment)
                    @php
                        $statusValue = $payment->status instanceof \App\Enums\PaymentStatus ? $payment->status->value : $payment->status;
                        $statusLabel = $payment->status instanceof \App\Enums\PaymentStatus ? $payment->status->label() : \Illuminate\Support\Str::headline((string) $payment->status);
                        $statusVariant = match ($statusValue) {
                            'paid' => 'success',
                            'pending' => 'warning',
                            'failed', 'cancelled' => 'danger',
                            default => 'muted',
                        };
                    @endphp
                    <tr class="hover:bg-slate-50">
                        <td>
                            <div class="max-w-[220px]">
                                <p class="truncate font-extrabold">{{ $payment->business?->name ?? 'No business' }}</p>
                                <p class="truncate text-xs font-semibold text-booklio-muted">{{ $payment->plan?->name ?? 'No plan' }}</p>
                            </div>
                        </td>
                        <td class="font-extrabold">{{ strtoupper($payment->currency ?? 'USD') }} {{ number_format((float) $payment->amount, 2) }}</td>
                        <td class="font-semibold">{{ \Illuminate\Support\Str::headline($payment->payment_method ?? 'manual') }}</td>
                        <td><code class="rounded bg-slate-100 px-2 py-1 text-xs font-bold text-slate-700">{{ $payment->transaction_id ?? 'Pending' }}</code></td>
                        <td><x-ui.badge :variant="$statusVariant">{{ $statusLabel }}</x-ui.badge></td>
                        <td class="font-semibold">{{ ($payment->paid_at ?? $payment->created_at)?->format('M d, Y') ?? '-' }}</td>
                        <td><x-ui.button size="sm" variant="secondary" data-booklio-placeholder="Payment receipt download is a backend PDF/export placeholder.">Receipt</x-ui.button></td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center text-booklio-muted">No payments found for the selected filters.</td>
                    </tr>
                @endforelse
            </x-ui.table>

            <x-ui.pagination :paginator="$payments" class="mt-4" />
        </x-ui.card>
    </div>
@endsection