{% extends 'default/form.html.twig' %}

{% block content %}
{{ form_start(form, {'attr': {'class': 'form-horizontal', 'id':'form_annexes'}}) }}
    <div class="row">
        <div class="col-md-6">
            <div class="form-floating mb-3">
                {{ form_widget(form.type, {'attr': {'class': 'form-control form-select', 'placeholder':"{{'Form.Notice.Type.Label' | trans}}"}}) }}
                {{ form_label(form.type, 'Form.Notice.Type.Label' | trans) }}
            </div>
        </div>
        <div class="col-md-6">
            <h6>{{'Form.Notice.Statut.Label' | trans}}</h6>
            <div class="mb-3 form-control form-check">
            {% for t in form.statut %}
                {{ form_widget(t, {'attr': {'class': ''}}) }}  {{ form_label(t) }}
                <span class='m-l-30'></span>
            {% endfor %}
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-floating mb-3">
                {{ form_widget(form.attachFile, {'attr': {'class': 'form-control'}}) }}
                {{ form_label(form.attachFile, 'Form.Notice.File' | trans) }}
                <span class="help-block text-info"><small><i>{{ 'Form.Notice.Attachment'| trans }}</i></small></span>
            </div> 
        </div>
        <div class="col-md-6">
            <div class="form-floating mb-3">
                {{ form_widget(form.contact, {'attr': {'class': 'form-control', 'placeholder':"{{'Form.Notice.Contact' | trans}}"}}) }}
                {{ form_label(form.contact, 'Form.Notice.Contact' | trans) }}
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-floating mb-3">
                {{ form_widget(form.description, {'attr': {'class': 'form-control', 'placeholder':"{{'Form.Public.Description' | trans}}"}}) }}
                {{ form_label(form.description, 'Form.Public.Description' | trans) }}
            </div>
        </div>
    </div>
    {% import "notice/annex/prototype.html.twig" as macAnnex %}       
        <div id="notice_annex" class="tags" data-prototype="{{ macAnnex.AnnexesItem(form.noticeAnnexes.vars.prototype)|e }}">      
            {% for a in form.noticeAnnexes %}
                {{ macAnnex.AnnexesItem(a) }} 
            {% endfor %}    
        </div>
    <div class="form-group m-t-20">
        <div class="ms-auto mt-3 mt-md-0">
            <button id='submit_form' type="submit" class="btn btn-success text-white">{{'Form.Submit' | trans}}</button>
            <a href='{{path(return)}}' class="btn btn-warning text-white"><i class='ti-control-backward'></i> {{'Form.Return' | trans}}</a>
        </div>
    </div>
    {{ form_widget(form._token) }}
    {#{ form_rest(form) }#}
{#{ form_end(form) } Fermeture manuelle du formulaire pour éviter l'ajout du mot "Annex" à la fin et autres erreurs javascript#}
</form>
{% endblock %}
{% block custom_js %}
    {{parent()}}
    <script type="text/javascript">
        $(document).ready(function() {
            //Prise en compte du bouton add/remove booster
            // On récupère la balise <div> en question qui contient l'attribut « data-prototype » qui nous intéresse.  
            var $container = $('div#notice_annex');  
            // On ajoute un lien pour ajouter une nouvelle catégorie  
            var $lienAjout = $('<a href="#" id="add_annex" class="btn btn-info">{{'Form.Notice.Annex' | trans}}</a><p></p>');  
            $container.append($lienAjout);  // On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
            $lienAjout.click(function(e) {    
                    ajouterDoc($container);    
                    e.preventDefault(); // évite qu'un # apparaisse dans l'URL    
                    return false;  
            });  
            // On définit un compteur unique pour nommer les champs qu'on va ajouter dynamiquement  
            var index = $container.find(':input').length;  
            // On ajoute un premier champ directement s'il n'en existe pas déjà un (cas d'une nouvelle entité par exemple).  
            if (index === 0) {    
                    //ajouterDoc($container);  
            } else {    
            // Pour chaque catégorie déjà existante, on ajoute un lien de suppression    
                $container.children('div').each(function() {
                        ajouterLienSuppression($(this));    
                });  
            }  
            // La fonction qui ajoute un formulaire Categorie  
            function ajouterDoc($container) {    
                var $prototype = $($container.attr('data-prototype').replace(/__name__label__/g, 'Annex n°' + (index+1)).replace(/__name__/g, index));    
                // On ajoute au prototype un lien pour pouvoir supprimer la catégorie    
                ajouterLienSuppression($prototype);    
                // On ajoute le prototype modifié à la fin de la balise <div>    
                $container.append($prototype);    
                // Enfin, on incrémente le compteur pour que le prochain ajout se fasse avec un autre numéro    
                index++;  
            }  
            // La fonction qui ajoute un lien de suppression d'une catégorie  
            function ajouterLienSuppression($prototype) {    
                // Création du lien    
                var $lienSuppression = $('<a id="remove_annex" href="#" class="btn btn-warning" style="margin-top: 0px;">{{'Form.Remove' | trans}}</a>');    
                // Ajout du lien    
                $prototype.append($lienSuppression);    
                // Ajout du listener sur le clic du lien    
                $lienSuppression.click(function(e) {    
                    if(index > 0) {
                        $prototype.remove();      
                        e.preventDefault(); 
                        index--;
                        // évite qu'un # apparaisse dans l'URL      
                        return false; 
                    }
                });  
            }
        });
    </script>
{% endblock %}