@extends('layouts.admin')

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

@section('content')
<div class="mb-8">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 mb-2">Users</h1>
            <p class="text-gray-600">Manage system administrators and users</p>
        </div>
        <a href="{{ route('admin.users.create') }}" class="flex items-center space-x-2 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
            <i data-feather="user-plus" class="w-4 h-4"></i>
            <span>Add User</span>
        </a>
    </div>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
    <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-medium text-gray-500 uppercase tracking-wider">User</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @foreach($users as $user)
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center mr-3">
                                <i data-feather="user" class="w-5 h-5 text-primary-600"></i>
                            </div>
                            <div>
                                <div class="text-sm font-medium text-gray-900">{{ $user->name }}</div>
                                <div class="text-sm text-gray-500">{{ $user->email }}</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full 
                            {{ $user->role === 'admin' ? 'bg-purple-100 text-purple-800' : 'bg-blue-100 text-blue-800' }}">
                            @if($user->role === 'admin')
                                <i data-feather="shield" class="w-3 h-3 mr-1"></i>
                            @else
                                <i data-feather="user" class="w-3 h-3 mr-1"></i>
                            @endif
                            {{ ucfirst($user->role) }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full 
                            {{ $user->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                            @if($user->is_active)
                                <i data-feather="check-circle" class="w-3 h-3 mr-1"></i>
                                Active
                            @else
                                <i data-feather="x-circle" class="w-3 h-3 mr-1"></i>
                                Inactive
                            @endif
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {{ $user->created_at->format('M j, Y') }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        @if($user->id !== Auth::id())
                        <form method="POST" action="{{ route('admin.users.toggle-status', $user->id) }}" class="inline">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="text-primary-600 hover:text-primary-900 flex items-center space-x-1">
                                @if($user->is_active)
                                    <i data-feather="user-x" class="w-4 h-4"></i>
                                    <span>Deactivate</span>
                                @else
                                    <i data-feather="user-check" class="w-4 h-4"></i>
                                    <span>Activate</span>
                                @endif
                            </button>
                        </form>
                        @else
                        <span class="text-gray-400 text-xs">Current User</span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    
    @if($users->hasPages())
    <div class="px-6 py-4 border-t border-gray-200 bg-gray-50">
        {{ $users->links() }}
    </div>
    @endif
</div>
@endsection