@extends('layouts.dashboard')

@section('title', 'إدارة المستخدمين')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">👥 إدارة المستخدمين</h1>
            <p class="text-gray-600">إدارة مستخدمي النظام وصلاحياتهم</p>
        </div>
        <a href="{{ route('users.create') }}" 
           class="inline-flex items-center gap-2 bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 transition font-medium">
            <span>➕</span>
            <span>إضافة مستخدم</span>
        </a>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-xl shadow-sm p-4">
        <form method="GET" class="flex flex-wrap gap-4">
            <!-- Search -->
            <div class="flex-1 min-w-[200px]">
                <input type="text" name="search" value="{{ request('search') }}"
                       placeholder="بحث بالاسم أو البريد..."
                       class="w-full rounded-lg border-gray-300 focus:border-emerald-500 focus:ring-emerald-500">
            </div>
            
            <!-- Role Filter -->
            <select name="role" class="rounded-lg border-gray-300 focus:border-emerald-500 focus:ring-emerald-500">
                <option value="">كل الأدوار</option>
                @foreach($roles as $role)
                    <option value="{{ $role->name }}" {{ request('role') === $role->name ? 'selected' : '' }}>
                        {{ $role->name === 'admin' ? 'مشرف' : ($role->name === 'agent' ? 'وكيل' : 'مشاهد') }}
                    </option>
                @endforeach
            </select>

            <!-- Status Filter -->
            <select name="status" class="rounded-lg border-gray-300 focus:border-emerald-500 focus:ring-emerald-500">
                <option value="">كل الحالات</option>
                <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>نشط</option>
                <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>معطل</option>
            </select>

            <button type="submit" class="bg-gray-800 text-white px-4 py-2 rounded-lg hover:bg-gray-900 transition">
                🔍 بحث
            </button>

            @if(request()->hasAny(['search', 'role', 'status']))
                <a href="{{ route('users.index') }}" class="text-gray-600 hover:text-gray-800 py-2">
                    ✕ إلغاء الفلتر
                </a>
            @endif
        </form>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg">
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg">
            {{ session('error') }}
        </div>
    @endif

    <!-- Users Table -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-4 text-right text-sm font-medium text-gray-600">المستخدم</th>
                        <th class="px-6 py-4 text-right text-sm font-medium text-gray-600">الدور</th>
                        <th class="px-6 py-4 text-right text-sm font-medium text-gray-600">الحالة</th>
                        <th class="px-6 py-4 text-right text-sm font-medium text-gray-600">2FA</th>
                        <th class="px-6 py-4 text-right text-sm font-medium text-gray-600">تاريخ الإنشاء</th>
                        <th class="px-6 py-4 text-right text-sm font-medium text-gray-600">الإجراءات</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($users as $user)
                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center text-white font-bold">
                                        {{ mb_substr($user->name, 0, 1) }}
                                    </div>
                                    <div>
                                        <p class="font-medium text-gray-800">{{ $user->name }}</p>
                                        <p class="text-sm text-gray-500">{{ $user->email }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <span class="px-3 py-1 rounded-full text-sm font-medium {{ $user->role_badge }}">
                                    {{ $user->role_display }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                @if($user->is_active)
                                    <span class="inline-flex items-center gap-1 text-green-600">
                                        <span class="w-2 h-2 bg-green-500 rounded-full"></span>
                                        نشط
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 text-gray-500">
                                        <span class="w-2 h-2 bg-gray-400 rounded-full"></span>
                                        معطل
                                    </span>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                @if($user->two_factor_enabled)
                                    <span class="text-green-600">🔐 مفعل</span>
                                @else
                                    <span class="text-gray-400">—</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-gray-500 text-sm">
                                {{ $user->created_at->format('Y-m-d') }}
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-2">
                                    <a href="{{ route('users.edit', $user) }}" 
                                       class="text-blue-600 hover:text-blue-800 transition"
                                       title="تعديل">
                                        ✏️
                                    </a>
                                    
                                    @if($user->id !== auth()->id())
                                        <form method="POST" action="{{ route('users.toggle-status', $user) }}" class="inline">
                                            @csrf
                                            @method('PATCH')
                                            <button type="submit" 
                                                    class="text-amber-600 hover:text-amber-800 transition"
                                                    title="{{ $user->is_active ? 'تعطيل' : 'تفعيل' }}">
                                                {{ $user->is_active ? '🔒' : '🔓' }}
                                            </button>
                                        </form>

                                        <form method="POST" action="{{ route('users.destroy', $user) }}" class="inline"
                                              onsubmit="return confirm('هل أنت متأكد من حذف هذا المستخدم؟')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" 
                                                    class="text-red-600 hover:text-red-800 transition"
                                                    title="حذف">
                                                🗑️
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-12 text-center text-gray-500">
                                <span class="text-4xl block mb-2">👤</span>
                                لا يوجد مستخدمين
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if($users->hasPages())
            <div class="px-6 py-4 border-t border-gray-100">
                {{ $users->links() }}
            </div>
        @endif
    </div>
</div>
@endsection