{% extends 'app/base_app.html' %}
{% load staticfiles %}
{% block title %} Reportes de ganancias {% endblock %}

{%  block content %}

<ul class="breadcrumb breadcrumbStyle">
  <li class="breadcrumb-item"><i class="fas fa-wallet"></i> Ventas</li>
  <li class="breadcrumb-item active">Lista de ganancias</li>
</ul>

<h1 class="mt-4 text-center titleIniBox"><i class="fas fa-chart-bar"></i> Reportes de Ganancias</h1>
<br>
<p>A continuación podrá ver los reportes de las ganancias hasta la fecha; por favor, escoga un filtro en la opción <b>filtrar por</b> si desea encontrar resultados por mes y día del año vigente, o por un año y mes en específico.</p>
<br>
<div class="row">
  <div class="col-12 col-sm-3 col-md-3 col-lg-3">
    <div class="form-group">
      <label for="sel1"><b>Filtrar por:</b></label>
      <div id="filters_p">

      </div>
    </div>
  </div>
  <div class="col-12 col-sm-3 col-md-3 col-lg-3">
    <div class="form-group" id="option1">

    </div>
  </div>
  <div class="col-12 col-sm-3 col-md-3 col-lg-3">
    <div class="form-group" id="option2">

    </div>
  </div>
</div>

<div class="col-12" id="cargandoo">

</div>

<div class="table-responsive tableResStyle" id="tabliita">
 <table class="table table-striped table-bordered table-striped" id="ejemplo">

  </table>
</div>

<div class="row">
  <div class="col-12">
    <br>
  </div>
	<div class="col-md-12 col-sm-12 col-lg-12 text-center" id="total_total">

  </div>
</div>


{% endblock %}

{% block javascript %}
<script src="{% static 'js/fecha_v.js' %}"></script>
<script src="{% static 'js/dias_mes.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
{% include "includes/script-datatables.html" %}
<script src="{% static 'js/moment.js' %}"></script>
<script src="{% static 'js/locate-es.js' %}"></script>
<script src="{% static 'js/datetime-moment.js' %}"></script>
<script src="{% static 'js/render-datetime-moment.js' %}"></script>
<script src="{% static 'js/moneda-formato.js' %}"></script>

<script>
var res;
var array_reporte_fecha = {};
var array_vp = {};
var nombreDeNegocio = $('#nameNegocio').text();
var dic_meses = {
  '01' : 'Enero',
  '02' : 'Febrero',
  '03' : 'Marzo',
  '04' : 'Abril',
  '05' : 'Mayo',
  '06' : 'Junio',
  '07' : 'Julio',
  '08' : 'Agosto',
  '09' : 'Septiembre',
  '10' : 'Octubre',
  '11' : 'Noviembre',
  '12' : 'Diciembre',
}

$(document).ready(function() {
    var id = $('#negocio_pk').text();
    var csrftoken = '{{ csrf_token }}';
    $.ajax({
      headers: {'X-CSRF-TOKEN': csrftoken},
      method: "GET",
      url: '/ventas/reportes/ganancias/lista/'+id+'/',
      dataType: 'json',
      data: { "csrfmiddlewaretoken": csrftoken,
          "id": id },
      beforeSend: function() {
                $('#cargandoo').html('<div class="text-center"><div class="spinner-border text-success" style="width: 4rem; height: 4rem;" role="status" aria-hidden="true"></div><br><br><p>Contenido cargando, por favor espere.</p></div>'); // se muestra mientras recive respuesta del servidor
            }
    })

    .done(function(response){
      console.log(response);
      $('#cargandoo').html("");
      var htmlf = '<select class="form-control" id="opcion_buscador" onchange="buscando()">';
      htmlf += '<option value="0">Seleccionar</option>';
      htmlf += '<option value="1">Mes y día</option>';
      htmlf += '<option value="2">Año y Mes</option>';
      htmlf += '</select>';
      $('#filters_p').html(htmlf);
      res = response;
      if (JSON.stringify(res)=='{}'){
        html += '<tr><td colspan="4" class="text-center bg-warning">No hay reportes registrados</td></tr>';
      }

    });
});

function buscando(){
  // pintar las opciones de filtro
  var opcion_seleccion = $("#opcion_buscador").val();

  if (opcion_seleccion=='0') {
    $('#option1').html('');
    $('#option2').html('');

  }else if(opcion_seleccion=='1'){

    var html1 = '<label for="sel1">Mes:</label>';
    html1 += '<select class="form-control" id="mes_select" onchange="buscando_dia_mes()">';
    html1 += '<option value="Todos">todos</option>';
    html1 += '<option value="01">Enero</option>';
    html1 += '<option value="02">Febrero</option>';
    html1 += '<option value="03">Marzo</option>';
    html1 += '<option value="04">Abril</option>';
    html1 += '<option value="05">Mayo</option>';
    html1 += '<option value="06">Junio</option>';
    html1 += '<option value="07">Julio</option>';
    html1 += '<option value="08">Agosto</option>';
    html1 += '<option value="09">Septiembre</option>';
    html1 += '<option value="10">Octubre</option>';
    html1 += '<option value="11">Noviembre</option>';
    html1 += '<option value="12">Diciembre</option>';
    html1 += '</select>';
    $('#option1').html(html1);
    $('#option2').html('');

    buscando_dia_mes();

  }else if(opcion_seleccion=='2'){

    var anios = [];
    var anio_cont;

    // guarda el arreglo de años
    for (let i in res['meses_anios']) {
        anios.push(i);
    }

    // ordena el arreglo asc
    anios.sort();

    var html1 = '<label for="sel1">Año:</label>';
    html1 += '<select class="form-control" id="anio_select" onchange="buscando_anio()">';
    html1 += '<option value="Todos">Todos</option>';

    for (var i = 0; i < anios.length; i++) {
      html1 += '<option value="'+anios[i]+'">'+anios[i]+'</option>';
    }

    html1 += '</select>';
    $('#option1').html(html1);

    var html2 = '<label for="sel1">Mes:</label>';
    html2 += '<select class="form-control" id="mes_select2" onchange="filtrado2()">';
    html2 += '<option value="Todos">Todos</option>';
    html2 += '<option value="01">Enero</option>';
    html2 += '<option value="02">Febrero</option>';
    html2 += '<option value="03">Marzo</option>';
    html2 += '<option value="04">Abril</option>';
    html2 += '<option value="05">Mayo</option>';
    html2 += '<option value="06">Junio</option>';
    html2 += '<option value="07">Julio</option>';
    html2 += '<option value="08">Agosto</option>';
    html2 += '<option value="09">Septiembre</option>';
    html2 += '<option value="10">Octubre</option>';
    html2 += '<option value="11">Noviembre</option>';
    html2 += '<option value="12">Diciembre</option>';
    html2 += '</select>';
    $('#option2').html(html2);

    buscando_anio();

  }
};

// para el primer filtrado
function buscando_dia_mes(){
  // pintar el dia segun el mes buscado
  var anio_actual = (new Date).getFullYear();
  var mes_escogidito = $("#mes_select").val();
  var ss = diasEnUnMes(mes_escogidito, anio_actual);
  var total_mes_ganancias = 0;
  var con = 0;

  if(mes_escogidito=='Todos'){
    $('#option2').html('');
    var tables = '<table class="table table-striped table-bordered table-striped ejemploo" id="ejemplo"> <thead class="theadStyle">';
    tables += '<tr>';
    tables += '<th>Fecha</th>';
    tables += '<th>Mes</th>';
    tables += '<th>Total vendido</th>';
    tables += '</tr>';
    tables += '</thead>';
    tables += '<tbody class="text-center">';
    for(let item in res['mes_anio_actual']){
      for(let dd in dic_meses){
        if(item==dd && res['mes_anio_actual'][item]!='0'){
          con = parseInt(res['mes_anio_actual'][item]);
          tables += '<tr>';
          tables += '<td>'+anio_actual+' / '+item+'</td>';
          tables += '<td> '+dic_meses[dd]+' </td>';
          tables += '<td>'+monedaChange(res['mes_anio_actual'][item])+'</td>';
          tables += '</tr>';
          total_mes_ganancias += con;
        }
      }
    }

    tables += '</tbody> </table>';
    $('#tabliita').html(tables);
    datetablee();

    var htmls='<h5>Total de ventas por año:</h5><h4><b>'+monedaChange(total_mes_ganancias)+'</b></h4>'
    $('#total_total').html(htmls);

  }else{
    var html2 = '<label for="sel1">Día:</label>';
    html2 += '<select class="form-control" id="dia_select" onchange="filtrado1()">';
    html2 += '<option value="0">Todos</option>';
    for (var i = 01; i <= ss; i++) {
      if(i>0 && i<10){
        html2 += '<option value="'+'0'+i+'">'+i+'</option>';
      }else{
        html2 += '<option value="'+i+'">'+i+'</option>';
      }
    }
    html2 += '</select>';
    $('#option2').html(html2);

    filtrado1();
  }
}

function filtrado1(){
  // filtrar por mes y dia del año actual
  $('#total_total').html('');
  var anio_actual = (new Date).getFullYear();
  var mes_escogidito = $("#mes_select").val();
  var dia_escogidito = $("#dia_select").val();
  var tables = '<table class="table table-striped table-bordered table-striped ejemploo" id="ejemplo"> <thead class="theadStyle">';
  tables += '<tr>';
  tables += '<th>Fecha</th>';
  tables += '<th>Mes</th>';
  tables += '<th>Día</th>';
  tables += '<th>Total vendido</th>';
  tables += '</tr>';
  tables += '</thead>';
  tables += '<tbody class="text-center">';
  for(let item in res['dia_mes_anio_actual']){
    for(let dd in dic_meses){
      for(let dia in res['dia_mes_anio_actual'][item]){
        if(item==mes_escogidito && dia_escogidito=='0'){
          if(item==dd){
            tables += '<tr>';
            tables += '<td>'+anio_actual+' / '+item+' / '+dia+'</td>';
            tables += '<td> '+dic_meses[dd]+' </td>';
            tables += '<td> '+dia+' </td>';
            tables += '<td>'+monedaChange(res['dia_mes_anio_actual'][item][dia])+'</td>';
            tables += '</tr>';
          }
        }else if(item==mes_escogidito && dia==dia_escogidito){
          if(item==dd){
            tables += '<tr>';
            tables += '<td>'+anio_actual+' / '+item+' / '+dia+'</td>';
            tables += '<td> '+dic_meses[dd]+' </td>';
            tables += '<td> '+dia+' </td>';
            tables += '<td>'+monedaChange(res['dia_mes_anio_actual'][item][dia])+'</td>';
            tables += '</tr>';
          }
        }
      }
    }
  }

  tables += '</tbody> </table>';
  $('#tabliita').html(tables);
  datetablee();
}

// para el segundo filtrado (año)
function buscando_anio(){
  // pintar el dia segun el mes buscado
  $('#total_total').html('');
  var anio_actual = $("#anio_select").val();
  var mes_escogidito = $("#mes_select2").val();
  if(anio_actual=='Todos'){
    var tables = '<table class="table table-striped table-bordered table-striped ejemploo" id="ejemplo"> <thead class="theadStyle">';
    tables += '<tr>';
    tables += '<th>Fecha</th>';
    tables += '<th>Mes y año</th>';
    tables += '<th>Total vendido</th>';
    tables += '</tr>';
    tables += '</thead>';
    tables += '<tbody class="text-center">';
    for(let item in res['meses_anios']){
      for(let dd in dic_meses){
        for(let mes in res['meses_anios'][item]){
          if(mes==dd){
            tables += '<tr>';
            tables += '<td>'+item+' / '+mes+'</td>';
            tables += '<td> '+dic_meses[dd]+' de '+item+' </td>';
            tables += '<td>'+monedaChange(res['meses_anios'][item][mes])+'</td>';
            tables += '</tr>';
          }
        }
      }
    }
    tables += '</tbody> </table>';
    $('#tabliita').html(tables);
    datetablee();
    $("#mes_select2").val('Todos');

  }else{
    filtrado2();
 }
}

function filtrado2(){
  // filtrar por mes del año escogido
  $('#total_total').html('');
  var anio_actual = $("#anio_select").val();
  var mes_escogidito = $("#mes_select2").val();
  var total_anio_ganancias = 0;
  var con = 0;
  var tables = '<table class="table table-striped table-bordered table-striped ejemploo" id="ejemplo"> <thead class="theadStyle">';
  tables += '<tr>';
  tables += '<th>Fecha</th>';
  tables += '<th>Mes y año</th>';
  tables += '<th>Total vendido</th>';
  tables += '</tr>';
  tables += '</thead>';
  tables += '<tbody class="text-center">';
  for(let item in res['meses_anios']){
    for(let dd in dic_meses){
      for(let mes in res['meses_anios'][item]){
        if(item==anio_actual && mes_escogidito=='Todos'){
          if(mes==dd){
            con = parseInt(res['meses_anios'][item][mes]);
            tables += '<tr>';
            tables += '<td>'+item+' / '+mes+'</td>';
            tables += '<td> '+dic_meses[dd]+' de '+item+' </td>';
            tables += '<td>'+monedaChange(res['meses_anios'][item][mes])+'</td>';
            tables += '</tr>';
            total_anio_ganancias += con;
          }
        }else if(item==anio_actual && mes==mes_escogidito){
          if(mes==dd){
            tables += '<tr>';
            tables += '<td>'+item+' / '+mes+'</td>';
            tables += '<td> '+dic_meses[dd]+' de '+item+' </td>';
            tables += '<td>'+monedaChange(res['meses_anios'][item][mes])+'</td>';
            tables += '</tr>';
            total_anio_ganancias = 0;
          }
        }
      }
    }
  }

  tables += '</tbody> </table>';
  $('#tabliita').html(tables);
  datetablee();

  if (total_anio_ganancias!=0){
    var htmls='<h5>Total de ventas por año:</h5><h4><b>'+monedaChange(total_anio_ganancias)+'</b></h4>';
  }else{
    var htmls='';
  }
  $('#total_total').html(htmls);

}

function datetablee(){

    var table = $('#ejemplo').DataTable( {
       "paging": true,
       "lengthChange": true,
       "searching": true,
       "ordering": true,
       "info": true,
       "autoWidth": true,
       "language": idioma,
       "lengthMenu": [[15, 25, 50, -1],[15,25,50,"Mostrar Todo"]],
       // "columnDefs":[{
       //                "targets": [0],
       //                "render": function(data) {
       //                          return moment(data).format('YYYY / MM / DD');
       //                        },
       //            }],
       dom: 'Bfrt<"col-md-6 inline"i> <"col-md-6 inline"p>',
       buttons: {
             dom: {
               container:{
                 tag:'div',
                 className:'flexcontent'
               },
               buttonLiner: {
                 tag: null
               }
             },

             buttons: [
                 {
                     extend:    'copyHtml5',
                     text:      '<i class="fa fa-clipboard"></i> Copiar',
                     title:'Tabla de productos copiada',
                     titleAttr: 'Copiar',
                     className: 'btn btn-app export copia',
                     exportOptions: {
                         columns: [ 0, 1, 2, 3, 4, 5 ]
                     }
                 },
                 {
                     extend:    'pdfHtml5',
                     text:      '<i class="fas fa-file-pdf"></i>PDF',
                     title:'Compras del negocio '+ nombreDeNegocio,
                     titleAttr: 'PDF',
                     className: 'btn btn-app export pdf',
                     exportOptions: {
                         columns: [ 0, 1, 2, 3, 4, 5 ]
                     },
                     customize:function(doc) {

                         doc.styles.title = {
                             color: '#4c8aa0',
                             fontSize: '30',
                             alignment: 'center'
                         }
                         doc.styles['td:nth-child(2)'] = {
                             width: '100px',
                             'max-width': '100px'
                         },
                         doc.styles.tableHeader = {
                             fillColor:'#4c8aa0',
                             color:'white',
                             alignment:'center'
                         },
                         doc.content[1].margin = [ 100, 0, 100, 0 ]

                     }
                 },

                 {
                     extend:    'excelHtml5',
                     text:      '<i class="fas fa-file-excel"></i>Excel',
                     title:'Tabla de Compras del negocio '+ nombreDeNegocio,
                     titleAttr: 'Excel',
                     className: 'btn btn-app export excel',
                     exportOptions: {
                         columns: [ 0, 1, 2, 3, 4, 5 ]
                     },
                 },
                 {
                     extend:    'csvHtml5',
                     text:      '<i class="fas fa-file-csv"></i>CSV',
                     title:'Tabla de Compras del negocio '+ nombreDeNegocio,
                     titleAttr: 'CSV',
                     className: 'btn btn-app export csv',
                     exportOptions: {
                         columns: [ 0, 1, 2, 3, 4, 5 ]
                     }
                 },
                 {
                     extend:    'print',
                     text:      '<i class="fas fa-print"></i>Imprimir',
                     title:'Compras del negocio '+ nombreDeNegocio,
                     titleAttr: 'Imprimir',
                     className: 'btn btn-app export imprimir',
                     exportOptions: {
                         columns: [ 0, 1, 2, 3, 4, 5 ]
                     }
                 },
                 {
                     extend:    'pageLength',
                     titleAttr: 'Registros a mostrar',
                     className: 'selectTable'
                 }
             ]
           }
       });

}

</script>
{% endblock %}