@extends('layouts.dashboard')

@section('title', 'Edit Gallery')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white shadow sm:rounded-lg">
        <div class="flex justify-between items-center px-4 py-5 sm:px-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900">Edit Gallery Item</h3>
            <a href="{{ route('gallery-categories.create') }}" class="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
                Add Category
            </a>
        </div>
        
        <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
            <form action="{{ route('galleries.update', $gallery) }}" method="POST" enctype="multipart/form-data" id="galleryForm">
                @csrf
                @method('PUT')
                
                <div class="space-y-6">
                    <!-- Title and Category -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="title" class="block text-sm font-medium text-gray-700">Title</label>
                            <input type="text" name="title" id="title" value="{{ old('title', $gallery->title) }}" 
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" required>
                            @error('title')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="gallery_category_id" class="block text-sm font-medium text-gray-700">Category</label>
                            <select name="gallery_category_id" id="gallery_category_id" 
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                                <option value="">Select Category</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" {{ old('gallery_category_id', $gallery->gallery_category_id) == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    {{-- photographer name and location input here  --}}
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="photographer" class="block text-sm font-medium text-gray-700">Photographer Name</label>
                                <input type="text" name="photographer" id="photographer" value="{{ old('photographer', $gallery->photographer) }}" 
                                    class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                            </div>

                            <div>
                                <label for="location" class="block text-sm font-medium text-gray-700">Photography Location</label>
                                <input type="text" name="location" id="location" value="{{ old('location', $gallery->location) }}" 
                                    class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                            </div>
                        </div>


                    <!-- Descriptions -->
                    <div>
                        <label for="short_description" class="block text-sm font-medium text-gray-700">Short Description</label>
                        <input type="text" name="short_description" id="short_description" value="{{ old('short_description', $gallery->short_description) }}" 
                            class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                    </div>

                    <div>
                        <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                        <textarea name="description" id="description" rows="4" 
                            class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">{{ old('description', $gallery->description) }}</textarea>
                    </div>

                    <!-- Image Uploads -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Main Image -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Main Image</label>
                            <div class="relative group">
                                <div id="mainDropZone" class="w-full h-48 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300 hover:border-indigo-500 transition-all cursor-pointer flex items-center justify-center overflow-hidden">
                                    
                                    <!-- Placeholder -->
                                    <div id="mainPlaceholder" class="text-center p-4 {{ $gallery->image_path ? 'hidden' : '' }}">
                                        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                            <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                        <p class="mt-2 text-sm text-gray-500">Click or drag image here</p>
                                    </div>

                                    <!-- Preview Image -->
                                    <img id="mainPreview" 
                                         src="{{ $gallery->image_path ? asset('storage/' . $gallery->image_path) : '' }}" 
                                         data-original="{{ $gallery->image_path ? asset('storage/' . $gallery->image_path) : '' }}"
                                         class="w-full h-full object-cover {{ !$gallery->image_path ? 'hidden' : '' }} absolute inset-0" />
                                    
                                    <!-- Hover Overlay -->
                                    <div id="mainOverlay" class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all rounded-lg flex items-center justify-center {{ !$gallery->image_path ? 'hidden' : '' }}">
                                        <span class="text-white text-sm font-medium">Change Image</span>
                                    </div>
                                </div>

                                <!-- Remove Button (Only shows if new image selected or existing exists) -->
                                <button type="button" id="removeMain" onclick="removeMainImage()" class="hidden absolute top-2 right-2 bg-red-500 text-white rounded-full p-1.5 hover:bg-red-600 shadow-lg z-10">
                                    <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="M6 18L18 6M6 6l12 12"/></svg>
                                </button>

                                <input type="file" name="image" id="mainInput" accept="image/*" class="hidden" onchange="handleMainImage(this)">
                            </div>
                            <p class="mt-1 text-xs text-gray-500">Leave empty to keep current image</p>
                        </div>

                        <!-- Thumbnail -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Thumbnail</label>
                            <div class="relative group">
                                <div id="thumbDropZone" class="w-full h-48 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300 hover:border-indigo-500 transition-all cursor-pointer flex items-center justify-center overflow-hidden">
                                    
                                    <!-- Placeholder -->
                                    <div id="thumbPlaceholder" class="text-center p-4 {{ $gallery->thumbnail_path ? 'hidden' : '' }}">
                                        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                            <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                        <p class="mt-2 text-sm text-gray-500">Click or drag thumbnail here</p>
                                    </div>

                                    <!-- Preview Image -->
                                    <img id="thumbPreview" 
                                         src="{{ $gallery->thumbnail_path ? asset('storage/' . $gallery->thumbnail_path) : '' }}" 
                                         data-original="{{ $gallery->thumbnail_path ? asset('storage/' . $gallery->thumbnail_path) : '' }}"
                                         class="w-full h-full object-cover {{ !$gallery->thumbnail_path ? 'hidden' : '' }} absolute inset-0" />
                                    
                                    <!-- Hover Overlay -->
                                    <div id="thumbOverlay" class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all rounded-lg flex items-center justify-center {{ !$gallery->thumbnail_path ? 'hidden' : '' }}">
                                        <span class="text-white text-sm font-medium">Change Thumbnail</span>
                                    </div>
                                </div>

                                <!-- Remove Button -->
                                <button type="button" id="removeThumb" onclick="removeThumbImage()" class="hidden absolute top-2 right-2 bg-red-500 text-white rounded-full p-1.5 hover:bg-red-600 shadow-lg z-10">
                                    <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="M6 18L18 6M6 6l12 12"/></svg>
                                </button>

                                <input type="file" name="thumbnail" id="thumbInput" accept="image/*" class="hidden" onchange="handleThumbImage(this)">
                            </div>
                            <p class="mt-1 text-xs text-gray-500">Leave empty to keep current thumbnail</p>
                        </div>
                    </div>

                    <!-- Additional Images -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Additional Images</label>
                        <div class="relative">
                            <div id="addDropZone" class="w-full min-h-[160px] bg-gray-50 rounded-lg border-2 border-dashed border-gray-300 hover:border-indigo-500 transition-all cursor-pointer p-4">
                                
                                <!-- Placeholder -->
                                <div id="addPlaceholder" class="flex flex-col items-center justify-center h-full py-8 {{ ($gallery->additional_image_paths && count($gallery->additional_image_paths) > 0) ? 'hidden' : '' }}">
                                    <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                    <p class="mt-2 text-sm text-gray-500">Click or drag multiple images here</p>
                                    <p class="text-xs text-gray-400 mt-1">Select multiple files to replace current</p>
                                </div>

                                <!-- Preview Grid (Shows existing images initially) -->
                                <div id="addPreviewGrid" class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-3">
                                    @if($gallery->additional_image_paths && count($gallery->additional_image_paths) > 0)
                                        @foreach($gallery->additional_image_paths as $path)
                                            <div class="relative aspect-square group">
                                                <img src="{{ asset('storage/' . $path) }}" class="w-full h-full object-cover rounded-lg border border-gray-200">
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>

                            <!-- Clear Button -->
                            <button type="button" id="clearAdd" onclick="clearAdditionalImages()" class="hidden absolute top-2 right-2 bg-red-500 text-white rounded-full p-1.5 hover:bg-red-600 shadow-lg z-10">
                                <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>

                            <input type="file" name="additional_images[]" id="addInput" multiple accept="image/*" class="hidden" onchange="handleAdditionalImages(this)">
                        </div>
                    </div>

                    <!-- Status -->
                    <div class="flex items-center">
                        <input type="checkbox" name="status" id="status" value="1" {{ old('status', $gallery->status) ? 'checked' : '' }} 
                            class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                        <label for="status" class="ml-2 block text-sm text-gray-900">Active</label>
                    </div>

                    <!-- Buttons -->
                    <div class="flex justify-end space-x-3 pt-4 border-t">
                        <a href="{{ route('galleries.index') }}" class="inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                            Cancel
                        </a>
                        <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                            Update Gallery
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Store initial state for Additional Images to allow reversion
// load script after DOM is ready to ensure elements exist
document.addEventListener('DOMContentLoaded', function() {
    const initialAddGrid = document.getElementById('addPreviewGrid').innerHTML;
    const initialAddPlaceholderState = !document.getElementById('addPlaceholder').classList.contains('hidden');

// Main Image Handler
function handleMainImage(input) {
    if (input.files && input.files[0]) {
        const file = input.files[0];
        const reader = new FileReader();
        
        reader.onload = function(e) {
            const preview = document.getElementById('mainPreview');
            const placeholder = document.getElementById('mainPlaceholder');
            const removeBtn = document.getElementById('removeMain');
            const overlay = document.getElementById('mainOverlay');
            
            preview.src = e.target.result;
            preview.classList.remove('hidden');
            preview.classList.add('z-10', 'block'); // Ensure visibility
            placeholder.classList.add('hidden');
            removeBtn.classList.remove('hidden');
            
            // Show overlay on hover
            preview.parentElement.addEventListener('mouseenter', () => overlay.classList.replace('hidden', 'flex'));
            preview.parentElement.addEventListener('mouseleave', () => overlay.classList.replace('flex', 'hidden'));
        }
        
        reader.readAsDataURL(file);
    }
}

function removeMainImage() {
    document.getElementById('mainInput').value = '';
    const preview = document.getElementById('mainPreview');
    const original = preview.dataset.original;
    
    if (original) {
        // Revert to original image
        preview.src = original;
        preview.classList.remove('hidden');
        document.getElementById('mainPlaceholder').classList.add('hidden');
        document.getElementById('removeMain').classList.add('hidden'); 
        document.getElementById('mainOverlay').classList.replace('flex', 'hidden');
    } else {
        // Reset to empty (like create)
        preview.src = '';
        preview.classList.add('hidden');
        document.getElementById('mainPlaceholder').classList.remove('hidden');
        document.getElementById('removeMain').classList.add('hidden');
        document.getElementById('mainOverlay').classList.add('hidden');
    }
}

// Thumbnail Handler
function handleThumbImage(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        
        reader.onload = function(e) {
            const preview = document.getElementById('thumbPreview');
            const placeholder = document.getElementById('thumbPlaceholder');
            const removeBtn = document.getElementById('removeThumb');
            const overlay = document.getElementById('thumbOverlay');
            
            preview.src = e.target.result;
            preview.classList.remove('hidden');
            preview.classList.add('z-10', 'block'); // Ensure visibility
            placeholder.classList.add('hidden');
            removeBtn.classList.remove('hidden');
            
            preview.parentElement.addEventListener('mouseenter', () => overlay.classList.replace('hidden', 'flex'));
            preview.parentElement.addEventListener('mouseleave', () => overlay.classList.replace('flex', 'hidden'));
        }
        
        reader.readAsDataURL(input.files[0]);
    }
}

function removeThumbImage() {
    document.getElementById('thumbInput').value = '';
    const preview = document.getElementById('thumbPreview');
    const original = preview.dataset.original;
    
    if (original) {
        preview.src = original;
        preview.classList.remove('hidden');
        document.getElementById('thumbPlaceholder').classList.add('hidden');
        document.getElementById('removeThumb').classList.add('hidden');
        document.getElementById('thumbOverlay').classList.replace('flex', 'hidden');
    } else {
        preview.src = '';
        preview.classList.add('hidden');
        document.getElementById('thumbPlaceholder').classList.remove('hidden');
        document.getElementById('removeThumb').classList.add('hidden');
        document.getElementById('thumbOverlay').classList.add('hidden');
    }
}

// Additional Images Handler
function handleAdditionalImages(input) {
    const grid = document.getElementById('addPreviewGrid');
    const placeholder = document.getElementById('addPlaceholder');
    const clearBtn = document.getElementById('clearAdd');
    
    if (input.files && input.files.length > 0) {
        // REMOVED: grid.innerHTML = ''; 
        // We now append instead of clearing, keeping existing server images.
        
        placeholder.classList.add('hidden');
        clearBtn.classList.remove('hidden');
        
        Array.from(input.files).forEach((file, index) => {
            const reader = new FileReader();
            reader.onload = function(e) {
                const div = document.createElement('div');
                // Added ring-2 ring-green-500 to distinguish new images from old ones
                div.className = 'relative aspect-square group ring-2 ring-green-500'; 
                div.innerHTML = `
                    <img src="${e.target.result}" class="w-full h-full object-cover rounded-lg border border-gray-200">
                    <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all rounded-lg flex items-center justify-center">
                        <span class="text-white text-xs opacity-0 group-hover:opacity-100 bg-black bg-opacity-50 px-2 rounded">${file.name.substring(0, 10)}...</span>
                    </div>
                `;
                grid.appendChild(div);
            }
            reader.readAsDataURL(file);
        });
    }
}

function clearAdditionalImages() {
    document.getElementById('addInput').value = '';
    const grid = document.getElementById('addPreviewGrid');
    const placeholder = document.getElementById('addPlaceholder');
    const clearBtn = document.getElementById('clearAdd');
    
    // Restore initial state (Server images)
    grid.innerHTML = initialAddGrid;
    
    if (initialAddPlaceholderState) {
        placeholder.classList.remove('hidden');
    } else {
        placeholder.classList.add('hidden');
    }
    
    clearBtn.classList.add('hidden');
}

// Click handlers for drop zones
document.getElementById('mainDropZone').addEventListener('click', function(e) {
    if (e.target.closest('#removeMain') === null) {
        document.getElementById('mainInput').click();
    }
});

document.getElementById('thumbDropZone').addEventListener('click', function(e) {
    if (e.target.closest('#removeThumb') === null) {
        document.getElementById('thumbInput').click();
    }
});

document.getElementById('addDropZone').addEventListener('click', function(e) {
    if (e.target.closest('#clearAdd') === null) {
        document.getElementById('addInput').click();
    }
});

// Drag and drop handlers
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    document.body.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
}

// Main image drag & drop
const mainDrop = document.getElementById('mainDropZone');
mainDrop.addEventListener('dragenter', () => mainDrop.classList.add('border-indigo-500', 'bg-indigo-50'));
mainDrop.addEventListener('dragleave', () => mainDrop.classList.remove('border-indigo-500', 'bg-indigo-50'));
mainDrop.addEventListener('drop', (e) => {
    mainDrop.classList.remove('border-indigo-500', 'bg-indigo-50');
    const dt = e.dataTransfer;
    const files = dt.files;
    document.getElementById('mainInput').files = files;
    handleMainImage(document.getElementById('mainInput'));
});

// Thumbnail drag & drop
const thumbDrop = document.getElementById('thumbDropZone');
thumbDrop.addEventListener('dragenter', () => thumbDrop.classList.add('border-indigo-500', 'bg-indigo-50'));
thumbDrop.addEventListener('dragleave', () => thumbDrop.classList.remove('border-indigo-500', 'bg-indigo-50'));
thumbDrop.addEventListener('drop', (e) => {
    thumbDrop.classList.remove('border-indigo-500', 'bg-indigo-50');
    const dt = e.dataTransfer;
    const files = dt.files;
    document.getElementById('thumbInput').files = files;
    handleThumbImage(document.getElementById('thumbInput'));
});

// Additional images drag & drop
const addDrop = document.getElementById('addDropZone');
addDrop.addEventListener('dragenter', () => addDrop.classList.add('border-indigo-500', 'bg-indigo-50'));
addDrop.addEventListener('dragleave', () => addDrop.classList.remove('border-indigo-500', 'bg-indigo-50'));
addDrop.addEventListener('drop', (e) => {
    addDrop.classList.remove('border-indigo-500', 'bg-indigo-50');
    const dt = e.dataTransfer;
    const files = dt.files;
    document.getElementById('addInput').files = files;
    handleAdditionalImages(document.getElementById('addInput'));
});

});
</script>
@endpush