@props([
    'menu',
    'categorias',
])

<div class="bg-white pt-12 sm:pt-10">
    <div
        class="flex justify-center items-stretch w-full gap-x-6 pb-6 gap-y-3.5 md:max-lg:gap-x-3 max-md:flex-wrap max-md:px-[6%] max-md:pb-5">
{{--        <div class="ms-16 m-auto hidden lg:block">--}}
{{--            <x-search/>--}}
{{--        </div>--}}
        @php
            $current_setor = request()->get('setor') ?? 'para_casa';
            $q = request()->get('q');
        @endphp
{{--        <x-alternador x-data="{ativo: '{{ $current_setor }}'}">--}}
{{--            <x-alternador-botao--}}
{{--                nome="para_casa"--}}
{{--                @click=""--}}
{{--                :selecionado="$current_setor == 'para_casa'"--}}
{{--                :href="request()->getBaseUrl() . '?setor=para_casa' . ($q ? '&q=' . $q : '')">--}}
{{--                {{ __('messages._setores.para_casa') }}--}}
{{--            </x-alternador-botao>--}}
{{--            <x-alternador-botao--}}
{{--                nome="para_empresa"--}}
{{--                @click=""--}}
{{--                :selecionado="$current_setor == 'para_empresa'"--}}
{{--                :href="request()->getBaseUrl() . '?setor=para_empresa' . ($q ? '&q=' . $q : '')">--}}
{{--                {{ __('messages._setores.para_empresa') }}--}}
{{--            </x-alternador-botao>--}}
{{--            <x-alternador-botao--}}
{{--                nome="para_voce"--}}
{{--                @click=""--}}
{{--                :selecionado="$current_setor == 'para_voce'"--}}
{{--                :href="request()->getBaseUrl() . '?setor=para_voce' . ($q ? '&q=' . $q : '')">--}}
{{--                {{ __('messages._setores.para_voce') }}--}}
{{--            </x-alternador-botao>--}}
{{--        </x-alternador>--}}
        <x-search class="pl-16 w-full hidden md:block" />
        <div class="flex justify-center items-center gap-x-1 xl:gap-x-4 xl:pr-16">
            <div x-data="{menuOpen: false}" @click.outside="menuOpen = false"
                 class="hidden relative max-md:block group">
                <button
                    @click="menuOpen = !menuOpen"
                    class="flex font-extrabold font-main text-brand-brown text-base p-3 rounded-46xl bg-brand-yellow justify-center items-center gap-x-2">
                    <span>{{ __('messages._filtros.filtros') }}</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M10 18v-2h4v2zm-4-5v-2h12v2zM3 8V6h18v2z"/>
                    </svg>
                </button>
                <x-desktop.produtos.categorias x-transition="" x-show="menuOpen" x-cloak :categorias="$menu"
                                               class="absolute top-full left-0 -mt-3 z-20"/>
            </div>
            {{-- Select para o limite de itens da listagem --}}
            <div class="flex justify-center item-center">
                <div class="relative">
                    <select
                        x-data="{
                           selectedPageSize: '{{ request('page_size', 15) }}',
                           updateUrl() {
                               const url = new URL(window.location.href);
                               url.searchParams.set('page_size', this.selectedPageSize);
                               window.location.href = url.toString();
                           }
                        }"
                        x-model="selectedPageSize" x-on:change="updateUrl"
                        class="text-sm py-3 bg-transparent flex font-bold items-center justify-between relative rounded-46xl sm:text-xl text-brand-brown whitespace-nowrap w-fit hover:cursor-pointer border-[#e6e6e6] md:py-5 xl:pl-4">
                        <option value="15" :selected="selectedPageSize == '15'">15</option>
                        <option value="30" :selected="selectedPageSize == '30'">30</option>
                        <option value="60" :selected="selectedPageSize == '60'">60</option>
                    </select>
                    <svg class="absolute flex items-center right-0 mr-6 top-[calc(50%-3.16px)] z-[5]"
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 11.987 6.339" width="12">
                        <path d="M10.577 1.41 5.993 5.339 1.41 1.41" fill="none" stroke="#003ca5" stroke-linecap="round"
                              stroke-linejoin="round" stroke-width="2"/>
                    </svg>
                </div>
            </div>

            {{-- Select da ordem de apresentação --}}
            <div class="flex justify-center item-center">
                <div class="relative">
                    <select
                        x-data="{
                           selectedOrder: '{{ request('order', 'popular') }}',
                           updateUrl() {
                               const url = new URL(window.location.href);
                               url.searchParams.set('order', this.selectedOrder);
                               window.location.href = url.toString();
                           }
                        }"
                        x-model="selectedOrder" x-on:change="updateUrl"
                        class="text-sm py-3 bg-transparent flex font-bold items-center justify-between relative rounded-46xl sm:text-xl text-brand-brown whitespace-nowrap w-fit hover:cursor-pointer border-[#e6e6e6] md:py-5 xl:pl-4">
                        <option value="padrao"
                                :selected="selectedOrder !== 'popular' && selectedOrder !== 'az'">{{ __('messages._filtros.ordenar') }}</option>
                        <option value="padrao"
                                :selected="selectedOrder === 'padrao'">{{ __('messages._filtros.padrao') }}</option>
                        <option value="popular"
                                :selected="selectedOrder === 'popular'">{{ __('messages._filtros.popular') }}</option>
                        <option value="az" :selected="selectedOrder === 'az'">A-Z</option>
                    </select>
                    <svg class="absolute flex items-center right-0 mr-6 top-[calc(50%-3.16px)] z-[5]"
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 11.987 6.339" width="12">
                        <path d="M10.577 1.41 5.993 5.339 1.41 1.41" fill="none" stroke="#003ca5" stroke-linecap="round"
                              stroke-linejoin="round" stroke-width="2"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>
{{--    @if(!$categorias->isEmpty())--}}
{{--        @php--}}
{{--            $current = request()->get('categoria') ?? 'todos';--}}
{{--            $selected_categoria = request()->get('categoria');--}}
{{--            $categorias->prepend(['id' => 'todos', 'nome' => __('messages._filtros.todos')]);--}}
{{--        @endphp--}}
{{--        <div x-data="{ selecionado: '{{ $current }}' }">--}}
{{--            <x-chips.lista>--}}
{{--                @foreach($categorias as $categoria)--}}
{{--                    @php--}}
{{--                        $selecionado = $categoria['id'] == $current;--}}
{{--                        $href = $categoria['id'] === 'todos' ? request()->fullUrlWithoutQuery('categoria') : request()->fullUrlWithQuery(['categoria' => $categoria['id'], 'page' => null]);--}}
{{--                    @endphp--}}
{{--                    <x-chips.chip :href="$href" :nome="$categoria['id']" :selecionado="$selecionado">--}}
{{--                        {{ $categoria['nome'] }}--}}
{{--                    </x-chips.chip>--}}
{{--                @endforeach--}}
{{--            </x-chips.lista>--}}
{{--        </div>--}}
{{--    @endif--}}
</div>