@extends('portal.layouts.app')

@section('title', 'Portal Users')
@section('subtitle', number_format($users->total()).' accounts across the three roles')

@section('actions')
    <a href="{{ route('users.create') }}"
       class="btn-primary btn-sm">Add user</a>
@endsection

@section('content')

    <x-card>
        <form method="GET" class="flex flex-wrap items-end gap-3">
            <div class="min-w-56 flex-1">
                <label class="field-label">Search</label>
                <input type="search" name="q" value="{{ request('q') }}" placeholder="Name or email"
                       class="field">
            </div>
            <div>
                <label class="field-label">Role</label>
                <select name="role" class="field">
                    <option value="">All</option>
                    @foreach ($roles as $value => $label)
                        <option value="{{ $value }}" @selected(request('role') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <button class="btn-primary">Filter</button>
        </form>
    </x-card>

    <x-card :padded="false">
        <div class="overflow-x-auto">
            <table class="data-table">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>Organisation</th>
                    <th>Last login</th>
                    <th>Status</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                @foreach ($users as $user)
                    <tr>
                        <td>
                            {{ $user->name }}
                            <span class="block text-xs text-slate-400">{{ $user->designation ?? $user->employee_id }}</span>
                        </td>
                        <td class="text-xs">{{ $user->email }}</td>
                        <td><x-badge :variant="$user->role->badgeClass()">{{ $user->role->label() }}</x-badge></td>
                        <td class="text-xs text-slate-500">{{ $user->organisation }}</td>
                        <td class="text-xs text-slate-500">{{ $user->last_login_at?->format('d M Y H:i') ?? 'Never' }}</td>
                        <td>
                            <x-badge :variant="$user->is_active ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-200 text-slate-600'">
                                {{ $user->is_active ? 'Active' : 'Inactive' }}
                            </x-badge>
                        </td>
                        <td class="text-right">
                            <a href="{{ route('users.edit', $user) }}" class="text-xs font-semibold text-brand-600 hover:underline">Edit</a>
                            @unless ($user->is(auth()->user()))
                                <form method="POST" action="{{ route('users.destroy', $user) }}" class="ml-2 inline"
                                      onsubmit="return confirm('Deactivate {{ $user->name }}?')">
                                    @csrf @method('DELETE')
                                    <button class="text-xs font-semibold text-rose-600 hover:underline">Deactivate</button>
                                </form>
                            @endunless
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>

        @if ($users->hasPages())
            <div class="border-t border-slate-100 px-5 py-3">{{ $users->links() }}</div>
        @endif
    </x-card>

@endsection