@extends('layouts.app')
@section('title', 'User Management')
@section('content')

  @include('partials.flash')

  <div class="flex flex-col md:flex-row md:items-center gap-3 mb-stack-lg">
    <form method="GET" action="{{ route('admin.users.index') }}" class="flex flex-wrap items-center gap-2 flex-1">
      <div class="relative flex-1 min-w-[200px]">
        <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-[20px]">search</span>
        <input type="text" name="q" value="{{ request('q') }}" placeholder="Search name or email…"
          class="w-full pl-10 pr-4 py-2.5 bg-surface-container rounded-lg border-none focus:ring-2 focus:ring-primary/20 text-body-md outline-none">
      </div>
      <select name="role" class="py-2.5 px-3 bg-surface-container rounded-lg border-none focus:ring-2 focus:ring-primary/20 text-body-md outline-none">
        <option value="">All roles</option>
        @foreach(['admin','hr','trainer','employee'] as $role)
          <option value="{{ $role }}" @selected(request('role') === $role)>{{ ucfirst($role) }}</option>
        @endforeach
      </select>
      <button type="submit" class="px-4 py-2.5 rounded-lg bg-surface-container-high text-on-surface-variant text-label-md font-label-md hover:bg-surface-container-highest">Filter</button>
    </form>
    <a href="{{ route('admin.users.create') }}"
       class="inline-flex items-center justify-center gap-1.5 bg-primary text-on-primary px-5 py-2.5 rounded-lg text-label-md font-label-md hover:opacity-90 transition-opacity whitespace-nowrap">
      <span class="material-symbols-outlined text-[20px]">person_add</span> New User
    </a>
  </div>

  <div class="surface-card rounded-xl overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full text-left min-w-[640px]">
        <thead class="bg-surface-container-high">
          <tr class="text-label-md font-label-md text-outline uppercase tracking-wide">
            <th class="px-5 py-3">User</th>
            <th class="px-5 py-3">Role</th>
            <th class="px-5 py-3">Location</th>
            <th class="px-5 py-3">Joined</th>
            <th class="px-5 py-3 text-right">Actions</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-outline-variant">
          @forelse($users as $user)
            @php
              $initials = collect(explode(' ', $user->name))->map(fn($n) => $n[0] ?? '')->take(2)->implode('');
              $role = $user->roles->first()?->name;
              $roleBadge = match($role) {
                'admin'   => 'bg-primary/10 text-primary',
                'hr'      => 'bg-secondary-container text-on-secondary-container',
                'trainer' => 'bg-surface-container-high text-secondary',
                default   => 'bg-surface-container-high text-on-surface-variant',
              };
            @endphp
            <tr class="text-body-md font-body-md text-on-surface">
              <td class="px-5 py-4">
                <div class="flex items-center gap-3">
                  <div class="w-10 h-10 rounded-full bg-secondary-container flex items-center justify-center text-primary font-bold shrink-0">{{ strtoupper($initials) }}</div>
                  <div>
                    <p class="font-semibold">{{ $user->name }}</p>
                    <p class="text-label-md font-label-md text-outline">{{ $user->email }}</p>
                  </div>
                </div>
              </td>
              <td class="px-5 py-4">
                <span class="inline-block text-label-md font-label-md px-2.5 py-1 rounded-full {{ $roleBadge }}">{{ $role ? (\App\Models\User::roleLabels()[$role] ?? \Illuminate\Support\Str::headline($role)) : 'No role' }}</span>
              </td>
              <td class="px-5 py-4">
                @php $loc = $user->locationLabel(); @endphp
                @if($loc)
                  <span class="inline-block text-label-md font-label-md px-2.5 py-1 rounded-full bg-surface-container-high text-on-surface-variant">{{ $loc }}</span>
                @else
                  <span class="text-outline">—</span>
                @endif
              </td>
              <td class="px-5 py-4 text-on-surface-variant whitespace-nowrap">{{ $user->created_at?->format('j M Y') }}</td>
              <td class="px-5 py-4">
                <div class="flex items-center justify-end gap-1">
                  <a href="{{ route('admin.users.edit', $user) }}" title="Edit"
                     class="w-9 h-9 flex items-center justify-center rounded-lg text-outline hover:text-primary hover:bg-surface-container-high transition-colors">
                    <span class="material-symbols-outlined text-[20px]">edit</span>
                  </a>
                  @if($user->id !== auth()->id())
                    <form method="POST" action="{{ route('admin.users.destroy', $user) }}" class="m-0"
                          onsubmit="return confirm('Delete “{{ $user->name }}”?');">
                      @csrf @method('DELETE')
                      <button type="submit" title="Delete"
                        class="w-9 h-9 flex items-center justify-center rounded-lg text-outline hover:text-error hover:bg-error-container transition-colors">
                        <span class="material-symbols-outlined text-[20px]">delete</span>
                      </button>
                    </form>
                  @else
                    <span class="w-9 h-9 flex items-center justify-center text-surface-container-highest" title="This is you">
                      <span class="material-symbols-outlined text-[20px]">lock</span>
                    </span>
                  @endif
                </div>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="5" class="px-5 py-12 text-center text-body-md font-body-md text-outline">
                No users found. <a href="{{ route('admin.users.create') }}" class="text-primary font-bold hover:underline">Add one</a>.
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

  <div class="mt-stack-lg">{{ $users->links() }}</div>

@endsection