@php
    use Illuminate\Support\Facades\DB;

    $surveyId  = $survey->id;
    $submitUrl = route('surveys.submit', $surveyId);

    // ✅ الشرط الحقيقي: هل المستخدم قدّم Submission لهذا الاستطلاع؟
    $alreadySubmitted = false;

    try {
        if (auth()->check()) {
            $alreadySubmitted = DB::table('socratic_survey_submissions')
                ->where('survey_id', $surveyId)
                ->where('user_id', auth()->id()) // حتى لو anonymous = false
                ->exists();

            // ✅ لو الاستطلاع Anonymous: ما في user_id، فنعتمد submission_key
            // (حسب submissionKey اللي عندك في الكنترول: user:{id} أو anon:{hash})
            if (!$alreadySubmitted) {
                $alreadySubmitted = DB::table('socratic_survey_submissions')
                    ->where('survey_id', $surveyId)
                    ->where('submission_key', 'user:'.auth()->id())
                    ->exists();
            }
        }
    } catch (\Throwable $e) {
        $alreadySubmitted = false;
    }
@endphp

@if(!$alreadySubmitted)

{{-- BACKDROP --}}
<div id="surveyModalBackdrop"
     class="fixed inset-0 z-[99999] bg-black/70 backdrop-blur-sm"></div>

{{-- MODAL WRAPPER --}}
<div id="surveyModal"
     class="fixed inset-0 z-[100000] flex items-center justify-center p-3 sm:p-6">

    {{-- MODAL BOX (مربع بالنص + سكرول داخلي) --}}
    <div class="w-full max-w-2xl 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-poll text-[11px]"></i>
                    <span>استطلاع إلزامي</span>
                </div>

                <h2 class="mt-2 text-xl sm:text-2xl font-extrabold text-white truncate">
                    {{ $survey->title }}
                </h2>

                @if(!empty($survey->description))
                    <p class="mt-1 text-xs sm:text-sm text-slate-300/80">
                        {{ $survey->description }}
                    </p>
                @endif
            </div>

            <button type="button"
                    onclick="closeSurveyModal()"
                    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 (سكرول داخلي) --}}
        <form method="POST"
              action="{{ $submitUrl }}"
              class="p-4 sm:p-6 space-y-4 overflow-y-auto
                     max-h-[72vh] sm:max-h-[75vh]">
            @csrf

            @foreach($survey->questions as $i => $q)
                <div class="rounded-2xl bg-white/5 border border-white/10 p-4">

                    {{-- QUESTION HEADER --}}
                    <div class="flex items-center justify-between gap-3">
                        <div class="text-white font-bold">
                            {{ $i+1 }}. {{ $q->question_text }}
                            @if($q->is_required)
                                <span class="text-rose-300 text-[11px] font-extrabold"> • مطلوب</span>
                            @endif
                        </div>

                        <span class="px-2 py-0.5 rounded-full text-[10px]
                                     bg-fuchsia-500/15 text-fuchsia-200
                                     border border-fuchsia-400/25">
                            {{ strtoupper($q->question_type) }}
                        </span>
                    </div>

                    {{-- ANSWER --}}
                    <div class="mt-3">
                        @php $name = "answers[{$q->id}]"; @endphp

                        {{-- SCALE --}}
                        @if($q->question_type === 'scale')
                            @if(isset($q->options) && $q->options->count() > 0)
                                <div class="space-y-2">
                                    @foreach($q->options as $opt)
                                        <label class="flex items-center gap-2 text-white/85 text-sm">
                                            <input type="radio"
                                                   name="{{ $name }}"
                                                   value="{{ $opt->id }}"
                                                   class="accent-fuchsia-400">
                                            <span>{{ $opt->option_text }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            @else
                                <select name="{{ $name }}"
                                        class="w-full rounded-xl bg-black/40
                                               border border-white/15 text-white
                                               text-sm px-3 py-2">
                                    <option value="">اختر تقييمك…</option>
                                    @for($v = 1; $v <= 5; $v++)
                                        <option value="{{ $v }}">{{ $v }}</option>
                                    @endfor
                                </select>
                            @endif

                        {{-- SINGLE --}}
                        @elseif($q->question_type === 'single')
                            <div class="space-y-2">
                                @foreach($q->options as $opt)
                                    <label class="flex items-center gap-2 text-white/85 text-sm">
                                        <input type="radio"
                                               name="{{ $name }}"
                                               value="{{ $opt->id }}"
                                               class="accent-fuchsia-400">
                                        <span>{{ $opt->option_text }}</span>
                                    </label>
                                @endforeach
                            </div>

                        {{-- MULTIPLE --}}
                        @elseif($q->question_type === 'multiple' || $q->question_type === 'multi')
                            <div class="space-y-2">
                                @foreach($q->options as $opt)
                                    <label class="flex items-center gap-2 text-white/85 text-sm">
                                        <input type="checkbox"
                                               name="{{ $name }}[]"
                                               value="{{ $opt->id }}"
                                               class="accent-fuchsia-400">
                                        <span>{{ $opt->option_text }}</span>
                                    </label>
                                @endforeach
                            </div>

                        {{-- TEXT --}}
                        @else
                            <textarea name="{{ $name }}"
                                      rows="3"
                                      class="w-full rounded-xl bg-black/40
                                             border border-white/15 text-white
                                             text-sm px-3 py-2"
                                      placeholder="اكتب إجابتك…"></textarea>
                        @endif
                    </div>
                </div>
            @endforeach

            {{-- SUBMIT --}}
            <button type="submit"
                    class="sticky bottom-0 w-full inline-flex items-center justify-center gap-2
                           px-4 py-3 rounded-2xl
                           bg-gradient-to-r from-fuchsia-300 via-fuchsia-200 to-cyan-200
                           text-slate-900 font-extrabold
                           shadow-lg shadow-fuchsia-500/20
                           hover:scale-[1.01] active:scale-100 transition">
                <i class="fa-solid fa-paper-plane text-[12px]"></i>
                إرسال الاستطلاع
            </button>
        </form>
    </div>
</div>

{{-- JS --}}
<script>
(function(){
    if (sessionStorage.getItem('survey_modal_closed') === '1') {
        document.getElementById('surveyModalBackdrop')?.remove();
        document.getElementById('surveyModal')?.remove();
    }
})();

function closeSurveyModal(){
    sessionStorage.setItem('survey_modal_closed', '1');
    document.getElementById('surveyModalBackdrop')?.remove();
    document.getElementById('surveyModal')?.remove();
}
</script>

@endif