@extends ('main_layout')

@section ('title') Roles Registrados @stop

@section ('content')

<div class="well">
    <h1>Roles Registrados</h1>
    <hr></hr>
    <br />
    <a href="{{ route('roles.create') }}" class="btn btn-primary" >Nuevo</a>
    <br />
    <br />

    <table id="table" class="table table-striped table-bordered table-hover" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Id</th>
                <th>Nombre</th>
                <th>Descripción</th>
                <th>Acciones</th>
            </tr>
        </thead>
    </table>
</div>
@stop
@section('scripts')
<script type="text/javascript">
    
$(document).ready( function() {
    
    $('#table').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "{{ route('roles.datatable') }}",

        "aaSorting": [[ 1, "asc" ]],
        "aoColumns": [
            { 'mData':'id', 'sWidth': '10%' },
            { 'mData':'name', 'sClass': 'center' },
            { 'mData':'description', 'sClass': 'center' },
            { 'mData':'operations', 'sWidth': '10%', 'sClass': 'center', "bSortable": false,"bSearchable": false }
        ],
        "fnRowCallback":function( nRow, aData, iDataIndex ) {
            //console.log(aData.id);
            if ( aData.id == '1' ) {
                $('td:eq(3)', nRow).html( '<div class="btn-group btn-group-xs" role="group"><a class="btn btn-warning btn-xs" title="Editar" href="#" disabled><span class="glyphicon glyphicon-pencil"></span></a><a class="btn btn-primary btn-xs" title="Permisos" href="#" disabled><span class="glyphicon glyphicon-user"></span></a></div>' );  
            }
        }    
    }); 
} );

</script>
@stop