{% extends 'base.html.twig' %}
{% form_theme form 'bootstrap_4_horizontal_layout.html.twig' %}
{% block title %}Ajout tutoriel{% endblock %}
{% block title_page %}Ajout tutoriel{% endblock %}

{% block container_start %}

<div class="card">
    <div class="card-body">
        {{ include('package_tutorial/tutorial/_form.html.twig') }}
    </div>
</div>
{% endblock %}


{% block javascript %}

parrent()


<script type="text/javascript">
    $(document).ready(function(){

        //Apparence des Select 2
        $('select').select2();

        //var dataPrototype = $('#tutorial_tutorialFiles').attr('data-prototype');
        var dataPrototype = '<div class="form-group row"><legend class="col-form-label col-sm-2 col-form-label">__name__label__</legend><div class="col-sm-8"><div id="tutorial_tutorialFiles___name__"> <div class="input-group mb-3"> <input type="text" id="tutorial_tutorialFiles___name___name" name="tutorial[tutorialFiles][__name__][name]" maxlength="255" class="form-control" placeholder="Nom fichier" /> <span class="input-group-text"> -> </span> <div class="custom-file"> <input type="file" id="tutorial_tutorialFiles___name___tutorialFile" name="tutorial[tutorialFiles][__name__][tutorialFile]" class="custom-file-input" /> <label for="tutorial_tutorialFiles___name___tutorialFile"  class="custom-file-label"> </div> </div> </div> </div></div>'

        var nb = dataPrototype.length-6;
        dataPrototype = dataPrototype.substring(0,nb) + "<div class='col-sm-2 btn-delete'></div></div>";
        $('#tutorial_tutorialFiles').attr('data-prototype', dataPrototype);





        // On récupère la balise <div> en question qui contient l'attribut « data-prototype » qui nous intéresse.
        var $container = $('div#tutorial_tutorialFiles');

        // On définit un compteur unique pour nommer les champs qu'on va ajouter dynamiquement
        var index = $container.find(':input').length;

        // On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
        $('#add_file').click(function(e) {
            addMaintenanceDetail($container);

            e.preventDefault(); // évite qu'un # apparaisse dans l'URL
            return false;
        });

        // On ajoute un premier champ automatiquement s'il n'en existe pas déjà un (cas d'une nouvelle annonce par exemple).
        if (index == 0) {
            addMaintenanceDetail($container);
        } else {
            // S'il existe déjà des catégories, on ajoute un lien de suppression pour chacune d'entre elles
            $container.children('div').each(function() {
                addDeleteLink($(this));
            });
        }



        // La fonction qui ajoute un formulaire CategoryType
        function addMaintenanceDetail($container) {
            // Dans le contenu de l'attribut « data-prototype », on remplace :
            // - le texte "__name__label__" qu'il contient par le label du champ
            // - le texte "__name__" qu'il contient par le numéro du champ
            var template = $container.attr('data-prototype')
                .replace(/__name__label__/g, 'Fichier n°' + (index+1))
                .replace(/__name__/g,        index)
            ;

            // On crée un objet jquery qui contient ce template
            var $prototype = $(template);

            // On ajoute au prototype un lien pour pouvoir supprimer la catégorie
            addDeleteLink($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 addDeleteLink($prototype) {
            // Création du lien
            var $deleteLink = $('<a href="#" class="btn btn-danger">Supprimer</a>');

            // Ajout du lien
            $prototype.find('.btn-delete').append($deleteLink);

            // Ajout du listener sur le clic du lien pour effectivement supprimer la catégorie
            $deleteLink.click(function(e) {
                $prototype.remove();

                e.preventDefault(); // évite qu'un # apparaisse dans l'URL
                return false;
            });
        }
    });
</script>



{% endblock %}