{% extends 'menuback.html.twig' %}
{% set quanteffectuer = 0 %} 

  {% set fraiseffectuer = 0 %} 
{% set prixtotaleffectuer = 0 %} 
 
 {% for commande in commandes  if (commande.typestatut.designation == "livraison effectuée" )%}
  {% set fraiseffectuer = fraiseffectuer+ commande.fraislivraison %} 
 {% for produit in commande.produit   %}
  {% set quanteffectuer = quanteffectuer+ produit.quantite %} 
  {% set prixtotaleffectuer = prixtotaleffectuer+ produit.quantite * produit.lproduit.prixunitaire %} 
  {% endfor %}
  {% endfor %} 
  {% set quanteffectuer1 = 0 %} 

   
 
 {% for commande in commandes  if (commande.typestatut.designation == "en attente" )%}
  {% set quanteffectuer1 = quanteffectuer1 + 1 %}
  {% endfor %} 
    {% set annuler = 0 %} 
   {% for commande in commandes  if (commande.typestatut.designation == "annuler" )%}
  {% set annuler = annuler + 1 %}
  {% endfor %} 
   {% set enlivraison = 0 %} 
   {% for commande in commandes  if (commande.typestatut.designation == "en Livraison" )%}
  {% set enlivraison = enlivraison + 1 %}
  {% endfor %} 
   {% set enechec = 0 %} 
   {% for commande in commandes  if (commande.typestatut.designation == "echec Livraison" )%}
  {% set enechec = enechec + 1 %}
  {% endfor %} 
{% block stylesheets %} 
   {{parent()}}
 {% endblock %}

{% block body %}
<div class="main-wrapper main-wrapper-1">
       <!-- Main Content -->
      <div class="main-content" style="min-height: 540px;">
        <section class="section">
          <center> <h4 style="color:crimson;">STATISTIQUE GENERAL</h4>  </center> 
          <div class="row ">
          
            <div class="col-xl-3 col-lg-6">
              <div class="card l-bg-green-dark">
                <div class="card-statistic-3">
                  <div class="card-icon card-icon-large"><i class="fa fa-award"></i></div>
                  <div class="card-content">
                    <h4 class="card-title"> ({{commandes|length}}) Commandes</h4>
                    
                    <span> {{quanteffectuer1}} Commandes en attente </span>
                    <br>
                    <span> {{annuler}} Commandes annuler </span>
                     <br>
                    <span> {{enlivraison}} Commandes en livraison </span>
                     <br>
                    <span> {{enechec}} Commandes en échec </span>
                    
                    {# <div class="progress mt-1 mb-1" data-height="8" style="height: 8px;">
                      <div class="progress-bar l-bg-purple" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
                    </div>
                    <p class="mb-0 text-sm">
                      <span class="mr-2"><i class="fa fa-arrow-up"></i> 10%</span>
                      <span class="text-nowrap">Since last month</span>
                    </p> #}
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-6">
              <div class="card l-bg-cyan-dark">
                <div class="card-statistic-3">
                  <div class="card-icon card-icon-large"><i class="fa fa-briefcase"></i></div>
                  <div class="card-content">
                    <h4 class="card-title">Utilisateurs de lapplication</h4>
                    <span>{{users|length}} (Agents et Admin)</span><br>
                     <span>{{fournisseurs|length}} (Livreurs)</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-6">
              <div class="card l-bg-purple-dark">
                <div class="card-statistic-3">
                  <div class="card-icon card-icon-large"><i class="fa fa-globe"></i></div>
                  <div class="card-content">
                    <h4 class="card-title">Articles dans le systeme</h4>
                    <span style="color:#000000;font-style=bold;">{{produits|length}} articles</span>
                    
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-6">
              <div class="card l-bg-orange-dark">
                <div class="card-statistic-3">
                  <div class="card-icon card-icon-large"><i class="fa fa-money-bill-alt"></i></div>
                  <div class="card-content">
                    <h4 class="card-title">Transaction financiere</h4>
                    <span>{{prixtotaleffectuer|number_format(0, ',', ' ')}} FCFA</span>
                    <br>
                    <span>  {{quanteffectuer}} Commandes effectuée </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
 
       <div class="row ">
       <div   class="col-12 col-md-12 col-lg-12">
     <div class="card">
                  <div class="card-header">
                    <h4></h4>
                  </div>
                  <div class="card-body">
                    <div class="form-row">
        <input name="valide" value="ok" type="hidden"  class="form-control">     
<div class="form-group col-md-6">
<label for="inputEmail4">Date debut</label>
<input type="date" class="form-control"  id="datedebut">                    
  </div>
 <div class="form-group col-md-6">
  <label for="inputPassword4">Date fin </label>
<input type="date" class="form-control" id="datefin">                     
 </div>
</br><button type="submit" class="btn btn-success marginleft" id="btnEnvoyer"  >Soumettre <span class="glyphicon glyphicon-send"></span></button> 
                                  {{ render(controller(
        'App\\Controller\\TypestatutController::indexrender' 
    )) }}   
                  <div id="response">
    <pre></pre>
</div>

                    </div>
                   
                     
                  </div>
                 
                </div>
       </div>   
       </div>
  
    </div>
{% endblock %}
{% block javascripts %} 
   {{parent()}}
<script>
$(document).ready(function(){
  var input = null;
  var input2 = null;
   document.getElementById("datedebut").addEventListener("change", function() {
     console.log("date de debut");
    input = this.value;
    console.log(input);
    var dateEntered = new Date(input);
   
    console.log(dateEntered); //e.g. Fri Nov 13 2015 00:00:00 GMT+0000 (GMT Standard Time)
});
 document.getElementById("datefin").addEventListener("change", function() {
     console.log("date de fin");
    input2 = this.value;
    console.log(input2);
     var dateEntered = new Date(input2);
   
    console.log(dateEntered); //e.g. Fri Nov 13 2015 00:00:00 GMT+0000 (GMT Standard Time)
});

   
          
          
$("#btnEnvoyer").click(function(e) {
  console.log("le boutton a été soumis ");
            console.log(input);
            console.log(input2)
    e.preventDefault();
    $.ajax({
          url: '{{path('getsearch')}}',
                    type: 'POST',
                    async: true,
        data: { 
            datedebut: input, // < note use of 'this' here
            datefin: input2 
        },
        success: function( data, textStatus, jQxhr ){
        console.log(data['commandes'])  ;
  
Object.entries(data['commandes']).forEach(([key, value]) => {
    console.log(`${key}: ${value}`)
});
        $('#response pre').html( JSON.stringify( data ) );
    },
    error: function( jqXhr, textStatus, errorThrown ){
        console.log( errorThrown );
    }
    }); });
 
         

});
</script>
 {% endblock %}