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

{% block title %}New Sinistre{% endblock %}

{% block body %}
   {{ form_start(form) }}
  <div class="main-content">

        <section class="section">
                                     <p id="msgerror" style="color: red; text-align: center;"></p>                                             

            <div class="row">
                <div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-8 offset-lg-2 col-xl-8 offset-xl-2">
                    <div class="card card-primary">
                        <div class="card-header">

                            <h4>Definition des  sinistres</h4>
                        </div>
                        <div class="card-body">
                            {{ form_start(form) }}
                        <div class="row">

                          <div class="form-group col-md-12"  id="numerocommande">
{{ form_widget(form.numerodecommande, {'attr': {'class': 'form-control','placeholder':'Numero de commande'}}) }}
   <div class="invalid-feedback">
{{ form_errors(form.numerodecommande) }}
    </div>
     <a id="btnSearch" class="btn btn-success " style="display: none;" >Rechercher</a>
 </div>
                              
                            <div class="form-group col-12">
                                <label for="last_name">Nom et prenoms</label>
{{ form_widget(form.nomcomplet, {'attr': {'class': 'form-control','placeholder':'Nom et prenoms'}}) }}
                            </div>

                               <div class="form-group col-12">
                                <label for="last_name">Article</label>
 <ul class="tags" data-prototype="
              {% filter escape %}
                {% include 'commandes/produit_proto.html.twig' with { 'form': form.article.vars.prototype } only %}
              {% endfilter %}" >
 </ul>                             </div>

                        </div>
                            <div class="row">
                                <div class="form-group col-12">
                                    <label for="frist_name">Numero de telephone client </label>
{{ form_widget(form.numerodetelephonedeclarant, {'attr': {'class': 'form-control','placeholder':'numero de telephone declarant'}}) }}
                                    {# <input id="frist_name" type="text" class="form-control" name="frist_name" autofocus> #}
                                </div>
                                <div class="form-group col-12">
                                    <label for="last_name">Description incident</label>
{{ form_widget(form.description, {'attr': {'class': 'form-control','placeholder':'Description incident'}}) }}
                                </div>
                                     <div class="form-group col-12">
                                    <label for="last_name">Transferer au sav</label>
{{ form_widget(form.transferercallcenter, {'attr': {'class': 'form-control','placeholder':'Description incident'}}) }}
                                </div>

                                   
                            </div>



                            <div class="form-group">
                                <button type="submit" class="btn btn-primary btn-lg btn-block">
                                CREATION DU SINISTRE
                                </button>
                            </div>
                            {{ form_end(form) }}
                        </div>
                        {# <div class="mb-4 text-muted text-center">
                Already Registered? <a href="auth-login.html">Login</a>
              </div> #}
                    </div>
                </div>
            </div>

        </section>
    </div>



 

  {{ form_end(form) }}

    <a href="{{ path('sinistre_index') }}">back to list</a>
{% 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"
       
    };   
 
 
  






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

   
     $("#commandes_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_reducbool").val()); 
                   if($("#commandes_reducbool").val() == 1){ 
                     console.log("OUI");
                     $("#commandesmontant").css("display", "block");
                     $("#affiche").html("").css( styles );

                   } 
                   if($("#commandes_reducbool").val() == 2)  {
                     console.log("NON");
                     $("#commandesmontant").css("display", "none");
                    $("#affiche").html("").css( styles1 ); 
                   }
                   if($("#commandes_reducbool").val() === "" )  {
                       $("#commandesmontant").css("display", "none");
                     console.log("RIEN");
                    $("#affiche").html("").css( styles1 ); 
                   }
            

        });    
$("#commandes_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_paiementbool").val()); 
                   if($("#commandes_paiementbool").val() == 1){ 
                     console.log("OUI");
                     $("#commandesmontant1").css("display", "block");
                     $("#commandesmontant2").css("display", "block");

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

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

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

                     console.log("RIEN");
                    $("#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
        $("#sinistre_numerodecommande").keyup(function () {
            if ($("#sinistre_numerodecommande").val().length > 4) {
                console.log("ihuhiu");
                $("#btnSearch").fadeIn();

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

                }


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


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

             $("#btnSearch").click(function () {
        {#                alert("cliqué");#}
              $("#progress").css("display","block") ;
{#                window.setTimeout(partB,1000);#}
                getInfo($("#sinistre_numerodecommande").val());
            });
            function getInfo(numtelephone) {
                 console.log('paul',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'];
                         
                         
                         $("#sinistre_nomcomplet").attr("value", res["nom"] );
                           
                            $("#ticket_emailclient").attr("value", res["email"]);
                            $("#ticket_adresseclient").attr("value", res["adresseclientlivraison"]);
                            $("#sinistre_numerodetelephonedeclarant").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 %}