@use('App\Core\Support\Money')
<x-layouts.admin title="Subscriptions">
    <form method="GET" class="mb-4 flex flex-wrap items-end gap-2" role="search">
        <label for="q" class="sr-only">Search</label>
        <input id="q" name="q" value="{{ $search }}" placeholder="Customer name or email" class="w-64 rounded-lg border border-slate-300 px-3 py-2 text-sm">
        <label for="status" class="sr-only">Status</label>
        <select id="status" name="status" class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm">
            <option value="">All statuses</option>
            @foreach ($statuses as $value)
                <option value="{{ $value }}" @selected($status === $value)>{{ str_replace('_', ' ', ucfirst($value)) }}</option>
            @endforeach
        </select>
        <label class="flex items-center gap-2 text-sm text-slate-600"><input type="checkbox" name="paid" value="1" class="rounded border-slate-300" @checked(request()->boolean('paid'))> Paid plans only</label>
        <x-ui.button variant="secondary">Filter</x-ui.button>
    </form>

    <div class="overflow-x-auto rounded-xl border border-slate-200 bg-white">
        <table class="min-w-full divide-y divide-slate-100 text-sm">
            <thead class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
                <tr>
                    <th scope="col" class="px-4 py-3">Customer</th>
                    <th scope="col" class="px-4 py-3">Plan</th>
                    <th scope="col" class="px-4 py-3">Price</th>
                    <th scope="col" class="px-4 py-3">Period (UTC)</th>
                    <th scope="col" class="px-4 py-3">Status</th>
                    <th scope="col" class="px-4 py-3"><span class="sr-only">Actions</span></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse ($subscriptions as $subscription)
                    <tr>
                        <td class="px-4 py-3">{{ $subscription->workspace->owner->email }}</td>
                        <td class="px-4 py-3">{{ $subscription->plan->name }} <span class="text-slate-400">v{{ $subscription->plan_version_snapshot }}</span></td>
                        <td class="px-4 py-3 tabular-nums">{{ $subscription->isPaid() ? Money::format($subscription->price_snapshot, $subscription->currency) : 'Free' }}</td>
                        <td class="whitespace-nowrap px-4 py-3 text-slate-500">{{ $subscription->starts_at?->format('Y-m-d') ?? '—' }} → {{ $subscription->ends_at?->format('Y-m-d') ?? 'open' }}</td>
                        <td class="px-4 py-3">
                            <x-ui.badge :color="match ($subscription->status) { 'active', 'trialing' => 'green', 'past_due' => 'amber', 'pending_payment' => 'blue', default => 'slate' }">{{ str_replace('_', ' ', ucfirst($subscription->status)) }}</x-ui.badge>
                            @if ($subscription->cancelled_at)
                                <x-ui.badge color="amber">Cancelled</x-ui.badge>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-right"><a href="{{ route('admin.subscriptions.show', $subscription->ulid) }}" class="font-medium text-rose-700 hover:underline">Open</a></td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="px-4 py-8 text-center text-slate-500">No subscriptions.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="mt-4">{{ $subscriptions->links() }}</div>
</x-layouts.admin>