@extends('layout.index')
@section('title', "Tüm Ürünler")
@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:col-span-12 col-span-12 grid grid-cols-2 lg:gap-0 gap-4 items-center">
                    <h4 class="text-xl text-gray-900 lg:col-span-1 col-span-2">Toplamda <span
                                class="font-semibold">{{ db('product')->get()->count() }}</span> ürün <span
                                class="font-semibold">{{ $pages }}</span> sayfa da listeleniyor</h4>
                    <div class="items-center justify-start lg:hidden flex">
                        <div 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="icon-chevron-down text-xs ml-1 -mt-0.5"></i>
                            </button>
                        </div>
                    </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-lg w-auto flex items-center focus:border-primary-500 text-gray-600 cursor-pointer">
                                <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 cursor-pointer" 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:col-span-12 col-span-12 grid gap-10 grid-cols-12" style="height: max-content">
                    @foreach($products as $product)
                        <div class="lg:col-span-3 col-span-6"
                             data-role="product"
                             data-filters="{{ implode(" ", json_decode($product->filters, true)) }}">
                            <a class="block p-4" href="{{ site('product/' . $product->slug) }}">
                                <a class="rounded-xl block overflow-hidden aspect-square"
                                   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-9"> {{ $product->name }} </a>
                                <div class="flex lg:items-center items-start lg:gap-2.5 gap-1 lg:flex-row flex-col">
                                    <div class="flex items-center gap-2.5">
                                        @if($product->is_fee_show == 1)
                                            <span class="font-bold lg:text-xl text-lg text-black">
                                                @if($product->type == 'variant')