@php
    $user = auth()->user();
    $role = $user->membership_status ?? $user->role ?? 'member';

    switch ($role) {
        case 'super-admin': $layout = 'layouts.superadmin'; break;
        case 'advisor':     $layout = 'layouts.advisor'; break;
        case 'admin':
        case 'moderator':   $layout = 'layouts.admin'; break;
        default:            $layout = 'layouts.member';
    }
@endphp

@extends($layout)

@section('title','الاستطلاعات')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black py-8 sm:py-10 text-white rtl" dir="rtl">
  <div class="max-w-6xl 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-900/98 to-black/98 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/20 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-cyan-500/20 blur-3xl"></div>

      <div class="relative p-5 sm:p-7 lg:p-8 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
        <div class="space-y-3 max-w-2xl">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-fuchsia-300/30 text-[11px] text-fuchsia-100">
            <i class="fa-solid fa-square-poll-vertical text-xs"></i>
            <span>نظام الاستطلاعات — مشاركة رأيك لتطوير النظام</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">
            شارك برأيك… وخلّينا نطوّر النظام سوا ✨
            (فتح الاستطلاع صار داخل مودال — بدون خروج من الصفحة)
          </p>
        </div>

        <div class="w-full lg:w-auto">
          <div class="rounded-2xl bg-black/40 border border-white/15 px-4 py-3 text-xs text-slate-100">
            <div class="flex items-center gap-2">
              <div class="w-9 h-9 rounded-2xl bg-fuchsia-500/15 border border-fuchsia-400/25 text-fuchsia-200 grid place-items-center">
                <i class="fa-solid fa-wand-magic-sparkles"></i>
              </div>
              <div class="min-w-0">
                <div class="text-[11px] text-slate-300/80">طريقة العرض</div>
                <div class="font-bold text-sm truncate">مودال داخل الصفحة</div>
              </div>
            </div>
            <div class="mt-2 text-[11px] text-slate-300/80">
              اضغط <b class="text-white">ابدأ</b> وسيتم فتح الاستطلاع داخل نافذة مودال.
            </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 shadow-lg shadow-emerald-500/10">
        {{ session('success') }}
      </div>
    @endif

    {{-- GRID --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
      @forelse($available as $s)
        <div class="relative overflow-hidden rounded-3xl
                    bg-gradient-to-br from-slate-900/90 via-slate-900/95 to-black/95
                    border border-white/10
                    shadow-xl hover:shadow-2xl hover:border-fuchsia-400/30
                    transition">

          {{-- هالة سقراط --}}
          <div class="pointer-events-none absolute -top-20 -right-16 w-56 h-56 bg-fuchsia-500/10 blur-3xl"></div>

          <div class="relative p-5 space-y-4">
            <div class="flex items-start justify-between gap-3">
              <div class="min-w-0">
                <div class="text-xs text-white/60 mb-1">
                  {{ $s->categoryLabel() }}
                  <span class="mx-1">•</span>
                  {{ $s->is_anonymous ? 'Anonymous' : 'بالاسم' }}
                </div>

                <div class="text-xl font-extrabold text-white truncate">
                  {{ $s->title }}
                </div>

                @if($s->description)
                  <div class="text-white/70 mt-2 text-sm leading-relaxed line-clamp-3">
                    {{ $s->description }}
                  </div>
                @endif
              </div>

              <span class="px-2 py-1 rounded-xl text-[11px] font-bold
                           bg-white/10 border border-white/10 text-white/80 whitespace-nowrap">
                {{ $s->statusLabel() }}
              </span>
            </div>

            <div class="flex items-center justify-between gap-3">
              <div class="text-[11px] text-white/60">
                @if($s->start_at)
                  يبدأ: <span class="text-white/80 font-semibold">{{ $s->start_at->format('Y-m-d H:i') }}</span>
                @endif
                @if($s->end_at)
                  <span class="mx-1">•</span>
                  ينتهي: <span class="text-white/80 font-semibold">{{ $s->end_at->format('Y-m-d H:i') }}</span>
                @endif
              </div>

              @if(($s->already_submitted ?? false) && !$s->allow_multiple_submissions)
                <button type="button"
                        class="px-3 py-2 rounded-2xl
                               bg-emerald-500/10 border border-emerald-400/20
                               text-emerald-100 text-[12px] font-bold cursor-not-allowed">
                  شاركت ✅
                </button>
              @else
                {{-- ✅ زر يفتح مودال بدل رابط --}}
                <button type="button"
                        onclick="openSurveyModal('{{ route('surveys.show', $s->id) }}', @json($s->title))"
                        class="px-4 py-2 rounded-2xl text-[12px] font-extrabold text-slate-950
                               bg-gradient-to-r from-emerald-300 via-emerald-200 to-cyan-200
                               shadow-lg shadow-emerald-500/20 hover:scale-[1.01] active:scale-100 transition">
                  <i class="fa-solid fa-play ms-2 text-[11px]"></i>
                  ابدأ
                </button>
              @endif
            </div>
          </div>
        </div>
      @empty
        <div class="p-8 rounded-3xl bg-white/5 border border-white/10 text-center text-white/60 md:col-span-2">
          لا يوجد استطلاعات متاحة حاليًا.
        </div>
      @endforelse
    </div>

  </div>
</div>

{{-- ✅ MODAL (داخل نفس الصفحة فقط) --}}
<div id="surveyModal" class="fixed inset-0 z-[99999] hidden">
  <div class="absolute inset-0 bg-black/75 backdrop-blur-sm" onclick="closeSurveyModal()"></div>

  <div class="relative mx-auto mt-6 sm:mt-10 w-[94vw] max-w-5xl">
    <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-slate-900/95 via-slate-950/95 to-black/95 shadow-2xl overflow-hidden">
      {{-- Header --}}
      <div class="px-4 sm:px-6 py-4 border-b border-white/10 flex items-center justify-between gap-3">
        <div class="flex items-center gap-2 min-w-0">
          <div class="w-10 h-10 rounded-2xl bg-fuchsia-500/15 border border-fuchsia-400/25 text-fuchsia-200 grid place-items-center">
            <i class="fa-solid fa-square-poll-vertical"></i>
          </div>
          <div class="min-w-0">
            <div id="surveyModalTitle" class="text-white font-extrabold text-sm sm:text-base truncate">
              استطلاع
            </div>
            <div class="text-[11px] text-white/60">
              يتم عرض الاستطلاع داخل مودال — بدون خروج من الصفحة
            </div>
          </div>
        </div>

        <button type="button"
                class="w-10 h-10 rounded-2xl bg-white/10 border border-white/15 text-white/80 hover:text-white hover:bg-white/15 transition"
                onclick="closeSurveyModal()">
          <i class="fa-solid fa-xmark"></i>
        </button>
      </div>

      {{-- Body --}}
      <div class="p-2 sm:p-3">
        <div class="rounded-2xl border border-white/10 bg-black/30 overflow-hidden">
          {{-- iframe --}}
          <iframe id="surveyModalFrame"
                  src="about:blank"
                  class="w-full h-[78vh] bg-black"
                  loading="lazy"
                  referrerpolicy="no-referrer">
          </iframe>
        </div>

        <div class="mt-3 flex items-center justify-between text-[11px] text-white/55 px-1">
          <div class="flex items-center gap-2">
            <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
            <span>إذا خلصت إرسال… سكّر المودال وبتلاقي إشعار نجاح فوق</span>
          </div>
          <button type="button"
                  class="px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/80 hover:bg-white/15 transition"
                  onclick="reloadSurveyFrame()">
            <i class="fa-solid fa-rotate ms-2 text-[11px]"></i>
            تحديث
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  let __surveyLastUrl = null;

  function openSurveyModal(url, title){
    __surveyLastUrl = url;

    const modal = document.getElementById('surveyModal');
    const frame = document.getElementById('surveyModalFrame');
    const ttl   = document.getElementById('surveyModalTitle');

    ttl.textContent = title ? ('استطلاع: ' + title) : 'استطلاع';
    frame.src = url;

    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
  }

  function closeSurveyModal(){
    const modal = document.getElementById('surveyModal');
    const frame = document.getElementById('surveyModalFrame');

    modal.classList.add('hidden');
    frame.src = 'about:blank';

    document.body.style.overflow = '';
  }

  function reloadSurveyFrame(){
    const frame = document.getElementById('surveyModalFrame');
    if (__surveyLastUrl) frame.src = __surveyLastUrl;
  }

  // Esc لإغلاق المودال
  document.addEventListener('keydown', function(e){
    if(e.key === 'Escape'){
      const modal = document.getElementById('surveyModal');
      if(modal && !modal.classList.contains('hidden')) closeSurveyModal();
    }
  });
</script>
@endsection