@extends('layouts.admin.app')

@section('title', __('pages/admin/prebuilt-pages.nav.products_grid'))

@section('content')
<x-layouts.admin.page-container
    :title="__('pages/admin/prebuilt-pages.products.title')"
    :subtitle="__('pages/admin/prebuilt-pages.products.subtitle')"
    :breadcrumbs="[
        ['label' => __('pages/admin/prebuilt-pages.section.prebuilt_pages')],
        ['label' => __('pages/admin/prebuilt-pages.section.ecommerce_platform')],
        ['label' => __('pages/admin/prebuilt-pages.nav.products')],
        ['label' => __('pages/admin/prebuilt-pages.nav.products_grid')],
    ]"
>
    <x-slot:actions>
        <div
            class="flex flex-wrap items-center gap-2"
            x-data="{
                search: '',
                status: '',
                applyFilters() {
                    const grid = document.querySelector('[data-products-grid]');
                    if (!grid) return;

                    grid.querySelectorAll('[data-product-card]').forEach((card) => {
                        const id = card.dataset.productId ?? '';
                        const productStatus = card.dataset.productStatus ?? '';
                        const text = card.textContent.toLowerCase();
                        const matchesSearch = !this.search
                            || id.includes(this.search)
                            || text.includes(this.search.toLowerCase());
                        const matchesStatus = !this.status || productStatus === this.status;

                        card.classList.toggle('hidden', !(matchesSearch && matchesStatus));
                    });

                    const visible = grid.querySelectorAll('[data-product-card]:not(.hidden)').length;
                    const emptyState = document.querySelector('[data-products-empty]');
                    emptyState?.classList.toggle('hidden', visible > 0);
                },
            }"
            x-init="$watch('search', () => applyFilters()); $watch('status', () => applyFilters())"
        >
            <div class="w-52 flex-shrink-0">
                <x-forms.input
                    type="text"
                    name="search"
                    x-model="search"
                    icon="heroicon-o-magnifying-glass"
                    :placeholder="__('pages/admin/prebuilt-pages.products.search_placeholder')"
                />
            </div>

            <div class="w-40 flex-shrink-0">
                <x-forms.select
                    name="status"
                    x-model="status"
                    :options="[
                        '' => __('pages/admin/prebuilt-pages.products.filters.all'),
                        'active' => __('pages/admin/prebuilt-pages.products.filters.active'),
                        'inactive' => __('pages/admin/prebuilt-pages.products.filters.inactive'),
                    ]"
                />
            </div>

            <x-buttons.primary type="button">
                <x-heroicon-o-plus class="h-4 w-4" />
                {{ __('pages/admin/prebuilt-pages.products.add_product') }}
            </x-buttons.primary>
        </div>
    </x-slot:actions>

    <div
        data-products-grid
        class="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"
    >
        @foreach($products as $product)
            <x-prebuilt-pages.product-card :product="$product" />
        @endforeach
    </div>

    <div data-products-empty class="hidden mt-8">
        <x-tables.empty-state :message="__('pages/admin/prebuilt-pages.products.empty')" />
    </div>
</x-layouts.admin.page-container>
@endsection