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

{% block stylesheet %}
    <style>
        fieldset {
            margin: 0;
            padding: 0;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            padding-left: 0.75rem;
            padding-right: 0.75rem;
            border-radius: 0.375rem;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border-width: 1px;
            width: 100%;
            margin-top: 0.5rem;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="intro-y flex items-center mt-8">
        <h2 class="text-lg font-medium mr-auto">
        </h2>
    </div>
    <div class="intro-y col-span-12 lg:col-span-6">
            <!-- BEGIN: Form Layout -->
            <div class="intro-y box p-5">

                {{ form_start(form) }}
                {{ form_row(form.family) }}
                {{ form_row(form.name) }}
                {{ form_row(form.weight) }}
                {{ form_row(form.code) }}
                {{ form_row(form.rate) }}
                {{ form_row(form.price) }}
                {{ form_row(form.maturity) }}
                {{ form_row(form.section) }}
                {{ form_row(form.composition) }}
                <ul class="composition" data-prototype="{# form_widget(form.composition.vars.prototype)|e('html_attr') #}">

                </ul>
                <button type="button" class="button w-24 bg-theme-3 text-white add_item_link" data-collection-holder-id="product_composition">Ajouter element</button>
                <div class="text-right mt-5">
                    <a href=""  type="button" class="button w-24 border text-gray-700 mr-1">Retour</a>
                    <button type="submit" class="button w-24 bg-theme-1 text-white">Enregistrer</button>
                </div>
                {{ form_end(form) }}

            </div>
            <!-- END: Form Layout -->
    </div>

{% endblock %}

{% block javascripts %}
    <script>
        jQuery(document).ready(function() {
            var $compositionCollectionHolder = $('#product_composition');
            $compositionCollectionHolder.find('fieldset').each(function() {
                addTagFormDeleteLink($(this));
            });
            $compositionCollectionHolder.data('index', $compositionCollectionHolder.find('input').length);

            $('body').on('click', '.add_item_link', function(e) {
                var $collectionHolderClass = $(e.currentTarget).data('collectionHolderId');
                // add a new tag form (see next code block)
                addFormToCollection($collectionHolderClass);
            })

            function addFormToCollection($collectionHolderClass) {
                var $collectionHolder = $('#' + $collectionHolderClass);

                var prototype = $collectionHolder.data('prototype');

                var index = $collectionHolder.data('index');

                var newForm = prototype;

                newForm = newForm.replace(/__name__/g, index);

                $collectionHolder.data('index', index + 1);

                //var $newFormLi = $('<li></li>').append(newForm);
                var $newFormLi = $(newForm);

                $collectionHolder.append($newFormLi)
                addTagFormDeleteLink($newFormLi);
            }

            function addTagFormDeleteLink($tagFormLi) {
                var $removeFormButton = $('<button class="button w-24 bg-theme-2 text-white" type="button">Delete this tag</button>');
                $tagFormLi.append($removeFormButton);

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