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

{% block title %}
    {{ parent() }} - {{ 'page.inventaire'|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="{{ 'inventaire.scan-liste'|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>
                        
            <!-- Lignes inventaire -->
            {% if listeInventaire %}

                <div class="row justify-content-center mb-2">
                    <div class="col-6 text-center">
                        <span class="badge badge-outline-primary">
                            <h5 class="mb-0">{{ listeInventaire.liste }}</h5>
                        </span>
                    </div>
                    {% if listeInventaire.emplacementCourant %}
                    <div class="col-6 text-center">
                        <span class="badge emplacement-courant">{{ 'general.emp'|trans|raw }} {{ listeInventaire.emplacementCourant }}</span>
                    </div>
                    {% endif %}
                </div>
                        
                {% if ligneCourante %}
                    <div class="row justify-content-center">
                        <div class="col-lg-6 col-md-10 col-sm-12">
                            <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>
                                                        {% if ligneCourante.emplacementTrouve != "" %}
                                                            <span class="mt-1 mr-1 badge badge-outline-dark font-weight-bold">{{ ligneCourante.emplacementTrouve }}</span>
                                                        {% endif %}
                                                        <span class="mt-1 badge {% if ligneCourante.statut|slice(0, 1) == "A" %}badge-outline-success{% elseif ligneCourante.statut|slice(0, 1) == "Q" %}badge-outline-warning{% elseif ligneCourante.statut|slice(0, 1) == "R" %}badge-outline-danger{% endif %} float-right">{{ ligneCourante.statut }}</span>
                                                    </h2>
                                                </div>
                                                <div class="">
                                                    <span class="h4 font-weight-bold text-primary mr-2">{{ ligneCourante.article }}</span>
                                                </div>
                                                <div class="mt-2 designation-article">
                                                    {{ ligneCourante.designation }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mt-1">
                                            <div class="col-6">
                                                {% if ligneCourante.lot != "" %}
                                                    <div class="mb-2">
                                                        <span class="h5 font-weight-bold mr-2">{{ 'general.lot'|trans }} <span class="float-right">{{ ligneCourante.lot|replace({ ("%"): "" }) }}</span></span>
                                                    </div>
                                                {% endif %}
                                                {% if ligneCourante.contenant != "" %}
                                                    <div class="">
                                                        <span class="h5 font-weight-bold mr-2">{{ 'general.contenant'|trans }} <span class="float-right">{{ ligneCourante.contenant }}</span></span>
                                                    </div>
                                                {% endif %}
                                            </div>
                                            <div class="col-6 border-left pt-2">
                                                <!-- Qté comptée -->
                                                <div class="input-group mb-1">
                                                    <input type="number" class="form-control input-quantite" id="champQteComptee" placeholder="Quantité" min="0" value="{% if ligneCourante.qteComptee > 0 %}{{ ligneCourante.qteComptee|round(ligneCourante.nbDecimales, 'floor') }}{% endif %}" required>
                                                    <div class="input-group-append"><span class="input-group-text" id="basic-addon3"><span class="text-18">{{ ligneCourante.unite }}</span></span></div>
                                                </div>
                                            </div>
                                        </div>
                                        {#<div class="row mt-1 justify-content-end">
                                            <div class="col-4">
                                                <a href="{{ path('valider-ligne-inventaire', {'idLigne' : ligneCourante.id }) }}" class="btn btn-primary btn-lg btn-block" id="boutonValiderLigne" disabled>{{ 'bouton.valider'|trans }}</a>
                                            </div>
                                        </div>#}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}

                <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="#resteACompter" role="tab" aria-controls="resteACompter" aria-selected="true">{{ 'inventaire.acompter'|trans|upper }}</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-item nav-link" id="profile-tab" data-toggle="tab" href="#compte" role="tab" aria-controls="compte" aria-selected="false">{{ 'inventaire.compte'|trans|upper }}</a>
                        </li>
                    </ul>
                                
                    <div class="tab-content" id="myTabContent">
                      <div class="tab-pane fade show active" id="resteACompter" role="tabpanel" aria-labelledby="home-tab">

                        <div class="card mb-3" 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>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for ligne in lignesEmpCourant %}
                                                {%  if ligne.ligneCourante != 1 %}
                                                <tr class="bg-gray-300" data-toggle="modal" data-target="#modalDetailLigne{{ ligne.id }}" data-placement="middle">
                                                    <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>
                                                </tr>
                                                {% endif %}
                                            {% endfor %}

                                            {% for ligne in autresLignes %}
                                                {%  if ligne.ligneCourante != 1 %}
                                                <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>
                                                </tr>
                                                {% endif %}
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="row d-none d-md-flex">
                            <div class="col-6 text-center">
                                <a href="#" href-confirm="{{ path('annuler-comptage-inventaire') }}" data-confirm="{{ 'inventaire.message-confirmation-annulation-liste'|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-comptage-inventaire') }}" data-confirm="{{ 'inventaire.message-confirmation-validation-liste'|trans }}" class="btn btn-primary btn-lg btn-block" id="boutonValider" disabled>{{ 'bouton.valider'|trans }}</a>
                            </div>
                        </div>
                        
                    </div>
                    <div class="tab-pane fade" id="compte" role="tabpanel" aria-labelledby="profile-tab">
                        <div class="card mb-3" 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 lignesComptees %}
                                                <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.qteComptee|round(ligne.nbDecimales, 'floor') }}</span></td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
        
    {% if listeInventaire %}
        {# Modal pour voir le détails des lignes #}
        {% for ligne in listeInventaire.Lignes %}
            <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.qteComptee|round(ligne.nbDecimales, 'floor') }} / {{ ligne.qteStock|round(ligne.nbDecimales, 'floor') }}</span></li>
                                </ul>
                            </div>
                        </div>
                        {% if ligne.qteComptee > 0 or ligne.emplacementTrouve %}
                        <div class="row mt-3">
                            <div class="col-md-12">
                                <a href="#" href-confirm="{{ path('annuler-comptage-ligne-inventaire', { 'idLigne': ligne.id }) }}" data-confirm="{{ 'inventaire.message-confirmation-annulation-ligne'|trans }}" class="btn btn-outline-danger btn-lg btn-block">{{ 'bouton.annuler'|trans }}</a>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                  </div>
                </div>
            </div>
        {% endfor %}
    {% endif %}
    
{% endblock %}

{% block footer %}
    <div class="row-footer d-md-none">
        <div class="col-6 text-center">
            <a href="#" href-confirm="{{ path('annuler-comptage-inventaire') }}" data-confirm="{{ 'inventaire.message-confirmation-annulation-liste'|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-comptage-inventaire') }}" data-confirm="{{ 'inventaire.message-confirmation-validation-liste'|trans }}" 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();
            
            $('#champScan').focus(function(){
                $(this).val("");
            });
            
            {% if ligneCourante %}
                $('#champQteComptee').focus();
            {% endif %}

            //Gestion Loader
            var $loading = $('.loader').hide();
            $(document)
              .ajaxStart(function () {
                $loading.show();
              })
              .ajaxStop(function () {
                $loading.hide();
              });
              
            {% if listeInventaire %}
                $('#champScan').attr('placeholder',"{{ 'inventaire.scan-emplacement'|trans|raw }}");
                {% if listeInventaire.emplacementCourant %}
                    $('#champScan').attr('placeholder',"{{ 'inventaire.scan-contenant'|trans|raw }}");
                {% endif %}
            {% endif %}
            
            //Fonction permettant de lancer la recherche en Ajax           
            function recherche(){
                if ($('#champScan').val() != ""){
                    $('.loader').show();
                    
                    {% if listeInventaire and listeInventaire.emplacementCourant %}
                        var dataURL = "{{ path('controle-ligne-existe') }}"+"/"+$("#champScan").val().trim();
                        $.ajax({
                            url: dataURL,
                            method: "GET",
                            dataType : "json"
                        }).done(function(retour) {
                            if (retour == "AUCUNE_LIGNE") {
                                swal({
                                    title: 'Confirmation',
                                    text: '{{ 'inventaire.message-confirmation-creation-ligne'|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('creation-ligne-inventaire') }}"+"/"+$("#champScan").val().trim();
                                        document.location.href=dataURL;
                                  }, function(dismiss){
                                        if(dismiss == 'cancel'){
                                            $('.loader').hide();
                                        }
                                  });
                            }
                            else if (retour == "OK") {
                                $('.loader').show();
                                var dataURL = "{{ path('scan-liste-inventaire') }}"+"/"+$("#champScan").val().trim();
                                document.location.href=dataURL;
                            }
                            else {
                                swal("Erreur", "Erreur lors de la recherche de ligne d'inventaire.", "error");
                            }
                        });
                    {% else %}
                        var dataURL = "{{ path('scan-liste-inventaire') }}"+"/"+$("#champScan").val().trim();
                        document.location.href=dataURL;
                    {% endif %}
                }
            };
            
            //En sorti du champ de scan (tab ou scan) on va lancer la recherche de la liste d'inventaire
            $('#champScan').blur(function() {
                recherche();
            });
            
            //Au clic sur le bouton de validation on va lancer la recherche de la liste d'inventaire
            $('#btnValidScan').click(function() {
                recherche();
            });
            

             //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;
                });
            });

            {% if listeInventaire %}
                {% if ligneCourante %}
                    //En modification du champ de quantité compté on va modifier la quantité sur la ligne d'inventaire
                    $('#champQteComptee').change(function(){
                        //On met à jour la quantité en ajax
                        var dataURL = "{{ path('modif-quantite-comptee-inventaire', { 'idLigne': ligneCourante.id }) }}";
                        dataURL = dataURL+"/"+$(this).val();
                        window.location.href = dataURL;
                        /*$.ajax({
                            url: dataURL,
                            method: "GET",
                            dataType : "json",
                        });*/
                    });

                {% endif %}
            {% endif %}
            
            //Au clic sur le bouton de validation on affiche le loader
            $('#boutonValider').on("click", function() {
                $('.loader').show();
            });
            $('#boutonValiderTP').on("click", function() {
                $('.loader').show();
            });
        });
    </script>
    
{% endblock %}