{% extends 'base.html' %} 
{% load static %} 
{% load render_table from django_tables2%} 
{% load export_url from django_tables2%} 
{% block csss %}
<link
  href="{% static 'css/tablas2.css' %}"
  type="text/css"
  rel="stylesheet"
  media="screen,projection"
/>
{% endblock csss %} 
{% 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">Historial de Envíos</a>
    </div>
  </div>
</nav>
</div>
</div>

<div class="container-fluid content-bg">
{% if hayprogramados %}
<div class="row s12">
    <h4>Envíos Programados</h4>
    </div>

     <div class="row s12 center">
    <form
      id="form6"
      class="col s12"
      name="form6"
      method="GET"
      action="/whatsapp_historic"
    >
      {% render_table programados%}
    </form>
  </div>
{% endif %}



  <div class="row s12">
    <h4>Historial de envíos</h4>
    <p style="font-size: 13px; text-align: left;">Revisa el estado de tus envíos de mensajería y ve el detalle los mensajes enviados a tus contactos.</p>
  </div>

  <div class="row s12 center">
    <form
      id="form4"
      class="col s12"
      name="form4"
      method="GET"
      action="/whatsapp_historic"
    >
      {% render_table envios%}
    </form>
  </div>
  <div class="col s12 m4 l2">
    <p style="font-size: 13px; text-align: left;">Exporta en un archivo el listado de todos tus envíos:<br>
      (Si deseas descargar el detalle de la lista da clic en el ícono de "detalles" y usa el botón de exportación dentro de esa página).<br><br></p>
    {% for format in export_formats %}
    <a class="col s3 link-xport" href="{% export_url format %}">
      <i class="material-icons icon-wh">description</i> Exportar a <code>{{ format }} </code>
    </a>
    {% endfor %}
  </div>
</div>

      <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Eliminar Mensaje Programado</h4>
      <p>Se va a eliminar el mensaje <b><span id="borrar_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="submitform7()"  class="modal-close waves-effect waves-green btn-flat">Aceptar</a>
    </div>
  </div>
   <form id="form7" name="form7"  method="POST" >
             {% csrf_token %}
             <input id="borrar_id" type="hidden" name="borrar_id" value=""/>

  </form>

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

<script>

   function submitform7() {
      document.form7.submit();
}
  $("#filtro_titulo").on("change", function () {
    console.log("Cambio Filtro");
    document.form4.submit();
  });
    $("#filtro_titulo2").on("change", function () {
    console.log("Cambio Filtro");
    document.form6.submit();
  });
    $("#filtro_total").on("change", function () {
    console.log("Cambio Filtro");
    document.form4.submit();
  });
    function delete_programado(id,name,fecha) {
        $("#borrar_name").text(name);
        $('input[name="borrar_id"]:hidden').val(id);
        $("#modal1").modal('open');
        console.log('delete');

    }
  function cambiar(){
    console.log('cambiar');
    document.form4.submit();

  };
  function cambiar2(){
    console.log('cambiar');
    document.form6.submit();

  };

  $(document).ready(function(){
    $('.datepicker').datepicker({
      format:'dd/mm/yy',
      showClearBtn:true,
      i18n: {
            cancel: 'Cancelar',
            clear: 'Limpar',
            done: 'Ok'
        },
      onDone: function(time){
    console.log(time)
      }

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