{% extends 'menuback.html.twig' %}
{% set refTva = 0 %}
 
 
{% for produit in commande.produit %}
    {% set refTva = refTva+ produit.prix   %}
{% endfor %}

{% block stylesheets %} 
   {{parent()}}

   <style>
    #progress{
                position: absolute;
                width: 90%;
                margin-top: -2.2%;
                margin-left: 56%;
                display:none;

            }

            #myDiv {display: none;}
</style>

      <link rel="stylesheet"   href="{{ asset('back/bundles/datatables/datatables.min.css') }}">
      <link rel="stylesheet"   href="{{ asset('back/bundles/datatables/DataTables-1.10.16/css/dataTables.bootstrap4.min.css') }}">
 
 {% endblock %}

{% block body %}
    <!-- Main Content -->
      <div class="main-content">
      <div class="card">
                  <div class="card-header">
                    <h4> </h4>
                  </div>
                  <div class="card-body">
                 <h1 >Pour validation de la Commande <b style ="color:crimson;font-size:19px;"> {{ commande.numerocommande }}</b></h1>


    
    <table class="table table-striped">
        <tbody>
            <tr>
                <th>numero de la commande:</th>
                <td id="paul">{{ commande.numerocommande }}</td>
                 <b id="myDiv">{{ commande.id }}</b>
            </tr>



             <tr>
                <th>Etat de la commande:</th>
             <td>
                  {% if commande.typestatut.designation =="en attente" %}
                   <b class="badge badge-warning">  {{ commande.typestatut.designation   }} </b>
                   
                  
                  {% elseif commande.typestatut.designation =="en cours" %}
                   <b class="badge badge-primary">  {{ commande.typestatut.designation   }} </b>

                {% else %}
  {{ commande.typestatut.designation   }}
                  {% endif %}
                  </td>

                  </tr>
           
            <tr>
                <th>Nom:</th>
                <td>{{ commande.nom }}</td>
            </tr>
            <tr>
                <th>Prenoms:</th>
                <td>{{ commande.prenoms }}</td>
            </tr>
            <tr>
                <th>Email:</th>
                <td>{{ commande.email }}</td>
            </tr>
             <tr>
                <th>Contacts telephonique:</th>
                <td> {{ commande.telephone }} / {{ commande.contact }}  </td>
            </tr> 
            <tr>
                <th>Adresse de livraison du client:</th>
                <td>{{ commande.adresseclientlivraison }}</td>
            </tr>
            <tr>
                <th>frais de livraison :</th>
                <td>{{ commande.fraislivraison  }}&nbsp francs</td>
            </tr>

            <tr>
                <th>Prix total (Frais de livraison inclu) :</th>
                <td>{{refTva  + commande.fraislivraison   }}&nbsp francs</td>
            </tr>
             <tr>
                <th>Article(s) commandé(s):</th>

                
                <td style="">
                {% for produit in commande.produit %}
               article n° {{loop.index}}
                -<b style="font-size:20px;color:{{ random(['red', '#000000', 'green']) }} ;">Designation&nbsp :&nbsp{{produit.designation|slice(0,20)}};&nbspQuantité&nbsp:{{produit.quantite}};&nbspPrix:&nbsp{{produit.prix|number_format(2, ',', ' ') }}</b><br>{% endfor %}</td>
                </tr>
             <tr>
                <th>Datelivraison:</th>
                <td><div class="datelivraisoncomplet"></div></td>
            </tr>
            <tr>
                <th>Compte de creation et Datecommande:</th>
<td>Commande ajoutée par {{ commande.user.nom }}-{{ commande.user.prenoms }} le  <div class="datecommandecomplet"></div> avec pour canal de communication :{{ commande.typecanalcom.designation }}</td>       
     </tr>
        </tbody>
    </table>
     <div id="progress">


                        <progress value="5" min="0" max="100">0%</progress>
                        <p>Chargement...<strong>0%</strong></p>
                    </div>
<label id="affiche" style="color: green;" ></label>
   <a href="{{ path('commandes_index') }}" class="btn btn-success">Retour a la liste</a>
 <button class="btn btn-theme"  id="btnSearch" style="background-color:#1976D2;"type="submit">Souscrire</button><h4 id='result'></h4>
                         
    {# <a href="{{ path('commandes_edit', {'id': commande.id}) }}" class="btn btn-primary">Editer la commande</a> #}

   {# {{ include('commandes/_delete_form.html.twig') }} #}
  </div>
                    </div>
                  </div>
                </div>
       
         
          
      </div>
{% endblock %}
{% block javascripts %} 
   {{parent()}}
  <script>
 
$(document).ready(function() {
    moment.locale('fr');
    moment.updateLocale('fr', {
    longDateFormat : {
        LT: "h:mm A",
        LTS: "h:mm:ss A",
        L: "MM/DD/YYYY",
        LL: "MMMM Do YYYY",
        LLL: "MMMM Do YYYY LT",
        LLLL: "dddd Do MMMM YYYY"
    }
});
 const datelivraison = moment('{{commande.datelivraison|date('Y')}}-{{commande.datelivraison|date('m')}}-{{commande.datelivraison|date('d')}}').format('LLLL');
  const datecommande = moment('{{commande.datecommande|date('Y')}}-{{commande.datecommande|date('m')}}-{{commande.datecommande|date('d')}}').format('LLLL');

     $('.datelivraisoncomplet').html(datelivraison);
     $('.datecommandecomplet').html(datecommande);
    $('.js-example-basic-single').select2({
  theme: "classic",
  placeholder: 'choisir un type'
});


 console.log(start);
});


 
     </script>
 <script type="text/javascript">
   

 
 
        $("#btnSearch").click(function () {
                $("#progress").css("display", "block");
             var text = document.getElementById('myDiv').textContent;
               console.log("value hors",text);
              searchnumbyordre(text);
            var $result = $("#result");

        $result.text("");
             //$("#form_numordre").parent().append('<div class="loading"></div>');
      
          
          
            
            $result.css("color", "green");
                          
$("#progress").css("display", "none");
              //        valid = true;
                  
        
            });
            function searchnumbyordre(id) {
                console.log(id);
                $.ajax({
                    url: '{{path('newsletter')}}',
                    type: 'POST',
                    dataType: 'json',
                    async: true,
                    
                    data: {id: id},
           
                         
                    success: function (data) {
                        console.log("data");
                        if (data['Result'] === 'OK') {
                            //$("#ordreError").empty();
                            //var newsletter = data['Record'];
                           // console.log("news",  );
                            

 var styles1 = {
      color : "#01579B",
      fontWeight: "bold",
      fontSize:"20px",
      fontStyle:"italic" ,
      position:"center"
       
    };
    $("#affiche").html("Message :" + data['Message'] ).css( styles1 );
    $("#progress").css("display", "none");
                        } else if (data['Result'] === 'ERROR') {
                             var styles1 = {
      color : "#01579B",
      fontWeight: "bold",
      fontSize:"20px",
      fontStyle:"italic" ,
      position:"center"
       
    };
    $("#affiche").html("Message :" + data['Message'] ).css( styles1 );
                         // $(".loading").css("display", "none");
                            $("#progress").css("display", "none");
                        }
                    },
                    error: function (data) {
                        
                        $("#progress").css("display", "none");
                    }
                });
            }
            
                

     

            function modifValues() {
                var val = $('#progress progress').attr('value');
                if (val >= 100) {
                    val = 5;
                }
                var newVal = val * 1 + 0.25;
                var txt = Math.floor(newVal) + '%';

                $('#progress progress').attr('value', newVal).text(txt);
                $('#progress strong').html(txt);
            }
            setInterval(function () {
                modifValues();
            }, 1);
       
{# setInterval(function(){
            	var obj = document.getElementById("affiche");
            	obj.innerHTML = "";
        	},9000); #}
    </script>






 
 {% endblock %}