@extends('backend.layouts.app')

@section('title') Roles @endsection
@section('toolbar')
   <!--begin::Card toolbar-->
   <div class="card-toolbar">
        @if(Auth::user()->can('add role'))
            <a href='{{ route('admin.roles.create') }}' class='btn btn-primary text-grey-800'><i class="fas fa-plus"></i> New Role</a>
        @endif
    </div>
    <!--end::Card toolbar-->
@endsection


@section('content')
    <!--begin::Card-->
    <div class="card">
        <!--begin::Card body-->
        <div class="card-body pt-0">
            <!--begin::Table-->
            <div class="table-responsive">
                <table id="data-table" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <!--end::Table-->
        </div>
        <!--end::Card body-->
    </div>
    <!--end::Card-->
@endsection

@section('scripts_lib')
<script>
    $('#data-table').DataTable({
        autoFill: true,
        processing: true,
        serverSide: true,
        search: {
            "caseInsensitive": true,
            "smart": true
        },
        ajax: {
            url: "{!! route('admin.roles.getData') !!}",
            type: "POST",
            dataType: "JSON"
        },
        columns: [
            {data: 'id', 'searchable': true, 'orderable': true, 'exportable': true, 'printable': true},
            {data: 'name', 'searchable': true, 'orderable': true, 'exportable': true, 'printable': true},
            {data: 'action', 'searchable': false, 'orderable': false, 'exportable': false, 'printable': false}
        ],
        dom: '<"d-flex justify-content-between"<f>>rt<"d-flex justify-content-between"<"d-flex align-items-center"<"me-3" l><i>><p>>'
    });
</script>
@endsection