<div class="max-w-7xl mx-auto flex flex-col md:flex-row gap-8">
    <!-- Sidebar Tabs -->
    <div class="w-full md:w-1/4">
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden sticky top-6">
            <div class="p-5 border-b border-slate-100 bg-slate-50/50 flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-slate-200 border-2 border-white shadow-sm flex items-center justify-center shrink-0 overflow-hidden relative group">
                    @if($avatar_url)
                        <img src="{{ $avatar_url }}" class="w-full h-full object-cover" alt="Avatar">
                    @else
                        <span class="text-lg font-bold text-slate-500">{{ mb_substr($name, 0, 1) }}</span>
                    @endif
                </div>
                <div>
                    <h2 class="font-bold text-slate-800 text-sm truncate">{{ $name }}</h2>
                    <p class="text-[10px] text-slate-400 truncate">{{ $email }}</p>
                </div>
            </div>
            
            <nav class="flex flex-col p-3 gap-2">
                <button wire:click="setTab('basic')" class="flex items-center gap-3 w-full text-right px-4 py-3 rounded-xl text-sm font-bold transition-all duration-200 {{ $activeTab === 'basic' ? 'bg-indigo-50 text-indigo-700 shadow-sm border border-indigo-100' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900 border border-transparent' }}">
                    <svg class="w-5 h-5 {{ $activeTab === 'basic' ? 'text-indigo-600' : 'text-slate-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                    المعلومات الأساسية
                </button>
                <button wire:click="setTab('security')" class="flex items-center gap-3 w-full text-right px-4 py-3 rounded-xl text-sm font-bold transition-all duration-200 {{ $activeTab === 'security' ? 'bg-indigo-50 text-indigo-700 shadow-sm border border-indigo-100' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900 border border-transparent' }}">
                    <svg class="w-5 h-5 {{ $activeTab === 'security' ? 'text-indigo-600' : 'text-slate-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
                    الأمان وكلمة المرور
                </button>
            </nav>
        </div>
    </div>

    <!-- Content Area -->
    <div class="w-full md:w-3/4">
        
        @if ($activeTab === 'basic')
            @if (session()->has('profile_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('profile_message') }}</span>
                </div>
            @endif

            <form wire:submit.prevent="updateProfile" class="bg-white rounded-2xl shadow-sm border border-slate-100 p-8">
                
                <h3 class="text-lg font-bold text-slate-800 mb-6 pb-4 border-b border-slate-100">المعلومات الأساسية للحساب</h3>

                <div class="space-y-6">
                    <!-- Avatar URL -->
                    <div>
                        <label class="block text-sm font-bold text-slate-700 mb-2">صورة العرض (رابط خارجي)</label>
                        <input type="url" wire:model="avatar_url" class="w-full border-slate-200 rounded-xl shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm h-11 text-left" dir="ltr" placeholder="https://example.com/avatar.png">
                        @error('avatar_url') <span class="text-xs text-red-500 mt-1 block">{{ $message }}</span> @enderror
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Name -->
                        <div>
                            <label class="block text-sm font-bold text-slate-700 mb-2">الاسم الكامل <span class="text-red-500">*</span></label>
                            <input type="text" wire:model="name" class="w-full border-slate-200 rounded-xl shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm h-11" required>
                            @error('name') <span class="text-xs text-red-500 mt-1 block">{{ $message }}</span> @enderror
                        </div>

                        <!-- Username -->
                        <div>
                            <label class="block text-sm font-bold text-slate-700 mb-2">اسم المستخدم <span class="text-red-500">*</span></label>
                            <input type="text" wire:model="username" class="w-full border-slate-200 rounded-xl shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm h-11 text-left" dir="ltr" required>
                            @error('username') <span class="text-xs text-red-500 mt-1 block">{{ $message }}</span> @enderror
                        </div>

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

                        <!-- Phone -->
                        <div>
                            <label class="block text-sm font-bold text-slate-700 mb-2">رقم الجوال</label>
                            <input type="text" wire:model="phone" class="w-full border-slate-200 rounded-xl shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm h-11 text-left" dir="ltr">
                            @error('phone') <span class="text-xs text-red-500 mt-1 block">{{ $message }}</span> @enderror
                        </div>
                    </div>
                </div>

                <!-- Save Button -->
                <div class="mt-8 pt-6 border-t border-slate-100 flex justify-end">
                    <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-xl shadow-md hover:shadow-lg transition-all duration-200 flex items-center gap-3">
                        <span wire:loading.remove wire:target="updateProfile" class="flex items-center gap-2">
                            <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="M5 13l4 4L19 7"></path></svg>
                            حفظ البيانات
                        </span>
                        <span wire:loading wire:target="updateProfile">جاري الحفظ...</span>
                    </button>
                </div>
            </form>
        @endif

        @if ($activeTab === 'security')
            @if (session()->has('password_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('password_message') }}</span>
                </div>
            @endif

            <form wire:submit.prevent="updatePassword" class="bg-white rounded-2xl shadow-sm border border-slate-100 p-8">
                
                <h3 class="text-lg font-bold text-slate-800 mb-6 pb-4 border-b border-slate-100">تغيير كلمة المرور</h3>

                <div class="space-y-6 max-w-xl">
                    <div>
                        <label class="block text-sm font-bold text-slate-700 mb-2">كلمة المرور الحالية <span class="text-red-500">*</span></label>
                        <input type="password" wire:model="current_password" class="w-full border-slate-200 rounded-xl shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm h-11 text-left" dir="ltr" required>
                        @error('current_password') <span class="text-xs text-red-500 mt-1 block">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-slate-700 mb-2">كلمة المرور الجديدة <span class="text-red-500">*</span></label>
                        <input type="password" wire:model="password" class="w-full border-slate-200 rounded-xl shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm h-11 text-left" dir="ltr" required>
                        @error('password') <span class="text-xs text-red-500 mt-1 block">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-bold text-slate-700 mb-2">تأكيد كلمة المرور <span class="text-red-500">*</span></label>
                        <input type="password" wire:model="password_confirmation" class="w-full border-slate-200 rounded-xl shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm h-11 text-left" dir="ltr" required>
                    </div>
                </div>

                <div class="mt-8 pt-6 border-t border-slate-100 flex justify-end">
                    <button type="submit" class="bg-slate-800 hover:bg-slate-900 text-white font-bold py-3 px-8 rounded-xl shadow-md hover:shadow-lg transition-all duration-200 flex items-center gap-3">
                        <span wire:loading.remove wire:target="updatePassword" class="flex items-center gap-2">
                            <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 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
                            تحديث كلمة المرور
                        </span>
                        <span wire:loading wire:target="updatePassword">جاري التحديث...</span>
                    </button>
                </div>
            </form>
        @endif
    </div>
</div>
