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

<div class="bg-white pt-12 sm:pt-10">
    <div
        class="md: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-8 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:flex" :invert="false" />
        <div class="flex justify-between md:justify-normal items-stretch 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-bold font-headline text-base p-3 rounded-46xl bg-babyblue text-on-babyblue justify-center items-center gap-x-2">
                    <span>{{ __('messages._filtros.filtros') }}</span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 14" width="15" height="14">
                        <g stroke="#001f56" data-name="Grupo 5524">
                            <path fill="none" stroke-width="2" d="M0 2h15" data-name="Linha 61" />
                            <path fill="none" stroke-width="2" d="M0 7h15" data-name="Linha 62" />
                            <path fill="none" stroke-width="2" d="M0 12h15" data-name="Linha 63" />
                            <g fill="#001f56" stroke-width="1.5" data-name="Elipse 26" transform="translate(1.5)">
                                <circle cx="2" cy="2" r="2" stroke="none" />
                                <circle cx="2" cy="2" r="1.25" fill="none" />
                            </g>
                            <g fill="#001f56" stroke-width="1.5" data-name="Elipse 60" transform="translate(9.5 5)">
                                <circle cx="2" cy="2" r="2" stroke="none" />
                                <circle cx="2" cy="2" r="1.25" fill="none" />
                            </g>
                            <g fill="#001f56" stroke-width="1.5" data-name="Elipse 61" transform="translate(1.5 10)">
                                <circle cx="2" cy="2" r="2" stroke="none" />
                                <circle cx="2" cy="2" r="1.25" fill="none" />
                            </g>
                        </g>
                    </svg>
                    </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-deepblue whitespace-nowrap w-fit hover:cursor-pointer border-babyblue 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', 15) }}',
                        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-deepblue whitespace-nowrap w-fit hover:cursor-pointer border-babyblue 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 = $categorias->map(fn ($el) => ['id' => $el->id, 'nome' => $el->nome]);
            $categorias->prepend(['id' => 'todos', 'nome' => __('messages._filtros.todos')]);
        @endphp
        <div x-data="{ selecionado: '{{ $current }}' }">
            <x-chips.lista class="max-md:px-8" :alwaysShow="true">
                @foreach ($categorias as $categoria)
                    @php
                        $selecionado = $categoria['id'] == $current;
                        $query = request()->query();
                        $query = array_diff_key($query, array_flip(['categoria', 'categoria', 'subcategoria', 'page']));
                        if ($categoria['id'] !== 'todos') {
                            $query['categoria'] = $categoria['id'];
                        }
                        $href = '?' . http_build_query($query);
                    @endphp
                    <x-chips.chip :href="$href" :nome="$categoria['id']" :selecionado="$selecionado" :where="$selecionado"
                        :whereNot="!$selecionado">
                        {{ $categoria['nome'] }}
                    </x-chips.chip>
                @endforeach
            </x-chips.lista>
        </div>
    @endif
</div>