@extends('layouts.superadmin')

@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">Targets — تحديد جمهور الاستطلاع</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.builder', $survey->id) }}"
           class="px-4 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 font-semibold">Builder</a>
        <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.analytics', $survey->id) }}"
           class="px-4 py-2 rounded-xl bg-violet-600 hover:bg-violet-700 font-semibold">Analytics</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

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- Current targets -->
      <div class="p-5 rounded-2xl bg-white/5 border border-white/10">
        <h2 class="font-bold text-lg mb-3">الجمهور الحالي</h2>

        <div class="space-y-2">
          @foreach($survey->targets as $t)
            <div class="flex items-center justify-between gap-3 p-3 rounded-xl bg-white/5 border border-white/10">
              <div class="text-sm">
                <div class="font-semibold">{{ $t->label() }}</div>
              </div>
              <form method="POST" action="{{ route('superadmin.surveys.targets.remove', [$survey->id, $t->id]) }}"
                    onsubmit="return confirm('حذف هذا Target؟')">
                @csrf
                @method('DELETE')
                <button class="px-3 py-2 rounded-xl bg-rose-600 hover:bg-rose-700 text-xs font-bold">حذف</button>
              </form>
            </div>
          @endforeach
        </div>

        <div class="text-xs text-white/60 mt-4">
          ملاحظة: إذا اخترت <b>all</b> سيتم مسح باقي Targets تلقائياً.
        </div>
      </div>

      <!-- Add target -->
      <div class="lg:col-span-2 space-y-6">

        <div class="p-5 rounded-2xl bg-white/5 border border-white/10">
          <h2 class="font-bold text-lg mb-3">إضافة Target</h2>

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

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label class="block text-white/80 mb-1">النوع</label>
                <select id="target_type" name="target_type" class="w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2">
                  <option value="all">all (الجميع)</option>
                  <option value="role">role</option>
                  <option value="membership_status">membership_status</option>
                  <option value="gender">gender</option>
                  <option value="user">user</option>
                </select>
              </div>

              <div>
                <label class="block text-white/80 mb-1">القيمة</label>

                <!-- Role -->
                <select id="value_role" class="hidden w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2">
                  @foreach($roles as $r)
                    <option value="{{ $r }}">{{ $r }}</option>
                  @endforeach
                </select>

                <!-- Membership -->
                <select id="value_membership" class="hidden w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2">
                  @foreach($membershipStatusLabels as $k => $lbl)
                    <option value="{{ $k }}">{{ $lbl }} ({{ $k }})</option>
                  @endforeach
                </select>

                <!-- Gender -->
                <select id="value_gender" class="hidden w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2">
                  @foreach($genderLabels as $k => $lbl)
                    <option value="{{ $k }}">{{ $lbl }} ({{ $k }})</option>
                  @endforeach
                </select>

                <!-- User -->
                <select id="value_user" class="hidden w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2">
                  @foreach($users as $u)
                    <option value="{{ $u->id }}">#{{ $u->id }} — {{ $u->name }} ({{ $u->email }})</option>
                  @endforeach
                </select>

                <!-- Fallback -->
                <input id="value_text" type="text" class="hidden w-full rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none" placeholder="اكتب القيمة"/>

                <input type="hidden" name="target_value" id="target_value_real" value="">
                <div class="text-xs text-white/50 mt-1">لـ all ما في قيمة.</div>
              </div>

              <div class="md:col-span-2 flex items-center justify-end">
                <button class="px-5 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 font-extrabold">
                  إضافة
                </button>
              </div>
            </div>
          </form>
        </div>

        <div class="p-5 rounded-2xl bg-white/5 border border-white/10">
          <h2 class="font-bold text-lg mb-3">بحث سريع عن أعضاء (لـ User Target)</h2>

          <form method="GET" class="flex flex-col md:flex-row gap-3">
            <input name="q" value="{{ request('q') }}" placeholder="ابحث بالاسم أو البريد أو رقم العضو"
                   class="flex-1 rounded-xl bg-white/10 border border-white/10 px-3 py-2 outline-none"/>
            <button class="px-5 py-2 rounded-xl bg-sky-600 hover:bg-sky-700 font-bold">بحث</button>
          </form>

          <div class="text-xs text-white/50 mt-2">
            النتائج أعلاه تتحدث حسب البحث (وتظهر في قائمة user داخل إضافة Target).
          </div>
        </div>

      </div>
    </div>

  </div>
</div>

<script>
(function(){
  const typeSel = document.getElementById('target_type');
  const realVal = document.getElementById('target_value_real');

  const valueRole = document.getElementById('value_role');
  const valueMembership = document.getElementById('value_membership');
  const valueGender = document.getElementById('value_gender');
  const valueUser = document.getElementById('value_user');
  const valueText = document.getElementById('value_text');

  function hideAll() {
    [valueRole,valueMembership,valueGender,valueUser,valueText].forEach(el => el.classList.add('hidden'));
  }

  function setRealFrom(el) {
    realVal.value = el ? (el.value || '') : '';
  }

  function refresh() {
    hideAll();
    const t = typeSel.value;

    if (t === 'all') {
      realVal.value = '';
      return;
    }

    if (t === 'role') {
      valueRole.classList.remove('hidden');
      setRealFrom(valueRole);
      valueRole.onchange = () => setRealFrom(valueRole);
      return;
    }

    if (t === 'membership_status') {
      valueMembership.classList.remove('hidden');
      setRealFrom(valueMembership);
      valueMembership.onchange = () => setRealFrom(valueMembership);
      return;
    }

    if (t === 'gender') {
      valueGender.classList.remove('hidden');
      setRealFrom(valueGender);
      valueGender.onchange = () => setRealFrom(valueGender);
      return;
    }

    if (t === 'user') {
      valueUser.classList.remove('hidden');
      setRealFrom(valueUser);
      valueUser.onchange = () => setRealFrom(valueUser);
      return;
    }

    valueText.classList.remove('hidden');
    realVal.value = valueText.value || '';
    valueText.oninput = () => realVal.value = valueText.value || '';
  }

  typeSel.addEventListener('change', refresh);
  refresh();
})();
</script>
@endsection