@extends('layout.padrao')
@section('title', 'List - Users x Menu')

@section('content')

    

    <div class="wrapper">
        <div class="table-responsive" style="overflow:clip; height:950px">
            <div id="toolbar">
                <!--Botão Novo-->
                @can('create', App\Usuario::class)
                    @include('include.btn_adicionar',["btn" => "userMenu"])
                @endcan              
            </div>
            <table class="table-striped text-center" id="table"
          data-toggle="table"
          data-search="true"
          data-detail-formatter="detailFormatter"
          data-page-list="[100, 200, 300, 400, all]"
          data-show-footer="true"
          data-show-refresh="true"
          data-click-to-select="true"
          data-show-fullscreen="true"
          data-toolbar="#toolbar"
          data-show-toggle="true"
          data-show-export="true"
          data-export-data-type="all"
          data-query-params="queryParams"
          data-url="/usuarioMenu/json"
          data-show-columns="true" >
          <thead>
            <tr class="trSuperBlue">
                <th class="icon-action" data-field="id" data-formatter="operateFormatter" ></th>
                <th data-field="nome" data-sortable="true">User Name</th>
                <th data-field="login" data-sortable="true">User Login</th>
                <th data-field="login" data-sortable="true">User Login</th>
                <th data-field="clients.name" data-sortable="true">Company </th>
                <th data-field="menus" data-sortable="true" data-formatter="allMenus">Menu</th>
            </tr>
          </thead>
      </table>

           
        </div>
    </div>
    

    
        @include('bibliotecas.floattheadOverflow')
        <!-- add Model -->
        @include('include.modal_adicionar', ["formulario" => "UserMenu"])
        <!-- Delete Model -->
        @include('include.modal_deletar', ["rota" => "userMenu"])
        @include('bibliotecas.bootstrapTable2')
    <script>
        var $table = $('#table')
        var $button = $('#button')
      

        $(function() {
            $table.bootstrapTable({
                            cache: false,
                            height: 1000,
                            striped: true,
                            pagination: false,
                           
            });
        })
        function operateFormatter(value, row, index) {
            return [
            '<a class="icone-padding" href="/usuarios/'+value+'/editar"  title="Edit"><i class="fas fa-pencil-alt"></i></a>'
            ].join('')
        }
        function allMenus(value, row, index) {
            let $menu ='';
            $.each(value, function (key, value) {
                $menu = $menu + ' *' + value['nmMenu'] ;
            })
            console.log($menu  +'menu');

            return [
                $menu
            ].join('')
           

        }
    </script>
@endsection