@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 py-8">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header Section -->
        <div class="text-center mb-8">
            <h1 class="text-4xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent mb-2">
                تعديل الملف الشخصي
            </h1>
            <p class="text-slate-600 text-lg">أكمل ملفك الشخصي لتحسين فرصك في العثور على الشريك المناسب</p>
        </div>

        <!-- Progress Bar -->
        @php
            $completeness = auth()->user()->profile_completeness ?? 0;
            $completeness = is_numeric($completeness) ? (int) $completeness : 0;
            $isComplete = ($completeness === 100);
            $isNewUser = Auth::check() && Auth::user()->created_at && Auth::user()->created_at->diffInHours(now()) < 24;
            $u = Auth::user();
            $likesReceived = $u ? \App\Models\UserInteraction::where('target_id',$u->id)->where('type','like')->count() : 0;
            $attractionsReceived = $u ? \App\Models\UserInteraction::where('target_id',$u->id)->where('type','attraction_start')->count() : 0;
            $interestsReceived = $u ? \App\Models\Interest::where('target_user_id',$u->id)->count() : 0;
        @endphp

        {{-- رسالة إتمام الملف/الترحيب --}}
        @if($isComplete)
            <div class="bg-emerald-50 border border-emerald-200 rounded-2xl shadow-xl p-6 mb-6">
                <div class="flex items-center gap-4">
                    <div class="w-16 h-16 bg-emerald-500 rounded-full flex items-center justify-center flex-shrink-0">
                        <span class="text-2xl text-white">🥳</span>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-xl font-bold text-emerald-800 mb-2">مبروك! اكتمل ملفك بنسبة 100%</h3>
                        <p class="text-emerald-700 mb-3">عمل رائع! ملفك جاهز ليظهر بإبراز أعلى في الترشيحات ونتائج البحث.</p>
                        <div class="flex flex-wrap gap-3">
                            <span class="inline-flex items-center px-3 py-1 bg-emerald-100 text-emerald-800 text-sm font-medium rounded-full">✅ مكتمل 100%</span>
                            <span class="inline-flex items-center px-3 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full">🚀 ظهور أعلى</span>
                        </div>
                    </div>
                </div>
            </div>
        @elseif($isNewUser)
            <div class="bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-2xl shadow-xl p-6 mb-6">
                <div class="flex items-center gap-4">
                    <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-emerald-600 rounded-full flex items-center justify-center flex-shrink-0">
                        <span class="text-2xl text-white">🎉</span>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-xl font-bold text-green-800 mb-2">أهلاً وسهلاً بك في زواجنت!</h3>
                        <p class="text-green-700 mb-3">نحن متحمسون لوجودك معنا. أكمل ملفك الشخصي لتحسين فرصك في العثور على الشريك المناسب.</p>
                        <div class="flex flex-wrap gap-3">
                            <span class="inline-flex items-center px-3 py-1 bg-green-100 text-green-800 text-sm font-medium rounded-full">✨ ملف جديد</span>
                            <span class="inline-flex items-center px-3 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full">🎯 اكتمل {{ $completeness }}%</span>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <div class="grid lg:grid-cols-3 gap-6 items-start mb-8">
            <div class="lg:col-span-2 bg-white rounded-2xl shadow-xl p-6 border border-slate-200">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-slate-700 font-semibold">اكتمال الملف الشخصي</span>
                    <span id="profile-progress-label" class="text-blue-600 font-bold text-lg">{{ $completeness }}%</span>
                </div>
                <div class="w-full bg-slate-200 rounded-full h-3">
                    <div id="profile-progress-bar" class="bg-gradient-to-r from-blue-500 to-indigo-500 h-3 rounded-full transition-all duration-500 ease-out"
                         style="width: {{ $completeness }}%"></div>
                </div>
            </div>
            <aside class="sticky top-4 bg-white rounded-2xl shadow-xl p-6 border border-slate-200">
                <h3 class="text-slate-800 font-bold mb-3 flex items-center gap-2"><span>ملخص سريع</span><span class="text-2xl">🧭</span></h3>
                <ul class="text-sm text-slate-600 space-y-2" id="profile-checklist">
                    <!-- يمتلئ سكربتياً -->
                </ul>
                <div class="mt-4 text-xs text-slate-500">تلميح: اكتمال الملف يحسّن ظهورك في الترشيحات.</div>

                <!-- Interaction Mini Cards -->
                <div class="mt-6 grid grid-cols-3 gap-3">
                    <a href="{{ route('likes.who') }}" data-premium-gate="likes" class="block text-center p-3 rounded-xl border border-rose-200 bg-rose-50 hover:bg-rose-100 transition-colors">
                        <div class="text-rose-600 text-xs">الإعجابات</div>
                        <div class="text-rose-600 font-bold text-xl">{{ $likesReceived }}</div>
                    </a>
                    <a href="{{ route('attractions.who') }}" class="block text-center p-3 rounded-xl border border-fuchsia-200 bg-fuchsia-50 hover:bg-fuchsia-100 transition-colors">
                        <div class="text-fuchsia-600 text-xs">الانجذاب</div>
                        <div class="text-fuchsia-600 font-bold text-xl">{{ $attractionsReceived }}</div>
                    </a>
                    <a href="{{ route('interests.who') }}" data-premium-gate="interests" class="block text-center p-3 rounded-xl border border-violet-200 bg-violet-50 hover:bg-violet-100 transition-colors">
                        <div class="text-violet-600 text-xs">الاهتمام</div>
                        <div class="text-violet-600 font-bold text-xl">{{ $interestsReceived }}</div>
                    </a>
                </div>
            </aside>
        </div>

        <!-- Main Form Container -->
        <div class="bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden ring-1 ring-slate-100">
            {{-- رسائل نجاح --}}
            @if (session('success'))
                <div class="m-6 p-4 bg-gradient-to-r from-green-50 to-emerald-50 text-green-800 border border-green-200 rounded-xl shadow-sm">
                    <div class="flex items-center">
                        <svg class="w-5 h-5 text-green-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                        </svg>
                        {{ session('success') }}
                    </div>
                </div>
            @endif

            {{-- رسائل خطأ --}}
            @if ($errors->any())
                <div class="m-6 p-4 bg-gradient-to-r from-red-50 to-pink-50 text-red-800 border border-red-200 rounded-xl shadow-sm">
                    <div class="flex items-center mb-2">
                        <svg class="w-5 h-5 text-red-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                        </svg>
                        <strong>حدثت بعض الأخطاء:</strong>
                    </div>
                    <ul class="list-disc list-inside pr-4 space-y-1">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form id="profile-form" action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PATCH')

                <div x-data="{ tab: 'basic' }">
                    <!-- Enhanced Tab Navigation -->
                    <div class="bg-gradient-to-r from-slate-50 to-blue-50 px-6 py-4 border-b border-slate-200 backdrop-blur supports-[backdrop-filter]:bg-white/40">
                        <div class="flex flex-wrap justify-center gap-2 md:gap-4">
                            <template x-for="item in [
                                {key: 'basic', label: 'البيانات الأساسية', icon: '👤'},
                                {key: 'personal', label: 'التفاصيل الشخصية', icon: '🎯'},
                                {key: 'religious', label: 'الدينية والصحية', icon: '🕌'},
                                {key: 'lifestyle', label: 'نمط الحياة', icon: '🌟'},
                                {key: 'family', label: 'العائلة والقيم', icon: '👨‍👩‍👧‍👦'},
                                {key: 'gallery', label: 'المعرض والصور', icon: '🖼️'}
                            ]" :key="item.key">
                                <button type="button" @click="tab = item.key"
                                        class="px-3 md:px-4 py-2 rounded-xl text-sm md:text-base font-semibold transition-colors"
                                        :class="tab === item.key ? 'bg-white text-blue-600 shadow border border-slate-200' : 'text-slate-600 hover:text-blue-600'">
                                    <span x-text="item.icon"></span>
                                    <span class="ml-1" x-text="item.label"></span>
                                </button>
                            </template>
                        </div>
                    </div>

                    <!-- Tab Content -->
                    <div class="p-6">
                        <!-- Basic Information Tab -->
                        <div x-show="tab === 'basic'" x-cloak class="space-y-6">
                            <div class="text-center mb-6">
                                <h2 class="text-2xl font-bold text-slate-800 mb-2">البيانات الأساسية</h2>
                                <p class="text-slate-600">المعلومات الأساسية عنك</p>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <x-form.input name="basic[name]" label="الاسم الكامل" :value="old('basic.name', $user->name)" required
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.input name="basic[email]" label="البريد الإلكتروني" :value="old('basic.email', $user->email)" readonly
                                    class="bg-slate-100 border-slate-300 cursor-not-allowed" />
                                <x-form.select name="basic[gender]" label="الجنس" :options="$genders" :value="old('basic.gender', $user->gender)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.input name="basic[birth_date]" label="تاريخ الميلاد" type="date" :value="old('basic.birth_date', optional($user->birth_date)->format('Y-m-d'))"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.input name="basic[age]" label="العمر" :value="old('basic.age', $user->birth_date ? \Carbon\Carbon::parse($user->birth_date)->age : 'غير متاح')" readonly
                                    class="bg-slate-100 border-slate-300 cursor-not-allowed" />
                                <x-form.select name="location[country_id]" id="country-select" label="الدولة"
                                    :options="$countries->pluck('name', 'id')"
                                    :value="old('location.country_id', $user->country_id)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.select name="location[state_id]" id="state-select" label="الولاية / المقاطعة"
                                    :options="collect([])"
                                    :value="old('location.state_id', $user->state_id)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.input name="location[city_name]" id="city-input" label="المدينة"
                                    :value="old('location.city_name', $user->city_name)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.select name="personal[housing_type]" label="نوع السكن" :options="$housing_types" :value="old('personal.housing_type', $user->housing_type)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                            </div>
                        </div>

                        <!-- Personal Details Tab -->
                        <div x-show="tab === 'personal'" x-cloak class="space-y-6">
                            <div class="text-center mb-6">
                                <h2 class="text-2xl font-bold text-slate-800 mb-2">التفاصيل الشخصية</h2>
                                <p class="text-slate-600">المظهر والخصائص الشخصية</p>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <x-form.select name="personal[ethnicity]" label="الأصل العرقي" :options="$ethnicities" :value="old('personal.ethnicity', $user->ethnicity)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.select name="personal[skin_color]" label="لون البشرة" :options="$skin_colors" :value="old('personal.skin_color', $user->skin_color)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.select name="personal[hair_color]" label="لون الشعر" :options="$hair_colors" :value="old('personal.hair_color', $user->hair_color)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.select name="personal[eye_color]" label="لون العيون" :options="$eye_colors" :value="old('personal.eye_color', $user->eye_color)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.select name="personal[beard]" label="اللحية" :options="$beard_styles" :value="old('personal.beard', $user->beard)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.select name="personal[body_type]" label="نوع الجسم" :options="$body_type_options" :value="old('personal.body_type', $user->body_type)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.input name="personal[height]" type="number" min="100" max="250" step="1" label="الطول (سم)" :value="old('personal.height', $user->height)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.input name="personal[weight]" type="number" min="30" max="250" step="1" label="الوزن (كغ)" :value="old('personal.weight', $user->weight)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.select name="personal[education_level]" label="المستوى التعليمي" :options="$education_levels" :value="old('personal.education_level', $user->education_level)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.input name="personal[job]" label="الوظيفة" :value="old('personal.job', $user->job)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.input name="personal[income]" label="نطاق الدخل" :value="old('personal.income', $user->income)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.select name="personal[occupation_sector]" label="قطاع العمل" :options="$occupation_sectors" :value="old('personal.occupation_sector', $user->occupation_sector)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                            </div>
                        </div>

                        <!-- Religious & Health Tab -->
                        <div x-show="tab === 'religious'" x-cloak class="space-y-6">
                            <div class="text-center mb-6">
                                <h2 class="text-2xl font-bold text-slate-800 mb-2">التفاصيل الدينية والصحية</h2>
                                <p class="text-slate-600">المعتقدات والممارسات الدينية</p>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <x-form.select name="religious[religion]" label="الدين" :options="$religions" :value="old('religious.religion', $user->religion)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.select name="religious[religiosity]" label="مستوى التدين" :options="$religiosity_levels" :value="old('religious.religiosity', $user->religiosity)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.select name="religious[pray_frequency]" label="تكرار الصلاة" :options="$pray_frequency_options" :value="old('religious.pray_frequency', $user->pray_frequency)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                @if (old('gender', $user->gender) === 'female')
                                    <x-form.checkbox name="religious[wear_hijab]" label="هل ترتدين الحجاب/النقاب؟" :checked="old('religious.wear_hijab', $user->wear_hijab)"
                                        class="text-slate-700" />
                                @endif
                                <x-form.select name="religious[halal_food]" label="هل تتناول طعام حلال؟" :options="$halal_food_options" :value="old('religious.halal_food', $user->halal_food)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.select name="religious[read_quran]" label="مدى قراءتك للقرآن" :options="$read_quran_options" :value="old('religious.read_quran', $user->read_quran)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.select name="religious[health_status]" label="الحالة الصحية" :options="$health_status_options" :value="old('religious.health_status', $user->health_status)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.checkbox name="religious[has_disability]" label="هل لديك إعاقة؟" :checked="old('religious.has_disability', $user->has_disability)"
                                    class="text-slate-700" />
                            </div>
                        </div>

                        <!-- Lifestyle Tab -->
                        <div x-show="tab === 'lifestyle'" x-cloak class="space-y-6">
                            <div class="text-center mb-6">
                                <h2 class="text-2xl font-bold text-slate-800 mb-2">نمط الحياة والهوايات</h2>
                                <p class="text-slate-600">تفضيلاتك وأسلوب حياتك</p>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <x-form.select name="lifestyle[marital_status]" label="الحالة الاجتماعية" :options="$marital_statuses" :value="old('lifestyle.marital_status', $user->marital_status)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.input name="lifestyle[children_count]" label="عدد الأطفال" type="number" :value="old('lifestyle.children_count', $user->children_count)" min="0"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.select name="lifestyle[want_children]" label="الرغبة في الأطفال" :options="$want_children_options" :value="old('lifestyle.want_children', $user->want_children)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.select name="lifestyle[marriage_type]" label="نوع الزواج" :options="$marriage_types" :value="old('lifestyle.marriage_type', $user->marriage_type)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.select name="lifestyle[family_values]" label="قيم العائلة" :options="$family_values_options" :value="old('lifestyle.family_values', $user->family_values)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.select name="lifestyle[lifestyle]" label="أسلوب الحياة" :options="$lifestyles" :value="old('lifestyle.lifestyle', $user->lifestyle)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.select name="lifestyle[smoking]" label="التدخين" :options="$smoking_habits" :value="old('lifestyle.smoking', $user->smoking)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.select name="lifestyle[drinking]" label="الشرب" :options="$drinking_habits" :value="old('lifestyle.drinking', $user->drinking)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.select name="lifestyle[travel]" label="السفر" :options="$travel_options" :value="old('lifestyle.travel', $user->travel)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <!-- Tags input for hobbies -->
                                <div class="mb-4">
                                    <label class="block mb-2 text-lg font-medium text-brand-text">الهوايات والاهتمامات</label>
                                    <div id="hobbies-tags" class="flex flex-wrap gap-2 p-2 rounded-lg border border-slate-200 bg-slate-50 focus-within:ring-2 focus-within:ring-blue-500">
                                        <!-- tags will render here -->
                                        <input id="hobbies-input" type="text" class="min-w-[8rem] flex-1 outline-none bg-transparent p-1" placeholder="اكتب هواية واضغط Enter" />
                                    </div>
                                    <input type="hidden" name="lifestyle[hobbies]" id="hobbies-hidden" value="{{ old('lifestyle.hobbies', is_array($user->hobbies) ? implode(', ', $user->hobbies) : ($user->hobbies ?? '')) }}" />
                                    <div id="hobbies-suggestions" class="mt-2 hidden bg-white border border-slate-200 rounded-lg shadow-sm p-2 text-sm"></div>
                                    <p class="text-slate-500 text-xs mt-1">اكتب واضغط Enter لإضافة، يمكنك إزالة الوسم بالنقر عليه.</p>
                                </div>
                                <x-form.select name="lifestyle[music]" label="هل تسمع الموسيقى؟" :options="$music_options" :value="old('lifestyle.music', $user->music)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.input name="lifestyle[music_type]" label="نوع الموسيقى المفضلة" :value="old('lifestyle.music_type', $user->music_type)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <x-form.input name="lifestyle[favorite_movies]" label="نوع الأفلام المفضلة" :value="old('lifestyle.favorite_movies', $user->favorite_movies)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                            </div>
                        </div>

                        <!-- About Tab -->
                        <div x-show="tab === 'about'" x-cloak class="space-y-6">
                            <div class="text-center mb-6">
                                <h2 class="text-2xl font-bold text-slate-800 mb-2">عني وعن الشريك المطلوب</h2>
                                <p class="text-slate-600">اكتب عن نفسك وعن الشريك الذي تبحث عنه</p>
                            </div>

                            <div class="space-y-6">
                                <x-form.textarea name="about[about_me]" label="عن نفسي" :value="old('about.about_me', $user->about_me)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500 min-h-32" />
                                <x-form.textarea name="about[about_partner]" label="عن الشريك المطلوب" :value="old('about.about_partner', $user->about_partner)"
                                    class="bg-slate-50 border-slate-200 focus:border-blue-500 focus:ring-blue-500 min-h-32" />
                            </div>
                        </div>

                        <!-- Privacy Tab -->
                        <div x-show="tab === 'privacy'" x-cloak class="space-y-6">
                            <div class="text-center mb-6">
                                <h2 class="text-2xl font-bold text-slate-800 mb-2">الخصوصية</h2>
                                <p class="text-slate-600">اختر من يمكنه رؤية بعض عناصر ملفك</p>
                            </div>
                            @php $prefs = is_array($user->preferences ?? null) ? $user->preferences : []; @endphp
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label class="block mb-2 text-lg font-medium text-brand-text">من يمكنه رؤية صوري؟</label>
                                    <select name="privacy[photos_visibility]" class="input focus-ring">
                                        @php $pv = old('privacy.photos_visibility', $prefs['photos_visibility'] ?? 'all'); @endphp
                                        <option value="all" {{ ($pv==='all')?'selected':'' }}>الكل</option>
                                        <option value="premium" {{ ($pv==='premium')?'selected':'' }}>الأعضاء المميزون فقط</option>
                                        <option value="approved" {{ ($pv==='approved')?'selected':'' }}>من أوافق عليهم</option>
                                    </select>
                                </div>
                                <div class="flex items-center gap-3">
                                    @php $online = old('privacy.online_status', ($prefs['online_status'] ?? true) ? '1' : '0'); @endphp
                                    <input type="hidden" name="privacy[online_status]" value="0" />
                                    <input type="checkbox" id="privacy-online" name="privacy[online_status]" value="1" {{ ($online=='1')?'checked':'' }} />
                                    <label for="privacy-online" class="text-brand-text">إظهار حالتي متصل الآن</label>
                                </div>
                                <div class="md:col-span-2">
                                    <label class="block mb-2 text-lg font-medium text-brand-text">حظر الرسائل من</label>
                                    <input type="text" name="privacy[block_messages_from]" class="input focus-ring" placeholder="مثال: حسابات جديدة أقل من 3 أيام" value="{{ old('privacy.block_messages_from', $prefs['block_messages_from'] ?? '') }}" />
                                    <p class="text-xs text-slate-500 mt-1">وصف حر، سيُستخدم كسياسة بسيطة جانب الخادم لاحقاً.</p>
                                </div>
                                <div class="md:col-span-2 flex items-center gap-3 p-3 rounded-lg bg-amber-50 border border-amber-200">
                                    <input type="checkbox" id="pref-allow-same-gender" name="messaging[allow_same_gender]" value="0" disabled />
                                    <label for="pref-allow-same-gender" class="text-amber-800">منع رسائل نفس الجنس مفعل افتراضياً لكل العضويات.</label>
                                </div>
                            </div>
                        </div>

                        <!-- Gallery Tab -->
                        <div x-show="tab === 'gallery'" x-cloak class="space-y-6">
                            <div class="text-center mb-6">
                                <h2 class="text-2xl font-bold text-slate-800 mb-2">الصور</h2>
                                <p class="text-slate-600">أضف صورك الشخصية وصور المعرض</p>
                            </div>

                            <!-- Avatar Section -->
                            <div class="bg-gradient-to-r from-slate-50 to-blue-50 p-6 rounded-xl border border-slate-200">
                                <label for="avatar" class="block text-lg font-semibold text-slate-700 mb-4">الصورة الشخصية</label>
                                <div class="flex flex-col sm:flex-row items-center gap-6">
                                    @php
                                        $avatarFilename = $user->avatar ? basename($user->avatar) : null;
                                        $avatarKey = $avatarFilename ? ('avatars/' . $avatarFilename) : null;
                                        $avatarUrl = ($avatarKey && \Illuminate\Support\Facades\Storage::disk('public')->exists($avatarKey))
                                            ? \Illuminate\Support\Facades\Storage::disk('public')->url($avatarKey)
                                            : asset('images/default-avatar.png');
                                    @endphp
                                    <div class="relative">
                                        <img id="avatar-preview"
                                            src="{{ $avatarUrl }}"
                                            class="w-32 h-32 rounded-full object-cover border-4 border-white shadow-lg">
                                        <div class="absolute -bottom-2 -right-2 bg-blue-500 text-white rounded-full p-2 shadow-lg">
                                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="flex-1">
                                        <x-form.file name="avatar" id="avatar-input" accept="image/*"
                                            class="bg-white border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                        <p class="text-sm text-slate-500 mt-2">أقصى حجم: 2MB، الأنواع المدعومة: JPG, PNG, GIF</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Gallery Section -->
                            <div class="bg-gradient-to-r from-slate-50 to-blue-50 p-6 rounded-xl border border-slate-200">
                                <label for="photo_gallery" class="block text-lg font-semibold text-slate-700 mb-4">معرض الصور</label>
                                <x-form.file name="photo_gallery[]" id="gallery-input" multiple accept="image/*"
                                    class="bg-white border-slate-200 focus:border-blue-500 focus:ring-blue-500" />
                                <p class="text-sm text-slate-500 mt-2">يمكنك اختيار عدة صور في نفس الوقت</p>

                                @php
                                    $galleryPhotos = is_string($user->photo_gallery) ? json_decode($user->photo_gallery, true) : ($user->photo_gallery ?? []);
                                @endphp

                                @if(!empty($galleryPhotos))
                                    <div class="mt-6">
                                        <h4 class="text-md font-semibold text-slate-700 mb-3">الصور الحالية</h4>
                                        <div id="existing-gallery-preview" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                                            @foreach($galleryPhotos as $img)
                                                @php
                                                    $imgPathRaw = is_array($img) ? ($img['path'] ?? reset($img)) : $img;
                                                    $filename = $imgPathRaw ? basename($imgPathRaw) : null;
                                                    $storageKey = $filename ? ('gallery/' . $filename) : null;
                                                    $imageUrl = ($storageKey && \Illuminate\Support\Facades\Storage::disk('public')->exists($storageKey))
                                                        ? \Illuminate\Support\Facades\Storage::disk('public')->url($storageKey)
                                                        : asset('images/default-placeholder.png');
                                                @endphp
                                                @if($filename)
                                                    <div class="relative group">
                                                        <img src="{{ $imageUrl }}" class="w-full h-32 object-cover rounded-lg border-2 border-slate-200 shadow-sm group-hover:border-blue-300 transition-colors duration-200" />
                                                        <button type="button"
                                                            data-filename="{{ $filename }}"
                                                            class="delete-gallery-photo absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1.5 text-xs opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-lg hover:bg-red-600">
                                                            ✕
                                                        </button>
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                @else
                                    <div class="mt-6 text-center py-8 bg-white rounded-lg border-2 border-dashed border-slate-300">
                                        <svg class="w-12 h-12 text-slate-400 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                        </svg>
                                        <p class="text-slate-500">لا توجد صور في المعرض حالياً</p>
                                    </div>
                                @endif

                                <div id="new-gallery-preview" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4"></div>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="mt-8 pt-6 border-t border-slate-200">
                            <div class="flex flex-col sm:flex-row gap-4 justify-end">
                                <button type="button" @click="tab = 'basic'"
                                    class="px-6 py-3 text-slate-600 bg-slate-100 hover:bg-slate-200 rounded-xl font-medium transition-colors duration-200">
                                    رجوع للبداية
                                </button>
                                <x-button type="submit" text="حفظ التعديلات"
                                    class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-8 py-3 rounded-xl font-semibold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200" />
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
<!-- Back To Top Button -->
<button id="back-to-top"
        class="hidden fixed bottom-6 right-6 z-50 bg-blue-600 text-white rounded-full w-12 h-12 shadow-xl hover:bg-blue-700 focus:outline-none"
        title="الرجوع للأعلى">↑<span class="sr-only">الرجوع للأعلى</span></button>

@push('body-end')
<script>
document.addEventListener('DOMContentLoaded', () => {
    // منطق حساب العناصر الناقصة وشريط التقدم
    const checklistEl = document.getElementById('profile-checklist');
    const barEl = document.getElementById('profile-progress-bar');
    const labelEl = document.getElementById('profile-progress-label');

    const rules = [
        {selector: '[name="basic[name]"]', label: 'الاسم الكامل'},
        {selector: '[name="basic[birth_date]"]', label: 'تاريخ الميلاد'},
        {selector: '[name="location[country_id]"]', label: 'الدولة'},
        {selector: '[name="location[state_id]"]', label: 'الولاية/المقاطعة'},
        {selector: '[name="location[city_id]"]', label: 'المدينة'},
        {selector: '[name="personal[education_level]"]', label: 'المستوى التعليمي'},
        {selector: '[name="about[about_me]"]', label: 'نبذة عنك'},
        {selector: '[name="about[about_partner]"]', label: 'عن الشريك المطلوب'}
    ];

    // نسبة الخادم الأدق (مطابقة للوحة التحكم)
    let serverPercent = {{ (int)($completeness ?? 0) }};

    function currentProgress(){
        let done = 0;
        let total = rules.length;
        const missing = [];
        rules.forEach(r => {
            const el = document.querySelector(r.selector);
            const val = el ? (el.type === 'checkbox' ? el.checked : el.value && el.value.trim()) : '';
            if(val){ done++; } else { missing.push(r.label); }
        });
        return { done, total, missing, percent: Math.round((done/Math.max(total,1))*100) };
    }

    function renderChecklist(){
        const {missing} = currentProgress();
        if(barEl) barEl.style.width = `${serverPercent}%`;
        if(labelEl) labelEl.textContent = `${serverPercent}%`;
        if(!checklistEl) return;
        checklistEl.innerHTML = '';
        if(missing.length === 0){
            checklistEl.innerHTML = '<div class="col-span-2 text-emerald-700 font-semibold">رائع! ملفك مكتمل 🎉</div>';
            return;
        }
        missing.forEach(text => {
            const item = document.createElement('div');
            item.className = 'flex items-center gap-2 text-slate-600';
            item.innerHTML = `<span class="w-2 h-2 rounded-full bg-amber-500"></span><span>${text}</span>`;
            checklistEl.appendChild(item);
        });
    }

    // حدث عام لإعادة الحساب مع كل تغيير
    function scheduleChecklist(){
        if(autosaveTimer) clearTimeout(autosaveTimer);
        autosaveTimer = setTimeout(()=>{ doAutosave(); renderChecklist(); }, 600);
    }
    // اضبط البداية وفق حساب الخادم
    if(barEl) barEl.style.width = `${serverPercent}%`;
    if(labelEl) labelEl.textContent = `${serverPercent}%`;
    renderChecklist();
    document.addEventListener('input', scheduleChecklist, true);
    document.addEventListener('change', scheduleChecklist, true);
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
    // حفظ تلقائي بسيط
    const form = document.getElementById('profile-form');
    let autosaveTimer = null;
    let saving = false;

    function showToast(msg){
        let el = document.getElementById('autosave-toast');
        if(!el){
            el = document.createElement('div');
            el.id = 'autosave-toast';
            el.style.position = 'fixed';
            el.style.bottom = '20px';
            el.style.left = '50%';
            el.style.transform = 'translateX(-50%)';
            el.style.zIndex = '9999';
            document.body.appendChild(el);
        }
        el.innerHTML = `<div class="px-4 py-2 rounded-xl bg-emerald-600 text-white shadow-lg">${msg}</div>`;
        setTimeout(()=>{ el.innerHTML=''; }, 1500);
    }

    async function doAutosave(){
        if(saving) return; // تجنب الطلبات المتداخلة
        saving = true;
        const formData = new FormData(form);
        try{
            const res = await fetch(form.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                body: formData
            });
            if(res.ok){
                const json = await res.json().catch(()=>({ok:true}));
                // حدّث النسبة من الخادم إن توفرت
                const pct = json && json.data && typeof json.data.profile_completeness === 'number' ? json.data.profile_completeness : null;
                if(pct !== null){ serverPercent = pct; if(barEl) barEl.style.width = `${serverPercent}%`; if(labelEl) labelEl.textContent = `${serverPercent}%`; }
                showToast(json.message || 'تم الحفظ');
            }
        }catch(e){
            console.error('autosave failed', e);
        }finally{
            saving = false;
        }
    }

    form.addEventListener('input', () => {
        if(autosaveTimer) clearTimeout(autosaveTimer);
        autosaveTimer = setTimeout(doAutosave, 800);
    });
    form.addEventListener('change', () => {
        if(autosaveTimer) clearTimeout(autosaveTimer);
        autosaveTimer = setTimeout(doAutosave, 400);
    });
    const countrySelect = document.getElementById('country-select');
    const stateSelect = document.getElementById('state-select');
    const citySelect = document.getElementById('city-select'); // قد يكون null بعد تحويل المدينة لحقل نصي
    const cityInput = document.getElementById('city-input');
    const initialState = "{{ old('state_id', $user->state_id) }}";
    const initialCity = "{{ old('city_id', $user->city_id) }}";

    async function fetchStates(countryId, selectedState = null) {
        stateSelect.options.length = 0;
        if (citySelect) { citySelect.options.length = 0; citySelect.appendChild(new Option('اختر المدينة', '')); }
        stateSelect.appendChild(new Option('اختر الولاية', ''));
        if (!countryId) { stateSelect.disabled = true; if (citySelect) citySelect.disabled = true; return; }
        try {
            const res = await fetch(`${window.location.origin}/api/states/${countryId}`);
            const data = await res.json();
            stateSelect.options.length = 0;
            stateSelect.appendChild(new Option('اختر الولاية', ''));
            data.forEach(row => {
                const isSel = String(selectedState || '') === String(row.id);
                stateSelect.appendChild(new Option(row.name, row.id, isSel, isSel));
            });
            stateSelect.disabled = false;
        } catch (e) {
            console.error('Failed to fetch states:', e);
            stateSelect.options.length = 0;
            stateSelect.appendChild(new Option('خطأ في تحميل الولايات', ''));
        }
    }

    async function fetchCitiesByState(stateId, selectedCity = null) {
        if (!citySelect) { return; }
        citySelect.options.length = 0;
        citySelect.appendChild(new Option('اختر المدينة', ''));
        if (!stateId) { citySelect.disabled = true; return; }
        try {
            const response = await fetch(`${window.location.origin}/api/cities/${stateId}`);
            const data = await response.json();
            citySelect.options.length = 0;
            citySelect.appendChild(new Option('اختر المدينة', ''));
            if (Array.isArray(data)) {
                data.forEach(row => {
                    const isSelected = String(selectedCity || '') === String(row.id);
                    citySelect.appendChild(new Option(row.name, row.id, isSelected, isSelected));
                });
            }
            citySelect.disabled = false;
        } catch (error) {
            console.error('Failed to fetch cities:', error);
            citySelect.options.length = 0;
            citySelect.appendChild(new Option('خطأ في التحميل', ''));
        }
    }

    if (countrySelect) {
        countrySelect.addEventListener('change', () => fetchStates(countrySelect.value));
        if (countrySelect.value) fetchStates(countrySelect.value, initialState);
    }
    if (stateSelect && citySelect) {
        stateSelect.addEventListener('change', () => fetchCitiesByState(stateSelect.value));
        if (initialState) fetchCitiesByState(initialState, initialCity);
    }

    // معاينة وقص بسيط للصورة (اقتصاص مركزي ثابت كحل بسيط بدون مكتبات خارجية)
    const avatarInput = document.getElementById('avatar-input');
    const avatarPreview = document.getElementById('avatar-preview');
    if (avatarInput) {
        avatarInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (!(file && file.size <= 2 * 1024 * 1024 && ['image/jpeg','image/png','image/gif','image/webp'].includes(file.type))) {
                alert('الصورة غير صالحة أو حجمها أكبر من 2MB');
                avatarInput.value = '';
                return;
            }
            const reader = new FileReader();
            reader.onload = ev => {
                const img = new Image();
                img.onload = () => {
                    const size = Math.min(img.width, img.height);
                    const sx = Math.floor((img.width - size) / 2);
                    const sy = Math.floor((img.height - size) / 2);
                    const canvas = document.createElement('canvas');
                    canvas.width = 512; canvas.height = 512;
                    const ctx = canvas.getContext('2d');
                    ctx.drawImage(img, sx, sy, size, size, 0, 0, 512, 512);
                    canvas.toBlob(blob => {
                        // استبدال الملف المرفوع بالنسخة المقصوصة للحفظ التلقائي
                        const croppedFile = new File([blob], file.name.replace(/\.(\w+)$/, '.webp'), { type: 'image/webp' });
                        const dt = new DataTransfer();
                        dt.items.add(croppedFile);
                        avatarInput.files = dt.files;
                        avatarPreview.src = URL.createObjectURL(croppedFile);
                        scheduleChecklist();
                    }, 'image/webp', 0.92);
                };
                img.src = ev.target.result;
            };
            reader.readAsDataURL(file);
        });
    }

    // Hobbies tags with suggestions and simple AI assist from about_me
    const TAG_SEP = /[,،]+/u;
    const hobbiesHidden = document.getElementById('hobbies-hidden');
    const hobbiesWrap = document.getElementById('hobbies-tags');
    const hobbiesInput = document.getElementById('hobbies-input');
    const suggestionsBox = document.getElementById('hobbies-suggestions');
    const baseSuggestions = ['القراءة','السباحة','الطبخ','البرمجة','الرحلات','كرة القدم','التخييم','التطوع','التصوير','الموسيقى','الشطرنج','الرسم'];
    let tags = [];

    function renderTags(){
        // sync hidden value
        hobbiesHidden.value = tags.join(', ');
        // render chips
        hobbiesWrap.querySelectorAll('.tag-chip').forEach(el=>el.remove());
        tags.forEach((t,idx)=>{
            const chip = document.createElement('button');
            chip.type = 'button';
            chip.className = 'tag-chip px-2 py-1 rounded-full bg-blue-100 text-blue-800 text-xs hover:bg-blue-200';
            chip.textContent = `#${t}`;
            chip.addEventListener('click',()=>{ tags.splice(idx,1); renderTags(); scheduleChecklist(); });
            hobbiesWrap.insertBefore(chip, hobbiesInput);
        });
    }
    function addTag(raw){
        const t = (raw||'').trim();
        if(!t) return;
        if(tags.includes(t)) return;
        if(tags.length >= 20) return; // حد معقول
        tags.push(t);
        renderTags();
    }
    function showSuggestions(list){
        if(!list || list.length===0){ suggestionsBox.classList.add('hidden'); suggestionsBox.innerHTML=''; return; }
        suggestionsBox.innerHTML = '';
        list.slice(0,8).forEach(s=>{
            const btn = document.createElement('button');
            btn.type='button';
            btn.className='px-2 py-1 m-1 rounded bg-slate-100 hover:bg-slate-200';
            btn.textContent=s;
            btn.addEventListener('click',()=>{ addTag(s); hobbiesInput.value=''; suggestionsBox.classList.add('hidden'); scheduleChecklist(); });
            suggestionsBox.appendChild(btn);
        });
        suggestionsBox.classList.remove('hidden');
    }
    function deriveTagsFromAbout(){
        const about = document.querySelector('[name="about[about_me]"]');
        if(!about) return [];
        const text = (about.value||'').toLowerCase();
        const dict = {
            'سفر':'الرحلات','رحلات':'الرحلات','طبيعة':'التخييم','تخييم':'التخييم','طبخ':'الطبخ','مطبخ':'الطبخ','قراءة':'القراءة','كتب':'القراءة','سباحة':'السباحة','كرة':'كرة القدم','شِواء':'الطبخ','تطوع':'التطوع','تصوير':'التصوير','برمجة':'البرمجة','كود':'البرمجة','موسيقى':'الموسيقى','غناء':'الموسيقى','رسم':'الرسم','شطرنج':'الشطرنج'
        };
        const hits=[]; Object.keys(dict).forEach(k=>{ if(text.includes(k)) hits.push(dict[k]); });
        return Array.from(new Set(hits));
    }
    // init from hidden
    if(hobbiesHidden){
        const initial = (hobbiesHidden.value||'').split(TAG_SEP).map(s=>s.trim()).filter(Boolean);
        initial.forEach(addTag);
        renderTags();
    }
    if(hobbiesInput){
        hobbiesInput.addEventListener('keydown', (e)=>{
            if(e.key==='Enter'){ e.preventDefault(); addTag(hobbiesInput.value); hobbiesInput.value=''; scheduleChecklist(); }
        });
        hobbiesInput.addEventListener('input', ()=>{
            const q = hobbiesInput.value.trim();
            if(!q){ showSuggestions([]); return; }
            const ai = deriveTagsFromAbout();
            const pool = Array.from(new Set([...ai, ...baseSuggestions]));
            const filtered = pool.filter(x=>x.includes(q) && !tags.includes(x));
            showSuggestions(filtered);
        });
    }

    // Live preview modal
    const previewBtn = document.createElement('button');
    previewBtn.type='button';
    previewBtn.className='fixed bottom-20 right-6 z-40 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-xl shadow-lg';
    previewBtn.textContent='معاينة الملف';
    document.body.appendChild(previewBtn);
    const modal = document.createElement('div');
    modal.className='hidden fixed inset-0 z-50 items-center justify-center bg-black/40';
    modal.innerHTML = `<div class="bg-white rounded-2xl shadow-2xl max-w-3xl w-[92%] p-6">
        <div class="flex justify-between items-center mb-4"><h3 class="text-lg font-bold">معاينة الملف</h3>
        <button id="preview-close" class="text-slate-500 hover:text-slate-700">✕</button></div>
        <iframe id="preview-frame" src="{{ route('profile.show.self') }}" class="w-full h-[70vh] rounded"></iframe>
    </div>`;
    document.body.appendChild(modal);
    previewBtn.addEventListener('click',()=>{ modal.classList.remove('hidden'); });
    modal.addEventListener('click',(e)=>{ if(e.target===modal || e.target.id==='preview-close'){ modal.classList.add('hidden'); }});

    document.querySelectorAll('.delete-gallery-photo').forEach(button => {
        button.addEventListener('click', function () {
            const rawFilename = this.dataset.filename;
            if (!confirm('هل تريد حذف هذه الصورة؟')) {
                return;
            }
            const filename = encodeURIComponent(rawFilename);
            fetch(`{{ route('profile.gallery.delete', ['filename' => ':filename']) }}`.replace(':filename', filename), {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept':'application/json' },
                credentials: 'same-origin'
            })
            .then(async res => { try { return { ok: res.ok, json: await res.json() }; } catch(_) { return { ok: res.ok, json: {} }; } })
            .then(resp => {
                if (resp.ok && resp.json && resp.json.success) {
                    this.closest('.group').remove();
                    showToast(resp.json.message || 'تم حذف الصورة');
                } else {
                    alert('فشل الحذف. تحقق من الاتصال أو أعد المحاولة.');
                }
            })
            .catch(error => {
                console.error('Error deleting photo:', error);
                alert('حدث خطأ أثناء حذف الصورة.');
            });
        });
    });

    // سحب وترتيب بسيط لصور المعرض (HTML5 Drag & Drop)
    const galleryGrid = document.getElementById('existing-gallery-preview');
    if (galleryGrid) {
        let dragSrc = null;
        galleryGrid.querySelectorAll('.group').forEach(card => {
            card.setAttribute('draggable', 'true');
            card.addEventListener('dragstart', e => { dragSrc = card; card.classList.add('opacity-50'); });
            card.addEventListener('dragend', e => { card.classList.remove('opacity-50'); });
            card.addEventListener('dragover', e => { e.preventDefault(); });
            card.addEventListener('drop', e => {
                e.preventDefault();
                if (dragSrc && dragSrc !== card) {
                    const children = Array.from(galleryGrid.children);
                    const srcIndex = children.indexOf(dragSrc);
                    const dstIndex = children.indexOf(card);
                    if (srcIndex < dstIndex) galleryGrid.insertBefore(dragSrc, card.nextSibling);
                    else galleryGrid.insertBefore(dragSrc, card);
                    showToast('تم ترتيب الصور');
                    // إرسال الطلب لحفظ الترتيب
                    const filenames = Array.from(galleryGrid.querySelectorAll('.delete-gallery-photo'))
                        .map(btn => btn.dataset.filename)
                        .filter(Boolean);
                    fetch(`${window.location.origin}/api/profile/gallery/reorder`, {
                        method: 'POST',
                        headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept':'application/json' },
                        credentials: 'include',
                        body: (()=>{ const fd = new FormData(); filenames.forEach(n=>fd.append('order[]', n)); return fd; })()
                    }).then(r=>r.json()).then(j=>{
                        if(!(j && j.ok)) console.warn('reorder not saved');
                    }).catch(err=>console.error('reorder failed', err));
                }
            });
        });
    }
    // Back-to-top button behavior
    const backBtn = document.getElementById('back-to-top');
    const revealAt = 400;
    function toggleBack(){
        if (!backBtn) return;
        if (window.pageYOffset > revealAt) {
            backBtn.classList.remove('hidden');
            backBtn.style.display = 'flex';
        } else {
            backBtn.style.display = 'none';
            backBtn.classList.add('hidden');
        }
    }
    window.addEventListener('scroll', toggleBack, { passive: true });
    setTimeout(toggleBack, 50);
    if (backBtn) backBtn.addEventListener('click', (e) => {
        e.preventDefault();
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
});
</script>
@endpush
@endsection