@extends('layouts.admin')

@section('title', 'Client Users - ' . $client->name)

@section('content')
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Header -->
    <div class="mb-8">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white">{{ $client->name }} - Users</h1>
                <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                    Manage users for this client
                </p>
            </div>
            <div class="mt-4 sm:mt-0 flex space-x-3">
                <x-ui.button variant="view" href="{{ route('admin.users.create') }}" aria-label="Add new user">
                    Add New User
                </x-ui.button>
                <x-ui.button variant="back" href="{{ route('admin.clients.index') }}" aria-label="Back to clients list">
                    Back to Clients
                </x-ui.button>
            </div>
        </div>
    </div>

    <!-- Users Table -->
    <x-ui.layout.card>
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                Client Users
            </h3>
            <p class="mt-1 max-w-2xl text-sm text-gray-500 dark:text-gray-400">
                {{ $users->count() }} total users
            </p>
        </div>
        
        @if($users->count() > 0)
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-800">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">ID</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Name</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Email</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Role</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Joined At</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    @foreach($users as $user)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                            {{ $user->id }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                            {{ $user->name }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                            {{ $user->email }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">
                                {{ $user->pivot->role_in_client ?? 'attendee' }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                            {{ $user->pivot->joined_at ? (is_string($user->pivot->joined_at) ? \Carbon\Carbon::parse($user->pivot->joined_at)->format('Y-m-d') : $user->pivot->joined_at->format('Y-m-d')) : 'N/A' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <div class="flex justify-end space-x-2">
                                <x-ui.button variant="edit" href="{{ route('admin.users.edit', $user->id) }}" size="sm" aria-label="Edit user {{ $user->name }}">
                                    Edit
                                </x-ui.button>
                                <form action="{{ route('admin.users.destroy', $user->id) }}" method="POST" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <x-ui.button variant="delete" type="submit" size="sm" onclick="return confirm('Are you sure you want to remove this user from the client?')" aria-label="Remove user {{ $user->name }}">
                                        Remove
                                    </x-ui.button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        @if($users->hasPages())
        <div class="mt-6 flex justify-center">
            {{ $users->links() }}
        </div>
        @endif
        
        @else
        <div class="text-center py-12">
            <div class="text-gray-500 dark:text-gray-400 text-lg mb-4">No users found for this client.</div>
            <x-ui.button variant="view" href="{{ route('admin.users.create') }}" aria-label="Add first user">
                Add First User
            </x-ui.button>
        </div>
        @endif
    </x-ui.layout.card>
</div>
@endsection