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

<div>
    <x-ui.page-header
        title="Subscriptions"
        subtitle="Sorted by end date — whatever lapses first is at the top."
    />

    <div class="mb-4 flex flex-wrap items-center gap-2">
        <x-ui.search-bar placeholder="Shop or owner…" />

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

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

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

        <label class="flex items-center gap-1.5 text-xs text-slate-600 dark:text-slate-300">
            <input type="checkbox" wire:model.live="trialsOnly" class="rounded border-slate-300">
            Trials only
        </label>

        @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="sparkles" title="No subscriptions match" />
        @else
            <x-ui.table>
                <x-slot:head>
                    <tr>
                        <th>Shop</th>
                        <th>Product</th>
                        <th>Plan</th>
                        <th>Cycle</th>
                        <x-ui.th sortable="{{ $sortField }}" field="amount" :direction="$sortDirection" align="right">Amount</x-ui.th>
                        <th>Status</th>
                        <x-ui.th sortable="{{ $sortField }}" field="ends_at" :direction="$sortDirection">Ends</x-ui.th>
                        <th class="num">Days left</th>
                    </tr>
                </x-slot:head>

                @foreach ($rows as $row)
                    <tr>
                        <td>
                            <a href="{{ route('tenants.show', $row->tenant_id) }}" wire:navigate
                               class="font-medium text-brand hover:underline">
                                {{ $row->tenant?->business_name ?? '—' }}
                            </a>
                            <p class="text-xs text-slate-500">{{ $row->tenant?->owner_phone }}</p>
                        </td>
                        <td class="text-xs">{{ $row->tenant?->product?->name ?? '—' }}</td>
                        <td class="text-xs">
                            {{ $row->plan?->name ?? '—' }}
                            @if ($row->is_trial) <x-ui.badge color="blue">Trial</x-ui.badge> @endif
                        </td>
                        <td class="text-xs">{{ $row->billing_cycle->label() }}</td>
                        <td class="num">{{ $fmt->money($row->amount) }}</td>
                        <td><x-ui.badge :color="$row->effectiveStatus()->color()">{{ $row->effectiveStatus()->label() }}</x-ui.badge></td>
                        <td class="text-xs">{{ $fmt->date($row->ends_at) }}</td>
                        <td class="num">
                            @if ($row->ends_at)
                                <span @class(['font-semibold', 'text-red-600' => $row->daysRemaining() <= 3])>
                                    {{ $row->daysRemaining() }}
                                </span>
                            @else
                                —
                            @endif
                        </td>
                    </tr>
                @endforeach
            </x-ui.table>

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