@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto bg-white p-8 rounded-xl shadow-lg my-10 border border-brand-light-gray" dir="rtl">

    {{-- ✅ نسبة اكتمال الملف الشخصي --}}
    <div class="progress-bar-container">
        <div class="progress-bar-fill" style="width: {{ $user->profile_completion ?? 0 }}%"></div>
        <div class="progress-bar-text">{{ $user->profile_completion ?? 0 }}%</div>
    </div>

    <h1 class="text-3xl font-extrabold text-blue-900 mb-6 border-b pb-3 text-center">تعديل الملف الشخصي</h1>

    @if (session('success'))
        <div class="mb-6 p-4 bg-green-100 text-green-800 border border-green-300 rounded-lg shadow-sm">
            {{ session('success') }}
        </div>
    @endif

    @if ($errors->any())
        <div class="mb-6 p-4 bg-red-100 text-red-800 border border-red-300 rounded-lg shadow-sm">
            <strong>حدثت بعض الأخطاء:</strong>
            <ul class="list-disc list-inside pr-4 mt-2">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

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

        <div x-data="{ tab: 'basic' }">
            {{-- ✅ التبويبات --}}
            <div class="flex justify-center gap-4 mb-6 border-b pb-3">
                <button type="button" @click="tab = 'basic'" :class="tab === 'basic' ? 'tab-active' : 'tab-inactive'">البيانات الأساسية</button>
                <button type="button" @click="tab = 'personal'" :class="tab === 'personal' ? 'tab-active' : 'tab-inactive'">التفاصيل الشخصية</button>
                <button type="button" @click="tab = 'religious'" :class="tab === 'religious' ? 'tab-active' : 'tab-inactive'">دينية وصحية</button>
                <button type="button" @click="tab = 'lifestyle'" :class="tab === 'lifestyle' ? 'tab-active' : 'tab-inactive'">نمط الحياة والهوايات</button>
                <button type="button" @click="tab = 'about'" :class="tab === 'about' ? 'tab-active' : 'tab-inactive'">عني وعن الشريك</button>
                <button type="button" @click="tab = 'gallery'" :class="tab === 'gallery' ? 'tab-active' : 'tab-inactive'">الصور</button>
            </div>

            {{-- ✅ البيانات الأساسية --}}
            <div x-show="tab === 'basic'" x-cloak>
                <x-form.input name="name" label="الاسم الكامل" :value="old('name', $user->name)" required />
                <x-form.input name="email" label="البريد الإلكتروني" :value="old('email', $user->email)" readonly class="bg-brand-secondary cursor-not-allowed" />
                <x-form.select name="gender" label="الجنس" :options="$genders" :value="old('gender', $user->gender)" />
                <x-form.input name="birth_date" label="تاريخ الميلاد" type="date" :value="old('birth_date', optional($user->birth_date)->format('Y-m-d'))" />
                <x-form.input name="age" label="العمر" :value="$user->birth_date ? \Carbon\Carbon::parse($user->birth_date)->age : 'غير متاح'" readonly class="bg-brand-secondary" />
                <x-form.select name="country_id" id="country-select" label="الدولة" :options="$countries" :value="old('country_id', $user->country_id)" />
                <x-form.input name="city_name" id="city-input" label="المدينة" :value="old('city_name', $user->city_name)" />
                <x-form.select name="housing_type" label="نوع السكن" :options="$housing_types" :value="old('housing_type', $user->housing_type)" />
            </div>

            {{-- ✅ التفاصيل الشخصية --}}
            <div x-show="tab === 'personal'" x-cloak>
                <x-form.select name="ethnicity" label="الأصل العرقي" :options="$ethnicities" :value="old('ethnicity', $user->ethnicity)" />
                <x-form.select name="skin_color" label="لون البشرة" :options="$skin_colors" :value="old('skin_color', $user->skin_color)" />
                <x-form.select name="hair_color" label="لون الشعر" :options="$hair_colors" :value="old('hair_color', $user->hair_color)" />
                <x-form.select name="eye_color" label="لون العيون" :options="$eye_colors" :value="old('eye_color', $user->eye_color)" />
                <x-form.select name="beard" label="اللحية" :options="$beard_styles" :value="old('beard', $user->beard)" />
                <x-form.select name="body_type" label="نوع الجسم" :options="$body_type_options" :value="old('body_type', $user->body_type)" />
                <x-form.select name="education_level" label="المستوى التعليمي" :options="$education_levels" :value="old('education_level', $user->education_level)" />
                <x-form.input name="job" label="الوظيفة" :value="old('job', $user->job)" />
                <x-form.input name="income" label="نطاق الدخل" :value="old('income', $user->income)" />
                <x-form.select name="occupation_sector" label="قطاع العمل" :options="$occupation_sectors" :value="old('occupation_sector', $user->occupation_sector)" />
            </div>

            {{-- ✅ دينية وصحية --}}
            <div x-show="tab === 'religious'" x-cloak>
                <x-form.select name="religion" label="الدين" :options="$religions" :value="old('religion', $user->religion)" />
                <x-form.select name="religiosity" label="مستوى التدين" :options="$religiosity_levels" :value="old('religiosity', $user->religiosity)" />
                <x-form.select name="pray_frequency" label="تكرار الصلاة" :options="$pray_frequency_options" :value="old('pray_frequency', $user->pray_frequency)" />
                @if (old('gender', $user->gender) === 'female')
                    <x-form.checkbox name="wear_hijab" label="هل ترتدين الحجاب/النقاب؟" :checked="old('wear_hijab', $user->wear_hijab)" />
                @endif
                <x-form.select name="halal_food" label="هل تتناول طعام حلال؟" :options="$halal_food_options" :value="old('halal_food', $user->halal_food)" />
                <x-form.select name="read_quran" label="مدى قراءتك للقرآن" :options="$read_quran_options" :value="old('read_quran', $user->read_quran)" />
                <x-form.select name="health_status" label="الحالة الصحية" :options="$health_status_options" :value="old('health_status', $user->health_status)" />
                <x-form.checkbox name="has_disability" label="هل لديك إعاقة؟" :checked="old('has_disability', $user->has_disability)" />
            </div>

            {{-- ✅ نمط الحياة والهوايات --}}
            <div x-show="tab === 'lifestyle'" x-cloak>
                <x-form.select name="marital_status" label="الحالة الاجتماعية" :options="$marital_statuses" :value="old('marital_status', $user->marital_status)" />
                <x-form.input name="children_count" label="عدد الأطفال" type="number" :value="old('children_count', $user->children_count)" min="0" />
                <x-form.select name="want_children" label="الرغبة في الأطفال" :options="$want_children_options" :value="old('want_children', $user->want_children)" />
                <x-form.select name="marriage_type" label="نوع الزواج" :options="$marriage_types" :value="old('marriage_type', $user->marriage_type)" />
                <x-form.select name="family_values" label="قيم العائلة" :options="$family_values_options" :value="old('family_values', $user->family_values)" />
                <x-form.select name="lifestyle" label="أسلوب الحياة" :options="$lifestyles" :value="old('lifestyle', $user->lifestyle)" />
                <x-form.select name="smoking" label="التدخين" :options="$smoking_habits" :value="old('smoking', $user->smoking)" />
                <x-form.select name="drinking" label="الشرب" :options="$drinking_habits" :value="old('drinking', $user->drinking)" />
                <x-form.select name="travel" label="السفر" :options="$travel_options" :value="old('travel', $user->travel)" />
                <x-form.input name="hobbies" label="الهوايات والاهتمامات (افصل بفاصلة)" :value="old('hobbies', is_array($user->hobbies) ? implode(', ', $user->hobbies) : ($user->hobbies ?? ''))" />
                <x-form.select name="music" label="هل تسمع الموسيقى؟" :options="$music_options" :value="old('music', $user->music)" />
                <x-form.input name="music_type" label="نوع الموسيقى المفضلة" :value="old('music_type', $user->music_type)" />
                <x-form.input name="favorite_movies" label="نوع الأفلام المفضلة" :value="old('favorite_movies', $user->favorite_movies)" />
            </div>

            {{-- ✅ عني وعن الشريك --}}
            <div x-show="tab === 'about'" x-cloak>
                <x-form.textarea name="about_me" label="عن نفسي" :value="old('about_me', $user->about_me)" />
                <x-form.textarea name="about_partner" label="عن الشريك المطلوب" :value="old('about_partner', $user->about_partner)" />
            </div>

            {{-- ✅ الصور --}}
            <div x-show="tab === 'gallery'" x-cloak>
                <div class="mb-4">
                    <label for="avatar" class="block mb-2 text-sm font-medium text-brand-text">الصورة الشخصية</label>
                    <div class="flex items-center space-x-4 mb-3" dir="ltr">
                        @php
                            $avatar = $user->avatar ? basename($user->avatar) : null;
                            $avatarKey = $avatar ? ('avatars/' . $avatar) : 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
                        <img id="avatar-preview"
                             src="{{ $avatarUrl }}"
                             class="w-24 h-24 rounded-full object-cover border-2 border-brand-light-gray">
                        <x-form.file name="avatar" id="avatar-input" accept="image/*" />
                    </div>
                </div>

                <div class="mb-4">
                    <label class="block mb-2 text-sm font-medium text-brand-text">معرض الصور</label>
                    <x-form.file name="photo_gallery[]" id="gallery-input" multiple accept="image/*" />
                    @php
                        $galleryPhotos = is_string($user->photo_gallery)
                            ? json_decode($user->photo_gallery, true)
                            : ($user->photo_gallery ?? []);
                    @endphp
                    @if(count($galleryPhotos) > 0)
                        <div id="existing-gallery-preview" class="flex gap-3 mt-4 flex-wrap gallery-preview">
                            @foreach($galleryPhotos as $img)
                                @php $imgPath = is_array($img) ? ($img['path'] ?? reset($img)) : $img; @endphp
                                <div class="relative w-24 h-24 group">
                                    @php
                                        $imgFilename = $imgPath ? basename($imgPath) : null;
                                        $storageKey = $imgFilename ? ('gallery/' . $imgFilename) : 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
                                    <img src="{{ $imageUrl }}" />
                                    <button type="button"
                                            data-filename="{{ $imgPath }}"
                                            class="delete-gallery-photo">✕</button>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="mt-2 text-sm text-brand-text">لا توجد صور في المعرض حالياً.</p>
                    @endif
                    <div id="new-gallery-preview" class="flex gap-3 mt-4 flex-wrap"></div>
                </div>
            </div>

            <div class="mt-6 flex justify-end">
                <x-button type="submit" text="حفظ التعديلات" class="bg-blue-600 text-white px-6 py-2 rounded" />
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const countrySelect = document.getElementById('country-select');
        const citySelect = document.getElementById('city-select');
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        async function fetchCities(countryId, selectedCity = null) {
            citySelect.options.length = 0;
            citySelect.appendChild(new Option('جارٍ التحميل...', ''));
            try {
                const endpoint = `${window.location.origin}/api/cities/${countryId}`;
                const response = await fetch(endpoint, {
                    method: 'GET',
                    headers: { 'X-CSRF-TOKEN': csrfToken }
                });
                const data = await response.json();
                citySelect.options.length = 0;
                citySelect.appendChild(new Option('اختر المدينة', ''));
                if (Array.isArray(data)) {
                    data.forEach(row => {
                        if (row && typeof row.id !== 'undefined' && row.name) {
                            const option = document.createElement('option');
                            option.value = row.id;
                            option.textContent = row.name;
                            if (selectedCity && String(selectedCity) === String(row.id)) option.selected = true;
                            citySelect.appendChild(option);
                        }
                    });
                }
            } catch (error) {
                citySelect.options.length = 0;
                citySelect.appendChild(new Option('خطأ في التحميل', ''));
            }
        }

        countrySelect.addEventListener('change', function () {
            fetchCities(this.value);
        });

        document.querySelectorAll('.delete-gallery-photo').forEach(button => {
            button.addEventListener('click', function () {
                if (confirm('هل أنت متأكد أنك تريد حذف هذه الصورة؟')) {
                    const filename = encodeURIComponent(this.dataset.filename);
                    fetch(`/profile/gallery/${filename}`, {
                        method: 'DELETE',
                        headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' }
                    })
                    .then(res => res.ok ? res.json() : Promise.reject(res))
                    .then(data => {
                        if (data && data.success) {
                            this.closest('.group').remove();
                            alert(data.message || 'تم الحذف');
                        } else {
                            alert(data.message || 'فشل الحذف');
                        }
                    })
                    .catch(err => { console.error('Gallery delete failed', err); alert('فشل الاتصال بالخادم.'); });
                }
            });
        });
    });
</script>
@endpush
@endsection