@extends('layouts.superadmin')

@section('title','Builder — بناء الاستطلاع')

@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-start md:justify-between gap-4 mb-6">
      <div>
        <h1 class="text-2xl md:text-3xl font-extrabold">Builder — بناء الاستطلاع</h1>
        <p class="text-white/70 mt-1">استطلاع #{{ $survey->id }} • {{ $survey->title }}</p>
      </div>
      <div class="flex flex-wrap gap-2">
        <a href="{{ route('superadmin.surveys.show', $survey->id) }}"
           class="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/15 border border-white/10">تفاصيل</a>
        <a href="{{ route('superadmin.surveys.targets', $survey->id) }}"
           class="px-4 py-2 rounded-xl bg-sky-600 hover:bg-sky-700 font-semibold">Targets</a>
        <a href="{{ route('superadmin.surveys.analytics', $survey->id) }}"
           class="px-4 py-2 rounded-xl bg-violet-600 hover:bg-violet-700 font-semibold">Analytics</a>
        <a href="{{ route('surveys.show', $survey->id) }}" target="_blank"
           class="px-4 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 font-semibold">Preview</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

    @if($errors->any())
      <div class="mb-6 p-4 rounded-xl bg-rose-500/15 border border-rose-400/30 text-rose-100">
        <div class="font-bold mb-2">في أخطاء:</div>
        <ul class="list-disc pr-6 space-y-1">
          @foreach($errors->all() as $e)
            <li>{{ $e }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    {{-- ✅ تنبيه مهم --}}
    <div class="mb-6 p-4 rounded-2xl bg-white/5 border border-fuchsia-400/25">
      <div class="flex items-start 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-circle-info"></i>
        </div>
        <div class="text-sm text-white/85 leading-relaxed">
          <div class="font-extrabold text-white mb-1">ملاحظة سريعة</div>
          <div>
            - نوع <span class="font-bold text-emerald-200">Scale</span> عندك رح يشتغل كـ “خيارات” إذا ضفت Options للسؤال.
            <br>
            - إذا ما ضفت Options للـ Scale، بيصير يطلع (Min/Max) بالمودال.
            <br>
            - نوع <span class="font-bold text-amber-200">اختيار متعدد</span> هنا اسمه <span class="font-mono">multi</span> (عشان ما نخرب أي بيانات عندك).
          </div>
        </div>
      </div>
    </div>

    <!-- Add Question -->
    <div class="p-6 rounded-2xl bg-white/5 border border-white/10 mb-6">
      <h2 class="font-bold text-lg mb-4">إضافة سؤال جديد</h2>

      <form method="POST" action="{{ route('superadmin.surveys.questions.store', $survey->id) }}">
        @csrf

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="md:col-span-2">
            <label class="block text-white/80 mb-1">نص السؤال *</label>
            <textarea name="question_text" rows="2" required
                      class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none">{{ old('question_text') }}</textarea>
          </div>

          <div>
            <label class="block text-white/80 mb-1">نوع السؤال *</label>
            <select name="question_type" class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2">
              <option value="single" @selected(old('question_type')==='single')>اختيار واحد</option>
              <option value="multi"  @selected(old('question_type')==='multi')>اختيار متعدد</option>
              <option value="scale"  @selected(old('question_type')==='scale')>Scale (خيارات أو Min/Max)</option>
              <option value="text"   @selected(old('question_type')==='text')>نص</option>
            </select>
            <div class="text-[11px] text-white/60 mt-1">
              * Scale: إذا ضفت Options للسؤال رح تظهر بدل الأرقام.
            </div>
          </div>

          <div>
            <label class="block text-white/80 mb-1">ترتيب</label>
            <input type="number" min="0" max="9999" name="sort_order" value="{{ old('sort_order', 0) }}"
                   class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none"/>
          </div>

          <div class="md:col-span-2">
            <label class="flex items-center gap-2 p-3 rounded-xl bg-white/5 border border-white/10">
              <input type="checkbox" name="is_required" value="1" @checked(old('is_required'))>
              <span class="font-semibold">السؤال مطلوب</span>
            </label>
          </div>

          <div class="md:col-span-2">
            <label class="block text-white/80 mb-1">مساعدة (اختياري)</label>
            <input name="help_text" value="{{ old('help_text') }}" placeholder="مثال: اختر أفضل إجابة..."
                   class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none"/>
          </div>

          <div class="p-4 rounded-xl bg-white/5 border border-white/10">
            <div class="font-bold mb-2">إعدادات الـ Scale (تشتغل فقط إذا ما في Options)</div>
            <div class="grid grid-cols-2 gap-3">
              <div>
                <label class="block text-white/70 text-sm mb-1">Min</label>
                <input type="number" name="scale_min" value="{{ old('scale_min', 1) }}"
                       class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none"/>
              </div>
              <div>
                <label class="block text-white/70 text-sm mb-1">Max</label>
                <input type="number" name="scale_max" value="{{ old('scale_max', 5) }}"
                       class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none"/>
              </div>
              <div>
                <label class="block text-white/70 text-sm mb-1">Label يسار</label>
                <input name="scale_left_label" value="{{ old('scale_left_label', 'ضعيف') }}"
                       class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none"/>
              </div>
              <div>
                <label class="block text-white/70 text-sm mb-1">Label يمين</label>
                <input name="scale_right_label" value="{{ old('scale_right_label', 'ممتاز') }}"
                       class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none"/>
              </div>
            </div>
          </div>

          <div class="flex items-end justify-end">
            <button class="px-5 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 font-extrabold w-full md:w-auto">
              إضافة السؤال
            </button>
          </div>
        </div>
      </form>
    </div>

    <!-- Existing Questions -->
    <div class="space-y-4">
      @forelse($survey->questions as $q)
        @php
          $type = $q->question_type; // single | multi | scale | text
        @endphp

        <details class="p-5 rounded-2xl bg-white/5 border border-white/10" open>
          <summary class="cursor-pointer select-none">
            <div class="flex items-center justify-between gap-3">
              <div>
                <div class="text-xs text-white/60 mb-1">
                  سؤال #{{ $q->id }}
                  • {{ method_exists($q,'typeLabel') ? $q->typeLabel() : $type }}
                  • ترتيب: {{ $q->sort_order }}
                  <span class="mx-1">|</span>
                  {{ $q->is_required ? 'مطلوب' : 'اختياري' }}
                  <span class="mx-1">|</span>
                  {{ $q->is_active ? 'نشط' : 'موقوف' }}
                </div>
                <div class="font-bold">{{ $q->question_text }}</div>
              </div>
              <div class="text-white/50 text-xs">اضغط للتعديل</div>
            </div>
          </summary>

          <div class="mt-4 grid grid-cols-1 lg:grid-cols-2 gap-4">

            <!-- Update Question -->
            <div class="p-4 rounded-xl bg-white/5 border border-white/10">
              <h3 class="font-bold mb-3">تعديل السؤال</h3>

              <form method="POST" action="{{ route('superadmin.surveys.questions.update', [$survey->id, $q->id]) }}">
                @csrf
                @method('PUT')

                <div class="space-y-3">
                  <div>
                    <label class="block text-white/80 mb-1">نص السؤال *</label>
                    <textarea name="question_text" rows="2" required
                              class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none">{{ $q->question_text }}</textarea>
                  </div>

                  <div class="grid grid-cols-2 gap-3">
                    <div>
                      <label class="block text-white/70 text-sm mb-1">ترتيب</label>
                      <input type="number" name="sort_order" min="0" max="9999" value="{{ $q->sort_order }}"
                             class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none"/>
                    </div>
                    <div class="flex items-end">
                      <label class="flex items-center gap-2 p-3 rounded-xl bg-white/5 border border-white/10 w-full">
                        <input type="checkbox" name="is_active" value="1" @checked($q->is_active)>
                        <span class="font-semibold">نشط</span>
                      </label>
                    </div>
                  </div>

                  <label class="flex items-center gap-2 p-3 rounded-xl bg-white/5 border border-white/10">
                    <input type="checkbox" name="is_required" value="1" @checked($q->is_required)>
                    <span class="font-semibold">مطلوب</span>
                  </label>

                  <div>
                    <label class="block text-white/80 mb-1">مساعدة</label>
                    <input name="help_text" value="{{ $q->config['help_text'] ?? '' }}"
                           class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none"/>
                  </div>

                  @if($type === 'scale')
                    <div class="p-3 rounded-xl bg-white/5 border border-white/10">
                      <div class="font-bold mb-2">إعدادات Scale (تعمل إذا ما في Options)</div>
                      <div class="grid grid-cols-2 gap-3">
                        <div>
                          <label class="block text-white/70 text-sm mb-1">Min</label>
                          <input type="number" name="scale_min" value="{{ $q->config['scale_min'] ?? 1 }}"
                                 class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none"/>
                        </div>
                        <div>
                          <label class="block text-white/70 text-sm mb-1">Max</label>
                          <input type="number" name="scale_max" value="{{ $q->config['scale_max'] ?? 5 }}"
                                 class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none"/>
                        </div>
                        <div>
                          <label class="block text-white/70 text-sm mb-1">Label يسار</label>
                          <input name="scale_left_label" value="{{ $q->config['scale_left_label'] ?? 'ضعيف' }}"
                                 class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none"/>
                        </div>
                        <div>
                          <label class="block text-white/70 text-sm mb-1">Label يمين</label>
                          <input name="scale_right_label" value="{{ $q->config['scale_right_label'] ?? 'ممتاز' }}"
                                 class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none"/>
                        </div>
                      </div>
                      <div class="mt-2 text-[11px] text-amber-200/90">
                        إذا أضفت Options للسؤال، المودال رح يعرض الخيارات بدل الأرقام.
                      </div>
                    </div>
                  @endif

                  <button class="px-4 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 font-bold">
                    حفظ
                  </button>
                </div>
              </form>

              <form method="POST" action="{{ route('superadmin.surveys.questions.destroy', [$survey->id, $q->id]) }}"
                    class="mt-3"
                    onsubmit="return confirm('متأكد بدك تحذف السؤال؟')">
                @csrf
                @method('DELETE')
                <button class="px-4 py-2 rounded-xl bg-rose-600 hover:bg-rose-700 font-bold">
                  حذف السؤال
                </button>
              </form>
            </div>

            <!-- Options -->
            <div class="p-4 rounded-xl bg-white/5 border border-white/10">
              <h3 class="font-bold mb-3">الخيارات</h3>

              {{-- ✅ الآن: الخيارات تعمل لـ single + multi + scale --}}
              @if(in_array($type, ['single','multi','scale']))
                <div class="text-[12px] text-white/70 mb-3">
                  @if($type === 'scale')
                    هذه خيارات الـ <span class="font-bold text-fuchsia-200">Scale</span> (ستظهر للمستخدم بدل الأرقام).
                  @else
                    هذه خيارات الإجابة.
                  @endif
                </div>

                <div class="space-y-3">
                  @foreach($q->options as $o)
                    <div class="p-3 rounded-xl bg-white/5 border border-white/10">
                      <form method="POST" action="{{ route('superadmin.surveys.options.update', [$q->id, $o->id]) }}">
                        @csrf
                        @method('PUT')

                        <div class="grid grid-cols-1 md:grid-cols-4 gap-2 items-center">
                          <input name="option_text" value="{{ $o->option_text }}"
                                 class="rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none md:col-span-2"
                                 placeholder="نص الخيار"/>

                          <input name="option_value" value="{{ $o->option_value }}"
                                 class="rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none"
                                 placeholder="Value (اختياري)"/>

                          <div class="flex gap-2">
                            <input type="number" name="sort_order" value="{{ $o->sort_order }}"
                                   class="w-24 rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none"
                                   title="ترتيب"/>
                            <label class="flex items-center gap-2 text-xs px-3 py-2 rounded-xl bg-white/5 border border-white/10">
                              <input type="checkbox" name="is_active" value="1" @checked($o->is_active)>
                              <span>نشط</span>
                            </label>
                          </div>
                        </div>

                        <div class="mt-3 flex gap-2">
                          <button class="px-4 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 font-bold">حفظ</button>
                        </div>
                      </form>

                      <form method="POST" action="{{ route('superadmin.surveys.options.destroy', [$q->id, $o->id]) }}"
                            class="mt-2"
                            onsubmit="return confirm('حذف الخيار؟')">
                        @csrf
                        @method('DELETE')
                        <button class="px-4 py-2 rounded-xl bg-rose-600 hover:bg-rose-700 font-bold">حذف</button>
                      </form>
                    </div>
                  @endforeach
                </div>

                <hr class="border-white/10 my-4">

                <form method="POST" action="{{ route('superadmin.surveys.options.store', $q->id) }}"
                      class="p-3 rounded-xl bg-white/5 border border-white/10">
                  @csrf
                  <div class="font-bold mb-2">إضافة خيار</div>
                  <div class="grid grid-cols-1 md:grid-cols-4 gap-2">
                    <input name="option_text" required
                           class="rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none md:col-span-2"
                           placeholder="نص الخيار"/>
                    <input name="option_value"
                           class="rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none"
                           placeholder="Value (اختياري)"/>
                    <input type="number" name="sort_order" value="0"
                           class="rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none"
                           placeholder="ترتيب"/>
                  </div>
                  <div class="mt-3">
                    <button class="px-4 py-2 rounded-xl bg-sky-600 hover:bg-sky-700 font-bold">إضافة</button>
                  </div>
                </form>
              @else
                <div class="text-white/60">هذا النوع لا يحتاج خيارات.</div>
              @endif
            </div>

          </div>
        </details>
      @empty
        <div class="p-6 rounded-2xl bg-white/5 border border-white/10 text-center text-white/60">
          لا يوجد أسئلة بعد… ابدأ بإضافة سؤال.
        </div>
      @endforelse
    </div>

  </div>
</div>
@endsection