@php
    $termo = request()->get('q');
@endphp
@pushonce('scripts')
    <meta name="robots" content="noindex">
@endpushonce
<x-vitrine-simples class="py-32 sm:pb-32 sm:pt-16">
    <div class="text-center sm:mt-12 text-white text-xs tracking-36 uppercase">
        @if (!$erro)
            {{ __('messages._pagina_busca.titulo_resultado') }}
        @endif
    </div>
    @if (!$erro)
        <div
            class="font-headline text-center font-extrabold mt-2 relative text-ellipsis text-white text-13xl sm:text-33xl">
            "{{ $termo }}"
        </div>
    @endif
    @if ($erro)
        <div
            class="m-0 text-white tracking-[0.5em] uppercase font-headline text-xs sm:text-base relative z-10 text-center">
            {{ __('messages._pagina_busca.titulo_nenhum_resultado') }}
        </div>
        <div
            class="font-headline text-center font-extrabold mt-2 relative text-ellipsis text-white text-13xl sm:text-33xl">
            "{{ $termo }}"
        </div>
        <div class="text-center mt-2">
            <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-deepblue">
                {{ __('messages._pagina_busca.voltar') }}
            </a>
        </div>
    @endif
    <x-slot:slot4>
        <div class="absolute z-10 left-0 top-[8rem] right-0 grid place-items-center overflow-clip">
            <div class="w-[85.375rem] h-[31.25rem] relative">
                <x-star class="absolute left-[10%] top-[5%] md:left-[10%] md:top-[8%]" width="48px" height="48px"
                    color="white" />

                <x-star class="absolute hidden md:block md:right-[10%] md:top-[25%]" width="60px" height="60px"
                    color="babyblue" />
                <x-star class="absolute hidden md:block right-[5%] top-[70%] md:right-[5%] md:top-[10%]" width="30px"
                    height="30px" color="white" />
            </div>
        </div>
    </x-slot:slot4>
</x-vitrine-simples>
@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-deepblue text-xs tracking-36 uppercase">
                    {{ __('messages._pagina_busca.produto') }}
                </div>
                <div class="font-headline font-extrabold ml-3 text-ellipsis text-deepblue text-13xl">
                    {{ $termo }}
                </div>
            </div>
            {{-- Caixa estilo slider --}}
            @if (!$produtos->isEmpty())
                <x-slider class="snap-x snap-mandatory">
                    <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-[4.2rem]">
                        @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] md:last-of-type:pr-16 snap-center">
                                <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-headline sm:font-extrabold px-3 text-center text-deepblue text-sm sm:text-base">
                                    {{ $produto->nome ?? $produto->nome_do_produto }}
                                </div>
                            </a>
                        @endforeach
                    </div>
                </x-slider>
            @else
                <div class="mx-6 sm:mx-10 text-ellipsis text-deepblue 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-deepblue text-xs tracking-36 uppercase">
                {{ __('messages._pagina_busca.novidades') }}
            </div>
            <div class="font-headline font-extrabold ml-3 text-ellipsis text-deepblue 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-deepblue 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-deepblue text-xs tracking-36 uppercase">
                    {{ __('messages._pagina_busca.paginas') }}
                </div>
                <div class="font-headline font-extrabold text-ellipsis text-deepblue 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-deepblue text-xl">{{ $title }}</div>
                            <div class="text-deepblue 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" :key="pagina.href">
                            <a :href="pagina.href">
                                <div class="font-bold text-deepblue text-xl" x-text="pagina.title"></div>
                                <div class="text-deepblue 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-deepblue"
                        x-text="expandir ? @js(__('messages._pagina_downloads.ver_menos')) : @js(__('messages._pagina_busca.ver_mais'))">
                        >
                        {{ __('messages._pagina_busca.ver_mais') }}
                    </button>
                @endif
            @else
                <div class="text-ellipsis text-deepblue 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 ?? $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-deepblue text-xs tracking-36 uppercase">
                        {{ __('messages._pagina_busca.ficha_tecnica') }}
                    </div>
                    <div class="font-headline font-extrabold text-ellipsis text-deepblue 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 ?? $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-deepblue 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-deepblue"
                        x-text="expandir ? @js(__('messages._pagina_downloads.ver_menos')) : @js(__('messages._pagina_busca.ver_mais'))">
                        {{ __('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 ?? $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-deepblue text-xs tracking-36">
                        {{ __('messages._pagina_busca.fispq') }}
                    </div>
                    <div class="font-headline font-extrabold text-ellipsis text-deepblue 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 ?? $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-deepblue"
                            x-text="expandir ? @js(__('messages._pagina_downloads.ver_menos')) : @js(__('messages._pagina_busca.ver_mais'))">
                            {{ __('messages._pagina_busca.ver_mais') }}
                        </button>
                    @endif
                @else
                    <div class="text-ellipsis text-deepblue 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-deepblue mt-4 font-headline mb-10">
                        {{ $novidadesTitulo }}
                    </h2>
                @endif
            </div>
            <x-ultimas-novidades :botaoTexto="$novidadesBotao ?? null" :estilo="'compacto'" :limit="$novidadesLimit ?? 3" />
        </div>
    @endif
</x-corpo>