{{-- resources/views/admin/galleries/edit.blade.php --}}

@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3>Edit Gallery: {{ $gallery->title }}</h3>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.galleries.update', $gallery) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div class="mb-3">
                            <label>Title</label>
                            <input type="text" name="title" class="form-control" value="{{ $gallery->title }}" required>
                        </div>

                        <div class="mb-3">
                            <label>Category</label>
                            <select name="category" class="form-control" required>
                                <option value="Dance Practice" {{ $gallery->category == 'Dance Practice' ? 'selected' : '' }}>Dance Practice</option>
                                <option value="Dance Training" {{ $gallery->category == 'Dance Training' ? 'selected' : '' }}>Dance Training</option>
                                <option value="Dance Growth" {{ $gallery->category == 'Dance Growth' ? 'selected' : '' }}>Dance Growth</option>
                                <option value="Dance Improvement" {{ $gallery->category == 'Dance Improvement' ? 'selected' : '' }}>Dance Improvement</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label>Description</label>
                            <textarea name="description" class="form-control" rows="3">{{ $gallery->description }}</textarea>
                        </div>

                        <!-- Existing Images -->
                        <div class="mb-4">
                            <label class="fw-bold mb-3">Existing Images ({{ $gallery->images->count() }})</label>
                            <div class="row" id="sortable-images">
                                @foreach($gallery->images as $image)
                                <div class="col-md-3 mb-3" data-image-id="{{ $image->id }}">
                                    <div class="card">
                                        <img src="{{ asset($image->image_path) }}" class="card-img-top" style="height: 200px; object-fit: cover;" alt="{{ $image->caption }}">
                                        <div class="card-body">
                                            <div class="mb-2">
                                                <label class="form-label small">Caption</label>
                                                <input type="text"
                                                       name="existing_captions[{{ $image->id }}]"
                                                       class="form-control form-control-sm"
                                                       value="{{ $image->caption }}"
                                                       placeholder="Enter caption">
                                            </div>
                                            <button type="button" class="btn btn-danger btn-sm w-100 delete-image" data-image-id="{{ $image->id }}">
                                                <i class="fa fa-trash"></i> Delete
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            <small class="text-muted">Drag and drop to reorder images</small>
                        </div>

                        <!-- Add New Images -->
                        <div class="mb-3">
                            <label>Add New Images</label>
                            <input type="file" name="new_images[]" class="form-control" multiple accept="image/*">
                            <small class="text-muted">You can select multiple images (JPG, PNG, GIF, WEBP - Max 2MB each)</small>
                        </div>

                        <div id="new-captions-container" class="mb-3">
                            <!-- Caption inputs will be added dynamically -->
                        </div>

                        <button type="submit" class="btn btn-primary">Update Gallery</button>
                        <a href="{{ route('admin.galleries.index') }}" class="btn btn-secondary">Cancel</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize sortable for image reordering
    const sortableContainer = document.getElementById('sortable-images');
    if (sortableContainer) {
        new Sortable(sortableContainer, {
            animation: 150,
            onEnd: function() {
                updateImageOrder();
            }
        });
    }

    // Handle image deletion
    document.querySelectorAll('.delete-image').forEach(button => {
        button.addEventListener('click', function() {
            if (confirm('Are you sure you want to delete this image?')) {
                const imageId = this.getAttribute('data-image-id');
                deleteImage(imageId);
            }
        });
    });

    // Handle new image captions
    document.querySelector('input[name="new_images[]"]').addEventListener('change', function(e) {
        const container = document.getElementById('new-captions-container');
        container.innerHTML = '<label class="fw-bold">New Image Captions (Optional)</label>';

        for (let i = 0; i < this.files.length; i++) {
            container.innerHTML += `
                <div class="mb-2">
                    <label class="form-label small">Caption for ${this.files[i].name}</label>
                    <input type="text" name="captions[${i}]" class="form-control" placeholder="Enter caption...">
                </div>
            `;
        }
    });

    // Update image order function
    function updateImageOrder() {
        const images = [];
        document.querySelectorAll('#sortable-images .col-md-3').forEach((element, index) => {
            images.push({
                id: element.getAttribute('data-image-id'),
                position: index
            });
        });

        fetch('{{ route("admin.galleries.reorder-images") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ images: images.map(img => img.id) })
        }).then(response => response.json())
          .then(data => {
              if (data.success) {
                  console.log('Images reordered successfully');
              }
          });
    }

    // Delete image function
    function deleteImage(imageId) {
        fetch(`{{ url("admin/galleries/delete-image") }}/${imageId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        }).then(response => response.json())
          .then(data => {
              if (data.success) {
                  // Reload the page to refresh the image list
                  window.location.reload();
              } else {
                  alert('Failed to delete image');
              }
          });
    }
});
</script>
@endpush
@endsection