POS-Server/app/views/sales/sales_per_month_report.html.erb

<!-- BEGIN CONTAINER -->
<div class="page-container">
  <!-- BEGIN CONTENT -->
  <div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <!-- BEGIN PAGE HEAD-->
    <div class="page-head">
      <div class="container-fluid">
        <!-- BEGIN PAGE TITLE -->
        <div class="page-title">
          <h1>Reporte de ventas e ingresos por mes </h1>
        </div>
        <!-- END PAGE TITLE -->
      </div>
    </div>
    <!-- END PAGE HEAD-->
    <!-- BEGIN PAGE CONTENT BODY -->
    <div class="page-content">
      <div class="container-fluid">
        <!-- BEGIN PAGE BREADCRUMBS -->
        <ul class="page-breadcrumb breadcrumb">
          <%= render_breadcrumbs :tag => :li, :separator => ' <i class="fa fa-circle"></i> ' %>
        </ul>
        <!-- END PAGE BREADCRUMBS -->
        <div class="search-page search-content-3">
          <div class="row">
            <div class="col-md-12">
              <div class="search-filter bordered">
              <!-- <h4 class=" uppercase form-section"> Búsqueda de producto </h4> <hr> -->
                <div class="form-group">
                  <div class="row">
                    <div class="col-md-3 col-sm-4">
                      <div class="search-label uppercase">Punto de venta</div>
                      <div class="col-md-12">
                        <%= select_tag "pointsale", options_from_collection_for_select(Pointsale.vigentes, :id, :name), include_blank: "Todos", class: "form-control  input-medium" %>
                      </div>
                    </div>
                    <div class="col-md-3 col-sm-4">
                      <div class="search-label uppercase"> Del </div>
                      <div class="col-md-6">
                        <div class="input-group input-medium date" data-date-format="dd/mm/yyyy">
                          <input id="start_date" type='text' class="form-control" value="<%= l(Date.today.beginning_of_month, format: '%d/%m/%Y') %>" />
                          <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-3 col-sm-4">
                      <div class="search-label uppercase"> Al </div>
                      <div class="col-md-6">
                        <div class="input-group input-medium date" data-date-format="dd/mm/yyyy">
                          <input id="end_date" type='text' class="form-control" value="<%= l(Date.today.end_of_month, format: '%d/%m/%Y') %>" />
                          <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="row">
                    <div class="col-md-3 col-sm-4">
                      <!-- categoria -->
                      <div class="search-label uppercase">Línea</div>
                      <div class="col-md-12">
                        <div class="select2-bootstrap-prepend">
                          <%= select_tag "category", options_from_collection_for_select(Category.activos_padre, :id, :category), include_blank: "Todas",  class: "form-control select2-allow-clear-todas", onchange: 'getSubCategories($(this).val());'%>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-3 col-sm-4">
                      <!-- sub- categoria -->
                      <div class="search-label uppercase">Sublínea</div>
                      <div class="col-md-12">
                        <div class="select2-bootstrap-prepend">
                          <%= collection_select("", :subcategory, ({}), :id, :category, options = { include_blank: "Todas" }, html_options = { class: 'form-control select2-allow-clear-todas input-medium' }) %>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-3 col-sm-4" style="margin-top: 20px">
                      <button class="btn green bold btn-block" onclick="findSalesByPeriod()" style="margin:0px">Filtrar <i class="m-icon-swapright m-icon-white"></i> </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- BEGIN PAGE CONTENT INNER -->
        <div class="page-content-inner">
          <div class="portlet light">
            <div class="portlet-title">
              <div class="caption">
                <span class="caption-subject font-blue-dark bold uppercase">Ventas e ingresos</span>
              </div>
            </div>
            <div class="portlet-body form" id="sales_content">
              <div class="product_track_search">
                <div class="row">
                  <div class="col-md-12">
                    <div class="note note-success hidden" id="note_info">
                      <h4 class="block">Detalle de ventas e ingresos del periodo: <strong><span id="start_date_display"></span></strong> al <strong><span id="end_date_display"></span></strong> en <strong><span id="pointsale_display"></span></strong></h4>
                    </div>
                    <div class="col-xs-offset-1 col-xs-5">
                      <div class="text-center well" id="container_total_prods" style="margin-bottom: 0px">
                        <div class="font-grey-mint font-sm">NÚMERO DE VENTAS</div>
                        <div class="uppercase font-hg font-blue-sharp" id="sales_quantity">0</div>
                      </div>
                    </div>
                    <div class="col-xs-offset-1 col-xs-5">
                      <div class="text-center well" id="container_total_prods" style="margin-bottom: 0px">
                        <div class="font-grey-mint font-sm">PRODUCTOS VENDIDOS</div>
                        <div class="uppercase font-hg font-blue-sharp" id="prods_total">0</div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="row" style="margin-top:20px">
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="text-center well" id="container_total_prods" style="margin-bottom: 0px">
                      <div class="font-grey-mint font-sm">Total vendido contado </div>
                      <div class="uppercase font-hg font-blue-sharp" id="cash_sales_total"> $0.00</div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="text-center well" id="container_total_prods" style="margin-bottom: 0px">
                      <div class="font-grey-mint font-sm">Total vendido apartados</div>
                      <div class="uppercase font-hg font-blue-sharp" id="reserved_sales_total"> $0.00</div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="text-center well" id="container_total_prods" style="margin-bottom: 0px">
                      <div class="font-grey-mint font-sm">Total vendido crédito </div>
                      <div class="uppercase font-hg font-blue-sharp" id="credit_sales_total"> $0.00</div>
                    </div>
                  </div>
                  <div class="col-xs-3">
                    <div class="text-center well" id="container_total_prods" style="margin-bottom: 0px">
                      <div class="font-grey-mint font-sm">TOTAL VENDIDO</div>
                      <div class="uppercase font-hg font-green" id="sales_total">$0.00</div>
                    </div>
                  </div>
                </div>
                <div class="row" style="margin-top:20px">
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="text-center well" id="container_total_prods" style="margin-bottom: 0px">
                      <div class="font-grey-mint font-sm">Ingresos por contado y devoluciones </div>
                      <div class="uppercase font-hg font-blue-sharp" id="cash_sales_income"> $0.00</div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="text-center well" id="container_total_prods" style="margin-bottom: 0px">
                      <div class="font-grey-mint font-sm">Ingresos por apartados</div>
                      <div class="uppercase font-hg font-blue-sharp" id="reserved_sales_income"> $0.00</div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-6">
                    <div class="text-center well" id="container_total_prods" style="margin-bottom: 0px">
                      <div class="font-grey-mint font-sm">Ingresos por ventas a crédito </div>
                      <div class="uppercase font-hg font-blue-sharp" id="credit_sales_income"> $0.00</div>
                    </div>
                  </div>
                  <div class="col-xs-3">
                    <div class="text-center well" id="container_total_prods" style="margin-bottom: 0px">
                      <div class="font-grey-mint font-sm">TOTAL DE INGRESOS</div>
                      <div class="uppercase font-hg font-green" id="sales_income">$0.00</div>
                    </div>
                  </div>
                </div>
                <br>
                <div class="row">
                  <div class="col-md-12">
                    <h4 class="form-section">Desglose de ventas del periodo</h4>
                    <table class="table table-striped table-bordered table-hover tableadvanced" id="sales_table">
                      <thead>
                        <tr>
                          <th>Fecha</th>
                          <th>Folio</th>
                          <th>Punto de venta</th>
                          <th>Vendido por</th>
                          <th>Productos</th>
                          <th>Tipo</th>
                          <th>Status</th>
                          <th>subtotal</th>
                          <th>IVA</th>
                          <th>Descto.</th>
                          <th>Total</th>
                        </tr>
                      </thead>
                      <tbody>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- END PAGE CONTENT INNER -->
      </div>
    </div>
    <!-- END PAGE CONTENT BODY -->
    <!-- END CONTENT BODY -->
  </div>
  <!-- END CONTENT -->
</div>
<!-- END CONTAINER -->
<script type="text/javascript">
  $(document).on("page:change", function() {
    App.init();
     $('#start_date').datetimepicker({
      icons: {
        date: "fa fa-calendar"
      },
      format: "DD/MM/YYYY"
    });

    $('#end_date').datetimepicker({
      icons: {
        date: "fa fa-calendar"
      },
      format: "DD/MM/YYYY"
    });
  });

  var rows_selected = [];

  //buscar ventas por periodo de tiempo
  function findSalesByPeriod() {
    var pointsale = $('#pointsale').val();
    var start = moment($("#start_date").val(), "DD-MM-YYYY").format('YYYY-MM-DD');
    var end = moment($("#end_date").val(), "DD-MM-YYYY").format('YYYY-MM-DD');
    var category = $("#category option:selected").val();
    var subcategory = $("#_subcategory option:selected").val();

    if ($("#start_date").val() && $("#end_date").val()) {
      App.blockUI({
        target: $("#sales_content"),
        animate: true
      });

      $.ajax({
        type: "get",
        url: '/sales_per_month/',
        data: {
          start_date: start,
          end_date: end,
          pointsale_id: pointsale,
          category: category,
          subcategory: subcategory
        },
        dataType: 'script',
        success: function(data) {
          App.unblockUI($("#sales_content"));
          $('#start_date_display').html(moment($("#start_date").val(), "DD-MM-YYYY").format('DD/MM/YYYY'));
          $('#end_date_display').html(moment($("#end_date").val(), "DD-MM-YYYY").format('DD/MM/YYYY'));
          $('#pointsale_display').html(pointsale ? $('#pointsale').find("option:selected").text() : 'TODOS los puntos de venta');
          $('#note_info').removeClass('hidden');
        },
        error: function(x) {
          App.unblockUI($("#sales_content"));
          $('#note_info').addClass('hidden');
          toastr["error"]("Ocurrió un problema al filtrar.");
        }
      });
    } else {
      toastr["error"]("Es necesario seleccionar fechas.");
    }
  }

  function getSubCategories(value) {
    $('#_subcategory').html('');
    $('#_subcategory').select2("destroy").select2({
      placeholder: 'Seleccione',
      "language": {
        "noResults": function(){
          return "No se encontraron coincidencias";
        }
      }
    });
    $('#_subcategory').select2('val', null);
    if(value) {
      $.ajax({
        type: "get",
        url: '/getcategories/' + value,
        dataType: 'json',
        success: function(data) {
          if(data.length > 0) {
            $('#_subcategory').append('<option></option>')
            for(i in data) {
              $('#_subcategory').append("<option value='" + data[i].id + "'>" + data[i].category + "</option>")
            }
            $('#_subcategory').select2({
              allowClear: true,
              placeholder: 'Todas',
              "language": {
                "noResults": function(){
                  return "No se encontraron coincidencias";
                }
              }
            });
          }
        }
      });
    }
  }
</script>