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

{% block title %}
    {{ parent() }} - {{ 'page.bon-preparation'|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">
            {% if not bonPreparation %}
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <div class="form-group">   
                    </div>
                    <div class="input-group mb-2">
                        <select class="custom-select mb-3" style="font-size:1rem;" id="champSelectTransporteur">
                            <option selected>Choix du transporteur</option>
                            {% for transporteur in transporteurs %}
                                <option value="{{ transporteur.code }}">{{ transporteur.nom }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>
            {% endif %}
            <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="{{ 'bon-preparation.scan-bp'|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>
                    
            {% if bonPreparation %}
            <div class="row justify-content-center mt-1">
                <div class="col-md-10">
                    <div class="row justify-content-center mb-2">
                        <div class="col-6 text-center">
                            <span class="badge badge-outline-primary">
                                <h5 class="mb-0">{{ bonPreparation.numero }}</h5>
                            </span>
                        </div>

                        {% if bonPreparation.emplacementCourant %}
                        <div class="col-6 text-center">
                            <span class="badge emplacement-courant">{{ 'general.emp'|trans|raw }} {{ bonPreparation.emplacementCourant }}</span>
                        </div>
                        {% endif %}
                    </div>
                                
                    <ul class="nav nav-pills nav-justified" id="myTab" role="tablist">
                        <li class="nav-item">
                          <a class="nav-item nav-link active" id="home-tab" data-toggle="tab" href="#resteAPreparer" role="tab" aria-controls="resteAPreparer" aria-selected="true">{{ 'bon-preparation.apreparer'|trans|upper }}</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-item nav-link" id="profile-tab" data-toggle="tab" href="#prepare" role="tab" aria-controls="prepare" aria-selected="false">{{ 'bon-preparation.prepare'|trans|upper }}</a>
                        </li>
                    </ul>
                                
                    <div class="tab-content" id="myTabContent">
                      <div class="tab-pane fade show active" id="resteAPreparer" role="tabpanel" aria-labelledby="home-tab">
                        <div class="card" id="resteAPreparer">
                            <div class="card-body">
                                <div class="content">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                            <th scope="col">{{ 'general.emp'|trans }}</th>
                                            <th scope="col">{{ 'general.article'|trans }}</th>
                                            <th scope="col">{{ 'general.lot'|trans }}</th>
                                            <th scope="col">{{ 'general.qte'|trans }}</th> 
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for ligne in lignesEmpCourant %}
                                            <tr class="bg-gray-300">
                                                <td scope="row" class="text-center align-middle"><span class="emplacement-courant">{{ ligne.emplacement }}</span></td>
                                                <td class="text-14 align-middle">{{ ligne.article }} - {{ ligne.designation }}</td>
                                                <td class="text-14 align-middle">{{ ligne.lot }}</td>
                                                <td class="text-center align-middle"><span class="h4">{{ (ligne.quantite-ligne.quantitePreparee)|round(ligne.nbDecimales, 'floor') }}</span></td>
                                            </tr>
                                            {% endfor %}

                                            {% for ligne in autresLignes %}
                                            <tr>
                                                <td scope="row" class="text-center align-middle"><span class="emplacement-prepa">{{ ligne.emplacement }}</span></td>
                                                <td class="text-14 align-middle">{{ ligne.article }} - {{ ligne.designation }}</td>
                                                <td class="text-14 align-middle">{{ ligne.lot }}</td>
                                                <td class="text-center align-middle"><span class="h4">{{ (ligne.quantite-ligne.quantitePreparee)|round(ligne.nbDecimales, 'floor') }}</span></td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                      </div>
                      <div class="tab-pane fade" id="prepare" role="tabpanel" aria-labelledby="profile-tab">
                        <div class="card" id="prepare">
                            <div class="card-body">
                                <div class="content">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                            <th scope="col">{{ 'general.emp'|trans }}</th>
                                            <th scope="col">{{ 'general.article'|trans }}</th>
                                            <th scope="col">{{ 'general.lot'|trans }}</th>
                                            <th scope="col">{{ 'general.qte'|trans }}</th> 
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for ligne in lignesPreparees %}
                                            <tr data-toggle="modal" data-target="#modalDetailLigne{{ ligne.id }}" data-placement="middle">
                                                <td scope="row" class="text-center align-middle"><span class="emplacement-prepa">{{ ligne.emplacement }}</span></td>
                                                <td class="text-14 align-middle">{{ ligne.article }} - {{ ligne.designation }}</td>
                                                <td class="text-14 align-middle">{{ ligne.lot }}</td>
                                                <td class="text-center align-middle"><span class="h4">{{ ligne.quantitePreparee|round(ligne.nbDecimales, 'floor') }}</span></td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                      </div>
                    </div>
                    <div class="row d-none d-md-flex">
                        <div class="col-6 text-center">
                            <a href="#" href-confirm="{{ path('annuler-bon-preparation', { 'idPreparation': bonPreparation.id }) }}" data-confirm="{{ 'bon-preparation.message-confirmation-annulation'|trans }}" class="btn btn-danger btn-lg btn-block">{{ 'bouton.annuler'|trans }}</a>
                        </div>
                        <div class="col-6 text-center">
                            <a href="#" href-confirm="{{ path('valider-bon-preparation', { 'idPreparation': bonPreparation.id }) }}" data-confirm="{{ 'bon-preparation.message-confirmation-validation'|trans }}" class="btn btn-primary btn-lg btn-block" id="boutonValider" disabled>{{ 'bouton.valider'|trans }}</a>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
            
    {# Modal pour voir le détails des lignes préparées et annuler une ligne si besoin #}
    {% for ligne in lignesPreparees %}
        <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</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">
                            <ul class="list-group text-15">
                                <li class="list-group-item">{{ 'general.article'|trans }} <span class="float-right">{{ ligne.article }}</span></li>
                                <li class="list-group-item">{{ 'general.designation'|trans }} <span class="float-right">{{ ligne.designation|slice(0, 60) }}</span></li>
                                {% if ligne.lot != "" %}
                                    <li class="list-group-item">{{ 'general.lot'|trans }} <span class="float-right">{{ ligne.lot }}</span></li>
                                {% endif %}
                                {% if ligne.serie != "" %}
                                    <li class="list-group-item">{{ 'general.serie'|trans }} <span class="float-right">{{ ligne.serie }}</span></li>
                                {% endif %}
                                {% if ligne.contenant != "" %}
                                    <li class="list-group-item">{{ 'general.contenant'|trans }} <span class="float-right">{{ ligne.contenant }}</span></li>
                                {% endif %}
                                <li class="list-group-item">{{ 'general.quantite'|trans }} <span class="float-right">{{ ligne.quantitePreparee|round(ligne.nbDecimales, 'floor') }} / {{ ligne.quantite|round(ligne.nbDecimales, 'floor') }}</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-12">
                            <a href="#" href-confirm="{{ path('annuler-ligne-bon-preparation', { 'idLigne': ligne.id }) }}" data-confirm="{{ 'bon-preparation.message-confirmation-annulation-ligne'|trans }}" class="btn btn-outline-danger btn-lg btn-block">{{ 'bouton.annuler'|trans }}</a>
                        </div>
                    </div>
                </div>
              </div>
            </div>
        </div>
    {% endfor %}
{% endblock %}

{% block footer %}
    {% if bonPreparation %}
    <div class="row-footer d-md-none">
        <div class="col-6 text-center">
            <a href="#" href-confirm="{{ path('annuler-bon-preparation', { 'idPreparation': bonPreparation.id }) }}" data-confirm="{{ 'bon-preparation.message-confirmation-annulation'|trans }}" class="btn btn-danger btn-lg btn-block">{{ 'bouton.annuler'|trans }}</a>
        </div>
        <div class="col-6 text-center">
            <a href="#" href-confirm="{{ path('valider-bon-preparation', { 'idPreparation': bonPreparation.id }) }}" data-confirm="{{ 'bon-preparation.message-confirmation-validation'|trans }}" class="btn btn-primary btn-lg btn-block" id="boutonValiderTP" disabled>{{ 'bouton.valider'|trans }}</a>
        </div>
    </div>
    {% endif %}
{% 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();
              });
              
            {% if bonPreparation %}
                $('#champScan').attr('placeholder',"{{ 'inventaire.scan-emplacement'|trans|raw }}");
                {% if bonPreparation.emplacementCourant != "" %}
                    $('#champScan').attr('placeholder',"{{ 'bon-preparation.scan-emplacement-article'|trans|raw }}");
                {% endif %}
                {% if ligneCourante is defined %}
                    $('#champScan').attr('placeholder',"{{ 'inventaire.scan-article'|trans|raw }}");
                {% endif %}
                    
                //Par défaut le bouton de validation n'est pas actif
                $( "#boutonValider" ).addClass("disabled");
                $( "#boutonValiderTP" ).addClass("disabled");
                {% if lignesPreparees|length == bonPreparation.lignes|length %}
                    $( "#boutonValider" ).removeClass("disabled");
                    $( "#boutonValiderTP" ).removeClass("disabled");
                {% endif %}
            {% endif %}
            
            //Fonction permettant de lancer la recherche en Ajax           
            function recherche(){
                if ($('#champScan').val() != ""){
                    $('.loader').show();
                    var dataURL = "{{ path('scan-bon-preparation') }}";
                    var dataURL = dataURL+"/"+$("#champScan").val();
                    $("#champScan").val("");
                    document.location.href=dataURL;
                }
            };
            
            //En sorti du champ de scan (tab ou scan) on va lancer la recherche du BP
            $('#champScan').blur(function() {
                recherche();
            });
            
            //Au clic sur le bouton de validation on va lancer la recherche du BP
            $('#btnValidScan').click(function() {
                recherche();
            });
            
            //A la sélection d'un transporteur on va lancer la recherche d'un BP
            $('#champSelectTransporteur').change(function() {
                if ($('#champSelectTransporteur').val() != ""){
                    $('.loader').show();
                    var dataURL = "{{ path('choix-transporteur') }}";
                    var dataURL = dataURL+"/"+$("#champSelectTransporteur").val();
                    document.location.href=dataURL;
                }
            });

             //Affichage de la fenêtre de confirmation d'annulation
            $('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 %}