@php
    $record = $getRecord();
    $images = $record->images ?? [];

    if (!is_array($images)) {
        $images = [];
    }

    // Chuyển đổi đường dẫn ảnh thành URL đầy đủ
    $imageUrls = collect($images)
        ->filter()
        ->map(function ($img) {
            if (empty($img)) {
                return null;
            }
            return str_starts_with($img, 'http')
                ? $img
                : asset('storage/' . ltrim($img, '/'));
        })
        ->filter()
        ->values()
        ->all();

    $totalImages = count($imageUrls);
    $hasImages = $totalImages > 0;
@endphp

<x-filament-forms::field-wrapper
    :id="$getId()"
    :label="$getLabel()"
    :label-sr-only="$isLabelHidden()"
    :helper-text="$getHelperText()"
    :hint="$getHint()"
    :hint-icon="$getHintIcon()"
    :required="$isRequired()"
    :state-path="$getStatePath()"
>
    <div
        x-data="{
            images: @js($imageUrls),
            currentIndex: 0,
            showAll: false,
            setImage(index) {
                this.currentIndex = index;
            },
            next() {
                this.currentIndex = (this.currentIndex + 1) % this.images.length;
            },
            prev() {
                this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
            },
            openLightbox() {
                this.showAll = true;
            },
            closeLightbox() {
                this.showAll = false;
            }
        }"
        class="w-full"
    >
        @if($hasImages)
            @if($totalImages == 1)
                <!-- 1 ảnh: Full width -->
                <div class="relative overflow-hidden rounded-lg bg-gray-100 cursor-pointer" style="height: 400px;" @click="openLightbox()">
                    <img
                        :src="images[currentIndex]"
                        :alt="'Room Image ' + (currentIndex + 1)"
                        class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
                    >
                </div>
            @elseif($totalImages == 2)
                <!-- 2 ảnh: 2 cột (ngang) -->
                <div class="flex gap-2" style="height: 400px;">
                    @foreach($imageUrls as $index => $imageUrl)
                        <div 
                            class="relative overflow-hidden rounded-lg bg-gray-100 cursor-pointer flex-1"
                            @click="setImage({{ $index }})"
                        >
                            <img
                                src="{{ $imageUrl }}"
                                alt="Room Image {{ $index + 1 }}"
                                class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
                            >
                        </div>
                    @endforeach
                </div>
            @else
                <!-- 3+ ảnh: Layout cũ (1 lớn trái + 4 nhỏ phải) -->
                <div class="flex gap-2" style="height: 400px;">
                    <!-- Ảnh chính lớn bên trái -->
                    <div 
                        class="relative overflow-hidden rounded-lg bg-gray-100 cursor-pointer flex-1"
                        @click="openLightbox()"
                    >
                        <img
                            :src="images[currentIndex]"
                            :alt="'Room Image ' + (currentIndex + 1)"
                            class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
                        >
                        @if($totalImages > 1)
                            <div class="absolute inset-0 flex items-center justify-between p-2 pointer-events-none">
                                <button
                                    @click.stop.prevent="prev()"
                                    type="button"
                                    class="bg-black/50 hover:bg-black/70 text-white rounded-full w-8 h-8 flex items-center justify-center pointer-events-auto transition-colors"
                                    style="font-size: 18px; line-height: 1;"
                                >
                                    ‹
                                </button>
                                <button
                                    @click.stop.prevent="next()"
                                    type="button"
                                    class="bg-black/50 hover:bg-black/70 text-white rounded-full w-8 h-8 flex items-center justify-center pointer-events-auto transition-colors"
                                    style="font-size: 18px; line-height: 1;"
                                >
                                    ›
                                </button>
                            </div>
                        @endif
                    </div>

                    <!-- 4 ảnh nhỏ bên phải (2x2 grid) -->
                    <div class="grid grid-cols-2 gap-2 flex-1" style="grid-template-rows: repeat(2, 1fr);">
                        @for($i = 1; $i <= min(4, $totalImages - 1); $i++)
                            @if(isset($imageUrls[$i]))
                                <div 
                                    class="relative overflow-hidden rounded-lg bg-gray-100 cursor-pointer"
                                    @click="setImage({{ $i }})"
                                >
                                    <img
                                        src="{{ $imageUrls[$i] }}"
                                        alt="Room Image {{ $i + 1 }}"
                                        class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
                                    >
                                    @if($i === 4 && $totalImages > 5)
                                        <div class="absolute inset-0 bg-black/50 flex items-center justify-center">
                                            <span class="text-white font-semibold text-lg">+{{ $totalImages - 5 }}</span>
                                        </div>
                                    @endif
                                </div>
                            @else
                                <!-- Placeholder cho ô trống -->
                                <div class="relative overflow-hidden rounded-lg bg-gray-200"></div>
                            @endif
                        @endfor
                    </div>
                </div>
            @endif
        @else
            <!-- Không có ảnh - hiển thị placeholder -->
            <div class="flex gap-2" style="height: 400px;">
                <div class="relative overflow-hidden rounded-lg bg-gray-200 flex-1 flex items-center justify-center">
                    <span class="text-gray-400 text-sm">Chưa có ảnh</span>
                </div>
                <div class="grid grid-cols-2 gap-2 flex-1" style="grid-template-rows: repeat(2, 1fr);">
                    @for($i = 0; $i < 4; $i++)
                        <div class="relative overflow-hidden rounded-lg bg-gray-200"></div>
                    @endfor
                </div>
            </div>
        @endif

        <!-- Button "Hiển thị tất cả ảnh" -->
        @if($totalImages > 5)
            <button
                @click="openLightbox()"
                type="button"
                class="mt-2 w-full py-2 px-4 bg-primary-600 hover:bg-primary-700 text-white rounded-lg transition-colors text-sm font-medium"
            >
                Hiển thị tất cả ảnh ({{ $totalImages }})
            </button>
        @endif

        <!-- Lightbox Modal -->
        <div
            x-show="showAll"
            x-cloak
            @click.self="closeLightbox()"
            class="fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4"
            style="display: none;"
        >
            <div class="relative max-w-6xl w-full max-h-[90vh] overflow-auto">
                <button
                    @click="closeLightbox()"
                    type="button"
                    class="absolute top-4 right-4 z-10 bg-white/90 hover:bg-white text-gray-800 rounded-full w-10 h-10 flex items-center justify-center transition-colors"
                >
                    ✕
                </button>
                
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                    <template x-for="(image, index) in images" :key="index">
                        <div 
                            class="relative overflow-hidden rounded-lg bg-gray-100 cursor-pointer"
                            style="aspect-ratio: 1;"
                            @click="setImage(index); closeLightbox();"
                        >
                            <img
                                :src="image"
                                :alt="'Room Image ' + (index + 1)"
                                class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
                            >
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</x-filament-forms::field-wrapper>