@php
    $record = $getRecord();

    $images = $record->images ?? [];

    if (!is_array($images) || empty($images)) {
        $images = [asset('storage/logo/logo.png')];
    } else {
        $images = collect($images)
            ->filter()
            ->map(fn ($img) =>
                str_starts_with($img, 'http')
                    ? $img
                    : asset('storage/' . ltrim($img, '/'))
            )
            ->values()
            ->all();
    }

    if (empty($images)) {
        $images = [asset('storage/logo/logo.png')];
    }
@endphp

<div class="flex-none shrink-0" style="width: 120px; min-width: 120px; max-width: 120px; flex-shrink: 0;">
    <div
        x-data="{
            images: @js($images),
            index: 0,
            touchStartX: 0,
            touchEndX: 0,
            next() { this.index = (this.index + 1) % this.images.length },
            prev() { this.index = (this.index - 1 + this.images.length) % this.images.length },
            goTo(i) { this.index = i },
            handleTouchStart(e) {
                this.touchStartX = e.changedTouches[0].screenX;
            },
            handleTouchEnd(e) {
                this.touchEndX = e.changedTouches[0].screenX;
                this.handleSwipe();
            },
            handleSwipe() {
                if (this.touchEndX < this.touchStartX - 50) {
                    // Swipe left - next image
                    this.next();
                }
                if (this.touchEndX > this.touchStartX + 50) {
                    // Swipe right - previous image
                    this.prev();
                }
            }
        }"
        class="flex flex-col"
        style="width: 120px;"
    >
        <!-- Ảnh chính -->
        <div
            @touchstart="handleTouchStart($event)"
            @touchend="handleTouchEnd($event)"
            class="relative overflow-hidden rounded-lg bg-gray-100 touch-pan-y"
            style="width: 120px; height: 120px; min-width: 120px; min-height: 120px; max-width: 120px; max-height: 120px; position: relative;"
        >
            <img
                :src="images[index]"
                class="w-full h-full object-cover select-none"
                style="display: block; width: 120px; height: 120px; object-fit: cover; user-select: none; -webkit-user-select: none; pointer-events: none;"
            >
        </div>

        <!-- Pagination (chỉ hiển thị khi có nhiều hơn 1 ảnh) -->
        @if(count($images) > 1)
            <div class="flex flex-col items-center gap-1 mt-2" style="width: 120px;">
                <!-- Pagination dots -->
                <div class="flex items-center justify-center gap-1">
                    <template x-for="(image, i) in images" :key="i">
                        <button
                            type="button"
                            @click.stop.prevent="goTo(i)"
                            class="rounded-full transition-all"
                            :class="index === i ? 'bg-primary-500' : 'bg-gray-300 hover:bg-gray-400'"
                            style="width: 6px; height: 6px; min-width: 6px; min-height: 6px;"
                        ></button>
                    </template>
                </div>
                <!-- Số trang -->
                <div class="text-xs text-gray-600" x-text="(index + 1) + '/' + images.length"></div>
            </div>
        @endif
    </div>
</div>