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

{% block title %}Beton{% endblock %}

{% block body %}

    {{ form_start(form) }}
    {{ form_widget(form.creatAt) }}
    <ul id="stock-fields-list"
        data-prototype="{{ form_widget(form.centrals.vars.prototype)|e }}"
        data-widget-tags="{{ '<li></li>'|e }}"
        data-widget-counter="{{ form.centrals|length }}">
        {% for stockField in form.centrals %}
            <li>
                {{ form_errors(centralsField) }}
                {{ form_widget(centralsField) }}
            </li>
        {% endfor %}
    </ul>
    <br>
    <button type="button" class="add-another-collection-widget button w-24 mr-1 mb-2 bg-theme-1 text-white" data-list-selector="#stock-fields-list">Ajouter</button>
    <button class="btn button w-24 mr-1 mb-2 bg-theme-9 text-white">{{ button_label|default('Enregister') }}</button>
    {{ form_end(form) }}

{% endblock %}
{% block javascripts %}
    <script>

        jQuery(document).ready(function () {

            $("button").click(function () {
                alert('salut');
                $("select").addClass("select2 w-full border mt-2");
            })

            $collectionHolder = $('ul.tags');

            $collectionHolder.find('li').each(function() {
                addTagFormDeleteLink($(this));
            });

            jQuery('.add-another-collection-widget').click(function (e) {
                var list = jQuery(jQuery(this).attr('data-list-selector'));
                var counter = list.data('widget-counter') || list.children().length;

                var newWidget = list.attr('data-prototype');
                newWidget = newWidget.replace(/__name__/g, counter);
                counter++;
                list.data('widget-counter', counter);

                var newElem = jQuery(list.attr('data-widget-tags')).html(newWidget);
                newElem.appendTo(list);
                addTagFormDeleteLink(newElem);
            });

            function addTagFormDeleteLink($tagFormLi) {
                var $removeFormButton = $('<button type="button" class="btn button w-24 mr-1 mb-2 bg-theme-6 text-white ">Supprimer</button>');
                $tagFormLi.append($removeFormButton);

                $removeFormButton.on('click', function(e) {
                    // remove the li for the tag form
                    $tagFormLi.remove();
                });
            }

        });    </script>
{% endblock %}