@extends('layouts.app')

@section('title', __('auth::messages.users.title'))

@section('content')
    <x-page-header :title="__('auth::messages.users.title')">
        @can('create', \App\Models\User::class)
            <a href="{{ route('users.create') }}" class="btn btn-sm px-btn-primary">
                <i class="bi bi-plus-lg"></i> {{ __('auth::messages.users.create') }}
            </a>
        @endcan
    </x-page-header>

    <div class="px-panel p-3 p-md-4 mb-4">
        <form method="GET" action="{{ route('users.index') }}" data-clinic-filter class="row g-2 align-items-end">
            <div class="col-12 col-md-4">
                <label for="search" class="px-field-label">{{ __('common.search') }}</label>
                <input type="search" class="form-control px-input" id="search" name="search"
                       value="{{ $filters['search'] ?? '' }}"
                       placeholder="{{ __('auth::messages.fields.name') }} / {{ __('auth::messages.fields.email') }}">
            </div>

            <div class="col-6 col-md-2">
                <label for="status" class="px-field-label">{{ __('auth::messages.fields.status') }}</label>
                <select class="form-select px-select" id="status" name="status">
                    <option value="">—</option>
                    @foreach ($statuses as $status)
                        <option value="{{ $status->value }}" @selected(($filters['status'] ?? '') === $status->value)>
                            {{ $status->label() }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-6 col-md-3">
                <label for="role" class="px-field-label">{{ __('auth::messages.fields.roles') }}</label>
                <select class="form-select px-select" id="role" name="role">
                    <option value="">—</option>
                    @foreach ($roles as $role)
                        <option value="{{ $role->name }}" @selected(($filters['role'] ?? '') === $role->name)>
                            {{ __('roles.'.$role->name) }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-12 col-md-3 d-flex gap-2">
                <button type="submit" class="btn px-btn-ghost">{{ __('common.filter') }}</button>
                <a href="{{ route('users.index') }}" class="btn btn-link">{{ __('common.reset') }}</a>
            </div>
        </form>
    </div>

    <x-results>
    <div class="px-panel overflow-hidden">
        <div class="table-responsive">
            <table class="table px-table px-table--sticky align-middle mb-0">
                <thead>
                    <tr>
                        <th scope="col">{{ __('auth::messages.fields.name') }}</th>
                        <th scope="col">{{ __('auth::messages.fields.roles') }}</th>
                        <th scope="col">{{ __('auth::messages.fields.branch') }}</th>
                        <th scope="col">{{ __('auth::messages.fields.status') }}</th>
                        <th scope="col">{{ __('auth::messages.users.last_sign_in') }}</th>
                        <th scope="col" class="text-end">{{ __('common.actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($users as $user)
                        <tr>
                            <td>
                                <a href="{{ route('users.show', $user) }}" class="fw-medium">{{ $user->name }}</a>
                                <div class="px-hint">{{ $user->email }}</div>
                            </td>
                            <td>
                                @forelse ($user->roles as $role)
                                    <span class="px-pill px-pill--grey">{{ __('roles.'.$role->name) }}</span>
                                @empty
                                    <span class="px-hint">{{ __('auth::messages.users.no_roles') }}</span>
                                @endforelse
                            </td>
                            <td class="small">{{ $user->branch?->name ?? '—' }}</td>
                            <td>
                                {{--
                                    Status carries an icon as well as a colour.
                                    Roughly one man in twelve has a colour vision
                                    deficiency, and a row that only differs by hue
                                    is unreadable to them.
                                --}}
                                @php($tone = ['active' => 'px-pill--green', 'suspended' => 'px-pill--amber', 'inactive' => 'px-pill--grey'][$user->status] ?? 'px-pill--grey')
                                @php($icon = ['active' => 'bi-check-circle', 'suspended' => 'bi-pause-circle', 'inactive' => 'bi-slash-circle'][$user->status] ?? 'bi-circle')
                                <span class="px-pill {{ $tone }}">
                                    <i class="bi {{ $icon }}"></i> {{ __('users.status.'.$user->status) }}
                                </span>
                                @if ($user->isLocked())
                                    <span class="px-pill px-pill--red"><i class="bi bi-lock"></i></span>
                                @endif
                            </td>
                            <td class="px-hint">
                                {{ $user->last_login_at?->diffForHumans() ?? __('auth::messages.users.never_signed_in') }}
                            </td>
                            <td class="text-end">
                                @can('update', $user)
                                    <a href="{{ route('users.edit', $user) }}" class="btn btn-sm px-btn-ghost">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                @endcan
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6">
                                <div class="px-empty py-4">
                                    <div class="px-empty__art" aria-hidden="true">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                                             stroke-linecap="round" stroke-linejoin="round">
                                            <circle cx="9" cy="8" r="3.2" /><path d="M3 20a6 6 0 0 1 12 0M16.5 5.5a3 3 0 0 1 0 5.8M17 20a6 6 0 0 0-2-4.5" />
                                        </svg>
                                    </div>

                                    <p class="px-empty__title">{{ __('auth::messages.users.empty') }}</p>
                                    <p class="px-empty__text mb-0">{{ __('auth::messages.users.empty_text') }}</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if ($users->hasPages())
            <div class="px-pagination d-flex justify-content-center justify-content-md-end px-3 px-md-4 py-3 border-top"
                 style="border-color: var(--px-border) !important;">
                {{ $users->links() }}
            </div>
        @endif
    </div>
    </x-results>
@endsection