@php
    if(isset($category)){
    $title = "{$category->objectData->title} - لیست قیمت ".jdate()->format('%A, %d %B %Y');
    }elseif(isset($brand)){
    $title = $brand->objectData->title;
    }
@endphp
<x-main-layout
    title="{{ $title ?? 'دارومان | داروخانه دارومان' }}"
    canonical="{{$canonical??''}}"
>
    @if(isset($noIndex) && $noIndex)
        @push('styles')
            <meta name="robots" content="noindex">
        @endpush
    @endif
    @if(request()->has('s') || (request()->has('page') && request()->query('page') > 1))
        @push('styles')
            <meta name="robots" content="noindex">
        @endpush
    @endif
    <div class="">
        <div class="container mx-auto">
            <div class="p-4">
                @if(isset($category))
                    <x-general.breadcrumb
                        :breadcrumb="$breadcrumb">
                    </x-general.breadcrumb>
                @elseif(isset($brand))
                    <x-general.breadcrumb
                        :breadcrumb="[['name'=>$brand->objectData->title,'link'=>route('shop.brand.id',$brand->id)]]">
                    </x-general.breadcrumb>
                @elseif(request()->has('s'))
                    <x-general.breadcrumb
                        :breadcrumb="[['name'=>'جستجو برای `'.request('s').'` ','link'=>route('shop.search',['s'=>request('s')])]]">
                    </x-general.breadcrumb>
                @endif
            </div>
            <div class="grid grid-cols-4 gap-8 py-4"
                 x-data="{fil:true}"
                 x-cloak>

                @if(isDesktop())
                    <div class="block col-span-12 md:col-span-1 rounded-lg md:sticky top-4 h-fit relative">
                        <form class="divide-y divide-gray-200 rounded-lg" action="" id="filter">
                            <input type="hidden" name="s" value="{{request('s')}}">
                            <input type="hidden" name="sort_by" id="sort-by"
                                   value="{{request()->get('sort_by') ?? 'asc'}}">
                            <input type="hidden" name="order_by" id="order-by"
                                   value="{{request()->get('order_by') ?? 'price'}}">
                            <div class="p-4 bg-white w-full flex items-center
                                rounded-t-lg justify-between sticky z-50 top-0">

                                <h5 class="font-bold text-xs xl:text-sm text-black">فیلترها</h5>
                                <x-form.button type="submit">اعمال فیلتر</x-form.button>
                                @if(isset($category))
                                    <a href="{{route('shop.category.id',['id'=>$category->objectData->slug])}}"
                                       class="cursor-pointer"><p class="text-xs text-red-700">حذف فیلترها</p></a>
                                @elseif(request()->has('s'))
                                    <a href="{{route('shop.search',['s'=>request('s')])}}"
                                       class="cursor-pointer"><p class="text-xs text-red-700">حذف فیلترها</p></a>
                                @endif

                                @if(!isDesktop())
                                    <button type="button" @click="fil = !fil">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                             stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                  d="M12 4.5v15m7.5-7.5h-15"/>
                                        </svg>

                                    </button>
                                @endif

                            </div>


                            <div class="divide-y divide-gray-200" x-show="fil"
                                 x-transition:enter="transition ease-out duration-300"
                                 x-transition:enter-start="opacity-0 translate-y-0"
                                 x-transition:enter-end="opacity-100 translate-y-0"
                                 x-transition:leave="transition ease-in duration-300"
                                 x-transition:leave-start="opacity-100 translate-y-10"
                                 x-transition:leave-end="opacity-0 translate-y-0">
                                <div class="p-4 bg-white w-full flex justify-between items-center">
                                    <div class="flex items-center gap-2">
                                        <h5 class="font-semibold text-sm text-black">فقط کالاهای موجود</h5>
                                    </div>
                                    <div class="flex justify-center">
                                        <label for="toogleButton" class="flex items-center cursor-pointer">
                                            <!-- toggle -->
                                            <div class="relative">
                                                <input id="toogleButton" type="checkbox" class="hidden"
                                                       name="only_in_stock"
                                                    {{request()->has('only_in_stock') ? 'checked' : ''}}/>
                                                <!-- path -->
                                                <div
                                                    class="toggle-path bg-gray-200 w-9 h-5 rounded-full shadow-inner"
                                                ></div>
                                                <!-- crcle -->
                                                <div
                                                    class="toggle-circle absolute w-3.5 h-3.5 bg-white rounded-full shadow inset-y-0 left-0"
                                                ></div>
                                            </div>
                                        </label>

                                    </div>

                                    <style>

                                        .toggle-path {
                                            transition: background 0.3s ease-in-out;
                                        }

                                        .toggle-circle {
                                            top: 0.2rem;
                                            left: 0.25rem;
                                            transition: all 0.3s ease-in-out;
                                        }

                                        input:checked ~ .toggle-circle {
                                            transform: translateX(100%);
                                        }

                                        input:checked ~ .toggle-path {
                                            background-color: var(--sitePrimary);
                                        }
                                    </style>

                                </div>

                                @if(isset($brands) && $brands->count() > 0)
                                    <x-shop.filter-card x-cloak :title="'برند'" :open="0">
                                        <div class="flex rounded-lg items-center  px-1.5 py-1 border border-gray-400">
                                            <svg class="w-8 h-8 MuiSvgIcon-root MuiSvgIcon-fontSizeMedium muirtl-vubbuv"
                                                 focusable="false"
                                                 aria-hidden="true" viewBox="0 0 24 24" data-testid="SearchIcon">
                                                <path
                                                    d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
                                            </svg>
                                            <input type="text" oninput="filterBrands(this)"
                                                   class="w-full bg-transparent border-0 active focus:ring-0 focus-visible:border-0 py-0"
                                                   placeholder="جست و جو در بین برند ها...">
                                        </div>
                                        <div id="brlist">
                                            @foreach($brands as $brand)
                                                <div class="flex items-center gap-4">
                                                    <input type="checkbox" class="rounded" value="{{$brand->id}}"
                                                           name="brand[]"
                                                        {{request()->has('brand') ? in_array($brand->id, request()->query('brand')) ? 'checked' : '' : ''}}>
                                                    <label for="">{{$brand->objectData->title}}</label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </x-shop.filter-card>
                                @endif

                                <x-shop.filter-card :title="'قیمت'" :open="1">
                                    <div>
                                        <div class="slider" id="plpps">
                                            <div class="progress"></div>
                                        </div>
                                        <div class="range-input">
                                            <input type="range" class="range-min" min="{{$minPrice}}"
                                                   max="{{$maxPrice}}"
                                                   value="{{request('price')['min'] ?? $minPrice}}" step="100"
                                                   name="price[min]">
                                            <input type="range" class="range-max" min="{{$minPrice}}"
                                                   max="{{$maxPrice}}"
                                                   value="{{request('price')['max'] ?? $maxPrice}}" step="100"
                                                   name="price[max]">
                                        </div>
                                        <div class="price-input">
                                            <div class="field border-l-2">
                                                <span>از</span>
                                                <input type="text" class="input-min"
                                                       value="{{number_format(request('price')['min'] ?? $minPrice)}}"
                                                       disabled>
                                                <span>تومان</span>
                                            </div>
                                            <div class="field">
                                                <span>تا</span>
                                                <input type="text" class="input-max"
                                                       value="{{number_format(request('price')['max'] ?? $maxPrice)}}"
                                                       disabled>
                                                <span>تومان</span>
                                            </div>
                                        </div>
                                    </div>
                                </x-shop.filter-card>
                                @if(isset($categoryFilters))
                                    @foreach($categoryFilters as $f)
                                        @if(array_key_exists('items',$f) && count($f['items']) > 0)

                                            <x-shop.filter-card x-cloak :title="$f['title']"
                                                                :class="$loop->last ? 'rounded-b-lg' : ''"
                                                                :open="0" :chs="$f['checkes']">
                                                <div
                                                    x-data="{
                                            categoryFilter:{{json_encode($f)}},
                                            categoryFilterItems:{{json_encode($f['items'])}},
                                            newCategoryFilterItems:{{json_encode($f['items'])}},
                                            changeFilters(event){
                                                this.newCategoryFilterItems = [];
                                                for (al in this.categoryFilterItems) {
                                                    if(this.categoryFilterItems[al].title.includes(event.target.value)){
                                                        this.newCategoryFilterItems.push(this.categoryFilterItems[al]);
                                                    }
                                                }
                                            }
                                         }"
                                                >

                                                    <div
                                                        class="flex rounded-lg items-center  px-1.5 py-1 border border-gray-400">
                                                        <svg
                                                            class="w-8 h-8 MuiSvgIcon-root MuiSvgIcon-fontSizeMedium muirtl-vubbuv"
                                                            focusable="false"
                                                            aria-hidden="true" viewBox="0 0 24 24"
                                                            data-testid="SearchIcon">
                                                            <path
                                                                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
                                                        </svg>
                                                        <input
                                                            type="text" placeholder="جستوجو"
                                                            x-on:input="changeFilters($event)"
                                                            class="w-full bg-transparent border-0 active focus:ring-0 focus-visible:border-0 py-0"
                                                        >
                                                    </div>
                                                    <div class="w-full max-h-64 overflow-y-auto">
                                                        <template
                                                            x-for="(items{{$loop->index}}, index) in newCategoryFilterItems"
                                                            :key="index">
                                                            <div class="flex gap-4 my-4 mx-4">
                                                                <label class="switch">
                                                                    <input type="checkbox"
                                                                           class="border border-gray-200 rounded h-4 w-4
                                                                    text-primary-color-500 focus:border-primary-color-500 focus:ring focus:ring-primary-color-500 focus:ring-opacity-50"
                                                                           @click="item = categoryFilterItems.find(x => x.id === items{{$loop->index}}.id); item.checked = !item.checked"
                                                                           x-bind:id="`att[${items{{$loop->index}}.id}][{{$loop->index}}]`"
                                                                           :value="items{{$loop->index}}.id"
                                                                           name="attribute[{{$f['id']}}][]">
                                                                    <span class="slider round"></span>
                                                                    <template
                                                                        x-if="items{{$loop->index}}.checked === true">
                                                                        <template
                                                                            x-init="document.getElementById(`att[${items{{$loop->index}}.id}][{{$loop->index}}]`).checked = true"></template>
                                                                    </template>
                                                                </label>
                                                                <span class="grid content-center"
                                                                      x-text="items{{$loop->index}}.title"></span>
                                                            </div>
                                                        </template>
                                                        <template x-if="newCategoryFilterItems.length === 0 ">
                                                            <span class="text-center block"> مقداری یافت نشد </span>
                                                        </template>
                                                    </div>
                                                </div>
                                            </x-shop.filter-card>

                                        @endif
                                    @endforeach
                                @endif


                            </div>
                        </form>
                    </div>
                @endif
                <div class="col-span-12 md:col-span-4 lg:col-span-3  gap-0 md:gap-4 bg-white
                    md:bg-inherit flex flex-col md:overflow-hidden">

                    <x-shop.sort :total=" $products->total()"/>
                    @if(isset($category))
                    <x-shop.categories :category="$category"/>
                    @endif
                    <x-shop.mobile-sort :total="$products->total()"/>

                    {{--                    @if(isset($category) && $category->objectData->content )--}}
                    {{--                        <div class="mx-auto max-w-full overflow-hidden my-4 bg-white rounded-xl wml-content p-4">--}}
                    {{--                            <h1 class="mb-2">--}}
                    {{--                                {{$category->objectData->title}}--}}
                    {{--                            </h1>--}}
                    {{--                            {!! $category->objectData->content !!}--}}

                    {{--                        </div>--}}
                    {{--                    @elseif(isset($brand) && $brand->objectData->content)--}}
                    {{--                        <div class="mx-auto max-w-full overflow-hidden my-4 bg-white rounded-xl wml-content p-4">--}}
                    {{--                            <h1 class="mb-2">--}}
                    {{--                                {{$brand->objectData->title}}--}}
                    {{--                            </h1>--}}
                    {{--                            {!! $brand->objectData->content !!}--}}

                    {{--                        </div>--}}
                    {{--                    @endif--}}

                    <div class="bg-white rounded-lg overflow-hidden ">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                            @if($products->count() > 0)
                                @foreach($products as $product)
                                    <div
                                        class="pb-6 flex flex-col overflow-hidden relative md:border-l border-b shadow hover:shadow-xl">
                                        @if (isDesktop())
                                            @if ($product->is_featured_sale)
                                                <span
                                                    class="w-16 h-10 left-0 top-4 py-2 rotate-[-35deg] absolute bg-red-500
                                                            rounded-full text-white text-xs font-semibold text-center">
                                                    فروش ویژه
                                                </span>
                                            @endif
                                            <div class="product-item-wrapper-inner">
                                                <div class="product-item-img">
                                                    <a href="{{ route('shop.product.id', $product->objectData->slug ?? $product->id) }}">
                                                        <img loading="lazy"
                                                             class="object-cover w-full"
                                                             src="{{ getImagePath($product->featuredMedia) }}"
                                                             alt="{{ $product->featuredMedia->alt ?? $product->objectData->title }}"/>
                                                    </a>
                                                </div>
                                                <a href="{{ route('shop.product.id', $product->objectData->slug ?? $product->id) }}">
                                                    <h3 class="block text-base font-light mt-4 text-gray-600 hover:text-gray-500 text-right h-12">
                                                        {{ $product->objectData->title ?? 'عنوان نامشخص' }}
                                                    </h3>
                                                </a>

                                                @if ($product->status === \App\Models\Shop\Product::STATUS_IN_STOCK && $product->quantity > 0)
                                                    <div class="flex flex-row gap-2 justify-end">
                                                        @if ($product->objectData->sale_price && $product->objectData->sale_price > 0)
                                                            <span
                                                                class="product-item-down-price text-left text-gray-400 font-bold block">
                                                                {{ number_format($product->objectData->price) . ' تومان ' }}
                                                            </span>
                                                            <span
                                                                class="bg-red-600 rounded-2xl text-white px-5 py-1 mr-2">
                                                                {{ number_format((float) (100 - (100 * $product->objectData->sale_price) / $product->objectData->price), 0) . '%' }}
                                                            </span>
                                                        @else

                                                        @endif
                                                    </div>

                                                    <div class="flex justify-between items-center">
                                                        @if(!$product->isVariable)
                                                            <livewire:general.add-to-cart-input :product="$product"></livewire:general.add-to-cart-input>
                                                        @endif
{{--                                                        <button type="submit" onclick="addToCart({{ $product->id }},1)"--}}
{{--                                                                class="product-item-add">--}}
{{--                                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none"--}}
{{--                                                                 viewBox="0 0 24 24" stroke-width="1.5"--}}
{{--                                                                 stroke="currentColor" class="w-6 h-6">--}}
{{--                                                                <path stroke-linecap="round" stroke-linejoin="round"--}}
{{--                                                                      d="M12 4.5v15m7.5-7.5h-15"/>--}}
{{--                                                            </svg>--}}
{{--                                                        </button>--}}
                                                        <span class="flex-grow"></span>
                                                        <span class="text-black text-left font-bold text-lg block">
                                                            @if ($product->objectData->sale_price && $product->objectData->sale_price > 0)
                                                                {{ number_format($product->objectData->sale_price) . ' تومان ' }}
                                                            @else
                                                                {{ number_format($product->objectData->price) . ' تومان ' }}
                                                            @endif
                                                        </span>
                                                    </div>
                                                @else
                                                    <div class="flex flex-row gap-2 justify-end">
                                                        <span class="text-white py-1">.</span>
                                                    </div>
                                                    <div>
                                                        @switch($product->status)
                                                            @case(\App\Models\Shop\Product::STATUS_OUT_OF_STOCK)
                                                                <span class="text-red-600 font-bold">ناموجود</span>
                                                                @break
                                                            @case(\App\Models\Shop\Product::STATUS_CALL)
                                                                <span class=" font-bold text-green-600">
                                                                    تماس بگیرید!
                                                                </span>
                                                                @break
                                                            @case(\App\Models\Shop\Product::STATUS_SOON)
                                                                <span class="text-blue-600 font-bold">
                                                                    بزودی...
                                                                </span>
                                                                @break
                                                            @case(\App\Models\Shop\Product::STATUS_EXPIRED)
                                                                <span class=" text-brown-600 font-bold">
                                                                    توقف تولید
                                                                </span>
                                                                @break
                                                            @default
                                                                <span
                                                                    class="dark:text-blue-dark text-blue-600 font-bold
                                                                    dark:text-white text-dark-gray">
                                                                    عدم موجودی در انبار
                                                                </span>
                                                                @break
                                                        @endswitch
                                                    </div>
                                                @endif
                                            </div>
                                        @else
                                            @if ($product->is_featured_sale)
                                                <span
                                                    class="w-16 h-10 right-0 top-4 py-2 rotate-[35deg] absolute bg-red-500
                                                            rounded-full text-white text-xs font-semibold text-center">
                                                    فروش ویژه
                                                </span>
                                            @endif
                                            <div class="product-item-wrapper-inner flex flex-row">
                                                <div class="product-item-img" style="width: 118px; height: 118px;">
                                                    <a href="{{ route('shop.product.id', $product->objectData->slug ?? $product->id) }}">
                                                        <img class="w-full object-cover" loading="lazy"
                                                             src="{{ getImagePath($product->featuredMedia) }}"
                                                             alt="{{ $product->featuredMedia->alt ?? $product->objectData->title }}"/>
                                                    </a>
                                                </div>

                                                <div class="w-full flex flex-col justify-between h-full">
                                                    <a href="{{ route('shop.product.id', $product->objectData->slug ?? $product->id) }}">
                                                        <h3 class="block text-base font-light mt-1 text-gray-600 hover:text-gray-500 text-right h-12">
                                                            {{ $product->objectData->title ?? 'عنوان نامشخص' }}
                                                        </h3>
                                                    </a>

                                                    @if ($product->status === \App\Models\Shop\Product::STATUS_IN_STOCK && $product->quantity > 0)
                                                        <div class="flex flex-row gap-2 justify-between">
                                                            @if ($product->objectData->sale_price && $product->objectData->sale_price > 0)
                                                                <span
                                                                    class="product-item-down-price text-left text-gray-400 font-bold block">
                                                                    {{ number_format($product->objectData->price) . ' تومان ' }}
                                                                </span>
                                                                <span
                                                                    class="bg-red-600 rounded-2xl text-white px-5 py-1 mr-2">
                                                                    {{ number_format((float) (100 - (100 * $product->objectData->sale_price) / $product->objectData->price), 0) . '%' }}
                                                                </span>
                                                            @else
                                                                <span class="text-white py-1">
                                                                    .
                                                                </span>
                                                            @endif
                                                        </div>

                                                        <div class="w-full flex flex-row-reverse justify-between items-center">
                                                            @if(!$product->isVariable)
                                                                <livewire:general.add-to-cart-input :product="$product"></livewire:general.add-to-cart-input>
                                                            @endif
{{--                                                            <button type="submit"--}}
{{--                                                                    onclick="addToCart({{ $product->id }},1)"--}}
{{--                                                                    class="product-item-add">--}}
{{--                                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none"--}}
{{--                                                                     viewBox="0 0 24 24" stroke-width="1.5"--}}
{{--                                                                     stroke="currentColor" class="w-6 h-6">--}}
{{--                                                                    <path stroke-linecap="round" stroke-linejoin="round"--}}
{{--                                                                          d="M12 4.5v15m7.5-7.5h-15"/>--}}
{{--                                                                </svg>--}}
{{--                                                            </button>--}}
                                                            <span class="flex-grow"></span>
                                                            <span class="text-black text-left font-bold text-lg block">
                                                                @if ($product->objectData->sale_price && $product->objectData->sale_price > 0)
                                                                    {{ number_format($product->objectData->sale_price) . ' تومان ' }}
                                                                @else
                                                                    {{ number_format($product->objectData->price) . ' تومان ' }}
                                                                @endif
                                                            </span>
                                                        </div>
                                                    @else
                                                        <div class="flex flex-row gap-2 justify-end">
                                                            <span class="text-white py-1">.</span>
                                                        </div>
                                                        <div>
                                                            @switch($product->status)
                                                                @case(\App\Models\Shop\Product::STATUS_OUT_OF_STOCK)
                                                                    <span class="text-red-600 font-bold">ناموجود</span>
                                                                    @break
                                                                @case(\App\Models\Shop\Product::STATUS_CALL)
                                                                    <span class=" font-bold text-green-600">
                                                                        تماس بگیرید!
                                                                    </span>
                                                                    @break
                                                                @case(\App\Models\Shop\Product::STATUS_SOON)
                                                                    <span class="text-blue-600 font-bold">
                                                                        بزودی...
                                                                    </span>
                                                                    @break
                                                                @case(\App\Models\Shop\Product::STATUS_EXPIRED)
                                                                    <span class=" text-brown-600 font-bold">
                                                                        توقف تولید
                                                                    </span>
                                                                    @break
                                                                @default
                                                                    <span class="dark:text-blue-dark text-blue-600
                                                                        font-bold dark:text-white text-dark-gray">
                                                                        عدم موجودی در انبار
                                                                    </span>
                                                                    @break
                                                            @endswitch
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        @endif

                                    </div>
                                @endforeach
                            @else
                                <p class="px-4 py-16 text-center text-2xl col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4">
                                    هیچ محصولی یافت نشد
                                </p>
                            @endif
                        </div>
                        {{$products->links('components.general.pagination')}}
                    </div>

                    @if(isset($category))
                        <div class="mt-4 p-4 border border-gray-300 rounded-lg bg-white wml-content">
                            {!! $category->objectData->content ??'' !!}
                        </div>
                    @endif

                    @if(isset($faqs) && $faqs->count() > 0)
                        <div class="">
                            <h2 class="mb-14 font-heading font-semibold text-center text-2xl">
                                سوالات متداول
                            </h2>
                            <div class="max-w-2xl mx-auto p-0.5">
                                <div class="flex flex-wrap" x-data="{faq:0}">
                                    @foreach($faqs as $faq)
                                        <div class="w-full site-radius border border-solid dark:border-siteOrange
                                         border-gray-300 p-4 mb-4 dark:bg-siteGray-dark bg-white"
                                             @click="if (faq === {{$loop->index}}){faq = 100}else{faq = {{$loop->index}}}">
                                            <div class="flex flex-wrap items-center justify-start">
                                                <div class="w-auto p-2">
                                                    <i class="fa fa-minus-circle"
                                                       x-show="faq === {{$loop->index}}"></i>
                                                    <i class="fa fa-plus-circle"
                                                       x-show="faq !== {{$loop->index}}"></i>
                                                </div>
                                                <div class="w-auto p-2">
                                                    <p class="font-heading font-semibold text-lg">
                                                        {{$faq->objectData->title}}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="mt-3 text-base p-2" x-show="faq === {{$loop->index}}"
                                                 x-transition:enter="transition ease-out duration-300"
                                                 x-transition:enter-start="opacity-0 scale-0 transform -translate-y-2"
                                                 x-transition:enter-end="opacity-100 scale-100 transform translate-y-0"
                                                 x-transition:leave="transition ease-in duration-300"
                                                 x-transition:leave-start="opacity-100 scale-100 transform translate-y-0"
                                                 x-transition:leave-end="opacity-0 scale-0 transform -translate-y-3">
                                                {!! strip_tags($faq->objectData->content) !!}
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <script type="application/ld+json">
                            @json(faqSchema($faqs))
                        </script>
                    @endif
                </div>


            </div>
        </div>
    </div>


    @if(isMobile())
        <!-- The Modal -->
        <div id="filterModal" class="modal">
            <!-- Modal content -->
            <div class="filterModal-content">
                <div class="modal-header-plp">
                    <span class="close">&times;</span>
                    <h2>Modal Header</h2>
                </div>
                <div class="modal-body">
                    <form class="divide-y divide-gray-200 rounded-lg" action="" id="filter">
                        <input type="hidden" name="s" value="{{request('s')}}">
                        <input type="hidden" name="sort_by" id="sort-by"
                               value="{{request()->get('sort_by') ?? 'asc'}}">
                        <input type="hidden" name="order_by" id="order-by"
                               value="{{request()->get('order_by') ?? 'price'}}">
                        <div class=" p-4 bg-white w-full flex items-center
                            justify-between sticky z-50 top-0">

                            <h5 class="font-bold text-sm text-black">فیلترها</h5>
                            <x-form.button type="submit">اعمال فیلتر</x-form.button>
                            @if(isset($category))
                                <a href="{{route('shop.category.id',['id'=>$category->objectData->slug])}}"
                                   class="cursor-pointer"><p class="text-xs text-red-700">حذف فیلترها</p></a>
                            @elseif(request()->has('s'))
                                <a href="{{route('shop.search',['s'=>request('s')])}}"
                                   class="cursor-pointer"><p class="text-xs text-red-700">حذف فیلترها</p></a>
                            @endif

                        </div>


                        <div class="divide-y divide-gray-200"
                             x-transition:enter="transition ease-out duration-300"
                             x-transition:enter-start="opacity-0 translate-y-0"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             x-transition:leave="transition ease-in duration-300"
                             x-transition:leave-start="opacity-100 translate-y-10"
                             x-transition:leave-end="opacity-0 translate-y-0">
                            <div class="p-4 bg-white w-full flex justify-between items-center">
                                <div class="flex items-center gap-2">
                                    <h5 class="font-semibold text-sm text-black">فقط کالاهای موجود</h5>
                                </div>
                                <div class="flex justify-center">
                                    <label for="toogleButton" class="flex items-center cursor-pointer">
                                        <!-- toggle -->
                                        <div class="relative">
                                            <input id="toogleButton" type="checkbox" class="hidden" name="only_in_stock"
                                                {{request()->has('only_in_stock') ? 'checked' : ''}}/>
                                            <!-- path -->
                                            <div
                                                class="toggle-path bg-gray-200 w-9 h-5 rounded-full shadow-inner"
                                            ></div>
                                            <!-- crcle -->
                                            <div
                                                class="toggle-circle absolute w-3.5 h-3.5 bg-white rounded-full shadow inset-y-0 left-0"
                                            ></div>
                                        </div>
                                    </label>

                                </div>

                                <style>

                                    .toggle-path {
                                        transition: background 0.3s ease-in-out;
                                    }

                                    .toggle-circle {
                                        top: 0.2rem;
                                        left: 0.25rem;
                                        transition: all 0.3s ease-in-out;
                                    }

                                    input:checked ~ .toggle-circle {
                                        transform: translateX(100%);
                                    }

                                    input:checked ~ .toggle-path {
                                        background-color: var(--sitePrimary);
                                    }
                                </style>

                            </div>

                            @if(isset($brands) && $brands->count() > 0)
                                <x-shop.filter-card x-cloak :title="'برند'" :open="0">
                                    <div class="flex rounded-lg items-center  px-1.5 py-1 border border-gray-400">
                                        <svg class="w-8 h-8 MuiSvgIcon-root MuiSvgIcon-fontSizeMedium muirtl-vubbuv"
                                             focusable="false"
                                             aria-hidden="true" viewBox="0 0 24 24" data-testid="SearchIcon">
                                            <path
                                                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
                                        </svg>
                                        <input type="text" oninput="filterBrands(this)"
                                               class="w-full bg-transparent border-0 active focus:ring-0 focus-visible:border-0 py-0"
                                               placeholder="جست و جو در بین برند ها...">
                                    </div>
                                    <div id="brlist">
                                        @foreach($brands as $brand)
                                            <div class="flex items-center gap-4">
                                                <input type="checkbox" class="rounded" value="{{$brand->id}}"
                                                       name="brand[]"
                                                    {{request()->has('brand') ? in_array($brand->id, request()->query('brand')) ? 'checked' : '' : ''}}>
                                                <label for="">{{$brand->objectData->title}}</label>
                                            </div>
                                        @endforeach
                                    </div>
                                </x-shop.filter-card>
                            @endif

                            <x-shop.filter-card :title="'قیمت'" :open="1">
                                <div>
                                    <div class="slider" id="plpps">
                                        <div class="progress"></div>
                                    </div>
                                    <div class="range-input">
                                        <input type="range" class="range-min" min="{{$minPrice}}" max="{{$maxPrice}}"
                                               value="{{request('price')['min'] ?? $minPrice}}" step="100"
                                               name="price[min]">
                                        <input type="range" class="range-max" min="{{$minPrice}}" max="{{$maxPrice}}"
                                               value="{{request('price')['max'] ?? $maxPrice}}" step="100"
                                               name="price[max]">
                                    </div>
                                    <div class="price-input">
                                        <div class="field border-l-2">
                                            <span>از</span>
                                            <input type="text" class="input-min"
                                                   value="{{number_format(request('price')['min'] ?? $minPrice)}}"
                                                   disabled>
                                            <span>تومان</span>
                                        </div>
                                        <div class="field">
                                            <span>تا</span>
                                            <input type="text" class="input-max"
                                                   value="{{number_format(request('price')['max'] ?? $maxPrice)}}"
                                                   disabled>
                                            <span>تومان</span>
                                        </div>
                                    </div>
                                </div>
                            </x-shop.filter-card>
                            @if(isset($categoryFilters))
                                @foreach($categoryFilters as $f)
                                    @if(array_key_exists('items',$f) && count($f['items']) > 0)

                                        <x-shop.filter-card x-cloak :title="$f['title']"
                                                            :class="$loop->last ? 'rounded-b-lg' : ''"
                                                            :open="0" :chs="$f['checkes']">
                                            <div
                                                x-data="{
                                            categoryFilter:{{json_encode($f)}},
                                            categoryFilterItems:{{json_encode($f['items'])}},
                                            newCategoryFilterItems:{{json_encode($f['items'])}},
                                            changeFilters(event){
                                                this.newCategoryFilterItems = [];
                                                for (al in this.categoryFilterItems) {
                                                    if(this.categoryFilterItems[al].title.includes(event.target.value)){
                                                        this.newCategoryFilterItems.push(this.categoryFilterItems[al]);
                                                    }
                                                }
                                            }

                                         }"
                                            >

                                                <div
                                                    class="flex rounded-lg items-center  px-1.5 py-1 border border-gray-400">
                                                    <svg
                                                        class="w-8 h-8 MuiSvgIcon-root MuiSvgIcon-fontSizeMedium muirtl-vubbuv"
                                                        focusable="false"
                                                        aria-hidden="true" viewBox="0 0 24 24" data-testid="SearchIcon">
                                                        <path
                                                            d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
                                                    </svg>
                                                    <input
                                                        type="text" placeholder="جستوجو"
                                                        x-on:input="changeFilters($event)"
                                                        class="w-full bg-transparent border-0 active focus:ring-0 focus-visible:border-0 py-0"
                                                    >
                                                </div>
                                                <div class="w-full max-h-64 overflow-y-auto">
                                                    <template
                                                        x-for="(items{{$loop->index}}, index) in newCategoryFilterItems"
                                                        :key="index">
                                                        <div class="flex gap-4 my-4 mx-4">
                                                            <label class="switch">
                                                                <input type="checkbox"
                                                                       class="border border-gray-200 rounded h-4 w-4
                                                                    text-primary-color-500 focus:border-primary-color-500 focus:ring focus:ring-primary-color-500 focus:ring-opacity-50"
                                                                       @click="item = categoryFilterItems.find(x => x.id === items{{$loop->index}}.id); item.checked = !item.checked"
                                                                       x-bind:id="`att[${items{{$loop->index}}.id}][{{$loop->index}}]`"
                                                                       :value="items{{$loop->index}}.id"
                                                                       name="attribute[{{$f['id']}}][]">
                                                                <span class="slider round"></span>
                                                                <template
                                                                    x-if="items{{$loop->index}}.checked === true">
                                                                    <template
                                                                        x-init="document.getElementById(`att[${items{{$loop->index}}.id}][{{$loop->index}}]`).checked = true"></template>
                                                                </template>
                                                            </label>
                                                            <span class="grid content-center"
                                                                  x-text="items{{$loop->index}}.title"></span>
                                                        </div>
                                                    </template>
                                                    <template x-if="newCategoryFilterItems.length === 0 ">
                                                        <span class="text-center block"> مقداری یافت نشد </span>
                                                    </template>
                                                </div>
                                            </div>
                                        </x-shop.filter-card>

                                    @endif
                                @endforeach
                            @endif


                        </div>
                    </form>


                </div>
                <div class="modal-footer-plp">
                    <hr>
                </div>
            </div>

        </div>
        @push('scripts')
            <script>
                // Get the modal
                var modal = document.getElementById("filterModal");

                // Get the button that opens the modal
                var btn = document.getElementById("filterBtn");

                // Get the <span> element that closes the modal
                var span = document.getElementsByClassName("close")[0];

                var body = document.getElementsByTagName('body')[0];

                // When the user clicks the button, open the modal
                btn.onclick = function () {
                    modal.style.display = "block";
                    body.style.overflow = "hidden";
                }

                // When the user clicks on <span> (x), close the modal
                span.onclick = function () {
                    modal.style.display = "none";
                    body.style.overflow = "auto";
                }

                // When the user clicks anywhere outside of the modal, close it
                window.onclick = function (event) {
                    if (event.target == modal) {
                        modal.style.display = "none";
                        body.style.overflow = "auto";
                    }
                }
            </script>
            <script>
                // Get the modal
                var modal2 = document.getElementById("sortModal");

                // Get the button that opens the modal
                var btn = document.getElementById("sortBtn");

                // Get the <span> element that closes the modal
                var section = document.getElementsByClassName("close2")[0];

                var body = document.getElementsByTagName('body')[0];

                // When the user clicks the button, open the modal
                btn.onclick = function () {
                    modal2.style.display = "block";
                    body.style.overflow = "hidden";
                }

                // When the user clicks on <span> (x), close the modal
                section.onclick = function () {
                    modal2.style.display = "none";
                    body.style.overflow = "auto";
                }

                // When the user clicks anywhere outside of the modal, close it
                window.onclick = function (event) {
                    if (event.target == modal2) {
                        modal2.style.display = "none";
                        body.style.overflow = "auto";
                    }
                }
            </script>
        @endpush
    @endif



    @push('scripts')
        <script>
            const rangeInput = document.querySelectorAll(".range-input input"),
                priceInput = document.querySelectorAll(".price-input input"),
                range = document.querySelector(".slider .progress");
            let priceGap = 56000;
            rangeInput.forEach(input => {
                input.addEventListener("input", e => {
                    let minVal = parseInt(rangeInput[0].value),
                        maxVal = parseInt(rangeInput[1].value);

                    if ((maxVal - minVal) < priceGap) {
                        if (e.target.className === "range-min") {
                            rangeInput[0].value = (maxVal - priceGap).toLocaleString();
                        } else {
                            rangeInput[1].value = minVal + priceGap;
                        }
                    } else {
                        priceInput[0].value = minVal.toLocaleString();
                        priceInput[1].value = maxVal.toLocaleString();
                        range.style.right = ((minVal / rangeInput[0].max) * 100) + "%";
                        range.style.left = 100 - (maxVal / rangeInput[1].max) * 100 + "%";
                    }
                });
            });
            let minVal = parseInt(rangeInput[0].value),
                maxVal = parseInt(rangeInput[1].value);
            range.style.right = ((minVal / rangeInput[0].max) * 100) + "%";
            range.style.left = 100 - (maxVal / rangeInput[1].max) * 100 + "%";

            function changeSort(sort, order) {
                document.getElementById("sort-by").value = sort;
                document.getElementById("order-by").value = order;
                document.getElementById("filter").submit();
            }

            function filterBrands(a) {
                let br = document.getElementById('brlist');
                let s = a.value;
                for (let i = 0; i < br.children.length; i++) {
                    let el = br.children[i];
                    console.log(s, [el.innerText, el]);
                    if (el.innerText.toLowerCase().includes(s)) {
                        el.style.display = '';
                    } else {
                        el.style.display = 'none';
                    }

                }
            }
        </script>
    @endpush
</x-main-layout>