@props(['downloads'])

<x-layout
    :title="__('messages._pagina_downloads.meta_title')"
    :description="__('messages._pagina_downloads.meta_description')"
>
    <x-vitrine>
        <div class="hidden md:block">
            <x-star class="absolute left-[10%] top-[10%]" width="48" height="48" color="yellow"/>
            <x-star class="absolute left-[14%] bottom-[38%]" width="24" height="24" color="white"/>
            <x-star class="absolute right-[14%] top-[10%]" width="24" height="24" color="white"/>
            <x-star class="absolute right-[4%] bottom-[30%]" width="32" height="32" color="yellow"/>
        </div>
        <div class="md:hidden">
            <x-star class="absolute left-[20%] top-[10%]" width="32" height="32" color="yellow"/>
            <x-star class="absolute right-[8%] top-[15%]" width="24" height="24" color="white"/>
            <x-star class="absolute left-[7%] bottom-[30%]" width="16" height="16" color="white"/>
            <x-star class="absolute right-[25%] bottom-[35%]" width="24" height="24" color="white"/>
        </div>
        <x-slot name="aposTitulo">
            <h1 class="px-5 sm:px-0 font-bold text-balance leading-none my-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]">
                {{ __('messages._pagina_downloads.downloads') }}
            </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-100"
                >
            </form>
        </x-slot>
    </x-vitrine>
    @php
        $downloadUrl = \App\Helpers\TranslationHelper::getPageUrl('download-all');
        $assetUrl = \Illuminate\Support\Facades\URL::to('/storage');;
    @endphp
    <x-corpo>
        <div
            x-data='downloads({ "downloadUrl": "{{ $downloadUrl }}", "assetUrl": "{{ $assetUrl }}" })'
            class="bg-white relative z-10 max-md:pb-16 max-md:-mb-16 px-20 max-md:px-9">
            <div>
                <div class="text-sm text-[#003CA5] mb-4">
                    {{ __('messages._pagina_downloads.mostrando', ['count' => count($marcas), 'total' => $marcas->total() ]) }}
                </div>
                <div
                    class="grid grid-cols-4 gap-x-6 gap-y-10 max-lg:grid-cols-3 max-md:grid-cols-2 max-sm:grid-cols-1 max-md:gap-y-9">
                    @foreach($marcas as $marca)
                        <div
                            class="flex flex-col items-stretch border border-[#143C8766] rounded-[16px] pl-4 pr-5 py-6">
                            <img class="h-20 object-contain block mx-auto mb-2 max-md:h-[70px] max-md:mb-4"
                                 src="{{ asset('storage/'.$marca['imagem']) }}" alt="{{ $marca->nome }}">
                            <ul class="flex flex-col gap-y-2 items-stretch mb-6 grow">
                                <li class="pl-4 pr-2 py-3 flex items-center justify-between gap-x-2 border border-[#143C8766] rounded-[8px]">
                                    <p class="font-semibold text-sm text-midnightblue-100 ">
                                        {{ __('messages._pagina_downloads.catalogos') }}
                                    </p>
                                    <p class="shrink-0 text-midnightblue-100 opacity-60 text-sm">
                                        {{ 1 }} {{-- Existe um catalogo por marca.. --}}
                                    </p>
                                </li>

                                <li class="pl-4 pr-2 py-3 flex items-center justify-between gap-x-2 border border-[#143C8766] rounded-[8px]">
                                    <p class="font-semibold text-sm text-midnightblue-100">
                                        {{ __('messages._pagina_downloads.imagens') }}
                                    </p>
                                    <p class="shrink-0 text-midnightblue-100 opacity-60 text-sm">
                                        {{ $marca->fotos_count ?? 0 }}
                                    </p>
                                </li>

                                <li class="pl-4 pr-2 py-3 flex items-center justify-between gap-x-2 border border-[#143C8766] rounded-[8px]">
                                    <p class="font-semibold text-sm text-midnightblue-100">
                                        {{ __('messages._pagina_downloads.fichas_tecnicas') }}
                                    </p>
                                    <p class="shrink-0 text-midnightblue-100 opacity-60 text-sm">
                                        {{ $marca->ficha_tecnica_count ?? 0 }}
                                    </p>
                                </li>

                                <li class="pl-4 pr-2 py-3 flex items-center justify-between gap-x-2 border border-[#143C8766] rounded-[8px]">
                                    <p class="font-semibold text-sm text-midnightblue-100">
                                        {{ __('messages._pagina_downloads.fispq') }}
                                    </p>
                                    <p class="shrink-0 text-midnightblue-100 opacity-60 text-sm">
                                        {{ $marca->fispq_count ?? 0 }}
                                    </p>
                                </li>
                            </ul>

                            <div class="flex justify-between items-center">
                                <a
                                    data-id="button-download-downloads"
                                    data-brand="{{ $marca->slug }}"
                                    href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(),'/download-all/' . $marca->slug) }}"
                                    download="{{ $marca->slug }}.zip"
                                    class="block w-10 h-10 rounded-full bg-midnightblue-100 flex justify-center items-center shrink-0 hover:cursor-pointer">
                                    <template x-if="loading !== '{{  $marca->slug }}'">
                                        <img src="{{ asset('images/download-icon.svg') }}" class="w-5 h-5 block"
                                             alt="Ícone de download">
                                    </template>
                                    <template x-if="loading === '{{ $marca->slug }}'">
                                        <svg 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>
                                </a>
                                <a href="{{ \App\Helpers\TranslationHelper::getPageUrl('downloads') . '/' . $marca->slug }}"
                                   class="px-6 py-3 rounded-full bg-black/5 hover:bg-black/10 transition-colors cursor-pointer">
                                    <div class="font-bold text-base text-[#003CA5] max-md:text-sm">
                                        {{ __('messages._pagina_downloads.ver_mais') }}
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="mt-10">
            {{ $marcas->onEachSide(3)->links('components.paginacao') }}
        </div>
    </x-corpo>
    @pushonce('scripts')
        <script src="/js/jszip/jszip.min.js"></script>
    @endpushonce
</x-layout>