@use('App\Enums\PermissionName')
@use('App\Enums\RoleName')

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Users') }}
        </h2>
    </x-slot>

    <div class="py-8">
        <div class="flex flex-col gap-6 px-4 sm:px-6 lg:px-8">
            <x-toast :message="session('status')" />

            <div class="overflow-hidden rounded-2xl bg-white shadow-raised">
                <x-table-toolbar>
                    <x-table-filter table="users-table" name="role" :label="__('Role')">
                        <option value="">{{ __('All roles') }}</option>

                        @foreach ($roles as $role)
                            <option value="{{ $role }}">{{ RoleName::labelFor($role) }}</option>
                        @endforeach
                    </x-table-filter>

                    @if ($locations->isNotEmpty())
                        <x-table-filter table="users-table" name="location_id" :label="__('Location')">
                            <option value="">{{ __('All locations') }}</option>

                            @foreach ($locations as $location)
                                <option value="{{ $location->id }}" @selected((string) request('location') === (string) $location->id)>{{ $location->name }}</option>
                            @endforeach
                        </x-table-filter>
                    @endif

                    <x-table-filter table="users-table" name="status" :label="__('Status')">
                        <option value="">{{ __('All') }}</option>
                        <option value="active">{{ __('Active') }}</option>
                        <option value="inactive">{{ __('Inactive') }}</option>
                    </x-table-filter>

                    @can(PermissionName::CreateUsers->value)
                        <x-slot name="actions">
                            <x-primary-button :href="route('users.create')">
                                <x-icon-plus />
                                {{ __('Add user') }}
                            </x-primary-button>
                        </x-slot>
                    @endcan
                </x-table-toolbar>

                <table
                    id="users-table"
                    data-datatable="{{ route('users.index') }}"
                    data-search-placeholder="{{ __('Search name, email or Emp ID...') }}"
                    data-columns="{{ json_encode([
                        ['data' => 'DT_RowIndex', 'title' => '#', 'orderable' => false, 'searchable' => false, 'className' => 'dt-number'],
                        ['data' => 'user', 'name' => 'name', 'title' => __('User')],
                        ['data' => 'employee_id', 'name' => 'employee_id', 'title' => __('Emp ID'), 'defaultContent' => '—'],
                        ['data' => 'role', 'title' => __('Role'), 'orderable' => false, 'searchable' => false],
                        ['data' => 'location', 'title' => __('Location'), 'orderable' => false, 'searchable' => false, 'defaultContent' => '—'],
                        ...(auth()->user()->can(PermissionName::ViewPayments->value) ? [['data' => 'salary', 'name' => 'salary', 'title' => __('Salary'), 'searchable' => false, 'defaultContent' => '—']] : []),
                        ['data' => 'status', 'name' => 'is_active', 'title' => __('Status'), 'searchable' => false],
                        ['data' => 'added', 'name' => 'created_at', 'title' => __('Added'), 'searchable' => false],
                        ['data' => 'actions', 'title' => __('Actions'), 'orderable' => false, 'searchable' => false, 'className' => 'dt-right'],
                    ]) }}"
                ></table>
            </div>
        </div>
    </div>
</x-app-layout>