@extends('layouts.branch')

@section('title', 'Room Gallery')
@section('header', 'Room Photo Management')

@section('content')
<div class="space-y-6" x-data="galleryManager()">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Room Inventory', 'url' => route('branch.rooms.index')],
            ['name' => 'Gallery: ' . $room->room_number, 'url' => '#']
        ]
    ])

    <div class="bg-white rounded-[40px] shadow-sm border border-slate-100 overflow-hidden">
        <div class="p-10 border-b border-slate-50 flex items-center justify-between">
            <div>
                <h2 class="text-3xl font-black text-slate-800 tracking-tighter uppercase leading-none">Photo Gallery</h2>
                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.3em] mt-3">Room {{ $room->room_number }} • {{ $room->roomType->name }}</p>
            </div>
            
            <div class="flex items-center gap-4">
                <span class="text-[10px] font-black text-slate-300 uppercase tracking-widest" x-text="images.length + ' Images Total'"></span>
                <a href="{{ route('branch.rooms.index') }}" class="px-6 py-2 bg-slate-50 text-slate-400 rounded-xl text-[10px] font-black uppercase tracking-widest hover:text-slate-600 transition-all">Back to List</a>
            </div>
        </div>

        <div class="p-10">
            <!-- Upload Area -->
            <div 
                @dragover.prevent="dragOver = true" 
                @dragleave.prevent="dragOver = false" 
                @drop.prevent="handleDrop($event)"
                :class="dragOver ? 'border-indigo-600 bg-indigo-50/30' : 'border-slate-200 bg-slate-50/50'"
                class="relative mb-12 border-2 border-dashed rounded-[32px] p-12 transition-all group text-center cursor-pointer"
                @click="$refs.fileInput.click()">
                
                <input type="file" multiple class="hidden" x-ref="fileInput" @change="handleFiles($event.target.files)">
                
                <div class="flex flex-col items-center">
                    <div class="h-16 w-16 bg-white rounded-2xl shadow-xl shadow-slate-200/50 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                        <svg class="h-6 w-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    </div>
                    <span class="text-sm font-black text-slate-800 uppercase tracking-tight">Drag & Drop Multiple Images</span>
                    <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest mt-2">Maximum file size: 5MB per image</p>
                </div>

                <!-- Progress Overlay -->
                <div x-show="isUploading" class="absolute inset-x-8 bottom-8 h-2 bg-slate-200 rounded-full overflow-hidden">
                    <div class="h-full bg-indigo-600 transition-all duration-300" :style="'width: ' + uploadProgress + '%'"></div>
                </div>
            </div>

            <!-- Image Grid -->
            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6">
                @forelse($room->images as $image)
                    <div class="relative group aspect-square rounded-[32px] overflow-hidden border-4 border-white shadow-xl shadow-slate-200/50 bg-slate-100">
                        <img src="{{ $image->image_url }}" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500">
                        
                        <div class="absolute inset-0 bg-slate-900/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                            <form action="{{ route('branch.rooms.gallery.delete', $image->id) }}" method="POST" onsubmit="return confirm('Remove this image?')">
                                @csrf
                                <button type="submit" class="p-3 bg-red-500 text-white rounded-2xl hover:bg-black transition-colors shadow-xl">
                                    <svg class="h-5 w-5" 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-4v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                </button>
                            </form>
                        </div>
                    </div>
                @empty
                    <div class="col-span-full py-20 text-center">
                        <div class="h-24 w-24 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4 border border-slate-100">
                            <svg class="h-10 w-10 text-slate-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                        </div>
                        <p class="text-[10px] font-black text-slate-300 uppercase tracking-widest">No images uploaded yet</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function galleryManager() {
        return {
            dragOver: false,
            isUploading: false,
            uploadProgress: 0,
            images: {!! json_encode($room->images) !!},

            handleDrop(e) {
                this.dragOver = false;
                const files = e.dataTransfer.files;
                if (files.length > 0) {
                    this.handleFiles(files);
                }
            },

            async handleFiles(files) {
                if (!files || files.length === 0) return;
                
                this.isUploading = true;
                this.uploadProgress = 0;
                
                const formData = new FormData();
                for (let i = 0; i < files.length; i++) {
                    formData.append('images[]', files[i]);
                }

                try {
                    const response = await fetch('{{ route('branch.rooms.gallery.upload', $room->id) }}', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });

                    if (response.ok) {
                        window.location.reload();
                    } else {
                        const error = await response.json();
                        alert(error.message || 'Upload failed');
                    }
                } catch (error) {
                    console.error('Upload error:', error);
                    alert('An error occurred during upload');
                } finally {
                    this.isUploading = false;
                }
            }
        }
    }
</script>
@endpush