{% extends 'body.html.twig' %}
{% trans_default_domain 'WMS-FRIDA' %}

{% block title %}
    {{ parent() }} - {{ 'page.changement-emplacement'|trans }}
{% endblock %}

{% block stylesheets %}
{% endblock %}

{% block page %}
    
    <div class="loader">
        <div class="loader-bubble loader-bubble-primary m-5"></div>
    </div>
    
    <div class="row">
        <div class="col-md-12">
            <div class="row mb-1 justify-content-center">
                <div class="col-5 col-sm-5 col-md-4 col-lg-3">
                    <div class="input-group">
                        <input type="text" class="form-control input-scan-1" id="champEmpOrigine" placeholder="{{ 'changement-emplacement-masse.emplacement-origine'|trans }}" value="{% if changementEmpMasse %}{{ changementEmpMasse.emplacementOrigine }}{% endif %}"  onkeyup="this.value = this.value.toUpperCase();">
                        <div class="input-group-append">
                            <button class="input-group-text btn btn-primary border" type="button" id="btnValidEmpOrigine"><i class="fas fa-check"></i></button>
                        </div>
                    </div>
                </div>
                <div class="col-2 text-center">
                    <h2><span class="ml-3 mr-3"><i class="fas fa-chevron-right"></i></span></h2>
                </div>
                <div class="col-5 col-sm-5 col-md-4 col-lg-3">
                    <div class="input-group">
                        <input type="text" class="form-control input-scan-1" id="champEmpDestination" placeholder="{{ 'changement-emplacement-masse.emplacement-destination'|trans }}" value="{% if changementEmpMasse %}{{ changementEmpMasse.emplacementDestination }}{% endif %}" onkeyup="this.value = this.value.toUpperCase();" disabled>
                        <div class="input-group-append">
                            <button class="input-group-text btn btn-primary border" type="button" id="btnValidEmpDestination"><i class="fas fa-check"></i></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <div class="input-group-text input-tous-contenants">
                                <label class="checkbox checkbox-warning mb-0">
                                    <input type="checkbox" id="tousLesContenants" value="false"><span class="checkbox-1 checkmark checkmark-tous-contenants" title="Prendre tous les contenants de l'article/lot"></span>
                                </label>
                            </div>
                        </div>

                        <input type="text" class="form-control input-scan-1" id="champScan" placeholder="{{ 'changement-emplacement-masse.scan-contenant'|trans }}" onkeyup="this.value = this.value.toUpperCase();" disabled>
                        <div class="input-group-append">
                          <button class="input-group-text btn btn-primary border" type="button" id="btnValidScan"><i class="fas fa-check"></i></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center mt-2">
                <div class="col-12 col-sm-12 col-md-10 col-lg-8">
                    {% if changementEmpMasse %}
                        {% for ligne in changementEmpMasse.lignes|sort((a, b) => b.id <=> a.id) %}
                        <div class="card mb-2 border {% if ligne.isCheck %}bg-primary-light{% endif %}" id="card{{ ligne.id }}">
                            <div class="card-body">
                                <div class="content">
                                    {% if ligne.article %}
                                        {% if ligne.erreur %}
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="alert alert-card alert-danger" role="alert">{{ ligne.erreur|trans }}
                                                    <button class="close m-2 m-lg-0" type="button" data-dismiss="alert" aria-label="Close"><span aria-hidden="true"><i class="fas fa-times"></i></span></button>
                                                </div>
                                            </div>
                                        </div>
                                        {% endif %}
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="float-right">
                                                    <h2><span class="badge badge-primary float-right">{{ ligne.quantiteDisponible|round(ligne.nbDecimales, 'floor') ~ " "~ ligne.unite }}</span></h2><br>
                                                    <h2>
                                                        <span class="float-right">
                                                            <span data-toggle="modal" data-target="#modalDetailLigne{{ ligne.id }}" data-placement="middle" class="btn badge badge-outline-gray-500 mt-1 mr-2"><i class="fas fa-info"></i></span>
                                                            <span class="mt-1 badge {% if ligne.statut|slice(0, 1) == "A" %}badge-outline-success{% elseif ligne.statut|slice(0, 1) == "Q" %}badge-outline-warning{% elseif ligne.statut|slice(0, 1) == "R" %}badge-outline-danger{% endif %} float-right">{{ ligne.statut }}</span>
                                                        </span>
                                                    </h2>
                                                    <br>

                                                    {% if ligne.quantiteAllouee > 0 %}
                                                        <span class="mt-1 h5 font-italic text-danger float-right mt-2">{{ ligne.quantiteAllouee|round(ligne.nbDecimales, 'floor') ~ " "~ ligne.unite }} {{ 'general.alloues'|trans }}</span>
                                                    {% endif %}
                                                </div>
                                                <div class="">
                                                    <label class="checkbox checkbox-primary input-scan-1 mb-0">
                                                        <input type="checkbox" id="checkLigneADeplacer{{ ligne.id }}" {% if ligne.isCheck == 1 %}checked{% endif %}>
                                                        <span class="h4 font-weight-bold text-primary ml-2 mr-2">
                                                            {{ ligne.article }}
                                                            {% if ligne.inflammable == "1" %}<img src="{{ asset('images/icones/picto/inflammable.png') }}" alt="" width="40px" class="ml-2">{% endif %}
                                                            {% if ligne.frigo == "1" %}<img src="{{ asset('images/icones/picto/frigo.png') }}" alt="" width="40px" class="ml-2">{% endif %}
                                                        </span>
                                                        <span class="checkbox-1 checkmark"></span>
                                                    </label>
                                                </div>
                                                <div class="mt-2 designation-article">
                                                    {{ ligne.designation|slice(0, 60) }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mt-1">
                                            <div class="col-6">
                                                {% if ligne.lot != "" %}
                                                    <div class="mb-2">
                                                        <span class="h5 font-weight-bold mr-2">{{ 'general.lot'|trans }} <span class="float-right">{{ ligne.lot }}</span></span>
                                                    </div>
                                                {% endif %}
                                                {% if ligne.contenant != "" %}
                                                    <div class="">
                                                        <span class="h5 font-weight-bold mr-2">{{ 'general.contenant'|trans }} <span class="float-right">{{ ligne.contenant }}</span></span>
                                                    </div>
                                                {% endif %}
                                                {% if ligne.datePeremption %}
                                                    <div class="mt-2">
                                                        <span class="h5 font-weight-bold mr-2">{{ 'general.peremption'|trans }} <span class="float-right">{{ ligne.datePeremption|date('d/m/Y') }}</span></span>
                                                    </div>
                                                {% else %}
                                                    {% if ligne.dateCreationLot %}
                                                        <div class="mt-2">
                                                            <span class="h5 font-weight-bold mr-2">{{ 'general.date-creation-lot'|trans }} <span class="float-right">{{ ligne.dateCreationLot|date('d/m/Y') }}</span></span>
                                                        </div>
                                                    {% endif %}
                                                {% endif %}
                                            </div>
                                            <div class="col-6 border-left">
                                                <div class="row">
                                                    <div class="col-12">
                                                        {% if ligne.emplacementOrigine %}
                                                            <div class="float-right">
                                                                <h2><span class="badge badge-outline-dark font-weight-bold">{{ ligne.emplacementOrigine }}</span></h2>
                                                            </div>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-12">
                                                        <span class="h5 font-weight-bold mr-2">{{ 'general.quantite'|trans }}</span>
                                                        <div class="float-right">
                                                            <div class="input-group">
                                                                <input type="number" class="form-control input-quantite {% if ligne.quantiteADeplacer != ligne.quantiteDisponible %}input-quantite-differente{% endif %}" id="quantiteADeplacer{{ ligne.id }}" placeholder="Quantité" min="0" max="{{ ligne.quantiteDisponible }}" value="{{ ligne.quantiteADeplacer|round(ligne.nbDecimales, 'floor') }}" required>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {#<div class="row">
                                                    <div class="col-12">
                                                        <div class="float-right mt-3">
                                                            <button data-toggle="modal" data-target="#modalDetailLigne{{ ligne.id }}" data-placement="middle" class="btn btn-outline-info"><i class="fas fa-info"></i></button>
                                                        </div>
                                                    </div>
                                                </div>#}
                                            </div>
                                        </div>
                                                    
                                        <div id="modalDetailLigne{{ ligne.id }}" class="modal" tabindex="-1" role="dialog">
                                            <div class="modal-dialog  modal-dialog-centered" role="document">
                                              <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="exampleModalCenterTitle">Informations {{ ligne.article }}</h5>
                                                    <button type="button" class="close mt-1 mr-1" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true"><i class="fas fa-times"></i></span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            {{ ligne.designation }}
                                                        </div>
                                                    </div>
                                                    <div class="row mt-3">
                                                        <div class="col-md-12">
                                                            <a href="#" href-confirm="{{ path('supprimer-ligne-changement-emplacement-masse', { 'idLigne': ligne.id }) }}" data-confirm="{{ 'changement-emplacement-masse.message-confirmation-suppression'|trans }}" class="btn btn-outline-danger btn-lg btn-block">{{ 'bouton.supprimer'|trans }}</a>
                                                        </div>
                                                    </div>
                                                </div>
                                              </div>
                                            </div>
                                        </div>
                                        
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                        
                        <div class="row d-none d-md-flex">
                            <div class="col-6 text-center">
                                <a href="{{ path('annuler-changement-emplacement-masse') }}" class="btn btn-danger btn-lg btn-block">{{ 'bouton.annuler'|trans }}</a>
                            </div>
                            <div class="col-6 text-center">
                                <a href="{{ path('creer-changement-emplacement-masse') }}" class="btn btn-primary btn-lg btn-block disabled" id="boutonValider">{{ 'bouton.valider'|trans }}</a>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
                    
{% endblock %}

{% block footer %}
    {% if changementEmpMasse %}
    <div class="row-footer d-md-none">
        <div class="col-6 text-center">
            <a href="{{ path('annuler-changement-emplacement-masse') }}" class="btn btn-danger btn-lg btn-block">{{ 'bouton.annuler'|trans }}</a>
        </div>
        <div class="col-6 text-center">
            <a href="{{ path('creer-changement-emplacement-masse') }}" class="btn btn-primary btn-lg btn-block disabled" id="boutonValiderTP">{{ 'bouton.valider'|trans }}</a>
        </div>
    </div>
    {% endif %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    
    <script>
        
        $(function () {
            
            //Positionnement du focus par défaut
            {% if changementEmpMasse %}
                {% if changementEmpMasse.emplacementOrigine == "" %}
                    $('#champEmpOrigine').focus();
                {% else %}
                    $('#champScan').focus();
                {% endif %}
            {% else %}
                $('#champEmpOrigine').focus();
            {% endif %}
            
            {% if changementEmpMasse %}
                //On active le champ de scan des contenants
                {% if changementEmpMasse.emplacementOrigine != "" %}
                    $('#champScan').removeAttr("disabled");
                    $('#champScan').focus();
                {% endif %}
                    
                //On active l'emplacement de destination si on a des lignes
                {% if changementEmpMasse.lignes|length > 0 %}
                    $('#champEmpDestination').removeAttr("disabled");
                {% endif %}
                    
                //On active le bouton de validation si on a des lignes + emplacement de destination
                {% if changementEmpMasse.lignes|length > 0 and changementEmpMasse.emplacementDestination != "" %}
                    $("#boutonValider").removeClass("disabled");
                    $("#boutonValiderTP").removeClass("disabled");
                {% endif %}
            {% endif %}
            
            {% if changementEmpMasse %}                    
                {% for ligne in changementEmpMasse.lignes %}
                    
                    //On sélectionne tout le champ lors du click dessus pour faciliter la modification au TP
                    $('#quantiteADeplacer{{ ligne.id }}').focus(function(){
                        $(this).select();
                    });
                        
                    //En modification du champ de quantité on va modifier la quantité à déplacer sur le changement d'emplacement
                    $('#quantiteADeplacer{{ ligne.id }}').change(function(){
                        //On contrôle que la valeur saisie n'est pas supérieure à la quantité dispo
                        if (parseFloat($(this).val()) > parseFloat($(this).attr('max'))) {
                            swal("Avertissement", "{{ "changement-emplacement.message-qte-max-depassee"|trans }}", "warning");
                            $(this).val("{{ ligne.quantiteDisponible }}");
                        }

                        //On met à jour la quantité en ajax
                        var dataURL = "{{ path('modif-quantite-changement-emplacement-masse', { 'idLigne': ligne.id }) }}";
                        dataURL = dataURL+"/"+$(this).val();
                        $.ajax({
                            url: dataURL,
                            method: "GET",
                            dataType : "json",
                        });
                    });
                                      
                    //En modification de la case à cocher de la ligne on va modifier le flag en base
                    $('#checkLigneADeplacer{{ ligne.id }}').change(function(){
                        //On met à jour le flag en ajax
                        var dataURL = "{{ path('check-ligne-changement-emplacement-masse', { 'idLigne': ligne.id }) }}";
                        dataURL = dataURL+"/"+$(this).prop('checked');
                        $.ajax({
                            url: dataURL,
                            method: "GET",
                            dataType : "json",
                        });
                        if($(this).prop('checked')==true){
                            $("#card{{ ligne.id }}").addClass("bg-primary-light");
                        }
                        else{
                            $("#card{{ ligne.id }}").removeClass("bg-primary-light");
                        }
                    });
                {% endfor %}
            {% endif %}
                
            //Gestion true/false sur case à cocher Tous les contenants
            $("#tousLesContenants").on('change', function() {
                if ($(this).is(':checked')) {
                  $(this).attr('value', 'true');
                  
                } else {
                  $(this).attr('value', 'false');
                }
                $('#champScan').focus();
            });
            
            //----------------------------------------------------------//
            //Fonction permettant de lancer la recherche d'un emplacement origine en Ajax
            function rechercheEmpOrigine(){
                {% if changementEmpMasse %}
                    var empOrigine = "{{ changementEmpMasse.emplacementOrigine }}";
                {% else %}
                    var empOrigine = "";    
                {% endif %}
                if ($('#champEmpOrigine').val().trim() != "" && $("#champEmpOrigine").val().trim() != empOrigine){
                    $('.loader').show();
                    var dataURL = "{{ path('scan-emp-origine-changement-emplacement-masse') }}";
                    dataURL = dataURL+"/"+$("#champEmpOrigine").val().trim();
                    document.location.href=dataURL;
                }
            };
            
            //En sorti du champ de scan (tab ou scan) on va lancer la recherche de l'emplacement
            $('#champEmpOrigine').blur(function() {
                rechercheEmpOrigine();
            });
            
            //Au clic sur le bouton de validation on va lancer la recherche de l'emplacement
            //On commente car sinon cela lance la recherche 2 fois (en .blur et en click)
            /*$('#btnValidEmpOrigine').on("click", function() {
                rechercheEmpOrigine();
            });*/
            
            //Fonction permettant de lancer la recherche d'un emplacement destination en Ajax
            function rechercheEmpDestination(){
                {% if changementEmpMasse %}
                    var empDestination = "{{ changementEmpMasse.emplacementDestination }}";
                {% else %}
                    var empDestination = "";    
                {% endif %}
                if ($('#champEmpDestination').val().trim() != "" && $("#champEmpDestination").val().trim() != empDestination){
                    $('.loader').show();
                    var dataURL = "{{ path('scan-emp-destination-changement-emplacement-masse') }}";
                    dataURL = dataURL+"/"+$("#champEmpDestination").val().trim();
                    document.location.href=dataURL;
                }
            };
            
            //En sorti du champ de scan (tab ou scan) on va lancer la recherche de l'emplacement
            $('#champEmpDestination').blur(function() {
                rechercheEmpDestination();
            });
            
            //Au clic sur le bouton de validation on va lancer la recherche de l'emplacement
            //On commente car sinon cela lance la recherche 2 fois (en .blur et en click)
            /*$('#btnValidEmpDestination').on("click", function() {
                rechercheEmpDestination();
            });*/
            
            //Fonction permettant de lancer la recherche d'un contenant en Ajax
            function rechercheContenant(){
                if ($('#champScan').val() != ""){
                    $('.loader').show();
                    var dataURL = "{{ path('scan-changement-emplacement-masse') }}";
                    dataURL = dataURL+"/"+$("#tousLesContenants").val();
                    dataURL = dataURL+"/"+$("#champScan").val().trim();
                    document.location.href=dataURL;
                }
            };
            
            //En sorti du champ de scan (tab ou scan) on va lancer la recherche du contenant
            $('#champScan').blur(function() {
                rechercheContenant();
            });
            
            //Au clic sur le bouton de validation on va lancer la recherche du contenant
            //On commente car sinon cela lance la recherche 2 fois (en .blur et en click)
            /*$('#btnValidScan').on("click", function() {
                rechercheContenant();
            });*/
            //----------------------------------------------------------//
            
            //Gestion Loader
            var $loading = $('.loader').hide();
            $(document)
              .ajaxStart(function () {
                $loading.show();
              })
              .ajaxStop(function () {
                $loading.hide();
              });
              
            //Au clic sur le bouton de validation on affiche le loader
            $('#boutonValider').on("click", function() {
                $('.loader').show();
            });
            $('#boutonValiderTP').on("click", function() {
                $('.loader').show();
            });
            
            //Affichage de la fenêtre de confirmation de suppression
            $('a[data-confirm]').on('click', function () {
                var href = $(this).attr('href-confirm');

                swal({
                  title: 'Confirmation',
                  text: $(this).attr('data-confirm'),
                  type: 'warning',
                  showCancelButton: true,
                  confirmButtonColor: '#0CC27E',
                  cancelButtonColor: '#FF586B',
                  confirmButtonText: 'Oui',
                  cancelButtonText: 'Non',
                  confirmButtonClass: 'swal2-styled btn btn-lg btn-success mr-5',
                  cancelButtonClass: 'swal2-styled btn btn-lg btn-danger',
                  buttonsStyling: false
                }).then((result) => {
                    window.location.href = href;
                });
            });
        });
    </script>
    
{% endblock %}