@extends('layouts.app')
@section('title', 'الأدوار والصلاحيات')
@section('breadcrumb')<li class="breadcrumb-item active">الأدوار والصلاحيات</li>@endsection

@section('page_actions')
    @can('roles.create')
        <a href="{{ route('roles.create') }}" class="btn btn-primary"><i class="fa-solid fa-plus ms-2"></i>دور جديد</a>
    @endcan
@endsection

@section('content')
<div class="card">
    <div class="card-header"><span><i class="fa-solid fa-lock text-primary ms-2"></i>الأدوار</span></div>
    <div class="card-body">
        <x-datatable id="rolesTable" :headers="['#', 'الدور', 'عدد الصلاحيات', 'عدد المستخدمين', 'الإجراءات']"/>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    $('#rolesTable').DataTable(dtDefaults({
        ajax: '{{ route('roles.index') }}',
        order: [[0, 'asc']],
        columns: [
            { data: 'id', name: 'id', className: 'text-center', width: '50px' },
            { data: 'name', name: 'name' },
            { data: 'permissions_count', name: 'permissions_count', className: 'text-center', searchable: false },
            { data: 'users_count', name: 'users_count', className: 'text-center', searchable: false },
            { data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-center', width: '110px' },
        ],
    }));
});
</script>
@endpush