{% 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 justify-content-center">
                <div class="col-md-6">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control input-scan-1" id="champScan" placeholder="{{ 'changement-emplacement.scan-emp-ori'|trans|raw }}" onkeyup="this.value = this.value.toUpperCase();">
                        <div class="input-group-append">
                          <button class="input-group-text btn btn-primary" 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 changementEmplacement %}

                        <div class="row">
                            <div class="col-5 text-center">
                                <h2><span class="badge badge-outline-dark font-weight-bold d-block"><span class="d-none d-sm-block small">{{ 'general.emplacement-origine'|trans }}</span> {{ changementEmplacement.emplacementOrigine }}</span></h2>
                            </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 text-center">
                                <h2><span class="badge badge-outline-dark font-weight-bold d-block"><span class="d-none d-sm-block small">{{ 'general.emplacement-destination'|trans }}</span> {% if changementEmplacement.emplacementDestination != "" %} {{ changementEmplacement.emplacementDestination }}{% else %}...{% endif %}</span></h2>
                            </div>
                        </div>

                        <div class="card mb-2 border">
                            <div class="card-body">
                                <div class="content">
                                    {% if changementEmplacement.article %}
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="float-right">
                                                    <h2><span class="badge badge-primary float-right">{{ changementEmplacement.quantiteDisponible|round(changementEmplacement.nbDecimales, 'floor') ~ " "~ changementEmplacement.unite }}</span></h2><br>
                                                    <h2><span class="mt-1 badge {% if changementEmplacement.statut|slice(0, 1) == "A" %}badge-outline-success{% elseif changementEmplacement.statut|slice(0, 1) == "Q" %}badge-outline-warning{% elseif changementEmplacement.statut|slice(0, 1) == "R" %}badge-outline-danger{% endif %} float-right">{{ changementEmplacement.statut }}</span></h2><br>

                                                    {% if changementEmplacement.quantiteAllouee > 0 %}
                                                        <span class="mt-1 h5 font-italic text-danger float-right mt-2">{{ changementEmplacement.quantiteAllouee|round(changementEmplacement.nbDecimales, 'floor') ~ " "~ changementEmplacement.unite }} {{ 'general.alloues'|trans }}</span>
                                                    {% endif %}
                                                </div>
                                                <div class="">
                                                    <span class="h4 font-weight-bold text-primary mr-2">
                                                        {{ changementEmplacement.article }}
                                                        {% if changementEmplacement.inflammable == "1" %}<img src="{{ asset('images/icones/picto/inflammable.png') }}" alt="" width="40px" class="ml-2">{% endif %}
                                                        {% if changementEmplacement.frigo == "1" %}<img src="{{ asset('images/icones/picto/frigo.png') }}" alt="" width="40px" class="ml-2">{% endif %}
                                                    </span> 
                                                </div>
                                                <div class="mt-2 designation-article">
                                                    {{ changementEmplacement.designation }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mt-1">
                                            <div class="col-6">
                                                {% if changementEmplacement.lot != "" %}
                                                    <div class="mb-2">
                                                        <span class="h5 font-weight-bold mr-2">{{ 'general.lot'|trans }} <span class="float-right">{{ changementEmplacement.lot|replace({ ("%"): "" }) }}</span></span>
                                                    </div>
                                                {% endif %}
                                                {% if changementEmplacement.contenant != "" %}
                                                    <div class="">
                                                        <span class="h5 font-weight-bold mr-2">{{ 'general.contenant'|trans }} <span class="float-right">{{ changementEmplacement.contenant }}</span></span>
                                                    </div>
                                                {% endif %}
                                                {% if changementEmplacement.datePeremption %}
                                                    <div class="mt-2">
                                                        <span class="h5 font-weight-bold mr-2">{{ 'general.peremption'|trans }} <span class="float-right">{{ changementEmplacement.datePeremption|date('d/m/Y') }}</span></span>
                                                    </div>
                                                {% else %}
                                                    {% if changementEmplacement.dateCreationLot %}
                                                        <div class="mt-2">
                                                            <span class="h5 font-weight-bold mr-2">{{ 'general.date-creation-lot'|trans }} <span class="float-right">{{ changementEmplacement.dateCreationLot|date('d/m/Y') }}</span></span>
                                                        </div>
                                                    {% endif %}
                                                {% endif %}
                                            </div>
                                            <div class="col-6 border-left">
                                                <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 changementEmplacement.quantiteADeplacer != changementEmplacement.quantiteDisponible %}input-quantite-differente{% endif %}" id="quantiteADeplacer" placeholder="Quantité" min="0" max="{{ changementEmplacement.quantiteDisponible }}" value="{{ changementEmplacement.quantiteADeplacer|round(changementEmplacement.nbDecimales, 'floor') }}" required>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="row d-none d-md-flex">
                            <div class="col-6 text-center">
                                <a href="{{ path('annuler-changement-emplacement') }}" 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') }}" class="btn btn-primary btn-lg btn-block" id="boutonValider" disabled>{{ 'bouton.valider'|trans }}</a>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

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

{% block javascripts %}
    {{ parent() }}
    
    <script>
        
        $(function () {
            
            //Par défaut on positionne le focus sur le champ de scan
            $('#champScan').focus();
            
            //Par défaut le bouton de validation n'est pas actif
            $( "#boutonValider" ).addClass("disabled");
            $( "#boutonValiderTP" ).addClass("disabled");
            {% if changementEmplacement and changementEmplacement.emplacementDestination != "" %}
                $( "#boutonValider" ).removeClass("disabled");
                $( "#boutonValiderTP" ).removeClass("disabled");
            {% endif %}
            
            //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();
            });
            
            {% if changementEmplacement %}
                //Si un code emplacement d'origine a déjà été scanné on indique qu'il faut scanner un contenant
                {% if changementEmplacement.emplacementOrigine %}
                    $('#champScan').attr('placeholder',"{{ 'changement-emplacement.scan-contenant'|trans|raw }}");
                {% endif %}
                //Si un code article a déjà été scanné on indique qu'il faut scanner un emplacement de destination
                {% if changementEmplacement.article %}
                    $('#champScan').attr('placeholder',"{{ 'changement-emplacement.scan-emp-dest'|trans|raw }}");
                {% endif %}
            {% endif %}
            
            //Fonction permettant de lancer la recherche en Ajax
            function recherche(){
                if ($('#champScan').val() != ""){
                    $('.loader').show();
                    
                    if ($('#champScan').val().length > 10) {
                        //On va contrôler le code barre article/lot/série/contenant
                        var dataURL = "{{ path('controle-code-barre') }}";
                        var dataURL = dataURL+"/"+$("#champScan").val().trim();
                        $.ajax({
                            url: dataURL,
                            method: "GET",
                            dataType : "json"
                        }).done(function(retour) {
                            if (retour == "OK_SANS_CONTENANT") {
                                swal({
                                    title: 'Confirmation',
                                    text: '{{ 'stock.message-confirmation-creation-contenant'|trans }}',
                                    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) => {
                                        $('.loader').show();
                                        //Scan avec création du contenant
                                        var dataURL = "{{ path('scan-changement-emplacement') }}"+"/"+$("#champScan").val().trim()+"/1";
                                        document.location.href=dataURL;
                                  }, function(dismiss){
                                        if(dismiss == 'cancel'){
                                          $('.loader').show();
                                          //Scan sans création du contenant
                                          var dataURL = "{{ path('scan-changement-emplacement') }}"+"/"+$("#champScan").val().trim()+"/0";
                                          document.location.href=dataURL;
                                        }
                                 });
                            }
                            else if (retour == "OK_SANS_CONTENANT_QST_OFF") {
                                $('.loader').show();
                                //Scan sans création du contenant et pas de prise en compte de la quantité du code barre
                                var dataURL = "{{ path('scan-changement-emplacement') }}"+"/"+$("#champScan").val().trim()+"/0/0";
                                document.location.href=dataURL;
                            }
                            else {
                                $('.loader').show();
                                //Scan avec contenant déjà existant dans X3
                                var dataURL = "{{ path('scan-changement-emplacement') }}"+"/"+$("#champScan").val().trim()+"/*";
                                document.location.href=dataURL;
                            }
                        });
                    }
                    else {
                        //Scan d'un emplacement
                        var dataURL = "{{ path('scan-changement-emplacement') }}";
                        var dataURL = dataURL+"/"+$("#champScan").val().trim();
                        document.location.href=dataURL;
                    }
                }
            };
            
            //En sorti du champ de scan (tab ou scan) on va lancer la recherche du contenu de l'emplacement
            $('#champScan').blur(function() {
                recherche();
            });
            
            {% if changementEmplacement %}
            //On sélectionne tout le champ lors du click dessus pour faciliter la modification au TP
            $('#quantiteADeplacer').focus(function(){
                $(this).select();
            });
        
            //En sorti du champ de quantité on va modifier la quantité à déplacer sur le changement d'emplacement
            $('#quantiteADeplacer').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("{{ changementEmplacement.quantiteDisponible }}");
                }
                
                //On met à jour la quantité en ajax
                var dataURL = "{{ path('modif-quantite-changement-emplacement') }}";
                var dataURL = dataURL+"/"+$("#quantiteADeplacer").val();
                $.ajax({
                    url: dataURL,
                    method: "GET",
                    dataType : "json"
                });
            });
            {% endif %}
            
            
            setInterval(function(){
                    //On désactive le clavier par défaut sur les champs de saisi afin que le clavier ne s'ouvre pas dès la fin de chargement de la page
                    if(screen.width<= 576) {
                        $("input").each(function () {
                            if (!$(this).hasClass("cerp-clavier")) {
                                $(this).attr('inputmode', 'none');
                                $(this).addClass('cerp-clavier');
                            }
                        });
                        $("input").on("click", function () {
                            $(this).attr('inputmode', 'text');
                        });
                        $(".s-field-value-edit input[inputmode]").on("blur", function () {
                            $(this).attr('inputmode', 'none');
                        });
                    }
            },1000);
            
        });
    </script>
    
{% endblock %}