@php
    $presets = ['#124a61', '#f59e0b', '#10b981', '#0ea5e9', '#a855f7', '#ec4899', '#14b8a6', '#f43f5e', '#64748b', '#eab308'];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-5xl">

        <x-page-header :title="__('Product Categories')" :subtitle="__('Group products and services, and colour them for reports.')">
            <a href="{{ route('products.index') }}">
                <x-secondary-button type="button">
                    <x-icon name="arrow-right" class="-ms-1 me-1.5 h-4 w-4 rotate-180" />
                    {{ __('Back to Products') }}
                </x-secondary-button>
            </a>
            @if ($canManage)
                <x-button wire:click="create" type="button">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('New Category') }}
                </x-button>
            @endif
        </x-page-header>

        <x-card>
            <!-- Filters -->
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:p-5">
                <div class="relative flex-1 sm:max-w-md">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                        <x-icon name="magnifying-glass" class="h-5 w-5" />
                    </span>
                    <input
                        type="text"
                        wire:model.live.debounce.300ms="search"
                        placeholder="{{ __('Search categories...') }}"
                        class="block w-full rounded-xl border-slate-300 pl-10 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    />
                </div>
            </div>

            <!-- Table -->
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80">
                            <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Category') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Products') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Status') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse ($categories as $category)
                            <tr wire:key="cat-{{ $category->id }}" class="transition-colors hover:bg-slate-50/70">
                                <td class="px-3 lg:px-4 py-4">
                                    <div class="flex items-center gap-3">
                                        <span class="h-3 w-3 shrink-0 rounded-full ring-2 ring-white shadow" style="background: {{ $category->color }}"></span>
                                        <span class="text-sm font-semibold text-slate-900">{{ $category->name }}</span>
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $category->products_count }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                    <x-badge :color="$category->is_active ? 'emerald' : 'slate'">
                                        {{ $category->is_active ? __('Active') : __('Inactive') }}
                                    </x-badge>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                    <div class="flex items-center justify-end gap-3">
                                        @if ($canManage)
                                            <button wire:click="edit({{ $category->id }})" class="text-indigo-600 transition hover:text-indigo-700">{{ __('Edit') }}</button>
                                        @endif
                                        @if ($canDelete)
                                            <button
                                                wire:click="delete({{ $category->id }})"
                                                wire:confirm="{{ __('Delete this category? Products in it will become uncategorised.') }}"
                                                class="text-rose-600 transition hover:text-rose-700"
                                            >{{ __('Delete') }}</button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-3 lg:px-4 py-12">
                                    <x-empty-state
                                        icon="tag"
                                        :title="__('No categories found')"
                                        :message="__('Create a category to organise your products and services.')"
                                        class="border-0"
                                    >
                                        @if ($canManage)
                                            <x-button wire:click="create" type="button">
                                                <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                                {{ __('New Category') }}
                                            </x-button>
                                        @endif
                                    </x-empty-state>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if ($categories->hasPages())
                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $categories->links() }}
                </div>
            @endif
        </x-card>
    </div>

    <!-- Create / Edit Modal -->
    <x-dialog-modal wire:model.live="showModal" maxWidth="md">
        <x-slot name="title">
            {{ $editingId ? __('Edit Category') : __('New Category') }}
        </x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div>
                    <x-label for="name" value="{{ __('Name') }}" />
                    <x-input id="name" type="text" class="mt-1 block w-full" wire:model="name" />
                    <x-input-error for="name" class="mt-2" />
                </div>

                <div>
                    <x-label for="color" value="{{ __('Colour') }}" />
                    <div class="mt-1 flex items-center gap-3">
                        <input
                            type="color"
                            id="color"
                            wire:model.live="color"
                            class="h-11 w-16 shrink-0 cursor-pointer rounded-xl border border-slate-300 bg-white p-1 shadow-sm"
                        />
                        <input
                            type="text"
                            wire:model.live.debounce.400ms="color"
                            class="block w-32 rounded-xl border-slate-300 text-sm uppercase shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                        />
                    </div>
                    <div class="mt-3 flex flex-wrap gap-2">
                        @foreach ($presets as $preset)
                            <button
                                type="button"
                                wire:click="$set('color', '{{ $preset }}')"
                                class="h-7 w-7 rounded-full ring-2 ring-offset-2 transition {{ strtolower($color) === strtolower($preset) ? 'ring-slate-400' : 'ring-transparent hover:ring-slate-200' }}"
                                style="background: {{ $preset }}"
                                aria-label="{{ $preset }}"
                            ></button>
                        @endforeach
                    </div>
                    <x-input-error for="color" class="mt-2" />
                </div>

                <label class="inline-flex items-center gap-2">
                    <input type="checkbox" wire:model="is_active" class="rounded border-slate-300 text-indigo-600 shadow-sm focus:ring-indigo-500" />
                    <span class="text-sm text-slate-700">{{ __('Active') }}</span>
                </label>
                <x-input-error for="is_active" class="mt-2" />
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeModal" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-secondary-button>

            <x-button class="ms-3" wire:click="save" wire:loading.attr="disabled">
                {{ __('Save') }}
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>