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

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

{% block body %}

    <section class="container border p-5" style="margin-top: 150px; margin-bottom: 150px;">
        <h1 class="text-center">Jardin à visiter</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 %}
            {% for photo in garden.photos %}
                <img src="{{ photo.filePath }}" alt="Photo du jardin" width="150">
            {% endfor %}
        {% 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-success col-12 mb-2 mt-3">Ajouter</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);
            });
        });
    </script>
{% endblock %}