@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto space-y-8">
    <!-- Header -->
    <div class="text-center">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
            ⚙️ التفضيلات والإعدادات
        </h1>
        <p class="text-gray-600 dark:text-gray-400">
            اضبط إعدادات التواصل والخصوصية حسب رغبتك
        </p>
    </div>

    <!-- Communication Preferences -->
    <div class="card-hover p-6">
        <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
            <span class="text-2xl">💬</span>
            تفضيلات التواصل
        </h2>

        <form action="{{ route('preferences.store') }}" method="POST" class="space-y-6">
            @csrf

            <!-- Block Messages by Gender (hidden - enforced globally) -->
            <div class="hidden">
                <input type="hidden" name="block_msg_genders[]" value="--enforced--" />
            </div>

            <!-- Block Messages by Membership Level -->
            <div class="space-y-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">حظر الرسائل حسب مستوى العضوية</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <label class="flex items-center space-x-3 space-x-reverse cursor-pointer">
                        <input type="checkbox" name="block_msg_levels[]" value="عضوية مجانية"
                               {{ in_array('عضوية مجانية', $user->preferences['block_msg_levels'] ?? []) ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
                        <span class="text-gray-700 dark:text-gray-300">عضوية مجانية</span>
                    </label>
                    <label class="flex items-center space-x-3 space-x-reverse cursor-pointer">
                        <input type="checkbox" name="block_msg_levels[]" value="عضوية مميزة"
                               {{ in_array('عضوية مميزة', $user->preferences['block_msg_levels'] ?? []) ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
                        <span class="text-gray-700 dark:text-gray-300">عضوية مميزة</span>
                    </label>
                    <label class="flex items-center space-x-3 space-x-reverse cursor-pointer">
                        <input type="checkbox" name="block_msg_levels[]" value="عضوية ذهبية"
                               {{ in_array('عضوية ذهبية', $user->preferences['block_msg_levels'] ?? []) ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
                        <span class="text-gray-700 dark:text-gray-300">عضوية ذهبية</span>
                    </label>
                </div>
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    اختر مستوى العضوية الذي لا تريد استقبال رسائل منه
                </p>
            </div>

            <!-- New Subscriber Notifications -->
            <div class="space-y-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">تنبيهات المشتركين الجدد</h3>
                <div class="space-y-3">
                    <label class="flex items-center space-x-3 space-x-reverse cursor-pointer">
                        <input type="radio" name="notify_new_subscribed" value="on"
                               {{ ($user->preferences['notify_new_subscribed'] ?? 'off') === 'on' ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500">
                        <span class="text-gray-700 dark:text-gray-300">تفعيل التنبيهات</span>
                    </label>
                    <label class="flex items-center space-x-3 space-x-reverse cursor-pointer">
                        <input type="radio" name="notify_new_subscribed" value="off"
                               {{ ($user->preferences['notify_new_subscribed'] ?? 'off') === 'off' ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500">
                        <span class="text-gray-700 dark:text-gray-300">إيقاف التنبيهات</span>
                    </label>
                </div>
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    احصل على تنبيهات عند انضمام أعضاء جدد يناسبون معاييرك
                </p>
            </div>

            <!-- Save Button -->
            <div class="flex justify-end">
                <button type="submit" class="btn-primary">
                    💾 حفظ التفضيلات
                </button>
            </div>
        </form>
    </div>

    <!-- Privacy Settings -->
    <div class="card-hover p-6">
        <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
            <span class="text-2xl">🔒</span>
            إعدادات الخصوصية
        </h2>

        <div class="space-y-6">
            <!-- Profile Visibility -->
            <div class="space-y-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">رؤية الملف الشخصي</h3>
                <div class="space-y-3">
                    <label class="flex items-center space-x-3 space-x-reverse cursor-pointer">
                        <input type="radio" name="profile_visibility" value="public"
                               {{ ($user->preferences['profile_visibility'] ?? 'public') === 'public' ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500">
                        <span class="text-gray-700 dark:text-gray-300">عام - مرئي للجميع</span>
                    </label>
                    <label class="flex items-center space-x-3 space-x-reverse cursor-pointer">
                        <input type="radio" name="profile_visibility" value="members"
                               {{ ($user->preferences['profile_visibility'] ?? 'public') === 'members' ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500">
                        <span class="text-gray-700 dark:text-gray-300">أعضاء فقط</span>
                    </label>
                    <label class="flex items-center space-x-3 space-x-reverse cursor-pointer">
                        <input type="radio" name="profile_visibility" value="private"
                               {{ ($user->preferences['profile_visibility'] ?? 'public') === 'private' ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500">
                        <span class="text-gray-700 dark:text-gray-300">خاص - مرئي للمعجبين فقط</span>
                    </label>
                </div>
            </div>

            <!-- Online Status -->
            <div class="space-y-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">حالة الاتصال</h3>
                <div class="space-y-3">
                    <label class="flex items-center space-x-3 space-x-reverse cursor-pointer">
                        <input type="checkbox" name="show_online_status"
                               {{ ($user->preferences['show_online_status'] ?? true) ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
                        <span class="text-gray-700 dark:text-gray-300">إظهار حالة الاتصال</span>
                    </label>
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        اسمح للآخرين برؤية متى تكون متصلاً
                    </p>
                </div>
            </div>

            <!-- Last Seen -->
            <div class="space-y-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">آخر ظهور</h3>
                <div class="space-y-3">
                    <label class="flex items-center space-x-3 space-x-reverse cursor-pointer">
                        <input type="checkbox" name="show_last_seen"
                               {{ ($user->preferences['show_last_seen'] ?? true) ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
                        <span class="text-gray-700 dark:text-gray-300">إظهار آخر ظهور</span>
                    </label>
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        اسمح للآخرين برؤية متى كنت متصلاً آخر مرة
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Notification Preferences -->
    <div class="card-hover p-6">
        <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
            <span class="text-2xl">🔔</span>
            تفضيلات الإشعارات
        </h2>

        <div class="space-y-6">
            <!-- Email Notifications -->
            <div class="space-y-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">إشعارات البريد الإلكتروني</h3>
                <div class="space-y-3">
                    <label class="flex items-center space-x-3 space-x-reverse cursor-pointer">
                        <input type="checkbox" name="email_new_message"
                               {{ ($user->preferences['email_new_message'] ?? true) ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
                        <span class="text-gray-700 dark:text-gray-300">رسائل جديدة</span>
                    </label>
                    <label class="flex items-center space-x-3 space-x-reverse cursor-pointer">
                        <input type="checkbox" name="email_new_like"
                               {{ ($user->preferences['email_new_like'] ?? true) ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
                        <span class="text-gray-700 dark:text-gray-300">إعجابات جديدة</span>
                    </label>
                    <label class="flex items-center space-x-3 space-x-reverse cursor-pointer">
                        <input type="checkbox" name="email_new_match"
                               {{ ($user->preferences['email_new_match'] ?? true) ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
                        <span class="text-gray-700 dark:text-gray-300">توافقات جديدة</span>
                    </label>
                    <label class="flex items-center space-x-3 space-x-reverse cursor-pointer">
                        <input type="checkbox" name="email_weekly_summary"
                               {{ ($user->preferences['email_weekly_summary'] ?? false) ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
                        <span class="text-gray-700 dark:text-gray-300">ملخص أسبوعي</span>
                    </label>
                </div>
            </div>

            <!-- Push Notifications -->
            <div class="space-y-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">إشعارات الموقع</h3>
                <div class="space-y-3">
                    <label class="flex items-center space-x-3 space-x-reverse cursor-pointer">
                        <input type="checkbox" name="push_new_message"
                               {{ ($user->preferences['push_new_message'] ?? true) ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
                        <span class="text-gray-700 dark:text-gray-300">رسائل جديدة</span>
                    </label>
                    <label class="flex items-center space-x-3 space-x-reverse cursor-pointer">
                        <input type="checkbox" name="push_new_like"
                               {{ ($user->preferences['push_new_like'] ?? true) ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
                        <span class="text-gray-700 dark:text-gray-300">إعجابات جديدة</span>
                    </label>
                    <label class="flex items-center space-x-3 space-x-reverse cursor-pointer">
                        <input type="checkbox" name="push_new_match"
                               {{ ($user->preferences['push_new_match'] ?? true) ? 'checked' : '' }}
                               class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
                        <span class="text-gray-700 dark:text-gray-300">توافقات جديدة</span>
                    </label>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="{{ route('dashboard') }}" class="btn-secondary text-center">
            🏠 العودة للوحة التحكم
        </a>
        <a href="{{ route('profile.edit') }}" class="btn-outline text-center">
            ✏️ تعديل الملف الشخصي
        </a>
        <a href="{{ route('membership.index') }}" class="btn-accent text-center">
            ⭐ ترقية العضوية
        </a>
    </div>
</div>
@endsection