var tabla;

//funcion que se ejecuta al inicio
function init() {
  listar();
  //cargamos los items al select cliente
  $.post("controladores/ventanControlador.php?op=selectCliente", function (r) {
    $("#idcliente").html(r);
    $("#idcliente").val(0);
    $("#idcliente").selectpicker("refresh");
  });

  $.post("controladores/ventanControlador.php?op=selectVendedor", function (r) {
    $("#idvendedor").html(r);
    $("#idvendedor").val(0);
    $("#idvendedor").selectpicker("refresh");
  });

  $("#fecha_inicio").change(function () {
    listar();
  });

  $("#fecha_fin").change(function () {
    listar();
  });

  $("#idcliente").change(function () {
    listar();
  });

  $("#idvendedor").change(function () {
    listar();
  });

  $("#tbllistado tfoot th").each(function () {
    var title = $(this).text();
    $(this).html(
      '<input type="text" style="width:100px" placeholder="Filtro.." />'
    );
  });

  /* 	$('#tbllistado thead tr td').each( function () {
		var title = $(this).text();
		$(this).html( '<input type="text" style="width:100px" placeholder="Filtro.." />' );
	} ); */
}
//controladores/ventaControlador.php

//funcion listar
function listar() {
  var fecha_inicio = $("#fecha_inicio").val();
  var fecha_fin = $("#fecha_fin").val();
  var idcliente = $("#idcliente").val();
  var idvendedor = $("#idvendedor").val();

  var tabla = $("#tbllistado")
    .dataTable({
      aProcessing: true, //activamos el procedimiento del datatable
      aServerSide: true, //paginacion y filrado realizados por el server
      dom: "Bfrtip", //definimos los elementos del control de la tabla
      buttons: ["excelHtml5", "pdf"],

      ajax: {
        url: "controladores/consultasControlador.php?op=ventasagrupadaporclienterangodefecha",
        method: "post",
        data: {
          fecha_inicio: fecha_inicio,
          fecha_fin: fecha_fin,
          idcliente: idcliente,
          idvendedor: idvendedor,
        },
        dataType: "json",
        error: function (e) {
          console.log(e.responseText);
        },
      },
      columnDefs: [{ type: "numeric-comma", targets: 4 }],
      initComplete: function () {
        this.api()
          .columns()
          .every(function () {
            var that = this;

            $("input", this.footer()).on("keyup change", function () {
              if (that.search() !== this.value) {
                that.search(this.value).draw();
              }
            });
          });
      },
      /* "initComplete": function () {
			this.api().columns().every( function () {
					var that = this;

					$( 'input', this.header()).on( 'keyup change', function () {
							if ( that.search() !== this.value ) {
									that
											.search( this.value )
											.draw();
									}
					});
			})
		},	 */
      drawCallback: function () {
        //alert("La tabla se está recargando");
        var api = this.api();
        var total1 = api.column(2, { page: "current" }).data().sum();
        var total2 = api.column(3, { page: "current" }).data().sum();
        var total3 = api.column(4, { page: "current" }).data().sum();
        var total4 = api.column(5, { page: "current" }).data().sum();
        var total5 = api.column(6, { page: "current" }).data().sum();
        var total6 = api.column(7, { page: "current" }).data().sum();
        total1 = number_format(total1 * 1, 2);
        total2 = number_format(total2 * 1, 2);
        total3 = number_format(total3 * 1, 2);
        total4 = number_format(total4 * 1, 2);
        total5 = number_format(total5 * 1, 2);
        total6 = number_format(total6 * 1, 2);
        //$(api.column(0).footer()).html("Total:");
        $(api.column(2).footer()).html(
          '<div align="center">' + total1 + "</div>"
        );
        $(api.column(3).footer()).html(
          '<div align="center">' + total2 + "</div>"
        );
        $(api.column(4).footer()).html(
          '<div align="right">' + total3 + "</div>"
        );
        $(api.column(5).footer()).html(
          '<div align="right">' + total4 + "</div>"
        );
        $(api.column(6).footer()).html(
          '<div align="right">' + total5 + "</div>"
        );
        $(api.column(7).footer()).html(
          '<div align="center">' + total6 + "</div>"
        );
      },
      bDestroy: true,
      iDisplayLength: -1, //paginacion
      order: [[0, "desc"]], //ordenar (columna, orden)
    })
    .DataTable();
}

init();
