@extends('backend.layouts.app')

@section('title') Administrators @endsection

@section('toolbar')
<!--begin::Card toolbar-->
<div class="card-toolbar">
     @if(Auth::user()->can('add admin'))
         <a href='{{ route('admin.admins.create') }}' class='btn btn-primary text-grey-800'><i class="fas fa-plus"></i> New Administrator</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>E-mail</th>
                            <th>Role</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.admins.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: 'email', 'searchable': true, 'orderable': true, 'exportable': true, 'printable': true},
            {data: 'role', '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