@php
    $termo = request()->get('q');
@endphp
@pushonce('scripts')
    <meta name="robots" content="noindex">
@endpushonce
<div class="bg-midnightblue-100 pt-[calc(var(--header-height)_+_4rem)] pb-64 md:pt-[calc(var(--header-height)_+_3rem)] md:pb-72 sticky top-0">
    <div class="max-w-[85.375rem] mx-auto">
        <div class="grid justify-center">
            <div class="text-center sm:mt-12 text-white text-xs tracking-36 uppercase">
                @if($erro)
                    {{ __('messages._pagina_busca.titulo_nenhum_resultado') }}
                @else
                    {{ __('messages._pagina_busca.titulo_resultado') }}
                @endif
            </div>
            <div
                class="font-bricolage text-center font-extrabold mt-2 relative text-ellipsis text-white text-13xl sm:text-33xl"
            >
                "{{ $termo }}"
            </div>
            @if($erro)
                <a href="{{ \App\Helpers\TranslationHelper::getHomePageUrl() }}"
                   class="bg-white shadow-xl mx-auto mt-4 inline-flex justify-center rounded-full px-10 py-4 font-bold text-sm text-midnightblue-100">
                    {{ __('messages._pagina_busca.voltar') }}
                </a>
            @endif
        </div>
        <x-star class="absolute left-[10%] top-[5%] md:left-[10%] md:top-[20%]" width="48px" height="48px" color="white"/>
        <x-star class="absolute right-[20%] top-[60%] md:left-[20%] md:top-[40%]" width="48px" height="48px"
                color="yellow"/>
        <x-star class="absolute hidden md:block md:right-[20%] md:top-[45%]" width="48px" height="48px" color="yellow"/>
        <x-star class="absolute right-[5%] top-[70%] md:right-[5%] md:top-[20%]" width="30px" height="30px" color="white"/>
    </div>
</div>
@php
    $downloadUrl = \App\Helpers\TranslationHelper::getPageUrl('download-all');
    $assetUrl = \Illuminate\Support\Facades\URL::to('/storage');;
@endphp
<x-corpo>
    @if(!$erro)
        {{-- Cabeçalho dos resultados. --}}
        <section>
            <div class="border-b border-b-midnightblue-100 mx-3 mb-6 sm:mx-10 pb-4 sm:pb-8">
                <div class="max-w-4xl ml-3 text-midnightblue-100 text-xs tracking-36 uppercase">
                    {{ __('messages._pagina_busca.produto') }}
                </div>
                <div class="font-bricolage font-extrabold ml-3 text-ellipsis text-midnightblue-100 text-13xl">
                    {{ $termo }}
                </div>
            </div>
            {{-- Caixa estilo slider --}}
            @if(!$produtos->isEmpty())
                <x-slider>
                    <div
                        class="grid grid-rows-2 grid-flow-col-dense gap-4 px-2 md:flex md:max-w-none md:px-16 md:gap-8 xl:gap-16">
                        @foreach($produtos as $produto)
                            <a href="{{ \App\Helpers\TranslationHelper::getProdutoUrl($produto->slug, $produto->familia?->slug) }}"
                               class="flex flex-col gap-5 items-center w-[170px] md:w-[260px] last-of-type:pr-16">
                                <div class="border border-midnightblue-100/50 grow-0 relative rounded-full w-fit">
                                    <div
                                        class="overflow-hidden h-[160px] w-[160px] rounded-full md:h-[260px] md:w-[260px]">
                                        @if(!empty($produto->imagem))
                                            <img class="h-full w-full object-contain p-6"
                                                 src="{{ asset('/storage/' . $produto->imagem) }}" alt="Produto Tuff."/>
                                        @endif
                                    </div>
                                </div>
                                <div
                                    class="font-bricolage sm:font-extrabold px-3 text-center text-midnightblue-100 text-sm sm:text-base">
                                    {{ $produto->nome_do_produto }}
                                </div>
                            </a>
                        @endforeach
                    </div>
                </x-slider>
            @else
                <div
                    class="mx-6 sm:mx-10 text-ellipsis text-midnightblue-100 text-xl">{{ __('messages._pagina_busca.nenhum_resultado') }}</div>
            @endif
        </section>

        {{-- Cabeçalho das novidades --}}
        <div class="border-b border-b-midnightblue-100 mx-6 mb-6 sm:mx-10 pb-4 sm:pb-8">
            <div class="max-w-4xl ml-3 mt-12 text-midnightblue-100 text-xs tracking-36 uppercase">
                {{ __('messages._pagina_busca.novidades') }}
            </div>
            <div class="font-bricolage font-extrabold ml-3 text-ellipsis text-midnightblue-100 text-13xl">
                {{ $termo }}
            </div>
        </div>
        @if(!$novidades->isEmpty())
            @php
                $cartoes = $novidades->map(fn($el) => [
                    'titulo' => $el->titulo,
                    'sobrancelha' => $el->categoria->nome,
                    'url' => \App\Helpers\TranslationHelper::getNovidadeUrl($el->slug),
                    'imagem' => $el->thumbnail
                ]);
            @endphp
            <x-galeria-grande class="md:px-10" :cartoes="$cartoes"/>
        @else
            <div
                class="mx-6 sm:mx-10 text-ellipsis text-midnightblue-100 text-xl">{{ __('messages._pagina_busca.nenhum_resultado') }}</div>
        @endif
        {{-- Uma caixa de borda arredondada contendo itens de alguma coisa... --}}
        <div
            x-data="{ expandir: false, extra: {{ $paginas->skip(4)->map(fn($el) => ['slug' => $el->slug, 'title' => $el->title, 'description' => $el->meta_description, 'href' => \App\Helpers\TranslationHelper::getPageUrl($el->slug)])->values()->toJson(JSON_UNESCAPED_UNICODE) }}}"
            class="border border-midnightblue-100 mt-20 px-4 py-6 rounded-3xl mx-6 sm:px-8 sm:py-9 sm:mx-10 sm:mt-24">
            {{-- Cabeçalho das novidades --}}
            <div class="pb-4 sm:pb-8">
                <div class="max-w-4xl text-midnightblue-100 text-xs tracking-36 uppercase">
                    {{ __('messages._pagina_busca.paginas') }}
                </div>
                <div class="font-bricolage font-extrabold text-ellipsis text-midnightblue-100 text-13xl">
                    {{ $termo }}
                </div>
            </div>
            {{-- Container dos itens. --}}
            @if(!$paginas->isEmpty())
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    @foreach($paginas->take(12) as $pagina)
                        @php
                            if (get_class($pagina) === \App\Models\CustomPage::class) {
                                $url = $pagina->getRawUrl();
                                $title = $pagina->title;
                                $description = $pagina->meta_description;
                            } elseif (get_class($pagina) === \App\Models\Marca::class) {
                                $url = \App\Helpers\TranslationHelper::getPageUrl('nossas-marcas') . '/' . $pagina->slug;
                                $title = $pagina->nome;
                                $description = $pagina->descricao;
                            }
                        @endphp

                        <a href="{{$url}}" class="block group">
                            <div class="font-bold text-midnightblue-100 text-xl">{{  $title }}</div>
                            <div class="text-midnightblue-100 text-base line-clamp-3 mt-2 group-hover:underline">{{  $description }}</div>
                        </a>
                    @endforeach
                    <div x-show="expandir" class="contents">
                        <template x-for="pagina in extra">
                            <a :href="pagina.href">
                                <div class="font-bold text-midnightblue-100 text-xl" x-text="pagina.title"></div>
                                <div class="text-midnightblue-100 text-base" x-text="pagina.description"></div>
                            </a>
                        </template>
                    </div>
                </div>
                @if($paginas->count() > 12)
                    <button @click="expandir = !expandir" class="font-bold mt-7 text-sm text-midnightblue-100">
                        {{ __('messages._pagina_busca.ver_mais') }}
                    </button>
                @endif
            @else
                <div
                    class="text-ellipsis text-midnightblue-100 text-xl">{{ __('messages._pagina_busca.nenhum_resultado') }}</div>
            @endif
        </div>
        {{-- Um container para mais duas caixas de borda arredondada contendo itens de alguma coisa... --}}
        <div class="flex flex-wrap sm:flex-nowrap gap-8 sm:gap-5 mt-8 sm:mt-10 mx-6 sm:mx-10 pb-16">
            {{-- Uma caixa de borda arredondada contendo a ficha técnica de alguma coisa... --}}
            <div
                x-data="{ expandir: false, fichas: {{ $fichas->skip(4)->map(fn($el) => ['nome' => 'Ficha Técnica – ' . $el->nome_do_produto, 'href' => asset('/storage/' .  $el->ficha_tecnica)])->values()->toJson(JSON_UNESCAPED_UNICODE) }}}"
                class="border border-midnightblue-100 px-4 w-full sm:px-8 py-6 sm:py-9 rounded-3xl sm:w-1/2">
                {{-- Cabeçalho das novidades --}}
                <div class="pb-4 sm:pb-8">
                    <div class="max-w-4xl text-midnightblue-100 text-xs tracking-36 uppercase">
                        {{ __('messages._pagina_busca.ficha_tecnica') }}
                    </div>
                    <div class="font-bricolage font-extrabold text-ellipsis text-midnightblue-100 text-13xl">
                        {{ $termo }}
                    </div>
                </div>
                {{-- Container dos itens. --}}
                @if(!$fichas->isEmpty())
                    <div class="flex flex-col gap-y-3">
                        @foreach($fichas->take(4) as $produto)
                            <a download="{{ $produto->slug . '-ficha-tecnica' }}"
                               href="{{ asset('/storage/' . $produto->ficha_tecnica) }}"
                               class="text-darkslateblue-300 text-base block hover:underline">
                                {{ __('messages._pagina_busca.ficha_tecnica') }} – {{ $produto->nome_do_produto }}
                            </a>
                        @endforeach
                        <div x-show="expandir" class="contents">
                            <template x-for="produto in fichas">
                                <a :download="produto.slug + '-ficha-tecnica'" :href="produto.href"
                                   class="text-darkslateblue-300 text-base block hover:underline"
                                   x-text="produto.nome"></a>
                            </template>
                        </div>
                    </div>
                @else
                    <div
                        class="text-ellipsis text-midnightblue-100 text-xl">{{ __('messages._pagina_busca.nenhum_resultado') }}</div>
                @endif
                @if($fichas->count() > 4)
                    <button @click="expandir = !expandir" class="font-bold mt-7 text-sm text-midnightblue-100">
                        {{ __('messages._pagina_busca.ver_mais') }}
                    </button>
                @endif
            </div>
            {{-- Uma caixa de borda arredondada contendo o FISPQ de alguma coisa... --}}
            <div
                x-data="{ expandir: false, fichas: {{ $fispq->skip(4)->map(fn($el) => ['slug' => $el->slug, 'nome' => 'Ficha Técnica – ' . $el->nome_do_produto, 'href' => asset('/storage/' .  $el->fispq)])->values()->toJson(JSON_UNESCAPED_UNICODE) }}}"
                class="border border-midnightblue-100 px-4 w-full sm:px-8 py-6 sm:py-9 rounded-3xl sm:w-1/2">
                {{-- Cabeçalho das novidades --}}
                <div class="pb-4 sm:pb-8">
                    <div class="max-w-4xl text-midnightblue-100 text-xs tracking-36">
                        {{ __('messages._pagina_busca.fispq') }}
                    </div>
                    <div class="font-bricolage font-extrabold text-ellipsis text-midnightblue-100 text-13xl">
                        {{ $termo }}
                    </div>
                </div>
                {{-- Container dos itens. --}}
                @if(!$fispq->isEmpty())
                    <div class="flex flex-col gap-y-3">
                        @foreach($fispq->take(4) as $produto)
                            <a download="{{$produto->slug}}-fispq" href="{{ asset('/storage/' . $produto->fispq) }}"
                               class="text-darkslateblue-300 text-base block hover:underline">
                                {{ __('messages._pagina_busca.fispq') }} – {{ $produto->nome_do_produto }}
                            </a>
                        @endforeach
                        <div x-show="expandir" class="contents">
                            <template x-for="produto in fichas">
                                <a :download="produto.slug + '-fispq'" :href="produto.href"
                                   class="text-darkslateblue-300 text-base block hover:underline"
                                   x-text="produto.nome"></a>
                            </template>
                        </div>
                    </div>
                    @if($fispq->count() > 4)
                        <button @click="expandir = !expandir" class="font-bold mt-7 text-sm text-midnightblue-100">
                            {{ __('messages._pagina_busca.ver_mais') }}
                        </button>
                    @endif
                @else
                    <div
                        class="text-ellipsis text-midnightblue-100 text-xl">{{ __('messages._pagina_busca.nenhum_resultado') }}</div>
                @endif
            </div>
        </div>
        <div x-data='downloads({ "downloadUrl": "{{ $downloadUrl }}", "assetUrl": "{{ $assetUrl }}" })'>
            @include('downloads.imagens-partial', ['imagens' => $imagens, 'titulo' => $termo])
        </div>
    @else
        <div class="mx-3 mb-6 sm:mx-10">
            <div class="container mx-auto text-center px-6">
                @if(!empty($novidadesSobrancelha))
                    <div
                        class="text-blue-800 text-xs tracking-widest uppercase text-center mx-auto">{{ $novidadesSobrancelha }}</div>
                @endif
                @if(!empty($novidadesTitulo))
                    <h2 class="max-w-[37.5rem] text-center mx-auto text-3xl md:text-5xl font-extrabold text-midnightblue-100 mt-4 font-bricolage mb-10">
                        {{ $novidadesTitulo }}
                    </h2>
                @endif
            </div>
            <x-ultimas-novidades
                :botaoTexto="$novidadesBotao ?? null"
                :estilo="'compacto'"
                :limit="$novidadesLimit ?? 3"
            />
        </div>
    @endif
</x-corpo>