{{ form_start(form, { attr: { id: 'gallery-form' } }) }}

<div class="mb-3">
    {{ form_row(form.title) }}
</div>

<div class="mb-3">
    {{ form_row(form.subtitle) }}
</div>

<div class="mb-3">
    {{ form_widget(form.slugAuto, { attr: { class: 'form-check-input', id: 'slugAutoSwitch' } }) }}
</div>

<div class="mb-3">
    {{ form_row(form.slug) }}
</div>

<div class="mb-3">
    <label for="{{ form.description.vars.id }}" class="form-label">{{ form.description.vars.label }}</label>
    {{ form_widget(form.description, { attr: { class: 'form-control tinymce-editor', rows: 6 } }) }}
</div>

<div class="mb-3">
    {{ form_row(form.visibleInNavigation) }}
</div>

<div class="mb-3">
    {{ form_row(form.category) }}
</div>

<div class="mb-3">
    {{ form_row(form.titlePosition) }}
</div>

<!-- Section Image mise en avant -->
<div class="mb-3">
    <h5>Image mise en avant</h5>

    {% if gallery.hasFeaturedImage %}
        <div class="current-featured-image mb-3">
            <div class="row">
                <div class="col-md-3">
                    <img src="{{ asset('uploads/gallery_featured_images/' ~ gallery.featuredImageFilename) }}"
                         alt="Image mise en avant"
                         class="img-fluid rounded"
                         style="max-width: 200px;">
                </div>
                <div class="col-md-9">
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle"></i> Une image mise en avant est définie pour cette galerie.
                    </div>
                    <p class="text-muted">
                        <small>Vous pouvez changer l'image mise en avant en sélectionnant un nouveau fichier
                            ci-dessous.</small>
                    </p>
                </div>
            </div>
        </div>
    {% elseif gallery.images is not empty %}
        <div class="fallback-featured-image mb-3">
            <div class="row">
                <div class="col-md-3">
                    <img src="{{ vich_uploader_asset(gallery.images.first, 'imageFile') | imagine_filter('thumb') }}"
                         alt="Première image de la galerie"
                         class="img-fluid rounded"
                         style="max-width: 200px; opacity: 0.7;">
                </div>
                <div class="col-md-9">
                    <div class="alert alert-warning">
                        <i class="fas fa-info-circle"></i> Aucune image mise en avant n'est définie.
                        La première image de la galerie sera utilisée par défaut.
                    </div>
                    <p class="text-muted">
                        <small>Pour définir une image mise en avant spécifique, sélectionnez un fichier
                            ci-dessous.</small>
                    </p>
                </div>
            </div>
        </div>
    {% else %}
        <div class="alert alert-info">
            <i class="fas fa-info-circle"></i> Aucune image mise en avant n'est définie et la galerie ne contient aucune
            image.
        </div>
    {% endif %}

    {{ form_row(form.featuredImageFile) }}
</div>

<div class="mb-3">
    {{ form_row(form.imagesFiles) }}
</div>

<div class="mb-3">
    <h5>Images de la galerie</h5>
    <p class="text-muted">Glissez-déposez les images pour changer leur ordre d'affichage</p>

    <div class="row flex justify-content-start flex-wrap" id="gallery-images" data-gallery-id="{{ gallery.id }}"
         data-csrf-token="{{ csrf_token('reorder_images_' ~ gallery.id) }}">
        {% for image in gallery.images %}
            <div class="col image-container draggable"
                 style="width: 150px; flex: none; margin: 5px; cursor: move; border: 2px solid #ddd; border-radius: 8px; padding: 10px; background: white;"
                 data-image-id="{{ image.id }}">

                <div class="drag-handle" style="cursor: move; text-align: center; color: #666; margin-bottom: 5px;">
                    ⋮⋮
                </div>

                <img src="{{ vich_uploader_asset(image, 'imageFile') | imagine_filter('thumb') }}"
                     width="130"
                     alt="Image"
                     style="display: block; margin: 0 auto 10px;">

                <div class="text-center">
                    <small class="text-muted">Position: <span
                                class="position-number">{{ image.position ?? loop.index }}</span></small>
                </div>

                <div class="text-center mt-2">
                    <button type="button"
                            class="btn btn-danger btn-sm delete-image-btn"
                            data-image-id="{{ image.id }}"
                            data-token="{{ csrf_token('delete' ~ image.id) }}">
                        Supprimer
                    </button>
                </div>
            </div>
        {% endfor %}
    </div>

    {% if gallery.images is empty %}
        <div class="alert alert-info">
            Aucune image dans cette galerie. Utilisez le champ ci-dessus pour ajouter des images.
        </div>
    {% endif %}
</div>

<hr/>

<button class="btn btn-primary">{{ button_label|default('Enregistrer') }}</button>

{{ form_end(form) }}

<!-- TinyMCE CDN -->
<script src="https://cdn.tiny.cloud/1/{{ tinymce_api_key }}/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>

<style>
    .image-container.dragging {
        opacity: 0.5;
        transform: rotate(5deg);
    }

    .image-container.drag-over {
        border-color: #007bff !important;
        background-color: #f8f9fa !important;
    }

    .drag-handle {
        font-size: 18px;
        font-weight: bold;
    }

    .image-container:hover {
        border-color: #007bff;
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.25);
    }

    .current-featured-image img {
        border: 3px solid #28a745;
    }

    .fallback-featured-image img {
        border: 2px dashed #ffc107;
    }

    .alert {
        margin-bottom: 0.5rem;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Initialisation de TinyMCE
        tinymce.init({
            selector: '.tinymce-editor',
            height: 300,
            menubar: false,
            plugins: [
                'advlist', 'autolink', 'lists', 'link', 'charmap', 'preview',
                'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
                'insertdatetime', 'media', 'table', 'help', 'wordcount'
            ],
            toolbar: 'undo redo | blocks | ' +
                'bold italic underline strikethrough | alignleft aligncenter ' +
                'alignright alignjustify | bullist numlist outdent indent | ' +
                'forecolor backcolor | removeformat | help',
            content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; font-size: 14px; line-height: 1.6; }',
            branding: false,
            language: 'fr_FR'
        });

        const galleryContainer = document.getElementById('gallery-images');
        const galleryId = galleryContainer.dataset.galleryId;
        const csrfToken = galleryContainer.dataset.csrfToken;

        if (!galleryId) return; // Pas de galerie existante (création)

        let draggedElement = null;

        // Gestion du drag & drop
        document.querySelectorAll('.draggable').forEach(item => {
            item.draggable = true;

            item.addEventListener('dragstart', function (e) {
                draggedElement = this;
                this.classList.add('dragging');
                e.dataTransfer.effectAllowed = 'move';
            });

            item.addEventListener('dragend', function () {
                this.classList.remove('dragging');
                draggedElement = null;
            });

            item.addEventListener('dragover', function (e) {
                e.preventDefault();
                e.dataTransfer.dropEffect = 'move';
            });

            item.addEventListener('dragenter', function (e) {
                e.preventDefault();
                this.classList.add('drag-over');
            });

            item.addEventListener('dragleave', function () {
                this.classList.remove('drag-over');
            });

            item.addEventListener('drop', function (e) {
                e.preventDefault();
                this.classList.remove('drag-over');

                if (draggedElement && draggedElement !== this) {
                    // Insérer l'élément déplacé avant l'élément de destination
                    galleryContainer.insertBefore(draggedElement, this);
                    updateOrder();
                }
            });
        });

        // Fonction pour mettre à jour l'ordre
        function updateOrder() {
            const imageIds = Array.from(galleryContainer.querySelectorAll('.image-container')).map(item =>
                item.dataset.imageId
            );

            // Mettre à jour les numéros de position affichés
            galleryContainer.querySelectorAll('.position-number').forEach((span, index) => {
                span.textContent = index + 1;
            });

            // Envoyer la nouvelle ordre au serveur
            fetch('/admin/gallery/' + galleryId + '/reorder', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': csrfToken
                },
                body: JSON.stringify({
                    imageIds: imageIds
                })
            })
                .then(response => response.json())
                .then(data => {
                    if (!data.success) {
                        console.error('Erreur lors de la réorganisation:', data.error);
                        // Optionnel: afficher un message d'erreur à l'utilisateur
                    }
                })
                .catch(error => {
                    console.error('Erreur:', error);
                });
        }

        // Gestion de la suppression des images
        document.querySelectorAll('.delete-image-btn').forEach(button => {
            button.addEventListener('click', function (e) {
                e.preventDefault();

                if (!confirm('Êtes-vous sûr de vouloir supprimer cette image ?')) {
                    return;
                }

                const imageId = this.dataset.imageId;
                const token = this.dataset.token;
                const imageContainer = this.closest('.image-container');

                fetch('/admin/image/' + imageId + '/delete', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        '_token': token
                    })
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            imageContainer.remove();
                            updateOrder(); // Réorganiser après suppression
                        } else {
                            alert('Erreur lors de la suppression: ' + (data.error || 'Erreur inconnue'));
                        }
                    })
                    .catch(error => {
                        console.error('Erreur:', error);
                        alert('Erreur lors de la suppression');
                    });
            });
        });
    });
</script>