@* @page "/productss"
@inject ProductAPIConsumer productService
@inject CategoryAPIConsumer categoryService


<div class="flex flex-col gap-5 ">
    <div class="hero h-1/3"
        style="background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);">
        <div class="hero-overlay bg-opacity-60"></div>
        <div class="hero-content text-white text-center py-20">
            <div class="max-w-md">
                <h1 class="mb-5 text-5xl font-bold ">@Loc["Hello_there"]</h1>
                <p class="mb-5">@Loc["Provident_cupiditate_voluptatem"]</p>
                <button class="btn btn-primary">@Loc["Get_Started"]</button>
            </div>
        </div>
    </div>


    <EditForm Model="productFilter" OnValidSubmit="() => OnSearchProduct(1)"
        class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-6">
        <!-- Search Bar -->
        <div class="flex items-center space-x-4">
            <InputText @bind-Value="productFilter.Name" type="text" placeholder="Search..."
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
            <button type="submit"
                class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">@Loc["Search"]</button>
        </div>

        <!-- Filters -->
        <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            <!-- Category Filter -->
            <div>
                <label class="block text-sm font-medium text-gray-700">@Loc["Category"]</label>
                <InputSelect @bind-Value="productFilter.CategoryId"
                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">@Loc["All_Categories"]</option>

                    @foreach (var item in categories.Where(x => x.IsBundle == false).ToList())
                    {
                        <option value="@item.Id">@(item.Translations?.FirstOrDefault()?.Info?.Name ?? string.Empty)</option>
                    }

                </InputSelect>
            </div>

            <!-- Sort By Filter -->
            <!-- Rating Filter -->
        </div>
    </EditForm>



    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 w-full h-full gap-5 p-5 md:p-12 lg:p-20">
        @foreach (var product in products)
        {
            <ProductComp4 Product="product" />
        }
    </div>

    <PaginationComp OnSearch="OnSearchProduct" PaginationModel="pagination"></PaginationComp>
</div>

@code {


    public Pagination pagination { get; set; } = new() { CurrentPage = 1, PageSize = 15 };

    public ProductFilter productFilter { get; set; } = new ProductFilter();


    List<ProductVM> products = new List<ProductVM>();

    List<CategoryVM> categories = new List<CategoryVM>();


    SortModel sortModel = new SortModel();




    protected async override Task OnInitializedAsync()
    {
        var categoryResult = await categoryService.FetchCategory(new CategoryFilter(), new Pagination
        {
            PageSize = 100,
            CurrentPage = 1
        });
        categories = categoryResult.Item1;

        await OnSearchProduct();
    }

    async Task OnSearchProduct(int pageNumber = 1)
    {
        pagination.CurrentPage = pageNumber;
        var result = await productService.FetchProduct(productFilter, pagination);
        products = result.Item1;
        pagination.ItemsCount = result.Item2;
    }

} *@