@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto">
  <!-- Header -->
  <div class="mb-6 flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
    <h1 class="text-2xl font-semibold text-gray-800">Users</h1>

    <!-- Search -->
    <div class="flex items-center gap-3" x-data="{ q: '' }">
      <div class="relative">
        <input x-model="q" id="userSearch" type="text" placeholder="Search users by name, email or role…"
          class="w-72 rounded-lg border-gray-300 pl-9 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
        <svg class="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400"
          xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z" />
        </svg>

        {{-- Alpine filter value holder (teleport) --}}
        <template x-teleport="#userTableFilterExpr">
          <span x-text="q"></span>
        </template>
      </div>
    </div>
    <div class="mb-6 flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
      <h1 class="text-2xl font-semibold text-gray-800">Users</h1>
      @role('Admin')
      <a href="{{ route('admin.users.create') }}"
        class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">
        + New User
      </a>
      @endrole
    </div>


  </div>

  @include('admin.partials.flash')

  <!-- Table -->
  <div class="overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-gray-100">
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">User</th>
            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">Email</th>
            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">Roles</th>
            <th class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wider text-gray-600">Actions</th>
          </tr>
        </thead>

        <tbody class="divide-y divide-gray-100 bg-white">
          @forelse($users as $u)
          @php
          $roleNames = $u->roles->pluck('name');
          $needle = strtolower(trim($u->name.' '.$u->email.' '.implode(' ', $roleNames->toArray())));
          @endphp
          <tr class="hover:bg-gray-50"
            x-data
            x-show="'{{ $needle }}'.includes((document.querySelector('#userTableFilterExpr')?.textContent || '').toLowerCase())">
            <!-- User (avatar + name) -->
            <td class="px-6 py-4">
              <div class="flex items-center gap-3">
                <div class="flex h-9 w-9 items-center justify-center rounded-full bg-indigo-100 text-sm font-semibold text-indigo-700">
                  {{ strtoupper(mb_substr($u->name, 0, 1)) }}
                </div>
                <div class="text-sm font-medium text-gray-900">{{ $u->name }}</div>
              </div>
            </td>

            <!-- Email -->
            <td class="px-6 py-4 text-sm text-gray-700">
              {{ $u->email }}
            </td>

            <!-- Roles as badges -->
            <td class="px-6 py-4">
              <div class="flex flex-wrap gap-2">
                @forelse($roleNames as $r)
                <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700">
                  {{ $r }}
                </span>
                @empty
                <span class="text-xs text-gray-500">No roles</span>
                @endforelse
              </div>
            </td>

            <!-- Actions -->
            <td class="px-6 py-4 text-right">
              <a href="{{ route('admin.users.edit',$u) }}"
                class="rounded-lg border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50">
                Manage
              </a>
            </td>
          </tr>
          @empty
          <tr>
            <td colspan="4" class="px-6 py-10 text-center text-sm text-gray-500">No users found</td>
          </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    <div class="border-t bg-white px-4 py-3 sm:px-6">
      {{ $users->links() }}
    </div>
  </div>

  <!-- hidden holder for Alpine search expression -->
  <span id="userTableFilterExpr" class="hidden"></span>
</div>
@endsection