@props(['images' => []])

<div x-data="{
        imagens: @js($images),
        slideAtual: 0,
        grupoVisivel: window.innerWidth < 1200 ? 3 : 6,
        get slidesVisiveis() {
            return this.imagens.slice(this.slideAtual, this.slideAtual + this.grupoVisivel);
        },
        proximo() {
            this.slideAtual = Math.min(this.slideAtual + this.grupoVisivel, this.imagens.length - this.grupoVisivel);
        },
        anterior() {
            this.slideAtual = Math.max(this.slideAtual - this.grupoVisivel, 0);
        },
        atualizarGrupoVisivel() {
            this.grupoVisivel = window.innerWidth < 1200 ? 3 : 6;
            this.slideAtual = 0;
        },
        selectedImage: null,
        openImage(imageUrl) {
            this.selectedImage = imageUrl;
        }
    }"
     x-resize="atualizarGrupoVisivel()"
     class="relative mt-10 overflow-hidden">

    <!-- Botão esquerdo -->
    <button x-show="imagens.length > grupoVisivel"
            @click="anterior"
            class="bg-white border-2 border-solid border-midnightblue-100 flex items-center justify-center rounded-full w-10 h-10 cursor-pointer absolute left-4 top-1/2 transform -translate-y-1/2 z-10">
        <img src="{{ asset('images/arrow-left1.svg') }}" class="w-4 h-4">
    </button>

    <!-- Slides -->
    <div class="mx-16">
        <div class="flex gap-2 mx-auto justify-center items-center sm:gap-4">
            <template x-for="(imagem, indice) in slidesVisiveis" :key="indice">
                <img :src="imagem" :alt="'imagem ' + indice" @click="openImage(imagem)"
                     class="w-[90px] sm:w-[170px] aspect-square object-cover object-fit rounded-lg sm:rounded-29xl cursor-pointer">
            </template>
        </div>
        <template x-teleport="body">
            <div
                x-transition.opacity
                x-show="selectedImage"
                class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[1000]">
                <button title="Fechar"
                        class="absolute w-16 h-16 z-50 inline-flex items-center justify-center top-[5%] left-[calc(50%_-_2rem)]">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="white" viewBox="0 0 256 256">
                        <path
                            d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
                    </svg>
                </button>
                <img
                    x-bind:src="selectedImage"
                    @click.outside="selectedImage = null"
                    @keydown.escape.window="selectedImage = null"
                    class="max-w-[90%] max-h-[90%] object-contain">
            </div>
        </template>
    </div>


    <!-- Botao direto -->
    <button x-show="imagens.length > grupoVisivel"
            @click="proximo"
            class="bg-white border-2 border-solid border-midnightblue-100 flex items-center justify-center rounded-full w-10 h-10 cursor-pointer absolute right-4 top-1/2 transform -translate-y-1/2 z-10">
        <img src="{{ asset('images/arrow-right1.svg') }}" class="w-4 h-4">
    </button>
</div>