<div>
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-gray-800">الملف الشخصي</h1>
        <p class="text-sm text-gray-500 mt-1">إدارة بيانات حسابك وعناوين الشحن</p>
    </div>

    <div class="grid lg:grid-cols-3 gap-6">
        {{-- Account Info --}}
        <div class="bg-white rounded-2xl border border-gray-200 p-6">
            <h3 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
                <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                بيانات الحساب
            </h3>
            <div class="space-y-3 text-sm">
                <div class="flex items-center gap-3">
                    @if(auth()->user()->avatar)
                        <img src="{{ auth()->user()->avatar }}" class="w-12 h-12 rounded-full">
                    @else
                        <div class="w-12 h-12 rounded-full bg-emerald-100 flex items-center justify-center text-emerald-700 font-bold text-lg">
                            {{ mb_substr(auth()->user()->name, 0, 1) }}
                        </div>
                    @endif
                    <div>
                        <p class="font-semibold text-gray-800">{{ auth()->user()->name }}</p>
                        <p class="text-gray-500">{{ auth()->user()->email }}</p>
                    </div>
                </div>
                @if(auth()->user()->phone)
                    <div class="flex justify-between py-2 border-t border-gray-100">
                        <span class="text-gray-500">الهاتف</span>
                        <span class="text-gray-800">{{ auth()->user()->phone }}</span>
                    </div>
                @endif
                <div class="flex justify-between py-2 border-t border-gray-100">
                    <span class="text-gray-500">رصيد النقاط</span>
                    <span class="font-semibold text-amber-600">{{ number_format(auth()->user()->points_balance) }} نقطة</span>
                </div>
                <div class="flex justify-between py-2 border-t border-gray-100">
                    <span class="text-gray-500">عدد الطلبات</span>
                    <span class="font-semibold text-gray-800">{{ auth()->user()->orders()->count() }}</span>
                </div>
            </div>
        </div>

        {{-- Addresses --}}
        <div class="lg:col-span-2 space-y-4">
            <div class="flex items-center justify-between">
                <h3 class="font-bold text-gray-800 flex items-center gap-2">
                    <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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    عناوين الشحن
                </h3>
                @if(!$showAddressForm)
                    <button wire:click="addNewAddress" class="text-sm bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-xl transition font-medium">
                        + إضافة عنوان
                    </button>
                @endif
            </div>

            {{-- Address Form --}}
            @if($showAddressForm)
                <div class="bg-white rounded-2xl border border-gray-200 p-6">
                    <h4 class="font-semibold text-gray-800 mb-4">{{ $editingAddressId ? 'تعديل العنوان' : 'إضافة عنوان جديد' }}</h4>
                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">اسم المحل</label>
                            <input type="text" wire:model="shop_name" class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-emerald-500 outline-none text-sm" placeholder="مثال: محل أحمد للملابس">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">المحافظة <span class="text-red-500">*</span></label>
                            <select wire:model="governorate" class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-emerald-500 outline-none text-sm">
                                <option value="">-- اختر المحافظة --</option>
                                @foreach($governorates as $key => $label)
                                    <option value="{{ $key }}">{{ $label }}</option>
                                @endforeach
                            </select>
                            @error('governorate') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">المركز / المدينة</label>
                            <input type="text" wire:model="city" class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-emerald-500 outline-none text-sm" placeholder="مثال: مركز المنصورة">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">رقم هاتف إضافي</label>
                            <input type="text" wire:model="extra_phone" class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-emerald-500 outline-none text-sm" placeholder="01xxxxxxxxx">
                        </div>
                        <div class="sm:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">العنوان بالتفصيل <span class="text-red-500">*</span></label>
                            <textarea wire:model="address_details" rows="2" class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-emerald-500 outline-none text-sm resize-none" placeholder="الشارع، رقم العمارة، الدور..."></textarea>
                            @error('address_details') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div class="sm:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">علامة مميزة</label>
                            <input type="text" wire:model="landmark" class="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-emerald-500 outline-none text-sm" placeholder="مثال: بجوار مسجد الحسين">
                        </div>
                        <div class="sm:col-span-2">
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="checkbox" wire:model="is_default" class="rounded border-gray-300 text-emerald-600 focus:ring-emerald-500">
                                <span class="text-sm text-gray-700">تعيين كعنوان افتراضي</span>
                            </label>
                        </div>
                    </div>
                    <div class="flex items-center gap-3 mt-5">
                        <button wire:click="saveAddress" class="bg-emerald-600 hover:bg-emerald-700 text-white font-medium px-6 py-2.5 rounded-xl transition text-sm">
                            {{ $editingAddressId ? 'تحديث العنوان' : 'حفظ العنوان' }}
                        </button>
                        <button wire:click="cancelForm" class="text-gray-500 hover:text-gray-700 text-sm transition">إلغاء</button>
                    </div>
                </div>
            @endif

            {{-- Address List --}}
            @forelse($addresses as $address)
                <div class="bg-white rounded-2xl border {{ $address->is_default ? 'border-emerald-300 ring-1 ring-emerald-100' : 'border-gray-200' }} p-5">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <div class="flex items-center gap-2 mb-2">
                                @if($address->shop_name)
                                    <span class="font-semibold text-gray-800">{{ $address->shop_name }}</span>
                                @endif
                                @if($address->is_default)
                                    <span class="text-xs bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded-full font-medium">الافتراضي</span>
                                @endif
                            </div>
                            <p class="text-sm text-gray-600">
                                <span class="font-medium text-gray-700">{{ $address->governorate }}</span>
                                @if($address->city) — {{ $address->city }} @endif
                            </p>
                            <p class="text-sm text-gray-500 mt-1">{{ $address->address_details }}</p>
                            @if($address->landmark)
                                <p class="text-xs text-gray-400 mt-1">📍 {{ $address->landmark }}</p>
                            @endif
                            @if($address->extra_phone)
                                <p class="text-xs text-gray-400 mt-1">📞 {{ $address->extra_phone }}</p>
                            @endif
                        </div>
                        <div class="flex items-center gap-2 flex-shrink-0 mr-4">
                            @if(!$address->is_default)
                                <button wire:click="setDefault({{ $address->id }})" class="text-xs text-emerald-600 hover:text-emerald-800 font-medium transition">تعيين افتراضي</button>
                            @endif
                            <button wire:click="editAddress({{ $address->id }})" class="text-xs text-blue-600 hover:text-blue-800 font-medium transition">تعديل</button>
                            <button wire:click="deleteAddress({{ $address->id }})" wire:confirm="هل أنت متأكد من حذف هذا العنوان؟" class="text-xs text-red-500 hover:text-red-700 font-medium transition">حذف</button>
                        </div>
                    </div>
                </div>
            @empty
                @if(!$showAddressForm)
                    <div class="bg-white rounded-2xl border border-gray-200 p-8 text-center">
                        <svg class="w-12 h-12 mx-auto text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/></svg>
                        <p class="text-gray-500 mb-3">لا توجد عناوين محفوظة</p>
                        <button wire:click="addNewAddress" class="text-sm bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-xl transition">إضافة عنوان جديد</button>
                    </div>
                @endif
            @endforelse
        </div>
    </div>
</div>
