<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
   aria-hidden="true">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Historique client: {{ nameclient|title }}</h5>
         </div>
         <div class="modal-body">
            <div class="row">
               <div class="card">
                  <div class="card-body">
                     {% if totalcommande|trim >0 %}
                     <center style="color: #000000;font-size=23px;font-weight:bold;">
                        le taux de commande reussi  est {{ ((totalcommandeeffecture|trim /totalcommande|trim )*100 )|round(2, 'floor') }} %  
                     </center>
                     <div class="progress" data-height="20" data-toggle="tooltip" title=""
                        data-original-title="{{ ((totalcommandeeffecture|trim /totalcommande|trim )*100 )|round(2, 'floor') }}"
                        style="height: 4px;">
                        {% if ((totalcommandeeffecture|trim /totalcommande|trim )*100 )|round(2, 'floor') < 25 |round(2, 'floor')%}
                        <div class="progress-bar bg-danger" role="progressbar"
                           style="width: {{ ((totalcommandeeffecture|trim /totalcommande|trim )*100 )|round(2, 'floor') }}%"
                           aria-valuenow="{{ ((totalcommandeeffecture|trim /totalcommande|trim )*100 )|round(2, 'floor') }}"
                           aria-valuemin="0" aria-valuemax="100"></div>
                        {% endif %}
                        {% if ( ((totalcommandeeffecture|trim /totalcommande|trim )*100 )|round(2, 'floor') > 25 |round(2, 'floor') ) and  ( ((totalcommandeeffecture|trim /totalcommande|trim )*100 )|round(2, 'floor') <75 |round(2, 'floor') ) %}
                        <div class="progress-bar bg-orange" role="progressbar"
                           style="width: {{ ((totalcommandeeffecture|trim /totalcommande|trim )*100 )|round(2, 'floor') }}%"
                           aria-valuenow="{{ ((totalcommandeeffecture|trim /totalcommande|trim )*100 )|round(2, 'floor') }}"
                           aria-valuemin="0" aria-valuemax="100"></div>
                        {% endif %}
                        {% if ((totalcommandeeffecture|trim /totalcommande|trim )*100 )|round(2, 'floor') > 75 |round(2, 'floor')%}
                        <div class="progress-bar bg-green" role="progressbar"
                           style="width: {{ ((totalcommandeeffecture|trim /totalcommande|trim )*100 )|round(2, 'floor') }}%"
                           aria-valuenow="{{ ((totalcommandeeffecture|trim /totalcommande|trim )*100 )|round(2, 'floor') }}"
                           aria-valuemin="0" aria-valuemax="100"></div>
                        {% endif %}
                     </div>
                     {% endif %}
                     <div class="table-responsive table-invoice">
                        <table border=5 class="table table-striped">
                           <tbody>
                              <tr>
                                 <th>Info </th>
                                 <th>Article(s)</th>
                              </tr>
                              {% for commande in commandes %}
                              {% set refTva = 0 %}
                              {% for produit in commande.produit %}
                              {% set refTva = refTva+ produit.lproduit.prixunitaire %}
                              {% endfor %}
                              <tr {% if (boolbutton)=="0" %} {% if (commande.typestatut.designation == "livraison effectuée" ) %}
                              style="background-color:#C8E6C9;"
                              {% elseif (commande.typestatut.designation == "echec Livraison" ) %}
                              style="background-color:#B2EBF2;"
                              {% elseif (commande.typestatut.designation == "prêt pour livraison" ) %} style="display:none;"
                              {% endif %} {% else %} {% if (commande.typestatut.designation == "livraison effectuée" ) %}
                              style="background-color:#C8E6C9;"
                              {% elseif (commande.typestatutfeuille.designation == "echec Livraison" ) %}
                              style="background-color:#B2EBF2;"
                              {% elseif (commande.typestatut.designation == "prêt pour livraison" ) %} style="display:none;"
                              {% endif %} {% endif %}>
                              <td class="color"> <a href="{{ path('commandes_edit_facebook', {'id': commande.id}) }}" style="text-decoration:none;" >{{ commande.numerocommande }}</a>  </br>prix cmd </br>: {% for produit in commande.produit %} {{ ((produit.lproduit.prixunitaire * produit.quantite) - commande.montantreduction - commande.montantpaiementavance)|number_format(0, ',', ' ') }} {% endfor %}
                                 FCFA
                                 Statut:               <b class="badge badge-primary" style="background-color:{{commande.typestatut.color}};">  {{ commande.typestatut.designation   }} </b>
                                 Date de commande : {{ commande.datecommande|date('d-m-Y H:i') }} 
                              </td>
                              {# 
                              <td> {{ commande.adresseclientlivraison }}</br> </td>
                              #}
                              <td>
                                 <table border=3 class="table table-striped">
                                    <tbody>
                                       <tr>
                                          <th>Designation</th>
                                          <th>Quantité.</th>
                                          <th>Sous Total.</th>
                                          {% if commande.reducbool.designation =="OUI" %}
                                          <th>Reduction montant.</th>
                                          {% endif %}
                                          {% if commande.paiementbool.designation =="OUI"  %}
                                          <th>Paiement par avance.</th>
                                          {% endif %}
                                       </tr>
                                       <tr>
                                          <td> {% for produit in commande.produit %} <b style="color:#000000;">
                                             {{produit.lproduit.designation}}
                                             </b> / </br> {% endfor %}
                                          </td>
                                          <td>{% for produit in commande.produit %}{{ produit.quantite }}
                                             </br>{% endfor %}
                                          </td>
                                          <td>
                                             {% for produit in commande.produit %}{{ produit.lproduit.prixunitaire }}</br>{% endfor %}
                                          </td>
                                          {% if commande.reducbool.designation =="OUI" %}
                                          <td>{{ commande.montantreduction|number_format(0, ',', ' ') }}
                                          </td>
                                          {% endif %}
                                          {% if commande.paiementbool.designation =="OUI"  %}
                                          <td>{{ commande.montantpaiementavance|number_format(0, ',', ' ') }}
                                          </td>
                                          {% endif %}
                                       </tr>
                                    </tbody>
                                 </table>
                              </tr>
                              {% endfor %}
                           </tbody>
                        </table>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>