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

@section('content')
    <livewire:frontend::carousel.splide-carousel slideName="splide-banner" index='1' />

    <div class="container xl:pt-10">
        <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 xl: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="flex flex-wrap -mx-2 xs:-mx-3">
                    @for ($example = 1; $example < 6; $example++)
                        @for ($i = 1; $i < ($example == 5 ? 5 : 6); $i++)
                            <div class="w-full xtn:w-1/2 md:w-1/3 xl:w-1/4">
                                <div class="p-3">
                                    <div class="product-card">
                                        <a href="product-detail">
                                            <div class="img-wrapper">
                                                <img src="{{ Module::asset('frontend:img/pd'.$i.'.jpg') }}" alt="Recommended Product">
                                            </div>
                                        </a>
                                        <div class="product-card-detail">
                                            <a href="product-detail">
                                                <div class="mb-5">
                                                    <p>Product Name</p>
                                                </div>
                                                <div class="mb-5">
                                                    <p class="leading-5">1,800 THB</p>
                                                    <p class="leading-5 font-light text-12 opacity-60 line-through">1,800 THB</p>
                                                </div>
                                            </a>
                                            <button class="button-gradient">ADD TO CART</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endfor
                    @endfor
                </div>
                <div class="flex justify-center mt-8">
                    <button class="button-primary">
                        <div>Load More</div>
                        <img  class="w-[.75rem]" src="{{ Module::asset('frontend:img/arrow.svg') }}" alt="Game Name">
                    </button>
                </div>
            </div>
        </div>

    </div>
@endsection