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

<div>
    <x-ui.page-header
        title="Products"
        subtitle="Each Thinkrax application sold through this panel."
    />

    <x-resource.toolbar placeholder="Product name or slug…" create-label="New product" :can-create="$this->canManage()" />

    <x-ui.card :padded="false">
        @if ($rows->isEmpty())
            <x-ui.empty
                icon="box"
                title="No products yet"
                message="Add one before creating plans. The slug must match the product application's THINKRAX_PRODUCT_SLUG."
            />
        @else
            <x-ui.table>
                <x-slot:head>
                    <tr>
                        <x-ui.th sortable="{{ $sortField }}" field="name" :direction="$sortDirection">Product</x-ui.th>
                        <th>Slug</th>
                        <th>App URL</th>
                        <th class="num">Plans</th>
                        <th class="num">Shops</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </x-slot:head>

                @foreach ($rows as $product)
                    <tr>
                        <td>
                            <div class="flex items-center gap-2">
                                <span class="h-3 w-3 shrink-0 rounded-full"
                                      style="background: {{ $product->accent_color ?: '#2563eb' }}"></span>
                                <div class="min-w-0">
                                    <p class="font-medium">{{ $product->name }}</p>
                                    <p class="truncate text-xs text-slate-500">{{ $product->tagline }}</p>
                                </div>
                            </div>
                        </td>

                        <td class="tabular text-xs">
                            {{ $product->slug }}

                            {{-- A slug with no config block cannot have its features listed when composing a plan. --}}
                            @if (! in_array($product->slug, $known, true))
                                <x-ui.badge color="amber">No config block</x-ui.badge>
                            @endif
                        </td>

                        <td class="text-xs">
                            @if ($product->app_url)
                                <a href="{{ $product->app_url }}" target="_blank" rel="noopener"
                                   class="text-brand hover:underline">{{ parse_url($product->app_url, PHP_URL_HOST) }}</a>
                            @else
                                —
                            @endif
                        </td>

                        <td class="num">{{ $product->plans_count }}</td>
                        <td class="num">{{ $product->tenants_count }}</td>

                        <td>
                            <x-ui.badge :color="$product->is_active ? 'green' : 'gray'">
                                {{ $product->is_active ? 'Active' : 'Inactive' }}
                            </x-ui.badge>
                        </td>

                        <td>
                            <x-resource.row-actions :id="$product->id"
                                                    :can-edit="$this->canManage()"
                                                    :can-delete="$this->canManage()" />
                        </td>
                    </tr>
                @endforeach
            </x-ui.table>

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

    {{-- ------------------------------------------------------------- form --}}
    <x-ui.modal show="showForm" :title="$editingId ? 'Edit product' : 'New product'" close-action="closeForm">
        <div class="grid gap-3 sm:grid-cols-2">
            <x-ui.input label="Name" wire:model="form.name" required :error="$errors->first('form.name')" />

            <x-ui.input
                label="Slug"
                wire:model="form.slug"
                :disabled="$this->slugIsLocked()"
                hint="Must equal the product app's THINKRAX_PRODUCT_SLUG. Leave blank to derive from the name."
                :error="$errors->first('form.slug')"
            />

            <div class="sm:col-span-2">
                <x-ui.input label="Tagline" wire:model="form.tagline" :error="$errors->first('form.tagline')" />
            </div>

            <div class="sm:col-span-2">
                <x-ui.textarea label="Description" wire:model="form.description" rows="3"
                               :error="$errors->first('form.description')" />
            </div>

            <x-ui.input label="App URL" type="url" wire:model="form.app_url"
                        hint="Where its tenants sign in." :error="$errors->first('form.app_url')" />

            <x-ui.input label="Accent colour" type="color" wire:model="form.accent_color" />

            <x-ui.input label="Sort order" type="number" wire:model="form.sort_order" />

            <div class="flex items-end">
                <x-ui.toggle wire:model="form.is_active" label="Active"
                             hint="Inactive products stay billable but are hidden from new plans." />
            </div>
        </div>

        @if ($this->slugIsLocked())
            <p class="mt-3 rounded-lg bg-amber-50 p-2.5 text-xs text-amber-800 dark:bg-amber-950 dark:text-amber-200">
                Shops already run on this product, so the slug is locked — changing it would break their
                subscription lookups.
            </p>
        @endif

        <x-slot:footer>
            <x-ui.button wire:click="closeForm">Cancel</x-ui.button>
            <x-ui.button variant="primary" wire:click="saveResource" loading="saveResource">Save product</x-ui.button>
        </x-slot:footer>
    </x-ui.modal>

    <x-resource.delete-confirm label="product" />
</div>