@props([
    'titulo',
    'slides',
    'botao_ver_mais'
])
<div x-data="{
    slides: {{ json_encode($slides) }},
    currentIndex: 0,
    next() {
        if (this.currentIndex < this.slides.length - 1) {
            this.goToSlide(this.currentIndex + 1)
        } else {
            this.goToSlide(0)
        }
    },
    prev() {
        if (this.currentIndex > 0) {
            this.goToSlide(this.currentIndex - 1)
        } else {
            this.goToSlide(this.slides.length - 1)
        }
    },
    goToSlide(index) {
        this.currentIndex = index;
        this.$nextTick(() => {
            const slideElement = this.$refs[`slide-${index}`];
            console.log(slideElement)
            if (slideElement) {
                slideElement.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
            }
        });
    }
}" class="pt-8 sm:p-8 relative bg-white">
    <h2 class="text-midnightblue-100 font-bricolage font-bold text-13xl text-center pt-14">{{ $titulo }}</h2>

    <div
        class="box-border flex items-center sm:gap-16 justify-start lg:justify-center overflow-x-auto no-scrollbar my-12 whitespace-nowrap w-full">
        @foreach (collect($slides)->unique('imagem_marca') as $index => $slide)
            <img
                x-ref="slide-@js($index)"
                :class="{'opacity-100': slides[currentIndex].imagem_marca === '{{ $slide['imagem_marca'] }}', 'opacity-50': slides[currentIndex].imagem_marca !== '{{ $slide['imagem_marca'] }}'}"
                class="h-12 ml-8 sm:m-0 object-contain transition-opacity duration-300 cursor-pointer max-w-[120px] max-md:last:mr-8"
                @click="goToSlide({{ $index }})"
                src="/storage/{{ $slide['imagem_marca'] }}"
                alt="{{ $slide['nome_marca'] }}">
        @endforeach
    </div>

    <div class="relative w-full">
        <button
            class="absolute top-[120px] sm:top-[calc(250px-2rem)] left-0 z-20 w-16 flex items-center justify-center cursor-pointer">
            <div @click="prev"
                 class="bg-white border-2 border-solid border-midnightblue-100 flex justify-center p-2 rounded-full">
                <img class="w-5 h-5 block" src="{{ asset('images/arrow-left1.svg') }}"/>
            </div>
        </button>

        <div class="flex-grow px-8 sm:px-16 flex flex-col sm:flex-row flex-wrap w-full">
            <div class="sm:mt-0 w-full sm:w-1/2 flex items-center justify-center bg-transparent relative">
                <template x-if="slides[currentIndex]">
                    <img class="w-full object-contain h-64 sm:h-[500px] z-10"
                         :src="'/storage/' + slides[currentIndex].imagem_slide"
                         :alt="slides[currentIndex].nome_marca">
                </template>
            </div>

            <div class="w-full sm:w-1/2 flex flex-col pt-4 sm:p-8">
                <template x-if="slides[currentIndex]">
                    <div class="tracking-33 sm:tracking-36 mb-0 text-midnightblue-100 text-xs break-words uppercase"
                         x-text="slides[currentIndex].nome_marca"></div>
                </template>
                <template x-if="slides[currentIndex]">
                    <h3 class="my-2 text-midnightblue-100 leading-10 sm:leading-[60px] font-bold font-bricolage text-13xl sm:text-41xl break-words"
                        x-text="slides[currentIndex].titulo_slide"></h3>
                </template>
                <template x-if="slides[currentIndex]">
                    <p class="mt-5 text-base text-darkslateblue-300 break-words"
                       x-html="slides[currentIndex].descricao"></p>
                </template>
                <template
                    x-if="slides[currentIndex] && slides[currentIndex].botao_texto && slides[currentIndex].botao_url">
                    <x-botao-principal href="#" x-bind:href="slides[currentIndex].botao_url"
                                       class="mt-8 text-white self-start"
                                       x-text="slides[currentIndex].botao_texto"></x-botao-principal>
                </template>
            </div>
        </div>
        <button
            class="absolute top-[120px] sm:top-[calc(250px-2rem)] right-0 z-20 w-16 flex items-center justify-center cursor-pointer">
            <div @click="next"
                 class="bg-white border-2 border-solid border-midnightblue-100 flex justify-center p-2 rounded-full">
                <img class="w-5 h-5 block" src="{{ asset('images/arrow-right1.svg') }}"/>
            </div>
        </button>
    </div>
    <div class="w-full mt-3 px-8 sm:mt-0 sm:px-16 sm:grid sm:place-items-center">
        <x-botao-principal class="!bg-white !border-2 !text-midnightblue-100 border-solid border-midnightblue-100" href="{{ \App\Helpers\TranslationHelper::getPageUrl('nossas-marcas') }}">
            {{ $botao_ver_mais ?? __('messages._pagina_downloads.ver_mais') ?? '' }}
        </x-botao-principal>
    </div>
</div>