{% extends 'base.html' %}

{% load static %}

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

<div class="container-fluid content-bg" style="padding: 0px 30px; background-color: rgba(242,242,242,0.5);">
  <div class="row">
<nav class="bcrumbs">
  <div class="nav-wrapper">
    <div class="col s12">
      <a href="https://remate.continua.com.mx/" class="breadcrumb">Inicio</a>
      <a href="{% url 'Manager' %}" class="breadcrumb">Contactos</a>
      <a href="#" class="breadcrumb">Añadir Contacto</a>
    </div>
  </div>
</nav>
</div>
</div>


    <div class="container-fluid content-bg">
        <div class="row s12">
            <h4>Añadir Contacto</h4>
            <p style="font-size: 13px; text-align: left;">Crear un nuevo contacto llenando la infomación solicitada.</p>
        </div>
      <div class="row col s6">
        <div class="input-field col s6">
          <input  name="first_name" id="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" 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" required="true" aria-required="true" class="validate">
          <label for="email">Email</label>
        </div>
         <div class="input-field col s6">
                <input name="telefono" id="telefono"  required="true" 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" id="campo1" type="text" >
          <label for="campo1">Empresa</label>
        </div>
              <div class="input-field col s6">
          <input name="campo2" id="campo2" type="text" >
          <label for="campo2">Dirección</label>
        </div>
      </div>
        <div class="row">

        <div class="input-field col s6">
          <input name="campo3" id="campo3" type="text" class="validate">
          <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">

        </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={};
    $( document ).ready(function() {
        listas=JSON.parse("{{listas|escapejs}}");
       console.log(listas);
       let mylistas={};
       for (let i=0; i<listas.length;i++){
           mylistas[listas[i]]=null;
       }
       console.log(mylistas);
      $('.chips-autocomplete').chips({
 placeholder:'Ingrese Lista',
        secondaryPlaceholder:'+Lista',
          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 %}