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

<div class="bg-white pt-10 sm:pt-20">
    <div class="absolute -top-5 left-0 w-full">
        <div
            class="w-10 h-10 border border-amber-400 rounded-full mx-auto shadow-xl bg-white flex justify-center items-center">
            <img src="{{ asset('images/alt-arrow-down2.svg') }}" class="w-4 h-2">
        </div>
    </div>

    <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>
        <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 = true"
                    class="flex font-bold font-bricolage text-white text-base p-3 rounded-46xl bg-[#001F56] 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-midnightblue-100 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', 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-midnightblue-100 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>