@props(['marca', 'fispq', 'imagem', 'ficha_tecnica'])
<x-layout
    :title="__('messages._pagina_downloads.meta_title_interna', ['nome' => $marca->nome])"
    :description="__('messages._pagina_downloads.meta_description_interna', ['nome' => $marca->nome])"
>
    @php
        $downloadUrl = \App\Helpers\TranslationHelper::getPageUrl('download-all');
        $assetUrl = \Illuminate\Support\Facades\URL::to('/storage');;
    @endphp
    <div x-data='downloads({ "downloadUrl": "{{ $downloadUrl }}", "assetUrl": "{{ $assetUrl }}" })'>
        <x-vitrine>
            <div class="hidden md:block">
                <x-star class="absolute left-[10%] top-[10%]" width="48" height="48" color="white"/>
                <x-star class="absolute right-[25%] top-[18%]" width="54" height="54" color="yellow"/>
                <x-star class="absolute right-[10%] top-[10%]" width="24" height="24" color="white"/>
                <x-star class="absolute left-[22%] bottom-[32%]" width="48" height="48" color="yellow"/>
            </div>
            <div class="md:hidden">
                <x-star class="absolute left-[15%] top-[8%]" width="40" height="40" color="white"/>
                <x-star class="absolute right-[8%] bottom-[35%]" width="24" height="24" color="white"/>
                <x-star class="absolute right-[25%] bottom-[25%]" width="40" height="40" color="yellow"/>
            </div>
            <x-slot name="aposTitulo">
                <h1>
                <span class="block m-0 text-sky-blue tracking-[0.3em] uppercase font-bricolage text-sm">
                    {{ __('messages._pagina_downloads.downloads') }}
                </span>
                    <span
                        class="block px-5 sm:px-0 font-bold text-balance leading-none mb-3 text-3xl text-white sm:text-41xl font-bricolage [text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] sm:[text-shadow:none] max-w-[50rem]">
                    {{ $marca->nome }}
                </span>
                </h1>
                <form class="relative flex justify-center align-center" action="" method="get">
                    <button type="submit"
                            class="absolute left-5 bg-transparent z-10 -mr-9 h-full flex justify-center items-center">
                        <img width="18px" height="18px" class="hover:cursor-pointer"
                             src="{{ asset('images/search1.svg') }}" alt="Botão para executar a busca.">
                    </button>
                    <input name="q" type="search" value="{{ request()->get('q') }}"
                           placeholder="{{ __('messages._pagina_downloads.pesquise_aqui') }}" class="pl-14 w-[530px] max-sm:w-full py-4 pr-6 border-midnightblue-100 rounded-full border-[1px] border-solid box-border
                bg-white mx-auto placeholder:text-darkslateblue-300 text-midnightblue-100 placeholder:opacity-50"
                    >
                </form>
                <a
                    data-id="button-download-downloads"
                    data-brand="{{ $marca->slug }}"
                    href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(),'/download-all/' . $marca->slug) }}"
                    download="{{ $marca->slug }}.zip"
                    class="w-fit mx-auto mt-10 border-2 border-white px-8 py-4 rounded-full flex items-center justify-center gap-x-4 ">
                    <template x-if="loading === '{{ $marca->slug }}'">
                        <svg class="shrink-0 block" width="24" height="24" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg">
                            <path
                                fill="white"
                                d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
                                <animateTransform attributeName="transform" type="rotate" dur="0.75s"
                                                  values="0 12 12;360 12 12" repeatCount="indefinite"/>
                            </path>
                        </svg>
                    </template>
                    <template x-if="loading !== '{{ $marca->slug }}'">
                        <svg class="shrink-0 block" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="white"
                             width="24" height="24"
                             viewBox="2 2 20 18">
                            <path d="m16 11-4 4m0 0-4-4m4 4V3m9 12v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2" stroke-width="2"
                                  stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </template>
                    <span class="text-sm font-bold text-white">
                        {{ __('messages._pagina_downloads.baixar_tudo') }}
                    </span>
                </a>
            </x-slot>
        </x-vitrine>
        <x-corpo>
            <div class="px-14 relative bg-white z-10 max-md:px-10">
                <div
                    class="px-7 py-9 rounded-[20px] border border-[#003CA5] mb-8 flex gap-x-16 max-md:gap-x-5 max-md:py-6 max-md:px-5">
                    <img alt="Catálogo de {{ $marca->nome }}" class="w-40 shrink-0 block object-contain max-md:w-24 {{ !empty($marca->catalogo_visualizao) ? 'max-md:h-32 h-60' : 'h-40 max-md:h-24' }}"
                         src="{{ !empty($marca->catalogo_visualizacao) ? asset('storage/'. $marca->catalogo_visualizacao) : asset('storage/'. $marca->imagem) }}">

                    <div class="shrink w-auto">
                        <div
                            class="tracking-33 uppercase mb-1 text-sm text-[#003CA5] max-md:m-0">{{ __('messages._pagina_downloads.catalogo') }}</div>
                        <h2 class="font-bricolage text-[#003CA5] mb-5 font-bold text-3xl max-md:text-xl max-md:mb-2">{{ $marca->nome }}</h2>
                        <p class="text-sm w-[412px] text-[#001F56] max-md:w-auto">{{ $marca->descricao }}</p>
                        <a download="catalogo-{{ $marca->slug  }}"
                           href="{{ asset('/storage/' . $marca->catalogo_de_produto) }}"
                           class="w-10 h-10 rounded-full bg-midnightblue-100 mt-10 flex justify-center items-center max-md:mt-2">
                            <img src="{{ asset('images/download-icon.svg') }}" class="w-5 h-5 block"
                                 alt="Ícone de download">
                        </a>
                    </div>
                </div>

                <div class="grid grid-cols-2 items-start justify-between gap-x-7 max-md:grid-cols-1 gap-y-8">
                    <div x-data="{show: false}"
                         class="px-7 py-9 rounded-[20px] border border-[#003CA5] max-md:py-6 max-md:px-4">
                        <h2>
                            <span
                                class="block tracking-33 uppercase text-xs text-[#003CA5] mb-1 max-md:mb-0">{{ __('messages._pagina_downloads.ficha_tecnica') }}</span>
                            <span
                                class="block font-bricolage text-3xl text-[#003CA5] mb-8 font-bold"> {{ $marca->nome }}</span>
                        </h2>
                        <ul>
                            @foreach($ficha_tecnica as $produto)
                                <li :class="{{ $loop->index >= 5 ? 1 : 0 }} && !show ? 'hidden' : 'block'">
                                    <a class="hover:underline"
                                       href="{{ asset('/storage/'. $produto->ficha_tecnica) }}"
                                       download="{{ 'ficha_tecnica-' . $produto->slug . 'pdf' }}">
                                        <div
                                            class="text-sm mb-3 text-[#001F56] max-md:text-base max-md:mb-5">
                                            {{ __('messages._pagina_downloads.ficha_tecnica') }}
                                            - {{ $produto->nome_do_produto }}</div>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                        @if($ficha_tecnica->count() > 5)
                            <button @click="show = !show"
                                    x-text="show ? '{{ __('messages._pagina_downloads.ver_menos') }}' : '{{ __('messages._pagina_downloads.ver_mais') }}'"
                                    class="hover:underline font-bold text-sm mt-7 text-[#003CA5] hover:cursor-pointer max-md:mt-4">
                                {{ __('messages._pagina_downloads.ver_mais') }}
                            </button>
                        @endif
                    </div>
                    <div x-data="{show: false}"
                         class="px-7 py-9 rounded-[20px] border border-[#003CA5] max-md:py-6 max-md:px-4">
                        <h2>
                            <span
                                class="block tracking-33 uppercase text-xs text-[#003CA5] mb-1 max-md:mb-0">{{ __('messages._pagina_downloads.fispq') }}</span>
                            <span
                                class="block font-bricolage text-3xl text-[#003CA5] mb-8 font-bold"> {{ $marca->nome }}</span>
                        </h2>
                        <ul>
                            @foreach($fispq as $produto)
                                <li :class="{{ $loop->index >= 5 ? 1 : 0 }} && !show ? 'hidden' : 'block'">
                                    <a class="hover:underline" href="{{ asset('/storage/'. $produto->fispq) }}"
                                       download="{{ 'fispq-' . $produto->slug . 'pdf' }}">
                                        <div
                                            class="text-sm mb-3 text-[#001F56] max-md:text-base max-md:mb-5">
                                            {{ __('messages._pagina_downloads.fispq') }}
                                            - {{ $produto->nome_do_produto }}</div>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                        @if($fispq->count() > 5)
                            <button @click="show = !show" x-text="show ? 'ver menos' : 'ver mais'"
                                    class="hover:underline font-bold text-sm mt-7 text-[#003CA5] hover:cursor-pointer max-md:mt-4">
                                ver mais
                            </button>
                        @endif
                    </div>
                </div>
            </div>
            @include('downloads.imagens-partial', ['imagens' => $imagem, 'titulo' => $marca->nome])
        </x-corpo>
        @pushonce('scripts')
            <script src="/js/jszip/jszip.min.js"></script>
        @endpushonce
    </div>
</x-layout>