@push('styles')
<style>
.gallery-preview {
    max-height: 120px;
    margin: 0.25rem;
    border-radius: 0.375rem;
}
.gallery-images-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
</style>
@endpush

@include('layouts.components.section-marker', ['mt'=>'mt-4', 'mb'=>'mb-3', 'section_name' => 'Galeria de Imagens'])

<div class="card p-4">
    <div class="mb-3">
        <label for="content_gallery_title" class="mb-2">Título da Galeria</label>
        <input type="text" class="form-control" name="content_gallery_title"
               id="content_gallery_title"
               value="{{ old('content_gallery_title', $settings['content_gallery_title'] ?? '') }}">
        @error('content_gallery_title')
            <div class="text-danger small mt-2">{{ $message }}</div>
        @enderror
    </div>

    <div class="mb-3">
        <label for="content_gallery_description" class="mb-2">Descrição da Galeria</label>
        <textarea class="form-control" name="content_gallery_description"
                  id="content_gallery_description"
                  rows="3">{{ old('content_gallery_description', $settings['content_gallery_description'] ?? '') }}</textarea>
        @error('content_gallery_description')
            <div class="text-danger small mt-2">{{ $message }}</div>
        @enderror
    </div>

    <div class="mb-3">
        <label for="gallery_images" class="mb-2">Imagens da Galeria</label>
        
        @php
            $existingImages = [];
            if (isset($settings['content_gallery_images'])) {
                $existingImages = is_string($settings['content_gallery_images']) 
                    ? json_decode($settings['content_gallery_images'], true) ?: []
                    : (is_array($settings['content_gallery_images']) ? $settings['content_gallery_images'] : []);
            }
        @endphp

        @if(count($existingImages) > 0)
            <div class="mb-3">
                <h6>Imagens Atuais:</h6>
                <div class="gallery-images-grid">
                    @foreach($existingImages as $index => $imageUrl)
                        <div class="position-relative">
                            <img src="{{ Storage::url(config('paths.settings.images') . '/' . $imageUrl) }}" alt="Gallery Image {{ $index + 1 }}" class="img-thumbnail gallery-preview">
                            <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 remove-existing-image p-2" 
                                    data-index="{{ $index }}" style="transform: translate(25%, -25%);min-width: 30px;">
                                <i class="fa-light fa-times"></i>
                            </button>
                        </div>
                    @endforeach
                </div>
                <input type="hidden" name="existing_gallery_images" value="{{ json_encode($existingImages) }}">
                <input type="hidden" name="images_to_remove" id="imagesToRemove" value="[]">
            </div>
        @endif

        <input type="file" name="gallery_images[]" id="gallery_images"
               class="form-control custom-file" multiple accept="image/*">
        @error('gallery_images')
            <div class="text-danger small mt-2">{{ $message }}</div>
        @enderror
        @error('gallery_images.*')
            <div class="text-danger small mt-2">{{ $message }}</div>
        @enderror
        
        <small class="text-muted">
            Selecione múltiplas imagens. Formatos aceites: JPG, PNG, GIF. 
            As novas imagens serão adicionadas às existentes.
        </small>
    </div>

    <div id="previewContainer"></div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.getElementById('gallery_images');
    const previewContainer = document.getElementById('previewContainer');
    let imagesToRemove = [];

    fileInput.addEventListener('change', function(e) {
        previewContainer.innerHTML = '';
        
        if (e.target.files.length > 0) {
            const previewTitle = document.createElement('h6');
            previewTitle.textContent = 'Novas imagens a adicionar:';
            previewTitle.className = 'mb-2';
            previewContainer.appendChild(previewTitle);
            
            const imagesContainer = document.createElement('div');
            imagesContainer.className = 'gallery-images-grid';
            previewContainer.appendChild(imagesContainer);
            
            Array.from(e.target.files).forEach((file, index) => {
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const imgContainer = document.createElement('div');
                        imgContainer.className = 'position-relative';
                        
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.className = 'img-thumbnail gallery-preview';
                        img.alt = `New Image ${index + 1}`;
                        
                        imgContainer.appendChild(img);
                        imagesContainer.appendChild(imgContainer);
                    };
                    reader.readAsDataURL(file);
                }
            });
        }
    });

    document.addEventListener('click', function(e) {
        if (e.target.closest('.remove-existing-image')) {
            const button = e.target.closest('.remove-existing-image');
            const index = parseInt(button.dataset.index);
            
            imagesToRemove.push(index);
            document.getElementById('imagesToRemove').value = JSON.stringify(imagesToRemove);
            
            button.closest('.position-relative').style.display = 'none';

            alert('Imagem marcada para remoção. Não se esqueça de clicar em "Gravar" para confirmar as alterações.');
        }
    });
});
</script>
@endpush