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

{% block title %}
    {{ parent() }} - {{ 'page.declaration-production'|trans }}
{% endblock %}

{% block stylesheets %}
{% endblock %}

{% block page %}
   
    <div class="loader">
        <div class="loader-bubble loader-bubble-primary m-5"></div>
    </div>
    <div class="row"><!-- 1 -->
        <div class="col-md-12"><!-- 2 -->
        <!-- Champ Scan -->
            <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="{{ 'suivi-prod.scan-of'|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>
<!-- Champ Scan -->

<!-- Détail OF -->
            <div class="row justify-content-center mt-2"><!-- 3 -->
                <div class="col-md-10"><!-- 4 -->
                    <!-- Détail Articles lancés -->
                    {% for suiviproduction in suiviProd %}
                        
                        <div class="row justify-content-center mb-3">
                            <div class="col-md-6 text-center">
                                <span class="badge badge-outline-primary">
                                    <a href="#" href-confirm="{{ path('supprimer-ligne-suivi-prod', { 'idSuiviProd': suiviproduction.id }) }}" data-confirm="{{ 'suivi-prod.message-confirmation-suppression'|trans({'%numof%': suiviproduction.numOf}) }}">
                                        <h4 class="mb-0">{{ suiviproduction.numOf }}<span class="ml-2 text-secondary"><i class="fas fa-trash"></i></span></h4>
                                    </a>
                                </span>
                            </div>
                        </div>
                        
                         <!-- Détail Composants -->
                        {% for suiviProdArticle in suiviproduction.suiviProdArticles %}
                            
                            <div class="card mb-3">
                                <div class="card-body">
                                    <div class="content">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="">
                                                    <span class="h4 font-weight-bold text-primary mr-2">{{ suiviProdArticle.articleLance }}</span>
                                                </div>
                                                <div class="mt-2 designation-article">
                                                    {{ suiviProdArticle.desArticleLance }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="progress mb-3">
                                                    <div class="progress-bar" role="progressbar" style="width: {{ (suiviProdArticle.qteDejaProduite/suiviProdArticle.qteLancement*100)|round(0, 'floor') }}%" aria-valuenow="{{ (suiviProdArticle.qteDejaProduite/suiviProdArticle.qteLancement*100)|round(0, 'floor') }}" aria-valuemin="0" aria-valuemax="100">{{ (suiviProdArticle.qteDejaProduite/suiviProdArticle.qteLancement*100)|round(0, 'floor') }}%</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mt-1">
                                            <div class="col-6">
                                                <ul class="list-group">
                                                    {% if suiviProdArticle.qteLancement != "" %}
                                                        <li class="list-group-item">
                                                            <span class="h5 font-weight-bold mr-2">{{ 'suivi-prod.lance'|trans }} <span class="float-right">{{ suiviProdArticle.qteLancement }}</span></span>
                                                        </li>
                                                    {% endif %}
                                                    {% if suiviProdArticle.qteDejaProduite != "" %}
                                                        <li class="list-group-item">
                                                            <span class="h5 font-weight-bold mr-2">{{ 'suivi-prod.produit'|trans }} <span class="float-right">{{ suiviProdArticle.qteDejaProduite }}</span></span>
                                                        </li>
                                                    {% endif %}
                                                    {% if suiviProdArticle.qtePalette != "" %}
                                                        <li class="list-group-item">
                                                            <span class="h5 font-weight-bold mr-2">{{ 'suivi-prod.palette'|trans }} <span class="float-right">{{ suiviProdArticle.qtePalette }}</span></span>
                                                        </li>
                                                    {% endif %}
                                                </ul>
                                            </div>
                                            <div class="col-6 border-left pt-2">
                                                <!-- Articles Qté Produie A & R -->
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend"><span class="input-group-text" id="basic-addon3"><span class="d-none d-md-inline mr-2">{{ 'general.quantite'|trans }}</span><span class="text-18 text-success">A</span></span></div>
                                                    <input type="number" class="form-control input-quantite" id="champQteProduite{{ suiviProdArticle.id }}A" placeholder="Quantité" min="0" max="{{ suiviProdArticle.qteLancement }}" value="{{ suiviProdArticle.qteProduiteA }}" required>
                                                </div>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend"><span class="input-group-text" id="basic-addon3"><span class="d-none d-md-inline mr-2">{{ 'general.quantite'|trans }}</span><span class="text-18 text-danger">R</span></span></div>
                                                    <input type="number" class="form-control input-quantite" id="champQteProduite{{ suiviProdArticle.id }}R" placeholder="Quantité" min="0" max="{{ suiviProdArticle.qteLancement }}" value="{{ suiviProdArticle.qteProduiteR }}" required>
                                                </div>
                                            </div>
                                        </div>
                                                    
                                        <div class="row mt-3">
                                            <div class="col-6 text-center">
                                                <a href="#collapseComposants{{ suiviProdArticle.id }}" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseComposants{{ suiviProdArticle.id }}" class="btn btn-outline-primary btn-lg btn-block">{{ 'suivi-prod.composants'|trans }}</a>
                                            </div>
                                            <div class="col-6 text-center">
                                                <a href="{{ path('creer-suivi-prod', { 'idSuiviProdArticle' : suiviProdArticle.id }) }}" class="btn btn-primary btn-lg btn-block" id="boutonValider{{ suiviProdArticle.id }}">{{ 'bouton.valider'|trans }}</a>
                                            </div>
                                        </div>
                                            
                                        <div class="collapse mt-3" id="collapseComposants{{ suiviProdArticle.id }}">
                                            <!-- Composants -->   
                                            <table class="table table-responsive">
                                                <thead>
                                                    <tr>
                                                    <th scope="col">{{ 'suivi-prod.composant'|trans }}</th>
                                                    <th scope="col">{{ 'suivi-prod.qtebesoin'|trans }}</th> 
                                                    <th scope="col">{{ 'suivi-prod.qtedejaconso'|trans }} </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                {% for composant in suiviProdArticle.suiviProdComposants %}
                                                    <tr>
                                                        <th scope="row">{{ composant.composant }} - {{ composant.desComposant }}</th>
                                                        <td>{{ composant.qteBesoin }}</td>
                                                        <td>{{ composant.qteDejaConso }}</td>
                                                    </tr>
                                                {% endfor %}
                                                </tbody>
                                            </table>
                                            <!-- Composants -->
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                            
                        {% endfor %}
                        <!-- Détail Composants --> 
                    {% endfor %}
                    <!-- Détail Articles lancés -->
                </div><!-- 4 -->
            </div><!-- 3 -->
        </div><!-- 2 -->
    </div><!-- 1 -->
    
{% 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-suivi-prod') }}";
                    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 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();
            });
            

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


            {% for suiviProd in suiviProd %}
                {% for suiviProdArticle in suiviProd.suiviProdArticles %}
                    //En modification du champ de quantité A on va modifier la quantité à déplacer sur le changement d'emplacement
                    $('#champQteProduite{{ suiviProdArticle.id }}A').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", "{{ "suivi-prod.message-qte-max-depassee"|trans }}", "warning");
                            $(this).val("{{ suiviProdArticle.qteProduiteA }}");
                        }
                        //On met à jour la quantité en ajax
                        var dataURL = "{{ path('modif-quantite-produiteA', { 'idSuiviProdArticle': suiviProdArticle.id }) }}";
                        dataURL = dataURL+"/"+$(this).val();
                        $.ajax({
                            url: dataURL,
                            method: "GET",
                            dataType : "json",
                        });
                    });

                    //En modification du champ de quantité A on va modifier la quantité à déplacer sur le changement d'emplacement
                    $('#champQteProduite{{ suiviProdArticle.id }}R').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", "{{ "suivi-prod.message-qte-max-depassee"|trans }}", "warning");
                            $(this).val("{{ suiviProdArticle.qteProduiteR }}");
                        }
                        //On met à jour la quantité en ajax
                        var dataURL = "{{ path('modif-quantite-produiteR', { 'idSuiviProdArticle': suiviProdArticle.id }) }}";
                        dataURL = dataURL+"/"+$(this).val();
                        $.ajax({
                            url: dataURL,
                            method: "GET",
                            dataType : "json",
                        });
                    });
                    
                    //Au clic sur le bouton de validation on affiche le loader
                    $('#boutonValider{{ suiviProdArticle.id }}').on("click", function() {
                        $('.loader').show();
                    });
                    
                {% endfor %}
            {% endfor %} 
            
        });
    </script>
    
{% endblock %}