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

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

{% block title_page %}Modification du produit :

    {% if editMode %}
        {% if productFollow.companySerialNumber is not empty %}
            {{ productFollow.companySerialNumber }}
        {% else %}
            {{ productFollow.manufacturerSerialNumber }}
        {% endif %}
    {% 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(formProductFollow) }}
            <div class="card-body">
                {{ form_row(formProductFollow.company,{'label':'Société'}) }}
                {{ form_row(formProductFollow.product,{'label':'Produit'}) }}
                {{ form_row(formProductFollow.site,{'label':'Site', 'attr': {'class': 'select2'}}) }}
                {{ form_row(formProductFollow.state,{'label':'Etat'}) }}
                {{ form_row(formProductFollow.pack,{'label':'Pack', 'attr': {'class': 'select2'}}) }}
                {{ form_row(formProductFollow.comment,{'label':'Commentaire'}) }}
                {{ form_row(formProductFollow.manufacturerSerialNumber,{'label':'N° série fabriquant'}) }}
                {{ form_row(formProductFollow.companySerialNumber,{'label':'N° série société'}) }}

                {% if productFollow.product.isPack %}
                {{ form_row(formProductFollow.add) }}
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 text-center">
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-ajouter">
                                    Ajouter un élément au pack
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->

                <div class="card js-add">

                    <div class="card-header" style="margin: auto;">
                        <h3>Ajout(s)</h3>
                    </div>


                    <div class="row">
                        <div class="col-12">
                            <table class="table table-sm table-striped">
                                <thead>
                                <tr>
                                    <th scope="col" class="text-center">Nom </th>
                                    <th scope="col" class="text-center">Reference </th>
                                    <th scope="col" class="text-center">Série Fab.</th>
                                    <th scope="col" class="text-center">Série Societe </th>
                                    <th scope="col" class="text-center">Commentaire</th>
                                    <th scope="col" class="text-center"></th>
                                </tr>
                                </thead>
                                <tbody id="body_add">
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="add_list">
                            {{ form_row(formProductFollow.add) }}
                        </div>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->

                <div class="card-body table-responsive p-0 js-delete">
                    <div class="card-header" style="margin: auto;">
                        <h3 class="text-center">Contenu du pack</h3>
                    </div>

                    {{ form_row(formProductFollow.productsFollows) }}

                    <table class="table table-head-fixed text-nowrap table-sm table-striped">
                        <thead>
                        <tr>
                            <th scope="col" class="text-center">#</th>
                            <th scope="col" class="text-center">Nom </th>
                            <th scope="col" class="text-center">Reference </th>
                            <th scope="col" class="text-center">Série Fab.</th>
                            <th scope="col" class="text-center">Série Societe </th>
                            <th scope="col" class="text-center">Etat </th>
                            <th scope="col" class="text-center">Commentaire</th>
                            <th class="text-center" scope="col">Retirer</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
                {% endif %}

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

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





    <div class="modal fade" id="modal-ajouter">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Ajouter un élément</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    {{ form_row(formPackAddProductFollow.manufacturerSerialNumber,{'attr':{'placeholder':''},'label':'SN'}) }}
                </div>





                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="btn-ajout" type="button" onclick="ajout()" class="btn btn-primary" data-dismiss="modal">Ajouter</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->








    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        var $loading = $('#loading').hide();
        $(document)
            .ajaxStart(function () {
                $loading.show();
            })
            .ajaxStop(function () {
                $loading.hide();
            });


        $('#del_list').html('')

        {#
        materielSurSite = []
        {% set i = 1 %}
        {% for product in productFollow.productsFollows %}
        materielSurSite["{{product.manufacturerSerialNumber}}"] = "{{ product | namePf ({'site': site}) }}"
        {% set i = i + 1 %}
        {% endfor %}
        #}

        listeAjout = []
        listeSupprimer = []

        a = 0
        d = 0

    })

    function ajout(){

    sn = $('#search_product_follow_manufacturerSerialNumber').val();


    modal = $('#modal-ajouter').hide();
    $('.modal-backdrop').remove();

    $.ajax({
        url : '/api/search/oneProductBySerial',
        type : 'GET',
        data : 'pattern=' + sn + '&type=json',
        dataType : 'json',
        success : function(json, statut){

                    if( typeof json.reference === undefined ){
                        toastr.error("Aucun produit n'a été trouvé.")

                    }else{

                        if( json.statut === 'Disponible' ){

                            if(listeAjout.indexOf(sn) === -1){

                            html = '<tr style="font-size: 0.8em;">'
                                html +=     '<td style="vertical-align: middle;" id="'+ sn +'-sn-name" class="text-center" scope="col">' + json['name'] + '</td>'
                                html +=     '<td style="vertical-align: middle;" id="'+ sn +'-sn-reference" class="text-center" scope="col">' + json['reference'] + '</td>'
                                html +=     '<td style="vertical-align: middle;" id="'+ sn +'-sn" class="text-center" scope="col">' + json['manufacturerSerialNumber'] + '</td>'
                                if( json['companySerialNumber'] !== null ){
                                    html +=     '<td style="vertical-align: middle;" id="'+ sn +'-sn-companySerialNumber" class="text-center" scope="col">' + json['companySerialNumber'] + '</td>'
                                }else{
                                    html +=     '<td style="vertical-align: middle;" id="'+ sn +'-sn-companySerialNumber" class="text-center" scope="col"> - </td>'
                                }

                                if( json['comment'] !== null ) {
                                    html += '<td style="vertical-align: middle;" id="' + sn + '-sn-comment" class="text-center" scope="col">' + json['comment'] + '</td>'
                                }else{
                                    html += '<td style="vertical-align: middle;" id="' + sn + '-sn-comment" class="text-center" scope="col"> - </td>'
                                }
                                html +=     '<td class="text-center" scope="col"><button type="button" onclick="btnSupprAdd(this,' + a + ',\''+ sn +'\')" class="btn btn-danger btn-sm" ><i class="far fa-trash-alt"></i></button></td>'
                                html +='</tr>'

                            $('#body_add').append(html)


                            //Ajout dans le formulaire
                            htmlAdd = "<input class='add_"+ a +"' type='hidden' id='pack_pf_add_"+ a +"_product1' name='pack_pf[add]["+ a +"][manufacturerSerialNumber]' Value='"+ sn +"' />"
                            $('#add_list').append(htmlAdd)




                            listeAjout.push(sn)
                            a = a + 1
                            toastr.success(sn + ' à bien été ajouté.')
                            $('#maintenance_technicien_add_product_follow_name').val('')
                            }else{

                                type = $('#btn-ajout').html()
                                if (type === "Modifier") {
                                toastr.success(sn + ' a été mis à jour.')
                                $('#'+ sn +'-nom').html(nom)
                                }else {
                                toastr.error(sn + " est déjà sur la liste d'ajout.")
                                }

                            }

                        }else if( json['statut'] === 'Sur site' ){
                        toastr.error(sn + ' est déjà sur un site.')
                        }else if( json['statut'] === 'Perdu' ){
                        toastr.error(sn + ' est déclaré perdu.')
                        }else if( json['statut'] === 'Défectueux' ){
                        toastr.error(sn + ' est déclaré défectueux.')
                        }else if( json['statut'] === 'Cassé' ){
                        toastr.error(sn + ' est déclaré cassé.')
                        }else{
                        toastr.error('Un problème est survenu avec ' + sn + '.')
                        }

                    }
        },

        error : function(resultat, statut, erreur){

        },

        complete : function(resultat, statut){

        }

    });

    $('#search_product_follow_manufacturerSerialNumber').val('')


    }



    function btnSupprAdd(elem, nb, sn){
        $(elem).closest('tr').remove()
        $('.add_'+nb).remove()
        listeAjout.splice(listeAjout.indexOf(sn), 1)
    }

</script>


    <script  type="text/javascript">

        //Scipt pour la partie Suppression

        $(document).ready(function (){

            var i = 1
            $('#product_follow_edit_productsFollows').children().each(function() {
                var label = $(this).find('.delete_product option:selected').text()
                label = label.split('$|$')

                var state = $(this).find('.delete_product_state')[0].outerHTML
                var comment = $(this).find('.delete_product_comment')[0].outerHTML
                var deposer = $(this).find('.delete_product_delete')[0].outerHTML
                var manufacturerSerialNumber = $(this).find('.delete_product_manufacturerSerialNumber')[0].value
                var companySerialNumber = $(this).find('.delete_product_companySerialNumber')[0].value
                var id = $(this).find('.delete_product_id')[0].outerHTML





                var nb = '<th class="text-center" scope="col">' + i + '</th>'
                var name = '<th class="" scope="col">' + label[0] + '</th>'
                var reference = '<th class="text-center" scope="col">' + label[1] + '</th>'
                var manufacturerSerialNumber = '<th class="text-center" scope="col">' + manufacturerSerialNumber + '</th>'
                var companySerialNumber = '<th class="text-center" scope="col">' + companySerialNumber + '</th>'
                var state = '<th class="text-center checkbox" scope="col">' + state + '</th>'
                var comment = '<th class="text-center checkbox" scope="col">' + comment + '</th>'
                var deposer = '<th class="text-center checkbox" scope="col">' + deposer + '</th>'
                var id = '<th class="text-center checkbox" scope="col">' + id + '</th>'


                var html = nb + name + reference + manufacturerSerialNumber + companySerialNumber + state + comment + deposer + id



                $('.js-delete tbody').append('<tr>' + html + '</tr>')

                i = i+1

            })

            $('#product_follow_edit_productsFollows').html('')

        })

    </script>
{% endblock %}