<div class="row">
  <div class="col-md-12 p-10">
    <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-4">
        <label><%= _("Client") %></label>
        <%= select_tag 'client_id', options_from_collection_for_select(@clients, 'id', 'full_name'), include_blank: true %>
      </div>
      <div class="col-md-4" style="border-left: 1px solid #bbbbbb;">
        <div class="row">
          <div class="col-md-2">
            <label><%= _("User") %></label>
          </div>
          <div class="col-md-6">
            <select id="users" name="user_id"></select>
          </div>
        </div>
          <div class="row">
            <div class="col-md-2">
              <label><%= _("Vehicle") %></label>
            </div>
            <div class="col-md-6">
              <select id="vehicles" name="vehicle_id"></select>

            </div>
          </div>
        </div>
      </div>
      <div class="col-md-2"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12" align="center">
      <img class="loading-image" style="width: 60px; display: none;" src="/assets/others/loading-2177facbb4a68594d9eefff6fb10f48f03f19fb90dcc1e2f69edf90889f4b109.gif">
      <div class="content-table container"></div>
    </div>
  </div>
</div>

<script>
  $("#client_id").change(function(e){
     $(".content-table").html("");
     $("." +
         "loading-image").show();
     $.get("<%= get_users_hardware_profiles_path %>", {client_id: this.value}, function(data){
         let users_select = $("#users");
         users_select.html("");
         users_select.append('<option value=""></option>');
         for(let i in data){
             let user = data[i];
             users_select.append('<option value="' + btoa(JSON.stringify(user)) + '">' + user.name + '</option>');
         }
     })
     $.get("<%= get_vehicles_hardware_profiles_path %>", {client_id: this.value}, function(data){
         let vehicles_select = $("#vehicles");
         vehicles_select.html("");
         vehicles_select.append('<option value=""></option>');
         for(let i in data){
             let vehicle = data[i];
             vehicles_select.append('<option value="' + btoa(JSON.stringify(vehicle)) + '">' + vehicle.name + '</option>');
         }
         $("." +
             "loading-image").hide();
     })
  })

  function getDataByUser(){
      if($("#vehicles").val() != "" && $("#users").val() != ""){
          $("." +
              "loading-image").show();
          let vehicle = JSON.parse(atob($("#vehicles").val()));
          let user = JSON.parse(atob($("#users").val()));
          $.get("<%= get_data_by_user_by_vehicle_hardware_profiles_path(:format => 'js') %>", {vehicle_id: vehicle.id, user_id: user.id}, function(data){
              $("." +
                  "loading-image").hide();
          });
      }
  }

  $("#users").change(function(e){
      getDataByUser();
  })

  $("#vehicles").change(function(e){
      getDataByUser();
  })

</script>
