@extends('layouts.app')
@section('title', __('menu.users'))

@section('content')
<div class="card shadow-sm">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <span class="fw-bold"><i class="bi bi-person-badge me-1"></i> {{ __('menu.users') }}</span>
        <a href="{{ route('admin.users.create') }}" class="btn btn-primary btn-sm"><i class="bi bi-plus-lg"></i> {{ __('app.create') }}</a>
    </div>
    <div class="card-body">
        <table class="table table-hover table-striped w-100" id="users-table">
            <thead class="table-light">
                <tr>
                    <th>#</th><th>{{ __('app.name') }}</th><th>{{ __('app.email') }}</th>
                    <th>Job</th><th>{{ __('app.roles') }}</th><th>Active</th><th>{{ __('app.actions') }}</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    $('#users-table').DataTable(Object.assign({}, window.dtDefaults, {
        ajax: '{{ route('admin.users.data') }}',
        columns: [
            { data: 'id' },
            { data: 'name' },
            { data: 'email' },
            { data: 'job_title' },
            { data: 'roles', orderable: false, searchable: false },
            { data: 'is_active', orderable: false, searchable: false },
            { data: 'actions', orderable: false, searchable: false },
        ],
    }));
});
</script>
@endpush