@extends('app')
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Role Management
        </h1>
        <ol class="breadcrumb">
            <li><a href="{{url('/')}}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li>Permission</li>
            <li class="active">Roles</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- SELECT2 EXAMPLE -->
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">
                    <a class="btn btn-info btn-md" data-toggle="modal" href="#modal" onclick="loadRouteModal('{{route('role.add')}}')">
                        <i class="fa fa-plus"></i>&nbsp;
                        Add Role
                    </a>
                </h3>

            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="row">
                    <div class="col-md-12">
                            <table id="roleDatatable" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Role ID</th>
                                    <th>Role Name</th>
                                    <th>Created At</th>
                                    <th>Updated At</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @if(count($roles) > 0)
                                    @foreach($roles as $key => $role)
                                        <tr>
                                            <td>{{$role->id}}</td>
                                            <td>{{$role->name}}</td>
                                            <td>
                                                {{$role->created_at}}
                                            </td>
                                            <td>
                                                {{$role->updated_at}}
                                            </td>
                                            <td>
                                                <a href="{{ route('role.edit', ['role' => $role->name, 'id' => $role->id]) }}"
                                                   class="btn btn-info btn-xs" id="reference_{{$role->id}}">
                                                    <i class="fa fa-edit" title="Edit"></i>
                                                </a>
                                                <a href="{{ route('role.remove', ['role' => $role->name, 'id' => $role->id]) }}" class="btn btn-danger btn-xs">
                                                    <i class="fa fa-trash" title="Delete"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                                </tbody>
                                <tfoot>
                                <tr>
                                    <th>Role ID</th>
                                    <th>Role Name</th>
                                    <th>Created At</th>
                                    <th>Updated At</th>
                                    <th>Action</th>
                                </tr>
                                </tfoot>
                            </table>
                    </div>
                </div>
            </div>
            <div class="box-footer">
            </div>
        </div>
    </section>

@endsection
@section('script')
    <script type="text/javascript">
        $(document).ready(function () {
            $('#roleDatatable')
                .addClass('nowrap')
                .dataTable({
                    columnDefs: [
                        {targets: [-1, -3], className: 'dt-body-right'}
                    ]
                });

        });
    </script>
@endsection