{% extends 'base.html' %}

{% load static %}

{% block csss%}

{%endblock%}

{% 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">Tablero</a>
        </div>
      </div>
    </nav>
  </div>
</div>

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


{% comment %}   Columna izquierda {% endcomment %}
<p><h4>Tablero</h4></p>
</div>



<div class="row">

<div class="col s12 m7 l7">
<p>Hola {{user.first_name}}, te compartimos información de utilidad de tu cuenta</p>
<p>Tu número registrado en WhatsApp es: <span class="blue-text">{{numero}}</span></p>


<div class="col s12 m6">
      <div class="card ">
        <div class="card-content blue-grey-text">
          <p class="card-subtitle center" style="color: #000000;"> <b>Contactos Totales</b></p>
          <p class="center">{{contactos_totales}}</p>
        </div>
      </div>
</div>

<div class="col s12 m6">
      <div class="card ">
        <div class="card-content blue-grey-text">
          <p class="card-subtitle center" style="color: #000000;"> <b>Mensajes Enviados</b></p>
          <p class="center">{{mensajes_enviados}}</p>
        </div>
      </div>
</div>


<div class="col s12 m6">
      <div class="card ">
        <div class="card-content blue-grey-text">
          <p class="card-subtitle center" style="color: #000000;"> <b>Listas Totales</b></p>
          <p class="center">{{listas_totales}}</p>
        </div>
      </div>
</div>

<div class="col s12 m6">
      <div class="card ">
        <div class="card-content blue-grey-text">
          <p class="card-subtitle center" style="color: #000000;"> <b>Campañas Enviadas</b></p>
          <p class="center">{{camp_enviadas}}</p>
        </div>
      </div>
</div>


{% comment %}   Segunda Fila  {% endcomment %}

<!--{% comment %}   Columna izquierda {% endcomment %}

  <div  class="col s12 m6 l6">
  <h5>Últimas campañas enviadas</h5>
      {% for c in top5_camp %}
    <div class="row">
    <div class="col s12">
    <span>{{c.titulo|safe}}</span><br/>
    <span>{{c.subtitulo}}</span>
    </div>
    </div>
    {%endfor%}
</div>

{% comment %}   Columna derecha {% endcomment %}

  <div  class="col s12 m6 l6">
    <h5>Últimas listas creadas</h5>

      {% for c in top5_list %}
    <div class="row">
    <div class="col s12">
    <span>{{c.titulo|safe}}</span><br/>
    <span>{{c.subtitulo}}</span>
    </div>
    </div>
    {%endfor%}
</div>-->

<div class="row">
  <div class="col s12" style="padding-top: 30px !important;">
  
        <ul id="tabs_swipe" class="tabs">
            <li class="tab col"><a class="active" href="#html5">Últimas campañas enviadas</a></li>
            <li class="tab col"><a href="#css3">Últimas listas creadas</a></li>
        </ul>
        
        <div id="html5" class="col s12">
            {% comment %}   Columna izquierda {% endcomment %}

  <div  class="col s12 m12 l12">
    <br>
      {% for c in top5_camp %}
    <div class="row">
    <div class="col s12">
    <span style="color: #00107D !important; text-decoration: underline;"><b>{{c.titulo|safe}}</b></span><br/>
    <span style="color: rgba(0,0,0,0.57) !important;">{{c.subtitulo}}</span>
    </div>
    </div>
    {%endfor%}
</div>
        </div>
        <div id="css3" class="col s12">
          {% comment %}   Columna derecha {% endcomment %}

          <div  class="col s12 m12 l12">
            <br>
        
              {% for c in top5_list %}
            <div class="row">
            <div class="col s12">
            <span style="color: #00107D !important; text-decoration: underline;"><b>{{c.titulo|safe}}</b></span><br/>
            <span style="color: rgba(0,0,0,0.57) !important;">{{c.subtitulo}}</span>
            </div>
            </div>
            {%endfor%}
        </div>
        </div>
    
  </div>
</div>

<!-- Start Swipable Tabs -->
<script type="text/javascript">
	if ($('#tabs_swipe').length) {
      $('#tabs_swipe').tabs({ 'swipeable': true });
    }
</script>
<!-- End Swipable Tabs -->
</div>


  <div  class="col s12 m5 l5 center">
    <h5>Filtrar historial por fecha</h5>
    <div class="row " >
      {% comment  %} 
      <div class="col s12">
      Filtro
      </div>
      {% endcomment %}
      
      <form method="GET">
      
      <div class="input-field col s4">
        <input placeholder="Fecha de Inicio" name="fecha_inicio" {% if fecha_inicio %} value="{{fecha_inicio}}"{% endif %} type="text" class="datepicker validate" required="true">
      </div>
      
      <div class="input-field col s5">
        <input placeholder="Fecha Final" name="fecha_fin" {% if fecha_fin %} value="{{fecha_fin}}"{% endif %} type="text" class="datepicker validate" required="true">
      </div>
      <div class="input-field col s3">
        <button class="btn-floating waves-effect waves-light" type="submit" > <i class="material-icons right">send</i></button>
        {% if borrado %}
        <a href="/dashboard/"><button  class="btn-floating waves-effect waves-light red" type="button" > <i class="material-icons right">delete</i></button></a>
        {% endif %}
        </div>
      
      
      </form>
      </div>

    <h5>{{titulo_grafica}}</h5>
    <canvas id="pie-chart"></canvas>

    <ul class="collapsible">
      <li>
        <div class="collapsible-header"><i class="material-icons" style="color: #fca313">info</i>Conoce más que siginifica cada parte de la gráfica </div>
        <div class="collapsible-body"><span>
          <p style="font-size: 13px; text-align: left;"><b><span style="color: #54caf4">◉</span> Mensajes Enviados:</b> Mensajes que se entregaron al servicio de WhatsApp pero no han sido recibidos por el usuario final.</p>
          <p style="font-size: 13px; text-align: left;"><b><span style="color: #03177b">◉</span> Mensaje Entregado:</b> Mensajes que se entregaron al servicio de WhatsApp y fueron recibidos por el usuario final.</p>
          <p style="font-size: 13px; text-align: left;"><b><span style="color: #2fb652">◉</span> Mensaje Leído:</b> Mensajes que el usuario final leyó en su cliente de WhatsApp (solo aplica para usuarios con la opción de doble check activo en WhatsApp).</p>
          <p style="font-size: 13px; text-align: left;"><b><span style="color: #f4702b">◉</span> Error:</b> Mensajes que se entregaron al servicio de WhatsApp pero que no se pudieron entregar al usuario final porque el número es erróneo, o no está registrado en el servicio.</p>
          </span></div>
      </li>
    </ul>


  </div>

</div>




<div class="row">


</div>
</div>

{% endblock %}
{% block jscripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

    <script>
   var config = {
      type: 'doughnut',
      data: {
        datasets: [{
          data: {{ chart.data|safe }},
     
          backgroundColor: [
  '#4dc9f6',
  '#00107d',
  '#24b84d',
      '#f67019',

  '#acc236',

  '#166a8f',
  '#00a950',
  '#58595b',
  '#8549ba'
],
        }],
        labels: {{ chart.labels|safe }}
      },
      options: {
            plugins: {
              legend: {
        position: 'top',
          },
        title: {
        display: true,
        text: 'Resumen de envíos'
      },     
      datalabels: {
 

      display: function(context)  {

          var dataset = context.dataset;
            let datasets = context.chart.data.datasets;
          var count = dataset.data.length;
          var value = dataset.data[context.dataIndex];
         
          if (count>0 && value>0)
           return true;
           else
           return false;

       },
       formatter: function(value,ctx){
 let datasets = ctx.chart.data.datasets;
         if (datasets.indexOf(ctx.dataset) === datasets.length - 1) {
           let sum = datasets[0].data.reduce((a, b) => a + b, 0);
           let percentage = Math.round((value / sum) * 100) + '%';
           return percentage;
         } else {
           return percentage;
         }

       },
       color:'white',
       
     }
            }
      }
    };
    window.onload = function() {
      Chart.register(ChartDataLabels);
      var ctx = document.getElementById('pie-chart').getContext('2d');
      window.myPie = new Chart(ctx, config);


    };
    $(document).ready(function(){
             $('.datepicker').datepicker({'format':'d/mmmm/yyyy', 	

'i18n':{
  'monthsShort':[
  'Ene',
  'Feb',
  'Mar',
  'Abr',
  'May',
  'Jun',
  'Jul',
  'Agos',
  'Sept',
  'Oct',
  'Nov',
  'Dic'
],
  'months':[
  'Enero',
  'Febrero',
  'Marzo',
  'Abril',
  'Mayo',
  'Junio',
  'Julio',
  'Agosto',
  'Septiembre',
  'Octubre',
  'Noviembre',
  'Diciembre'
]}
                  });


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