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

{% block title %}Modifier un Jardin{% endblock %}

{% block body %}
    <section class="container border p-5" style="margin-top: 150px; margin-bottom: 150px;">
        <h1 class="text-center">Modifier le Jardin</h1>

        {{ form_start(form) }}

        <div class="form-group mb-3">
            {{ form_label(form.title) }}
            {{ form_widget(form.title, { 'attr': {'class': 'form-control'} }) }}
            {{ form_errors(form.title) }}
        </div>

        <div class="form-group mb-3">
            {{ form_label(form.photos) }}
            <div id="photos-collection" data-prototype="{{ form_widget(form.photos.vars.prototype)|e('html') }}">
                {{ form_widget(form.photos) }}
            </div>
            <button type="button" class="btn btn-primary mt-2" id="add-photo">+ Ajouter une photo</button>
            {{ form_errors(form.photos) }}
        </div>

        {% if garden.photos is defined and garden.photos is not empty %}
            <h4>Photo(s) actuelle(s)</h4>
            <div id="photo-list" class="d-flex flex-wrap gap-3 mb-3">
                {% for photo in garden.photos %}
                    <div class="position-relative photo-item mr-3" data-photo-id="{{ photo.id }}">
                        <a href="{{ asset(photo.filePath) }}" target="_blank"><img src="{{ asset(photo.filePath) }}" alt="Photo actuelle" width="150" style="object-fit: cover"></a>
                        <button class="btn btn-danger btn-sm position-absolute top-0 end-0 delete-photo"
                                style="right: 0; width: 31px;"
                                data-id="{{ photo.id }}"
                                data-token="{{ csrf_token('delete' ~ photo.id) }}">
                            X
                        </button>
                    </div>
                {% endfor %}
            </div>
        {% endif %}

        <div class="form-group mb-3">
            {{ form_label(form.city) }}
            {{ form_widget(form.city, { 'attr': {'class': 'form-control'} }) }}
            {{ form_errors(form.city) }}
        </div>

        <div class="form-group mb-3">
            {{ form_label(form.description) }}
            {{ form_widget(form.description, { 'attr': {'class': 'form-control'} }) }}
            {{ form_errors(form.description) }}
        </div>

        <div class="form-group mb-3">
            {{ form_label(form.orderIndex) }}
            {{ form_widget(form.orderIndex, { 'attr': {'class': 'form-control'} }) }}
            {{ form_errors(form.orderIndex) }}
        </div>

        <button class="btn btn-warning col-12 mb-2 mt-3">Mettre à jour</button>
        {{ form_end(form) }}

        <a href="{{ path('admin_garden_list') }}" class="btn btn-secondary col-12">Retour à la liste</a>
    </section>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            let collectionHolder = document.querySelector("#photos-collection");
            let addPhotoButton = document.querySelector("#add-photo");

            if (!collectionHolder || !addPhotoButton) return;

            addPhotoButton.addEventListener("click", function () {
                let prototype = collectionHolder.dataset.prototype;
                let index = collectionHolder.children.length;

                let newForm = prototype.replace(/__name__/g, index);
                let div = document.createElement("div");
                div.innerHTML = newForm;
                collectionHolder.appendChild(div);
            });
        });

        const photoList = document.querySelector('#photo-list');
        const photoTitle = document.querySelector('h4'); // ou cible plus précis si besoin

        document.querySelectorAll('.delete-photo').forEach(button => {
            button.addEventListener('click', function (e) {
                e.preventDefault();

                const photoId = this.dataset.id;
                const csrfToken = this.dataset.token;
                const photoDiv = this.closest('.photo-item');

                if (!confirm("Voulez-vous supprimer cette photo ?")) return;

                fetch('{{ path("admin_photo_delete_ajax") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        id: photoId,
                        _token: csrfToken
                    })
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            photoDiv.remove();

                            // Vérifie s'il reste des photos
                            if (photoList.querySelectorAll('.photo-item').length === 0) {
                                photoList.remove();
                                if (photoTitle) photoTitle.remove(); // Enlève le titre "Photo(s) actuelle(s)"
                            }
                        } else {
                            alert("Erreur lors de la suppression.");
                        }
                    })
                    .catch(error => {
                        console.error('Erreur AJAX :', error);
                        alert("Une erreur est survenue.");
                    });
            });
        });
    </script>
{% endblock %}