{{-- resources/views/superadmin/proactive/report-create.blade.php --}}
@extends('layouts.superadmin')

@section('title','ProActive — إنشاء تقرير')
@section('page-title','⚡️ ProActive — إنشاء تقرير فعالية')

@section('content')
@php
  // ✅ Defaults for initial render (حتى لو الـ JS ما اشتغل)
  $firstSchedule      = $scheduleOptions->first();
  $initialScheduleId  = old('schedule_id', optional($firstSchedule)->id);

  $initialDate        = old('activity_date', optional($firstSchedule)->event_date ?? $today);

  $initialTypeRaw     = old('activity_type', optional($firstSchedule)->event_type ?? 'regular');
  $initialType        = strtolower((string) $initialTypeRaw);
  $initialType        = $initialType === 'plus' ? 'plus' : 'regular';

  $initialPlatform    = old('platform', optional($firstSchedule)->platform ?? 'tiktok');

  $initialTimeText    = optional($firstSchedule)->event_time
      ? \Carbon\Carbon::parse(optional($firstSchedule)->event_time)->format('H:i')
      : '';

  // ✅ NEW: schedule meta (لـ Plus Auto)
  $initialTitleText   = trim((string)(optional($firstSchedule)->event_title ?? ''));
  $initialNotesText   = trim((string)(optional($firstSchedule)->notes ?? ''));
  $initialDescText    = trim((string)(optional($firstSchedule)->event_description ?? ''));
  $tzApp              = config('app.timezone','Asia/Jerusalem');

  // ✅ NEW: Initial autofill (حتى بدون JS) — Plus فقط
  $initialLockOwner = ($initialType === 'plus' && $initialTitleText !== '');
  $initialLockHost  = ($initialType === 'plus' && $initialNotesText !== '');

  $initialLiveOwner = old('live_owner_name');
  if ($initialLiveOwner === null || $initialLiveOwner === '') {
      $initialLiveOwner = ($initialType === 'plus') ? $initialTitleText : '';
  }

  $initialLiveHost = old('live_host');
  if ($initialLiveHost === null || $initialLiveHost === '') {
      $initialLiveHost = ($initialType === 'plus')
          ? \Illuminate\Support\Str::limit($initialNotesText, 150, '')
          : '';
  }

  // ✅ NEW: edit url للموعد (إذا Route موجودة)
  $canEditSchedule = \Illuminate\Support\Facades\Route::has('superadmin.proactive.schedules.edit');
  $initialEditUrl  = ($canEditSchedule && $initialScheduleId)
      ? route('superadmin.proactive.schedules.edit', $initialScheduleId)
      : '';
@endphp

<div class="min-h-screen rtl py-6 sm:py-8 bg-gradient-to-b from-slate-950 via-slate-900 to-black">
  <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

    {{-- ✅ HERO (ستايل سقراط) --}}
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-950/95 to-black/95 border border-amber-300/20 shadow-2xl shadow-amber-500/10">
      <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-amber-400/20 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-cyan-400/18 blur-3xl"></div>
      <div class="pointer-events-none absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_top,_#fde68a_0,_transparent_60%)]"></div>

      <div class="relative p-5 md:p-8">
        <div class="flex flex-col lg:flex-row lg:items-start gap-4">
          <div class="flex items-start gap-4 flex-1">
            <div class="grid h-12 w-12 place-items-center rounded-2xl bg-amber-500/15 border border-amber-400/25">
              <i class="fa-solid fa-bolt text-amber-200 text-xl"></i>
            </div>

            <div class="min-w-0">
              <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-amber-300/25 text-[11px] text-amber-100">
                <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                <span>ProActive — إنشاء تقرير مرتبط بموعد رسمي</span>
              </div>

              <h1 class="mt-2 text-xl md:text-2xl lg:text-3xl font-extrabold tracking-tight text-white">
                تقرير فعالية <span class="text-amber-300">ProActive</span>
              </h1>

              <p class="mt-2 text-sm md:text-base text-slate-200/85 leading-relaxed">
                هذه الصفحة لتوثيق فعالية <b>ProActive</b> المحددة مسبقًا في لوحة المواعيد.
                <br class="hidden md:block">
                <span class="text-white/70">ابدأ من الخطوة الأولى:</span> اختر الموعد من القائمة الرسمية،
                وسيتم تعبئة <b>التاريخ / النوع / المنصّة</b> تلقائيًا.
              </p>
            </div>
          </div>

          {{-- شارة "سجل التقارير" إن وُجد المسار --}}
          @php $idxRoute = 'superadmin.proactive.reports.index'; @endphp
          @if(\Illuminate\Support\Facades\Route::has($idxRoute))
            <a href="{{ route($idxRoute) }}"
               class="lg:ms-auto inline-flex items-center gap-2 px-4 py-2 rounded-2xl text-xs font-extrabold
                      bg-gradient-to-r from-emerald-200 via-cyan-200 to-fuchsia-200 text-slate-950
                      shadow-lg shadow-emerald-500/15 hover:scale-[1.01] active:scale-100 transition">
              <i class="fa-solid fa-rectangle-list text-[12px]"></i>
              سجل التقارير
            </a>
          @endif
        </div>

        {{-- ✅ 3 Facts --}}
        <div class="mt-5 grid grid-cols-1 md:grid-cols-3 gap-3">
          <div class="rounded-3xl p-4 bg-white/5 border border-white/10">
            <div class="text-[11px] text-amber-200/90">ما الذي يُسجَّل؟</div>
            <div class="mt-0.5 text-sm text-white/80">
              تاريخ/منصّة/رابط، المضيف وصاحب اللايف، التقييم العام، ملخص، مشاكل/تقدّم، مخرجات ملموسة.
            </div>
          </div>
          <div class="rounded-3xl p-4 bg-white/5 border border-white/10">
            <div class="text-[11px] text-emerald-200/90">كيف تُستخدم البيانات؟</div>
            <div class="mt-0.5 text-sm text-white/80">
              تحسين الخطط، تقوية العلاقات، التعلّم من المشاكل، متابعة أداء الأعضاء على أرض الواقع.
            </div>
          </div>
          <div class="rounded-3xl p-4 bg-white/5 border border-white/10">
            <div class="text-[11px] text-cyan-200/90">ربط بالتقويم الرسمي</div>
            <div class="mt-0.5 text-sm text-white/80">
              لا يمكن تعديل التاريخ أو نوع الفعالية يدويًا هنا؛ كل شيء يأتي من <b>موعد ProActive</b> المعتمد مسبقًا.
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- ✅ (نفس محتوى التنبيهات/المعلومات — فقط ستايل سقراط + ممكن تطويها) --}}
    <details class="rounded-3xl border border-white/10 bg-black/30 overflow-hidden shadow-xl" open>
      <summary class="cursor-pointer list-none px-4 sm:px-6 py-4 flex items-center justify-between border-b border-white/10">
        <div class="flex items-center gap-2 text-white/90">
          <span class="w-9 h-9 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 text-[12px]"></i>
          </span>
          <div>
            <div class="text-[11px] text-white/60">إرشادات قبل التسجيل</div>
            <div class="font-extrabold text-sm">اقرأها بسرعة — تقلّل رفض التقرير</div>
          </div>
        </div>
        <i class="fa-solid fa-chevron-down text-white/50 text-xs group-open:rotate-180 transition-transform"></i>
      </summary>

      <div class="px-4 sm:px-6 py-5 space-y-3">

        {{-- تنبيه بسيط قبل تعبئة التقرير --}}
        <div class="rounded-3xl border border-amber-300/25 bg-amber-500/10 px-4 py-3 flex items-start gap-3 text-sm text-amber-100">
          <div class="mt-0.5">
            <i class="fa-solid fa-circle-exclamation text-amber-300"></i>
          </div>
          <div class="flex-1">
            <div class="font-extrabold mb-0.5">قبل ما تسجّل تقرير جديد…</div>
            <p class="text-[13px] leading-relaxed text-amber-100/90">
              يُفضّل أولاً الدخول إلى <b>سجل تقارير ProActive</b> وفحص حالة تقاريرك السابقة (مقبول / قيد المراجعة / مرفوض)،
              عشان تكون صورتك كاملة قبل ما توثّق فعالية جديدة.
            </p>
            @php $idxRoute = 'superadmin.proactive.reports.index'; @endphp
            @if(\Illuminate\Support\Facades\Route::has($idxRoute))
              <a href="{{ route($idxRoute) }}"
                 class="inline-flex items-center gap-2 mt-2 px-3 py-1.5 rounded-2xl bg-amber-300/20 border border-amber-200/25 text-amber-100 text-xs font-extrabold hover:bg-amber-300/25">
                <i class="fa-solid fa-rectangle-list text-[11px]"></i>
                الذهاب إلى سجل التقارير الآن
              </a>
            @endif
          </div>
        </div>

        {{-- تحذير 24 ساعة --}}
        <div class="rounded-3xl border border-rose-300/20 bg-rose-500/10 px-4 py-3 flex items-start gap-3 text-sm text-rose-100">
          <div class="mt-0.5">
            <i class="fa-solid fa-triangle-exclamation text-rose-300"></i>
          </div>
          <div class="flex-1">
            <div class="font-extrabold mb-0.5">تنبيه مهم بخصوص حالة التقارير</div>
            <p class="text-[13px] leading-relaxed text-rose-100/90">
              إذا كان <b>تقريرك ما زال تحت المراجعة</b> ومرّت عليه <b>24 ساعة أو أكثر</b> بدون تغيير،
              يرجى التواصل فورًا مع <b>سيف الوفاء</b> أو <b>أمير</b>.
            </p>
            <p class="mt-1 text-[12px] text-rose-100/70">
              قد يكون هناك <b>أخطاء إملائية</b> أو حاجة إلى <b>فحص تقني إضافي بشري</b> قبل الاعتماد النهائي.
            </p>
          </div>
        </div>

        {{-- تذكير AI --}}
        <div class="rounded-3xl border border-blue-300/20 bg-blue-500/10 px-4 py-3 flex items-start gap-3 text-sm text-blue-100">
          <div class="mt-0.5">
            <i class="fa-solid fa-robot text-blue-300"></i>
          </div>
          <div class="flex-1">
            <div class="font-extrabold mb-0.5">تذكير من نظام المراجعة الذكية 🤖</div>
            <p class="text-[13px] leading-relaxed text-blue-100/90">
              تتم <b>مراجعة التقارير تلقائيًا</b>، لذا اكتب بإملاء صحيح ومنطق واضح، ولا تفعّل أي حقل بدون حاجة.
            </p>
            <p class="mt-1 text-[13px] leading-relaxed text-blue-100/90">
              اعملوا على <b>تحريك عدد الدعوات</b> — لا نريد الرقم <b>صفرًا دائمًا</b> 😉
              واحرص على كتابة <b>العنوان</b> والمحتوى بدقّة لضمان قبول التقرير.
            </p>
            <p class="mt-2 text-[12px] text-blue-100/70">
              كل تقرير مقبول يرفع جودة التحليل ويُحسّن مواعيد البرنامج وتحليل الأداء العام 💪✨
            </p>
          </div>
        </div>

        {{-- معلومات الروابط --}}
        <div class="rounded-3xl border border-violet-300/20 bg-violet-500/10 px-5 py-4 flex items-start gap-3 text-sm text-violet-100">
          <div class="mt-0.5"><i class="fa-solid fa-circle-info text-violet-300"></i></div>
          <div class="flex-1">
            <div class="font-extrabold mb-2">🧭 معلومات هامة قبل إنشاء التقرير</div>

            <p class="text-[13px] leading-relaxed text-violet-100/90">
              اختيار <b>مواعيد التقارير</b> يتم فقط من خلال <b>الجدول الأسبوعي للمواعيد</b> وليس عبر كتابة يدوية.
            </p>
            <a href="https://portal.amir-os.com/index.php/superadmin/proactive/schedules/grid"
               target="_blank"
               class="inline-flex items-center gap-2 mt-2 px-3 py-1.5 rounded-2xl bg-violet-300/20 border border-violet-200/25 text-violet-100 text-xs font-extrabold hover:bg-violet-300/25">
              <i class="fa-solid fa-calendar-days text-[11px]"></i>
              جدول المواعيد الأسبوعي
            </a>

            <p class="mt-4 text-[13px] leading-relaxed text-violet-100/90">
              المواعيد المستقبلية تُحدَّد بواسطة <b>الذكاء الاصطناعي</b> بناءً على جودة تقاريركم السابقة وملاحظات صفحة رولا والصقر.
            </p>
            <a href="https://portal.amir-os.com/index.php/superadmin/falcon-rola-notes"
               target="_blank"
               class="inline-flex items-center gap-2 mt-2 px-3 py-1.5 rounded-2xl bg-amber-300/20 border border-amber-200/25 text-amber-100 text-xs font-extrabold hover:bg-amber-300/25">
              <i class="fa-solid fa-pen-to-square text-[11px]"></i>
              صفحة ملاحظات رولا والصقر
            </a>

            <p class="mt-4 text-[13px] leading-relaxed text-violet-100/90">
              لمتابعة حالة تقاريرك السابقة:
            </p>
            <a href="{{ route('superadmin.proactive.reports.index') }}"
               class="inline-flex items-center gap-2 mt-2 px-3 py-1.5 rounded-2xl bg-emerald-300/20 border border-emerald-200/25 text-emerald-100 text-xs font-extrabold hover:bg-emerald-300/25">
              <i class="fa-solid fa-rectangle-list text-[11px]"></i>
              سجل التقارير الرسمي
            </a>
          </div>
        </div>

        {{-- الفرق بين العادي وPlus --}}
        <div class="rounded-3xl border border-amber-300/20 bg-amber-500/10 px-5 py-4 flex items-start gap-3 text-sm text-amber-100">
          <div class="mt-0.5"><i class="fa-solid fa-bolt text-amber-300"></i></div>
          <div class="flex-1 leading-relaxed">
            <div class="font-extrabold mb-2">⚡️ ما الفرق بين ProActive العادي وProActive Plus؟</div>

            <p class="text-[13px] mb-2 text-amber-100/90">
              <b>ProActive عادي</b> = جولة في <b>لايفات أشخاص لا نعرفهم</b>، ممنوع يكونوا من القوائم/الأصدقاء،
              الهدف <b>التعرّف على وجوه جديدة</b> فقط، ولا تتكرر نفس الجولة.
            </p>

            <p class="text-[13px] mb-2 text-amber-100/90">
              <b>ProActive Plus</b> = جولة داخل <b>لايفات الأصدقاء والمعارف</b>، مسموح تتكرر لتقوية العلاقات والمتابعة.
            </p>

            <p class="text-[13px] mt-2 text-amber-100 font-bold">
              ملاحظة: Plus ضمنيًا يُعتبر عادي مع ميزات إضافية، وليس العكس.
            </p>
          </div>
        </div>

      </div>
    </details>

    {{-- ✅ FLASH / ERRORS (ستايل سقراط) --}}
    @if(session('success'))
      <div class="rounded-3xl border border-emerald-400/20 bg-emerald-500/10 text-emerald-200 px-4 py-3 text-sm">
        <i class="fa-solid fa-circle-check ms-2"></i>
        {{ session('success') }}
      </div>
    @endif

    @if($errors->any())
      <div class="rounded-3xl border border-rose-400/20 bg-rose-500/10 text-rose-200 px-4 py-3 text-sm">
        <div class="font-extrabold mb-2"><i class="fa-solid fa-triangle-exclamation ms-2"></i> توجد أخطاء</div>
        <ul class="list-disc pr-5 text-[13px] space-y-1">
          @foreach($errors->all() as $e) <li>{{ $e }}</li> @endforeach
        </ul>
      </div>
    @endif

    {{-- ✅ نموذج الإنشاء (Wizard Slides) --}}
    <form method="POST"
          action="{{ route('superadmin.proactive.report.store') }}"
          class="space-y-6"
          novalidate
          enctype="multipart/form-data">
      @csrf

      {{-- ✅ Toast للـ Wizard --}}
      <div id="wizardToast" class="hidden rounded-3xl border border-rose-400/20 bg-rose-500/10 text-rose-200 px-4 py-3 text-sm">
        <span id="wizardToastText">—</span>
      </div>

      {{-- ✅ PROGRESS STEPPER --}}
      <div id="wizardTop" class="rounded-3xl border border-white/10 bg-slate-950/70 shadow-xl overflow-hidden">
        <div class="px-4 sm:px-6 py-4 border-b border-white/10 flex items-center justify-between gap-3">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-2xl bg-cyan-500/15 border border-cyan-400/25 grid place-items-center text-cyan-200">
              <i class="fa-solid fa-wand-magic-sparkles"></i>
            </div>
            <div>
              <div class="text-[11px] text-white/60">Wizard</div>
              <div class="font-extrabold text-white text-sm">إنشاء تقرير — خطوة بخطوة</div>
            </div>
          </div>

          <div class="text-[11px] text-white/70 bg-white/5 border border-white/10 px-3 py-1 rounded-full" id="wizLabel">
            0/4 مكتمل
          </div>
        </div>

        <div class="px-4 sm:px-6 py-4">
          <div class="h-2 rounded-full bg-white/10 overflow-hidden">
            <div id="wizBar" class="h-full rounded-full bg-gradient-to-r from-fuchsia-200 via-cyan-200 to-emerald-200" style="width:0%"></div>
          </div>

          <div class="mt-4 grid grid-cols-1 sm:grid-cols-4 gap-3" id="wizSteps">
            <button type="button" class="wizStep flex items-center gap-2 w-full px-3 py-3 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/70 hover:bg-white/10 transition"
                    data-step="1" onclick="setWizardStep(1)">
              <span class="w-8 h-8 rounded-xl bg-white/5 border border-white/10 grid place-items-center text-[11px] font-extrabold">1</span>
              <div class="text-right min-w-0">
                <div class="font-extrabold truncate">اختيار الموعد</div>
                <div class="text-[11px] text-white/50" data-status>قادم</div>
              </div>
            </button>

            <button type="button" class="wizStep flex items-center gap-2 w-full px-3 py-3 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/70 hover:bg-white/10 transition"
                    data-step="2" onclick="setWizardStep(2)">
              <span class="w-8 h-8 rounded-xl bg-white/5 border border-white/10 grid place-items-center text-[11px] font-extrabold">2</span>
              <div class="text-right min-w-0">
                <div class="font-extrabold truncate">اللايف والتقييم</div>
                <div class="text-[11px] text-white/50" data-status>قادم</div>
              </div>
            </button>

            <button type="button" class="wizStep flex items-center gap-2 w-full px-3 py-3 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/70 hover:bg-white/10 transition"
                    data-step="3" onclick="setWizardStep(3)">
              <span class="w-8 h-8 rounded-xl bg-white/5 border border-white/10 grid place-items-center text-[11px] font-extrabold">3</span>
              <div class="text-right min-w-0">
                <div class="font-extrabold truncate">تقدّم/مشاكل/عضو</div>
                <div class="text-[11px] text-white/50" data-status>قادم</div>
              </div>
            </button>

            <button type="button" class="wizStep flex items-center gap-2 w-full px-3 py-3 rounded-2xl border border-white/10 bg-white/5 text-[12px] text-white/70 hover:bg-white/10 transition"
                    data-step="4" onclick="setWizardStep(4)">
              <span class="w-8 h-8 rounded-xl bg-white/5 border border-white/10 grid place-items-center text-[11px] font-extrabold">4</span>
              <div class="text-right min-w-0">
                <div class="font-extrabold truncate">الملاحظات والمخرجات</div>
                <div class="text-[11px] text-white/50" data-status>قادم</div>
              </div>
            </button>
          </div>

          <div class="mt-3 text-[11px] text-white/50" id="wizHint">
            ابدأ باختيار موعد الفعالية.
          </div>
        </div>
      </div>

      {{-- ✅ SLIDES CONTAINER --}}
      <div class="rounded-3xl border border-white/10 bg-slate-950/70 shadow-2xl overflow-hidden">
        {{-- خليه LTR عشان التحريك ثابت --}}
        <div dir="ltr" class="overflow-hidden">
          <div id="wizTrack" class="flex transition-transform duration-500 ease-out" style="transform: translateX(0%);">

            {{-- ===================== SLIDE 1 ===================== --}}
            <section class="w-full shrink-0 p-4 sm:p-6" dir="rtl">
              {{-- شرح الخطوة --}}
              <div class="mb-4 rounded-3xl border border-amber-300/20 bg-amber-500/10 p-4">
                <div class="flex items-start gap-3">
                  <div class="w-10 h-10 rounded-2xl bg-amber-500/15 border border-amber-400/25 grid place-items-center text-amber-200">
                    <i class="fa-solid fa-calendar-check"></i>
                  </div>
                  <div class="flex-1">
                    <div class="text-[11px] text-amber-100/70">شرح الخطوة 1</div>
                    <div class="font-extrabold text-amber-100">اختيار موعد الفعالية الرسمي</div>
                    <ul class="mt-2 text-[13px] text-amber-100/85 space-y-1 list-disc pr-5">
                      <li>اختر الموعد من القائمة الرسمية فقط (لا كتابة يدوية).</li>
                      <li>بعد الاختيار سيتم تعبئة <b>التاريخ/النوع/المنصّة</b> تلقائيًا وقفلها.</li>
                      <li>إذا ما في مواعيد: لازم تعمل موعد أولًا من صفحة المواعيد ثم ترجع.</li>
                    </ul>
                  </div>
                </div>
              </div>

              {{-- 1) اختيار الموعد + البيانات الأساسية (مقروءة فقط) --}}
              <div class="rounded-3xl border border-white/10 bg-black/30 overflow-hidden">
                <div class="px-5 py-4 border-b border-white/10 flex items-center gap-2">
                  <span class="inline-flex h-7 w-7 items-center justify-center rounded-xl bg-amber-500/15 text-amber-200 text-xs font-extrabold border border-amber-400/25">1</span>
                  <h3 class="font-extrabold text-white">اختيار موعد الفعالية</h3>
                  <span class="ms-auto text-[11px] text-white/50">
                    اختر موعدًا، وسيتم قفل التاريخ والنوع والمنصّة تلقائيًا.
                  </span>
                </div>

                <div class="p-5 space-y-4">

                  @if($scheduleOptions->isEmpty())
                    <div class="rounded-2xl border border-amber-300/25 bg-amber-500/10 p-4 text-sm text-amber-100/90">
                      لا توجد مواعيد قادمة حالياً في لوحة ProActive.
                      <br>
                      يرجى إنشاء موعد جديد أولاً من صفحة <b>مواعيد ProActive</b> ثم العودة لإنشاء التقرير المرتبط به.
                    </div>
                  @else
                    <div class="space-y-1">
                      <label for="schedule_id" class="block text-sm font-bold text-white/90">
                        اختر موعد ProActive الرسمي
                      </label>

                      <select id="schedule_id" name="schedule_id"
                              class="w-full rounded-2xl border border-white/15 bg-black/40 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-amber-500/30">
                        @foreach($scheduleOptions as $opt)
                          @php
                            $isToday  = $opt->event_date === $today;
                            $timeText = $opt->event_time
                                ? \Carbon\Carbon::parse($opt->event_time)->format('H:i')
                                : 'بدون وقت محدد';
                            $typeText = strtolower((string)$opt->event_type) === 'plus' ? 'Plus' : 'عادية';
                            $platformText = strtoupper((string)$opt->platform);
                            $labelDate = $isToday ? '🔥 اليوم' : $opt->event_date;

                            $editUrl = '';
                            if ($canEditSchedule) {
                              $editUrl = route('superadmin.proactive.schedules.edit', $opt->id);
                            }
                          @endphp
                          <option value="{{ $opt->id }}"
                                  @selected($initialScheduleId == $opt->id)
                                  data-date="{{ $opt->event_date }}"
                                  data-type="{{ strtolower((string)$opt->event_type) }}"
                                  data-platform="{{ $opt->platform }}"
                                  data-title="{{ $opt->event_title }}"
                                  data-time="{{ $timeText }}"
                                  data-notes='@json((string)($opt->notes ?? ""))'
                                  data-description='@json((string)($opt->event_description ?? ""))'
                                  data-edit-url="{{ $editUrl }}">
                            {{ $labelDate }} — {{ $timeText }} — {{ $typeText }} — {{ $platformText }} — {{ $opt->event_title }}
                          </option>
                        @endforeach
                      </select>

                      <p class="text-[11px] text-white/50 mt-1">
                        إذا كانت الفعالية <b>اليوم</b> ستظهر بوسم <span class="font-extrabold text-amber-300">🔥 اليوم</span>.
                      </p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4 text-sm">
                      <div>
                        <label class="block text-[11px] mb-1 text-white/50">تاريخ الفعالية (من الموعد)</label>
                        <input type="text" id="display_activity_date"
                               class="w-full rounded-2xl border border-white/10 px-3 py-2 bg-white/5 text-white/90"
                               value="{{ $initialDate ? ($initialDate . ($initialTimeText ? ' — '.$initialTimeText : '')) : '—' }}"
                               readonly>
                      </div>
                      <div>
                        <label class="block text-[11px] mb-1 text-white/50">نوع الفعالية</label>
                        <input type="text" id="display_activity_type"
                               class="w-full rounded-2xl border border-white/10 px-3 py-2 bg-white/5 text-white/90"
                               value="{{ $initialType === 'plus' ? 'Plus (بلس)' : 'عادية' }}"
                               readonly>
                      </div>
                      <div>
                        <label class="block text-[11px] mb-1 text-white/50">المنصّة</label>
                        <input type="text" id="display_platform"
                               class="w-full rounded-2xl border border-white/10 px-3 py-2 bg-white/5 text-white/90"
                               value="{{ $initialPlatform ? strtoupper((string)$initialPlatform) : '—' }}"
                               readonly>
                      </div>
                    </div>

                    {{-- ✅ حقول مخفية كما هي (لكن بقيم أولية صحيحة) --}}
                    <input type="hidden" name="activity_date" id="input_activity_date" value="{{ $initialDate }}">
                    <input type="hidden" name="activity_type" id="input_activity_type" value="{{ $initialType }}">
                    <input type="hidden" name="platform"      id="input_platform"      value="{{ $initialPlatform }}">

                    {{-- ✅ PLUS PACK (يظهر فقط إذا نوع الموعد Plus) --}}
                    @php
                      $membersRaw = $activeMembers ?? [];
                      $members    = $membersRaw instanceof \Illuminate\Support\Collection ? $membersRaw : collect($membersRaw);

                      $oldMembers = old('plus_members', []);
                      $oldMembers = is_array($oldMembers) ? $oldMembers : [];
                      $oldMembersInt = array_map('intval', $oldMembers);
                    @endphp

                    <fieldset id="plus_pack"
                              class="{{ $initialType === 'plus' ? '' : 'hidden' }} mt-5 space-y-4"
                              {{ $initialType === 'plus' ? '' : 'disabled' }}>
                      <div class="rounded-3xl border border-fuchsia-300/20 bg-fuchsia-500/10 p-4">
                        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
                          <div>
                            <div class="text-sm font-extrabold text-fuchsia-100">
                              ✅ أعضاء فعالية +Plus (اختيار متعدد)
                            </div>
                            <div class="text-[12px] text-fuchsia-100/70">
                              يظهر هذا القسم فقط عندما يكون الموعد نوعه <b>Plus</b>.
                            </div>
                          </div>

                          <label class="inline-flex items-center gap-2 text-sm font-extrabold text-fuchsia-100">
                            <input type="checkbox" id="plus_select_all" class="rounded">
                            <span>اختيار الجميع</span>
                          </label>
                        </div>

                        <div class="mt-3">
                          <input id="plus_member_search" type="text" placeholder="ابحث عن عضو..."
                                 class="w-full rounded-2xl border border-white/15 bg-black/40 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-fuchsia-500/25">
                        </div>

                        @if($members->isEmpty())
                          <div class="mt-3 rounded-2xl border border-white/10 bg-black/30 p-3 text-[12px] text-white/70">
                            لا يوجد أعضاء جاهزين للعرض. (تأكد إن الكنترول يمرّر <code>$activeMembers</code> للـ View)
                          </div>
                        @else
                          <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 max-h-[260px] overflow-auto p-1">
                            @foreach($members as $m)
                              @php
                                $mid = (int)($m->id ?? 0);
                                $checked = in_array($mid, $oldMembersInt, true);
                                $label = trim(($m->name ?? '') . (!empty($m->username) ? ' (@'.$m->username.')' : ''));
                              @endphp
                              <label class="plus_member_item flex items-center gap-2 rounded-2xl border border-white/10 bg-white/5 p-2 cursor-pointer">
                                <input class="plus_member_cb rounded" type="checkbox" name="plus_members[]"
                                       value="{{ $mid }}" @checked($checked)>
                                <span class="text-[13px] text-white/85 plus_member_name">
                                  {{ $label ?: ('#'.$mid) }}
                                </span>
                              </label>
                            @endforeach
                          </div>
                        @endif
                      </div>

<div class="rounded-3xl border border-cyan-300/20 bg-gradient-to-br from-cyan-500/10 via-slate-900/20 to-black/30 p-4 overflow-hidden relative">
  <div class="pointer-events-none absolute -top-16 -right-16 w-56 h-56 rounded-full bg-cyan-400/15 blur-3xl"></div>
  <div class="pointer-events-none absolute -bottom-16 -left-16 w-56 h-56 rounded-full bg-fuchsia-400/10 blur-3xl"></div>

  <div class="flex items-start justify-between gap-3">
    <div>
      <div class="text-sm font-extrabold text-cyan-100 flex items-center gap-2">
        <span class="w-9 h-9 rounded-2xl grid place-items-center bg-cyan-500/15 border border-cyan-300/20 text-cyan-200">
          <i class="fa-solid fa-photo-film text-[12px]"></i>
        </span>
        <span>التوثيق (صورة أو فيديو) — اختياري</span>
      </div>
      <div class="text-[12px] text-cyan-100/70 mt-1">
        اسحب الملف داخل الصندوق أو اضغط “اختيار ملف”. لو ما رفعت… ما في أي مشكلة.
      </div>
    </div>

    <span class="shrink-0 px-3 py-1.5 rounded-2xl border border-white/10 bg-black/30 text-[11px] text-white/70 font-extrabold">
      حتى 50MB
    </span>
  </div>

  {{-- Dropzone --}}
  <div id="docDropzone"
       class="mt-4 rounded-3xl border border-white/10 bg-black/30 backdrop-blur-xl
              p-4 sm:p-5 transition
              hover:bg-black/35 hover:border-cyan-300/25
              focus-within:ring-2 focus-within:ring-cyan-400/25
              relative">

    <input id="doc_file" type="file" name="doc_file" accept="image/*,video/*"
           class="hidden">

    <div class="flex flex-col sm:flex-row sm:items-center gap-4">
      <div class="shrink-0">
        <div id="docIcon"
             class="w-16 h-16 rounded-3xl grid place-items-center
                    bg-gradient-to-br from-cyan-500/20 via-white/5 to-black/20
                    border border-white/10 text-cyan-200">
          <i class="fa-solid fa-cloud-arrow-up text-[18px]"></i>
        </div>
      </div>

      <div class="min-w-0 flex-1">
        <div class="text-white font-extrabold truncate" id="docTitle">
          اسحب ملف التوثيق هنا
        </div>
        <div class="text-white/60 text-[12px] mt-1" id="docSub">
          صور: JPG/PNG/WEBP/GIF — فيديو: MP4/WEBM/MOV
        </div>

        <div class="mt-3 flex flex-wrap items-center gap-2">
          <button type="button" id="docPickBtn"
                  class="px-4 py-2 rounded-2xl text-xs font-extrabold text-slate-950
                         bg-gradient-to-r from-cyan-200 via-emerald-200 to-fuchsia-200
                         hover:scale-[1.01] active:scale-100 transition shadow-lg shadow-cyan-500/10">
            <i class="fa-solid fa-folder-open ms-2 text-[12px]"></i>
            اختيار ملف
          </button>

          <button type="button" id="docRemoveBtn"
                  class="hidden px-4 py-2 rounded-2xl text-xs font-extrabold
                         border border-rose-300/20 bg-rose-500/10 text-rose-100
                         hover:bg-rose-500/15 transition">
            <i class="fa-solid fa-trash ms-2 text-[12px]"></i>
            إزالة
          </button>

          <span id="docMeta"
                class="hidden px-3 py-2 rounded-2xl text-[11px] font-extrabold
                       border border-white/10 bg-black/30 text-white/75 truncate">
            —
          </span>
        </div>
      </div>

      <div class="shrink-0 text-[11px] text-white/45">
        <div class="inline-flex items-center gap-2">
          <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
          جاهز
        </div>
      </div>
    </div>

    {{-- Preview --}}
    <div id="docPreviewWrap" class="hidden mt-4">
      <div class="rounded-3xl border border-white/10 bg-black/25 overflow-hidden">
        <img id="docPreviewImg" class="hidden w-full max-h-[320px] object-cover" alt="">
        <video id="docPreviewVid" class="hidden w-full max-h-[320px]" controls></video>
      </div>

      <div class="mt-2 text-[11px] text-white/55">
        تقدر تغيّر الملف أو تحذفه قبل الحفظ.
      </div>
    </div>

    {{-- Drag overlay --}}
    <div id="docDragOverlay"
         class="hidden absolute inset-0 rounded-3xl border-2 border-dashed border-cyan-300/40
                bg-cyan-500/10 backdrop-blur-sm
                grid place-items-center text-cyan-100 font-extrabold text-sm">
      إفلات الملف هنا ✨
    </div>

  </div>
</div>

<script>
(function(){
  const dz   = document.getElementById('docDropzone');
  const inp  = document.getElementById('doc_file');
  const pick = document.getElementById('docPickBtn');
  const rm   = document.getElementById('docRemoveBtn');
  const meta = document.getElementById('docMeta');

  const title = document.getElementById('docTitle');
  const sub   = document.getElementById('docSub');

  const prevWrap = document.getElementById('docPreviewWrap');
  const img  = document.getElementById('docPreviewImg');
  const vid  = document.getElementById('docPreviewVid');

  const overlay = document.getElementById('docDragOverlay');

  if(!dz || !inp || !pick) return;

  function humanSize(bytes){
    const b = Number(bytes || 0);
    if (b < 1024) return b + ' B';
    const kb = b / 1024;
    if (kb < 1024) return kb.toFixed(1) + ' KB';
    const mb = kb / 1024;
    if (mb < 1024) return mb.toFixed(1) + ' MB';
    const gb = mb / 1024;
    return gb.toFixed(2) + ' GB';
  }

  function clearPreview(){
    if(img){ img.classList.add('hidden'); img.removeAttribute('src'); }
    if(vid){
      try{ vid.pause(); }catch(e){}
      vid.classList.add('hidden');
      vid.removeAttribute('src');
      try{ vid.load(); }catch(e){}
    }
    if(prevWrap) prevWrap.classList.add('hidden');
  }

  function setFile(f){
    clearPreview();

    if(!f){
      title.textContent = 'اسحب ملف التوثيق هنا';
      sub.textContent   = 'صور: JPG/PNG/WEBP/GIF — فيديو: MP4/WEBM/MOV';
      if(rm) rm.classList.add('hidden');
      if(meta) meta.classList.add('hidden');
      return;
    }

    title.textContent = f.name;
    sub.textContent   = 'تم اختيار ملف التوثيق ✅';
    if(rm) rm.classList.remove('hidden');

    if(meta){
      meta.textContent = humanSize(f.size) + ' • ' + (f.type || 'file');
      meta.classList.remove('hidden');
    }

    const url = URL.createObjectURL(f);
    if((f.type || '').startsWith('image/')){
      if(img){
        img.src = url;
        img.classList.remove('hidden');
      }
      if(prevWrap) prevWrap.classList.remove('hidden');
    } else if((f.type || '').startsWith('video/')){
      if(vid){
        vid.src = url;
        vid.classList.remove('hidden');
      }
      if(prevWrap) prevWrap.classList.remove('hidden');
    }
  }

  pick.addEventListener('click', ()=> inp.click());

  if(rm){
    rm.addEventListener('click', ()=>{
      inp.value = '';
      setFile(null);
    });
  }

  inp.addEventListener('change', ()=>{
    const f = inp.files && inp.files[0] ? inp.files[0] : null;
    setFile(f);
  });

  // Make the whole box clickable
  dz.addEventListener('click', (e)=>{
    const t = e.target;
    if(t && (t.id === 'docPickBtn' || t.id === 'docRemoveBtn')) return;
    inp.click();
  });

  // Drag & Drop (modern overlay)
  const showOverlay = (on)=> { if(overlay) overlay.classList.toggle('hidden', !on); };

  dz.addEventListener('dragenter', (e)=>{ e.preventDefault(); e.stopPropagation(); showOverlay(true); });
  dz.addEventListener('dragover',  (e)=>{ e.preventDefault(); e.stopPropagation(); showOverlay(true); });
  dz.addEventListener('dragleave', (e)=>{ e.preventDefault(); e.stopPropagation(); showOverlay(false); });
  dz.addEventListener('drop', (e)=>{
    e.preventDefault(); e.stopPropagation();
    showOverlay(false);

    const f = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0] ? e.dataTransfer.files[0] : null;
    if(!f) return;

    // Put file into input programmatically (works in modern browsers)
    try{
      const dt = new DataTransfer();
      dt.items.add(f);
      inp.files = dt.files;
    } catch(err){
      // fallback: can't set files in some environments
    }

    setFile(f);
  });

  // init (for back nav)
  const f0 = inp.files && inp.files[0] ? inp.files[0] : null;
  if(f0) setFile(f0);
})();
</script>
                    </fieldset>

                  @endif
                </div>
              </div>

              {{-- Nav --}}
              <div class="mt-5 flex items-center justify-end">
                <button type="button" onclick="wizardNext()"
                        class="inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-extrabold text-slate-950
                               bg-gradient-to-r from-amber-200 via-cyan-200 to-fuchsia-200 shadow-lg shadow-amber-500/10
                               hover:scale-[1.01] active:scale-100 transition">
                  التالي
                  <i class="fa-solid fa-chevron-left ms-2 text-[11px]"></i>
                </button>
              </div>
            </section>

            {{-- ===================== SLIDE 2 ===================== --}}
            <section class="w-full shrink-0 p-4 sm:p-6" dir="rtl">
              <div class="mb-4 rounded-3xl border border-cyan-300/20 bg-cyan-500/10 p-4">
                <div class="flex items-start gap-3">
                  <div class="w-10 h-10 rounded-2xl bg-cyan-500/15 border border-cyan-400/25 grid place-items-center text-cyan-200">
                    <i class="fa-solid fa-video"></i>
                  </div>
                  <div class="flex-1">
                    <div class="text-[11px] text-cyan-100/70">شرح الخطوة 2</div>
                    <div class="font-extrabold text-cyan-100">اللايف والتقييم العام</div>
                    <ul class="mt-2 text-[13px] text-cyan-100/85 space-y-1 list-disc pr-5">
                      <li>اكتب: لايف مين؟ واسم صاحب اللايف بشكل واضح.</li>
                      <li>الرابط اختياري، لكن إذا متوفر يرفع مصداقية التقرير.</li>
                      <li>الملخص القصير لازم يكون “واقعي ومحدد” مش كلام عام.</li>
                    </ul>
                  </div>
                </div>
              </div>

              {{-- ✅✅ NEW: PLUS AUTO BOX (فقط للـ Plus) --}}
              <div id="plus_auto_box" class="{{ $initialType === 'plus' ? '' : 'hidden' }} mb-4 rounded-3xl border border-fuchsia-300/20 bg-fuchsia-500/10 p-4">
                <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-3">
                  <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-bolt"></i>
                    </div>
                    <div class="flex-1">
                      <div class="text-[11px] text-fuchsia-100/70">Plus فقط — تعبئة تلقائية</div>
                      <div class="font-extrabold text-fuchsia-100">تفاصيل الموعد الرسمي (قراءة فقط)</div>
                      <div class="mt-1 text-[12px] text-fuchsia-100/80 leading-relaxed">
                        <b>مهم:</b> في الـ Plus، النظام يعبّي <b>اسم صاحب اللايف</b> من <b>event_title</b>
                        ويعبّي <b>لايف مين</b> من <b>notes</b>.
                        إذا بدك تغيّرهم، عدّل الموعد نفسه.
                      </div>
                    </div>
                  </div>

                  @if($canEditSchedule)
                    <a id="plus_sched_edit_link" href="{{ $initialEditUrl ?: '#' }}"
                       class="{{ $initialEditUrl ? '' : 'hidden' }} shrink-0 inline-flex items-center gap-2 px-4 py-2 rounded-2xl text-xs font-extrabold
                              bg-gradient-to-r from-emerald-200 via-cyan-200 to-fuchsia-200 text-slate-950
                              shadow-lg shadow-fuchsia-500/10 hover:scale-[1.01] active:scale-100 transition">
                      <i class="fa-solid fa-pen-to-square text-[12px]"></i>
                      تعديل الموعد المختار
                    </a>
                  @endif
                </div>

                <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label class="block text-[11px] mb-1 text-white/60">التاريخ + الوقت ({{ $tzApp }})</label>
                    <input type="text" id="plus_sched_datetime"
                           class="w-full rounded-2xl border border-white/10 px-3 py-2 bg-white/5 text-white/90"
                           value="{{ $initialDate ? ($initialDate . ($initialTimeText ? ' — '.$initialTimeText : '')) : '—' }}"
                           readonly>
                  </div>

                  <div>
                    <label class="block text-[11px] mb-1 text-white/60">عنوان الموعد (event_title)</label>
                    <input type="text" id="plus_sched_title"
                           class="w-full rounded-2xl border border-white/10 px-3 py-2 bg-white/5 text-white/90"
                           value="{{ $initialTitleText ?: '—' }}"
                           readonly>
                  </div>

                  <div class="md:col-span-2">
                    <label class="block text-[11px] mb-1 text-white/60">ملاحظات الموعد (notes) — قراءة فقط</label>
                    <textarea id="plus_sched_notes" rows="3"
                              class="w-full rounded-2xl border border-white/10 px-3 py-2 bg-white/5 text-white/90 read-only:opacity-80"
                              readonly>{{ $initialNotesText }}</textarea>
                    <div class="mt-1 text-[11px] text-white/50">
                      سيتم نسخ <b>notes</b> تلقائيًا إلى خانة <b>لايف مين</b> (ضمن 150 حرف).
                    </div>
                  </div>

                  <div class="md:col-span-2">
                    <label class="block text-[11px] mb-1 text-white/60">وصف الموعد (event_description) — للقراءة فقط (بدون حفظ)</label>
                    <textarea id="plus_sched_desc" rows="3"
                              class="w-full rounded-2xl border border-white/10 px-3 py-2 bg-white/5 text-white/90 read-only:opacity-80"
                              readonly>{{ $initialDescText }}</textarea>
                  </div>

                  <div class="md:col-span-2 rounded-2xl border border-amber-300/20 bg-amber-500/10 px-4 py-3 text-[12px] text-amber-100">
                    <i class="fa-solid fa-circle-info text-amber-300 ms-2"></i>
                    <b>إشي مهم:</b> لو ظهر لك اختلاف بالتاريخ/الوقت أو العنوان، لا تعدّلهم من التقرير.
                    عدّلهم من <b>الموعد الرسمي</b> لأن التقرير يسحب معلوماته منه تلقائيًا.
                  </div>
                </div>
              </div>

              {{-- 2) اللايف والتقييم (كما هو) --}}
              <div class="rounded-3xl border border-white/10 bg-black/30 overflow-hidden">
                <div class="px-5 py-4 border-b border-white/10 flex items-center gap-2">
                  <span class="inline-flex h-7 w-7 items-center justify-center rounded-xl bg-cyan-500/15 text-cyan-200 text-xs font-extrabold border border-cyan-400/25">2</span>
                  <h3 class="font-extrabold text-white">اللايف والتقييم</h3>
                  <span class="ms-auto text-[11px] text-white/50">من استضفنا؟ كيف كان الأداء؟</span>
                </div>

                <div class="p-5 grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div>
                    <label class="block text-sm mb-1 text-white/80">لايف مين؟</label>
                    <input id="live_host" type="text" name="live_host" value="{{ $initialLiveHost }}"
                           class="w-full rounded-2xl border border-white/15 bg-black/40 px-3 py-2 text-sm text-white
                                  read-only:opacity-70 read-only:cursor-not-allowed
                                  focus:outline-none focus:ring-2 focus:ring-cyan-500/30"
                           placeholder="اسم القناة/المضيف"
                           @if($initialLockHost) readonly @endif>
                    @if($initialType === 'plus')
                      <p class="mt-1 text-[11px] text-white/45">
                        (Plus) سيتم تعبئته تلقائيًا من <b>notes</b>.
                      </p>
                    @endif
                  </div>

                  <div>
                    <label class="block text-sm mb-1 text-white/80">اسم صاحب اللايف</label>
                    <input id="live_owner_name" type="text" name="live_owner_name" value="{{ $initialLiveOwner }}"
                           class="w-full rounded-2xl border border-white/15 bg-black/40 px-3 py-2 text-sm text-white
                                  read-only:opacity-70 read-only:cursor-not-allowed
                                  focus:outline-none focus:ring-2 focus:ring-cyan-500/30"
                           @if($initialLockOwner) readonly @endif>
                    @if($initialType === 'plus')
                      <p class="mt-1 text-[11px] text-white/45">
                        (Plus) هذا الحقل مقفول ويأتي من <b>event_title</b>.
                      </p>
                    @endif
                  </div>

                  <div>
                    <label class="block text-sm mb-1 text-white/80">رابط اللايف (اختياري)</label>
                    <input type="url" name="live_link" value="{{ old('live_link') }}" placeholder="https://..."
                           class="w-full rounded-2xl border border-white/15 bg-black/40 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-cyan-500/30">
                  </div>

                  <div class="md:col-span-2">
                    <label class="block text-sm mb-1 text-white/80">ملخّص قصير</label>
                    <textarea name="short_summary" rows="3"
                              class="w-full rounded-2xl border border-white/15 bg-black/40 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-cyan-500/30"
                              placeholder="نقاط موجزة عمّا حدث">{{ old('short_summary') }}</textarea>
                  </div>

                  <div>
                    <label class="block text-sm mb-1 text-white/80">درجة اللايف</label>
                    <select name="live_grade"
                            class="w-full rounded-2xl border border-white/15 bg-black/40 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-cyan-500/30">
                      <option value="good"        @selected(old('live_grade')==='good')>جيد</option>
                      <option value="very_good"   @selected(old('live_grade')==='very_good')>جيد جدًا</option>
                      <option value="excellent"   @selected(old('live_grade')==='excellent')>ممتاز</option>
                    </select>
                  </div>
                </div>
              </div>

              {{-- Nav --}}
              <div class="mt-5 flex items-center justify-between">
                <button type="button" onclick="wizardPrev()"
                        class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
                  <i class="fa-solid fa-chevron-right ms-2 text-[11px]"></i>
                  السابق
                </button>

                <button type="button" onclick="wizardNext()"
                        class="inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-extrabold text-slate-950
                               bg-gradient-to-r from-amber-200 via-cyan-200 to-fuchsia-200 shadow-lg shadow-amber-500/10
                               hover:scale-[1.01] active:scale-100 transition">
                  التالي
                  <i class="fa-solid fa-chevron-left ms-2 text-[11px]"></i>
                </button>
              </div>
            </section>

            {{-- ===================== SLIDE 3 ===================== --}}
            <section class="w-full shrink-0 p-4 sm:p-6" dir="rtl">
              <div class="mb-4 rounded-3xl border border-fuchsia-300/20 bg-fuchsia-500/10 p-4">
                <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-triangle-exclamation"></i>
                  </div>
                  <div class="flex-1">
                    <div class="text-[11px] text-fuchsia-100/70">شرح الخطوة 3</div>
                    <div class="font-extrabold text-fuchsia-100">التقدّم / المشاكل / مشاركة الأعضاء</div>
                    <ul class="mt-2 text-[13px] text-fuchsia-100/85 space-y-1 list-disc pr-5">
                      <li>لا تفعّل “يوجد تقدّم” أو “يوجد مشاكل” إلا إذا عندك نص واضح يشرحها.</li>
                      <li>إذا شارك عضو: فعّل الخيار واكتب الاسم/الأداء/الدقائق بدقة.</li>
                      <li>الكتابة العشوائية في هذه الخانات تزيد احتمال رفض التقرير.</li>
                    </ul>
                  </div>
                </div>
              </div>

              {{-- 🔔 نفس التنبيه --}}
              <div class="mb-4 rounded-3xl border border-amber-300/20 bg-amber-500/10 px-4 py-3 text-sm text-amber-100 flex items-start gap-2">
                <i class="fa-solid fa-triangle-exclamation text-amber-300 mt-0.5"></i>
                <p class="leading-relaxed">
                  <b>تنبيه:</b> إذا لم تكن هناك <b>مشاكل</b> أو <b>تقدّم فعلي</b>، لا تُشغّل هذه الخانات نهائيًا.
                  تشغيلها دون سبب يسبب <b>رفض التقرير</b>.
                </p>
              </div>

              {{-- 3) تقدّم/مشاكل/عضو شارك (كما هو) --}}
              <div class="rounded-3xl border border-white/10 bg-black/30 overflow-hidden">
                <div class="px-5 py-4 border-b border-white/10 flex items-center gap-2">
                  <span class="inline-flex h-7 w-7 items-center justify-center rounded-xl bg-fuchsia-500/15 text-fuchsia-200 text-xs font-extrabold border border-fuchsia-400/25">3</span>
                  <h3 class="font-extrabold text-white">التقدّم والمشاكل ومشاركة الأعضاء</h3>
                </div>

                <div class="p-5 grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div class="border border-white/10 rounded-2xl p-3 bg-white/5">
                    <label class="inline-flex items-center gap-2 text-white/90">
                      <input type="checkbox" name="had_progress" value="1" class="rounded" @checked(old('had_progress'))>
                      <span class="text-sm font-bold">يوجد تقدّم</span>
                    </label>
                    <textarea name="progress_text" rows="3" placeholder="وش كان التقدّم؟"
                              class="mt-3 w-full rounded-2xl border border-white/15 bg-black/40 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-fuchsia-500/25">{{ old('progress_text') }}</textarea>
                  </div>

                  <div class="border border-white/10 rounded-2xl p-3 bg-white/5">
                    <label class="inline-flex items-center gap-2 text-white/90">
                      <input type="checkbox" name="had_issues" value="1" class="rounded" @checked(old('had_issues'))>
                      <span class="text-sm font-bold">يوجد مشاكل</span>
                    </label>
                    <textarea name="issues_text" rows="3" placeholder="اذكر المشاكل إن وُجدت"
                              class="mt-3 w-full rounded-2xl border border-white/15 bg-black/40 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-fuchsia-500/25">{{ old('issues_text') }}</textarea>
                  </div>

                  <div class="border border-white/10 rounded-2xl p-3 bg-white/5">
                    <label class="inline-flex items-center gap-2 text-white/90">
                      <input type="checkbox" name="had_team_member" value="1" class="rounded" @checked(old('had_team_member')) id="chk_member">
                      <span class="text-sm font-bold">شارك عضو من الفريق</span>
                    </label>

                    <div id="memberBlock" class="mt-3 space-y-2 {{ old('had_team_member') ? '' : 'hidden' }}">
                      <input type="text" name="member_name" value="{{ old('member_name') }}"
                             class="w-full rounded-2xl border border-white/15 bg-black/40 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-fuchsia-500/25"
                             placeholder="اسم العضو">
                      <select name="member_performance"
                              class="w-full rounded-2xl border border-white/15 bg-black/40 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-fuchsia-500/25">
                        <option value="">— مستوى الأداء —</option>
                        <option value="weak"       @selected(old('member_performance')==='weak')>ضعيف</option>
                        <option value="normal"     @selected(old('member_performance')==='normal')>متوسط</option>
                        <option value="good"       @selected(old('member_performance')==='good')>جيد</option>
                        <option value="very_good"  @selected(old('member_performance')==='very_good')>جيد جدًا</option>
                        <option value="excellent"  @selected(old('member_performance')==='excellent')>ممتاز</option>
                      </select>
                      <input type="number" name="member_minutes" value="{{ old('member_minutes') }}" min="0"
                             class="w-full rounded-2xl border border-white/15 bg-black/40 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-fuchsia-500/25"
                             placeholder="عدد الدقائق">
                    </div>
                  </div>
                </div>
              </div>

              {{-- ⚠️ تنبيه الدعوات --}}
              <div class="mt-4 rounded-3xl border border-amber-300/20 bg-amber-500/10 px-4 py-3 text-sm text-amber-100 flex items-start gap-2">
                <i class="fa-solid fa-bullhorn text-amber-300 mt-0.5"></i>
                <p class="leading-relaxed">
                  <b>تنبيه:</b> حاولوا أن يكون في <b>عدد دعوات</b> وليس <b>صفر</b>.
                  واذكر عددها بدقة إذا تمت خلال اللايف.
                </p>
              </div>

              {{-- Nav --}}
              <div class="mt-5 flex items-center justify-between">
                <button type="button" onclick="wizardPrev()"
                        class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
                  <i class="fa-solid fa-chevron-right ms-2 text-[11px]"></i>
                  السابق
                </button>

                <button type="button" onclick="wizardNext()"
                        class="inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-extrabold text-slate-950
                               bg-gradient-to-r from-amber-200 via-cyan-200 to-fuchsia-200 shadow-lg shadow-amber-500/10
                               hover:scale-[1.01] active:scale-100 transition">
                  التالي
                  <i class="fa-solid fa-chevron-left ms-2 text-[11px]"></i>
                </button>
              </div>
            </section>

            {{-- ===================== SLIDE 4 ===================== --}}
            <section class="w-full shrink-0 p-4 sm:p-6" dir="rtl">
              <div class="mb-4 rounded-3xl border border-emerald-300/20 bg-emerald-500/10 p-4">
                <div class="flex items-start gap-3">
                  <div class="w-10 h-10 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 grid place-items-center text-emerald-200">
                    <i class="fa-solid fa-file-signature"></i>
                  </div>
                  <div class="flex-1">
                    <div class="text-[11px] text-emerald-100/70">شرح الخطوة 4</div>
                    <div class="font-extrabold text-emerald-100">الملاحظات والمخرجات + الأرقام</div>
                    <ul class="mt-2 text-[13px] text-emerald-100/85 space-y-1 list-disc pr-5">
                      <li><b>الملاحظات الإيجابية إلزامية</b> — اكتب شيء واضح يثبت القيمة.</li>
                      <li>سجّل <b>الأصدقاء الجدد</b> و<b>الدعوات المرسلة</b> بدقة (لا تخليها صفر دائمًا).</li>
                      <li>بعدها احفظ التقرير — وإذا في Route للأرشيف رح يظهر زرّه.</li>
                    </ul>
                  </div>
                </div>
              </div>

              {{-- 4) ملاحظات ومخرجات ملموسة (كما هو) --}}
              <div class="rounded-3xl border border-white/10 bg-black/30 overflow-hidden">
                <div class="px-5 py-4 border-b border-white/10 flex items-center gap-2">
                  <span class="inline-flex h-7 w-7 items-center justify-center rounded-xl bg-emerald-500/15 text-emerald-200 text-xs font-extrabold border border-emerald-400/25">4</span>
                  <h3 class="font-extrabold text-white">الملاحظات والمخرجات</h3>
                </div>

                <div class="p-5 grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label class="block text-sm mb-1 text-white/80">ملاحظات إيجابية (إلزامي)</label>
                    <textarea name="positive_notes" rows="4"
                              class="w-full rounded-2xl border border-white/15 bg-black/40 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-emerald-500/25"
                              placeholder="ما الذي نجح؟">{{ old('positive_notes') }}</textarea>
                  </div>

                  <div>
                    <label class="block text-sm mb-1 text-white/80">ملاحظات سلبية (اختياري)</label>
                    <textarea name="negative_notes" rows="4"
                              class="w-full rounded-2xl border border-white/15 bg-black/40 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-emerald-500/25"
                              placeholder="ما الذي يحتاج تحسينًا؟">{{ old('negative_notes') }}</textarea>
                  </div>

                  <div class="md:col-span-2 mt-2 rounded-3xl border border-amber-300/20 bg-amber-500/10 px-4 py-3 text-[13px] text-amber-100 flex items-start gap-2">
                    <i class="fa-solid fa-lightbulb text-amber-300 mt-0.5"></i>
                    <p class="leading-relaxed">
                      <b>تذكير مهم:</b> عدد <b>الأصدقاء الجدد</b> و<b>الدعوات المُرسلة</b> يعكس نشاط الفعالية.
                      لا تخليها <b>صفرًا</b> دائمًا، واذكر الأرقام بدقة.
                      <br><br>
                      🔸 <b>الدعوات المُرسلة</b> = عدد مرات دعوت أشخاصًا للايف/فعالية ProActive (2؟ 5؟ أكثر؟).
                    </p>
                  </div>

                  <div>
                    <label class="block text-sm mb-1 text-white/80">أصدقاء/مهتمون جدد</label>
                    <input type="number" name="new_friends" value="{{ old('new_friends',0) }}" min="0"
                           class="w-full rounded-2xl border border-white/15 bg-black/40 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-emerald-500/25">
                  </div>

                  <div>
                    <label class="block text-sm mb-1 text-white/80">عدد الدعوات المُرسلة</label>
                    <input type="number" name="invitations_sent" value="{{ old('invitations_sent',0) }}" min="0"
                           class="w-full rounded-2xl border border-white/15 bg-black/40 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-emerald-500/25">
                  </div>
                </div>
              </div>

              {{-- ✅ ACTIONS --}}
              <div class="mt-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                @php $idxRoute = 'superadmin.proactive.reports.index'; @endphp
                @if(\Illuminate\Support\Facades\Route::has($idxRoute))
                  <a href="{{ route($idxRoute) }}"
                     class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-sm hover:bg-white/15 transition">
                    <i class="fa-solid fa-rectangle-list ms-2 text-[12px]"></i>
                    أرشيف التقارير
                  </a>
                @else
                  <span class="text-[11px] text-white/50">
                    * يمكنك إضافة صفحة للأرشيف لاحقًا لعرض جميع التقارير.
                  </span>
                @endif

                <div class="flex items-center gap-2">
                  <button type="button" onclick="wizardPrev()"
                          class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
                    <i class="fa-solid fa-chevron-right ms-2 text-[11px]"></i>
                    السابق
                  </button>

                  <button type="submit"
                          class="inline-flex items-center justify-center px-5 py-2.5 rounded-2xl text-sm font-extrabold text-slate-950
                                 bg-gradient-to-r from-emerald-200 via-cyan-200 to-fuchsia-200 shadow-lg shadow-emerald-500/15 hover:scale-[1.01] active:scale-100 transition">
                    <i class="fa-solid fa-floppy-disk ms-2 text-[12px]"></i>
                    حفظ التقرير
                  </button>
                </div>
              </div>
            </section>

          </div>
        </div>
      </div>

    </form>

    {{-- ==== فوتر توعوي رسمي عن أهمية التقارير (كما هو مع تحسين ستايل سقراط) ==== --}}
    <div class="mt-10 relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/85 via-slate-950/85 to-black/85 border border-white/10 shadow-2xl">
      <div class="absolute -top-28 -right-28 w-80 h-80 rounded-full bg-gradient-to-tr from-amber-300 via-rose-300 to-violet-400 blur-3xl opacity-25"></div>
      <div class="absolute -bottom-28 -left-28 w-80 h-80 rounded-full bg-gradient-to-tr from-emerald-400 via-cyan-400 to-sky-300 blur-3xl opacity-25"></div>

      <div class="relative px-6 md:px-12 py-10 text-center">
        <h2 class="text-2xl md:text-3xl font-extrabold text-white mb-3">
          أهمية تقارير <span class="text-amber-300">ProActive</span>
        </h2>
        <p class="max-w-3xl mx-auto text-white/75 text-sm md:text-base leading-relaxed">
          كل تقرير <b>ProActive</b> هو نبضة حقيقية في جسد الفريق.
          التقارير لا تُستخدم فقط للتوثيق، بل لتحليل الاتجاهات، قياس النشاط، وبناء قرارات أفضل للمستقبل.
        </p>

        <div class="mt-6 grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm md:text-base">
          <div class="rounded-3xl border border-amber-300/20 bg-amber-500/10 p-4">
            <h3 class="font-extrabold text-amber-200 mb-1">📊 التحليل الكلي</h3>
            <p class="text-white/75">يظهر الاتجاه العام للنشاط ويحدد ما يحتاج دعم.</p>
          </div>
          <div class="rounded-3xl border border-emerald-300/20 bg-emerald-500/10 p-4">
            <h3 class="font-extrabold text-emerald-200 mb-1">🧠 ذكاء تحليلي</h3>
            <p class="text-white/75">البيانات تغذي التحليل الذكي وتطلع توصيات واقعية.</p>
          </div>
          <div class="rounded-3xl border border-cyan-300/20 bg-cyan-500/10 p-4">
            <h3 class="font-extrabold text-cyan-200 mb-1">🚀 التطوير المستقبلي</h3>
            <p class="text-white/75">تحويل الضعف لفرص نمو وتطوير شامل للتيم.</p>
          </div>
        </div>

        <div class="mt-8 text-[13px] text-white/45">
          <i class="fa-solid fa-lightbulb text-amber-300"></i>
          دقة التقرير = دقة التحليل = قرارات أفضل.
        </div>
      </div>
    </div>

  </div>
</div>

@push('scripts')
<script>
  // ===================== Wizard (Slides + Stepper) =====================
  let __wizStep = 1;

  function wizToast(msg){
    const box = document.getElementById('wizardToast');
    const t   = document.getElementById('wizardToastText');
    if(!box || !t) return alert(msg);
    t.textContent = msg;
    box.classList.remove('hidden');
    clearTimeout(window.__wizToastTimer);
    window.__wizToastTimer = setTimeout(() => box.classList.add('hidden'), 3500);
  }

  function setWizardStep(step){
    step = Math.max(1, Math.min(4, parseInt(step || 1, 10)));
    __wizStep = step;

    const track = document.getElementById('wizTrack');
    if(track){
      const pct = (step - 1) * 100;
      track.style.transform = `translateX(-${pct}%)`;
    }

    const top = document.getElementById('wizardTop');
    if(top) top.scrollIntoView({behavior:'smooth', block:'start'});

    updateWizardProgress();
  }

  function wizardPrev(){ setWizardStep(__wizStep - 1); }

  function validateStep(step){
    const scheduleSel = document.getElementById('schedule_id');
    const positiveEl  = document.querySelector('textarea[name="positive_notes"]');

    // خطوة 1: لازم جدول موجود + قيمة
    if(step === 1){
      if(!scheduleSel){
        wizToast('لا توجد مواعيد للاختيار. أنشئ موعدًا أولاً من صفحة المواعيد.');
        return false;
      }
      if(!scheduleSel.value){
        wizToast('اختر موعد ProActive الرسمي قبل المتابعة.');
        return false;
      }
    }

    // خطوة 4: الملاحظات الإيجابية إلزامي (مساعدة UX فقط)
    if(step === 4){
      if(positiveEl && !positiveEl.value.trim()){
        wizToast('اكتب ملاحظات إيجابية واضحة — هذا الحقل إلزامي.');
        return false;
      }
    }

    return true;
  }

  function wizardNext(){
    if(!validateStep(__wizStep)) return;
    setWizardStep(__wizStep + 1);
  }

  function updateWizardProgress(){
    const scheduleSel = document.getElementById('schedule_id');
    const liveHost    = document.querySelector('input[name="live_host"]');
    const summary     = document.querySelector('textarea[name="short_summary"]');
    const chkMember   = document.getElementById('chk_member');
    const posNotes    = document.querySelector('textarea[name="positive_notes"]');

    const step1Done = !!(scheduleSel && scheduleSel.value);
    const step2Done = !!((liveHost && liveHost.value.trim()) || (summary && summary.value.trim()));
    const step3Done = !!(chkMember && chkMember.checked) || true;
    const step4Done = !!(posNotes && posNotes.value.trim());

    const doneArr = [step1Done, step2Done, step3Done, step4Done];
    const doneCount = doneArr.filter(Boolean).length;

    const bar = document.getElementById('wizBar');
    const lbl = document.getElementById('wizLabel');
    const hint = document.getElementById('wizHint');

    if(bar) bar.style.width = Math.round((doneCount/4)*100) + '%';
    if(lbl) lbl.textContent = `${doneCount}/4 مكتمل`;

    document.querySelectorAll('.wizStep').forEach(btn => {
      const s = parseInt(btn.getAttribute('data-step'), 10);
      const isActive = (s === __wizStep);
      const isDone = !!doneArr[s-1];

      btn.classList.remove(
        'ring-1','ring-cyan-400/30','border-cyan-400/35','bg-cyan-500/10','text-white',
        'border-emerald-400/25','bg-emerald-500/10','text-emerald-100'
      );
      btn.classList.add('border-white/10','bg-white/5','text-white/70');

      const st = btn.querySelector('[data-status]');

      if(isDone){
        btn.classList.remove('border-white/10','bg-white/5','text-white/70');
        btn.classList.add('border-emerald-400/25','bg-emerald-500/10','text-emerald-100');
        if(st) st.textContent = isActive ? 'هنا' : 'مكتمل';
      } else if(isActive){
        btn.classList.remove('border-white/10','bg-white/5','text-white/70');
        btn.classList.add('ring-1','ring-cyan-400/30','border-cyan-400/35','bg-cyan-500/10','text-white');
        if(st) st.textContent = 'الآن';
      } else {
        if(st) st.textContent = 'قادم';
      }
    });

    if(hint){
      let msg = 'ابدأ باختيار موعد الفعالية.';
      if(step1Done && !step2Done) msg = 'دوّن معلومات اللايف والتقييم العام.';
      else if(step1Done && step2Done && !step4Done) msg = 'أكمل التفاصيل ثم اكتب الملاحظات الإيجابية واحفظ.';
      else if(step4Done) msg = 'جاهز للحفظ ✅';
      hint.textContent = msg;
    }
  }

  // ===================== Scripts (Member + Schedule Sync + Plus Pack + Plus Auto) =====================
  (function(){
    // بلوك العضو
    const chk = document.getElementById('chk_member');
    const box = document.getElementById('memberBlock');
    const syncMember = () => { if (chk && box) box.classList.toggle('hidden', !chk.checked); };
    chk && chk.addEventListener('change', syncMember);
    document.addEventListener('DOMContentLoaded', syncMember);

    // ✅ Plus Pack elements
    const plusPack = document.getElementById('plus_pack'); // fieldset
    const plusAutoBox = document.getElementById('plus_auto_box'); // ✅ NEW
    const togglePlusUI = (type) => {
      const isPlus = String(type || '').toLowerCase() === 'plus';
      if(plusPack){
        plusPack.classList.toggle('hidden', !isPlus);
        plusPack.disabled = !isPlus;
      }
      if(plusAutoBox){
        plusAutoBox.classList.toggle('hidden', !isPlus);
      }
    };

    // ✅ اختيار الجميع
    const selectAll = document.getElementById('plus_select_all');
    if(selectAll){
      selectAll.addEventListener('change', ()=> {
        document.querySelectorAll('.plus_member_cb').forEach(cb => {
          cb.checked = selectAll.checked;
        });
      });
    }

    // ✅ بحث الأعضاء
    const s = document.getElementById('plus_member_search');
    if(s){
      s.addEventListener('input', ()=> {
        const q = (s.value || '').trim().toLowerCase();
        document.querySelectorAll('.plus_member_item').forEach(item => {
          const name = (item.querySelector('.plus_member_name')?.textContent || '').toLowerCase();
          item.style.display = name.includes(q) ? '' : 'none';
        });
      });
    }

    // مزامنة بيانات الموعد المختار
    const sel    = document.getElementById('schedule_id');
    const inDate = document.getElementById('input_activity_date');
    const inType = document.getElementById('input_activity_type');
    const inPlat = document.getElementById('input_platform');

    const dispDate = document.getElementById('display_activity_date');
    const dispType = document.getElementById('display_activity_type');
    const dispPlat = document.getElementById('display_platform');

    // ✅ NEW: Plus Auto fields
    const plusDT    = document.getElementById('plus_sched_datetime');
    const plusTitle = document.getElementById('plus_sched_title');
    const plusNotes = document.getElementById('plus_sched_notes');
    const plusDesc  = document.getElementById('plus_sched_desc');
    const plusEdit  = document.getElementById('plus_sched_edit_link');

    // ✅ NEW: Live fields autofill
    const liveHostInp  = document.getElementById('live_host');
    const liveOwnerInp = document.getElementById('live_owner_name');

    function safeParseJsonAttr(v){
      try{ return JSON.parse(v || '""'); }catch(e){ return ''; }
    }

    function limit150(str){
      const s = String(str || '').trim();
      if(s.length <= 150) return s;
      return s.slice(0,150);
    }

    function syncSchedule(){
      if (!sel || !sel.value) return;
      const opt = sel.options[sel.selectedIndex];
      if (!opt) return;

      const date  = opt.getAttribute('data-date')      || '';
      const type  = (opt.getAttribute('data-type')     || 'regular').toLowerCase() === 'plus' ? 'plus' : 'regular';
      const plat  = opt.getAttribute('data-platform')  || '';
      const time  = opt.getAttribute('data-time')      || '';
      const title = opt.getAttribute('data-title')     || '';

      // ✅ NEW: notes + description من الـ option
      const notes = safeParseJsonAttr(opt.getAttribute('data-notes'));
      const desc  = safeParseJsonAttr(opt.getAttribute('data-description'));

      // ✅ NEW: edit url
      const editUrl = opt.getAttribute('data-edit-url') || '';

      if (inDate) inDate.value = date;
      if (inType) inType.value = type;
      if (inPlat) inPlat.value = plat;

      if (dispDate) dispDate.value = date + (time ? ' — ' + time : '');
      if (dispType) dispType.value = (type === 'plus') ? 'Plus (بلس)' : 'عادية';
      if (dispPlat) dispPlat.value = String(plat || '').toUpperCase();

      // ✅ Show/Hide Plus UI (Pack + Auto Box)
      togglePlusUI(type);

      // ✅ NEW: update plus auto fields (قراءة فقط)
      if(type === 'plus'){
        if(plusDT)    plusDT.value    = date + (time ? ' — ' + time : '');
        if(plusTitle) plusTitle.value = title || '—';
        if(plusNotes) plusNotes.value = String(notes || '');
        if(plusDesc)  plusDesc.value  = String(desc  || '');

        if(plusEdit){
          if(editUrl){
            plusEdit.href = editUrl;
            plusEdit.classList.remove('hidden');
          } else {
            plusEdit.href = '#';
            plusEdit.classList.add('hidden');
          }
        }
      }

      // ✅ NEW: Plus autofill rules
      if(type === 'plus'){
        // اسم صاحب اللايف = event_title (readonly)
        if(liveOwnerInp){
          if(String(title || '').trim() !== ''){
            liveOwnerInp.value = String(title || '').trim();
            liveOwnerInp.readOnly = true;
            liveOwnerInp.dataset.autofill = '1';
          } else {
            // إذا ما في عنوان (حالة نادرة) خلّيه قابل للتحرير حتى ما ينكسر الحفظ
            if(liveOwnerInp.dataset.autofill === '1') liveOwnerInp.value = '';
            delete liveOwnerInp.dataset.autofill;
            liveOwnerInp.readOnly = false;
          }
        }

        // لايف مين = notes (readonly فقط إذا notes موجودة)
        if(liveHostInp){
          const n = String(notes || '').trim();
          if(n !== ''){
            liveHostInp.value = limit150(n);
            liveHostInp.readOnly = true;
            liveHostInp.dataset.autofill = '1';
          } else {
            if(liveHostInp.dataset.autofill === '1') liveHostInp.value = '';
            delete liveHostInp.dataset.autofill;
            liveHostInp.readOnly = false;
          }
        }
      } else {
        // رجع الحقول للوضع الطبيعي
        if(liveOwnerInp){
          if(liveOwnerInp.dataset.autofill === '1') liveOwnerInp.value = '';
          delete liveOwnerInp.dataset.autofill;
          liveOwnerInp.readOnly = false;
        }
        if(liveHostInp){
          if(liveHostInp.dataset.autofill === '1') liveHostInp.value = '';
          delete liveHostInp.dataset.autofill;
          liveHostInp.readOnly = false;
        }
      }

      // نفس فكرة الـ placeholder اختياريًا
      const summary = document.querySelector('textarea[name="short_summary"]');
      if (summary && !summary.value.trim() && title) {
        summary.placeholder = 'مثال: ' + title;
      }

      updateWizardProgress();
    }

    sel && sel.addEventListener('change', syncSchedule);
    document.addEventListener('DOMContentLoaded', syncSchedule);
  })();

  // ===================== Init =====================
  document.addEventListener('DOMContentLoaded', function(){
    updateWizardProgress();
    setWizardStep(1);

    // تحديث التقدم على تغييرات مهمة
    ['input','change'].forEach(ev => {
      document.addEventListener(ev, function(e){
        const n = e.target && e.target.name;
        if(!n && !(e.target && e.target.id)) return;
        updateWizardProgress();
      }, true);
    });

    // اختصار: ESC يرجع خطوة
    document.addEventListener('keydown', function(e){
      if(e.key === 'Escape') wizardPrev();
    });
  });
</script>
@endpush
@endsection