{% 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 'Whatsapp_Create' %}" class="breadcrumb">WhatsApp</a>
      <a href="#" class="breadcrumb">Enviar mensaje</a>
    </div>
  </div>
</nav>
</div>
</div>      
    <div class="container-fluid content-bg">

<form id="form1" name="form1"   action="{% url 'Whatsapp' %}" method="POST"  >
                                 {% csrf_token %}

                         

                  
                         

            <div class="row s12">
            <h4>Envío mensaje de WhatsApp</h4>
        </div>

        <div class="row">
      <div class="input-field col s12">
    <select onchange="cambioplantilla()" name="plantilla"  id="plantilla"   searchable="Buscar" id="plantilla" >
      <option value=""   disabled {%if machote%} {% else%} selected {% endif %}>Seleccione la plantilla</option>
        {% for template in plantillas %}
                  <option value={{ template.id }} {%if machote == template.id %} selected {% endif %}>{{ template.titulo }}</option>

{% endfor %}

    </select>
    <label>Titulo</label>
  </div>
        </div>
              <div class="row">
                          <div class="input-field col s12">
            <textarea class="materialize-textarea"  name="texto" id="texto" readonly >
            </textarea>
                          </div>
                  <label for="texto">Mensaje para enviar</label>
              </div>
        <div class="row center">
         <div class="input-field col s6">

            <div class="switch switch_tipo">
    <label>
      Individual
      <input id="tipo" name="tipo" type="checkbox" {%if lista%} checked {%endif%}>
      <span class="lever"></span>
      Lista
    </label>
  </div>
      </div>
      <div class="input-field col s6">

            <div class="switch switch_tiempo">
    <label>
      Inmediato
      <input id="tiempo_envio" name="tiempo_envio" type="checkbox" {%if lista%} checked {%endif%}>
      <span class="lever"></span>
      Programado
    </label>
  </div>
      </div>

        </div>

        <div id="div_tiempo" hidden class="row center">
        <div id="div_tiempo_fechahora" class ="input-field col s12">
          <input id="datetime" name="datetime" type="text" placeholder="Seleccione la fecha y hora para envío">
              <label>Fecha/Hora de Envío</label>

        </div>

        </div>

        <div class="row center">
<div id="div_individual" {%if lista%} hidden {% endif %}  class="input-field col s12">
    <select name="individual" id="individual"     serachname="myselectsearch" searchable="Buscar Contacto">
      <option value="" disabled {% if contacto %} {% else %} selected {% endif %}>Seleccione el contacto a enviar</option>
             {% for user in usuarios %}
                  <option value={{ user.perfilid }} {% if contacto == user.userid  %} selected {% endif %}>{{ user.nombre }}</option>

{% endfor %}
    </select>
    <label>Contacto</label>
  </div>
<div id="div_grupal"    {% if lista %} {% else %} hidden{% endif %} class="input-field col s12">
    <select name="grupo" id="grupo"  searchable="Buscar Lista" >
      <option value="" disabled {% if  lista%} {% else %} selected {% endif %}>Seleccione la lista</option>
       {% for list in listas %}disabled
                  <option value={{ list.id }} {% if lista == list.id %} selected{% endif %}>{{ list.nombre }}</option>

{% endfor %}
    </select>
    <label>Lista</label>
  </div>
    </div>
        <div class="row center">
            <div class="col s6">
                <button onclick="form_submit()" class="btn waves-effect waves-light" type="button" >Enviar
              <i class="material-icons right">send</i>
                </button>
            </div>

            <div class="col s6">
                <button class="btn waves-effect waves-light" type="button" onclick="limpiar();">Limpiar
                    <i class="material-icons right">undo</i>

                </button>

            </div>
        </div>



</form>
    </div>


           <div id="modal2" class="modal">
    <div class="modal-content">
      <h4>Enviando plantilla de Whatsapp</h4>
      <p>¿ Estas seguro que deseas enviar la plantilla <strong><span id="name_plantilla">plantilla</span></strong> <span id="tipo_plantilla"> al contacto </span> <strong><span id="contacto_lista"> C/L </span></strong>?</p>
    </div>
    <div class="modal-footer">
      <a href="#!" onclick="submitform1()" class= "modal-close waves-effect waves-green btn-flat">Aceptar y Enviar</a>
      <a href="#!" class="modal-close waves-effect waves-red btn-flat">Cerrar</a>

    </div>
  </div>
{% endblock %}

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

    <script>
 function submitform1() {
       $('select').formSelect();

      $("#form1").submit();
}

          function form_submit() 
{
  console.log('VALIDANDO');
    $('select').formSelect();
       let valores=        $('#plantilla').formSelect('getSelectedValues');
       let valor1=valores[0];
       if(valor1==""){
       M.toast({html: "Debe seleccionar una plantilla", classes: 'rounded  red ', displayLength:3000});
      return false;
       }
       let tipo = $('#tipo').prop('checked');
      let tiempo = $('#tiempo_envio').prop('checked');

       if (!tipo){
        //Individual
           $('#tipo_plantilla').html(" al contacto ");
           $('#contacto_lista').html("  ");
           console.log("{{usuarios|escapejs}}")
           //let vector=JSON.parse('{{usuarios|escapejs}}');
           let vector=eval("{{usuarios|escapejs}}");
            console.log(vector);
            let valores=   $('#individual').formSelect('getSelectedValues');
          let valor=valores[0];
       if (valor==""){
          M.toast({html: "Debe seleccionar un contacto", classes: 'rounded  red ', displayLength:3000});
          return false;
       }
            for (i = 0; i < vector.length; i++) {
  if(vector[i].perfilid==valor){
      console.log("found:",vector[i]);
      $('#contacto_lista').html(vector[i].nombre);
      break;
      
  }
  }


       }
       else{

         //Lista
        $('#tipo_plantilla').html(" a la lista ");
        $('#contacto_lista').html("  ");
        let vector=eval("{{vlistas|escapejs}}");
            console.log(vector);
            let valores=   $('#grupo').formSelect('getSelectedValues');
          let valor=valores[0];
       if (valor==""){
          M.toast({html: "Debe seleccionar una lista", classes: 'rounded  red ', displayLength:3000});
          return false;
       }
            for (i = 0; i < vector.length; i++) {
  if(vector[i].id==valor){
      console.log("found:",vector[i]);
      $('#contacto_lista').html(vector[i].nombre);
      break;
      
  }
  }


       }
    if (tiempo){
      let fechaenvio=$('#datetime').val();
      let vfecha=fechaenvio.split(' ');
      console.log(vfecha);
      if( vfecha.length<2){
                  M.toast({html: "Debe seleccionar una fecha/hora de envío", classes: 'rounded  red ', displayLength:3000});

        return false;
      }
      console.log (fechaenvio);
    }
  
    $("#modal2").modal('open');

  return false;
  

}
 $(document).ready(function(){
    $('select').formSelect();
    var DateField = MaterialDateTimePicker.create($('#datetime'))

    $(".switch_tipo").find("input[type=checkbox]").on("change",function() {
        var status = $(this).prop('checked');
        console.log(status);
        if(status){
            $("#div_individual").hide();
            $("#div_grupal").show();
           
        }
        else{
              $("#div_grupal").hide();
            $("#div_individual").show();
                     
        }
    });

        $(".switch_tiempo").find("input[type=checkbox]").on("change",function() {
        var status = $(this).prop('checked');
        console.log(status);
        if(status){
            $("#div_tiempo").show();
           
        }
        else{
            $("#div_tiempo").hide();
                     
        }
    });
  });
    function cambioplantilla(){
          $('select').formSelect();

       let valores=        $('#plantilla').formSelect('getSelectedValues');
       let valor=valores[0];
            console.log("{{textos|escapejs}}")

       //let vector=JSON.parse("{{textos|escapejs}}");
       let vector=eval("{{textos|escapejs}}");
       console.log(vector);
       console.log('valores:',valores);
              console.log('valor:',valor);

       var i;
for (i = 0; i < vector.length; i++) {
  if(vector[i].id==valor){
      console.log("found:",vector[i]);
      $('#texto').val(vector[i].texto);
      $('#name_plantilla').html(vector[i].titulo);
  M.textareaAutoResize($('#texto'));
  break;
  }
}
    }
    function limpiar(){
  $('#texto').val('');
  M.textareaAutoResize($('#texto'));
 $('#plantilla').val("");

        // re-initialize material-select
        $('#plantilla').formSelect();
    }



    
    </script>
{% endblock %}