<div>
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">معرض الصور</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">ارفع صور الأكاديمية والأنشطة لعرضها في الموقع</p>
        </div>
        <a href="{{ route('website.manage.sections') }}" class="px-4 py-2 text-sm font-medium rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
            ← إدارة الأقسام
        </a>
    </div>

    @if(session('success'))
        <div class="mb-4 p-3 rounded-lg bg-green-50 border border-green-200 text-green-700 text-sm">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="mb-4 p-3 rounded-lg bg-red-50 border border-red-200 text-red-700 text-sm">
            {{ session('error') }}
        </div>
    @endif

    {{-- Upload Area --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
        <div class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-8 text-center hover:border-blue-400 transition-colors"
             x-data="{ dragging: false }"
             x-on:dragover.prevent="dragging = true"
             x-on:dragleave.prevent="dragging = false"
             x-on:drop.prevent="dragging = false; $wire.uploadMultiple('photos', $event.dataTransfer.files)"
             :class="dragging && 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'">

            <svg class="w-12 h-12 mx-auto text-gray-400 dark:text-gray-500 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
            </svg>

            <p class="text-gray-600 dark:text-gray-300 font-medium mb-1">اسحب الصور هنا أو</p>

            <label class="inline-block cursor-pointer">
                <span class="text-blue-600 hover:text-blue-700 font-medium">اختر من جهازك</span>
                <input type="file" wire:model="photos" multiple accept="image/*" class="hidden">
            </label>

            <p class="text-xs text-gray-500 mt-3">
                الأبعاد المثالية: 1200×800 بكسل | الحد الأقصى: 5 ميجابايت | الصيغ: JPG, PNG, WebP
            </p>
        </div>

        {{-- Upload Progress --}}
        <div wire:loading wire:target="photos" class="mt-4">
            <div class="flex items-center gap-3 text-sm text-blue-600">
                <svg class="animate-spin w-5 h-5" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/></svg>
                جارٍ رفع الصور...
            </div>
        </div>

        @error('photos.*')
            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    {{-- Gallery Grid --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
        @if(count($gallery) > 0)
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-semibold text-gray-900 dark:text-white">الصور ({{ count($gallery) }})</h3>
            </div>

            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
                @foreach($gallery as $image)
                    <div class="group relative aspect-square rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700">
                        <img src="{{ $image['url'] }}" alt="" class="w-full h-full object-cover">

                        {{-- Overlay Actions --}}
                        <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
                            <button wire:click="deleteImage({{ $image['id'] }})"
                                    wire:confirm="هل أنت متأكد من حذف هذه الصورة؟"
                                    class="p-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        </div>

                        {{-- Size Badge --}}
                        @if(isset($image['size']))
                            <span class="absolute bottom-1 start-1 text-[10px] bg-black/60 text-white px-1.5 py-0.5 rounded">
                                {{ $image['size'] }}
                            </span>
                        @endif
                    </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-12">
                <svg class="w-16 h-16 mx-auto text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
                <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">لا توجد صور بعد</h3>
                <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm">ارفع صوراً لتظهر في معرض موقعك</p>
            </div>
        @endif
    </div>
</div>
