@extends('layout.index')
@section('title', $search['search'])
@section('content')
    <section class="my-10 mb-40 lg:px-0 px-5">
        <div class="container mx-auto">
            <div class="grid gap-6 grid-cols-12">
                <div class="lg:block hidden col-span-2"></div>
                <div class="lg:col-span-9 col-span-12 grid grid-cols-2 lg:gap-0 gap-4">
                    <h4 class="text-2xl text-gray-900 lg:col-span-1 col-span-2"><span class="font-semibold">{{$search['search']}}</span> ile ilgili <span class="font-semibold">{{ $count }}</span> ürün bulduk</h4>
                    <div class="items-center justify-start lg:hidden flex">
                        <form action="" class="relative">
                            <button class="flex items-center justify-center px-4 py-2 text-sm border border-gray-200 rounded w-auto focus:border-primary-500 text-gray-600 overflow-hidden"
                                    data-role="filters-button">
                                <span>Filtrele</span>
                                <i class="far fa-chevron-down text-xs ml-1 mt-0.5"></i>
                            </button>
                        </form>
                    </div>
                    <div class="flex items-center justify-end">
                        <form action="" class="relative">
                            <label for="sorting" class="px-4 py-2 text-sm border border-gray-200 rounded w-auto flex items-center focus:border-primary-500 text-gray-600">
                                <span>Sıralama</span>
                                <i class="icon-chevron-down text-base -mt-1.5 ml-1"></i>
                            </label>
                            <select class="opacity-0 absolute top-0 left-0 w-full h-full" id="sorting">
                                <option value="1" {{ (isset($_GET['type']) && isset($_GET['sort'])) ? ($_GET['type'] == 'asc' && $_GET['sort'] == 'sort_fee' ? 'selected' : '') : '' }}>Artan Fiyat</option>
                                <option value="2" {{ (isset($_GET['type']) && isset($_GET['sort'])) ? ($_GET['type'] == 'desc' && $_GET['sort'] == 'sort_fee' ? 'selected' : '') : '' }}>Azalan Fiyat</option>
                                <option value="3" {{ (isset($_GET['type']) && isset($_GET['sort'])) ? ($_GET['type'] == 'desc' && $_GET['sort'] == 'updated_at' ? 'selected' : '') : '' }}>Yeni Eklenenler</option>
                            </select>
                        </form>
                    </div>
                </div>
                <div class="lg:block hidden col-span-2">
                    <div>
                        <div class="border border-1 border-gray-200 rounded-md p-4">
                            <h3 class="text-gray-700 text-sm font-bold mb-4 pl-1">Kategori</h3>
                            <div class="mt-4">
                                <nav class="products-nav">
                                    <ul class="flex flex-col gap-y-1">
                                        <li class="active">
                                            <a href="">Tüm Kategoriler</a>
                                        </li>
                                        @foreach(listArray(db('categories')->get()->all()) as $category)
                                            <li>
                                                <a href="">{{ $category['data']->name }}</a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                    @foreach($filters as $filter)
                        <div class="border border-1 border-gray-200 rounded-md p-4 mt-4">
                            <h3 class="text-gray-700 text-sm font-bold mb-4 pl-1"> {{ $filter->name }} </h3>
                            <div class="mt-4">
                                <nav class="products-nav">
                                    <ul class="flex flex-col gap-y-1">
                                        @foreach($filter->fields as $key => $field)
                                            <li>
                                                <label class="cursor-pointer flex items-center justify-start gap-1">
                                                    <input type="checkbox" data-role="filter-checkbox" data-filter="[{{ $filter->id }}, {{ $key }}]">
                                                    <a>{{ $field }}</a>
                                                </label>
                                            </li>
                                        @endforeach
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="lg:col-span-9 col-span-12 grid gap-4 lg:grid-cols-4 grid-cols-2" style="height: max-content">
                    @foreach($products as $product)
                            <div class="swiper-slide" data-filters="{{ $product->filters }}" data-role="product">
                                <div class="border border-gray-200 rounded-md p-4">
                                    <a class="rounded-md block" href="{{ site('product/' . $product->slug) }}">
                                        <img src="{{ upload('products', json_decode($product->images)[0]) }}" class="w-full" alt="">
                                    </a>
                                    <a href="{{ site('product/' . $product->slug) }}" class="block lg:text-sm text-xs font-bold mt-2.5 h-10"> {{ $product->name }} </a>
                                    <div class="flex justify-between items-center lg:mt-3 mt-1">
                                        @if($product->is_fee_show == 1)
                                            <span class="font-bold lg:text-sm text-xs text-black">
                                                @if($product->type == 'variant')