{% extends 'base.html' %}

{% load static %}

{% block contenido %}

<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">Importar Contactos</a>
    </div>
  </div>
</nav>
</div>
</div>


    <div class="container-fluid content-bg">
        <div class="row col s12 ">
        <h4>Importando archivo:  {{import_objetc.nombre_original}} {% if lista_import %} a la lista {{ lista_import}}{% endif %}</h4>
    </div>
    
    <div class="row col s12 ">
        <h6>Seleccione el campo adecuado para cada columna</h6>
    </div>

          <form id="form1" onSubmit="return formvalidate()" name="form1"  method="POST">
             {% csrf_token %}
          <div class="row">

          {% for c in  columnas %}
       
          <div class="input-field col s6">
          <select name="col_{{c.id}}" class="myselects" id="col_{{c.id}}">
                  <option value="" disabled {% if c.column_map %} {% else %} selected{% endif %}>Seleccione el campo</option>
                  {% for o in opciones  %}
                  <option value="{{o.id}}"  {% ifequal c.column_map  o.id %} selected{% endifequal %}>{{o.name}}</option>

                  {% endfor %}
          </select>
    <label>{{c.column_name}}</label>
  </div>

          
          {% endfor %}
          </div>
          {% if import_objetc.to_list %} {% else %}
          
          <div class="row">
          <div class="col s12">
          <h6>Seleccione las listas a los cuales desea agregar los contactos importados</h6>
          </div>
            <div class="input-field col s12"> 
    <select name='listas' id='listas' multiple searchable="Buscar">
      {% for l in listas %}
      <option value='{{l.nombre}}'>{{l.nombre}}</option>
      {% endfor %}
    </select>
    <label>Seleccione las listas</label>
  </div>

          </div>
          
          {% endif %}
        <div class="row  center">
        <div class="col s6 center">
                  <button class="btn waves-effect waves-light" type="submit" name="action" value="ok">Importar
              <i class="material-icons right">send</i>
                </button>
        </div>
                <div class="col s6 center">
                  <button class="btn waves-effect waves-light" onclick="submitform()" type="button" name="cancelar" value="ok">Cancelar
              <i class="material-icons right">delete</i>
                </button>
        </div>

        </div>
         </form>

    </div>


{% endblock %}
{% block jscripts %}
<script src="{% static 'js/select_search.js' %}"></script>

    <script>


function submitform() {
      document.form1.submit();
}

function formvalidate(){
let opciones=$(".myselects");
let nombre=false;
let correo=false;
let telefono=false;

for (let i=0; i<opciones.length;i++){
  if (opciones[i].value=="1")
  nombre=true;telefono
if (opciones[i].value=="3")
  correo=true;
if (opciones[i].value=="4")
  telefono=true;
}
if(nombre==false || correo==false || telefono==false){
  M.toast({html: "Los campos NOMBRE, CORREO y TELEFONO son obligatorios.", classes: 'rounded red', displayLength:5000});

return false;
}
return true;

}
    </script>
{% endblock %}