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

{% form_theme form 'NodikaCoreBundle:Form:fields.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <style>
    ul.commandes,
    ul.commandes > li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    </style>
{% endblock %}

{% block body -%}
    {{ form_start(form) }}
    {{ form_errors(form) }}

    {{ form_row(form.dateBc) }}
    {{ form_row(form.dateBl) }}
    {{ form_row(form.dateLivraison) }}
    {{ form_row(form.dateFacturation) }}
    {{ form_row(form.dateReglement) }}
    {{ form_row(form.numeroBc) }}
    {{ form_row(form.numeroBl) }}
    {{ form_row(form.client) }}
    {{ form_row(form.nombreColis) }}


    <ul class="commandes" data-prototype="{{ form_widget(form.commandes.vars.prototype)|e }}">
        {% for key, commande in form.commandes %}
        <li>
            <div class="form-group">
                <div class="col-md-4"></div>
                <div class="col-md-4">
                    <legend>Commande {{ commande.vars.is_lot ? 'lot' : 'article' }} {{ key + 1 }}</legend>
                </div>
            </div>
            {% if commande.vars.is_lot %}
            <div class="form-group">
                {{ form_errors(commande) }}
                {{ form_label(commande.quantiteLot, null, {'label_attr': {'class': 'col-md-4 control-label'}}) }}
                <div class="col-md-4">
                    {{ form_widget(commande.quantiteLot) }}
                </div>
            </div>
            <div class="form-group">
                {{ form_label(commande.lot, null, {'label_attr': {'class': 'col-md-4 control-label'}}) }}
                <div class="col-md-4">
                    {{ form_widget(commande.lot) }}
                </div>
            </div>
            {% else %}
            <div class="form-group">
                {{ form_errors(commande) }}
                {{ form_label(commande.quantite, null, {'label_attr': {'class': 'col-md-4 control-label'}}) }}
                <div class="col-md-4">
                    {{ form_widget(commande.quantite) }}
                </div>
            </div>
            <div class="form-group">
                {{ form_label(commande.article, null, {'label_attr': {'class': 'col-md-4 control-label'}}) }}
                <div class="col-md-4">
                    {{ form_widget(commande.article) }}
                </div>
            </div>
            {% endif %}

        </li>
        {% endfor %}
    </ul>

    <div style="display:none;">{{ form_row(form.commandes) }}</div>

    <div class="form-group">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <input type="submit" class="btn btn-primary" value="Enregistrer">
            <a href="{{ path('admin_bon_livraison') }}">Revenir à la liste</a>
        </div>
    </div>

    {{ form_end(form) }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script>
    function createFormGroup($articleLink, $lotLink)
    {
        var $colMd4 = $('<div class="col-md-4"></div>').append($articleLink).append($lotLink);

        var $container = $('<div class="form-group"></div>')
            .append($('<div class="col-md-4"></div>'))
            .append($colMd4)
        ;

        return $container;
    }

    function addTagFormDeleteLink($tagFormLi) {
        var $removeFormA = $('<a href="#" class="btn btn-danger">Supprimer</a>');

        $tagFormLi.append(createFormGroup($removeFormA));

        $removeFormA.on('click', function(e) {
            // empêche le lien de créer un « # » dans l'URL
            e.preventDefault();

            // supprime l'élément li pour le formulaire de tag
            $tagFormLi.remove();
        });
    }

    function addTagForm(collectionHolder, $newLinkLi, isLot) {
        // Récupère l'élément ayant l'attribut data-prototype comme expliqué plus tôt
        var prototype = collectionHolder.attr('data-prototype');
        var legend = "<legend>Ajouter un Article/Lot</legend>";
        var legendToReplace = '<div class="form-group"><div class="col-md-4"></div><div class="col-md-4"><legend>Ajouter un article</legend></div></div>';

        if (isLot) {
            legendToReplace = legendToReplace.replace('article', 'lot');
        };
        prototype = prototype.replace(legend, legendToReplace);

        var collectionLength = collectionHolder.children().length;
        // Remplace '__name__' dans le HTML du prototype par un nombre basé sur
        // la longueur de la collection courante
        var newForm = prototype.replace(/__name__/g, collectionLength);

        // Affiche le formulaire dans la page dans un li, avant le lien "ajouter un tag"
        var $newFormLi = $('<li></li>').append(newForm);

        if (isLot) {
            var toDeletePatterns = [
                'nodika_corebundle_bon_livraison_commandes_[\\d]+_quantite',
                'nodika_corebundle_bon_livraison_commandes_[\\d]+_article'
            ];
        } else {
            var toDeletePatterns = [
                'nodika_corebundle_bon_livraison_commandes_[\\d]+_quantiteLot',
                'nodika_corebundle_bon_livraison_commandes_[\\d]+_lot'
            ];
        }

        $newFormLi.find('.form-group').each(function (key, formGrp){
            $(formGrp).find('input, select').each(function (index, input){
                    var patternFound = false;
                    $(toDeletePatterns).each(function (k, pattern){
                        if ($(input).attr('id').match(new RegExp('^'+pattern+'$', 'gi'))) {
                            patternFound = true;
                            return false; // break
                        };
                    });

                    if (patternFound) {
                        $(formGrp).remove();
                        return true; // continue
                    };
            });
        });

        $newLinkLi.before($newFormLi);

        $newFormLi.children('input[name="nodika_corebundle_bon_livraison_commandes_'+collectionLength+'_orderedAt"]').addClass('datepicker');

        $newFormLi.find('.select2').select2({width: "element"});

        addTagFormDeleteLink($newFormLi);
    }

    // Récupère le div qui contient la collection de commandes
    var collectionHolder = $('ul.commandes');

    // ajoute un lien « add a tag »
    var $addOrderLink = $('<a href="#" class="add_order_link btn btn-primary">Ajouter un article</a>');

    var $addLotLink = $('<a href="#" id="link-lot" class="add_order_link btn btn-primary">Ajouter un lot</a>');

    var $newLinkLi = $('<li></li>').append(createFormGroup($addOrderLink, $addLotLink));

    jQuery(document).ready(function() {
       // ajoute un lien de suppression à tous les éléments li de
        // formulaires de tag existants
        collectionHolder.children('li').each(function() {
            addTagFormDeleteLink($(this));
        });

        // ajoute l'ancre « ajouter un tag » et li à la balise ul
        collectionHolder.append($newLinkLi);

        var articleLinkCallback = function(e) {
            // empêche le lien de créer un « # » dans l'URL
            e.preventDefault();

            // ajoute un nouveau formulaire tag (voir le prochain bloc de code)
            addTagForm(collectionHolder, $newLinkLi, ($(this).attr('id') == 'link-lot'));

           $('.datepicker').datepicker({dateFormat:'dd/mm/yy'});
        }

        $addOrderLink.on('click', articleLinkCallback);
        $addLotLink.on('click', articleLinkCallback);
    });
    </script>
{% endblock %}