{% extends 'admin.base.html.twig' %}

{% block title %}Modifier une catégorie{% endblock %}

{% block page_title %}Modifier la catégorie « {{ category.title }} »{% endblock %}

{% block breadcrumb %}
    {% include '_breadcrumb.html.twig' with {
        breadcrumbs: [
            { label: 'Catégories', path: path('app_category_index') },
            { label: 'Modifier' }
        ]
    } %}
{% endblock %}

{% block content %}

    <h2 class="h5 mb-4">Édition de la catégorie</h2>

    {{ include('admin/category/_form.html.twig', {'button_label': 'Mettre à jour'}) }}

    <div class="d-flex gap-2 mt-3">
        <a href="{{ path('app_category_index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Retour à la liste
        </a>

        {{ include('admin/category/_delete_form.html.twig') }}
    </div>

    <div class="mt-5">
        <h2 class="h5 mb-3">Galeries associées</h2>

        {% if galleries|length > 0 %}
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>Galeries ({{ galleries|length }})</span>
                    <small class="text-muted">Glissez-déposez pour réorganiser</small>
                </div>
                <ul id="sortable-galleries" class="list-group list-group-flush" data-category-id="{{ category.id }}">
                    {% for gallery in galleries %}
                        <li class="list-group-item d-flex justify-content-between align-items-center"
                            data-gallery-id="{{ gallery.id }}">
                            <div class="d-flex align-items-center">
                                <i class="bi bi-grip-vertical me-3 text-muted handle"></i>
                                <div>
                                    <strong>{{ gallery.title }}</strong>
                                    {% if gallery.description %}
                                        <p class="mb-0 small text-muted">{{ gallery.description|striptags|slice(0, 100) }}{% if gallery.description|length > 100 %}...{% endif %}</p>
                                    {% endif %}
                                </div>
                            </div>
                            <div>
                                <a href="{{ path('app_gallery_edit', {'id': gallery.id}) }}"
                                   class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-pencil"></i>
                                </a>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% else %}
            <div class="alert alert-info">
                Aucune galerie n'est associée à cette catégorie.
            </div>
        {% endif %}

    </div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const sortableList = document.getElementById('sortable-galleries');

            if (sortableList) {
                const categoryId = sortableList.dataset.categoryId;

                new Sortable(sortableList, {
                    handle: '.handle',
                    animation: 150,
                    onEnd: function () {
                        // Récupérer l'ordre des galeries
                        const galleryIds = Array.from(sortableList.querySelectorAll('li'))
                            .map(item => parseInt(item.dataset.galleryId));

                        // Envoyer l'ordre au serveur
                        fetch(`/admin/category/${categoryId}/update-gallery-order`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            body: JSON.stringify({
                                galleryOrder: galleryIds
                            })
                        })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    // Optionnel: afficher une notification de succès
                                    const toastContainer = document.createElement('div');
                                    toastContainer.className = 'position-fixed bottom-0 end-0 p-3';
                                    toastContainer.style.zIndex = '5';

                                    toastContainer.innerHTML = `
                                    <div class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
                                        <div class="d-flex">
                                            <div class="toast-body">
                                                <i class="bi bi-check-circle me-2"></i> Ordre des galeries mis à jour
                                            </div>
                                            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                                        </div>
                                    </div>
                                `;

                                    document.body.appendChild(toastContainer);

                                    const toast = new bootstrap.Toast(toastContainer.querySelector('.toast'));
                                    toast.show();

                                    setTimeout(() => {
                                        toastContainer.remove();
                                    }, 3000);
                                }
                            })
                            .catch(error => {
                                console.error('Erreur lors de la mise à jour de l\'ordre:', error);
                            });
                    }
                });
            }
        });
    </script>
{% endblock %}