@extends('layouts.app')

@section('content')
<div class="col-md-12">
    <div class="row">
        <div style="padding: 20px;">
            <a href="{{route("roles.create")}}" class="btn btn-success">Add Role</a>
        </div>
        <div class="cont-inner-wrap">
            <div class="page-tittleBox">
                <div class="caption pull-left">
                    <h2 class="pageHead">Permissions</h2>
                </div>
                
            </div>
            <div class="cont-dtsBox">
                <div class="table-wrap">
                    <table class="table table-striped account_tblWrap">
                        <thead>
                            <tr>
                                <th>Name </th>
                                <th>Permission </th>
                                <th>Action </th>
                            </tr>
                        </thead>
                        <!--Table head-->

                        <!--Table body-->
                        <tbody>
                            @foreach($roles as $role)
                            <tr>
                                <td style="width: 3%">{{ucfirst($role->name)}}</td>
                                <td class="permission_lists">
                                    @php
                                    $permission = '<span style="border: 2px solid #52bfb8;padding: 5px;margin: 5px;">' .implode('</span><span style="border: 2px solid #52bfb8;padding: 5px;margin: 5px;">',$role->permissions()->pluck('name')->toArray()). '</span>';
                                    @endphp
                                    {!!$permission!!}
                                </td>
                                <td style="width: 2%">
                                    <a href="{{ URL::to('roles/'.$role->id.'/edit') }}" class="">Edit</a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                        <!--Table body-->
                    </table>
                    <!--Table-->
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('admin_css')
<style>
    .account_tblWrap span{
        float: left;
    }
</style>
@stop
@section('admin_js')
@stop