@inject('request', 'Illuminate\Http\Request')
@extends('layouts.index')

@section('content')
    <link rel="stylesheet" href="{{ asset('css/lib/datatable/dataTables.bootstrap.min.css')}}">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <h3 class="page-title">Roles</h3>
    <div class="panel panel-default">
        <div class="panel-body table-responsive">
            <table id="table" class="table table-bordered table-striped {{ count($roles) > 0 ? 'datatable' : '' }} dt-select">
                <thead>
                    <tr>
                        <th>Nombre</th>
                        <th>Permisos</th>
                        <th>Editar</th>
                        <th>Eliminar</th>
                    </tr>
                </thead>
                
                <tbody>
                    @if (count($roles) > 0)
                        @foreach ($roles as $role)
                            <tr data-entry-id="{{ $role->id }}">
                                <td>{{ $role->name }}</td>
                                <td>
                                    @foreach ($role->permissions()->pluck('name') as $permission)
                                        <span class="label label-info label-many">{{ $permission }},</span>
                                    @endforeach
                                </td>
                                <td>
                                    <a href="/roles/{{$role->id}}/edit" class="btn btn-xs btn-info">Editar</a>
                                </td>
                                <td>
                                    <a style="color: white" data-toggle="modal" data-target="#modal-delete-{{$role->id}}" class="btn btn-xs btn-danger">Eliminar</a>
                                    </button>
                                    <div class="modal fade" id="modal-delete-{{$role->id}}" role="dialog">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h4 class="modal-title">Eliminar Usuario</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <p>¿Desea eliminar el usuario <b>{{$role->name}}</b>?</p>
                                                </div>
                                                <div class="modal-footer">
                                                    {!!Form::open(['action' => ['Admin\RolesController@destroy', $role->id], 'method' => 'POST', 'class' => 'pull-right'])!!}
                                                        {{Form::hidden('_method', 'DELETE')}}
                                                        {{Form::submit('Eliminar', ['class' => 'btn btn-danger'])}}
                                                    {!!Form::close()!!}
                                                    <button type="button" class="btn btn-default btn-round" data-dismiss="modal">Cancelar</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="6">No existen roles</td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#table').DataTable();
        } );
    </script>
@stop