@extends('layouts.app')
@section('title', 'المستخدمون')
@section('breadcrumb')<li class="breadcrumb-item active">المستخدمون</li>@endsection

@section('page_actions')
    @can('users.create')
        <a href="{{ route('users.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-user-shield text-primary ms-2"></i>مستخدمو النظام</span></div>
    <div class="card-body">
        <x-datatable id="usersTable" :headers="['#', 'الاسم', 'البريد الإلكتروني', 'الجوال', 'المسمى الوظيفي', 'الدور', 'آخر دخول', 'الحالة', 'الإجراءات']"/>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    $('#usersTable').DataTable(dtDefaults({
        ajax: '{{ route('users.index') }}',
        columns: [
            { data: 'id', name: 'id', className: 'text-center', width: '50px' },
            { data: 'name', name: 'name' },
            { data: 'email', name: 'email' },
            { data: 'phone', name: 'phone' },
            { data: 'job_title', name: 'job_title' },
            { data: 'roles_list', name: 'roles.name', orderable: false },
            { data: 'last_login_at', name: 'last_login_at' },
            { data: 'status', name: 'is_active', className: 'text-center' },
            { data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-center', width: '110px' },
        ],
    }));
});
</script>
@endpush