@extends('layouts.superadmin')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black py-6 sm:py-8" dir="rtl">
  <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

    {{-- HERO --}}
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-950/95 to-black/95
                border border-fuchsia-400/25 shadow-2xl shadow-fuchsia-500/10">
      <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-fuchsia-400/15 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-cyan-500/15 blur-3xl"></div>

      <div class="relative p-5 sm:p-7 lg:p-8 flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
        <div class="space-y-3 max-w-3xl">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-fuchsia-300/20 text-[11px] text-fuchsia-100">
            <i class="fa-solid fa-chart-simple text-[11px]"></i>
            <span>نظام الاستطلاعات — تحليلات ملحمية • SuperAdmin</span>
          </div>

          <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
            Analytics — <span class="text-fuchsia-300">تحليلات الاستطلاع</span>
          </h1>

          <p class="text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
            استطلاع #{{ $survey->id }} • {{ $survey->title }}
          </p>

          <div class="flex flex-wrap gap-2 pt-1">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/85">
              <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
              إجمالي المشاركات: {{ number_format($totalSubmissions) }}
            </span>
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/85">
              <span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
              الحالة: {{ $survey->statusLabel() }}
            </span>
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/85">
              <span class="w-1.5 h-1.5 rounded-full bg-cyan-400"></span>
              التصنيف: {{ $survey->categoryLabel() }}
            </span>
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/85">
              <span class="w-1.5 h-1.5 rounded-full bg-violet-400"></span>
              Anonymous: {{ $survey->is_anonymous ? 'نعم' : 'لا' }}
            </span>
          </div>
        </div>

        {{-- ACTIONS --}}
        <div class="w-full lg:w-auto">
          <div class="rounded-2xl bg-black/40 border border-white/15 px-4 py-3 space-y-2 text-xs text-slate-100">
            <div class="flex items-center gap-2">
              <div class="w-9 h-9 rounded-xl bg-fuchsia-500/15 text-fuchsia-200 grid place-items-center border border-fuchsia-400/25">
                <i class="fa-solid fa-bolt"></i>
              </div>
              <div class="min-w-0">
                <div class="text-[11px] text-slate-300/80">لوحة التحكم</div>
                <div class="font-extrabold text-sm truncate">إدارة الاستطلاع</div>
              </div>
            </div>

            <div class="grid grid-cols-2 gap-2 pt-2">
              <a href="{{ route('superadmin.surveys.builder', $survey->id) }}"
                 class="inline-flex items-center justify-center gap-2 px-3 py-2 rounded-2xl
                        bg-emerald-500/15 border border-emerald-400/25 text-emerald-100 text-[11px] font-bold hover:bg-emerald-500/20 transition">
                <i class="fa-solid fa-screwdriver-wrench text-[11px]"></i> Builder
              </a>

              <a href="{{ route('superadmin.surveys.targets', $survey->id) }}"
                 class="inline-flex items-center justify-center gap-2 px-3 py-2 rounded-2xl
                        bg-sky-500/15 border border-sky-400/25 text-sky-100 text-[11px] font-bold hover:bg-sky-500/20 transition">
                <i class="fa-solid fa-bullseye text-[11px]"></i> Targets
              </a>

              <a href="{{ route('superadmin.surveys.show', $survey->id) }}"
                 class="inline-flex items-center justify-center gap-2 px-3 py-2 rounded-2xl
                        bg-white/10 border border-white/15 text-white/90 text-[11px] font-bold hover:bg-white/15 transition">
                <i class="fa-solid fa-circle-info text-[11px]"></i> تفاصيل
              </a>

              <a href="{{ route('superadmin.surveys.export', $survey->id) }}"
                 class="inline-flex items-center justify-center gap-2 px-3 py-2 rounded-2xl
                        bg-white/10 border border-white/15 text-white/90 text-[11px] font-bold hover:bg-white/15 transition">
                <i class="fa-solid fa-file-csv text-[11px]"></i> CSV
              </a>
            </div>
          </div>
        </div>

      </div>
    </div>

    {{-- FLASH --}}
    @if(session('success'))
      <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 text-emerald-200 px-4 py-3 text-sm">
        {{ session('success') }}
      </div>
    @endif

    {{-- STATS CARDS (سقراط ستايل) --}}
    <div class="grid gap-4 lg:grid-cols-4">
      <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900 to-slate-950 border border-white/10 shadow-xl p-5">
        <div class="pointer-events-none absolute -top-16 -right-10 w-44 h-44 rounded-full bg-white/8 blur-3xl"></div>
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-white/10 border border-white/10 grid place-items-center text-white">
            <i class="fa-solid fa-layer-group"></i>
          </div>
          <div>
            <div class="text-[11px] text-slate-300/80">إجمالي المشاركات</div>
            <div class="text-2xl font-extrabold text-white">{{ number_format($totalSubmissions) }}</div>
          </div>
        </div>
      </div>

      <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-fuchsia-600/10 via-slate-950 to-slate-950 border border-fuchsia-400/20 shadow-xl p-5">
        <div class="pointer-events-none absolute -top-16 -left-10 w-44 h-44 rounded-full bg-fuchsia-400/10 blur-3xl"></div>
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-fuchsia-500/15 border border-fuchsia-400/25 grid place-items-center text-fuchsia-200">
            <i class="fa-solid fa-flag-checkered"></i>
          </div>
          <div>
            <div class="text-[11px] text-slate-300/80">الحالة</div>
            <div class="text-2xl font-extrabold text-fuchsia-200">{{ $survey->statusLabel() }}</div>
          </div>
        </div>
      </div>

      <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-cyan-600/10 via-slate-950 to-slate-950 border border-cyan-400/20 shadow-xl p-5">
        <div class="pointer-events-none absolute -top-16 -right-10 w-44 h-44 rounded-full bg-cyan-400/10 blur-3xl"></div>
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-cyan-500/15 border border-cyan-400/25 grid place-items-center text-cyan-200">
            <i class="fa-solid fa-tags"></i>
          </div>
          <div>
            <div class="text-[11px] text-slate-300/80">التصنيف</div>
            <div class="text-2xl font-extrabold text-cyan-200">{{ $survey->categoryLabel() }}</div>
          </div>
        </div>
      </div>

      <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-amber-600/10 via-slate-950 to-slate-950 border border-amber-400/20 shadow-xl p-5">
        <div class="pointer-events-none absolute -top-16 -left-10 w-44 h-44 rounded-full bg-amber-400/10 blur-3xl"></div>
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-amber-500/15 border border-amber-400/25 grid place-items-center text-amber-200">
            <i class="fa-solid fa-user-secret"></i>
          </div>
          <div>
            <div class="text-[11px] text-slate-300/80">Anonymous</div>
            <div class="text-2xl font-extrabold text-amber-200">{{ $survey->is_anonymous ? 'نعم' : 'لا' }}</div>
          </div>
        </div>
      </div>
    </div>

    {{-- CHARTS --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <div class="relative overflow-hidden p-5 rounded-3xl bg-gradient-to-br from-slate-900/70 via-slate-950/70 to-black/70 border border-white/10 shadow-xl">
        <div class="pointer-events-none absolute -top-16 -right-10 w-44 h-44 rounded-full bg-fuchsia-500/10 blur-3xl"></div>
        <h2 class="font-extrabold text-base text-white mb-3">مشاركات آخر 14 يوم</h2>
        <canvas id="trendChart" height="170"></canvas>
      </div>

      <div class="relative overflow-hidden p-5 rounded-3xl bg-gradient-to-br from-slate-900/70 via-slate-950/70 to-black/70 border border-white/10 shadow-xl">
        <div class="pointer-events-none absolute -top-16 -left-10 w-44 h-44 rounded-full bg-cyan-500/10 blur-3xl"></div>
        <h2 class="font-extrabold text-base text-white mb-3">حسب حالة العضوية</h2>
        <canvas id="membershipChart" height="170"></canvas>
      </div>

      <div class="relative overflow-hidden p-5 rounded-3xl bg-gradient-to-br from-slate-900/70 via-slate-950/70 to-black/70 border border-white/10 shadow-xl lg:col-span-2">
        <div class="pointer-events-none absolute -bottom-16 -right-10 w-44 h-44 rounded-full bg-amber-500/10 blur-3xl"></div>
        <h2 class="font-extrabold text-base text-white mb-3">حسب الجنس</h2>
        <canvas id="genderChart" height="120"></canvas>
      </div>
    </div>

    {{-- ===== قائمة المشاركين + مودال إجابات ===== --}}
    <div class="rounded-3xl border border-white/10 bg-slate-950/70 overflow-hidden shadow-xl">
      <div class="px-4 sm:px-6 py-4 border-b border-white/10 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
          <h2 class="text-sm sm:text-base font-extrabold text-fuchsia-200">المشاركون في الاستطلاع</h2>
          <p class="text-[11px] sm:text-xs text-slate-300/80 mt-1">اضغط “عرض الإجابات” لفتح مودال بسكرول يعرض إجابات العضو.</p>
        </div>

        <div class="w-full sm:w-72">
          <div class="relative">
            <i class="fa-solid fa-magnifying-glass absolute right-3 top-1/2 -translate-y-1/2 text-white/50 text-xs"></i>
            <input id="submissionsSearch"
                   placeholder="ابحث بالاسم/الإيميل…"
                   class="w-full rounded-2xl bg-black/40 border border-white/15 text-white/90 text-xs px-9 py-2.5
                          focus:outline-none focus:ring-2 focus:ring-fuchsia-500/35">
          </div>
        </div>
      </div>
{{-- ===== قائمة المشاركين (Cards) + مودال إجابات ===== --}}
<div class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-slate-950/70 via-slate-950/60 to-black/70 shadow-xl">
    <div class="pointer-events-none absolute -top-24 -right-12 w-72 h-72 rounded-full bg-fuchsia-500/10 blur-3xl"></div>
    <div class="pointer-events-none absolute -bottom-24 -left-12 w-72 h-72 rounded-full bg-cyan-500/10 blur-3xl"></div>

    <div class="px-4 sm:px-6 py-5 border-b border-white/10 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div class="min-w-0">
            <h2 class="text-sm sm:text-base font-extrabold text-fuchsia-200">قائمة الأعضاء الذين أجابوا</h2>
            <p class="text-[11px] sm:text-xs text-slate-300/80 mt-1">
                اضغط على أي عضو لفتح مودال “إجابات العضو” (سكرول داخلي).
            </p>
        </div>

        <div class="w-full sm:w-80">
            <div class="relative">
                <i class="fa-solid fa-magnifying-glass absolute right-3 top-1/2 -translate-y-1/2 text-white/50 text-xs"></i>
                <input id="submissionsSearch"
                       placeholder="ابحث بالاسم/الإيميل…"
                       class="w-full rounded-2xl bg-black/40 border border-white/15 text-white/90 text-xs px-9 py-2.5
                              focus:outline-none focus:ring-2 focus:ring-fuchsia-500/35">
            </div>
        </div>
    </div>

    <div class="p-4 sm:p-6">
        @if(empty($submissions) || count($submissions) === 0)
            <div class="rounded-3xl border border-dashed border-white/15 bg-black/30 px-4 py-10 text-center text-slate-300/80 text-sm">
                لا يوجد مشاركات بعد.
            </div>
        @else
            <div id="submissionsGrid" class="grid gap-3 sm:gap-4 md:grid-cols-2 xl:grid-cols-3">
                @foreach($submissions as $sub)
                    @php
                        $key    = 'sub_'.$sub['id'];
                        $uName  = $sub['user_name'] ?? ('User#'.($sub['user_id'] ?? '—'));
                        $uEmail = $sub['user_email'] ?? '';
                        $ms     = $sub['membership_status_snapshot'] ?? '—';
                        $gd     = $sub['gender_snapshot'] ?? '—';
                        $sentAt = $sub['submitted_at'] ?? null;
                        $answersCount = count($sub['answers'] ?? []);
                    @endphp

                    <button type="button"
                            onclick="openSubmissionModal('{{ $key }}')"
                            class="submission-card group text-right w-full rounded-3xl border border-white/10
                                   bg-gradient-to-br from-slate-900/70 via-slate-950/70 to-black/70
                                   hover:border-fuchsia-400/25 hover:shadow-[0_18px_55px_rgba(217,70,239,0.12)]
                                   transition overflow-hidden"
                            data-search="{{ mb_strtolower($uName.' '.$uEmail) }}">
                        <div class="p-4 sm:p-5">
                            <div class="flex items-start justify-between gap-3">
                                <div class="flex items-center gap-3 min-w-0">
                                    <div class="w-11 h-11 rounded-2xl grid place-items-center
                                                bg-gradient-to-br from-fuchsia-500/20 to-cyan-500/20 border border-white/10">
                                        <i class="fa-solid fa-user text-white/80"></i>
                                    </div>

                                    <div class="min-w-0">
                                        <div class="font-extrabold text-white truncate">{{ $uName }}</div>
                                        <div class="text-[11px] text-white/60 truncate">{{ $uEmail }}</div>
                                    </div>
                                </div>

                                <span class="shrink-0 px-3 py-1 rounded-full text-[11px] font-extrabold
                                             bg-emerald-500/10 text-emerald-200 border border-emerald-400/20">
                                    {{ $answersCount }} جواب
                                </span>
                            </div>

                            <div class="mt-4 grid grid-cols-3 gap-2 text-[11px]">
                                <div class="rounded-2xl bg-white/5 border border-white/10 p-2.5">
                                    <div class="text-white/50">العضوية</div>
                                    <div class="font-bold text-cyan-200 truncate">{{ $ms }}</div>
                                </div>

                                <div class="rounded-2xl bg-white/5 border border-white/10 p-2.5">
                                    <div class="text-white/50">الجنس</div>
                                    <div class="font-bold text-amber-200 truncate">{{ $gd }}</div>
                                </div>

                                <div class="rounded-2xl bg-white/5 border border-white/10 p-2.5">
                                    <div class="text-white/50">الوقت</div>
                                    <div class="font-bold text-white/80 truncate">
                                        {{ $sentAt ? \Carbon\Carbon::parse($sentAt)->format('m-d H:i') : '—' }}
                                    </div>
                                </div>
                            </div>

                            <div class="mt-4 inline-flex items-center gap-2 px-4 py-2 rounded-2xl text-xs font-extrabold
                                        bg-gradient-to-r from-fuchsia-300 via-fuchsia-200 to-cyan-200 text-slate-900
                                        shadow-lg shadow-fuchsia-500/20 group-hover:scale-[1.01] active:scale-100 transition">
                                <i class="fa-solid fa-eye text-[11px]"></i>
                                عرض الإجابات
                            </div>
                        </div>
                    </button>

                    {{-- ===== مودال لكل submission ===== --}}
                    <div id="{{ $key }}_backdrop" class="hidden fixed inset-0 z-[99990] bg-black/70 backdrop-blur-sm"></div>

                    <div id="{{ $key }}_modal" class="hidden fixed inset-0 z-[100000] p-3 sm:p-6">
                        <div class="w-full h-full flex items-center justify-center">
                            <div class="w-full max-w-3xl rounded-3xl overflow-hidden
                                        border border-fuchsia-400/25 bg-gradient-to-br from-slate-950 via-slate-900 to-black shadow-2xl">

                                {{-- header ثابت --}}
                                <div class="p-4 sm:p-6 border-b border-white/10 flex items-start justify-between gap-3">
                                    <div class="min-w-0">
                                        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
                                            <i class="fa-solid fa-clipboard-check text-[11px]"></i>
                                            <span>إجابات العضو</span>
                                        </div>

                                        <h3 class="mt-2 text-lg sm:text-xl font-extrabold text-white truncate">{{ $uName }}</h3>
                                        <div class="mt-1 text-[11px] text-white/60">
                                            <span class="me-2">#{{ $sub['id'] }}</span>
                                            @if($sentAt) • {{ \Carbon\Carbon::parse($sentAt)->format('Y-m-d H:i') }} @endif
                                        </div>
                                    </div>

                                    <button type="button"
                                            onclick="closeSubmissionModal('{{ $key }}')"
                                            class="shrink-0 w-10 h-10 rounded-2xl bg-white/5 border border-white/10 text-white/80 hover:text-white hover:bg-white/10 transition">
                                        ✕
                                    </button>
                                </div>

                                {{-- body سكرول --}}
                                <div class="p-4 sm:p-6 overflow-y-auto max-h-[78vh] space-y-3">
                                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
                                        <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
                                            <div class="text-[10px] text-white/60">العضوية</div>
                                            <div class="font-extrabold text-cyan-200">{{ $ms }}</div>
                                        </div>
                                        <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
                                            <div class="text-[10px] text-white/60">الجنس</div>
                                            <div class="font-extrabold text-amber-200">{{ $gd }}</div>
                                        </div>
                                        <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
                                            <div class="text-[10px] text-white/60">عدد الإجابات</div>
                                            <div class="font-extrabold text-fuchsia-200">{{ $answersCount }}</div>
                                        </div>
                                    </div>

                                    <div class="h-px bg-gradient-to-r from-transparent via-white/15 to-transparent my-2"></div>

                                    @forelse(($sub['answers'] ?? []) as $a)
                                        @php
                                            $text = $a['answer_text'] ?? null;
                                            $val  = $a['answer_value'] ?? null;
                                            $opt  = $a['option_text'] ?? null;
                                            $out  = $opt ?? $text ?? $val ?? '—';
                                        @endphp

                                        <div class="rounded-2xl bg-white/5 border border-white/10 p-4">
                                            <div class="flex items-start justify-between gap-3">
                                                <div class="min-w-0">
                                                    <div class="text-[11px] text-white/60 mb-1">
                                                        سؤال #{{ $a['question_id'] ?? '—' }} • {{ strtoupper($a['question_type'] ?? '') }}
                                                    </div>
                                                    <div class="font-extrabold text-white">
                                                        {{ $a['question_text'] ?? '—' }}
                                                    </div>
                                                </div>

                                                <span class="px-2 py-0.5 rounded-full text-[10px] bg-fuchsia-500/15 text-fuchsia-200 border border-fuchsia-400/25">
                                                    جواب
                                                </span>
                                            </div>

                                            <div class="mt-3 rounded-xl bg-black/30 border border-white/10 p-3 text-sm text-white/90 leading-relaxed">
                                                {{ $out }}
                                            </div>
                                        </div>
                                    @empty
                                        <div class="rounded-2xl border border-dashed border-white/15 bg-black/30 p-6 text-center text-white/60">
                                            لا توجد إجابات ضمن هذا الـ Submission.
                                        </div>
                                    @endforelse
                                </div>

                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</div>

{{-- JS: Search + Modal --}}
<script>
(function(){
  // search
  const input = document.getElementById('submissionsSearch');
  const cards = document.querySelectorAll('.submission-card');
  if (input && cards.length){
    input.addEventListener('input', function(){
      const v = (input.value || '').trim().toLowerCase();
      cards.forEach(c => {
        const hay = c.getAttribute('data-search') || '';
        c.style.display = (!v || hay.includes(v)) ? '' : 'none';
      });
    });
  }
})();

function openSubmissionModal(key){
  const b = document.getElementById(key+'_backdrop');
  const m = document.getElementById(key+'_modal');
  if(b) b.classList.remove('hidden');
  if(m) m.classList.remove('hidden');
  document.body.classList.add('overflow-hidden');
}

function closeSubmissionModal(key){
  const b = document.getElementById(key+'_backdrop');
  const m = document.getElementById(key+'_modal');
  if(b) b.classList.add('hidden');
  if(m) m.classList.add('hidden');
  document.body.classList.remove('overflow-hidden');
}
</script>
      <div class="overflow-x-auto">
        <table class="w-full text-sm">
          <thead class="bg-white/5">
            <tr class="text-white/60 text-[11px] font-semibold">
              <th class="text-right px-4 py-3">العضو</th>
              <th class="text-right px-4 py-3">العضوية</th>
              <th class="text-right px-4 py-3">الجنس</th>
              <th class="text-right px-4 py-3">وقت الإرسال</th>
              <th class="text-right px-4 py-3">إجابات</th>
            </tr>
          </thead>

          <tbody id="submissionsTbody" class="divide-y divide-white/5">
            @forelse($submissions as $sub)
              @php
                $rowKey = 'sub_'.$sub['id'];
                $uName = $sub['user_name'] ?? ('User#'.($sub['user_id'] ?? '—'));
                $uEmail = $sub['user_email'] ?? '';
                $ms = $sub['membership_status_snapshot'] ?? '—';
                $gd = $sub['gender_snapshot'] ?? '—';
                $sentAt = $sub['submitted_at'] ?? null;
              @endphp

              <tr class="text-white/80 submission-row"
                  data-search="{{ mb_strtolower($uName.' '.$uEmail) }}">
                <td class="px-4 py-3">
                  <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-2xl bg-gradient-to-br from-fuchsia-500/20 to-cyan-500/20 border border-white/10 grid place-items-center">
                      <i class="fa-solid fa-user text-white/80"></i>
                    </div>
                    <div class="min-w-0">
                      <div class="font-extrabold text-white truncate">{{ $uName }}</div>
                      <div class="text-[11px] text-white/60 truncate">{{ $uEmail }}</div>
                    </div>
                  </div>
                </td>

                <td class="px-4 py-3">
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-bold
                               bg-cyan-500/10 text-cyan-200 border border-cyan-400/20">
                    {{ $ms }}
                  </span>
                </td>

                <td class="px-4 py-3">
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-bold
                               bg-amber-500/10 text-amber-200 border border-amber-400/20">
                    {{ $gd }}
                  </span>
                </td>

                <td class="px-4 py-3 text-[12px] text-white/70">
                  {{ $sentAt ? \Carbon\Carbon::parse($sentAt)->format('Y-m-d H:i') : '—' }}
                </td>

                <td class="px-4 py-3">
                  <button type="button"
                          onclick="openSubmissionModal('{{ $rowKey }}')"
                          class="inline-flex items-center gap-2 px-4 py-2 rounded-2xl text-xs font-extrabold
                                 bg-gradient-to-r from-fuchsia-300 via-fuchsia-200 to-cyan-200 text-slate-900
                                 shadow-lg shadow-fuchsia-500/20 hover:scale-[1.01] active:scale-100 transition">
                    <i class="fa-solid fa-eye text-[11px]"></i>
                    عرض الإجابات
                  </button>
                </td>
              </tr>

              {{-- ===== MODAL لكل Submission ===== --}}
              <div id="{{ $rowKey }}_backdrop" class="hidden fixed inset-0 z-[99990] bg-black/70 backdrop-blur-sm"></div>

              <div id="{{ $rowKey }}_modal" class="hidden fixed inset-0 z-[100000] p-3 sm:p-6">
                <div class="w-full h-full flex items-center justify-center">
                  <div class="w-full max-w-3xl rounded-3xl overflow-hidden
                              border border-fuchsia-400/25 bg-gradient-to-br from-slate-950 via-slate-900 to-black shadow-2xl">

                    <div class="p-4 sm:p-6 border-b border-white/10 flex items-start justify-between gap-3">
                      <div class="min-w-0">
                        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
                          <i class="fa-solid fa-clipboard-check text-[11px]"></i>
                          <span>إجابات العضو</span>
                        </div>

                        <h3 class="mt-2 text-lg sm:text-xl font-extrabold text-white truncate">
                          {{ $uName }}
                        </h3>

                        <div class="mt-1 text-[11px] text-white/60">
                          <span class="me-2">#{{ $sub['id'] }}</span>
                          @if($sentAt) • {{ \Carbon\Carbon::parse($sentAt)->format('Y-m-d H:i') }} @endif
                        </div>
                      </div>

                      <button type="button"
                              onclick="closeSubmissionModal('{{ $rowKey }}')"
                              class="shrink-0 w-10 h-10 rounded-2xl bg-white/5 border border-white/10 text-white/80 hover:text-white hover:bg-white/10 transition">
                        ✕
                      </button>
                    </div>

                    <div class="p-4 sm:p-6 overflow-y-auto max-h-[75vh] space-y-3">
                      <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
                        <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
                          <div class="text-[10px] text-white/60">العضوية</div>
                          <div class="font-extrabold text-cyan-200">{{ $ms }}</div>
                        </div>
                        <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
                          <div class="text-[10px] text-white/60">الجنس</div>
                          <div class="font-extrabold text-amber-200">{{ $gd }}</div>
                        </div>
                        <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
                          <div class="text-[10px] text-white/60">عدد الإجابات</div>
                          <div class="font-extrabold text-fuchsia-200">{{ count($sub['answers'] ?? []) }}</div>
                        </div>
                      </div>

                      <div class="h-px bg-gradient-to-r from-transparent via-white/15 to-transparent my-2"></div>

                      @forelse(($sub['answers'] ?? []) as $a)
                        <div class="rounded-2xl bg-white/5 border border-white/10 p-4">
                          <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0">
                              <div class="text-[11px] text-white/60 mb-1">
                                سؤال #{{ $a['question_id'] ?? '—' }} • {{ strtoupper($a['question_type'] ?? '') }}
                              </div>
                              <div class="font-extrabold text-white">
                                {{ $a['question_text'] ?? '—' }}
                              </div>
                            </div>
                            <span class="px-2 py-0.5 rounded-full text-[10px] bg-fuchsia-500/15 text-fuchsia-200 border border-fuchsia-400/25">
                              جواب
                            </span>
                          </div>

                          <div class="mt-3 text-sm text-white/85 leading-relaxed">
                            @php
                              $text = $a['answer_text'] ?? null;
                              $val  = $a['answer_value'] ?? null;
                              $opt  = $a['option_text'] ?? null;
                              $out  = $opt ?? $text ?? $val ?? '—';
                            @endphp

                            <div class="rounded-xl bg-black/30 border border-white/10 p-3">
                              {{ $out }}
                            </div>
                          </div>
                        </div>
                      @empty
                        <div class="rounded-2xl border border-dashed border-white/15 bg-black/30 p-6 text-center text-white/60">
                          لا توجد إجابات ضمن هذا الـ Submission.
                        </div>
                      @endforelse
                    </div>

                  </div>
                </div>
              </div>

            @empty
              <tr>
                <td colspan="5" class="px-4 py-10 text-center text-white/60">
                  لا يوجد مشاركات بعد.
                </td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>

    {{-- تحليلات الأسئلة (كما عندك) --}}
    <div class="space-y-6">
      <h2 class="text-xl font-extrabold text-white">تحليلات الأسئلة</h2>

      @forelse($questionStats as $qs)
        <div class="p-5 rounded-3xl bg-white/5 border border-white/10 shadow-xl">
          <div class="flex items-start justify-between gap-4">
            <div>
              <div class="text-xs text-white/60 mb-1">سؤال #{{ $qs['id'] }} • {{ strtoupper($qs['type']) }}</div>
              <div class="font-extrabold text-lg text-white">{{ $qs['text'] }}</div>

              @if(($qs['type'] ?? '') === 'scale' && isset($qs['avg']))
                <div class="text-sm text-white/70 mt-1">
                  متوسط: <b class="text-white">{{ $qs['avg'] ?? '—' }}</b>
                  @if(isset($qs['scale_left_label']) || isset($qs['scale_right_label']))
                    <span class="mx-2">•</span>
                    {{ $qs['scale_left_label'] ?? '' }} — {{ $qs['scale_right_label'] ?? '' }}
                  @endif
                </div>
              @endif
            </div>
          </div>

          @if(in_array($qs['type'], ['single','multi','scale']))
            <div class="mt-4">
              <canvas id="qchart_{{ $qs['id'] }}" height="120"></canvas>
            </div>
          @endif

          @if(($qs['type'] ?? '') === 'text')
            <div class="mt-4">
              <div class="text-white/70 mb-2">آخر الإجابات ({{ count($qs['latest'] ?? []) }})</div>
              <div class="space-y-2">
                @forelse($qs['latest'] as $t)
                  <div class="p-3 rounded-xl bg-white/5 border border-white/10 text-white/90">
                    {{ $t }}
                  </div>
                @empty
                  <div class="text-white/60">لا يوجد إجابات نصية.</div>
                @endforelse
              </div>
            </div>
          @endif
        </div>
      @empty
        <div class="p-6 rounded-2xl bg-white/5 border border-white/10 text-center text-white/60">
          لا يوجد بيانات بعد.
        </div>
      @endforelse
    </div>

  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
(function(){
  // Trend
  new Chart(document.getElementById('trendChart'), {
    type: 'line',
    data: {
      labels: @json($trendLabels),
      datasets: [{ label: 'مشاركات', data: @json($trendCounts), tension: 0.25 }]
    },
    options: {
      scales: {
        x: { ticks: { color: '#fff' }, grid: { color: 'rgba(255,255,255,0.08)' } },
        y: { ticks: { color: '#fff' }, grid: { color: 'rgba(255,255,255,0.08)' } },
      },
      plugins: { legend: { labels: { color: '#fff' } } }
    }
  });

  // Membership
  const membershipLabels = [];
  const membershipValues = [];
  const membershipMap = @json($byMembership);
  const membershipLabelsDict = @json($membershipStatusLabels);

  Object.keys(membershipMap).forEach(function(k){
    const label = membershipLabelsDict[k] ? (membershipLabelsDict[k] + ' ('+k+')') : (k || 'غير محدد');
    membershipLabels.push(label);
    membershipValues.push(membershipMap[k]);
  });

  new Chart(document.getElementById('membershipChart'), {
    type: 'bar',
    data: { labels: membershipLabels, datasets: [{ label: 'مشاركات', data: membershipValues }] },
    options: {
      scales: {
        x: { ticks: { color: '#fff' }, grid: { color: 'rgba(255,255,255,0.08)' } },
        y: { ticks: { color: '#fff' }, grid: { color: 'rgba(255,255,255,0.08)' } },
      },
      plugins: { legend: { labels: { color: '#fff' } } }
    }
  });

  // Gender
  const genderLabels = [];
  const genderValues = [];
  const genderMap = @json($byGender);
  const genderLabelsDict = @json($genderLabels);

  Object.keys(genderMap).forEach(function(k){
    const label = genderLabelsDict[k] ? (genderLabelsDict[k] + ' ('+k+')') : (k || 'غير محدد');
    genderLabels.push(label);
    genderValues.push(genderMap[k]);
  });

  new Chart(document.getElementById('genderChart'), {
    type: 'doughnut',
    data: { labels: genderLabels, datasets: [{ data: genderValues }] },
    options: { plugins: { legend: { labels: { color: '#fff' } } } }
  });

  // Per question charts
  const questions = @json($questionStats);
  questions.forEach(function(q){
    if (!['single','multi','scale'].includes(q.type)) return;
    const ctx = document.getElementById('qchart_'+q.id);
    if (!ctx) return;

    new Chart(ctx, {
      type: 'bar',
      data: { labels: q.labels || [], datasets: [{ label: 'عدد الإجابات', data: q.values || [] }] },
      options: {
        scales: {
          x: { ticks: { color: '#fff' }, grid: { color: 'rgba(255,255,255,0.08)' } },
          y: { ticks: { color: '#fff' }, grid: { color: 'rgba(255,255,255,0.08)' } },
        },
        plugins: { legend: { labels: { color: '#fff' } } }
      }
    });
  });

  // Search (client-side)
  const input = document.getElementById('submissionsSearch');
  const rows  = document.querySelectorAll('#submissionsTbody .submission-row');
  if (input && rows.length){
    input.addEventListener('input', function(){
      const v = (input.value || '').trim().toLowerCase();
      rows.forEach(r => {
        const hay = r.getAttribute('data-search') || '';
        r.style.display = (!v || hay.includes(v)) ? '' : 'none';
      });
    });
  }
})();

// Modal helpers
function openSubmissionModal(key){
  const b = document.getElementById(key+'_backdrop');
  const m = document.getElementById(key+'_modal');
  if(b) b.classList.remove('hidden');
  if(m) m.classList.remove('hidden');
  document.body.classList.add('overflow-hidden');
}

function closeSubmissionModal(key){
  const b = document.getElementById(key+'_backdrop');
  const m = document.getElementById(key+'_modal');
  if(b) b.classList.add('hidden');
  if(m) m.classList.add('hidden');
  document.body.classList.remove('overflow-hidden');
}
</script>
@endsection