{% extends 'menuback.html.twig' %} 
 
{% block stylesheets %} 
   {{parent()}}
    <style>
        #btnSearch{
            float: right;
            margin-right: 30%;

        }
        #loading{
            position: absolute;
{#            position: fixed;#}
{#            border: 1px solid #0d9243;#}
            display:none;
{#            margin: auto;#}
            right: 40%;
            top:300px;

        }

 
        #progress{
            position: absolute;
            width: 20%;
            margin-top: -2%;
            margin-left: 54%;
            display:none;

        }


    </style>
   
 {% endblock %}

{% 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;"> Ajouter un ticket</b></h1>
            
            </center>
                <div class="row">
                    <div class="col-md-6">
                 
                        <div class="card">
                            <div class="card-header">

                                <h4>Date </h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table dataTable table-striped">
                                        <tbody>
                                            <tr>
                                        Date d'ouverture	

                                             <div class="form-group col-md-12">
                          {{ form_widget(form.dateouvertureticket) }}
   <div class="invalid-feedback">
                       {{ form_errors(form.dateouvertureticket) }}
                    </div>

                                            </tr>

                                            <tr>
                                            Date de fin 	

                                        <div class="form-group col-md-12">
                       {{ form_widget(form.datefermetureticket) }}
   <div class="invalid-feedback">
                       {{ form_errors(form.datefermetureticket) }}
                      </div>
                    </div>


                                            </tr>

                                          

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

                                <h4>Informations du produit</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.modele, {'attr': {'class': 'form-control','placeholder':'modele'}}) }}
   <div class="invalid-feedback">
                       {{ form_errors(form.modele) }}
                      </div>
                    </div>



                                            </tr>
                                                                <tr>

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


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

                                    


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


                      {{ form_widget(form.title, {'attr': {'class': 'form-control','placeholder':' Designation de l article'}}) }}
   <div class="invalid-feedback">
                       {{ form_errors(form.title) }}
                      </div>
                    </div>


                                            </tr>
         <tr>
         <div class="row">
         <div class="form-group col-md-12">
                  
                      {{ form_widget(form.element, {'attr': {'class': 'form-control','placeholder':'Saisir contact 1'}}) }}
     

   <div class="invalid-feedback">
                       {{ form_errors(form.element) }}
                      </div>
                    </div>
                     <div class="form-group col-md-0">
                
   <div class="invalid-feedback">
                        
                      </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 ticket</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive table-invoice">
                                    <table class="table table-striped">
                                        <tbody>
                                       
  <legend>Description du ticket:</legend>
    {{ form_widget(form.description, {'attr': {'class': 'form-control','placeholder':'Saisir contact 2'}}) }}
   <div class="invalid-feedback">
                       {{ form_errors(form.description) }}
                      </div>
  
  {#  data-prototype="{{ form_widget(form.produit.vars.prototype)|e('html_attr') }}"
                      {# <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>Information sur la commande et le client:</legend>
             <p id="msgerror" style="color: red; text-align: center;"></p>                                             

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

  <div class="form-group col-md-12"  id="numerocommande">
{{ form_widget(form.numerocommande, {'attr': {'class': 'form-control','placeholder':'Numero de commande'}}) }}
   <div class="invalid-feedback">
{{ form_errors(form.numerocommande) }}
    </div>
     <a id="btnSearch" class="btn btn-success " style="display: none;" >Rechercher</a>
 </div>
  <div class="form-group col-md-12" id="demonimationclient">
{{ form_widget(form.demonimationclient, {'attr': {'class': 'form-control','placeholder':'Demonimation client'}}) }}
   <div class="invalid-feedback">
{{ form_errors(form.demonimationclient) }}
    </div>
 </div>


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


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




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

<div class="form-group col-md-12"  id="numerofacture">
{{ form_widget(form.numerofacture, {'attr': {'class': 'form-control','placeholder':'Numero de facture'}}) }}
   <div class="invalid-feedback">
{{ form_errors(form.numerofacture) }}
    </div>
 </div>

 <div class="form-group col-md-12" id="motifretour">
{{ form_widget(form.motifretour, {'attr': {'class': 'form-control','placeholder':'Motif de retour'}}) }}
   <div class="invalid-feedback">
{{ form_errors(form.motifretour) }}
    </div>
 </div>

 <div class="form-group col-md-12" id="dateachat">
 Date achat
{{ form_widget(form.dateachat) }}
   <div class="invalid-feedback">
{{ form_errors(form.dateachat) }}
    </div>
 </div>


<div class="form-group col-md-12"  id="produitgarantie">
Produit garantie
{{ form_widget(form.produitgarantie, {'attr': {'class': 'form-control','placeholder':'Motif de retour'}}) }}
   <div class="invalid-feedback">
{{ form_errors(form.produitgarantie) }}
    </div>
 </div>

                                    
       

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

                       <tr>
                        <th>Canal de communication:</th>
                        <th>    {{ form_widget(form.typecanal) }}
                      
   <div class="invalid-feedback">
                       {{ form_errors(form.typecanal


) }}

                      </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>Mettre les images :</th>
                        <th>   {{ form_widget(form.pictureFiles) }}
   <div class="invalid-feedback">
                       {{ form_errors(form.pictureFiles


) }}
                      </div> </th>

                      </tr>

                       <tr>
                        <th> </th>
                        <th>     
                      <label id="affiche" ></label>
   <div class="invalid-feedback" style="background-color:red;">
                       


) }}

                      </div> </th>

                      </tr>

                                             <tr>
                        <th> </th>
                        <th>    
                      <label id="affiche" ></label>
   <div class="invalid-feedback" style="background-color:red;">
                      


) }}

                      </div> </th>

                      </tr>

                         <tr>
                        <th> </th>
                        <th>     
                      <label id="affiche" ></label>
   <div class="invalid-feedback" style="background-color:red;">
     

                      </div> </th>

                      </tr>

                         <tr>
                        <th> </th>
                        <th>     
                      <label id="affiche" ></label>
   <div class="invalid-feedback" style="background-color:red;">
             

                      </div> </th>

                      </tr>


 

                      </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 la liste</a>
 
</div>
            </div>
  {{ form_end(form) }}
      

        </section>
       </div>
{# <div id="loading">
        <img src="{{asset("back/img/loading.gif")}}" alt="Loader" />
    </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() {

let demonimationclient = document.getElementById("demonimationclient");
let produitgarantie = document.getElementById("produitgarantie");
let adresseclient = document.getElementById("adresseclient");
let emailclient = document.getElementById("emailclient");
let numerocommande = document.getElementById("numerocommande");
let contact = document.getElementById("contact");
let numerofacture = document.getElementById("numerofacture");
let dateachat = document.getElementById("dateachat"); 
let motifretour = document.getElementById("motifretour"); 

$("#demonimationclient").css("display", "none");
$("#produitgarantie").css("display", "none");
$("#adresseclient").css("display", "none");
$("#emailclient").css("display", "none");
$("#numerocommande").css("display", "none");
$("#contact").css("display", "none");
$("#numerofacture").css("display", "none");
$("#dateachat").css("display", "none");
$("#motifretour").css("display", "none");
     $("#ticket_savchoice").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", $("#ticket_savchoice").val()); 
                   if($("#ticket_savchoice").val() == 1){ 
                     console.log("ok");
$("#demonimationclient").css("display", "block");
$("#produitgarantie").css("display", "block");
$("#adresseclient").css("display", "block");
$("#emailclient").css("display", "block");
$("#numerocommande").css("display", "none");
$("#contact").css("display", "block");
$("#numerofacture").css("display", "block");
$("#dateachat").css("display", "block");
$("#motifretour").css("display", "block");
                     $("#affiche").html("").css( styles );
                   } 
                   if($("#ticket_savchoice").val() == 2)  {
$("#demonimationclient").css("display", "block");
$("#produitgarantie").css("display", "none");
$("#adresseclient").css("display", "block");
$("#emailclient").css("display", "block");
$("#numerocommande").css("display", "block");
$("#contact").css("display", "block");
$("#numerofacture").css("display", "none");
$("#dateachat").css("display", "none");
$("#motifretour").css("display", "block");
                     console.log("oksq");
                    $("#affiche").html("").css( styles1 ); 
                   }
                    if($("#ticket_savchoice").val() ==="")  {
                     $("#demonimationclient").css("display", "none");
$("#produitgarantie").css("display", "none");
$("#adresseclient").css("display", "none");
$("#emailclient").css("display", "none");
$("#numerocommande").css("display", "none");
$("#contact").css("display", "none");
$("#numerofacture").css("display", "none");
$("#dateachat").css("display", "none");
$("#motifretour").css("display", "none");
                    $("#affiche").html("").css( styles1 ); 
                   }
            

        });
 
 $('.js-example-basic-single1').select2({
  theme: "classic",
  placeholder: 'CHOISIR UNE COMMUNE',
    "language": {
       "noResults": function(){
           return "Aucun resultat trouvé <a href='#' class='btn btn-danger'>Reésayez</a>";
       }
   },
    escapeMarkup: function (markup) {
        return markup;
    }
});





     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 type="text/javascript">
  var styles1 = {
      color : "#01579B",
      fontWeight: "bold",
      fontSize:"20px",
      fontStyle:"italic" ,
      position:"center"
       
    }; 
      
        //activer  le bouton rechercher lorsqu on saisi un caractère
        $("#ticket_numerocommande").keyup(function () {
            if ($("#ticket_numerocommande").val().length > 4) {
                console.log("ihuhiu");
                $("#btnSearch").fadeIn();

        {#                alert("keyup : "+$("#ticket_numerocommande").val().length);#}
                } else {
        {#$("#btnSearch").attr("disabled", "disabled");#}
                    $("#btnSearch").fadeOut();

                }


        {#                alert("keyup : "+$("#ticket_numerocommande").val().length);#}
            });


        {# $("#ticket_numerocommande").keys(function (){
             alert("keyup");
         });#}

             $("#btnSearch").click(function () {
        {#                alert("cliqué");#}
              $("#progress").css("display","block") ;
{#                window.setTimeout(partB,1000);#}
                getInfo($("#ticket_numerocommande").val());
            });
            function getInfo(numtelephone) {
                 console.log(numtelephone);
                //get Nombre groupe
                $.ajax({
                     url: '{{path('getinfoclientcmd')}}',
                    type: 'POST',
                    dataType: 'json',
                    async: false,
                    data: {numtelephone: numtelephone},
                   
                    success: function (data) {
                        if (data['Result'] === 'OK') {

                            $("#msgerror").html("Ce client existe dans le systeme"  ).css( styles1 ); 
  
                            var res = data['Record'];
                         
                         
                         $("#ticket_demonimationclient").attr("value", res["nom"] );
                           
                            $("#ticket_emailclient").attr("value", res["email"]);
                            $("#ticket_adresseclient").attr("value", res["adresseclientlivraison"]);
                            $("#ticket_contact").attr("value", res["telephone"]);

       
                            $("#progress").css("display","none") ;

                        } else if (data['Result'] === 'ERROR') {
                            $("#msgerror").empty().append(data['Message']);
                            $("#ticket_demonimationclient").attr("value", "");
                            
                            $("#ticket_emailclient").attr("value", "");
                            $("#ticket_adresseclient").attr("value", "");
                            $("#ticket_contact").attr("value", ""); 

                            $("#progress").css("display","none") ;
                        }
                    },
                    error: function () {
                        alert('Erreur système ');
                        $("#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);

    </script>
 {% endblock %}