@extends('layouts.superadmin')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-800 text-white py-8" dir="rtl">
    <div class="max-w-7xl mx-auto px-4">

        <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
            <div>
                <div class="flex items-center gap-2">
                    <h1 class="text-2xl md:text-3xl font-extrabold">استطلاع #{{ $survey->id }}</h1>
                    <span class="px-2 py-1 rounded-lg text-xs bg-white/10 border border-white/10">
                        {{ $survey->statusLabel() }}
                    </span>
                    <span class="px-2 py-1 rounded-lg text-xs bg-emerald-500/15 border border-emerald-400/30 text-emerald-100">
                        {{ $survey->categoryLabel() }}
                    </span>
                </div>
                <p class="text-white/80 mt-2 text-lg font-semibold">{{ $survey->title }}</p>
                @if($survey->description)
                    <p class="text-white/60 mt-1">{{ $survey->description }}</p>
                @endif
                <div class="text-sm text-white/60 mt-3">
                    <span>منشئ: <b class="text-white">{{ $survey->creator?->name ?? '—' }}</b></span>
                    <span class="mx-2">•</span>
                    <span>المشاركات: <b class="text-white">{{ $survey->submissions_count }}</b></span>
                    <span class="mx-2">•</span>
                    <span>Anonymous: <b class="text-white">{{ $survey->is_anonymous ? 'نعم' : 'لا' }}</b></span>
                    <span class="mx-2">•</span>
                    <span>Multi: <b class="text-white">{{ $survey->allow_multiple_submissions ? 'نعم' : 'لا' }}</b></span>
                </div>

                @if($survey->context_type)
                    <div class="mt-2 text-xs text-white/50">
                        سياق: {{ $survey->context_type }} #{{ $survey->context_id }}
                    </div>
                @endif
            </div>

            <div class="flex flex-wrap gap-2">
                <a href="{{ route('superadmin.surveys.builder', $survey->id) }}"
                   class="px-4 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 font-semibold">
                    Builder
                </a>
                <a href="{{ route('superadmin.surveys.targets', $survey->id) }}"
                   class="px-4 py-2 rounded-xl bg-sky-600 hover:bg-sky-700 font-semibold">
                    Targets
                </a>
                <a href="{{ route('superadmin.surveys.analytics', $survey->id) }}"
                   class="px-4 py-2 rounded-xl bg-violet-600 hover:bg-violet-700 font-semibold">
                    Analytics
                </a>
                <a href="{{ route('surveys.show', $survey->id) }}" target="_blank"
                   class="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/15 border border-white/10">
                    Preview
                </a>
                <a href="{{ route('superadmin.surveys.edit', $survey->id) }}"
                   class="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/15 border border-white/10">
                    تعديل
                </a>
            </div>
        </div>

        @if(session('success'))
            <div class="mb-6 p-4 rounded-xl bg-emerald-500/15 border border-emerald-400/30 text-emerald-100">
                {{ session('success') }}
            </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
            <div class="lg:col-span-2 p-5 rounded-2xl bg-white/5 border border-white/10">
                <h2 class="font-bold text-lg mb-3">الأسئلة</h2>

                <div class="space-y-3">
                    @forelse($survey->questions as $q)
                        <div class="p-4 rounded-xl bg-white/5 border border-white/10">
                            <div class="flex items-start justify-between gap-3">
                                <div>
                                    <div class="text-white/60 text-xs mb-1">#{{ $q->id }} • {{ $q->typeLabel() }} • ترتيب: {{ $q->sort_order }} • {{ $q->is_required ? 'مطلوب' : 'اختياري' }}</div>
                                    <div class="font-semibold">{{ $q->question_text }}</div>

                                    @if(($q->config['help_text'] ?? null))
                                        <div class="text-xs text-white/60 mt-1">{{ $q->config['help_text'] }}</div>
                                    @endif

                                    @if(in_array($q->question_type, ['single','multi']))
                                        <div class="mt-2 flex flex-wrap gap-2">
                                            @foreach($q->options as $o)
                                                <span class="px-2 py-1 rounded-lg text-xs bg-white/10 border border-white/10">
                                                    {{ $o->option_text }}
                                                </span>
                                            @endforeach
                                        </div>
                                    @endif

                                    @if($q->question_type === 'scale')
                                        <div class="text-xs text-white/60 mt-2">
                                            Scale: {{ $q->config['scale_min'] ?? 1 }} → {{ $q->config['scale_max'] ?? 5 }}
                                            <span class="mx-1">|</span>
                                            {{ $q->config['scale_left_label'] ?? 'ضعيف' }} — {{ $q->config['scale_right_label'] ?? 'ممتاز' }}
                                        </div>
                                    @endif
                                </div>

                                <div class="text-xs text-white/50">
                                    {{ $q->is_active ? 'نشط' : 'موقوف' }}
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="p-6 rounded-xl bg-white/5 border border-white/10 text-center text-white/60">
                            لا يوجد أسئلة بعد… افتح Builder وابدأ.
                        </div>
                    @endforelse
                </div>
            </div>

            <div class="p-5 rounded-2xl bg-white/5 border border-white/10">
                <h2 class="font-bold text-lg mb-3">إجراءات سريعة</h2>

                <div class="space-y-3">
                    <form method="POST" action="{{ route('superadmin.surveys.activate', $survey->id) }}">
                        @csrf
                        <button class="w-full px-4 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 font-bold">
                            تفعيل الاستطلاع
                        </button>
                    </form>

                    <form method="POST" action="{{ route('superadmin.surveys.close', $survey->id) }}">
                        @csrf
                        <button class="w-full px-4 py-2 rounded-xl bg-amber-600 hover:bg-amber-700 font-bold">
                            إغلاق الاستطلاع
                        </button>
                    </form>

                    <form method="POST" action="{{ route('superadmin.surveys.archive', $survey->id) }}">
                        @csrf
                        <button class="w-full px-4 py-2 rounded-xl bg-slate-600 hover:bg-slate-700 font-bold">
                            أرشفة
                        </button>
                    </form>

                    <a href="{{ route('superadmin.surveys.export', $survey->id) }}"
                       class="block text-center w-full px-4 py-2 rounded-xl bg-white/10 hover:bg-white/15 border border-white/10">
                        تصدير CSV
                    </a>

                    <form method="POST" action="{{ route('superadmin.surveys.destroy', $survey->id) }}"
                          onsubmit="return confirm('متأكد بدك تحذف الاستطلاع بالكامل؟')">
                        @csrf
                        @method('DELETE')
                        <button class="w-full px-4 py-2 rounded-xl bg-rose-600 hover:bg-rose-700 font-bold">
                            حذف نهائي
                        </button>
                    </form>
                </div>

                <hr class="border-white/10 my-5">

                <h3 class="font-bold mb-2">رابط الاستطلاع</h3>
                <div class="p-3 rounded-xl bg-white/5 border border-white/10 text-xs break-all">
                    {{ route('surveys.show', $survey->id) }}
                </div>

                <div class="text-xs text-white/50 mt-2">
                    تقدر تحط الرابط بأي مكان (إعلان / إشعار / صفحة).
                </div>
            </div>
        </div>

        <div class="p-5 rounded-2xl bg-white/5 border border-white/10">
            <h2 class="font-bold text-lg mb-3">آخر المشاركات</h2>

            <div class="overflow-x-auto">
                <table class="min-w-full text-sm">
                    <thead class="text-white/70">
                        <tr>
                            <th class="text-right py-2 px-3">#</th>
                            <th class="text-right py-2 px-3">الوقت</th>
                            <th class="text-right py-2 px-3">المشارك</th>
                            <th class="text-right py-2 px-3">عضوية</th>
                            <th class="text-right py-2 px-3">جنس</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/10">
                        @forelse($latestSubs as $sub)
                            <tr>
                                <td class="py-2 px-3 text-white/80">{{ $sub->id }}</td>
                                <td class="py-2 px-3 text-white/80">{{ $sub->submitted_at?->format('Y-m-d H:i') ?? '—' }}</td>
                                <td class="py-2 px-3">
                                    @if($survey->is_anonymous)
                                        <span class="text-white/60">مخفي</span>
                                    @else
                                        <div class="font-semibold">{{ $sub->user?->name ?? '—' }}</div>
                                        <div class="text-xs text-white/50">{{ $sub->user?->email }}</div>
                                    @endif
                                </td>
                                <td class="py-2 px-3 text-white/70">{{ $sub->membership_status_snapshot ?? '—' }}</td>
                                <td class="py-2 px-3 text-white/70">{{ $sub->gender_snapshot ?? '—' }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="py-6 text-center text-white/60">لا يوجد مشاركات حتى الآن.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

        </div>

    </div>
</div>
@endsection