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

{% block title %}Modification produit{% endblock %}
{% form_theme formProduct 'bootstrap_4_horizontal_layout.html.twig' %}

{% block title_page %}

    {% if editMode %}
        Modification du produit : {{ product.name }} ({{ product.reference }})
    {% else %}
        Création d'un produit
    {% endif %}


{% 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(formProduct) }}
            <div class="card-body">
                {{ form_row(formProduct.name,{'attr':{'placeholder':'Nom du produit'},'label':'Nom'}) }}

                {{ form_row(formProduct.reference,{'attr':{'placeholder':'Référence'},'label':'Référence'}) }}

                {{ form_row(formProduct.prefixReference,{'attr':{'placeholder':''},'label':'Préfix référence'}) }}

                {{ form_row(formProduct.category,{'attr':{'placeholder':'Selection d\'une categorie parente', 'style':'height:200px;'},'label':'Catégorie'}) }}

                {{ form_row(formProduct.isPack,{'label':'Est-ce un Pack'}) }}

                {{ form_row(formProduct.follow,{'label':'Tracer'}) }}

                {{ form_row(formProduct.state,{'attr':{'placeholder':'Selection de l\'état'},'label':'Etat'}) }}

                {{ form_row(formProduct.description,{'label':'Description'}) }}

                {{ form_row(formProduct.imageFile,{'label':'Selectioner une image'}) }}

                {% if is_granted("ROLE_UPDATE_PRODUCT_CREATED_NUMBER") and formProduct.createdNumber is defined %}
                    {{ form_row(formProduct.createdNumber,{'label':'Nombre créé'}) }}
                {% endif %}
            </div>
            <!-- /.card-body -->

            <div class="card-footer text-center">
                <button type='submit' class='btn btn-success'>
                    {% if editMode  %}
                        Modifier
                    {% else %}
                        Ajouter
                    {% endif %}
                </button>
            </div>
            {{ form_end(formProduct) }}

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

{% endblock %}




















{% block section_avec_sous_menu %}
    <div  class="content_section">
        <h1>{% if editMode %}
                Modification d'un produit
            {% else %}
                Création d'un produit
            {% endif %}</h1>

        {{ form_start(formProductFollow) }}

        {{ form_row(formProductFollow.product,{'label':'Produit'}) }}
        {{ form_row(formProductFollow.site,{'label':'Site'}) }}
        {{ form_row(formProductFollow.state,{'label':'Etat'}) }}
        {{ form_row(formProductFollow.pack,{'label':'Pack'}) }}
        {{ form_row(formProductFollow.comment,{'label':'Commentaire'}) }}


        <table id="list_add_pf" class="table table-sm">
            <thead>
            <tr>
                <th scope="col" class="text-center">N° série fabriquant</th>
                <th scope="col" class="text-center">N° série société</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>
                    {{ form_row(formProductFollow.manufacturerSerialNumber) }}
                </td>
                <td>
                    {{ form_row(formProductFollow.companySerialNumber) }}
                </td>
            </tr>
            </tbody>
        </table>




        {{ form_end(formProductFollow) }}
    </div>

{% endblock %}


{% block javascripts %}

    {{ parent() }}

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

            //Ajustement visuel
            var dataprototype = "<tr>" +


                $('#product_follow_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_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 {

            }

            // 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)
                ;

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


                // On ajoute le prototype modifié à la fin de la balise <div>
                list.append($prototype);

                // Enfin, on incrémente le compteur pour que le prochain ajout se fasse avec un autre numéro
                index++;
            }


        });
    </script>

{% endblock %}