<div class="form-horizontal">
    <div class="portlet-body form">
        <div class="form-body">
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                       <%= label_tag :pointsale_id,  {:class=>"col-md-3 control-label"} do %>Punto de venta <span class="required">*</span> <% end %>
                        <div class="col-md-8" style="padding-right:0px">
                            <% if current_user.usertype == 'A' %>
                              <%= select_tag :pointsale_id, options_from_collection_for_select(Pointsale.activos, :id, :name), :include_blank => "Seleccione punto de venta",  class: "form-control select2" %>
                            <% else %>
                                <%= text_field_tag 'pointsale', current_user.pointsale.name, :class => 'form-control', :disabled => true %>
                                <%= hidden_field_tag 'pointsale_id', current_user.pointsale_id %>
                            <% end %>
                        </div>
                    </div>
                    <div class="form-group">
                      <%= label_tag :initial_date, "Fecha", {:class=>"col-md-2 control-label"} do %>Desde <span class="required">*</span> <% end %>
                      <div class="col-md-3" style="padding-left:0px;padding-right:0px;margin-left:15px">
                          <div class='input-group date' id='initial_date'>
                              <input id="start" type='text' class="form-control"/>
                              <span class="input-group-addon">
                                  <span class="glyphicon glyphicon-calendar"></span>
                              </span>
                          </div>
                      </div>
                      <%= label_tag :final_date, "Fecha", {:class=>"col-md-2 control-label"} do %>Hasta <span class="required">*</span> <% end %>
                      <div class="col-md-3" style="padding-left:0px;padding-right:0px;">
                          <div class='input-group date' id='final_date'>
                              <input id="end" type='text' class="form-control"/>
                              <span class="input-group-addon">
                                  <span class="glyphicon glyphicon-calendar"></span>
                              </span>
                          </div>
                      </div>
                      <button class="btn btn-icon-only blue" style="margin-left:25px" onclick="getSellersByDates()">
                        <i class="fa fa-search"></i>
                      </button>
                    </div>
                    <div class="form-group">
                        <div class="form-group" id="sellers_div">
                            <%= label_tag :sellers_ids, "Vendores", {:class=>"col-md-3 control-label"} do %>Vendedores <span class="required">*</span> <% end %>
                            <div class="col-md-9" style="padding-left:20px">
                                <div class="row" style="margin-bottom:10px">
                                    <div class="col-md-12">
                                        <button type="button" class="btn btn-default" id='select-all'><i class="fa fa fa-square-o"></i> Seleccionar todo</button>
                                        <button style="margin-left:55px" type="button" class="btn btn-default" id='deselect-all'><i class="fa fa-square-o"></i> Deseleccionar todo</button>
                                    </div>
                                </div>
                                <%= select_tag :sellers_ids, nil, multiple: true, class: 'multi-select' %>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-actions">
        <h4 class="form-section"> </h4>
        <div class="row">
            <div class="col-md-12">
                <button type="button" class="btn green" disabled=​"disabled" onclick="generateCommissions()" id="generate_button">Generar comisiones</button>
                <button type="button" class="btn default" onclick="cerrarDialog()">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<script>
    function cerrarDialog() {
        $('#dialog').modal('toggle');
    }

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

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

    function getSellersByDates() {
        if ($("#initial_date").data("date") && $("#final_date").data("date") && $('#pointsale_id').val()) {

            var initial_date = moment($("#initial_date").data("date"), "DD-MM-YYYY").startOf('day').format('YYYY-MM-DD HH:mm:ss');
            var final_date = moment($("#final_date").data("date"), "DD-MM-YYYY").endOf('day').format('YYYY-MM-DD HH:mm:ss');
            var pointsale_id = $('#pointsale_id').val();

            App.blockUI({
                 target: $("#sellers_div"),
                 animate: true
            });

            $.ajax({
              type: "get",
              url:  '/find_sellers_by_date/' + pointsale_id+ '/' + initial_date + '/' + final_date,
              dataType: 'json',
              success: function(data) {
                  console.log(data);
                  $('#sellers_ids').html('');
                  for (var i = 0; i < data.length; i++) {
                    $('#sellers_ids').append($('<option>', {
                        value: data[i].seller_id,
                        text : data[i].name
                    }));
                  }
                  $('#sellers_ids').multiselect('refresh');
                  App.unblockUI($("#sellers_div"));
                  $('#generate_button').prop('disabled', false);
              },
                error: function (err) {
                    App.unblockUI($("#sellers_div"));
                    toastr["error"]('Ya se generaron comisiones para el periodo seleccionado');
                }
            });

        } else {
            toastr["error"]('Seleccione punto de venta y rango de fechas');
        }
    }

    function generateCommissions() {
       if($('#sellers_ids').val()) {
            var initial_date = moment($("#initial_date").data("date"), "DD-MM-YYYY").startOf('day').format('YYYY-MM-DD HH:mm:ss');
            var final_date = moment($("#final_date").data("date"), "DD-MM-YYYY").endOf('day').format('YYYY-MM-DD HH:mm:ss');
            $.ajax({
              type: "get",
              url:  '/generate_commissions/',
              dataType: 'script',
              data: {
                sellers_ids: $('#sellers_ids').val(),
                pointsale_id: $('#pointsale_id').val(),
                initial_date: initial_date,
                final_date: final_date
              },
              success: function(data) {
              }
            });
       } else {
            toastr["error"]('Seleccione vendedores para generar comisiones');
       }
    }
</script>
