<div class="modal fade" id="form_geofence_modal" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalLabel"
     aria-hidden="true">
  <div class="modal-dialog" role="document" style="max-width: 800px;min-width: 600px !important;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><%= _("Assign") %> <%= t("activerecord.models.geofence") %></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <%= form_tag(assign_geofences_to_device_post_geofences_path(@device), method: "POST", remote: true) do %>
        <div class="field">
          <div class="row">
            <div class="col-md-6 col-xs-6 col-sm-6 px-7">
              <%= label_tag 'assign_geofence[action]', _("Action") %>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 col-xs-6 col-sm-6 px-7">
              <%= select_tag 'assign_geofence[action]', options_for_select(Geofence::ACTIONS), value: nil, style: "width: 100%;" %>
            </div>
          </div>
        </div>

        <div class="field">
          <div class="row">
            <div class="col-md-6 col-xs-6 col-sm-6 px-7">
              <div class="row">
                <div class="col-md-6 col-xs-6 col-sm-6">
                  <%= label_tag 'assign_geofence[time_in]', _("Time in (minutes)") %>
                </div>
                <div class="col-md-6 col-xs-6 col-sm-6">
                  <%= label_tag 'assign_geofence[time_out]', _("Time out (minutes)") %>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-xs-6 col-sm-6 px-7">
              <%= label_tag 'assign_geofence[days]', _("Days/Time") %>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 col-xs-6 col-sm-6 px-7">
              <div class="row">
                <div class="col-md-6 col-xs-6 col-sm-6">
                  <%= number_field_tag "assign_geofence[time_in]", nil %>
                </div>
                <div class="col-md-6 col-xs-6 col-sm-6">
                  <%= number_field_tag "assign_geofence[time_out]", nil %>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-xs-6 col-sm-6 px-7">
              <%= Date::DAYNAMES.rotate(1).each_with_index.map {|d, i| check_box_tag("assign_geofence[days][]", i, :style => "margin-left: 10px;") + d[0] + "   "}.join(" ").html_safe %>
            </div>
          </div>
        </div>

        <div class="field">
          <div class="row">
            <div class="col-md-6 col-xs-6 col-sm-6 px-7">
              <div class="row">
                <div class="col-md-6 col-xs-6 col-sm-6">
                  <%= label_tag 'assign_geofence[min_speed]', _("Min Speed (kph)") %>
                </div>
                <div class="col-md-6 col-xs-6 col-sm-6">
                  <%= label_tag 'assign_geofence[max_speed]', _("Max Speed (kph)") %>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-xs-6 col-sm-6 px-7">
              <div class="row">
                <div class="col-md-6 col-xs-6 col-sm-6">
                  <%= label_tag 'assign_geofence[start_time]', _("Start time") %>
                </div>
                <div class="col-md-6 col-xs-6 col-sm-6">
                  <%= label_tag 'assign_geofence[end_time]', _("End time") %>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 col-xs-6 col-sm-6 px-7">
              <div class="row">
                <div class="col-md-6 col-xs-6 col-sm-6">
                  <%= number_field_tag 'assign_geofence[min_speed]', nil %>
                </div>
                <div class="col-md-6 col-xs-6 col-sm-6">
                  <%= number_field_tag 'assign_geofence[max_speed]', nil %>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-xs-6 col-sm-6 px-7">
              <div class="row">
                <div class="col-md-6 col-xs-6 col-sm-6">
                  <%= time_field_tag "assign_geofence[start_time]", nil %>
                </div>
                <div class="col-md-6 col-xs-6 col-sm-6">
                  <%= time_field_tag "assign_geofence[end_time]", nil %>
                </div>
              </div>
            </div>
          </div>
          <br>
          <div class="row">
            <div class="col-md-6 col-xs-6 col-sm-6 px-7">
              <%= label_tag 'assign_geofence[generate_alert]', _("Generate alert?") %>
              <%= check_box_tag("assign_geofence[generate_alert]", nil) %>
            </div>
          </div>
          <hr>
          <br>
          <div class="row">
            <div class="col-md-6 col-xs-6 col-sm-6 px-7">
              <h4><%= _("Geofences") %></h4>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12 px-7">
              <table id="table_vehicles_to_assign" class="table-striped table-hover">
                <thead>
                <tr>
                  <th><%= _("Geofences") %></th>
                </tr>
                </thead>
                <tbody>
                <% used_geofences = @device.device_geofences.map { |d| d.geofence.id } %>
                <% Geofence.where(client_id: current_user.client_id).where.not(id: used_geofences).each do |geofence| %>
                  <tr>
                    <td>
                      <%= check_box_tag("assign_device[geofence][]", geofence.id,
                                        class: "devices") %>
                      <%= geofence.name %>
                    </td>
                  </tr>
                <% end %>
                </tbody>
              </table>
              <div class="row form-errors">
                <div class="col-md-12 col-xs-12 col-sm-6 px-7">
                  <ul></ul>
                </div>
              </div>
            </div>
          </div>

          <div class="modal-footer">
            <%= render "shared/loading" %>
            <button type="button" class="btn-filter btn btn-light btn-sm fuse-ripple-ready" data-dismiss="modal"><%= t("utils.cancel_button") %></button>
            <button type="submit" class="btn btn-sm btn-send"><%= t("utils.send_button") %></button>
          </div>
      <% end %>
      </div>
    </div>
  </div>
</div>
  <style>
    input[name='assign_geofence[days][]'] {
      margin-left: 10px;
    }
  </style>
  <script>
    hideLoadingImg();
    $('#form_geofence_modal').on("hidden.bs.modal", function () {
      showLoadingImg();
      $.get("<%= params[:url_refresh].blank? ? geofences_path : params[:url_refresh] %>.js?<%= request.query_parameters.to_query %>", function () {
        hideLoadingImg();
        loadHideColumnSelectorTable();
      });
    });

    $(".btn.btn-send").click(function () {
      showLoadingImg();
    });

    $('#table_vehicles_to_assign').DataTable({
      responsive: true,
      order: [[0, "desc"]],
      dom: 'rtl<"dataTables_footer"ip>'
    });

  </script>
