@extends('layouts.admin-Lti')

@section('content')
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/"><span>Usuários <i class="fa fa-bags"></i></span></a></li>
<li class="breadcrumb-item active"><a><span>Lista</span></a></li>

</ol>


     <div class="card col-10 offset-1 no-shadow" >

        <div class="card-body">
<table id="example" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>Nr</th>

            <th>Nome</th>
            <th>email</th>
            <th>Papel</th>
            <th>A&ccedil;&otilde;es</th>
        </tr>
    </thead>
    <tbody>
        @foreach($usuario->get() as $key => $usuarioItem)


        <tr>

            <td>{{  $key+1  }}</td>

            <td>{{ $usuarioItem->name }}</td>
            <td>{{ $usuarioItem->email }}</td>
            <td>@if(!empty($usuarioItem->roles[0]))
{{ $usuarioItem->roles->first()->label
            }}
            @endif</td>
            <td>
            @can('Edit_user')


                <a class="btn btn-primary"  href="{{ route('Usuarios.edit', $usuarioItem->id) }}"><i class="fa fa-edit "  style="color:#fff"></i></a>
                @endcan
                 @can('Delete_user')


                <a class="btn btn-danger"  href="{{ route('Usuarios.destroy', $usuarioItem->id) }}"><i class="fa fa-trash "  style="color:#fff"></i></a>
               @endcan
                <a class="btn btn-outline-primary"  href="{{ route('Usuarios.show', $usuarioItem->id) }}"><i class="fa fa-eye-slash"  ></i></a>

            </td>

        </tr>
        @endforeach

    </tbody>
</table>

        </div>

		 </div
</section>








@push('script')
<script src="{{asset('Registo/js/script.min.js')}}" ></script>
<script src="{{asset('MyJs/datatableconfig.js')}}" ></script>
<script src="{{ asset('Datatable/js/jquery.dataTables.min.js')}}"></script>
<script src="{{ asset('Datatable/js/dataTables.buttons.min.js')}}"></script>
<script src="{{ asset('Datatable/js/buttons.flash.min.js')}}"></script>
<script src="{{ asset('Datatable/js/jszip.min.js')}}"></script>
<script src="{{ asset('Datatable/js/pdfmake.min.js')}}"></script>
<script src="{{ asset('Datatable/js/vfs_fonts.js')}}"></script>
<script src="{{ asset('Datatable/js/buttons.html5.min.js')}}"></script>
<script src="{{ asset('Datatable/js/buttons.print.min.js')}}"></script>
<script src="{{ asset('Datatable/js/buttons.colVis.min.js')}}"></script>
<script>
    $(document).ready(function() {

        $('#example').DataTable( {

            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": true,
            "info": false,
            "autoWidth": true,
            "lengthMenu": [[5,10,25,50,-1], [ 5,10,25,50,"All"]],
            language: {
              "lengthMenu": "visualizar _MENU_ ",
              "zeroRecords": "Nada foi encontado",
              "info": "mostrara pagina por pagina",
              "processing":     "processando..",
              "infoEmpty": "Nada tem ",
              "infoFiltered": "(filtered from _MAX_ total records)",
              "loadingRecords": "processando...",
              "search":         "pesquisar:",
              "paginate": {
          "first":      "primera",
          "last":       "ultima",
          "next":       "proxima",
          "previous":   " Anterior"
      },
          },
            initComplete: function () {
                this.api().columns([]).every( function () {
                    var column = this;
                    var select = $('<select  class="SelectorSerach"><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                        } );

                    column.data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                } );
            }
        } );




        // escoder colunas

    } );









</script>
@endpush

@push('style')
            <link rel="stylesheet" href="{{ asset('perfilView/assets/bootstrap/css/bootstrap.min.css')}}">
            <link rel="stylesheet" href="{{ asset('perfilView/assets/fonts/ionicons.min.css')}}">
            <link rel="stylesheet" href="{{ asset('perfilView/assets/css/styles.min.css')}}">
            @endpush
@endsection