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 ventas 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">
                        <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 => "Todas",  class: "form-control  input-medium" %>
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="search-label uppercase"> Del </div>
                        <div class="col-md-6">
                          <div class="input-group input-medium date date-picker" data-date-format="dd/mm/yyyy">
                            <input id="start" type='text' class="form-control"/>
                            <span class="input-group-addon">
                              <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                          </div>
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="search-label uppercase"> Al </div>
                        <div class="col-md-6">
                          <div class="input-group input-medium date date-picker" data-date-format="dd/mm/yyyy">
                            <input id="end" type='text' class="form-control"/>
                            <span class="input-group-addon">
                              <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                          </div>
                        </div>
                      </div>
                      <div class="col-md-3" style="margin-top: 20px">
                        <button class="btn green bold  btn-block" onclick="findSalesByPeriod()" style="margin:0px">Buscar <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="row ">
              <div class="portlet light">
                <div class="portlet-title">
                  <div class="caption">
                    <span class="caption-subject font-blue-dark bold uppercase">Ventas</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 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-4">
                          <div class="text-center well" id="container_total_prods" style="margin-bottom: 0px">
                            <div class="font-grey-mint font-sm">NUMERO DE VENTAS</div>
                            <div class="uppercase font-hg font-blue-sharp" id="sales_quantity">0</div>
                          </div>
                        </div>
                        <div class="col-xs-4">
                          <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 class="col-xs-4">
                          <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_total">$0.00</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row" style="margin-top:20px">
                      <div class="col-xs-1"></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 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">ingresos por 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">ingresos por ventas a crédito </div>
                          <div class="uppercase font-hg font-blue-sharp" id="credit_sales_total"> $0.00</div>
                        </div>
                      </div>
                      <div class="col-xs-1"></div>
                    </div>
                    <br>
                    <div class="row">
                      <div class="col-md-12">
                        <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>
          </div>
          <!-- END PAGE CONTENT INNER -->
        </div>
      </div>
      <!-- END PAGE CONTENT BODY -->
      <!-- END CONTENT BODY -->
    </div>
    <!-- END CONTENT -->
  </div>
  <!-- END CONTAINER -->
  <script type="text/javascript">
    var rows_selected = [];

    //buscar ventas por periodo de tiempo
    function findSalesByPeriod() {
      var pointsale = $('#pointsale').val();
      var start = moment($("#start").val(), "DD-MM-YYYY").format('YYYY-MM-DD');
      var end = moment($("#end").val(), "DD-MM-YYYY").format('YYYY-MM-DD');

      if ($("#start").val() && $("#end").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
          },
          dataType: 'script',
          success: function(data) {
            App.unblockUI($("#sales_content"));
            $('#start_date_display').html(moment($("#start").val(), "DD-MM-YYYY").format('DD/MM/YYYY'));
            $('#end_date_display').html(moment($("#end").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');
          }
        });
      }else{
        toastr["error"]("Es necesario seleccionar fechas.");
      }
    }

  </script>