@extends('frontend::layouts.master')

@section('content')
<section class="pt-16 pb-10 lg:pb-20 bg-[#F3F4F6]">
<div class="container">
        <div class="flex flex-wrap -mx-4">
            <div class="w-full px-4">
                <div class="text-center mx-auto mb-12 lg:mb-16 max-w-[510px]">
                    <h2 class="font-bold text-3xl sm:text-4xl md:text-[40px] text-dark mb-4 ">
                        Our Products
                    </h2>
                    <p class="text-base text-body-color">
                        There are many variations of passages of Lorem Ipsum available
                        but the majority have suffered alteration in some form.
                    </p>
                </div>
            </div>
        </div>
        {{-- <div class="relative flex xl:block pt-8 xl:pt-12 z-0">
            <div class="lg:hidden flex items-center px-2">
                <button class="sidebar-more-trigger flex items-center gap-2">
                    <img src="{{ Module::asset('frontend:img/more.svg') }}" alt="More" class="w-7">
                    <p class="text-13">เลือกหมวดหมู่</p> 
                </button>
            </div>
            <div class="ml-auto max-w-[200px] flex items-center xl:absolute xl:top-1/2 xl:-translate-y-1/2 right-0 z-[3]">
                <p class="text-13 hidden sm:block">
                    SORT BY : 
                </p>
                <div class="form-style line-style border-b border-white border-opacity-25">
                    <select name="sort" id="sort" class="co-form-basic border-0 text-12 md:text-14">
                        <option class="text-black" value="0">Lastest</option>
                        <option class="text-black" value="1">Low Price</option>
                        <option class="text-black" value="2">High Price</option>
                    </select>
                </div>
            </div>
        </div> --}}

        <div class="flex flex-wrap items-start -mx-2 xs:-mx-4 -mt-2 xs:-mt-4">
            {{-- <div class="w-full xtn:w-1/2 md:w-1/3 lg:w-1/4 lg:p-4 sticky top-8 z-[1]">
                <nav class="sidebar-nav-wrapper">
                    <button class="sidebar-nav-close">
                        <img src="{{ Module::asset('frontend:img/close-l.svg') }}" alt="More" class="lg:hidden w-7">
                    </button>
                    <div class="mt-4 xl:-mt-8 px-4 xl:px-2 mb-2">
                    <h4 class="font-semibold">หมวดหมู่สินค้า</h4>
                    </div>
                    <x-frontend::display.accordion name='genres' class='px-4 xl:px-0'>
                        <x-slot:accordionButton>
                            <div class="border-b p-2 text-left">
                                <div class="flex items-center justify-between">
                                    <p>
                                        Genres
                                    </p>
                                    <svg :class="genres === true ? 'rotate-180' : ''" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather transition-all duration-200 ease-in-out feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
                                </div>
                            </div>
                        </x-slot>
                        <x-slot:accordionContent>
                            <div class="my-2 pl-4 pr-2 -mx-1">
                                <div class="p-1">
                                    <x-frontend::form.checkbox id='sandbox' name='genres' title='Sandbox' class=''></x-frontend>
                                </div>
                                <div class="p-1">
                                    <x-frontend::form.checkbox id='rts' name='genres' title='Real-time strategy' class=''></x-frontend>
                                </div>
                                <div class="p-1">
                                    <x-frontend::form.checkbox id='fps' name='genres' title='FPS & TPS' class=''></x-frontend>
                                </div>
                                <div class="p-1">
                                    <x-frontend::form.checkbox id='moba' name='genres' title='MOBA' class=''></x-frontend>
                                </div>
                                <div class="p-1">
                                    <x-frontend::form.checkbox id='role' name='genres' title='Role-playing' class=''></x-frontend>
                                </div>
                                <div class="p-1">
                                    <x-frontend::form.checkbox id='sim' name='genres' title='Simulation and sports' class=''></x-frontend>
                                </div>
                                <div class="p-1">
                                    <x-frontend::form.checkbox id='puzz' name='genres' title='Puzzlers' class=''></x-frontend>
                                </div>
                                <div class="p-1">
                                    <x-frontend::form.checkbox id='act' name='genres' title='Action-adventure' class=''></x-frontend>
                                </div>
                                <div class="p-1">
                                    <x-frontend::form.checkbox id='surv' name='genres' title='Survival and horror' class=''></x-frontend>
                                </div>
                                <div class="p-1">
                                    <x-frontend::form.checkbox id='plat' name='genres' title='Platformer' class=''></x-frontend>
                                </div>
                            </div>
                        </x-slot>
                    </x-frontend>
                    <x-frontend::display.accordion name='platform' class='px-4 xl:px-0'>
                        <x-slot:accordionButton>
                            <div class="border-b p-2 text-left">
                                <div class="flex items-center justify-between">
                                    <p>
                                        Platform
                                    </p>
                                    <svg :class="platform === true ? 'rotate-180' : ''" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather transition-all duration-200 ease-in-out feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
                                </div>
                            </div>
                        </x-slot>
                        <x-slot:accordionContent>
                            <div class="my-2 pl-4 pr-2 -mx-1">
                                <div class="p-1">
                                    <x-frontend::form.checkbox id='pc' name='platform' title='PC' class=''></x-frontend>
                                </div>
                                <div class="p-1">
                                    <x-frontend::form.checkbox id='mobile' name='platform' title='Mobile' class=''></x-frontend>
                                </div>
                                <div class="p-1">
                                    <x-frontend::form.checkbox id='ninsw' name='platform' title='Nintendo Switch' class=''></x-frontend>
                                </div>
                                <div class="p-1">
                                    <x-frontend::form.checkbox id='ps' name='platform' title='PS4, PS5' class=''></x-frontend>
                                </div>
                                <div class="p-1">
                                    <x-frontend::form.checkbox id='xbox' name='platform' title='XBOX' class=''></x-frontend>
                                </div>
                                <div class="p-1">
                                    <x-frontend::form.checkbox id='nin3ds' name='platform' title='Nintendo 3Ds' class=''></x-frontend>
                                </div>
                            </div>
                        </x-slot>
                    </x-frontend>
                </nav>
                <div class="sidebar-nav-backdrop"></div>
            </div>
            <div class="w-full lg:w-3/4 px-2 xs:px-4 xl:py-4 relative z-0"> --}}
            <div class="w-full relative z-0">
                <div class="flex flex-wrap -mx-2 xs:-mx-3">
                    @for ($example = 1; $example < 3; $example++)
                        @for ($i = 1; $i < ($example == 5 ? 7 : 7); $i++)
                            <div class="w-full xtn:w-1/2 md:w-1/3 xl:w-1/4">
                                <div class="p-3">
                                    <div class="game-card">
                                        <a href="product-detail">
                                            <div class="img-wrapper">
                                                <img src="{{ Module::asset('frontend:img/pd'. $i . '.jpg') }}" alt="">
                                            </div>
                                            <p>Product Name</p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endfor
                    @endfor
                </div>
            </div>
            <ol class="flex justify-center gap-1 font-medium mx-auto mt-8 xl:mt-16">
                <li>
                    <a href="#"
                        class="px-2.5 py-3.5 inline-flex size-16 items-center justify-center rounded border border-gray-300 bg-white text-gray-900 rtl:rotate-180">
                        <span class="sr-only">Prev Page</span>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd"
                                d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                                clip-rule="evenodd" />
                        </svg>
                    </a>
                </li>
    
                <li>
                    <a href="#"
                        class="px-4 py-1 block size-16 rounded border border-gray-300 bg-white text-center leading-8 text-gray-900">
                        1
                    </a>
                </li>
    
                <li class="px-4 py-1 block size-16 rounded border-primary bg-primary text-center leading-8 text-white">
                    2
                </li>
    
                <li>
                    <a href="#"
                        class="px-4 py-1 block size-16 rounded border border-gray-300 bg-white text-center leading-8 text-gray-900">
                        3
                    </a>
                </li>
    
                <li>
                    <a href="#"
                        class="px-4 py-1 block size-16 rounded border border-gray-300 bg-white text-center leading-8 text-gray-900">
                        4
                    </a>
                </li>
    
                <li>
                    <a href="#"
                        class="px-2.5 py-3.5 inline-flex size-16 items-center justify-center rounded border border-gray-300 bg-white text-gray-900 rtl:rotate-180">
                        <span class="sr-only">Next Page</span>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd"
                                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                clip-rule="evenodd" />
                        </svg>
                    </a>
                </li>
            </ol>
        </div>

    </div>
    </section>
@endsection