{% 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="{% url 'Whatsapp_Create' %}" class="breadcrumb">WhatsApp</a>
      <a href="#" class="breadcrumb">Crear plantilla</a>
    </div>
  </div>
</nav>
</div>
</div>  

<div class="container-fluid" style="padding: 0;">
  <div class="row">
    <div class="col s12 m6 l6" style="padding: 0 .75rem 0 0; ">
      <div class="card" style="background-color: #24B84D;">
        <div class="card-content" style="padding: 0px 30px;">
          <a href="{% url 'Whatsapp_New_Template' %}"><div class="menu-v2"><i class="material-icons-outlined icon-menu  icon-menuv2">chat</i><h5 style="color: #ffffff !important;">Crear Plantilla</h5></div></a>
        </div>
      </div>
    </div>

    <div class="col s12 m6 l6">
      <div class="card" style="background-color: #323232;">
        <div class="card-content"  style="padding: 0px 30px;">
          <a href="{% url 'Whatsapp' %}"><div class="menu-v2"><i class="material-icons-outlined icon-menu icon-menuv2">send</i><h5 style="color: #ffffff !important;">Enviar Mensaje</h5></div></a>
        </div>
      </div>
    </div>


  </div>
</div>



<ul class="collapsible">
  <li>
    <div class="collapsible-header"><i class="material-icons" style="color: #fca313">info</i>Antes de comenzar conoce los criterios en las plantillas de WhatsApp</div>
    <div class="collapsible-body"><span><p style="line-height: 1.5;">Todas las plantillas deben ser enviadas a revisión a WhatsApp para que puedan ser utilizadas y <b>pueden tardar hasta 48 horas en ser aprobadas</b>. En el listado de plantillas podrás ver el status de aprobación en tiempo real. Si deseas tener más información puedes conocer el proceso de WhatsApp <a href="https://developers.facebook.com/docs/whatsapp/api/messages/message-templates?locale=es_ES" target="_blank">aquí</a>.</p>
    <p>
      <ul>
        <li style="line-height: 2;"><b>Toma en cuenta las siguientes limitaciones:</b></li>
        <li style="line-height: 2;"><b>•</b> Los títulos de las plantillas no pueden llevar espacios (en su lugar se puede utilizar guión bajo o guión medio).</li>
        <li style="line-height: 2;"><b>•</b> No puedes incluir mensajes agresivos, de cobro, información falsa o enlaces maliciosos.</li>
        <li style="line-height: 2;"><b>•</b> Si utilizas botones no puedes usar acortadores de URL.</li>
        <li style="line-height: 2;"><b>•</b> No puedes tener una plantilla solamente con campos personalizados. Tu mensaje debe de incluir texto y el mensaje debe ser claro.</li>
        <li style="line-height: 2;"><b>•</b> No puedes incluir más de 4 espacios consecutivos (los saltos de linea están permitidos).</li>
        <li style="line-height: 2;"><b>•</b> No puedes incluir más 1024 caracteres. El texto de los botones no se incluye en este límite.</li>
      </ul>
    </p></span></div>
  </li>
</ul>
      

    <div class="container-fluid content-bg">
    <form id="form1" name="form1" onSubmit="return form_submit()" action="{% url 'Whatsapp_New_Template' %}" method="POST" enctype="multipart/form-data">
                         {% csrf_token %}
            <div class="row s12">
            <h4>Crear plantilla de WhatsApp</h4>
        </div>
        <div class="row">
            <div class="input-field col s12">
          <input name="titulo" id="titulo"  required="true" type="text" >
          <label for="titulo">Título</label>
            </div>
        </div>
              <div class="row">
            <div class="input-field col s8">
            <textarea class="materialize-textarea" name="texto" id="texto"  required="true" class="validate">
            </textarea>
            <label for="texto">Mensaje </label>

                          </div>
                                <div class="input-field col s4">
                  <select id="insertcampo" onchange="insertarcampo()">
                    <optgroup label="Campos Estandar">
                      <option value="" disabled selected>Seleccione Campo</option>
                      <option value="{NOMBRE}">Nombre</option>
                      <option value="{APELLIDOS}">Apellidos</option>
                        <option value="{TELEFONO}">Telefono</option>
                      <option value="{EMAIL}">Email</option>
                    </optgroup>
                    <optgroup label="Campos Personalizados">
                      <option value="{EMPRESA}">Empresa</option>
                      <option value="{DIRECCION}">Dirección</option>
                      <option value="{NOTAS}">Notas</option>

                    </optgroup>
                  </select>
                  <label>Insertar Campo</label>
                </div>
              </div>

              <div class="row center">
              
              </div>




          <div class="row center">

<div class="input-field col s4"> 
        <span >Imagen</span>
            <div class="switch" >
    <label>
       Off
      <input name="image_switch" id="image_switch" type="checkbox">
      <span class="lever"></span>
       On
    </label>

  </div>

</div>
<div class="input-field col s4"> 
        <span >Botón URL</span>
            <div class="switch" >
    <label>
       Off
      <input name="botonURL_switch" id="botonURL_switch" type="checkbox">
      <span class="lever"></span>
       On
    </label>

  </div>

</div>

<div class="input-field col s4"> 
        <span >Botón Tel</span>
            <div class="switch" >
    <label>
       Off
      <input name="botonTEL_switch" id="botonTEL_switch" type="checkbox">
      <span class="lever"></span>
       On
    </label>

  </div>

</div>

          </div>

          <div  id="divimage" class="row center" hidden>
<div class="file-field input-field"  >
      <div class="btn">
        <span>Imagen</span>
        <input type="file" id='ufile' name='ufile' accept="image/*" >
      </div>
      <div class="file-path-wrapper">
        <input class="file-path validate" id='tfile' name='tfile' type="text">
      </div>
    </div>

          </div>

          <div id="divbotontel" class="row center" hidden>
        <div class="input-field col s6">
          <i class="material-icons prefix">edit</i>
          <input id="botontel_text" name="botontel_text" type="text" class="validate" maxlength=20>
          <label for="botontel_text">Texto Botón Telefono</label>
        </div>
        <div class="input-field col s6">
          <i class="material-icons prefix">phone</i>
          <input id="botontel_number" name="botontel_number" type="tel" pattern="^\d{10}$" class="validate">
          <label for="botontel_number">Telefono a 10 dígitos</label>
        </div>
          </div>

     <div id="divbotonurl" class="row center" hidden>
        <div class="input-field col s6">
          <i class="material-icons prefix">edit</i>
          <input id="botonurl_text" name="botonurl_text" type="text" class="validate" maxlength=20>
          <label for="botonurl_text">Texto Botón URL</label>
        </div>
        <div class="input-field col s6">
          <i class="material-icons prefix">public</i>
          <input id="botonurl_url" name="botonurl_url" type="tel" class="validate">
          <label for="botonurl_url">Link</label>
        </div>
          </div>

        <div class="row center">
            <div class="col s6">
                <button class="btn waves-effect waves-light" type="submit" name="action">Guardar y Enviar a Whatsapp
              <i class="material-icons right">save</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="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 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() {
    $('#modal1').close();
}
    function limpiar(){

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

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

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

}



  $("#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 %}