@extends('admin.layouts.app')
@section('title', 'Users')
@section('page-title', 'User Management')

@section('content')
<div class="flex justify-end mb-6">
    <a href="{{ route('admin.users.create') }}" class="px-4 py-2 bg-navy text-white rounded-lg hover:bg-navy-light">
        <i class="fas fa-plus mr-2"></i>Add User
    </a>
</div>

<div class="bg-white rounded-xl shadow-sm overflow-hidden">
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">User</th>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Role</th>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase">Created</th>
                <th class="px-6 py-4 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200">
            @forelse($users as $user)
            <tr class="hover:bg-gray-50">
                <td class="px-6 py-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-gold rounded-full flex items-center justify-center text-white font-bold">
                            {{ substr($user->name, 0, 1) }}
                        </div>
                        <div>
                            <p class="font-medium">{{ $user->name }}</p>
                            <p class="text-sm text-gray-500">{{ $user->phone ?? 'N/A' }}</p>
                        </div>
                    </div>
                </td>
                <td class="px-6 py-4">{{ $user->email }}</td>
                <td class="px-6 py-4">
                    @foreach($user->roles as $role)
                        <span class="px-2 py-1 bg-gold/10 text-gold rounded-full text-xs">{{ $role->name }}</span>
                    @endforeach
                </td>
                <td class="px-6 py-4">
                    @if($user->is_active)
                        <span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">Active</span>
                    @else
                        <span class="px-2 py-1 bg-red-100 text-red-700 rounded-full text-xs">Inactive</span>
                    @endif
                </td>
                <td class="px-6 py-4">{{ $user->created_at->format('M d, Y') }}</td>
                <td class="px-6 py-4 text-right">
                    <div class="flex justify-end gap-2">
                        <a href="{{ route('admin.users.edit', $user) }}" class="text-blue-600 hover:text-blue-800">
                            <i class="fas fa-edit"></i>
                        </a>
                        @if($user->id !== auth()->id())
                            <form action="{{ route('admin.users.destroy', $user) }}" method="POST" onsubmit="return confirm('Are you sure?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-red-600 hover:text-red-800">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        @endif
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="6" class="px-6 py-12 text-center text-gray-500">No users found</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection