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

{% block title %}Création produit{% endblock %}
{% form_theme formProductFollow 'bootstrap_4_horizontal_layout.html.twig' %}

{% block title_page %}Création de produit(s){% endblock %}



{% block container_start %}
    <!-- general form elements -->
    <div class="card card-primary">
        {#
        <div class="card-header">
            <h3 class="card-title">Quick Example</h3>
        </div>
        <!-- /.card-header -->
        #}
        <!-- form start -->

        {{ form_start(formProductFollow) }}
        <div class="card-body">
            {{ form_row(formProductFollow.company,{'label':'Société'}) }}
            {{ form_row(formProductFollow.product,{'label':'Produit', 'attr' : {'class':'select2'}}) }}
        </div>
        <!-- /.card-body -->

        <div class="">
            <div class="card-body">
                <table id="list_add_pf" class="table table-hover text-nowrap table-sm">
                    <thead>
                    <tr>
                        <th scope="col" class="text-center">#</th>
                        <th scope="col" class="text-center">N° série fabriquant</th>
                        <th scope="col"></th>
                    </tr>
                    </thead>
                    <tbody>
                    {{ form_row(formProductFollow.new_pf,{'label':'Produit(s)'}) }}
                    </tbody>
                </table>
                <div class="text-center">
                    <a href="#" id="add_new_pf" class="btn btn-primary">Ajouter un element</a>
                </div>
            </div>
        </div>





        <div class="card-footer text-center">
            <button type='submit' class='btn btn-success'>Ajouter</button>
        </div>
        {{ form_end(formProductFollow) }}

    </div>
    <!-- /.card -->

{% endblock %}







{% block javascript %}
{{ parent() }}

<script type="text/javascript">

</script>

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

function suivant(enCours, suivant, limite){
    if (enCours.value.length == limite)
    {
             document.code[suivant].focus();
    }
}

        //Ajustement visuel
        var dataprototype = "<tr>" +
            "<th scope=\"row\">__name__label__</th>" +
            "<td>" +
            "<input type=\"text\" id=\"product_follow_new_pf___name___manufacturerSerialNumber\" nb=\"__nb__\" name=\"product_follow[new_pf][__name__][manufacturerSerialNumber]\" maxlength=\"255\" class=\"form-control\" />" +
            "</td>" +
            "</tr>"

        $('#product_follow_scan_new_pf').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#product_follow_scan_new_pf');

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

        // 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_new_pf').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, '' + (index+1))
                .replace(/__name__/g,        index)
                .replace(/__nb__/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>
            list.append($prototype);

            $( "[nb="+index+"]" ).focus()
            // 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 = $('<td><a href="#" class="btn btn-danger"><i class="far fa-trash-alt"></i></a></td>');

            // Ajout du lien
            $prototype.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;
            });
        }



        document.addEventListener("keydown", function(event) {
        if (event.keyCode == 13) {
            event.preventDefault();
            addMaintenanceDetail($container);





            return false;
        }
        }, true); // "true" => phase de capture

    });
</script>
{% endblock %}