@extends('admin.layouts.master')
@section('title', 'User Access Control')

@section('content')
<div class="page-content-wrapper"><div class="content-container"><div class="page-content">
    <div class="content-header d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0"><i class="ti ti-users me-1"></i> User Access Control</h4>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <table id="users-access-table" class="table table-bordered table-hover w-100">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Roles</th>
                        <th>Direct Permissions</th>
                        <th>Created</th>
                        <th>Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div></div></div>
@endsection

@push('scripts')
<script>
$(function () {
    $('#users-access-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.8/i18n/en-GB.json' },
        ajax: '{{ route('admin.security.users.index') }}',
        columns: [
            {data: 'id'},
            {data: 'name'},
            {data: 'email'},
            {data: 'roles'},
            {data: 'direct_permissions_count', className: 'text-center'},
            {data: 'created_at'},
            {data: 'actions', orderable: false, searchable: false},
        ]
    });
});
</script>
@endpush