<div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="mb-8 flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-black text-slate-900 tracking-tight mb-1">إدارة المستخدمين</h1>
            <p class="text-sm text-slate-500 font-medium">التحكم في حسابات النظام وصلاحيات الوصول.</p>
        </div>
        <button wire:click="openModal" class="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-lg font-bold shadow-sm flex items-center gap-2 transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            مستخدم جديد
        </button>
    </div>

    @if (session()->has('message'))
        <div class="mb-6 p-4 bg-emerald-50 text-emerald-800 rounded-2xl flex items-center gap-3 border border-emerald-200 shadow-sm">
            <div class="bg-emerald-100 rounded-full p-1">
                <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
            <span class="font-bold text-sm">{{ session('message') }}</span>
        </div>
    @endif

    @if (session()->has('error'))
        <div class="mb-6 p-4 bg-red-50 text-red-800 rounded-2xl flex items-center gap-3 border border-red-200 shadow-sm">
            <div class="bg-red-100 rounded-full p-1">
                <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </div>
            <span class="font-bold text-sm">{{ session('error') }}</span>
        </div>
    @endif

    <!-- Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
        
        <!-- Search & Filter Bar -->
        <div class="p-4 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between gap-4">
            <div class="relative w-full max-w-md">
                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                    <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                </div>
                <input wire:model.live.debounce.300ms="search" type="text" placeholder="البحث بالاسم، اسم المستخدم، الإيميل..." class="block w-full bg-white border-slate-200 rounded-xl pr-10 pl-4 py-2.5 text-sm focus:ring-indigo-500 focus:border-indigo-500 shadow-sm">
            </div>
        </div>

        <!-- Table -->
        <div class="overflow-x-auto">
            <table class="w-full text-right">
                <thead>
                    <tr class="bg-slate-50 border-b border-slate-100 text-slate-500 text-xs font-bold">
                        <th class="px-6 py-4">المستخدم</th>
                        <th class="px-6 py-4">اسم المستخدم</th>
                        <th class="px-6 py-4">البريد الإلكتروني</th>
                        <th class="px-6 py-4">الجوال</th>
                        <th class="px-6 py-4">الدور (Role)</th>
                        <th class="px-6 py-4">الحالة</th>
                        <th class="px-6 py-4 text-left">إجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($users as $user)
                        <tr class="hover:bg-slate-50/50 transition-colors border-b border-slate-100 last:border-0">
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-700 font-bold flex items-center justify-center shrink-0 overflow-hidden border border-indigo-200/50">
                                        @if($user->avatar_url)
                                            <img src="{{ $user->avatar_url }}" alt="Avatar" class="w-full h-full object-cover">
                                        @else
                                            {{ mb_substr($user->name, 0, 1) }}
                                        @endif
                                    </div>
                                    <div>
                                        <div class="font-bold text-slate-800 text-sm">{{ $user->name }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-sm text-slate-600 font-medium" dir="ltr">{{ $user->username }}</span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-sm text-slate-600" dir="ltr">{{ $user->email }}</span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-sm text-slate-600" dir="ltr">{{ $user->phone ?? '—' }}</span>
                            </td>
                            <td class="px-6 py-4">
                                @if($user->id == 1)
                                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-bold bg-amber-100 text-amber-800 border border-amber-200">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>
                                        Super Admin
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-bold bg-indigo-50 text-indigo-700 border border-indigo-100">
                                        {{ $user->roles->first()->name ?? 'بدون دور' }}
                                    </span>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                @if($user->is_active)
                                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-bold bg-emerald-50 text-emerald-700 border border-emerald-100">
                                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> نشط
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-bold bg-red-50 text-red-700 border border-red-100">
                                        <span class="w-1.5 h-1.5 rounded-full bg-red-500"></span> موقوف
                                    </span>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-left">
                                <div class="flex items-center justify-end gap-2">
                                    <button wire:click="edit({{ $user->id }})" class="p-2 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition" title="تعديل">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
                                    </button>
                                    @if($user->id != 1 && $user->id != auth()->id())
                                    <button wire:click="delete({{ $user->id }})" wire:confirm="هل أنت متأكد من حذف هذا المستخدم؟" class="p-2 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition" title="حذف">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                    </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="px-6 py-12 text-center text-slate-500">
                                لا يوجد مستخدمين لعرضهم.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        @if($users->hasPages())
        <div class="p-4 border-t border-slate-100">
            {{ $users->links() }}
        </div>
        @endif
    </div>

    <!-- Modal Form -->
    <div x-data="{ open: @entangle('isModalOpen') }" 
         x-show="open" 
         x-cloak 
         class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0" 
         aria-labelledby="modal-title" 
         role="dialog" 
         aria-modal="true">
        
        <!-- Backdrop -->
        <div x-show="open" 
             x-transition.opacity 
             class="fixed inset-0 bg-slate-900/60 transition-opacity" 
             @click="open = false" 
             aria-hidden="true"></div>

        <!-- Modal Panel -->
        <div x-show="open" 
             x-transition.opacity.translate.scale 
             class="relative bg-white rounded-2xl text-right overflow-hidden shadow-2xl transform transition-all w-full max-w-lg border border-slate-100 flex flex-col max-h-[90vh]">
            
            <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between shrink-0">
                <div>
                    <h3 class="text-lg font-bold text-slate-800" id="modal-title">
                        {{ $user_id ? 'تعديل المستخدم' : 'إضافة مستخدم جديد' }}
                    </h3>
                </div>
                <button @click="open = false" type="button" class="text-slate-400 hover:text-slate-700 bg-white hover:bg-slate-100 rounded-lg p-2 transition-colors border border-transparent hover:border-slate-200">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>

            <form id="userForm" wire:submit.prevent="save" class="flex flex-col h-full text-right">
                <div class="p-6 overflow-y-auto space-y-5">
                    
                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1.5">الاسم الكامل <span class="text-red-500">*</span></label>
                        <input type="text" wire:model.live.debounce.300ms="name" class="w-full border-slate-200 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm h-10" required>
                        @error('name') <span class="text-[10px] text-red-500 mt-1 block font-bold">{{ $message }}</span> @enderror
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-xs font-bold text-slate-700 mb-1.5">اسم المستخدم <span class="text-red-500">*</span></label>
                            <input type="text" wire:model.live.debounce.300ms="username" class="w-full border-slate-200 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm h-10 text-left" dir="ltr" required>
                            @error('username') <span class="text-[10px] text-red-500 mt-1 block font-bold">{{ $message }}</span> @enderror
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-slate-700 mb-1.5">رقم الجوال</label>
                            <input type="text" wire:model.live.debounce.300ms="phone" class="w-full border-slate-200 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm h-10 text-left" dir="ltr">
                            @error('phone') <span class="text-[10px] text-red-500 mt-1 block font-bold">{{ $message }}</span> @enderror
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1.5">البريد الإلكتروني <span class="text-red-500">*</span></label>
                        <input type="email" wire:model.live.debounce.300ms="email" class="w-full border-slate-200 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm h-10 text-left" dir="ltr" required>
                        @error('email') <span class="text-[10px] text-red-500 mt-1 block font-bold">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1.5">كلمة المرور {!! $user_id ? '<span class="text-slate-400 font-normal">(اتركه فارغاً للاحتفاظ بالحالية)</span>' : '<span class="text-red-500">*</span>' !!}</label>
                        <input type="password" wire:model.live.debounce.300ms="password" class="w-full border-slate-200 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm h-10 text-left" dir="ltr" {{ !$user_id ? 'required' : '' }}>
                        @error('password') <span class="text-[10px] text-red-500 mt-1 block font-bold">{{ $message }}</span> @enderror
                    </div>

                    @if($user_id != 1)
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-xs font-bold text-slate-700 mb-1.5">الدور والصلاحيات <span class="text-red-500">*</span></label>
                            <select wire:model="role" class="w-full border-slate-200 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm h-10 bg-white" required>
                                <option value="">-- اختر الدور --</option>
                                @foreach($availableRoles as $r)
                                    <option value="{{ $r->name }}">{{ $r->name }}</option>
                                @endforeach
                            </select>
                            @error('role') <span class="text-[10px] text-red-500 mt-1 block">{{ $message }}</span> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-slate-700 mb-1.5">حالة الحساب <span class="text-red-500">*</span></label>
                            <select wire:model="is_active" class="w-full border-slate-200 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm h-10 bg-white" required>
                                <option value="1">نشط ومفعل</option>
                                <option value="0">موقوف</option>
                            </select>
                            @error('is_active') <span class="text-[10px] text-red-500 mt-1 block">{{ $message }}</span> @enderror
                        </div>
                    </div>
                    @else
                    <div class="p-3 bg-amber-50 rounded-lg border border-amber-100 flex items-start gap-3">
                        <svg class="w-5 h-5 text-amber-600 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        <span class="text-sm text-amber-800 font-medium">هذا حساب المدير الخارق. لا يمكن تعديل دوره أو إيقاف حسابه.</span>
                    </div>
                    @endif

                    <div>
                        <label class="block text-xs font-bold text-slate-700 mb-1.5">رابط صورة العرض (Avatar URL)</label>
                        <input type="url" wire:model="avatar_url" class="w-full border-slate-200 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm h-10 text-left" dir="ltr" placeholder="https://...">
                        @error('avatar_url') <span class="text-[10px] text-red-500 mt-1 block">{{ $message }}</span> @enderror
                    </div>
                </div>
                
                <div class="px-6 py-4 bg-slate-50 border-t border-slate-100 flex items-center justify-end gap-3 shrink-0 text-right">
                    <button type="button" @click="open = false" class="px-5 py-2.5 bg-white border border-slate-300 hover:bg-slate-50 hover:border-slate-400 text-slate-700 text-sm font-bold rounded-lg shadow-sm transition-all">
                        إلغاء
                    </button>
                    <button type="submit" class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-bold rounded-lg shadow-sm transition-all flex items-center gap-2">
                        <span wire:loading.remove wire:target="save">حفظ المستخدم</span>
                        <span wire:loading wire:target="save">جاري الحفظ...</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
