{{-- resources/views/superadmin/guests/create.blade.php مثلاً --}}
@extends('layouts.superadmin')

@section('title', 'إضافة قست جديد')
@section('page-title', '🎙️ إضافة قست جديد — جلسة ضيف للتيم')

@section('content')
<div class="relative p-6 space-y-8">

  {{-- خلفيات ناعمة ملحمية --}}
  <div class="pointer-events-none absolute -top-32 -right-24 w-72 h-72 md:w-96 md:h-96 rounded-full
              bg-gradient-to-br from-sky-400/20 via-emerald-400/15 to-indigo-500/20 blur-3xl -z-10"></div>
  <div class="pointer-events-none absolute -bottom-32 -left-24 w-72 h-72 md:w-96 md:h-96 rounded-full
              bg-gradient-to-br from-amber-400/18 via-rose-400/18 to-fuchsia-500/18 blur-3xl -z-10"></div>

  {{-- ================================ --}}
  {{-- HERO + وايرو شرح القستات        --}}
  {{-- ================================ --}}
  <div class="bg-white/80 dark:bg-gray-900/75 backdrop-blur-2xl border border-white/20 rounded-3xl shadow-xl p-5 md:p-7 space-y-5">

    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">

      {{-- نص الهيرو --}}
      <div class="space-y-2">
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px]
                    bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 border border-emerald-500/30">
          <i class="fa-solid fa-microphone-lines text-xs"></i>
          <span>قست ضيف جديد — Guest Session</span>
        </div>

        <h1 class="text-xl md:text-2xl font-extrabold text-gray-900 dark:text-white">
          افتح <span class="text-emerald-500">نافذة جديدة للحياة</span> داخل التيم 🎙️
        </h1>

        <p class="text-xs md:text-[13px] text-gray-600 dark:text-gray-300 leading-relaxed max-w-2xl">
          القست مش مجرد لايف؛ هو <span class="font-semibold">جسر</span> بين التيم والعالم:
          ضيوف جدد، علاقات جديدة، فرص دعوة، وصورة عامة للتيم قدام الناس.
          هذه الصفحة مخصصة لتسجيل كل قست ضيف بشكل رسمي ومنظم.
        </p>
      </div>

      {{-- وايرو: كيف تمشي عملية القست --}}
      <div class="w-full md:w-80">
        <div class="rounded-2xl bg-slate-900/90 text-white p-4 space-y-2 border border-white/10">
          <div class="flex items-center gap-2 text-[12px] font-semibold mb-1">
            <i class="fa-solid fa-route text-xs text-emerald-300"></i>
            <span>Wireflow القست — من الفكرة للتقرير</span>
          </div>
          <ol class="space-y-1 text-[11px] text-slate-200">
            <li>1️⃣ تختار الهوست + الضيف + توقيت الجلسة بشكل واضح.</li>
            <li>2️⃣ بعد انتهاء القست، يُربط مع مؤشرات التأثير والنمو داخل النظام.</li>
            <li>3️⃣ يتم استخدام البيانات في التقارير، التكريمات، ومتابعة سفراء التيم.</li>
          </ol>
          <p class="text-[10px] text-slate-400 mt-1">
            كل قست ناجح = فرصة ذهبية لوجوه جديدة وحياة إضافية للتيم.
          </p>
        </div>
      </div>

    </div>

    {{-- مفاتيح أهمية القستات --}}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 text-[11px] mt-2">
      <div class="rounded-2xl bg-emerald-500/5 border border-emerald-500/30 p-3 space-y-1">
        <div class="flex items-center gap-2">
          <i class="fa-solid fa-user-plus text-xs text-emerald-500"></i>
          <span class="font-semibold text-gray-900 dark:text-white">جلب وجوه جديدة</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300">
          كل ضيف = احتمال عضو جديد، أو صديق يصبح جزء من دائرة التيم.
        </p>
      </div>

      <div class="rounded-2xl bg-sky-500/5 border border-sky-500/30 p-3 space-y-1">
        <div class="flex items-center gap-2">
          <i class="fa-solid fa-bullhorn text-xs text-sky-500"></i>
          <span class="font-semibold text-gray-900 dark:text-white">صورة التيم قدام الناس</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300">
          القستات تعكس أسلوبنا، انضباطنا، ونوعية رسالتنا خارج حدود الغرفة.
        </p>
      </div>

      <div class="rounded-2xl bg-amber-500/5 border border-amber-500/30 p-3 space-y-1">
        <div class="flex items-center gap-2">
          <i class="fa-solid fa-chart-line text-xs text-amber-500"></i>
          <span class="font-semibold text-gray-900 dark:text-white">تغذية المؤشرات</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300">
          بيانات القست تُستخدم في مؤشر التأثير IOI، النمو GPI، والتكريمات الذهبية GHI.
        </p>
      </div>
    </div>
  </div>

  {{-- ================================ --}}
  {{--  شبكة: نموذج + مركز الاستعلامات --}}
  {{-- ================================ --}}
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    {{-- نموذج إضافة القست --}}
    <div class="lg:col-span-2 bg-white/90 dark:bg-gray-900/80 backdrop-blur-2xl border border-white/20 rounded-3xl shadow-xl p-5 md:p-6">

      {{-- أخطاء التحقق إن وجدت --}}
      @if($errors->any())
        <div class="mb-4 text-xs rounded-2xl bg-rose-50 dark:bg-rose-900/30 border border-rose-200 dark:border-rose-700 text-rose-700 dark:text-rose-100 p-3">
          <div class="font-semibold mb-1 flex items-center gap-2">
            <i class="fa-solid fa-triangle-exclamation text-[11px]"></i>
            <span>تأكد من الحقول التالية:</span>
          </div>
          <ul class="list-disc list-inside space-y-0.5">
            @foreach($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif

      <form action="{{ route('superadmin.guests.store') }}" method="POST" class="space-y-4">
        @csrf

        {{-- عنوان القست --}}
        <div>
          <label class="block mb-1 text-xs font-semibold text-gray-700 dark:text-gray-200">
            عنوان القست <span class="text-rose-500">*</span>
          </label>
          <input type="text" name="title"
                 class="w-full rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-950/70
                        text-sm px-3 py-2 text-right focus:outline-none focus:ring-2 focus:ring-emerald-500/70"
                 required maxlength="255" value="{{ old('title') }}">
        </div>

        {{-- وصف القست --}}
        <div>
          <label class="block mb-1 text-xs font-semibold text-gray-700 dark:text-gray-200">
            وصف القست (اختياري)
          </label>
          <textarea name="description" rows="3"
                    class="w-full rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-950/70
                           text-sm px-3 py-2 text-right resize-y focus:outline-none focus:ring-2 focus:ring-emerald-500/70"
                    maxlength="1000">{{ old('description') }}</textarea>
        </div>

        {{-- الهوست --}}
        <div>
          <label class="block mb-1 text-xs font-semibold text-gray-700 dark:text-gray-200">
            اختر منظم القست (هوست) <span class="text-rose-500">*</span>
          </label>
          <select name="host_id"
                  class="w-full rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-950/70
                         text-sm px-3 py-2 text-right focus:outline-none focus:ring-2 focus:ring-emerald-500/70"
                  required>
            <option value="">-- اختر الهوست --</option>
            @foreach($hosts as $host)
              <option value="{{ $host->id }}" {{ old('host_id') == $host->id ? 'selected' : '' }}>
                {{ $host->name }} - {{ $host->username }}
                @if($host->membership_status === 'beta')
                  (بيتا)
                @endif
              </option>
            @endforeach
          </select>
        </div>

        {{-- اختيار الضيف من المستخدمين --}}
        <div>
          <label class="block mb-1 text-xs font-semibold text-gray-700 dark:text-gray-200">
            اختر الضيف من أعضاء النظام
          </label>
          <select name="guest_user_id"
                  class="w-full rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-950/70
                         text-sm px-3 py-2 text-right focus:outline-none focus:ring-2 focus:ring-emerald-500/70">
            <option value="">-- اختر ضيف من المستخدمين --</option>
            @foreach($allUsers as $user)
              <option value="{{ $user->id }}" {{ old('guest_user_id') == $user->id ? 'selected' : '' }}>
                {{ $user->name }} ({{ $user->username }})
                @if($user->membership_status === 'beta')
                  - بيتا
                @elseif($user->membership_status === 'official')
                  - رسمي
                @endif
              </option>
            @endforeach
          </select>
          <p class="text-[11px] text-gray-500 dark:text-gray-400 mt-1">
            أو يمكنك كتابة اسم ضيف خارجي في الحقل التالي (إذا لم يكن داخل النظام).
          </p>
        </div>

        {{-- ضيف خارجي --}}
        <div>
          <label class="block mb-1 text-xs font-semibold text-gray-700 dark:text-gray-200">
            أو اكتب اسم ضيف خارجي
          </label>
          <input type="text" name="guest_name"
                 class="w-full rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-950/70
                        text-sm px-3 py-2 text-right focus:outline-none focus:ring-2 focus:ring-emerald-500/70"
                 maxlength="255" value="{{ old('guest_name') }}"
                 placeholder="اسم الضيف (في حالة عدم اختيار ضيف من القائمة)">
        </div>

        {{-- معلومات التواصل --}}
        <div>
          <label class="block mb-1 text-xs font-semibold text-gray-700 dark:text-gray-200">
            معلومات التواصل مع الزائر (اختياري)
          </label>
          <input type="text" name="guest_contact"
                 class="w-full rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-950/70
                        text-sm px-3 py-2 text-right focus:outline-none focus:ring-2 focus:ring-emerald-500/70"
                 maxlength="255" value="{{ old('guest_contact') }}">
        </div>

        {{-- التاريخ والوقت --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <label class="block mb-1 text-xs font-semibold text-gray-700 dark:text-gray-200">
              تاريخ القست <span class="text-rose-500">*</span>
            </label>
            <input type="date" name="scheduled_date"
                   class="w-full rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-950/70
                          text-sm px-3 py-2 text-right focus:outline-none focus:ring-2 focus:ring-emerald-500/70"
                   required value="{{ old('scheduled_date') }}">
          </div>
          <div>
            <label class="block mb-1 text-xs font-semibold text-gray-700 dark:text-gray-200">
              وقت القست <span class="text-rose-500">*</span>
            </label>
            <input type="time" name="scheduled_time"
                   class="w-full rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-950/70
                          text-sm px-3 py-2 text-right focus:outline-none focus:ring-2 focus:ring-emerald-500/70"
                   required value="{{ old('scheduled_time') }}">
          </div>
        </div>

        {{-- المدة --}}
        <div>
          <label class="block mb-1 text-xs font-semibold text-gray-700 dark:text-gray-200">
            مدة القست (بالدقائق) <span class="text-rose-500">*</span>
          </label>
          <input type="number" name="duration_minutes" min="15" max="300"
                 class="w-full rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-950/70
                        text-sm px-3 py-2 text-right focus:outline-none focus:ring-2 focus:ring-emerald-500/70"
                 required value="{{ old('duration_minutes') }}">
        </div>

        {{-- زر الحفظ --}}
        <div class="pt-2 flex justify-end">
          <button type="submit"
                  class="inline-flex items-center gap-2 bg-gradient-to-r from-emerald-600 via-sky-500 to-indigo-600
                         hover:from-emerald-500 hover:to-indigo-500 text-white text-sm font-semibold
                         px-5 py-2.5 rounded-xl shadow-lg focus:outline-none focus:ring-2 focus:ring-emerald-400/80">
            <i class="fa-solid fa-floppy-disk text-xs"></i>
            <span>حفظ القست</span>
          </button>
        </div>

      </form>
    </div>

    {{-- ================================ --}}
    {{--  مركز الاستعلامات عن القستات   --}}
    {{-- ================================ --}}
    <div class="space-y-4">

      <div class="bg-slate-900/90 text-slate-50 rounded-3xl shadow-xl border border-white/10 p-5 space-y-3">
        <div class="flex items-center gap-2 text-sm font-semibold">
          <i class="fa-solid fa-circle-question text-xs text-emerald-300"></i>
          <span>مركز الاستعلامات — قستات التيم</span>
        </div>

        <div class="space-y-2 text-[11px]">
          <div>
            <div class="font-semibold text-emerald-300 mb-0.5">متى أسجّل قست جديد؟</div>
            <p class="text-slate-200">
              عند وجود ضيف مهم، لايف تعريفي للتيم، أو قست هدفه جلب علاقات جديدة
              أو توثيق تعاون مع شخص/مجموعة خارجية.
            </p>
          </div>

          <div>
            <div class="font-semibold text-emerald-300 mb-0.5">ما هي أهم بيانات يجب عدم نسيانها؟</div>
            <ul class="list-disc list-inside space-y-0.5 text-slate-200">
              <li>الهوست الصحيح + نوع العضوية (بيتا/رسمي).</li>
              <li>الضيف (من النظام أو خارجي) ومعلومة تواصل واحدة على الأقل.</li>
              <li>تاريخ ووقت واضحين قبل الإعلان عن القست.</li>
            </ul>
          </div>

          <div>
            <div class="font-semibold text-emerald-300 mb-0.5">كيف يُستخدم هذا القست لاحقًا؟</div>
            <p class="text-slate-200">
              الربط مع مؤشرات التأثير، التقييمات، والتكريمات، بالإضافة لتقارير خاصة
              بغرفة الصقر عن أفضل الهوستات وأكثر القستات نجاحًا.
            </p>
          </div>
        </div>
      </div>

      {{-- برواز تنبيه صغير --}}
      <div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200/60 dark:border-amber-700/60 rounded-2xl p-3 text-[11px] text-amber-800 dark:text-amber-100 space-y-1">
        <div class="font-semibold flex items-center gap-2">
          <i class="fa-solid fa-lightbulb text-xs"></i>
          <span>نصيحة تنظيمية</span>
        </div>
        <p>
          حاول أن تكتب عنوانًا واضحًا للقست (مثال: قست تعارف مع لايفر فلان – الحديث عن كذا)،
          حتى يسهل الرجوع له في التقارير لاحقًا.
        </p>
      </div>

    </div>
  </div>

  {{-- ================================ --}}
  {{--  فوتر توضيحي                    --}}
  {{-- ================================ --}}
  <div class="text-center text-[11px] text-gray-500 dark:text-gray-400 mt-4">
    <div class="opacity-80">
      كل إرسال لقست جديد يتم مراجعته ومتابعته من
      <span class="font-semibold text-emerald-600 dark:text-emerald-300">القائد سيف الوفاء</span>
      ضمن نظام المتابعة في غرفة الصقر.
    </div>
    <div class="opacity-50 mt-1">
      Golden Loyalty Army — Falcon Room · Guest Sessions Center
    </div>
  </div>

</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const guestSelect = document.querySelector('select[name="guest_user_id"]');
    const guestNameInput = document.querySelector('input[name="guest_name"]');

    if (!guestSelect || !guestNameInput) return;

    // منع إدخال الضيف في كلا الحقلين
    guestSelect.addEventListener('change', function () {
        if (this.value) {
            guestNameInput.value = '';
            guestNameInput.disabled = true;
        } else {
            guestNameInput.disabled = false;
        }
    });

    guestNameInput.addEventListener('input', function () {
        if (this.value.trim()) {
            guestSelect.value = '';
            guestSelect.disabled = true;
        } else {
            guestSelect.disabled = false;
        }
    });
});
</script>
@endpush
@endsection