@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 rtl" 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-poll-h text-[11px]"></i>
            <span>نظام الاستطلاعات — سقراط • SuperAdmin</span>
          </div>

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

          <p class="text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
            إحصائيات حيّة + تحكّم كامل + Analytics برسوم (Charts) + عرض إجابات الأعضاء بمودال ملحمي.
          </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($counts['total'] ?? 0) }}
            </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>
              نشط: {{ number_format($counts['active'] ?? 0) }}
            </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>
              مسودات: {{ number_format($counts['draft'] ?? 0) }}
            </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>
              مغلق/مؤرشف: {{ number_format(($counts['closed'] ?? 0) + ($counts['archived'] ?? 0)) }}
            </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.create') }}"
                 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-square-plus text-[11px]"></i> إنشاء
              </a>

              <a href="{{ route('superadmin.surveys.index') }}"
                 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-list text-[11px]"></i> الإدارة
              </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($counts['total'] ?? 0) }}</div>
          </div>
        </div>
      </div>

      <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-emerald-600/10 via-slate-950 to-slate-950 border border-emerald-400/20 shadow-xl p-5">
        <div class="pointer-events-none absolute -top-16 -left-10 w-44 h-44 rounded-full bg-emerald-400/10 blur-3xl"></div>
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 grid place-items-center text-emerald-200">
            <i class="fa-solid fa-circle-check"></i>
          </div>
          <div>
            <div class="text-[11px] text-slate-300/80">نشط</div>
            <div class="text-2xl font-extrabold text-emerald-200">{{ number_format($counts['active'] ?? 0) }}</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 -right-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-pen"></i>
          </div>
          <div>
            <div class="text-[11px] text-slate-300/80">مسودات</div>
            <div class="text-2xl font-extrabold text-amber-200">{{ number_format($counts['draft'] ?? 0) }}</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-box-archive"></i>
          </div>
          <div>
            <div class="text-[11px] text-slate-300/80">مغلق/مؤرشف</div>
            <div class="text-2xl font-extrabold text-fuchsia-200">{{ number_format(($counts['closed'] ?? 0)+($counts['archived'] ?? 0)) }}</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">توزيع حالات الاستطلاعات</h2>
        <canvas id="chartStatus" height="180"></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">مشاركات آخر 14 يوم</h2>
        <canvas id="chartTrend" height="180"></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 -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="chartCategory" height="180"></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 -bottom-16 -left-10 w-44 h-44 rounded-full bg-emerald-500/10 blur-3xl"></div>
        <h2 class="font-extrabold text-base text-white mb-3">الأعلى مشاركات (Top)</h2>
        <canvas id="chartTop" height="180"></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 items-center justify-between">
        <div>
          <h2 class="text-sm sm:text-base font-extrabold text-cyan-200">أحدث الاستطلاعات</h2>
          <p class="text-[11px] sm:text-xs text-slate-300/80 mt-1">آخر الاستطلاعات مع عدد المشاركات.</p>
        </div>
        <a class="text-emerald-300 hover:underline text-sm" href="{{ route('superadmin.surveys.index') }}">عرض الكل</a>
      </div>

      <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>
              <th class="text-right px-4 py-3">إجراء</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-white/5">
            @forelse($latest as $s)
              <tr class="text-white/80">
                <td class="px-4 py-3">{{ $s->id }}</td>
                <td class="px-4 py-3 font-extrabold text-white">{{ $s->title }}</td>
                <td class="px-4 py-3 text-white/70">{{ $s->categoryLabel() }}</td>
                <td class="px-4 py-3">
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-bold
                               bg-white/5 border border-white/10 text-white/85">
                    {{ $s->statusLabel() }}
                  </span>
                </td>
                <td class="px-4 py-3 text-white/70">{{ number_format($s->submissions_count ?? 0) }}</td>
                <td class="px-4 py-3">
                  <a href="{{ route('superadmin.surveys.analytics', $s->id) }}"
                     class="inline-flex items-center gap-2 px-3 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-chart-simple text-[11px]"></i>
                    Analytics
                  </a>
                </td>
              </tr>
            @empty
              <tr>
                <td colspan="6" class="px-4 py-10 text-center text-white/60">لا يوجد استطلاعات بعد.</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </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>

      <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>
            </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'] ?? '';
                $sentAt = $sub['submitted_at'] ?? null;

                $surveyTitle = $sub['survey_title'] ?? ('Survey#'.($sub['survey_id'] ?? '—'));
                $answersCount = count($sub['answers'] ?? []);
              @endphp

              <tr class="text-white/80 submission-row" data-search="{{ mb_strtolower($uName.' '.$uEmail.' '.$surveyTitle) }}">
                <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">
                    {{ $surveyTitle }}
                  </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>
                    عرض الإجابات ({{ $answersCount }})
                  </button>
                </td>
              </tr>

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

              {{-- MODAL --}}
              <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">Submission #{{ $sub['id'] }}</span>
                          • <span class="text-cyan-200">{{ $surveyTitle }}</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">
                      @forelse(($sub['answers'] ?? []) as $a)
                        @php
                          $qText = $a['question_text'] ?? '—';
                          $qType = strtoupper($a['question_type'] ?? '');
                          $out   = $a['option_text'] ?? $a['answer_text'] ?? $a['answer_value'] ?? '—';
                        @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'] ?? '—' }} • {{ $qType }}
                              </div>
                              <div class="font-extrabold text-white">{{ $qText }}</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">
                              Answer
                            </span>
                          </div>

                          <div class="mt-3 rounded-xl bg-black/30 border border-white/10 p-3 text-white/85 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>
            @empty
              <tr>
                <td colspan="4" class="px-4 py-10 text-center text-white/60">لا يوجد مشاركات بعد.</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>

  </div>
</div>

{{-- CHARTS --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
(function(){
  // Status
  new Chart(document.getElementById('chartStatus'), {
    type: 'doughnut',
    data: {
      labels: ['مسودة','نشط','مغلق','مؤرشف'],
      datasets: [{
        data: [
          {{ (int)($counts['draft'] ?? 0) }},
          {{ (int)($counts['active'] ?? 0) }},
          {{ (int)($counts['closed'] ?? 0) }},
          {{ (int)($counts['archived'] ?? 0) }}
        ],
      }]
    },
    options: { plugins: { legend: { labels: { color: '#fff' } } } }
  });

  // Trend
  new Chart(document.getElementById('chartTrend'), {
    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' } } }
    }
  });

  // Category
  new Chart(document.getElementById('chartCategory'), {
    type: 'bar',
    data: { labels: ['عام','إدارة'], datasets: [{ label: 'عدد الاستطلاعات', data: [{{ (int)($counts['general'] ?? 0) }}, {{ (int)($counts['management'] ?? 0) }}] }] },
    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' } } }
    }
  });

  // Top
  new Chart(document.getElementById('chartTop'), {
    type: 'bar',
    data: {
      labels: @json($top?->pluck('title') ?? []),
      datasets: [{ label: 'مشاركات', data: @json($top?->pluck('submissions_count') ?? []) }]
    },
    options: {
      indexAxis: 'y',
      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
  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>

{{-- ملاحظة للكنترول:
   لازم ترسل $submissions بالشكل:
   [
     [
       'id' => submission_id,
       'survey_id' => ...,
       'survey_title' => ...,
       'user_id' => ...,
       'user_name' => ...,
       'user_email' => ...,
       'submitted_at' => ...,
       'answers' => [
           [
             'question_id'=>.., 'question_text'=>.., 'question_type'=>..,
             'answer_text'=>.., 'answer_value'=>.., 'option_text'=>..
           ],
           ...
       ]
     ],
     ...
   ]
--}}
@endsection