<div class="row" style="width: 100%;height:700px;margin:0px;padding: 0px;margin-top: 20px;" >
  <div class="col-md-12" style="padding: 0px;">
    <div id="table-resources" style="height: 100%;overflow-y: auto;width: 100%;">
    </div>
    <div class="py-5" align="right">
      <button type="button" class="btn btn-sm btn-send btn-send-info-resources"><%= _("Send") %></button>
    </div>
  </div>
</div>
<script>
    var menuTitleFormatter = function(cell, formatterParams, onRendered){
        var dropdown =  document.createElement("div");
        dropdown.classList.add("row");
        dropdown.innerHTML = "<input type='checkbox' id='selected-all-table'>";

        var title = document.createElement("span");
        title.innerHTML = cell.getValue();
        dropdown.appendChild(title);
        return dropdown;
    };

    <% data = [] %>
    <% Rails.application.routes.routes.each do |route| %>
      <% info = route.defaults %>
      <% if info[:controller] && !(info[:controller].include?("rails") || info[:controller].include?("auth")) %>
        <% data << {name: info[:controller].to_s.upcase.gsub("/", "_") + "_" + info[:action].to_s.upcase} %>
      <% end %>
    <% end %>

    var data = <%= data.to_json.html_safe %>;
    var selected = <%= @security_config.security_config_resources.map{|s| s.resource_name}.to_json.html_safe %>;

    var table = new Tabulator("#table-resources", {
        data: data,
        columns:[
            {title:"Resources for <%= @security_config.name %>", field:"name", sorter:"string", width: "100%", headerFilter:"input", titleFormatter: menuTitleFormatter}
        ],
        footerElement:("<div class='tabulator-footer'>Count: <span class='count-number'>" +  data.length + "/" + data.length + "</span></div>"),
        height:"80%",
        selectable:true,
        responsiveLayout:"hide",
        dataFiltered:function(data, field, type, value){
          $("#table-resources .tabulator-footer .count-number").text(this.getSelectedData().length + "/" + this.getData().length);
        },
        rowSelectionChanged:function(data, rows){
            //update selected row counter on selection change
            $("#table-resources .tabulator-footer .count-number").text(this.getSelectedData().length + "/" + this.getData().length);
        },
        dataLoaded:function(data){
            for (let i in selected){
                this.selectRow(this.getRows().filter(row => row.getData().name == selected[i]))
            }
        },

    });

    //select row on "select all" button click
    $("#selected-all-table").click(function(){
        if($(this).prop("checked")){
            table.selectRow();
        }else{
            table.deselectRow();
        }
    });

    $(".btn-send-info-vehicles").click(function(){
        showLoadingImg();
        let selected_data = table.getSelectedData();
        let params = {
          utf8: "✓",
          authenticity_token: "<%= form_authenticity_token %>",
          security_config_resource: {
              resources_name: []
          }
        }
        for(let i in selected_data){
            params.security_config_resource.resources_name.push(selected_data[i].name);
        }

        $.post("<%= security_config_resources_path(@security_config) %>", params, function(data){
            hideLoadingImg();
        });

    });
</script>
