<div class="modal fade" id="form_vehicle_modal" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalLabel"
     aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><%= t("activerecord.models.vehicle") %></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <%= form_with(model: [@group, @vehicle], remote: true) do |form| %>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link btn fuse-ripple-ready active show" id="general-tab" data-toggle="tab" href="#general-tab-pane" role="tab" aria-controls="general-tab-pane" aria-expanded="true" aria-selected="true"><%= _("General") %></a>
          </li>
          <li class="nav-item">
            <a class="nav-link btn fuse-ripple-ready" id="config-track-tab" data-toggle="tab" href="#config-track-tab-pane" role="tab" aria-controls="config-track-tab-pane" aria-selected="false"><%= _("Config Track") %></a>
          </li>
        </ul>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane fade p-6" id="general-tab-pane" aria-labelledby="general-tab">
            <div class="field">
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.label :name %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.text_field :name, id: "vehicle_name"  %>
                </div>
              </div>
            </div>
            <div class="field">
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.label :vin %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.text_field :vin, id: "vehicle_vin"  %>
                </div>
              </div>
            </div>
            <div class="field">
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.label :year %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.text_field :year, id: "vehicle_year"  %>
                </div>
              </div>
            </div>
            <div class="field">
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.label :make %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.text_field :make, id: "vehicle_make"  %>
                </div>
              </div>
            </div>
            <div class="field">
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.label :model %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.text_field :model, id: "vehicle_model"  %>
                </div>
              </div>
            </div>
            <div class="field">
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.label :color %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.text_field :color, id: "vehicle_color"  %>
                </div>
              </div>
            </div>
            <div class="field">
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.label :fuel_capacity %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.number_field :fuel_capacity, id: "vehicle_fuel_capacity", step: "0.1"  %>
                </div>
              </div>
            </div>

            <div class="field">
              <div class="row">
                <div class="col-md-6 col-xs-6 col-sm-6 px-7">
                  <%= form.label :soat_expire_date %>
                  <%= form.date_field :soat_expire_date, id: "vehicle_soat_expire_date"  %>
                </div>
                <div align="center" class="col-md-6 col-xs-6 col-sm-6 px-7">
                  <%= form.label :generate_soat_alert %>
                  <br>
                  <%= form.check_box :generate_soat_alert, id: "vehicle_generate_soat_alert"  %>
                </div>
              </div>
            </div>



            <div class="field">
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.label :description %>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                  <%= form.text_area :description, id: "vehicle_description"  %>
                  <script>
                      CKEDITOR.replace($("#vehicle_description")[0]);
                  </script>
                </div>
              </div>
            </div>
          </div>
          <div role="tabpanel" class="tab-pane fade p-6" id="config-track-tab-pane" aria-labelledby="config-track-tab">
            <%= form.fields_for @vehicle.device do |form2| %>
              <div class="field">
                <div class="row">
                  <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                    <%= form2.label :hardware_profile_id %>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                    <%= form2.select :hardware_profile_id, HardwareProfile.order(:id).map{|h|  [h.name, h.id]}, {}, {id: :device_hardware_profile, style: "width: 100%;"} %>
                  </div>
                </div>
              </div>
              <div class="field">
                <div class="row">
                  <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                    <%= form.label :marker_url %>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12 col-xs-12 col-sm-12 px-7" style="display: flex;">
                    <%= form.select :marker_url, get_markers_availables.map{|m| [m[1], m[0]]}, {}, {class: "select_marker", id: :vehicle_marker_url} %>
                    <div align="center" class="content-marker">
                      <% if @vehicle.marker_url %>
                        <img src="<%= asset_path(@vehicle.marker_url) %>" style="width: 20px;">
                      <% else %>
                        <img src="" style="width: 20px;">
                      <% end %>
                    </div>
                  </div>
                </div>
              </div>
              <div class="field">
                <div class="row">
                  <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                    <%= form2.label :name %>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                    <%= form2.text_field :name, id: "device_name"  %>
                  </div>
                </div>
              </div>
              <div class="field">
                <div class="row">
                  <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                    <%= form2.label :uniqueid %>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                    <%= form2.text_field :uniqueid, id: "device_uniqueid"  %>
                  </div>
                </div>
              </div>
              <div class="field">
                <div class="row">
                  <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                    <%= form2.label :phone %>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                    <%= form2.text_field :phone, id: "device_phone"  %>
                  </div>
                </div>
              </div>
              <div class="field">
                <div class="row">
                  <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                    <%= form2.label :model %>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12 col-xs-12 col-sm-12 px-7">
                    <%= form2.text_field :model, id: "device_model"  %>
                  </div>
                </div>
              </div>
            <% end %>
          </div>
        </div>
        <div class="row form-errors">
          <div class="col-md-12 col-xs-12 col-sm-12 px-7">
            <ul></ul>
          </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>
<script>
    hideLoadingImg();

    $('#form_vehicle_modal').on("hidden.bs.modal", function () {
        showLoadingImg();
        $.get("<%= group_vehicles_path @group %>.js?<%= request.query_parameters.to_query %>", function(){
            hideLoadingImg();
            loadHideColumnSelectorTable();
        });
    });

    $(".btn.btn-send").click(function(){
        showLoadingImg();
    });


    setTimeout("$('.nav.nav-tabs .nav-item:last-child a:last-child').click();$('.nav.nav-tabs .nav-item:first-child a:first-child').click();", 300);
</script>

<script>
    $(".select_marker").change(function(){
        $(this).parent().find(".content-marker").html('<img src="/assets/images/' + this.value + '" style="width: 20px;">')
    });
    $(".select_marker").change();
</script>

<style>
  .data_config .field label{
    font-weight: bold;
    margin-top: 10px;
  }
  .data_config .field input:not([type='checkbox']),
  .data_config .field select{
    width: 400px;
  }
  .content-marker{
    height: 28px;
    width: 35px;
    border-width:0px;
    vertical-align: middle;
    background-color: #eeeeee;
    border: 1px solid #cccccc;
  }
</style>
<%# javascript_include_tag 'dropzone' %>
