{% extends 'menuback.html.twig' %}

 
 

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

      <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 %}
    <div class="main-content">
        <section class="section">
          <div class="section-body">
            <div class="row">
              <div class="col-12">
                <div class="card">
                  <div class="card-header">
                    {# <h4>Export Table</h4> #}
 <a href="{{ path('commandes_new') }}" class="btn btn-primary">Ajoute une commande</a>                      <h4></h4>

    {# {% for message in app.flashes('success') %}
      <div class="alert alert-success">
        {{ message }}
      </div>
    {% endfor %} #}
                  </div>
                  <div class="card-body">
                    <div class="table-responsive">
                      <table class="table table-striped table-hover" id="tableExport" style="width:100%;">
                        <thead>
                          <tr>
                             <th>Id</th>
                <th>Nom et Prenoms</th>
                {# <th>Nom</th>
                <th>Prenoms</th> #}
                <th>Etat</th>  
                  <th>Article</th>
                {# <th>Adresseclient</th> #}
                <th>Adresseclientlivraison</th>
                <th>Contact</th>
                 {# <th>Etat</th>  #}
                                 <th>Date commande</th>
                 
                
                          </tr>
                        </thead>
                        <tbody>
            

{% for commande in commandes %}
            <tr>
                <td> <a href="{{ path('commandes_edit_facebook', {'id': commande.id}) }}" style="text-decoration:none;" >{{ commande.numerocommande }}</a></td>
                <td>{{ commande.nom }} {{ commande.prenoms }}</td>
                {# <td>{{ commande.nom }}</td>
                <td></td> #}
                {# <td>{{ commande.email }}</td> #}
                  <td>
               <b class="badge badge-primary" style="background-color:{{commande.typestatut.color}};">  {{ commande.typestatut.designation   }} </b>

                  </td>
 <td style="">
                {% for produit in commande.produit %}
                 
                <b  sytle="color:{{ random(['#000000', '#000000', '#000000']) }} ;"> {% if produit.lproduit.designation is defined %}
                  {{produit.lproduit.designation|slice(0,20)}}
                  {% else %}
                  NON FOURNI
                {% endif %} </b> {% endfor %}</td>
                 
                {# <td>{{ commande.adresseclient }}</td> #}
                <td>{{ commande.adresseclientlivraison }}</td>
                <td> {{ commande.telephone }}/  {{ commande.contact }} </td>
                {# <td>{{ commande.datelivraison ? commande.datelivraison|date('Y-m-d H:i:s') : '' }}</td> #}
                <td>{{ commande.datecommande ? commande.datecommande|date('Y-m-d H:i:s') : '' }}</td>
         
                
            </tr>
        {% else %}
            <tr>
                <td colspan="10">Aucun enregistrement trouvé</td>
            </tr>
        {% endfor %}
        </tbody>


                         
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
     
      </div>

{% for commande in commandes %}
{% set refTva = 0 %}
{% for produit in commande.produit %}
    {% set refTva = refTva+ produit.prix   %}
{% endfor %} 
{# <div class="modal fade bd-example-modal-lg"    id="detail{{ commande.id }}" tabindex="-1" role="dialog" aria-labelledby="formModal" style="display: none;" aria-hidden="true"> #}
  <div class="modal fade alert" id="detail{{ commande.id }}" tabindex="-1"  role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                 
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
              </div>
              <div class="modal-body">
                 <h1 ><b style ="color:#000000;font-size:19px;">Pour validation de la Commande</b> <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" display="none">{{ 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>Date livraison souhaitée:</th>
                <td>{{commande.datecommande|date('Y')}}-{{commande.datecommande|date('m')}}-{{commande.datecommande|date('d')}}</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>
   
<label id="affiche" style="color: green;" ></label>
   <a href="{{ path('commande_en_attente') }}" class="btn btn-success">Retour a la liste</a>
 {# <button class="btn btn-theme"  id="btnSearch" style="background-color:#1976D2;"type="submit">Valider</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>
{% endfor %}
    
{% endblock %}
{% block javascripts %} 
   {{parent()}}

           <script type="text/javascript" src="{{ asset('back/bundles/datatables/datatables.min.js') }}"></script>  
           <script type="text/javascript" src="{{ asset('back/bundles/datatables/DataTables-1.10.16/js/dataTables.bootstrap4.min.js') }}"></script>  
           <script type="text/javascript" src="{{ asset('back/bundles/datatables/export-tables/dataTables.buttons.min.js') }}"></script> 
           <script type="text/javascript" src="{{ asset('back/bundles/datatables/export-tables/buttons.flash.min.js') }}"></script>  
            <script type="text/javascript" src="{{ asset('back/bundles/datatables/export-tables/jszip.min.js') }}"></script>  
            <script type="text/javascript" src="{{ asset('back/bundles/datatables/export-tables/pdfmake.min.js') }}"></script>  
            <script type="text/javascript" src="{{ asset('back/bundles/datatables/export-tables/vfs_fonts.js') }}"></script> 
            <script type="text/javascript" src="{{ asset('back/bundles/datatables/export-tables/buttons.print.min.js') }}"></script>  
             <script type="text/javascript" src="{{ asset('back/js/page/datatables.js') }}"></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");
    window.location.reload();
                        } 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 %}