@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-center md:justify-between gap-4 mb-6">
            <div>
                <h1 class="text-2xl md:text-3xl font-extrabold">إدارة الاستطلاعات</h1>
                <p class="text-white/70 mt-1">فلترة + إدارة + وصول سريع للبناء والتحليلات</p>
            </div>
            <div class="flex gap-2">
                <a href="{{ route('superadmin.surveys.dashboard') }}"
                   class="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/15 border border-white/10">
                    لوحة الإحصائيات
                </a>
                <a href="{{ route('superadmin.surveys.create') }}"
                   class="px-4 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 font-semibold">
                    + إنشاء استطلاع
                </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

        <!-- Filters -->
        <form class="p-4 rounded-2xl bg-white/5 border border-white/10 mb-6" method="GET">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
                <input name="q" value="{{ request('q') }}" placeholder="بحث: عنوان / وصف / سياق"
                       class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none"/>

                <select name="status" class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2">
                    <option value="">كل الحالات</option>
                    <option value="draft" @selected(request('status')==='draft')>مسودة</option>
                    <option value="active" @selected(request('status')==='active')>نشط</option>
                    <option value="closed" @selected(request('status')==='closed')>مغلق</option>
                    <option value="archived" @selected(request('status')==='archived')>مؤرشف</option>
                </select>

                <select name="category" class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2">
                    <option value="">كل التصنيفات</option>
                    <option value="general" @selected(request('category')==='general')>عام</option>
                    <option value="management" @selected(request('category')==='management')>عن الإدارة</option>
                </select>

                <button class="rounded-xl bg-emerald-600 hover:bg-emerald-700 font-semibold px-4 py-2">
                    تطبيق
                </button>
            </div>
        </form>

        <div class="p-5 rounded-2xl bg-white/5 border border-white/10">
            <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>
                            <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($items as $s)
                            <tr>
                                <td class="py-2 px-3 text-white/80">{{ $s->id }}</td>
                                <td class="py-2 px-3 font-semibold">
                                    <a href="{{ route('superadmin.surveys.show', $s->id) }}" class="hover:underline">
                                        {{ $s->title }}
                                    </a>
                                    @if($s->context_type)
                                        <div class="text-xs text-white/50 mt-1">سياق: {{ $s->context_type }} #{{ $s->context_id }}</div>
                                    @endif
                                </td>
                                <td class="py-2 px-3 text-white/80">{{ $s->categoryLabel() }}</td>
                                <td class="py-2 px-3">
                                    <span class="px-2 py-1 rounded-lg text-xs bg-white/10 border border-white/10">
                                        {{ $s->statusLabel() }}
                                    </span>
                                </td>
                                <td class="py-2 px-3 text-white/80">{{ $s->submissions_count }}</td>
                                <td class="py-2 px-3 text-white/70 text-xs">
                                    <div>بدء: {{ $s->start_at?->format('Y-m-d H:i') ?? '—' }}</div>
                                    <div>نهاية: {{ $s->end_at?->format('Y-m-d H:i') ?? '—' }}</div>
                                </td>
                                <td class="py-2 px-3 text-white/80">{{ $s->creator?->name ?? '—' }}</td>
                                <td class="py-2 px-3">
                                    <div class="flex flex-wrap gap-2">
                                        <a class="text-emerald-300 hover:underline" href="{{ route('superadmin.surveys.builder', $s->id) }}">Builder</a>
                                        <a class="text-sky-300 hover:underline" href="{{ route('superadmin.surveys.targets', $s->id) }}">Targets</a>
                                        <a class="text-violet-300 hover:underline" href="{{ route('superadmin.surveys.analytics', $s->id) }}">Analytics</a>
                                        <a class="text-white/80 hover:underline" href="{{ route('surveys.show', $s->id) }}" target="_blank">Preview</a>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="py-6 text-center text-white/60">لا يوجد نتائج.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="mt-4">
                {{ $items->links() }}
            </div>
        </div>

    </div>
</div>
@endsection