{% extends 'base.html' %}

{% load static %}
{% load render_table from django_tables2%} 
{% load export_url from django_tables2%} 
{% 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="#" class="breadcrumb">Whatsapp</a>
      <a href="#" class="breadcrumb">Crear plantilla</a>
    </div>
  </div>
</nav>
</div>
</div>  

    <div class="container-fluid content-bg">


            <div class="row">
                <div class="col s12">
                    <h5>Plantillas</h5>
                </div>
                </div>
                <div class="row center">
            <div class="col s12 center">
                    <form id="form4"  name="form4"  method="GET" action="/whatsapp_create">

     
      {% render_table tabla_plantillas%}
      </form>


            </div>
            <div class="row s12 center">
    {% for format in export_formats %}
    <a class="col s3 link-xport" href="{% export_url format %}">
      <i class="material-icons icon-gray">description</i> Exportar a <code>{{ format }} </code>
    </a>
    {% endfor %}
  </div>

            </div>


        </div>

      <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Eliminar Plantilla</h4>
      <p>Se va a eliminar la plantilla <b><span id="template_name"></span></b></p>
    </div>
    <div class="modal-footer">

        <a href="#!" class="modal-close waves-effect waves-green btn-flat">Cancelar</a>
      <a href="#!"  onclick="submitform()"  class="modal-close waves-effect waves-green btn-flat">Aceptar</a>
    </div>
  </div>
 <form id="form2" name="form2"  method="POST" action="{% url "Delete_Plantilla" %}">
             {% csrf_token %}
             <input id="template_id" type="hidden" name="template_id" value=""/>

  </form>
           <div id="modal2" class="modal">
    <div class="modal-content">
      <h4>Enviando plantilla a Whatsapp</h4>
      <p>Su plantilla se va a enviar a whatsapp para revisión, no podrá utilizarla hasta que whatsapp la apruebe.</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>
    </div>

{% endblock %}

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

    <script>

      $(document).ready(function(){
          $('#texto').val('');
          $('#texto').emoji({
            place:'after',
            rowSize: 25,
  
          });
      });
     function delete_template(id,name) {
        $("#template_name").text(name);
        $('input[name="template_id"]:hidden').val(id);
        $("#modal1").modal('open');
        console.log('delete');

    }

    function insertarcampo(){
      $('select').formSelect();
       let valores= $('#insertcampo').formSelect('getSelectedValues');
       let valor=valores[0];
       console.log('valores:',valor);
       let mytexto=$('#texto').val();
       $('#texto').val(mytexto+valor);

  M.textareaAutoResize($('#texto')); 
        $('#insertcampo').val("");
        
        $('#insertcampo').formSelect();
    }
    function submitform() {
      document.form2.submit();
}
    function submitform1() {
      document.form1.submit();
}
    function closemodal() {
therapistid=null;
    $('#modal1').close();
}
    function limpiar(){

  $('#texto').val('');

  M.textareaAutoResize($('#texto'));    }

  function form_submit() 
{
  console.log('VALIDANDO');
  $("#modal2").modal('open');
  return false;
  

}

    $("#filtro_estado").on("change", function () {
    console.log("Cambio Filtro");
    document.form4.submit();
  });
     $("#filtro_titulo").on("change", function () {
    console.log("Cambio Filtro");
    document.form4.submit();
  });

  $("#image_switch").on("change",function() {
     console.log('cambiando');
        var status = $(this).prop('checked');
        if (status){
          $("#divimage").show();

        }
        else{
          $("#divimage").hide();

        }

      
    });

  $("#botonTEL_switch").on("change",function() {
     console.log('cambiando');
        var status = $(this).prop('checked');
        if (status){
          $("#divbotontel").show();

        }
        else{
          $("#divbotontel").hide();

        }

      
    });


      $("#botonURL_switch").on("change",function() {
     console.log('cambiando');
        var status = $(this).prop('checked');
        if (status){
          $("#divbotonurl").show();

        }
        else{
          $("#divbotonurl").hide();

        }

      
    });
    </script>
{% endblock %}