@extends($layout)

@section('title', 'رفع بيانات القيست')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 px-4 sm:px-6 lg:px-8 py-8">
    <div class="max-w-4xl mx-auto space-y-6">

        {{-- HERO / رأس الصفحة --}}
        <div class="relative overflow-hidden rounded-3xl border border-purple-500/40
                    bg-gradient-to-br from-purple-700 via-fuchsia-700 to-slate-950
                    shadow-xl shadow-purple-500/40 text-white px-4 sm:px-6 py-5 sm:py-6">

            {{-- طبقة زجاجية --}}
            <div class="absolute inset-0 bg-white/8 dark:bg-black/15 backdrop-blur-2xl pointer-events-none"></div>

            {{-- زخارف --}}
            <div class="pointer-events-none absolute -top-24 -left-10 w-52 h-52 rounded-full bg-fuchsia-400/40 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-28 -right-16 w-64 h-64 rounded-full bg-purple-400/40 blur-3xl"></div>

            <div class="relative flex flex-col gap-4">
                <div class="flex items-start gap-3 sm:gap-4">
                    <a href="{{ route('guest-submissions.my-submissions') }}"
                       class="p-2 rounded-2xl bg-black/20 border border-white/20 hover:bg-black/30 transition flex-shrink-0">
                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-slate-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                        </svg>
                    </a>

                    <div class="space-y-1.5">
                        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full
                                    bg-black/30 border border-white/25 text-[10px] sm:text-[11px] font-semibold">
                            <i class="fa-solid fa-cloud-arrow-up text-[11px] text-purple-200"></i>
                            <span>مركز رفع بيانات القيست — Guest Session Report</span>
                        </div>

                        <h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight">
                            رفع بيانات القيست
                        </h1>

                        <p class="text-[11px] sm:text-sm text-purple-50/90 leading-relaxed">
                            سجّل الضيوف، الهوست، الوقت، والساعات الفعلية لكل قيست تم باسم التيم،
                            عشان نربطها مع مؤشرات التأثير والتكريمات داخل فريق الوفاء الذهبي.
                        </p>
                    </div>
                </div>

                {{-- وايرو / شرح سريع للمسار --}}
                <div class="bg-white/10 border border-purple-300/40 rounded-2xl p-3.5 sm:p-4 text-[11px] sm:text-xs text-purple-50/90">
                    <div class="font-semibold mb-1.5 flex items-center gap-2">
                        <i class="fa-solid fa-route text-[11px] text-purple-200"></i>
                        <span>كيف يمشي تقرير القيست؟</span>
                    </div>
                    <ol class="list-decimal list-inside space-y-1.5">
                        <li>تنفيذ القيست على تيكتوك / أي منصة أخرى باسم التيم.</li>
                        <li>رفع تفاصيل القيست هنا: المشاركين، الهوست، الوقت، الساعات، والملاحظات.</li>
                        <li>يتم إرسال التقرير للمستلم المختار ليتم مراجعته واعتماده من غرفة الصقر.</li>
                    </ol>
                </div>
            </div>
        </div>

        {{-- كرت الفورم --}}
        <div class="bg-white dark:bg-slate-900 rounded-2xl shadow-xl shadow-slate-900/40 border border-slate-200 dark:border-slate-800">
            {{-- ✅ مهم: خلي الفورم عنده action + method عشان FormData يظل مضبوط + fallback --}}
            <form id="createSubmissionForm"
                  action="{{ route('guest-submissions.store') }}"
                  method="POST"
                  enctype="multipart/form-data"
                  class="p-5 sm:p-7 space-y-6">
                @csrf

                {{-- ADD: رسالة خطأ الغياب فوق قسم الضيوف (بدون حذف أي شيء) --}}
                <div id="absenceInlineError" class="hidden rounded-2xl border border-rose-300 dark:border-rose-800
                            bg-rose-50/95 dark:bg-rose-950/40 px-4 py-3 text-sm text-rose-800 dark:text-rose-100">
                    <div class="flex items-start gap-2">
                        <i class="fa-solid fa-circle-exclamation mt-0.5 text-rose-500"></i>
                        <div class="w-full">
                            <div class="font-semibold mb-1 text-[13px]">لا يمكن رفع القيست</div>
                            <div class="text-[12px] opacity-90 mb-2">
                                يوجد أعضاء في فترة غياب معتمدة تغطي تاريخ القيست.
                            </div>
                            <div class="rounded-xl bg-white/70 dark:bg-white/5 border border-rose-200/70 dark:border-rose-800/60 p-3">
                                <div class="text-[11px] font-semibold mb-1.5">الأعضاء الغائبون:</div>
                                <ul id="absenceInlineNames" class="list-disc pr-4 space-y-1 text-[12px]"></ul>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- END ADD --}}

                {{-- ✅ ADD: صندوق أخطاء عام للسيرفر (خصوصًا عند رفع صورة) --}}
                <div id="serverInlineError" class="hidden rounded-2xl border border-rose-200/80 dark:border-rose-800/70
                            bg-rose-50/90 dark:bg-rose-950/30 px-4 py-3 text-[12px] text-rose-800 dark:text-rose-100">
                    <div class="flex items-start gap-2">
                        <i class="fa-solid fa-bug mt-0.5 text-rose-500"></i>
                        <div class="w-full">
                            <div class="font-extrabold text-[13px] mb-1">خطأ أثناء الإرسال</div>
                            <div id="serverInlineErrorMsg" class="opacity-90 leading-relaxed"></div>
                        </div>
                    </div>
                </div>
                {{-- END ADD --}}

                {{-- الضيوف --}}
                <div>
                    <label class="block text-sm font-bold text-gray-900 dark:text-gray-100 mb-3">
                        الضيوف (Guest) *
                        <span class="text-gray-500 dark:text-gray-400 font-normal text-xs">
                            (الأشخاص الذين تم استضافتهم)
                        </span>
                    </label>
                    <div class="border border-gray-200 dark:border-gray-700 rounded-2xl p-4 bg-gray-50/60 dark:bg-slate-950/50 max-h-80 overflow-y-auto">
                        <div class="mb-3">
                            <input type="text" id="searchGuests" placeholder="ابحث عن ضيف..."
                                   class="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-xl
                                          bg-white dark:bg-slate-900 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm text-gray-900 dark:text-gray-100">
                        </div>
                        <div id="guestsList" class="space-y-2">
                            @foreach($allMembers as $user)
                            <label class="flex items-center gap-3 p-3 hover:bg-white dark:hover:bg-slate-900/70
                                          rounded-xl cursor-pointer transition guest-item"
                                   data-name="{{ strtolower($user->name) }}">
                                <input type="checkbox" name="guest_participants[]" value="{{ $user->id }}"
                                       class="w-5 h-5 text-purple-600 border-gray-300 dark:border-gray-600 rounded focus:ring-purple-500">
                                <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full
                                            flex items-center justify-center text-white font-bold flex-shrink-0">
                                    {{ mb_substr($user->name, 0, 1) }}
                                </div>
                                <div class="flex-1">
                                    <p class="font-medium text-gray-900 dark:text-gray-100 text-sm">{{ $user->name }}</p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">{{ $user->email }}</p>
                                </div>

                                {{-- ADD: شارة الغياب --}}
                                <span class="absentBadge hidden px-2 py-0.5 rounded-full text-[10px] font-bold
                                             bg-rose-500/15 text-rose-600 dark:text-rose-200 border border-rose-500/30">
                                    غائب
                                </span>
                                {{-- END ADD --}}
                            </label>
                            @endforeach
                        </div>
                    </div>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
                        كل ضيف تختاره هنا يساعدنا نربط العلاقات الجديدة مع مؤشرات التأثير والنمو في التيم.
                    </p>

                    {{-- ADD: تنبيه عام للغياب بالضيوف --}}
                    <div id="guestsAbsenceAlert" class="hidden mt-3 rounded-2xl border border-rose-200/80 dark:border-rose-800/80
                                bg-rose-50/90 dark:bg-rose-950/40 px-4 py-3 text-[12px] text-rose-800 dark:text-rose-100">
                        <div class="flex items-start gap-2">
                            <i class="fa-solid fa-triangle-exclamation mt-0.5 text-rose-500"></i>
                            <div class="leading-relaxed">
                                <div class="font-semibold">تنبيه غياب</div>
                                <div class="opacity-90">بعض الأعضاء غائبين في تاريخ القيست المحدد، لذلك تم تعطيلهم.</div>
                            </div>
                        </div>
                    </div>
                    {{-- END ADD --}}
                </div>

                {{-- الهوست --}}
                <div>
                    <label class="block text-sm font-bold text-gray-900 dark:text-gray-100 mb-3">
                        المستضيف (Host) *
                        <span class="text-gray-500 dark:text-gray-400 font-normal text-xs">
                            (العضو الذي قام بالاستضافة - اختر واحد فقط)
                        </span>
                    </label>
                    <div class="border border-gray-200 dark:border-gray-700 rounded-2xl p-4 bg-gray-50/60 dark:bg-slate-950/50 max-h-80 overflow-y-auto">
                        <div class="mb-3">
                            <input type="text" id="searchHosts" placeholder="ابحث عن مستضيف..."
                                   class="w-full px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-xl
                                          bg-white dark:bg-slate-900 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm text-gray-900 dark:text-gray-100">
                        </div>
                        <div id="hostsList" class="space-y-2">
                            @foreach($allMembers as $user)
                            <label class="flex items-center gap-3 p-3 hover:bg-white dark:hover:bg-slate-900/70
                                          rounded-xl cursor-pointer transition host-item"
                                   data-name="{{ strtolower($user->name) }}">
                                <input type="radio" name="host_participant" value="{{ $user->id }}"
                                       class="w-5 h-5 text-blue-600 border-gray-300 dark:border-gray-600 focus:ring-blue-500">
                                <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-full
                                            flex items-center justify-center text-white font-bold flex-shrink-0">
                                    {{ mb_substr($user->name, 0, 1) }}
                                </div>
                                <div class="flex-1">
                                    <p class="font-medium text-gray-900 dark:text-gray-100 text-sm">{{ $user->name }}</p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">{{ $user->email }}</p>
                                </div>

                                {{-- ADD: شارة الغياب --}}
                                <span class="absentBadge hidden px-2 py-0.5 rounded-full text-[10px] font-bold
                                             bg-rose-500/15 text-rose-600 dark:text-rose-200 border border-rose-500/30">
                                    غائب
                                </span>
                                {{-- END ADD --}}
                            </label>
                            @endforeach
                        </div>
                    </div>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
                        اختيار الهوست بدقة مهم لأنه يدخل في تقييم جهده ومؤشرات التأثير والتكريمات الخاصة فيه.
                    </p>

                    {{-- ADD: تنبيه عام للغياب بالهوست --}}
                    <div id="hostAbsenceAlert" class="hidden mt-3 rounded-2xl border border-rose-200/80 dark:border-rose-800/80
                                bg-rose-50/90 dark:bg-rose-950/40 px-4 py-3 text-[12px] text-rose-800 dark:text-rose-100">
                        <div class="flex items-start gap-2">
                            <i class="fa-solid fa-triangle-exclamation mt-0.5 text-rose-500"></i>
                            <div class="leading-relaxed">
                                <div class="font-semibold">تنبيه غياب</div>
                                <div class="opacity-90">تم تعطيل الأعضاء الغائبين في تاريخ القيست المحدد.</div>
                            </div>
                        </div>
                    </div>
                    {{-- END ADD --}}
                </div>

                {{-- معلومات تواصل / وصف --}}
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-bold text-gray-900 dark:text-gray-100 mb-2">
                            معلومات تواصل الضيف (اختياري)
                        </label>
                        <input type="text" name="guest_contact"
                               class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-xl
                                      bg-white dark:bg-slate-900 focus:ring-2 focus:ring-purple-500 focus:border-purple-500
                                      transition text-sm text-gray-900 dark:text-gray-100"
                               placeholder="رقم الهاتف أو البريد الإلكتروني"
                               value="{{ old('guest_contact') }}">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-900 dark:text-gray-100 mb-2">
                            وصف مختصر (اختياري)
                        </label>
                        <input type="text" name="guest_description"
                               class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-xl
                                      bg-white dark:bg-slate-900 focus:ring-2 focus:ring-purple-500 focus:border-purple-500
                                      transition text-sm text-gray-900 dark:text-gray-100"
                               placeholder="وصف القيست"
                               value="{{ old('guest_description') }}">
                    </div>
                </div>

                {{-- التاريخ والوقت --}}
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-bold text-gray-900 dark:text-gray-100 mb-2">
                            تاريخ القيست *
                        </label>
                        <input type="date" name="activity_date" required max="{{ date('Y-m-d') }}"
                               value="{{ old('activity_date') }}"
                               class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-xl
                                      bg-white dark:bg-slate-900 focus:ring-2 focus:ring-purple-500 focus:border-purple-500
                                      transition text-sm text-gray-900 dark:text-gray-100">
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">يجب أن يكون التاريخ في الماضي.</p>

                        {{-- ADD: تنبيه داخلي للتاريخ --}}
                        <p class="text-xs text-rose-500 dark:text-rose-300 mt-2 hidden" id="absenceDateHint">
                            تم تطبيق فلتر الغياب على هذا التاريخ.
                        </p>
                        {{-- END ADD --}}
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-900 dark:text-gray-100 mb-2">
                            وقت القيست *
                        </label>

@php
  $inputTz = 'Asia/Beirut';
  $oldTime = old('activity_time');

  try {
      if ($oldTime) {
          if (preg_match('/^\d{2}:\d{2}$/', $oldTime)) {
              $timeValue = $oldTime;
          } else {
              $timeValue = \Carbon\Carbon::parse($oldTime, $inputTz)->format('H:i');
          }
      } else {
          $timeValue = \Carbon\Carbon::now($inputTz)->format('H:i');
      }
  } catch (\Exception $e) {
      $timeValue = \Carbon\Carbon::now($inputTz)->format('H:i');
  }
@endphp

                        {{-- ✅ step=60 يمنع الثواني --}}
                        <input type="time" step="60" name="activity_time" required
                               value="{{ $timeValue }}"
                               class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-xl
                                      bg-white dark:bg-slate-900 focus:ring-2 focus:ring-purple-500 focus:border-purple-500
                                      transition text-sm text-gray-900 dark:text-gray-100">
                    </div>
                </div>

                {{-- الساعات الفعلية --}}
                <div>
                    <label class="block text-sm font-bold text-gray-900 dark:text-gray-100 mb-2">
                        عدد الساعات الفعلية *
                    </label>
                    <input type="number" name="actual_hours" required min="0.5" max="24" step="0.5"
                           value="{{ old('actual_hours', 1) }}"
                           class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-xl
                                  bg-white dark:bg-slate-900 focus:ring-2 focus:ring-purple-500 focus:border-purple-500
                                  transition text-sm text-gray-900 dark:text-gray-100">
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                        الحد الأدنى: 0.5 ساعة | الحد الأقصى: 24 ساعة.
                    </p>
                </div>

                {{-- صورة الإثبات --}}
                <div>
                    <label class="block text-sm font-bold text-gray-900 dark:text-gray-100 mb-2">
                        صورة الإثبات
                        <span class="text-gray-500 dark:text-gray-400 font-normal text-xs">(اختياري)</span>
                    </label>
                    <div class="border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-xl p-6
                                text-center hover:border-purple-500 transition bg-gray-50/60 dark:bg-slate-950/60">
                        <input type="file" name="proof_image" id="proofImage"
                               accept="image/jpeg,image/png,image/jpg" class="hidden">
                        <label for="proofImage" class="cursor-pointer">
                            <svg class="w-12 h-12 text-gray-400 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                            </svg>
                            <p class="text-sm text-gray-700 dark:text-gray-200">انقر لرفع صورة</p>
                            <p class="text-xs text-gray-400 mt-1">JPG, JPEG, PNG (الحد الأقصى: 5MB)</p>
                        </label>
                    </div>

                    {{-- ✅ ADD: ميتا معلومات ملف (تظهر بعد الاختيار) --}}
                    <div id="fileMeta" class="mt-3 hidden rounded-2xl border border-slate-200 dark:border-slate-800
                                bg-slate-50/70 dark:bg-slate-950/40 px-4 py-3 text-[12px] text-slate-700 dark:text-slate-200">
                        <div class="flex items-start justify-between gap-3">
                            <div class="space-y-0.5">
                                <div class="font-extrabold text-[13px] flex items-center gap-2">
                                    <i class="fa-solid fa-paperclip text-purple-600 dark:text-purple-300"></i>
                                    <span id="fileName">—</span>
                                </div>
                                <div class="opacity-80">
                                    <span id="fileSize">—</span>
                                    <span class="mx-2 opacity-40">•</span>
                                    <span id="fileType">—</span>
                                </div>
                            </div>
                            <button type="button" id="clearFileBtn"
                                    class="px-3 py-2 rounded-xl text-[11px] font-bold
                                           bg-rose-600/10 text-rose-700 dark:text-rose-200
                                           border border-rose-600/20 hover:bg-rose-600/15 transition">
                                إزالة
                            </button>
                        </div>
                    </div>
                    {{-- END ADD --}}

                    <div id="imagePreview" class="mt-3 hidden">
                        <img src="" alt="Preview" class="w-full h-48 object-cover rounded-xl border border-gray-200 dark:border-gray-700">
                    </div>
                </div>

                {{-- ✅ ADD: قسم AI قبل الملاحظات --}}
                <div class="rounded-2xl border border-purple-200/70 dark:border-purple-800/60
                            bg-purple-50/70 dark:bg-slate-950/40 p-4 space-y-4">
                    <div class="flex items-center justify-between gap-2">
                        <div class="flex items-center gap-2 text-sm font-extrabold text-gray-900 dark:text-gray-100">
                            <i class="fa-solid fa-brain text-[12px] text-purple-600 dark:text-purple-300"></i>
                            <span>ملاحظات التحليل (AI) — مهم جدًا</span>
                        </div>
                        <span class="text-[10px] px-2 py-1 rounded-full bg-purple-600/10 text-purple-700 dark:text-purple-200 border border-purple-600/25">
                            مهم للذكاء الاصطناعي
                        </span>
                    </div>

                    <div class="rounded-xl border border-amber-200/70 dark:border-amber-700/60
                                bg-amber-50/90 dark:bg-amber-950/30 px-4 py-3 text-[12px] text-amber-800 dark:text-amber-100">
                        <i class="fa-solid fa-triangle-exclamation me-1"></i>
                        <span class="font-bold">ملاحظة:</span>
                        هذه المعلومات <span class="font-bold">مهمة جدًا للذكاء الاصطناعي للتحاليل</span>.
                        إذا ما عندك تفاصيل اتركها فاضية — النظام رح يتجاهلها.
                    </div>

                    {{-- خيار 1 --}}
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-bold text-gray-900 dark:text-gray-100 mb-2">
                                خيار 1: هل كان أصدقاء تيم أو زوار؟
                            </label>
                            <select name="team_friends_or_visitors" id="team_friends_or_visitors"
                                    class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-xl
                                           bg-white dark:bg-slate-900 focus:ring-2 focus:ring-purple-500 focus:border-purple-500
                                           transition text-sm text-gray-900 dark:text-gray-100">
                                <option value="">-- تجاهل --</option>
                                <option value="yes" {{ old('team_friends_or_visitors') === 'yes' ? 'selected' : '' }}>نعم</option>
                                <option value="no"  {{ old('team_friends_or_visitors') === 'no'  ? 'selected' : '' }}>لا</option>
                            </select>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                إذا اخترت "نعم" رح يفتح حقل تكتب فيه مين كانوا.
                            </p>
                        </div>

                        <div id="team_friends_or_visitors_box" class="hidden">
                            <label class="block text-sm font-bold text-gray-900 dark:text-gray-100 mb-2">
                                مين الأصدقاء / الزوار؟ (اكتب أسماء)
                            </label>
                            <textarea name="team_friends_or_visitors_names" rows="3"
                                      class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-xl
                                             bg-white dark:bg-slate-900 focus:ring-2 focus:ring-purple-500 focus:border-purple-500
                                             transition text-sm text-gray-900 dark:text-gray-100"
                                      maxlength="1000"
                                      placeholder="اكتب الأسماء... (مثال: فلان، فلان، فلان)">{{ old('team_friends_or_visitors_names') }}</textarea>
                        </div>
                    </div>

                    {{-- خيار 2 --}}
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-bold text-gray-900 dark:text-gray-100 mb-2">
                                خيار 2: هل هناك مشاكل خاصة صار بالقست؟
                            </label>
                            <select name="has_special_issues" id="has_special_issues"
                                    class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-xl
                                           bg-white dark:bg-slate-900 focus:ring-2 focus:ring-purple-500 focus:border-purple-500
                                           transition text-sm text-gray-900 dark:text-gray-100">
                                <option value="">-- تجاهل --</option>
                                <option value="yes" {{ old('has_special_issues') === 'yes' ? 'selected' : '' }}>نعم</option>
                                <option value="no"  {{ old('has_special_issues') === 'no'  ? 'selected' : '' }}>لا</option>
                            </select>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                مثال: ما اتسجل بالصورة / مين كان موجود ومش محطوط بالقستات...
                            </p>
                        </div>

                        <div id="special_issues_box" class="hidden">
                            <label class="block text-sm font-bold text-gray-900 dark:text-gray-100 mb-2">
                                اكتب تفاصيل المشاكل
                            </label>
                            <textarea name="special_issues_details" rows="3"
                                      class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-xl
                                             bg-white dark:bg-slate-900 focus:ring-2 focus:ring-purple-500 focus:border-purple-500
                                             transition text-sm text-gray-900 dark:text-gray-100"
                                      maxlength="1000"
                                      placeholder="اكتب شو صار بالتفصيل...">{{ old('special_issues_details') }}</textarea>
                        </div>
                    </div>

                    {{-- خيار 3 --}}
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-bold text-gray-900 dark:text-gray-100 mb-2">
                                خيار 3: هل اللايف كان أقل من ساعة؟
                            </label>
                            <select name="live_less_than_hour" id="live_less_than_hour"
                                    class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-xl
                                           bg-white dark:bg-slate-900 focus:ring-2 focus:ring-purple-500 focus:border-purple-500
                                           transition text-sm text-gray-900 dark:text-gray-100">
                                <option value="">-- تجاهل --</option>
                                <option value="yes" {{ old('live_less_than_hour') === 'yes' ? 'selected' : '' }}>نعم</option>
                                <option value="no"  {{ old('live_less_than_hour') === 'no'  ? 'selected' : '' }}>لا</option>
                            </select>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                إذا "نعم" اختار كم كانت المدة بالدقائق.
                            </p>
                        </div>

                        <div id="live_duration_box" class="hidden">
                            <label class="block text-sm font-bold text-gray-900 dark:text-gray-100 mb-2">
                                كم كانت مدة اللايف؟ (بالدقائق)
                            </label>
                            <input type="number" name="live_duration_minutes" min="1" max="59"
                                   value="{{ old('live_duration_minutes') }}"
                                   class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-xl
                                          bg-white dark:bg-slate-900 focus:ring-2 focus:ring-purple-500 focus:border-purple-500
                                          transition text-sm text-gray-900 dark:text-gray-100"
                                   placeholder="مثال: 35">
                        </div>
                    </div>
                </div>
                {{-- END ADD --}}

                {{-- ملاحظات إضافية --}}
                <div>
                    <label class="block text-sm font-bold text-gray-900 dark:text-gray-100 mb-2">
                        ملاحظات إضافية / عامة (اختياري)
                    </label>
                    <textarea name="activity_notes" rows="4"
                              class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-xl
                                     bg-white dark:bg-slate-900 focus:ring-2 focus:ring-purple-500 focus:border-purple-500
                                     transition text-sm text-gray-900 dark:text-gray-100"
                              placeholder="اكتب أي ملاحظات إضافية عن القيست...">{{ old('activity_notes') }}</textarea>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
                        النظام سيضيف عبارات تلقائية داخل الملاحظات حسب خيارات AI أعلاه (وإذا ما اخترت شيء سيتجاهلها).
                    </p>
                </div>

                {{-- المستلم --}}
                <div>
                    <label class="block text-sm font-bold text-gray-900 dark:text-gray-100 mb-2">
                        إرسال إلى *
                        <span class="text-gray-500 dark:text-gray-400 font-normal text-xs">
                            @if (auth()->user()->hasRole('moderator'))
                                (يمكنك الإرسال للسوبر أدمن فقط)
                            @else
                                (يمكنك الإرسال للسوبر أدمن أو المشرفين من نفس الجنس)
                            @endif
                        </span>
                    </label>
                    <select name="recipient_id" required
                            class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-xl
                                   bg-white dark:bg-slate-900 focus:ring-2 focus:ring-purple-500 focus:border-purple-500
                                   transition text-sm text-gray-900 dark:text-gray-100">
                        <option value="">اختر المستقبل</option>
                        @foreach ($recipients as $recipient)
                            <option value="{{ $recipient->id }}" {{ old('recipient_id') == $recipient->id ? 'selected' : '' }}>
                                {{ $recipient->name }}
                                @if ($recipient->hasRole('super-admin'))
                                    (سوبر أدمن)
                                @elseif($recipient->hasRole('moderator'))
                                    (مشرف {{ $recipient->gender == 'male' ? 'شباب' : 'صبايا' }})
                                @endif
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- الأزرار --}}
                <div class="flex flex-col sm:flex-row gap-4 pt-2">
                    <button id="submitBtn" type="submit"
                            class="flex-1 px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600
                                   hover:from-purple-700 hover:to-pink-700 text-white rounded-xl font-bold
                                   transition-all duration-300 shadow-lg hover:shadow-xl flex items-center justify-center gap-2 text-sm">
                        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        رفع البيانات
                    </button>

                    <a href="{{ route('guest-submissions.my-submissions') }}"
                       class="px-8 py-4 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl font-bold
                              transition-all duration-300 flex items-center justify-center gap-2 text-sm
                              dark:bg-slate-900 dark:hover:bg-slate-800 dark:text-slate-100 border border-gray-200 dark:border-slate-700">
                        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                        إلغاء
                    </a>
                </div>
            </form>
        </div>

        {{-- Footer --}}
        <div class="mt-4 text-center text-[11px] text-gray-400 dark:text-gray-500 space-y-1.5">
            <div>
                كل إرسال يتم رفعه هنا يتم
                <span class="font-semibold text-purple-500 dark:text-purple-300">مراجعته يدويًا</span>
                من جهة المسؤول المختار ضمن نظام القيستات في غرفة الصقر،
                وبناءً عليه يتم احتساب التأثير والتكريمات المرتبطة بالقيست.
            </div>
            <div class="opacity-70">
                Golden Loyalty Army · Falcon Room · Guest Sessions Module
            </div>
        </div>

    </div>
</div>

<script>
// Search Guests
document.getElementById('searchGuests').addEventListener('input', (e) => {
    const search = e.target.value.toLowerCase();
    document.querySelectorAll('.guest-item').forEach(item => {
        item.style.display = item.dataset.name.includes(search) ? 'flex' : 'none';
    });
});

// Search Hosts
document.getElementById('searchHosts').addEventListener('input', (e) => {
    const search = e.target.value.toLowerCase();
    document.querySelectorAll('.host-item').forEach(item => {
        item.style.display = item.dataset.name.includes(search) ? 'flex' : 'none';
    });
});

// =====================
// Image Preview + Meta
// =====================
const proofInput = document.getElementById('proofImage');
const imagePreviewBox = document.getElementById('imagePreview');
const fileMeta = document.getElementById('fileMeta');
const fileNameEl = document.getElementById('fileName');
const fileSizeEl = document.getElementById('fileSize');
const fileTypeEl = document.getElementById('fileType');
const clearFileBtn = document.getElementById('clearFileBtn');

function __humanFileSize(bytes){
    const thresh = 1024;
    if(!bytes && bytes !== 0) return '—';
    if (Math.abs(bytes) < thresh) return bytes + ' B';
    const units = ['KB','MB','GB','TB'];
    let u = -1;
    do { bytes /= thresh; ++u; } while (Math.abs(bytes) >= thresh && u < units.length - 1);
    return bytes.toFixed(1) + ' ' + units[u];
}

function __resetFileUI(){
    if(imagePreviewBox) imagePreviewBox.classList.add('hidden');
    if(imagePreviewBox && imagePreviewBox.querySelector('img')) imagePreviewBox.querySelector('img').src = '';
    if(fileMeta) fileMeta.classList.add('hidden');
    if(fileNameEl) fileNameEl.textContent = '—';
    if(fileSizeEl) fileSizeEl.textContent = '—';
    if(fileTypeEl) fileTypeEl.textContent = '—';
}

if(clearFileBtn){
    clearFileBtn.addEventListener('click', () => {
        proofInput.value = '';
        __resetFileUI();
    });
}

proofInput.addEventListener('change', (e) => {
    const file = e.target.files && e.target.files[0] ? e.target.files[0] : null;
    if (!file) {
        __resetFileUI();
        return;
    }

    // meta
    if(fileNameEl) fileNameEl.textContent = file.name || 'صورة';
    if(fileSizeEl) fileSizeEl.textContent = __humanFileSize(file.size);
    if(fileTypeEl) fileTypeEl.textContent = file.type || 'image/*';
    if(fileMeta) fileMeta.classList.remove('hidden');

    // preview
    if (file && file.type && file.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = (ev) => {
            if(imagePreviewBox && imagePreviewBox.querySelector('img')){
                imagePreviewBox.querySelector('img').src = ev.target.result;
                imagePreviewBox.classList.remove('hidden');
            }
        };
        reader.readAsDataURL(file);
    } else {
        __resetFileUI();
    }
});

// ✅ ADD: AI toggles
function __toggleAiBoxes() {
    const teamSelect = document.getElementById('team_friends_or_visitors');
    const teamBox    = document.getElementById('team_friends_or_visitors_box');
    const teamNames  = document.querySelector('textarea[name="team_friends_or_visitors_names"]');

    const issuesSelect = document.getElementById('has_special_issues');
    const issuesBox    = document.getElementById('special_issues_box');
    const issuesDetails= document.querySelector('textarea[name="special_issues_details"]');

    const liveSelect   = document.getElementById('live_less_than_hour');
    const liveBox      = document.getElementById('live_duration_box');
    const liveMinutes  = document.querySelector('input[name="live_duration_minutes"]');

    const toggleTeam = () => {
        if(!teamSelect || !teamBox || !teamNames) return;
        if(teamSelect.value === 'yes') {
            teamBox.classList.remove('hidden');
        } else {
            teamBox.classList.add('hidden');
            teamNames.value = '';
        }
    };

    const toggleIssues = () => {
        if(!issuesSelect || !issuesBox || !issuesDetails) return;
        if(issuesSelect.value === 'yes') {
            issuesBox.classList.remove('hidden');
        } else {
            issuesBox.classList.add('hidden');
            issuesDetails.value = '';
        }
    };

    const toggleLive = () => {
        if(!liveSelect || !liveBox || !liveMinutes) return;
        if(liveSelect.value === 'yes') {
            liveBox.classList.remove('hidden');
        } else {
            liveBox.classList.add('hidden');
            liveMinutes.value = '';
        }
    };

    if(teamSelect) teamSelect.addEventListener('change', toggleTeam);
    if(issuesSelect) issuesSelect.addEventListener('change', toggleIssues);
    if(liveSelect) liveSelect.addEventListener('change', toggleLive);

    // init
    toggleTeam();
    toggleIssues();
    toggleLive();
}
document.addEventListener('DOMContentLoaded', __toggleAiBoxes);
// END ADD

// =======================================================
// ADD: دعم الغياب (تعطيل خيارات الضيوف/الهوست حسب التاريخ)
// =======================================================
const ABSENT_ENDPOINT = @json(route('superadmin.falcon-room.lives-new.absent-users'));
window.__absentSet = new Set();

function __activityDate(){
    const el = document.querySelector('input[name="activity_date"]');
    return el ? (el.value || '') : '';
}

// ADD: عرض/إخفاء خطأ الغياب داخل الصفحة
function showAbsenceInlineError(names = []){
    const box = document.getElementById('absenceInlineError');
    const list = document.getElementById('absenceInlineNames');
    if(!box || !list) return;

    list.innerHTML = '';
    (names || []).forEach(n => {
        const li = document.createElement('li');
        li.textContent = n;
        list.appendChild(li);
    });

    box.classList.remove('hidden');
    box.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function hideAbsenceInlineError(){
    const box = document.getElementById('absenceInlineError');
    const list = document.getElementById('absenceInlineNames');
    if(list) list.innerHTML = '';
    if(box) box.classList.add('hidden');
}

// ✅ ADD: اخفاء/اظهار خطأ عام للسيرفر
function showServerError(msg){
    const box = document.getElementById('serverInlineError');
    const el  = document.getElementById('serverInlineErrorMsg');
    if(el) el.textContent = msg || 'حدث خطأ غير متوقع.';
    if(box){
        box.classList.remove('hidden');
        box.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
}
function hideServerError(){
    const box = document.getElementById('serverInlineError');
    const el  = document.getElementById('serverInlineErrorMsg');
    if(el) el.textContent = '';
    if(box) box.classList.add('hidden');
}
// END ADD

async function __loadAbsent(){
    const date = __activityDate();
    if(!date){
        window.__absentSet = new Set();
        return;
    }

    try{
        const res = await fetch(`${ABSENT_ENDPOINT}?date=${encodeURIComponent(date)}`, {
            headers: { 'Accept':'application/json' }
        });
        if(!res.ok){
            window.__absentSet = new Set();
            return;
        }
        const data = await res.json();
        const ids = Array.isArray(data.user_ids) ? data.user_ids : [];
        window.__absentSet = new Set(ids.map(n => Number(n)));

        const hint = document.getElementById('absenceDateHint');
        if(hint) hint.classList.remove('hidden');
    }catch(e){
        window.__absentSet = new Set();
    }
}

function __applyAbsentUI(){
    const guestsAlert = document.getElementById('guestsAbsenceAlert');
    const hostAlert   = document.getElementById('hostAbsenceAlert');

    let anyDisabled = false;

    // Guests (checkboxes)
    document.querySelectorAll('#guestsList .guest-item').forEach(label => {
        const input = label.querySelector('input[type="checkbox"][name="guest_participants[]"]');
        const badge = label.querySelector('.absentBadge');
        if(!input) return;

        const id = Number(input.value || 0);
        const isAbsent = window.__absentSet.has(id);

        input.disabled = isAbsent;
        label.classList.toggle('opacity-50', isAbsent);
        label.classList.toggle('cursor-not-allowed', isAbsent);

        if(badge){
            badge.classList.toggle('hidden', !isAbsent);
        }

        if(isAbsent && input.checked){
            input.checked = false;
        }

        if(isAbsent) anyDisabled = true;
    });

    // Host (radio)
    document.querySelectorAll('#hostsList .host-item').forEach(label => {
        const input = label.querySelector('input[type="radio"][name="host_participant"]');
        const badge = label.querySelector('.absentBadge');
        if(!input) return;

        const id = Number(input.value || 0);
        const isAbsent = window.__absentSet.has(id);

        input.disabled = isAbsent;
        label.classList.toggle('opacity-50', isAbsent);
        label.classList.toggle('cursor-not-allowed', isAbsent);

        if(badge){
            badge.classList.toggle('hidden', !isAbsent);
        }

        if(isAbsent && input.checked){
            input.checked = false;
        }

        if(isAbsent) anyDisabled = true;
    });

    if(guestsAlert) guestsAlert.classList.toggle('hidden', !anyDisabled);
    if(hostAlert)   hostAlert.classList.toggle('hidden', !anyDisabled);
}

async function __refreshAbsence(){
    await __loadAbsent();
    __applyAbsentUI();
    hideAbsenceInlineError();
}

document.addEventListener('change', (e) => {
    if(e.target && e.target.name === 'activity_date'){
        __refreshAbsence();
    }
});

document.addEventListener('DOMContentLoaded', () => {
    __refreshAbsence();
});
// ======================= END ADD =======================


// ======================
// Form Submit (FIXED)
// ======================
document.getElementById('createSubmissionForm').addEventListener('submit', async (e) => {
    e.preventDefault();

    hideAbsenceInlineError();
    hideServerError();

    const formEl = e.target;
    const formData = new FormData(formEl);

    // ✅ مهم: إذا في checkbox arrays، FormData بتاخدهم طبيعي
    const guests = formData.getAll('guest_participants[]');
    const host   = formData.get('host_participant'); // واحد فقط

    if (guests.length === 0) {
        alert('يجب اختيار ضيف واحد على الأقل');
        return;
    }
    if (!host) {
        alert('يجب اختيار مستضيف واحد');
        return;
    }

    // ✅ ADD: منع الإرسال إذا اختير غائب (مع عرض رسالة فوق الضيوف)
    if (window.__absentSet && window.__absentSet.size) {
        const guestIds = guests.map(n => Number(n));
        const hostId = Number(host);

        const badGuests = guestIds.filter(id => window.__absentSet.has(id));
        const badHost   = window.__absentSet.has(hostId);

        if (badHost || badGuests.length) {
            const names = [];

            badGuests.forEach(id => {
                const el = document.querySelector(`#guestsList input[name="guest_participants[]"][value="${id}"]`);
                const name = el ? el.closest('label')?.querySelector('p.font-medium')?.textContent?.trim() : null;
                if (name) names.push(name);
            });

            if (badHost) {
                const el = document.querySelector(`#hostsList input[name="host_participant"][value="${hostId}"]`);
                const name = el ? el.closest('label')?.querySelector('p.font-medium')?.textContent?.trim() : null;
                if (name) names.push(name);
            }

            showAbsenceInlineError(names.length ? names : ['عضو/أعضاء غائبون']);
            return;
        }
    }
    // END ADD

    // ✅ FIX: إزالة مفاتيح [] من FormData قبل إرسال JSON (حتى ما يصير تعارض عند وجود صورة)
    formData.delete('guest_participants[]');
    formData.delete('host_participant');

    // ✅ إرسالهم كـ JSON Strings (مثل ما يتوقع السيرفر)
    formData.set('guest_participants', JSON.stringify(guests));
    formData.set('host_participants', JSON.stringify([host]));

    // ✅ FIX إضافي: تأكيد صيغ التاريخ/الوقت قبل الإرسال (خصوصًا مع iOS أحيانًا)
    const d = formEl.querySelector('input[name="activity_date"]')?.value || '';
    const t = formEl.querySelector('input[name="activity_time"]')?.value || '';
    if (!/^\d{4}-\d{2}-\d{2}$/.test(d)) {
        showServerError('صيغة تاريخ القيست غير صحيحة. الرجاء اختيار التاريخ من الحقل.');
        return;
    }
    if (!/^\d{2}:\d{2}$/.test(t)) {
        showServerError('صيغة وقت القيست غير صحيحة. الرجاء اختيار الوقت من الحقل.');
        return;
    }

    const submitBtn = document.getElementById('submitBtn');
    const originalText = submitBtn.innerHTML;
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<svg class="animate-spin h-5 w-5 mx-auto" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';

    try {
        const response = await fetch(formEl.action, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': formData.get('_token'),
                'Accept': 'application/json'
            },
            body: formData
        });

        const text = await response.text();
        let result = null;

        try { result = JSON.parse(text); } catch (e) {
            // ✅ إذا رجع HTML (419/500) أو أي شيء غير JSON
            showServerError('الاستجابة من السيرفر ليست JSON. تحقق من حالة الجلسة أو خطأ سيرفر.');
            console.error('Non-JSON response:', text);
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
            return;
        }

        // ✅ إذا السيرفر رجّع absent.names -> اعرضها فوق بدل alert
        if (!result.success && result.absent && Array.isArray(result.absent.names) && result.absent.names.length) {
            showAbsenceInlineError(result.absent.names);
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
            return;
        }

        if (response.status === 422 && result && result.errors) {
            // ✅ عرض أول خطأ بشكل محترم داخل الصفحة
            const firstKey = Object.keys(result.errors)[0];
            const firstMsg = firstKey ? (Array.isArray(result.errors[firstKey]) ? result.errors[firstKey][0] : result.errors[firstKey]) : null;
            showServerError(firstMsg || result.message || 'بيانات غير صحيحة.');
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
            return;
        }

        if (result.success) {
            alert(result.message);
            window.location.href = '{{ route('guest-submissions.my-submissions') }}';
            return;
        }

        showServerError(result.message || 'حدث خطأ غير متوقع.');
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalText;

    } catch (error) {
        console.error('Error:', error);
        showServerError('حدث خطأ في الاتصال أو تم إلغاء الطلب.');
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalText;
    }
});
</script>
@endsection