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

{% block title %}
    {{ parent() }} - {{ 'page.chargement-camion-exp'|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="form-group">   
                    </div>
                    <div class="input-group mb-2">
                        <input type="text" class="form-control input-scan-1" id="champScan" placeholder="{{ 'chargement-camion-exp.scan-livraison'|trans|raw }}">
                        <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 mb-1">
                <div class="col-md-6 text-center">
                    <span class="badge badge-outline-primary"><h2 class="mb-0">{{ nbLignesScannees }} / {{ nbLignesAScanner }}</h2></span>
                </div>
            </div>
            <div class="row justify-content-center mb-3">
                <div class="col-md-6 text-center">
                    {% for chargementCamion in chargementsCamions %}
                        <span class="badge badge-outline-primary">
                            <a href="#" href-confirm="{{ path('supprimer-ligne-chargement-camion', { 'livraison': chargementCamion.livraison }) }}" data-confirm="{{ 'chargement-camion-exp.message-confirmation-suppression'|trans({'%numliv%': chargementCamion.livraison}) }}">
                                <h4 class="mb-0">{{ chargementCamion.livraison }}<span class="ml-2 text-secondary"><i class="fas fa-trash"></i></span></h4>
                            </a>
                        </span>
                    {% endfor %}
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-md-12">
                    {% for chargementCamion in chargementsCamions %}
                        {% for ligne in chargementCamion.chargementCamionDetails %}
                            {% if ligne.isScan != "1" %}
                                <div class="card mb-3">
                                    <div class="card-body">
                                        <div class="content">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="float-right">
                                                        <h2><span class="badge badge-primary float-right">{{ ligne.quantite ~ " "~ ligne.unite }}</span></h2><br>
                                                        <h2><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></h2>
                                                    </div>
                                                    <div class="">
                                                        <span class="h4 font-weight-bold text-primary mr-2">{{ ligne.article }}</span> 
                                                    </div>
                                                    <div class="mt-2 designation-article">
                                                        {{ ligne.designation }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row mt-1">
                                                <div class="col-6">
                                                    {% if ligne.lot != "" %}
                                                        <div class="mt-2">
                                                            <span class="h5 font-weight-bold mr-2">{{ 'general.lot'|trans }} {{ ligne.lot }}</span>
                                                        </div>
                                                    {% endif %}
                                                    {% if ligne.contenant != "" %}
                                                        <div>
                                                            <span class="h5 font-weight-bold mr-2">{{ 'general.contenant'|trans }} {{ ligne.contenant }}</span>
                                                        </div>
                                                    {% endif %}
                                                    {% if ligne.serie != "" %}
                                                        <div class="mt-2">
                                                            <span class="h5 font-weight-bold mr-2">{{ 'general.serie'|trans }} {{ ligne.serie }}</span>
                                                        </div> 
                                                    {% endif %}
                                                    <div class="mt-2">
                                                        <span class="h5 font-weight-bold mr-2">{{ ligne.chargementCamion.livraison }} / {{ ligne.ligne }}</span>
                                                    </div>
                                                </div>
                                                <div class="col-6 border-left">
                                                    <div class="float-right">
                                                        {% if ligne.emplacement != "" %}
                                                            <div class="float-right">
                                                                <h2><span class="badge badge-outline-dark font-weight-bold">{{ 'general.emp'|trans }} {{ ligne.emplacement }}</span></h2>
                                                            </div>
                                                        {% endif %}
                                                    </div>
                                                </div>

                                                {#<div class="">
                                                    <div class="float-left">
                                                        {% if (ligne.article != "") and (ligne.lot != "") and (ligne.contenant != "")%}
                                                            <div class="float-left">
                                                                <h5>
                                                                <span class="badge badge-outline-dark font-weight-bold">
                                                                <img src="{{ asset('images/icones/couleur/code-a-barre.png') }}" alt="" width="30px" class="mr-3">
                                                                02{{ ligne.article }}_10{{ ligne.lot }}_00{{ ligne.contenant }}
                                                                </span>
                                                                </h5>
                                                            </div>
                                                        {% endif %}
                                                    </div>
                                                </div>#}

                                            </div>                
                                        </div>
                                    </div>
                                </div>
                            {%  endif %}
                        {% endfor %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    
    <script>
        
        $(function () {
            
            //Par défaut on positionne le focus sur le champ de scan
            $('#champScan').focus();

            //Gestion Loader
            var $loading = $('.loader').hide();
            $(document)
              .ajaxStart(function () {
                $loading.show();
              })
              .ajaxStop(function () {
                $loading.hide();
              });
            
            //Fonction permettant de lancer la recherche en Ajax           
            function recherche(){
                if ($('#champScan').val() != ""){
                    $('.loader').show();
                    var dataURL = "{{ path('scan-chargement-camion') }}";
                    var dataURL = dataURL+"/"+$("#champScan").val().trim();
                    $("#champScan").val("");
                    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();
            });
            
            //Au clic sur le bouton de validation on va lancer la recherche du contenu de l'emplacement
            $('#btnValidScan').click(function() {
                recherche();
            });
            
            {% if chargementsCamions|length > 0 %}
                 $('#champScan').attr('placeholder',"{{ 'chargement-camion-exp.scan-contenant'|trans|raw }}");
            {% endif %} 

             //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) => {
                    $('.loader').show();
                    window.location.href = href;
                });
            });
            
        });
    </script>
    
{% endblock %}