<div class="p-l-15">
  <%= form_tag report_path, :method => :get, :id => "frm_report", :class => "form" do %>
  <% if period_type != false %>
  <div class="row">

        <!-- <div class="col-lg-2 col-md-2 col-sm-2">
          <label class="">Select Date Range</label>
          <% if @daterange %>
          <input class="form-control" name="daterange" id="daterange" value="<%= @daterange %>" type="text" placeholder="Date Range" readonly="true">
          <% else %>
          <input class="form-control" name="daterange" id="daterange" type="text" placeholder="Date Range" readonly="true">
          <% end %>
        </div> -->
        <div class="col-lg-3 col-md-3 col-sm-3 col-mbl-view mbl-style">
          <!-- <label class="">Select Shift Period</label> -->
          <label class="font-14 mbl_lbl"><%= t("views.right_panel.detail.from") %></label>
          <input data-behaviour='datepicker' class="form-control datepicker m-t-3" name="from" id="from" type="text" placeholder="From date" style="height: 34px;">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-mbl-view mbl-style">
          <label class="font-14 mbl_lbl"><%= t("views.right_panel.detail.to") %></label>
          <input data-behaviour='datepicker' class="form-control datepicker m-t-3" name="to" id="to" type="text" placeholder="To date" style="height: 34px;">
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
          <label class="font-14 mbl_lbl"><%= t :commissioner %></label>
          <select class="form-control" name="commissioner" id="commissioner" style="height: 37px;">
            <option value=""></option>
            <% @commissioner.each do |c| %>
            <% if @com_id == c.id %>
            <option value="<%= c.id %>" selected><%= c.name %></option>
            <% else %>
            <option value="<%= c.id %>"><%= c.name %></option>
            <% end %> %>
            <% end %>
          </select>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2 margin-top-20 mbl-right-btn mbl-style">
          <br>
          <input type="submit" value="Generate Report" class='btn btn-info wave-effects'>
        </div>
        <!-- <div class="col-lg-2 col-md-2 col-sm-2 margin-top-20">
          <input type="button" value="Clear Filter" id="clear_filter" class='btn btn-danger'>
        </div> -->
      </div>
      <% end %>
      <% end %>
    </div>
<!-- <script type="text/javascript">

    $(document).ready(function () {

        $('#commissioner').select2({
            placeholder: 'Select Commissioner'
        });

        $('#clear_filter').click(function () {
            $('#daterange').val('');
            $('#commissioner').val('').text('');
        });

        $('input[name="daterange"]').daterangepicker({
                autoUpdateInput: false,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                locale: {
                    format: 'YYYY-MM-DD'
                }
            },
            function (start, end, label) {
                $('input[name="daterange"]').val(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
            });

        $('input[name="daterange"]').on('apply.daterangepicker', function (ev, picker) {
            $('input[name="daterange"]').val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));

            from_date = picker.startDate.format('YYYY-MM-DD 00:00:00');
            to_date = picker.endDate.format('YYYY-MM-DD 23:59:59');
        });

        $('input[name="daterange"]').on('cancel.daterangepicker', function (ev, picker) {
            $('input[name="daterange"]').val('');
        });

    });

</script>
 -->
