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

{% block body %}
 <div class="main-content" style="min-height: 568px;">
    <section class="section">
        {{ form_start(form) }}
        <center>
            <h1> <b style ="color:crimson;font-size:19px;"> RETRAIT COMMANDE  {{commande.numerocommande}}</b></h1>
            <b style ="color:crimson;font-size:19px;"> Merci de verifier les Informations présenté par le client ; merci de bien verifier les informations ci dessous avant toute actions</b>
            <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>
                                        </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  ; Si le client souhaite ajouté des article a sa commande vous pouvez ajouter 
                                
                                {% if (commande.typecanalcom.designation) == "FACEBOOK" %}
                                    |Campagne <b style="color:red;font-weight:bold;"> {{ commande.campagne }}</b> 
                                {% 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="col-md-12">
             <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>
                      typestatut
                        <tr>
                        <th>Choisir le statut  :</th>
                        <th>   {{ form_widget(form.typestatut) }}
   <div class="invalid-feedback">
                       {{ form_errors(form.typestatut


) }}
                      </div> </th>

                      </tr>
                      
                      <tr>
                        <th>date livraison  :</th>
                        <th>   {{ form_widget(form.datelivraison) }}
   <div class="invalid-feedback">
                       {{ form_errors(form.datelivraison


) }}
                      </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>

       <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 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> #}
 
    {# {{ form_widget(form.submit) }} #}
</div>
<div class="col-md-6">
   <a href="javascript:history.back()" class="btn btn-warning">Retour </a>
      <input type="submit" value="Valider"   class="btn btn-success"/>

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

        </section>
       </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() {
 
       var stylesa = {
      color : "crimson",
      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_retrait_reducbool").change(function () {
   var styles = {
      color : "crimson",
      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_retrait_reducbool").val()); 
                   if($("#commandes_retrait_reducbool").val() == 1){ 
                     console.log("OUI");
                     $("#commandesmontant1").css("display", "block");
                      $("#commandesmontant2").css("display", "block");
                     $("#affiche").html("").css( styles );

                   } 
                   if($("#commandes_retrait_reducbool").val() == 2)  {
                     console.log("NON");
                     $("#commandesmontant1").css("display", "none");
                     $("#commandesmontant2").css("display", "none");

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

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

        });
     $("#commandes_retrait_paiementbool").change(function () {
   var styles = {
      color : "crimson",
      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_retrait_paiementbool").val()); 
                   if($("#commandes_retrait_paiementbool").val() == 1){ 
                     console.log("OUI");
                     $("#commandesmontant").css("display", "block");
                     $("#affiche").html("").css( styles );

                   } 
                   if($("#commandes_retrait_paiementbool").val() == 2)  {
                     console.log("NON");
                     $("#commandesmontant").css("display", "none");
                    $("#affiche").html("").css( styles1 ); 
                   }
                   if($("#commandes_retrait_paiementbool").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 : "crimson",
      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 %}