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

<div>
    <x-ui.page-header
        title="Shops"
        :subtitle="number_format($counts['all']).' accounts · '.number_format($counts['active']).' active · '.number_format($counts['trial']).' on trial'"
    />

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

        <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="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>

        <select wire:model.live="expiring" class="field-input w-auto py-1.5 text-xs">
            <option value="">Any end date</option>
            <option value="7">Ending within 7 days</option>
            <option value="14">Ending within 14 days</option>
            <option value="30">Ending within 30 days</option>
        </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="building"
                title="No shops match"
                message="Shops appear here the moment somebody signs up inside one of the products."
            />
        @else
            <x-ui.table>
                <x-slot:head>
                    <tr>
                        <x-ui.th sortable="{{ $sortField }}" field="business_name" :direction="$sortDirection">Shop</x-ui.th>
                        <th>Owner</th>
                        <th>Product</th>
                        <th>Plan</th>
                        <x-ui.th sortable="{{ $sortField }}" field="status" :direction="$sortDirection">Status</x-ui.th>
                        <th>Term ends</th>
                        <x-ui.th sortable="{{ $sortField }}" field="last_activity_at" :direction="$sortDirection">Last seen</x-ui.th>
                        <th></th>
                    </tr>
                </x-slot:head>

                @foreach ($rows as $tenant)
                    @php $subscription = $tenant->latestSubscription; @endphp

                    <tr>
                        <td>
                            <a href="{{ route('tenants.show', $tenant) }}" wire:navigate
                               class="font-medium text-brand hover:underline">
                                {{ $tenant->business_name }}
                            </a>
                            <p class="text-xs text-slate-500">{{ $tenant->city ?: $tenant->country }}</p>
                        </td>

                        <td class="text-xs">
                            {{ $tenant->owner_name }}
                            <p class="tabular text-slate-500">{{ $tenant->owner_phone ?: $tenant->owner_email }}</p>
                        </td>

                        <td class="text-xs">{{ $tenant->product?->name ?? '—' }}</td>

                        <td class="text-xs">
                            {{ $subscription?->plan?->name ?? '—' }}
                            @if ($subscription?->is_trial)
                                <x-ui.badge color="blue">Trial</x-ui.badge>
                            @endif
                        </td>

                        <td>
                            <x-ui.badge :color="$tenant->status->color()">{{ $tenant->status->label() }}</x-ui.badge>
                        </td>

                        <td class="text-xs">
                            @if ($subscription?->ends_at)
                                {{ $fmt->date($subscription->ends_at) }}
                                <p @class([
                                    'text-slate-500',
                                    'font-semibold text-red-600' => $subscription->daysRemaining() <= 3,
                                ])>
                                    {{ $subscription->daysRemaining() }} day(s) left
                                </p>
                            @else
                                —
                            @endif
                        </td>

                        <td class="text-xs text-slate-500">{{ $fmt->ago($tenant->last_activity_at) }}</td>

                        <td class="text-right">
                            <a href="{{ route('tenants.show', $tenant) }}" wire:navigate
                               class="rounded p-1.5 text-slate-400 hover:bg-slate-100 hover:text-brand dark:hover:bg-slate-800"
                               title="Open">
                                <x-ui.icon name="eye" class="h-4 w-4" />
                            </a>
                        </td>
                    </tr>
                @endforeach
            </x-ui.table>

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