@extends('layouts.admin')

@section('title', 'Management Users')

@section('content')
    <x-page-header
        title="Administrative Staff"
        :breadcrumbs="[
            ['label' => 'Admin', 'href' => route('admin.dashboard')],
            ['label' => 'Management'],
        ]"
        subtitle="Manage users with administrative and supervisory permissions."
    >
        <x-slot:actions>
            <x-button :href="route('admin.management-users.create')">Add Administrator</x-button>
        </x-slot:actions>
    </x-page-header>

    <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm mb-6">
        <form method="GET" class="flex flex-col sm:flex-row gap-3 items-end">
            <div class="flex-1">
                <label class="text-xs font-semibold uppercase tracking-wider text-slate-500">Search Staff</label>
                <div class="mt-1 relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg class="h-4 w-4 text-slate-400" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <input name="q" value="{{ request('q') }}" placeholder="Name, email, or role..." class="w-full pl-10 h-11 rounded-xl border-slate-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all">
                </div>
            </div>
            <x-button type="submit" class="h-11 px-8">Search</x-button>
        </form>
    </div>

    <x-table-wrapper>
        <table class="min-w-full text-sm">
            <thead class="bg-slate-50 border-b border-slate-200">
                <tr>
                    <th class="text-left px-4 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Team Member</th>
                    <th class="text-left px-4 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Contact Email</th>
                    <th class="text-left px-4 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Phone</th>
                    <th class="text-left px-4 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Account Status</th>
                    <th class="text-right px-4 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-zinc-100">
                @forelse ($managementUsers as $user)
                    <tr class="group hover:bg-slate-50 transition-colors">
                        <td class="px-4 py-4">
                            <div class="flex items-center gap-3">
                                <div class="h-9 w-9 rounded-full bg-slate-900 flex items-center justify-center text-white text-xs font-bold border border-slate-800">
                                    {{ strtoupper(mb_substr($user->name, 0, 1)) }}
                                </div>
                                <div class="font-bold text-slate-900">{{ $user->name }}</div>
                            </div>
                        </td>
                        <td class="px-4 py-4 text-slate-600 font-medium">{{ $user->email }}</td>
                        <td class="px-4 py-4 text-slate-500">{{ $user->phone ?? '-' }}</td>
                        <td class="px-4 py-4 whitespace-nowrap">
                            <x-status-badge :value="$user->status?->value" :label="ucfirst($user->status?->value ?? 'unknown')" />
                        </td>
                        <td class="px-4 py-4 text-right">
                            <div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                                <x-button :href="route('admin.management-users.show', $user)" variant="secondary" size="sm" class="rounded-lg shadow-sm">View</x-button>
                                <x-button :href="route('admin.management-users.edit', $user)" variant="ghost" size="sm" class="rounded-lg">Edit</x-button>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="p-10 text-center text-slate-500 font-medium">No administrative users found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </x-table-wrapper>

    <div class="mt-4">
        {{ $managementUsers->links() }}
    </div>

    <div class="mt-4">
        {{ $managementUsers->links() }}
    </div>
@endsection