@extends ('main_layout')

@section ('title') Usuarios Registrados @stop

@section ('content')

<div class="well">
    <h1>Usuarios Registrados</h1>
    <hr></hr>
    <br />
    <a href="{{ route('users.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 de Usuario</th>
                <th>Nombre</th>
                <th>E-mail</th>
                <th>Estado</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('users.datatable') }}",

        "aaSorting": [[ 1, "asc" ]],
        "aoColumns": [
            { 'mData':'id', 'sWidth': '10%' },
            { 'mData':'username', 'sClass': 'center' },
            { 'mData':'name', 'sClass': 'center' },
            { 'mData':'email', 'sClass': 'center' },
            { 'mData':'state_id', 'sClass': 'center', 'sWidth': '5%', "bSortable": false,"bSearchable": false },
            { 'mData':'operations', 'sWidth': '10%', 'sClass': 'center', "bSortable": false,"bSearchable": false }
        ],
        "fnRowCallback":function( nRow, aData, iDataIndex ) {
            //console.log(aData.state_id);
            if (aData.stand_by == '1') {
                $('td:eq(4)', nRow).html( '<a href="users/activate/'+aData.id+'" class="btn btn-default btn-xs"" title="Activar"><span class="glyphicon glyphicon-off" style="color:red"></span></a>' ); 
            } else {
                if ( aData.state_id == '1' ) {
                    $('td:eq(4)', nRow).html( '<a href="users/deactivate/'+aData.id+'" class="btn btn-default btn-xs" title="Desactivar"><span class="glyphicon glyphicon-ok" style="color:green"></span></a>' );  
                } else {
                    $('td:eq(4)', nRow).html( '<a href="users/activate/'+aData.id+'" class="btn btn-default btn-xs"" title="Activar"><span class="glyphicon glyphicon-remove" style="color:red"></span></a>' );  
                }    
            }

            
            if (aData.role_id == '1') {
                $('td:eq(5)', nRow).html( '<div class="btn-group btn-group-xs" role="group"><a class="btn btn-warning btn-xs" title="Editar" href="users/'+aData.id+'/edit"><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