{% extends 'base.html' %}

{% load static %}

{% block contenido %}
    <form action="{% url 'Edit' id=user_id %}" method="POST">
                         {% csrf_token %}

    <div class="container">
        <div class="row s12 center">
            <h4>Editar Empleado</h4>
        </div>
        {% if lista_origen%}
        <input name='lista_origen' id='lista_origen' value='{{lista_origen}}' hidden>
         {% endif %}
      <div class="row col s6">
        <div class="input-field col s6">
          <input  name="first_name" id="first_name" value="{{ usuario.first_name }}" type="text" required="true" class="validate">
          <label for="first_name">Nombre</label>
        </div>
        <div class="input-field col s6">
          <input name="last_name" id="last_name" value="{{ usuario.last_name }}" type="text"  >
          <label for="last_name">Apellidos</label>
        </div>
      </div>
            <div class="row">
        <div class="input-field col s6">
          <input name="email" id="email" type="email" value="{{ usuario.email }}"required="true" aria-required="true" class="validate">
          <label for="email">Email</label>
        </div>
       <div class="input-field col s6">
                <input name="telefono" id="telefono" value="{{ perfil.telefono }}" type="tel" class="validate"  pattern="^\d{10}$" >
                <label for="telefono" >Teléfono a 10 digitos</label>
            </div>
      </div>
        <div class="row">

        <div class="input-field col s6">
          <input name="campo1" value="{{ perfil.empresa }}" id="campo1" type="text"  >
          <label for="campo1">Empresa</label>
        </div>
            <div class="input-field col s6">
          <input name="campo2" value="{{ perfil.direccion }}" id="campo2" type="text"  >
          <label for="campo2">Dirección</label>
        </div>
      </div>
                <div class="row">

        <div class="input-field col s6">
          <input name="campo3" value="{{ perfil.notas }}" id="campo3" type="text"  >
          <label for="campo3">Notas</label>
        </div>
                    <div class="col s6">
                            <div class="chips-autocomplete">

                            </div>

                     </div>
            <input name="listas" id="listas" hidden>

      </div>

        <div class="row s12 center">
          <button class="btn waves-effect waves-light" type="submit" name="action">Guardar
              <i class="material-icons right">send</i>
                </button>
        </div>



    </div>

    </form>

{% endblock %}
{%  block jscripts %}
    <script>
    let listas={};
    let listasselected={};
    $( document ).ready(function() {
        listas=JSON.parse("{{listas|escapejs}}");
        listasselected=JSON.parse("{{listas_selected|escapejs}}");
       console.log(listas);
       console.log("selected:",listasselected);

       let mylistas={};
       for (let i=0; i<listas.length;i++){
           mylistas[listas[i]]=null;
       }
       let mylistas2=[];

              $("#listas").val(JSON.stringify(listasselected));

       for (let i=0; i<listasselected.length;i++){
           mylistas2.push( {'tag':listasselected[i]});

       }
       console.log(mylistas);
      $('.chips-autocomplete').chips({
 placeholder:'Ingrese Lista',
        secondaryPlaceholder:'+Lista',
          data:mylistas2,
          onChipDelete: function (e){console.log('Delete:',e);
           var chipsData = M.Chips.getInstance($('.chips')).chipsData;
            var chipsDataJson = JSON.stringify(chipsData);
            console.log(chipsDataJson);
            let valores=[];
              for (let j=0;j<chipsData.length;j++){

                  valores.push(chipsData[j].tag);
              }
              $("#listas").val(JSON.stringify(valores));
          },
          onChipAdd: function (e){console.log('Add:',e);
          var chipsData = M.Chips.getInstance($('.chips')).chipsData;
            var chipsDataJson = JSON.stringify(chipsData);
            console.log(chipsDataJson);
                        if( listas.indexOf(chipsData[chipsData.length-1].tag)==-1){
                                var instance = M.Chips.getInstance($('.chips'));
                           instance.deleteChip(chipsData.length-1);
                            M.toast({html: "Lista no valida", classes: 'rounded red', displayLength:2000})
                        };
              chipsData = M.Chips.getInstance($('.chips')).chipsData;
              let valores=[];
              for (let j=0;j<chipsData.length;j++){

                  valores.push(chipsData[j].tag);
              }
              $("#listas").val(JSON.stringify(valores));

          },
          onChipSelect: function (e){console.log('Select:',e);},


    autocompleteOptions: {

      data: mylistas,
      limit: Infinity,
    }
  });
    });



    </script>
{% endblock %}