@php($images = $moto->gallery)
<h2 
class="md:text-4xl text-xl tracking-wider capitalize px-10 flex items-center gap-5 md:mt-30 mt-10">
    <div>
    <svg class="w-7" viewBox="0 0 32 43" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M22 22.907L4 9V35L22 22.907Z" fill="#ED1D24" stroke="#ED1D24" stroke-width="4"/>
    </svg>
    </div>
    <span>Galerie</span>
</h2>
<div
    x-data="motoGallerySlider({
        images: @js($images->pluck('image')),
        fixedWidth: null,
        widthRatio: 0.35,
        minWidth: 160,
        maxWidth: 300,
        gap: 100,
        fullscreenImage: null,
        showFullscreen: false
    })"
    x-init="init()"
    class="w-full relative flex justify-center md:py-20 pt-10 md:pt-20"
>   
    <div class="md:block hidden">
        @include('backgrounds.bg-3')
    </div>
    <!-- Dégradé côté gauche (desktop uniquement) -->
    <div class="absolute left-0 top-0 h-full w-100 z-40 pointer-events-none hidden sm:block" 
            style="background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0));">
    </div>
    
    <!-- Dégradé côté droit (desktop uniquement) -->
    <div class="absolute right-0 top-0 h-full w-100 z-40 pointer-events-none hidden sm:block"
            style="background: linear-gradient(to left, rgba(0,0,0,0.8), rgba(0,0,0,0));">
    </div>
    
    <!-- Mobile slider -->
    <div class="sm:hidden w-full relative px-4">
        <template x-if="images.length === 0">
            <div class="text-sm text-gray-500">Aucune image.</div>
        </template>
        <template x-if="images.length > 0">
            <div class="overflow-hidden w-full flex items-center justify-center">
                <button
                    type="button"
                    x-on:click="prev()"
                    :disabled="currentIndex === 0"
                    class="absolute left-0 top-1/2 -translate-y-1/2 p-3 bg-black/70 rounded-full text-white disabled:opacity-25"
                    aria-label="Précédent"
                >
                    <svg width="20" viewBox="0 0 24 25" fill="none"><path d="M17.0125 25L18.75 23.2428L8.42377 12.4835L9.52499 11.3361L9.51874 11.3428L18.6937 1.78345L16.9825 0C14.4462 2.64125 7.36625 10.0173 5 12.4835C6.7575 14.316 5.04373 12.53 17.0125 25Z" fill="white"/></svg>
                </button>
                <img
                    :src="images[currentIndex]"
                    :alt="'Image ' + (currentIndex+1)"
                    class="w-full max-w-xs h-auto object-cover rounded cursor-pointer"
                    @click="fullscreenImage = images[currentIndex]; showFullscreen = true;"
                />
                <button
                    type="button"
                    x-on:click="next()"
                    :disabled="currentIndex >= images.length - 1"
                    class="absolute right-0 top-1/2 -translate-y-1/2 p-3 bg-black/70 rounded-full text-white disabled:opacity-25"
                    aria-label="Suivant"
                >
                    <svg width="20" viewBox="0 0 24 25" fill="none"><path d="M6.98752 25L5.25 23.2428L15.5762 12.4835L14.475 11.3361L14.4813 11.3428L5.30627 1.78345L7.0175 0C9.55375 2.64125 16.6338 10.0173 19 12.4835C17.2425 14.316 18.9563 12.53 6.98752 25Z" fill="white"/></svg>
                </button>
            </div>
            <div class="mt-2 text-center text-xs text-gray-500">
                <span x-text="(currentIndex + 1) + ' / ' + images.length"></span>
            </div>
        </template>
    </div>

    <!-- Desktop slider -->
    <div class="hidden sm:block w-full relative">
        <template x-if="images.length === 0">
            <div class="text-sm text-gray-500">Aucune image.</div>
        </template>

        <template x-if="images.length === 1">
            <div class="w-full max-w-xl">
                <img 
                    :src="images[0]" 
                    alt="Image 1" 
                    class="w-full h-auto object-cover rounded cursor-pointer" 
                    @click="fullscreenImage = images[0]; showFullscreen = true;"
                />
            </div>
        </template>

        <template 
        x-if="images.length > 1">
            <div class="overflow-hidden w-full">
                <div
                    x-ref="track"
                    class="flex items-center"
                    :class="animating && 'transition-transform duration-500'"
                    :style="'transform:translateX(' + translate + 'px)'"
                >
                    <template x-for="(idx, k) in slides" :key="k">
                        <div
                            class="shrink-0 flex justify-center"
                            :style="`width: ${slideWidth}px; ${k < slides.length - 1 ? 'margin-right:' + gap + 'px' : ''}`"
                        >
                            <img
                                :src="images[idx]"
                                :alt="'Image ' + (idx+1)"
                                class="w-full h-auto object-cover transform rounded cursor-pointer"
                                :class="(imageTransition ? 'transition-all duration-500 ' : '') + slideClass(effectiveOffset(k))"
                                @click="fullscreenImage = images[idx]; showFullscreen = true;"
                            />
                        </div>
                    </template>
                </div>
                
                <button
                    type="button"
                    x-on:click="go(-1)"
                    class="absolute top-1/2 cursor-pointer -translate-y-1/2 w-15 h-15 flex items-center justify-center bg-black/70 text-gray-800 rounded-full"
                    :style="`left: ${arrowPos.left-10}px`"
                    aria-label="Précédent"
                >
                    <svg width="15" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M17.0125 25L18.75 23.2428L8.42377 12.4835L9.52499 11.3361L9.51874 11.3428L18.6937 1.78345L16.9825 0C14.4462 2.64125 7.36625 10.0173 5 12.4835C6.7575 14.316 5.04373 12.53 17.0125 25Z" fill="white"/>
                    </svg>
                </button>

                <button
                    type="button"
                    x-on:click="go(1)"
                    class="absolute top-1/2 cursor-pointer -translate-y-1/2 w-15 h-15 flex items-center justify-center bg-black/70 text-gray-800 rounded-full"
                    :style="`right: ${arrowPos.right-10}px`"
                    aria-label="Suivant"
                >
                    <svg width="15" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M6.98752 25L5.25 23.2428L15.5762 12.4835L14.475 11.3361L14.4813 11.3428L5.30627 1.78345L7.0175 0C9.55375 2.64125 16.6338 10.0173 19 12.4835C17.2425 14.316 18.9563 12.53 6.98752 25Z" fill="white"/>
                    </svg>
                </button>
            </div>
        </template>
    </div>
    
    <!-- Modal plein écran pour les images -->
    <div
        x-show="showFullscreen"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-95"
        style="display: none;"
        @click="showFullscreen = false"
        @keydown.escape.window="showFullscreen = false"
    >
        <div class="relative w-screen h-screen flex items-center justify-center p-2" >
            {{-- Flèche gauche --}}
            <button
                type="button"
                @click.stop="
                    if (images.length > 1) {
                        const idx = images.indexOf(fullscreenImage);
                        fullscreenImage = images[(idx - 1 + images.length) % images.length];
                    }
                "
                class="absolute left-4 top-1/2 -translate-y-1/2 p-3 bg-black/70 rounded-full text-white disabled:opacity-25 z-50"
                :disabled="images.length < 2"
                aria-label="Précédent"
            >
                @include('icons.naked-arrow-left', ['classes' => 'h-8'])
            </button>
            <img 
                :src="fullscreenImage" 
                class="max-w-[95vw] w-full max-h-[95vh] object-contain" 
                @click.stop
                alt="Image en plein écran"
            />
            {{-- Flèche droite --}}
            <button
                type="button"
                @click.stop="
                    if (images.length > 1) {
                        const idx = images.indexOf(fullscreenImage);
                        fullscreenImage = images[(idx + 1) % images.length];
                    }
                "
                class="absolute right-4 top-1/2 -translate-y-1/2 p-3 bg-black/70 rounded-full text-white disabled:opacity-25 z-50"
                :disabled="images.length < 2"
                aria-label="Suivant"
            >
                @include('icons.naked-arrow-right', ['classes' => 'h-8'])
            </button>
            <button 
                @click="showFullscreen = false" 
                class="absolute top-4 cursor-pointer right-4 w-12 h-12 bg-black/70 rounded-full flex items-center justify-center text-white hover:bg-black/90 transition-colors"
            >
                <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
        </div>
    </div>
</div>
<script>
function motoGallerySlider({ images, fixedWidth = null, widthRatio = 0.6, minWidth = 280, maxWidth = 500, gap = 64, fullscreenImage = null, showFullscreen = false }) {
    return {
        images,
        fixedWidth,
        widthRatio,
        minWidth,
        maxWidth,
        gap,
        i: 0,
        slides: [],
        offsets: [-2,-1,0,1,2],
        offsetShift: 0,
        slideWidth: 0,
        slideEffective: 0,
        baseOffset: 0,
        translate: 0,
        arrowPos: { left: 0, right: 0 },
        animating: false,
        imageTransition: true,
        fullscreenImage,
        showFullscreen,
        // Mobile slider state
        currentIndex: 0,
        prev() {
            if (this.currentIndex > 0) this.currentIndex--;
        },
        next() {
            if (this.currentIndex < this.images.length - 1) this.currentIndex++;
        },
        // Variables pour le glissement
        isDragging: false,
        startX: 0,
        currentX: 0,
        dragOffset: 0,
        dragThreshold: 50, // distance minimum pour changer de slide
        
        buildWindow() {
            this.slides = [];
            if (!this.images.length) return;
            for (let o=-2;o<=2;o++) this.slides.push((this.i+o+this.images.length)%this.images.length);
        },
        computeBaseOffset() {
            const containerWidth = this.$el.querySelector('[x-ref=track]').parentNode.offsetWidth;
            const leftSlidesWidth = 2 * this.slideEffective;
            this.baseOffset = (containerWidth / 2) - (leftSlidesWidth + this.slideWidth / 2);
        },
        measure() {
            const container = this.$el.querySelector('[x-ref=track]').parentNode;
            const cw = container.offsetWidth;
            // si fixedWidth != null on respecte, sinon calcul auto
            this.slideWidth = (this.fixedWidth !== null)
                ? this.fixedWidth
                : Math.min(this.maxWidth, Math.max(this.minWidth, cw * this.widthRatio));
            this.slideEffective = this.slideWidth + this.gap;
            this.computeBaseOffset();
            this.updateArrowPositions();
            if (!this.animating && !this.isDragging) this.translate = this.baseOffset;
        },
        updateArrowPositions() {
            const containerWidth = this.$el.querySelector('[x-ref=track]').parentNode.offsetWidth;
            const buttonWidth = 36;
            const sideSpace = (containerWidth - this.slideWidth) / 2;
            const adjustment = 8;
            const arrowPosFromEdge = sideSpace - (this.gap / 2) - (buttonWidth / 2) - adjustment;
            this.arrowPos.left = arrowPosFromEdge;
            this.arrowPos.right = arrowPosFromEdge;
        },
        effectiveOffset(k){ return this.offsets[k] + this.offsetShift },
        slideClass(o){
            if(o===0) return 'scale-100 blur-none z-30';
            if(Math.abs(o)===1) return 'scale-90 blur-[2px] z-20';
            if(Math.abs(o)===2) return 'scale-75 blur-[2px] z-10';
            return 'scale-75 blur-[2px]';
        },
        setWidth(w){ // appeler: $data.setWidth(250)
            this.fixedWidth = w;
            this.measure();
        },
        init(){
            this.buildWindow();
            this.$nextTick(()=>{
                this.measure();
                this.setupDragListeners();
                new ResizeObserver(()=>this.measure()).observe(this.$el);
            });
        },
        go(dir){
            if(this.animating || this.images.length < 2) return;
            this.animating = true;
            this.imageTransition = true;
            this.offsetShift += (dir===1 ? -1 : 1);
            this.translate = this.baseOffset + (dir===1 ? -this.slideEffective : this.slideEffective);
            setTimeout(()=>{
                this.imageTransition = false;
                this.animating = false;
                this.i = (this.i + dir + this.images.length) % this.images.length;
                this.buildWindow();
                this.offsetShift = 0;
                this.translate = this.baseOffset;
                setTimeout(()=>{ this.imageTransition = true; },50);
            },500);
        },
        // Nouvelles méthodes pour le glissement
        setupDragListeners() {
            const track = this.$el.querySelector('[x-ref=track]');
            
            // Événements de souris
            track.addEventListener('mousedown', this.startDrag.bind(this));
            window.addEventListener('mousemove', this.drag.bind(this));
            window.addEventListener('mouseup', this.endDrag.bind(this));
            
            // Événements tactiles
            track.addEventListener('touchstart', this.startDrag.bind(this));
            window.addEventListener('touchmove', this.drag.bind(this));
            window.addEventListener('touchend', this.endDrag.bind(this));
            
            // Empêcher le glisser-déposer standard
            track.addEventListener('dragstart', (e) => e.preventDefault());
        },
        startDrag(e) {
            if (this.animating || this.images.length < 2) return;
            
            this.isDragging = true;
            this.imageTransition = false;
            this.startX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
            this.currentX = this.startX;
            this.dragOffset = 0;
            
            e.preventDefault();
        },
        drag(e) {
            if (!this.isDragging) return;
            
            const x = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
            this.currentX = x;
            this.dragOffset = this.currentX - this.startX;
            this.translate = this.baseOffset + this.dragOffset;
            
            e.preventDefault();
        },
        endDrag(e) {
            if (!this.isDragging) return;
            this.isDragging = false;
            this.imageTransition = true;
            
            if (Math.abs(this.dragOffset) > this.dragThreshold) {
                // Si dépassé le seuil, aller à l'image suivante ou précédente
                this.go(this.dragOffset > 0 ? -1 : 1);
            } else {
                // Sinon revenir à l'image actuelle
                this.translate = this.baseOffset;
            }
            
            if (e) e.preventDefault();
        }
    }
}
</script>