@extends('layouts.app')
@section('content')
<div class="max-w-4xl mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold mb-4">مركز ميزات Premium</h1>

    <div class="grid sm:grid-cols-2 gap-4 mb-8">
        <div class="p-4 rounded-xl border bg-white dark:bg-gray-800">
            <h2 class="font-semibold mb-2">Boost / Spotlight</h2>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">ارفع ظهورك أعلى النتائج لمدة 24 ساعة</p>
            <div class="text-sm mb-2">الاستخدام: {{ $quota->boosts_used ?? 0 }} / {{ $quota->boosts_limit ?? 0 }} شهريًا</div>
            <form method="post" action="{{ route('features.boost') }}">@csrf
                <button class="px-4 py-2 rounded bg-emerald-600 text-white">تفعيل Boost</button>
            </form>
        </div>

        <div class="p-4 rounded-xl border bg-white dark:bg-gray-800">
            <h2 class="font-semibold mb-2">Super Like</h2>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">ميزة لفت الانتباه الفوري</p>
            <div class="text-sm mb-2">الاستخدام: {{ $quota->super_likes_used ?? 0 }} / {{ $quota->super_likes_limit ?? 0 }} شهريًا</div>
            <form method="post" action="#" onsubmit="return alert('اختر العضو من بطاقة العضو لإرسال Super Like');">
                @csrf
                <button class="px-4 py-2 rounded bg-blue-600 text-white">إرسال Super Like</button>
            </form>
        </div>

        <div class="p-4 rounded-xl border bg-white dark:bg-gray-800">
            <h2 class="font-semibold mb-2">وضع السفر</h2>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">اكتشف توافقات بمدينة أخرى مؤقتًا</p>
            <form method="post" action="{{ route('features.travel') }}" class="space-y-2">@csrf
                <input type="text" name="city" placeholder="المدينة" class="w-full rounded border px-3 py-2">
                <input type="number" name="days" placeholder="أيام (1-14)" min="1" max="14" class="w-full rounded border px-3 py-2">
                <button class="px-4 py-2 rounded bg-purple-600 text-white">تفعيل السفر</button>
            </form>
        </div>

        <div class="p-4 rounded-xl border bg-white dark:bg-gray-800">
            <h2 class="font-semibold mb-2">Rewind</h2>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">التراجع عن آخر تخطي</p>
            <div class="text-sm mb-2">الاستخدام اليومي: {{ $quota->rewinds_used ?? 0 }} / {{ $quota->rewinds_limit ?? 0 }}</div>
            <form method="post" action="{{ route('features.rewind') }}">@csrf
                <button class="px-4 py-2 rounded bg-amber-600 text-white">تراجع</button>
            </form>
        </div>
    </div>

    <div class="p-4 rounded-xl border bg-white dark:bg-gray-800 mb-6">
        <h2 class="font-semibold mb-2">الخصوصية المتقدمة</h2>
        <form method="post" action="{{ route('features.privacy') }}" class="space-y-2">@csrf
            <label class="flex items-center gap-2 text-sm">
                <input type="checkbox" name="hide_last_seen" value="1"> إخفاء آخر ظهور
            </label>
            <label class="flex items-center gap-2 text-sm">
                <input type="checkbox" name="blur_photos" value="1"> طمس الصور افتراضيًا
            </label>
            <button class="px-4 py-2 rounded bg-gray-700 text-white">حفظ</button>
        </form>
    </div>

    <div class="p-4 rounded-xl border bg-white dark:bg-gray-800">
        <h2 class="font-semibold mb-2">تقرير توافق بالذكاء الاصطناعي</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">نصائح عملية ورسالة افتتاحية مقترحة</p>
        <form method="post" action="{{ route('features.ai_report') }}">@csrf
            <button class="px-4 py-2 rounded bg-indigo-600 text-white">توليد التقرير</button>
        </form>
    </div>

    <div class="mt-6 p-4 rounded-xl border bg-white dark:bg-gray-800">
        <h2 class="font-semibold mb-2">تتبع ملف مستخدم</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">سجل الدخول/الخروج والتواصل والتفاعلات</p>
        <a href="{{ route('features.tracking') }}" class="px-4 py-2 rounded bg-gray-700 text-white">عرض لوحة التتبع</a>
    </div>
</div>
@endsection