{% extends "backend/base.html.twig" %}

{% block title %}Données à collecter{% endblock %}

{% block breadcrumb %}
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">Données à collecter</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ path('admin.home') }}">Accueil</a></li>
                        <li class="breadcrumb-item active">Données à collecter</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
{% endblock %}

{% block content %}

    <section class="content">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title"></h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="card-body row justify-content-center">

                        {{ form_start(form, {'attr': {'class': 'col-8'}}) }}

                        {#{ form_rest(form) }#}
                        <div class="" id="data-list" data-prototype="{{ form_widget(form.companyData.vars.prototype)|e('html_attr') }}">

                            {% for data in form.companyData %}
                                <div class="panel panel-warning">
                                    <div class="panel-heading">
                                        <strong></strong>
                                    </div>
                                    <div class="panel-body">
                                        {{ form_row(data) }}
                                    </div>
                                </div>
                            {% endfor %}

                        </div>

                        {{ form_rest(form) }}
                        {{ form_end(form) }}

                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->



    </section>
{% endblock %}

{% block javascripts %}
<script type="text/javascript">
    // this variable is the list in the dom, it's initiliazed when the document is ready
    var $collectionHolder;
    // the link which we click on to add new items
    var $addNewItem = $('<a href="#" class="btn btn-info">Ajouter une nouvelle donnée</a>');

    // when the page is loaded and ready
    $(document).ready(function () {
        // get the collectionHolder, initilize the var by getting the list;
        $collectionHolder = $('#data-list');
        // append the add new item link to the collectionHolder
        $collectionHolder.append($addNewItem);
        // add an index property to the collectionHolder which helps track the count of forms we have in the list
        $collectionHolder.data('index', $collectionHolder.find('.panel').length)
        // finds all the panels in the list and foreach one of them we add a remove button to it
        // add remove button to existing items
        $collectionHolder.find('.panel').each(function () {
            // $(this) means the current panel that we are at
            // which means we pass the panel to the addRemoveButton function
            // inside the function we create a footer and remove link and append them to the panel
            // more informations in the function inside
            addRemoveButton($(this));
        });
        // handle the click event for addNewItem
        $addNewItem.click(function (e) {
            // preventDefault() is your  homework if you don't know what it is
            // also look up preventPropagation both are usefull
            e.preventDefault();
            // create a new form and append it to the collectionHolder
            // and by form we mean a new panel which contains the form
            addNewForm();
        })
    });
    /*
     * creates a new form and appends it to the collectionHolder
     */
    function addNewForm() {
        // getting the prototype
        // the prototype is the form itself, plain html
        var prototype = $collectionHolder.data('prototype');
        // get the index
        // this is the index we set when the document was ready, look above for more info
        var index = $collectionHolder.data('index');
        console.log(index);
        // create the form
        var newForm = prototype;
        // replace the __name__ string in the html using a regular expression with the index value
        newForm = newForm.replace(/__name__/g, index);
        // incrementing the index data and setting it again to the collectionHolder
        $collectionHolder.data('index', index+1);
        // create the panel
        // this is the panel that will be appending to the collectionHolder
        var $panel = $('<div class="panel panel-warning"><div class="panel-heading"></div></div>');
        // create the panel-body and append the form to it
        var $panelBody = $('<div class="panel-body"></div>').append(newForm);
        // append the body to the panel
        $panel.append($panelBody);
        // append the removebutton to the new panel
        addRemoveButton($panel);
        // append the panel to the addNewItem
        // we are doing it this way to that the link is always at the bottom of the collectionHolder
        $addNewItem.before($panel);
    }

    /**
     * adds a remove button to the panel that is passed in the parameter
     * @param $panel
     */
    function addRemoveButton ($panel) {
        // create remove button
        var $removeButton = $('<a href="#" class="btn btn-danger">Supprimer</a>');
        // appending the removebutton to the panel footer
        var $panelFooter = $('<div class="panel-footer"></div>').append($removeButton);
        // handle the click event of the remove button
        $removeButton.click(function (e) {
            e.preventDefault();
            // gets the parent of the button that we clicked on "the panel" and animates it
            // after the animation is done the element (the panel) is removed from the html
            $(e.target).parents('.panel').slideUp(1000, function () {
                $(this).remove();
            })
        });
        // append the footer to the panel
        $panel.append($panelFooter);
    }

</script>
{% endblock %}