{% extends 'base.html' %}
{% load tz %}


{% 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">Editar mensaje programado</a>
    </div>
  </div>
</nav>
</div>
</div>      
    <div class="container-fluid content-bg">

<form id="form1" name="form1"    method="POST"  >
                                 {% csrf_token %}

                         

                  
                         

            <div class="row s12">
            <h4>Editar Mensaje Programado</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">
                              <label for="texto">Mensaje para enviar</label>

            <textarea class="materialize-textarea"   name="texto" id="texto" readonly >
            </textarea> 
                          </div>
              </div>


        <div id="div_tiempo"  class="row center">
        <div id="div_tiempo_fechahora" class ="input-field col s12">
          <input id="datetime" value="{{fecha_envio}}" 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 class="col s12">
                <button onclick="form_submit()" class="btn waves-effect waves-light" type="button" >Guardar
              <i class="material-icons right">send</i>
                </button>
            </div>

        </div>



</form>
    </div>


           <div id="modal2" class="modal">
    <div class="modal-content">
      <h4>Guardando plantilla de Whatsapp</h4>
      <p>¿ Estas seguro que deseas guardar los cambios la plantilla?</p>
    </div>
    <div class="modal-footer">
      <a href="#!" onclick="submitform1()" class= "modal-close waves-effect waves-green btn-flat">Guardar</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() 
{
    $('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 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'));
     $('#texto').val("{{textomachote|escapejs}}");
    M.textareaAutoResize($('#texto'));

    });

    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);
  M.textareaAutoResize($('#texto'));
  break;
  }
}
    }
    function limpiar(){
  $('#texto').val('');
  M.textareaAutoResize($('#texto'));
 $('#plantilla').val("");

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



    
    </script>
{% endblock %}