@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-800 text-white py-10" dir="rtl">
  <div class="max-w-4xl mx-auto px-4">

    <div class="mb-8">
      <div class="text-xs text-white/60 mb-2">
        {{ $survey->categoryLabel() }} • {{ $survey->is_anonymous ? 'Anonymous' : 'بالاسم' }}
      </div>
      <h1 class="text-3xl font-extrabold">{{ $survey->title }}</h1>
      @if($survey->description)
        <p class="text-white/70 mt-2">{{ $survey->description }}</p>
      @endif
    </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

    <form method="POST" action="{{ route('surveys.submit', $survey->id) }}" class="space-y-5">
      @csrf

      @foreach($survey->questions as $q)
        @if(!$q->is_active) @continue @endif

        <div class="p-5 rounded-2xl bg-white/5 border border-white/10">
          <div class="flex items-start justify-between gap-3">
            <div>
              <div class="text-sm text-white/60 mb-1">
                {{ $q->typeLabel() }}
                @if($q->is_required)
                  <span class="mx-1">•</span><span class="text-amber-200 font-bold">مطلوب</span>
                @endif
              </div>
              <div class="text-lg font-bold">{{ $q->question_text }}</div>
              @if(($q->config['help_text'] ?? null))
                <div class="text-sm text-white/60 mt-1">{{ $q->config['help_text'] }}</div>
              @endif
            </div>
          </div>

          <div class="mt-4">
            @php $name = 'q_'.$q->id; @endphp

            @if($q->question_type === 'text')
              <textarea name="{{ $name }}" rows="4"
                        class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none"
                        placeholder="اكتب إجابتك هنا...">{{ old($name) }}</textarea>
            @endif

            @if($q->question_type === 'scale')
              @php
                $min = (int)($q->config['scale_min'] ?? 1);
                $max = (int)($q->config['scale_max'] ?? 5);
                $left = $q->config['scale_left_label'] ?? 'ضعيف';
                $right = $q->config['scale_right_label'] ?? 'ممتاز';
              @endphp

              <div class="flex items-center justify-between text-xs text-white/60 mb-2">
                <span>{{ $left }}</span>
                <span>{{ $right }}</span>
              </div>

              <select name="{{ $name }}"
                      class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2">
                <option value="">— اختر —</option>
                @for($i=$min; $i<=$max; $i++)
                  <option value="{{ $i }}" @selected(old($name)==(string)$i)>{{ $i }}</option>
                @endfor
              </select>
            @endif

            @if($q->question_type === 'single')
              <div class="space-y-2">
                @foreach($q->options as $o)
                  @if(!$o->is_active) @continue @endif
                  <label class="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/10 cursor-pointer hover:bg-white/10">
                    <input type="radio" name="{{ $name }}" value="{{ $o->id }}" @checked(old($name)==(string)$o->id)>
                    <span>{{ $o->option_text }}</span>
                  </label>
                @endforeach
              </div>
            @endif

            @if($q->question_type === 'multi')
              <div class="space-y-2">
                @foreach($q->options as $o)
                  @if(!$o->is_active) @continue @endif
                  <label class="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/10 cursor-pointer hover:bg-white/10">
                    <input type="checkbox" name="{{ $name }}[]" value="{{ $o->id }}"
                           @checked(is_array(old($name)) && in_array((string)$o->id, old($name)))>
                    <span>{{ $o->option_text }}</span>
                  </label>
                @endforeach
              </div>
            @endif
          </div>

        </div>
      @endforeach

      <div class="flex items-center justify-end">
        <button class="px-6 py-3 rounded-2xl bg-emerald-600 hover:bg-emerald-700 font-extrabold">
          إرسال الاستطلاع ✅
        </button>
      </div>
    </form>

  </div>
</div>
@endsection