<x-layouts.admin title="Products">
    <x-admin.page-header title="Products" subtitle="{{ $products->total() }} total">
        <x-slot:actions>
            <a href="{{ route('admin.products.create') }}">
                <x-admin.button variant="accent"><i class="fa-solid fa-plus text-xs"></i> New Product</x-admin.button>
            </a>
        </x-slot:actions>
    </x-admin.page-header>

    <form method="GET" class="mb-4 flex flex-wrap gap-3">
        <div class="relative max-w-xs flex-1">
            <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-xs text-ink/30"></i>
            <x-admin.input type="search" name="search" value="{{ request('search') }}" placeholder="Search name, SKU…" class="pl-9" />
        </div>
        <x-admin.select name="category" class="max-w-[180px]" onchange="this.form.submit()">
            <option value="">All Categories</option>
            @foreach ($categories as $category)
                <option value="{{ $category->id }}" @selected(request('category') == $category->id)>{{ $category->name }}</option>
            @endforeach
        </x-admin.select>
        <x-admin.select name="status" class="max-w-[160px]" onchange="this.form.submit()">
            <option value="">All Statuses</option>
            <option value="draft" @selected(request('status') === 'draft')>Draft</option>
            <option value="active" @selected(request('status') === 'active')>Active</option>
            <option value="inactive" @selected(request('status') === 'inactive')>Inactive</option>
        </x-admin.select>
        <x-admin.button variant="ghost">Filter</x-admin.button>
    </form>

    <x-admin.card :padded="false">
        @if ($products->isEmpty())
            <x-admin.empty-state icon="fa-solid fa-shirt" title="No products yet" subtitle="Create your first product to start building the catalog.">
                <x-slot:action>
                    <a href="{{ route('admin.products.create') }}">
                        <x-admin.button variant="accent">Create your first product</x-admin.button>
                    </a>
                </x-slot:action>
            </x-admin.empty-state>
        @else
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Category</th>
                            <th>Price</th>
                            <th>Variants</th>
                            <th>Status</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($products as $product)
                            <tr>
                                <td>
                                    <div class="flex items-center gap-3">
                                        <div class="h-10 w-10 shrink-0 overflow-hidden rounded-lg bg-black/5">
                                            @if ($product->primaryImage)
                                                <img src="{{ Storage::url($product->primaryImage->image_path) }}" alt="" class="h-full w-full object-cover">
                                            @endif
                                        </div>
                                        <div class="min-w-0">
                                            <p class="truncate font-medium text-ink">{{ $product->name }}</p>
                                            <p class="text-xs text-ink/40">{{ $product->sku }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-ink/60">{{ $product->category?->name ?? '—' }}</td>
                                <td class="tabular-nums text-ink/60">
                                    {{ config('niyarasa.currency.symbol') }} {{ number_format((float) $product->current_price) }}
                                    @if ($product->is_on_sale)
                                        <span class="ml-1 text-xs text-ink/35 line-through">{{ number_format((float) $product->original_price) }}</span>
                                    @endif
                                </td>
                                <td class="tabular-nums text-ink/60">{{ $product->variants_count }}</td>
                                <td>
                                    <x-admin.badge :color="match($product->status->value) { 'active' => 'green', 'draft' => 'amber', default => 'gray' }">
                                        {{ ucfirst($product->status->value) }}
                                    </x-admin.badge>
                                </td>
                                <td>
                                    <div class="flex items-center justify-end gap-3">
                                        <a href="{{ route('admin.products.edit', $product) }}" class="text-ink/50 hover:text-ink" title="Edit">
                                            <i class="fa-solid fa-pen"></i>
                                        </a>
                                        <x-admin.delete-form :action="route('admin.products.destroy', $product)" confirm-title="Delete '{{ $product->name }}'?" confirm-text="This removes its images and variants too." />
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="border-t border-black/5 px-5 py-4">
                {{ $products->links() }}
            </div>
        @endif
    </x-admin.card>
</x-layouts.admin>
