<div class="row" style="width: 100%;margin:0px;padding: 0px;" >
  <% if current_user.profile != "site user" || current_user.user_admin %>
    <div class="col-md-12" style="padding: 0px;">
      <div id="table-scroll1" class="table-scroll">
        <div id="table-clients" style="overflow-y: auto;width: 100%;">
          <h3><%= _("customers") %></h3>
          <div id="jstree"></div>
        </div>
      </div>
    </div>

    <form action="<%= assign_clients_user_path %>" method="post">
      <input type="hidden" name="data" id="data_value">
      <input type="hidden" name="id" value="<%= @user.id %>">
      <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
    </form>

    <button class="btn btn-sm btn-send save_clients"><%= _("Save") %></button>
    <script>
        state_selected = {};
        $(".save_clients").click(function(){
            $("#data_value").val(btoa(JSON.stringify(state_selected)));
            $("#data_value").parent().submit();
        });

        $('#jstree').jstree({'plugins':["wholerow","checkbox"], 'core' : {
                'data' : [
                    <% @clients.each do |client| %>
                    { "text" : "<%= client.full_name %>", id: "pclient_<%= client.id %>",
                        "children" : [
                            <% client.groups.each do |group| %>
                            { "text" : "<%= group.name %>", id: "client_<%= client.id %>_pgroup_<%= group.id %>",
                                "children" : [
                                    <% group.vehicles.includes(:device).each do |vehicle| %>
                                      <% if vehicle.device.present? %>
                                        { "text" : "<%= vehicle.name %>", "state" : { "selected" : <%= @user.has_access_to_device(vehicle.device.id) %> }, "icon" : "", id: "client_<%= client.id %>_group_<%= group.id %>_device_<%= vehicle.device.id %>" },
                                      <% end %>
                                    <% end %>
                                ],
                            },
                            <% end %>
                        ],
                    },
                    <% end %>
                ]
            }});
        $('#jstree').on("changed.jstree", function (e, data) {
            selected = {
                clients: data.selected.filter(s => s.includes("pclient")),
                groups: data.selected.filter(s => s.includes("pgroup")),
                devices: data.selected.filter(s => s.includes("device")),
            };

            selected.clients.forEach(function(part, index, theArray) {
                theArray[index] = part.split("_")[1];
                //selected.groups = selected.groups.filter(s => !s.includes("client_" + theArray[index]));
                //selected.devices = selected.devices.filter(s => !s.includes("client_" + theArray[index]));
            });

            selected.groups.forEach(function(part, index, theArray) {
                theArray[index] = part.split("_")[1];
                //selected.devices = selected.devices.filter(s => !s.includes("group_" + theArray[index]));
            });

            selected.devices.forEach(function(part, index, theArray) {
                theArray[index] = part.split("_")[5];
            });

            state_selected = selected;
        });
    </script>
  <% end %>
</div>
