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


{% block body %}
{% set boolbutton = 0 %}
{% set nameclient = "Nous avons pas pu identifier le nom client" %}
{% for commande in commandes   %}
{% if loop.first %}
{% set nameclient = commande.nom %}
{% if commande.livraison  %}
{% if (commande.livraison.statut ) =="Finalisé" or (commande.livraison.statut ) =="Cloturer" %}
{% set boolbutton = 1 %}
{% else %}
{% set boolbutton = 0 %}
{% endif %}
{% else %}
{% set boolbutton = 0 %}
{% endif %}



{% endif %}

{% endfor %}








{% set quant = 0 %}
{% set montantreduc = 0 %}
{% set montantpaiement = 0 %}
{% set frais = 0 %}
{% set prixtotal = 0 %}

{% set totalcommande = 0 %}
{% set totalcommandeeffecture = 0 %}
{% set totalcommandeechec = 0 %}


{% for commande in commandes %}

{% set totalcommande = totalcommande+ commande|length  %}

{% set frais = frais+ commande.fraislivraison %}
{% set montantreduc = montantreduc+ commande.montantreduction %}
{% set montantpaiement = montantpaiement+ commande.montantpaiementavance %}
{% for produit in commande.produit %}
{% set quant = quant+ produit.quantite %}
{% set prixtotal = prixtotal+ produit.quantite * produit.lproduit.prixunitaire %}
{% endfor %}
{% endfor %}


{% set quanteffectuer = 0 %}
{% set montantreduc1 = 0 %}
{% set montantpaiement1 = 0 %}
{% set fraiseffectuer = 0 %}
{% set prixtotaleffectuer = 0 %}

{% for commande in commandes  if (commande.typestatut.designation == "livraison effectuée" )%}

{% set totalcommandeeffecture = totalcommandeeffecture+ commande|length  %}


{% set fraiseffectuer = fraiseffectuer+ commande.fraislivraison %}
{% set montantreduc1 = montantreduc1 + commande.montantreduction %}
{% set montantpaiement1 = montantpaiement1 + commande.montantpaiementavance %}
{% for produit in commande.produit   %}
{% set quanteffectuer = quanteffectuer+ produit.quantite %}
{% set prixtotaleffectuer = prixtotaleffectuer+ produit.quantite * produit.lproduit.prixunitaire %}
{% endfor %}
{% endfor %}


{% if (boolbutton)=="0" %}

{% set quantechec = 0 %}
{% set montantreduc2 = 0 %}
{% set montantpaiement2 = 0 %}
{% set fraisechec = 0 %}
{% set prixtotalechec = 0 %}

{% for commande in commandes  if (commande.typestatut.designation == "echec Livraison" )%}

{% set totalcommandeechec = totalcommandeechec+ commande|length  %}


{% set fraisechec = fraisechec+ commande.fraislivraison %}
{% set montantreduc2 = montantreduc2 + commande.montantreduction %}
{% set montantpaiement2 = montantpaiement2 + commande.montantpaiementavance %}
{% for produit in commande.produit   %}
{% set quantechec = quantechec+ produit.quantite %}
{% set prixtotalechec = prixtotalechec+ produit.quantite * produit.lproduit.prixunitaire %}
{% endfor %}
{% endfor %}

{% else %}
{% set quantechec = 0 %}
{% set montantreduc2 = 0 %}
{% set montantpaiement2 = 0 %}
{% set fraisechec = 0 %}
{% set prixtotalechec = 0 %}

{% for commande in commandes  if (commande.typestatutfeuille.designation == "echec Livraison" )%}
{% set totalcommandeechec = totalcommandeechec+ commande|length  %}

{% set fraisechec = fraisechec+ commande.fraislivraison %}
{% set montantreduc2 = montantreduc2 + commande.montantreduction %}
{% set montantpaiement2 = montantpaiement2 + commande.montantpaiementavance %}
{% for produit in commande.produit   %}
{% set quantechec = quantechec+ produit.quantite %}
{% set prixtotalechec = prixtotalechec+ produit.quantite * produit.lproduit.prixunitaire %}
{% endfor %}
{% endfor %}



{% endif %}





<div class="main-content" style="min-height: 568px;">
  <section class="section">
    {{ form_start(form) }}
    <center>
      <h1> <b style="color:blue;font-size:20px;"> Prise en compte de la commande :{{commande.numerocommande}}</b></h1>
      {% if boollistcmd == true %}
      <b style="color:green;font-size:20px;"> Ce client a passé ({{totalcommande}}) commandes déja à EAS </b>


      <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg"> historique
        </button>


      {% else %}
      <b style="color:crimson;font-size:20px;"> Ce client n'a jamais passer de commande EAS </b>
      {% endif %}
      <center>
        <div class="row">
          <div class="col-md-6">

            <div class="card">
              <div class="card-header">

                <h4>Informations client</h4>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table dataTable table-striped">
                    <tbody>
                      <tr>
                        <div class="form-group col-md-12">
                          {{ form_widget(form.nom, {'attr': {'class': 'form-control','placeholder':'Nom'}}) }}
                          <div class="invalid-feedback">
                            {{ form_errors(form.nom) }}
                          </div>

                      </tr>

                      <tr>
                        <div class="form-group col-md-12">
                          {{ form_widget(form.prenoms, {'attr': {'class': 'form-control','placeholder':'Prenoms'}}) }}
                          <div class="invalid-feedback">
                            {{ form_errors(form.prenoms) }}
                          </div>
                        </div>

                      </tr>

                      <tr>
                        <div class="form-group col-md-12">
                          {{ form_widget(form.email, {'attr': {'class': 'form-control','placeholder':'email client'}})
                          }}
                          <div class="invalid-feedback">
                            {{ form_errors(form.email) }}
                          </div>
                        </div>

                      </tr>
                      <tr>
                        <div class="form-group col-md-12">
                          AGENCE DE TRAITEMENT
                          {{ form_widget(form.uotreich, {'attr': {'class': 'form-control'}}) }}
                          <div class="invalid-feedback">
                            {{ form_errors(form.uotreich) }}
                          </div>
                        </div>

                      </tr>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card">
              <div class="card-header">

                <h4>Informations de livraison</h4>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table dataTable table-striped">
                    <tbody>
                      <tr>
                        <div class="form-group col-md-12">



                          {{ form_widget(form.priorite) }}
                          <div class="invalid-feedback">
                            {{ form_errors(form.priorite) }}
                          </div>
                        </div>


                      </tr>
                      <tr>
                        <div class="form-group col-md-12">



                          {{ form_widget(form.typecommune, {'attr': {'class': 'js-example-basic-single1' }}) }}
                          <div class="invalid-feedback">
                            {{ form_errors(form.typecommune) }}
                          </div>
                        </div>


                      </tr>
                      <tr>
                        <div class="form-group col-md-12">



                          {{ form_widget(form.adresseclientlivraison, {'attr': {'class': 'form-control','placeholder':'Adresse de livraison'}})
                          }}
                          <div class="invalid-feedback">
                            {{ form_errors(form.adresseclientlivraison) }}
                          </div>
                        </div>


                      </tr>
                      <tr>
                        <div class="row">
                          <div class="form-group col-md-6">

                            {{ form_widget(form.telephone, {'attr': {'class': 'form-control','placeholder':'Saisir contact 1'}})
                            }}
                            <div class="invalid-feedback">
                              {{ form_errors(form.telephone) }}
                            </div>
                          </div>
                          <div class="form-group col-md-6">
                            {{ form_widget(form.contact, {'attr': {'class': 'form-control','placeholder':'Saisir contact 2'}})
                            }}
                            <div class="invalid-feedback">
                              {{ form_errors(form.contact) }}
                            </div>
                          </div>
                        </div>

                      </tr>

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




        <div class="row">
          <div class="col-12 col-sm-12 col-lg-12">
            <div class="card">
              <div class="card-header">
                <h4>Informations sur le produit {% if (commande.typecanalcom.designation) == "FACEBOOK" %}
                  |Campagne <b style="color:red;font-weight:bold;"> {{ commande.campagne }}</b>
                  {% endif %} {% if (commande.typecanalcom.designation) == "Site EAS" %} | <b
                    style="color:red;font-weight:bold;"> {{ commande.campagne }}</b> ; Quantité :
                  {{ commande.quantite }};Prix unitaire site:{{commande.prixunitairesite}} {% endif %}
                  {% if (commande.typecanalcom.designation) == "G-DOC" %} | <b style="color:red;font-weight:bold;">
                    {{ commande.campagne }}</b> ; Quantité : {{ commande.quantite }};Prix unitaire
                  site:{{commande.prixunitairesite}} {% endif %}

                </h4>
              </div>
              <div class="card-body">
                <div class="table-responsive table-invoice">
                  <table class="table table-striped">
                    <tbody>
                      <fieldset>
                        <legend>Article:</legend>
                        <ul class="tags" data-prototype="
              {% filter escape %}
                {% include 'commandes/produit_proto.html.twig' with { 'form': form.produit.vars.prototype } only %}
              {% endfilter %}">
                          {% for emailField in form.produit %}
                          <li>
                            {{ form_errors(emailField) }}
                            {{ form_widget(emailField) }}
                          </li>
                          {% endfor %}

                        </ul>
                      </fieldset>
                      {# <table class="table">
                        <th  >Produit</th>
                        <th  >Quantité</th>
                         
                        <th >Action</th>
                        <tr>
                            <td  >{{ form_widget(f.produit) }}</td>
                            <td  >{{ form_widget(f.qte) }}</td>
                            
                            <td  >
                                <input type="submit" value="Add" name="bt" class="btn btn-warning"/>
                                <i class="glyphicon glyphicon-save"></i>
                            </td>
                        </tr>
                    </table>
                    <table class="table table-condensed">
                        <thead class="thead-dark">
                            <tr>
                                <th>Ligne</th>
                                <th class="col-md-2">Désignation Article</th>
                                <th class="col-md-1">Quantité</th>
                                <th class="col-md-1">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for t in lcomm %}
                            <tr>
                                <td class="col-md-2">{{ t.lig }}</td>
                                <td class="col-md-1">{{ t.produit.designation }}</td>
                                <td class="col-md-1">{{ t.qte }}</td>
                                <td class="col-md-1">
                                    <a href="{{ path('supprimer', {'id': t.lig }) }}" 
                                    class="btn btn-danger">
                                    <i class="glyphicon glyphicon-apple"></i>
                                    Supprimer
                                    </a>
                                </td>
                            </tr>
                            {% endfor %} #}
                    </tbody>
                  </table>

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



        {# <div class="row">
                    <div class="col-12 col-sm-12 col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h4>Commentaires</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive table-invoice">
                                    <table class="table table-striped">
                                        <tbody>
            <div class="row">                             
         <div class="form-group col-md-12">
 
                             <fieldset>
  <legend>Commentaire(s):</legend>
  <input name="valide" value="ok" type="hidden"  class="form-control">
   <textarea rows="10"  name="comment" placeholder="Entrer votre message" class="form-control" required></textarea>
  </fieldset> 
                       </div> 
                       
                       
                       </div>
                      
                                            
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> #}



        <div class="row">
          <div class="col-md-6">
            <div class="card">
              <div class="card-header">

                <h4>Statut de la commande et canal de communication</h4>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table dataTable table-striped">
                    <table class="table table-striped">
                      <tbody>
                        {# <tr>
                        <th>Confirmation   </th>
                        <th>   <div class="form-group col-md-6">
                  <label class="d-block"> décocher la case si la commande n'est pas valider</label>
                  <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="defaultCheck2" value="true" name="validercomande" checked>
                        <label class="form-check-label" for="defaultCheck2">
                         Valider
                        </label>
                      </div>
    <div class="invalid-feedback">
                       </div>
                    </div></th>

                      </tr> #}
                        <tr>
                          <th>Choisir un statut:</th>
                          <th> {{ form_widget(form.typestatut) }}

                            <div class="invalid-feedback">
                              {{ form_errors(form.typestatut) }}

                            </div>
                          </th>

                        </tr>
                        <tr>
                          <th>Canal de communication:</th>
                          <th> {{ form_widget(form.typecanalcom) }}

                            <div class="invalid-feedback">
                              {{ form_errors(form.typecanalcom


) }}

                            </div>
                          </th>

                        </tr>



                        </tr>

                      </tbody>
                    </table>

                    <div class="form-row">
                      <div class="form-group col-md-9">


                      </div>

                      <div class="form-group col-md-3">



                      </div>
                    </div>


                </div>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="card">
              <div class="card-header">

                <h4>Information complementaire sur la livraison </h4>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table dataTable table-striped">
                    <tbody>
                      <tr>
                        <th>date livraison :</th>
                        <th> {{ form_widget(form.datelivraison) }}
                          <div class="invalid-feedback">
                            {{ form_errors(form.datelivraison


) }}
                          </div>
                        </th>

                      </tr>

                      <tr>
                        <th>Frais de livraison:</th>
                        <th> {{ form_widget(form.fraislivraison) }}
                          <label id="affiche"></label>
                          <div class="invalid-feedback" style="background-color:red;">
                            {{ form_errors(form.fraislivraison


) }}

                          </div>
                        </th>

                      </tr>

                      <tr>
                        <th>Reduction prix:</th>
                        <th> {{ form_widget(form.reducbool) }}
                          <label id="affiche"></label>
                          <div class="invalid-feedback" style="background-color:red;">
                            {{ form_errors(form.reducbool


) }}

                          </div>
                        </th>

                      </tr>



                      <tr id="commandesmontant">

                        <th>Montant reduction:</th>
                        <th> {{ form_widget(form.montantreduction) }}

                          <div class="invalid-feedback" style="background-color:red;">
                            {{ form_errors(form.montantreduction


) }}

                          </div>
                        </th>
                      <tr>
                        <th>Paiement par avance:</th>
                        <th> {{ form_widget(form.paiementbool) }}
                          <label id="affiche"></label>
                          <div class="invalid-feedback" style="background-color:red;">
                            {{ form_errors(form.paiementbool


) }}

                          </div>
                        </th>
                      </tr>

                      <tr>
                        <th>Frais de livraison Sous traitant:</th>
                        <th> {{ form_widget(form.fraislivraisonsoustraitant) }}
                          <label id="affiche"></label>
                          <div class="invalid-feedback" style="background-color:red;">
                            {{ form_errors(form.fraislivraisonsoustraitant


) }}

                          </div>
                        </th>




                      </tr>

                      <tr id="commandesmontant1">
                        <th>Montant paiement par avance:</th>
                        <th> {{ form_widget(form.montantpaiementavance) }}
                          <label id="affiche"></label>
                          <div class="invalid-feedback" style="background-color:red;">
                            {{ form_errors(form.montantpaiementavance) }}
                          </div>
                        </th>

                      </tr>

                      {# <tr id="commandesmontant2">
                        <th>Mode de paiement par avance:</th>
                        <th> {{ form_widget(form.modepaiementparavance) }}
                          <label id="affiche"></label>
                          <div class="invalid-feedback" style="background-color:red;">
                            {{ form_errors(form.modepaiementparavance) }}

                          </div>
                        </th>

                      </tr> #}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-6">
            {# <button  class="btn btn-primary">Enregistrer</button> #}
            <input type="submit" value="Valider" name="bt" class="btn btn-success" />

            {# {{ form_widget(form.submit) }} #}
          </div>
          <div class="col-md-6">
            <a href="javascript:history.back()" class="btn btn-warning">Retour</a>

          </div>
        </div>
        {{ form_end(form) }}


  </section>
</div>









<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="#" 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>
  {% endblock %}
  {% block javascripts %}
  {{parent()}}
  <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function () {
 
      // start recuperer le numero de telephone pour voir s il a deja commmander et creer le lien pour la redirection 

      // end recuperer
      var stylesa = {
        color: "#FFFFFF",
        fontWeight: "bold",
        fontSize: "20px",
        fontStyle: "italic",
        position: "center",


      };
      $(".form-check-label").html("Cochez pour Transferer la commande vers treichville").css(stylesa);


      $("#commandesmontant").css("display", "none");
      $("#commandesmontant1").css("display", "none");
      $("#commandesmontant2").css("display", "none");

      $("#commandes_type_face_paiementbool").change(function () {
        var styles = {
          color: "#FFFFFF",
          fontWeight: "bold",
          fontSize: "20px",
          fontStyle: "italic",
          position: "center"

        };
        var styles1 = {
          color: "#01579B",
          fontWeight: "bold",
          fontSize: "20px",
          fontStyle: "italic",
          position: "center"

        };

        console.log("Valeur selectionée 1", $("#commandes_type_face_paiementbool").val());
        if ($("#commandes_type_face_paiementbool").val() == 1) {
          console.log("OUI");
          $("#commandesmontant1").css("display", "block");
          $("#commandesmontant2").css("display", "block");

          $("#affiche").html("").css(styles);

        }
        if ($("#commandes_type_face_paiementbool").val() == 2) {
          console.log("NON");

          document.getElementById("commandes_type_face_montantpaiementavance").value = '0';

          $("#commandesmontant1").css("display", "none");
          $("#commandesmontant2").css("display", "none");

          $("#affiche").html("").css(styles1);
        }
        if ($("#commandes_type_face_paiementbool").val() === "") {
          $("#commandesmontant1").css("display", "none");
          $("#commandesmontant2").css("display", "none");

          console.log("RIEN");
          $("#affiche").html("").css(styles1);
        }


      });

      $("#commandes_type_face_reducbool").change(function () {
        var styles = {
          color: "#FFFFFF",
          fontWeight: "bold",
          fontSize: "20px",
          fontStyle: "italic",
          position: "center"

        };
        var styles1 = {
          color: "#01579B",
          fontWeight: "bold",
          fontSize: "20px",
          fontStyle: "italic",
          position: "center"

        };

        console.log("Valeur selectionée 1", $("#commandes_type_face_reducbool").val());
        if ($("#commandes_type_face_reducbool").val() == 1) {
          console.log("OUI");
          $("#commandesmontant").css("display", "block");
          $("#affiche").html("").css(styles);

        }
        if ($("#commandes_type_face_reducbool").val() == 2) {
          console.log("NON");

          document.getElementById("commandes_type_face_montantreduction").value = '0';
          $("#commandesmontant").css("display", "none");
          $("#affiche").html("").css(styles1);
        }
        if ($("#commandes_type_face_reducbool").val() === "") {
          $("#commandesmontant").css("display", "none");
          console.log("RIEN");
          $("#affiche").html("").css(styles1);
        }


      });
      var fileCount = '{{ form.produit|length }}';
      var removeButton =
        "<button type='button' class='btn btn-danger btn-xs' onclick='removeFile($(this));'><i class='fa fa-times' aria-hidden='true'></i></button>";

      function removeFile(ob) {
        ob.parent().parent().remove();
      }
      var $addTagLink = $(
        '<a href="#" class="btn btn-icon icon-left btn-primary"><i class="far fa-edit"></i> Ajouter un article</a>'
        );
      var $newLinkLi = $('<li></li>').append($addTagLink);

      jQuery(document).ready(function () {
        // Get the ul that holds the collection of tags
        var $collectionHolder = $('ul.tags');

        // add the "add a tag" anchor and li to the tags ul
        $collectionHolder.append($newLinkLi);

        // count the current form inputs we have (e.g. 2), use that as the new
        // index when inserting a new item (e.g. 2)
        $collectionHolder.data('index', $collectionHolder.find(':input').length);

        $addTagLink.on('click', function (e) {
          // prevent the link from creating a "#" on the URL
          e.preventDefault();

          // add a new tag form (see code block below)
          addTagForm($collectionHolder, $newLinkLi);
        });


      });

      function addTagForm($collectionHolder, $newLinkLi) {
        // Get the data-prototype explained earlier
        var prototype = $collectionHolder.data('prototype');

        // get the new index
        var index = $collectionHolder.data('index');

        // Replace '$$name$$' in the prototype's HTML to
        // instead be a number based on how many items we have
        var newForm = prototype.replace(/__name__/g, index);

        // increase the index with one for the next item
        $collectionHolder.data('index', index + 1);

        // Display the form in the page in an li, before the "Add a tag" link li
        var $newFormLi = $('<li></li>').append(newForm);

        // also add a remove button, just for this example
        $newFormLi.append(
        '<a href="#" class="remove-tag btn btn-icon btn-danger"><i class="fas fa-times"></i></a>');

        $newLinkLi.before($newFormLi);

        // handle the removal, just for this example
        $('.remove-tag').click(function (e) {
          e.preventDefault();

          $(this).parent().remove();

          return false;
        });
      }
    });
  </script>
  <script>
    $(document).ready(function () {
      $("#commandes_fraislivraison").change(function () {
        var styles = {
          color: "#FFFFFF",
          fontWeight: "bold",
          fontSize: "20px",
          fontStyle: "italic",
          position: "center"

        };
        var styles1 = {
          color: "#01579B",
          fontWeight: "bold",
          fontSize: "20px",
          fontStyle: "italic",
          position: "center"

        };

        console.log("Valeur selectionée 1", $("#commandes_fraislivraison").val());
        if ($("#commandes_fraislivraison").val() === "1000") {
          console.log("ok");
          $("#affiche").html("").css(styles);
        }
        if ($("#commandes_fraislivraison").val() === "1500") {
          console.log("oksq");
          $("#affiche").html("").css(styles1);
        }


      });

      $('.js-example-basic-single').select2({
        theme: "classic",
        placeholder: 'choisir un type'
      });
      $('.js-example-basic-single1').select2({
        theme: "classic",
        placeholder: 'CHOISIR UNE COMMUNE'
      });
    });
  </script>


  {% endblock %}