@php
    $images = $getRecord()->getMedia($collection)->map(fn($media) => $media->getUrl())->toArray();
@endphp

<div x-data="{ open: false, imageUrl: '' }" class="w-full">
    @if(count($images) > 0)
        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem;">
            @foreach($images as $image)
                <img 
                    src="{{ $image }}" 
                    @click="imageUrl = '{{ $image }}'; open = true"
                    style="width: 120px; height: 120px; object-fit: cover; border-radius: 0.5rem; cursor: zoom-in; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); border: 1px solid #e5e7eb; transition: opacity 0.2s;"
                    onmouseover="this.style.opacity='0.8'"
                    onmouseout="this.style.opacity='1'"
                    alt="wash-photo"
                />
            @endforeach
        </div>
    @else
        <div class="p-2 text-xs text-gray-400 italic">لا توجد صور</div>
    @endif

    {{-- نافذة التكبير --}}
    <template x-teleport="body">
        <div 
            x-show="open" 
            x-transition.opacity
            @keydown.escape.window="open = false"
            style="display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999999; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; padding: 1rem;"
            :style="open ? 'display: flex;' : 'display: none;'"
        >
            <div style="position: relative; max-width: 90vw; max-height: 90vh; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;" @click.away="open = false">
                <img 
                    :src="imageUrl" 
                    style="max-width: 100%; max-height: 100%; border-radius: 0.5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); object-fit: contain;" 
                />
                
                <button 
                    @click="open = false" 
                    style="position: absolute; top: -10px; right: -10px; width: 40px; height: 40px; background-color: rgba(0,0,0,0.5); border: none; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9999999;"
                    title="اغلاق"
                >
                    <svg style="width: 24px; height: 24px;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </template>
</div>