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

{%  block content %}

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

<h1 class="mt-4 text-center titleIniBox"><i class="fas fa-chart-bar"></i> Reportes de Compras</h1>
<br>
<p>A continuación podrá ver los reportes de las compras 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, por año y mes o por un rango de fechas 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>

<br><br>

<!-- <div class="col-12">
  <h3 id="titl2" style="color: #399d3f;font-weight: bold;"></h3>
  <canvas id="myChart"></canvas>
</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 async="async">
var res;
var array_reporte_fecha = {};
var array_vp = {};
var nombreDeNegocio = $('#nameNegocio').text();

$(document).ready(function() {
  console.log('adasdasdasdasd');
    var id = $('#negocio_pk').text();
    var csrftoken = '{{ csrf_token }}';
    $.ajax({
      headers: {'X-CSRF-TOKEN': csrftoken},
      method: "GET",
      url: '/compras/reportes/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('ajax');
      $('#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 += '<option value="3">Rango de Fechas</option>';
      htmlf += '</select>';
      $('#filters_p').html(htmlf);
      // console.log(response);
      res = response;
      if (JSON.stringify(res)=='{}'){
        html += '<tr><td colspan="4" class="text-center bg-warning">No hay compras registradas</td></tr>';
      }
      else{
        // conertir fecha
        array_reporte_fecha = {
          'mes' : [],
          'dia' : [],
          'anio' : [],
          'cantidad' : []
        };
        for(let item in res){
          var fecha_array = val_fecha(res[item].fecha).split(" ");
          array_reporte_fecha.mes.push(fecha_array[2]);
          array_reporte_fecha.dia.push(fecha_array[0]);
          array_reporte_fecha.anio.push(fecha_array[4]);
          array_reporte_fecha.cantidad.push(res[item].total);
        };

        // array con las compras
        var ant = -0;
        for(let item in res){
          if(ant==res[item].id_compra){
              ant =res[item].id_compra
          }else{
            var fecha_array = val_fecha(res[item].fecha).split(" ");
            array_vp[res[item].id_compra] = {
              'idd' : res[item].id_compra,
              'fecha_completa' : res[item].fecha,
              'mes' :  fecha_array[2],
              'dia' : fecha_array[0],
              'anio' : fecha_array[4],
              'total' : res[item].total,
              'proveedor' : [],
              'producto_id' : [],
              'producto_nombre' : [],
              'producto_cantidad' : [],
              'valor_unitario' : [],
              'producto_total' : [],
              'stock_nuevo' : [],
              'stock_anterior' : []
            }
            ant =res[item].id_compra
          }

        };

        // for para guardar los productos segun asl compras
        for(let item in res){
          for(let item2 in array_vp){
            if(array_vp[item2].idd == res[item].id_compra){
              array_vp[item2].proveedor.push(res[item].proveedor);
              array_vp[item2].producto_id.push(res[item].producto_id);
              array_vp[item2].producto_nombre.push(res[item].producto_nombre);
              array_vp[item2].producto_cantidad.push(res[item].producto_cantidad);
              array_vp[item2].valor_unitario.push(res[item].valor_unitario);
              array_vp[item2].producto_total.push(res[item].producto_total);
              array_vp[item2].stock_nuevo.push(res[item].producto_stock_nuevo);
              array_vp[item2].stock_anterior.push(res[item].producto_stock_anterior);
            }
          }
        }

      } //else

    });
});

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="Enero">Enero</option>';
    html1 += '<option value="Febrero">Febrero</option>';
    html1 += '<option value="Marzo">Marzo</option>';
    html1 += '<option value="Abril">Abril</option>';
    html1 += '<option value="Mayo">Mayo</option>';
    html1 += '<option value="Junio">Junio</option>';
    html1 += '<option value="Julio">Julio</option>';
    html1 += '<option value="Agosto">Agosto</option>';
    html1 += '<option value="Septiembre">Septiembre</option>';
    html1 += '<option value="Octubre">Octubre</option>';
    html1 += '<option value="Noviembre">Noviembre</option>';
    html1 += '<option value="Diciembre">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 array_vp) {
        anios.push(array_vp[i].anio);
    }

    // elimina años repetidos del arreglo original
    let anios_filtrado = anios.filter((valor, indiceActual, arreglo) => arreglo.indexOf(valor) === indiceActual);

    // 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_filtrado.length; i++) {
      html1 += '<option value="'+anios_filtrado[i]+'">'+anios_filtrado[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="Enero">Enero</option>';
    html2 += '<option value="Febrero">Febrero</option>';
    html2 += '<option value="Marzo">Marzo</option>';
    html2 += '<option value="Abril">Abril</option>';
    html2 += '<option value="Mayo">Mayo</option>';
    html2 += '<option value="Junio">Junio</option>';
    html2 += '<option value="Julio">Julio</option>';
    html2 += '<option value="Agosto">Agosto</option>';
    html2 += '<option value="Septiembre">Septiembre</option>';
    html2 += '<option value="Octubre">Octubre</option>';
    html2 += '<option value="Noviembre">Noviembre</option>';
    html2 += '<option value="Diciembre">Diciembre</option>';
    html2 += '</select>';
    $('#option2').html(html2);

    buscando_anio();

  }else if(opcion_seleccion=='3'){
    var html1 = '<label for="sel1">Fecha Inicio:</label>';
    html1 += '<input class="form-control" type="date" id="fecha_ini" onchange="buscando_fechas()">';

    var html2 = '<label for="sel1">Fecha Fin:</label>';
    html2 += '<input class="form-control" type="date" id="fecha_fini" onchange="buscando_fechas()">';

    $('#option1').html(html1);
    $('#option2').html(html2);
  }
};

// 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 arr_reporte = {
  //                   'Enero' : [],
  //                   'Febrero': [],
  //                   'Marzo': [],
  //                   'Abril': [],
  //                   'Mayo': [],
  //                   'Junio': [],
  //                   'Julio': [],
  //                   'Agosto': [],
  //                   'Septiembre': [],
  //                   'Octubre': [],
  //                   'Noviembre': [],
  //                   'Diciembre': [],
  //
  //                 };
  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 de la compra</th>';
    tables += '<th>Proveedor</th>';
    tables += '<th>Producto</th>';
    tables += '<th>Cantidad Vendida</th>';
    tables += '<th>Valor Unitario</th>';
    tables += '<th>Total Comprado</th>';
    tables += '<th>Stock Inicial</th>';
    tables += '<th>Stock Final</th>';
    tables += '</tr>';
    tables += '</thead>';
    tables += '<tbody class="text-center">';
    for(let item in array_vp){
      if(array_vp[item].anio==anio_actual){
        for(let j in array_vp[item].producto_id){
            tables += '<tr>';
            tables += '<td>'+array_vp[item].fecha_completa+'</td>';
            tables += '<td>'+array_vp[item].proveedor[j]+'</td>';
            tables += '<td>'+array_vp[item].producto_nombre[j]+'</td>';
            tables += '<td>'+array_vp[item].producto_cantidad[j]+'</td>';
            tables += '<td> '+monedaChange(array_vp[item].valor_unitario[j])+'</td>';
            tables += '<td> '+monedaChange(array_vp[item].producto_total[j])+'</td>';
            tables += '<td>'+array_vp[item].stock_anterior[j]+'</td>';
            tables += '<td>'+array_vp[item].stock_nuevo[j]+'</td>';
            tables += '</tr>';

            // if(array_vp[item].mes == 'Enero'){ es-CO
            //   arr_reporte.Enero.push(array_vp[item].producto_total[j]);
            // }
            // else if(array_vp[item].mes == 'Febrero'){
            //   arr_reporte.Febrero.push(array_vp[item].producto_total[j]);
            // }
            // else if(array_vp[item].mes == 'Marzo'){
            //   arr_reporte.Marzo.push(array_vp[item].producto_total[j]);
            // }
            // else if(array_vp[item].mes == 'Abril'){
            //   arr_reporte.Abril.push(array_vp[item].producto_total[j]);
            // }
            // else if(array_vp[item].mes == 'Mayo'){
            //   arr_reporte.Mayo.push(array_vp[item].producto_total[j]);
            // }
            // else if(array_vp[item].mes == 'Junio'){
            //   arr_reporte.Junio.push(array_vp[item].producto_total[j]);
            // }
            // else if(array_vp[item].mes == 'Julio'){
            //   arr_reporte.Julio.push(array_vp[item].producto_total[j]);
            // }
            // else if(array_vp[item].mes == 'Agosto'){
            //   arr_reporte.Agosto.push(array_vp[item].producto_total[j]);
            // }
            // else if(array_vp[item].mes == 'Septiembre'){
            //   arr_reporte.Septiembre.push(array_vp[item].producto_total[j]);
            // }
            // else if(array_vp[item].mes == 'Octubre'){
            //   arr_reporte.Octubre.push(array_vp[item].producto_total[j]);
            // }
            // else if(array_vp[item].mes == 'Noviembre'){
            //   arr_reporte.Noviembre.push(array_vp[item].producto_total[j]);
            // }
            // else if(array_vp[item].mes == 'Diciembre'){
            //   arr_reporte.Diciembre.push(array_vp[item].producto_total[j]);
            // }

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

    // reportes

    // $('#titl2').html('Ganancias Totales por Mes');
    // var mes = [];
    // var total = [];
    // for (let i = 0; i < 12; i++) {
    //   mes.push(Object.keys(arr_reporte)[i]);
    //   total.push(Object.values(arr_reporte)[i].reduce((a, b) => a + b, 0));
    // };
    //
    // var ctx = document.getElementById('myChart').getContext("2d");
    // var myChart = new Chart(ctx, {
    //     type: 'bar',
    //     data: {
    //         labels: mes,
    //         datasets: [{
    //             data: total,
    //             label: "Ganancia Mes",
    //             backgroundColor: "#17a2b8",
    //             borderColor: "#17a2b8",
    //             fill: false
    //         },
    //         ]
    //     },
    //     options: {
    //         title: {
    //             display: true,
    //         },
    //
    //     }
    // });

  }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
  var anio_actual = (new Date).getFullYear();
  var mes_escogidito = $("#mes_select").val();
  var dia_escogidito = $("#dia_select").val();
  var ss = diasEnUnMes(mes_escogidito, anio_actual);
  var arr_reporte = {};

  // for (var i = 01; i <= ss; i++) {
  //   if(i>0 && i<10){
  //     arr_reporte[i].key = "'0"+i+"'" ;
  //     arr_reporte[i].value = [];
  //   }else{
  //     arr_reporte[i].key = "'"+i+"'" ;
  //     arr_reporte[i].value = [];
  //   }
  // }
  // console.log(arr_reporte);
  var tables = '<table class="table table-striped table-bordered table-striped ejemploo" id="ejemplo"> <thead class="theadStyle">';
  tables += '<tr>';
  tables += '<th>Fecha de la compra</th>';
  tables += '<th>Proveedor</th>';
  tables += '<th>Producto</th>';
  tables += '<th>Cantidad Vendida</th>';
  tables += '<th>Valor Unitario</th>';
  tables += '<th>Total Comprado</th>';
  tables += '<th>Stock Inicial</th>';
  tables += '<th>Stock Final</th>';
  tables += '</tr>';
  tables += '</thead>';
  tables += '<tbody class="text-center">';
  for(let item in array_vp){
    if(array_vp[item].mes==mes_escogidito && array_vp[item].anio==anio_actual && dia_escogidito=='0'){
      for(let j in array_vp[item].producto_id){
          tables += '<tr>';
          tables += '<td>'+array_vp[item].fecha_completa+'</td>';
          tables += '<td>'+array_vp[item].proveedor[j]+'</td>';
          tables += '<td>'+array_vp[item].producto_nombre[j]+'</td>';
          tables += '<td>'+array_vp[item].producto_cantidad[j]+'</td>';
          tables += '<td> '+monedaChange(array_vp[item].valor_unitario[j])+'</td>';
          tables += '<td> '+monedaChange(array_vp[item].producto_total[j])+'</td>';
          tables += '<td>'+array_vp[item].stock_anterior[j]+'</td>';
          tables += '<td>'+array_vp[item].stock_nuevo[j]+'</td>';
          tables += '</tr>';

      }
    }else if(array_vp[item].mes==mes_escogidito && array_vp[item].anio==anio_actual && array_vp[item].dia==dia_escogidito){
      for(let j in array_vp[item].producto_id){
          tables += '<tr>';
          tables += '<td>'+array_vp[item].fecha_completa+'</td>';
          tables += '<td>'+array_vp[item].proveedor[j]+'</td>';
          tables += '<td>'+array_vp[item].producto_nombre[j]+'</td>';
          tables += '<td>'+array_vp[item].producto_cantidad[j]+'</td>';
          tables += '<td> '+monedaChange(array_vp[item].valor_unitario[j])+'</td>';
          tables += '<td> '+monedaChange(array_vp[item].producto_total[j])+'</td>';
          tables += '<td>'+array_vp[item].stock_anterior[j]+'</td>';
          tables += '<td>'+array_vp[item].stock_nuevo[j]+'</td>';
          tables += '</tr>';
      }
    }
  }

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

  // reportes

  // $('#titl2').html('');
  // var ctx = $('#myChart').html('');
  // var mes = [];
  // var total = [];
  // for (let i = 0; i < 12; i++) {
  //   mes.push(Object.keys(arr_reporte)[i]);
  //   total.push(Object.values(arr_reporte)[i].reduce((a, b) => a + b, 0));
  // };
  //
  // ctx = document.getElementById('myChart').getContext("2d");
  // var myChart = new Chart(ctx, {
  //     type: 'bar',
  //     data: {
  //         labels: mes,
  //         datasets: [{
  //             data: total,
  //             label: "Ganancia Mes",
  //             backgroundColor: "#17a2b8",
  //             borderColor: "#17a2b8",
  //             fill: false
  //         },
  //         ]
  //     },
  //     options: {
  //         title: {
  //             display: true,
  //         },
  //
  //     }
  // }); //reporte

}

// para el segundo filtrado (año)
function buscando_anio(){
  // pintar el dia segun el mes buscado
  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 de la compra</th>';
    tables += '<th>Proveedor</th>';
    tables += '<th>Producto</th>';
    tables += '<th>Cantidad Vendida</th>';
    tables += '<th>Valor Unitario</th>';
    tables += '<th>Total Comprado</th>';
    tables += '<th>Stock Inicial</th>';
    tables += '<th>Stock Final</th>';
    tables += '</tr>';
    tables += '</thead>';
    tables += '<tbody class="text-center">';
    for(let item in array_vp){
      for(let j in array_vp[item].producto_id){
          tables += '<tr>';
          tables += '<td>'+array_vp[item].fecha_completa+'</td>';
          tables += '<td>'+array_vp[item].proveedor[j]+'</td>';
          tables += '<td>'+array_vp[item].producto_nombre[j]+'</td>';
          tables += '<td>'+array_vp[item].producto_cantidad[j]+'</td>';
          tables += '<td> '+monedaChange(array_vp[item].valor_unitario[j])+'</td>';
          tables += '<td> '+monedaChange(array_vp[item].producto_total[j])+'</td>';
          tables += '<td>'+array_vp[item].stock_anterior[j]+'</td>';
          tables += '<td>'+array_vp[item].stock_nuevo[j]+'</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
  var anio_actual = $("#anio_select").val();
  var mes_escogidito = $("#mes_select2").val();
  var tables = '<table class="table table-striped table-bordered table-striped ejemploo" id="ejemplo"> <thead class="theadStyle">';
  tables += '<tr>';
  tables += '<th>Fecha de la compra</th>';
  tables += '<th>Proveedor</th>';
  tables += '<th>Producto</th>';
  tables += '<th>Cantidad Vendida</th>';
  tables += '<th>Valor Unitario</th>';
  tables += '<th>Total Comprado</th>';
  tables += '<th>Stock Inicial</th>';
  tables += '<th>Stock Final</th>';
  tables += '</tr>';
  tables += '</thead>';
  tables += '<tbody class="text-center">';
  for(let item in array_vp){
    if( array_vp[item].anio==anio_actual && mes_escogidito=='Todos'){
      for(let j in array_vp[item].producto_id){
          tables += '<tr>';
          tables += '<td>'+array_vp[item].fecha_completa+'</td>';
          tables += '<td>'+array_vp[item].proveedor[j]+'</td>';
          tables += '<td>'+array_vp[item].producto_nombre[j]+'</td>';
          tables += '<td>'+array_vp[item].producto_cantidad[j]+'</td>';
          tables += '<td> '+monedaChange(array_vp[item].valor_unitario[j])+'</td>';
          tables += '<td> '+monedaChange(array_vp[item].producto_total[j])+'</td>';
          tables += '<td>'+array_vp[item].stock_anterior[j]+'</td>';
          tables += '<td>'+array_vp[item].stock_nuevo[j]+'</td>';
          tables += '</tr>';
      }
    }else if(array_vp[item].mes==mes_escogidito && array_vp[item].anio==anio_actual){
      for(let j in array_vp[item].producto_id){
          tables += '<tr>';
          tables += '<td>'+array_vp[item].fecha_completa+'</td>';
          tables += '<td>'+array_vp[item].proveedor[j]+'</td>';
          tables += '<td>'+array_vp[item].producto_nombre[j]+'</td>';
          tables += '<td>'+array_vp[item].producto_cantidad[j]+'</td>';
          tables += '<td> '+monedaChange(array_vp[item].valor_unitario[j])+'</td>';
          tables += '<td> '+monedaChange(array_vp[item].producto_total[j])+'</td>';
          tables += '<td>'+array_vp[item].stock_anterior[j]+'</td>';
          tables += '<td>'+array_vp[item].stock_nuevo[j]+'</td>';
          tables += '</tr>';
      }
    }
  }

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

}

// para el tercer filtradito por Fechas
function buscando_fechas(){
  var fecha_inicio = $("#fecha_ini").val();
  var fecha_fin = $("#fecha_fini").val();

  // funcion para guardar los dias entre las fechas seleccionada
  var diasEntreFechas = function(desde, hasta) {
	var dia_actual = desde;
  var fechas = [];
	while (dia_actual.isSameOrBefore(hasta)) {
  	fechas.push(dia_actual.format('DD-MM-YYYY'));
 		dia_actual.add(1, 'days');
	}
	return fechas;
  };

  var desde = moment(fecha_inicio);
  var hasta = moment(fecha_fin);
  var results = diasEntreFechas(desde, hasta);
  var fechas_select = [];

  for(let item in results){
    fechas_select.push(val_fecha_reporte(results[item]));
  };

  // for(let item in fechas_select){
  //   console.log(fechas_select[item].split(" "));
  // };

  var tables = '<table class="table table-striped table-bordered table-striped ejemploo" id="ejemplo"> <thead class="theadStyle">';
  tables += '<tr>';
  tables += '<th>Fecha de la compra</th>';
  tables += '<th>Proveedor</th>';
  tables += '<th>Producto</th>';
  tables += '<th>Cantidad Vendida</th>';
  tables += '<th>Valor Unitario</th>';
  tables += '<th>Total Comprado</th>';
  tables += '<th>Stock Inicial</th>';
  tables += '<th>Stock Final</th>';
  tables += '</tr>';
  tables += '</thead>';
  tables += '<tbody class="text-center">';
  for(let item in fechas_select){

    for(let item2 in array_vp){
      if( fechas_select[item].split(" ")[4]==array_vp[item2].dia && fechas_select[item].split(" ")[2]==array_vp[item2].mes && fechas_select[item].split(" ")[0]==array_vp[item2].anio){

        for(let j in array_vp[item2].producto_id){
            tables += '<tr>';
            tables += '<td>'+array_vp[item2].fecha_completa+'</td>';
            tables += '<td>'+array_vp[item2].proveedor[j]+'</td>';
            tables += '<td>'+array_vp[item2].producto_nombre[j]+'</td>';
            tables += '<td>'+array_vp[item2].producto_cantidad[j]+'</td>';
            tables += '<td> '+monedaChange(array_vp[item2].valor_unitario[j])+'</td>';
            tables += '<td> '+monedaChange(array_vp[item2].producto_total[j])+'</td>';
            tables += '<td>'+array_vp[item2].stock_anterior[j]+'</td>';
            tables += '<td>'+array_vp[item2].stock_nuevo[j]+'</td>';
            tables += '</tr>';
        }
      }
    }
  };

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

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, 6, 7 ]
                     }
                 },
                 {
                     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, 6, 7 ]
                     },
                     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, 6, 7 ]
                     },
                 },
                 {
                     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, 6, 7 ]
                     }
                 },
                 {
                     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, 6, 7 ]
                     }
                 },
                 {
                     extend:    'pageLength',
                     titleAttr: 'Registros a mostrar',
                     className: 'selectTable'
                 }
             ]
           }
       });

}

</script>
{% endblock %}