@extends('layouts.superadmin')
@section('title','زُهرة — محضر الاجتماع (Wizard)')

@section('content')
<div class="min-h-screen rtl py-6 sm:py-8 bg-gradient-to-b from-slate-950 via-rose-950/40 to-black">
  <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

    {{-- TOP BAR --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
      <nav class="flex items-center gap-2 text-[12px] text-slate-200/70">
        <a href="{{ route('superadmin.zuhra.meetings.show', $meeting) }}"
           class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl bg-black/30 border border-white/10 hover:bg-white/5 transition">
          <i class="fa-solid fa-arrow-right text-white/70"></i>
          <span>رجوع للاجتماع</span>
        </a>

        <svg class="w-4 h-4 text-white/30 rotate-180" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>

        <span class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl bg-black/40 border border-rose-300/20 text-white font-bold">
          محضر الاجتماع — Wizard
        </span>
      </nav>

      <div class="flex items-center gap-2">
        <span class="text-[11px] text-white/70 bg-white/5 border border-white/10 px-3 py-1 rounded-full">
          {{ \Carbon\Carbon::parse($meeting->meeting_date)->format('Y-m-d H:i') }}
        </span>
      </div>
    </div>

    {{-- HERO --}}
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-rose-950/70 to-black/95 border border-rose-400/25 shadow-2xl shadow-rose-500/10">
      <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-rose-400/20 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-fuchsia-500/15 blur-3xl"></div>

      <div class="relative p-5 sm:p-7 lg:p-8 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
        <div class="space-y-3 max-w-2xl">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-rose-300/30 text-[11px] text-rose-100">
            <i class="fa-solid fa-wand-magic-sparkles text-[11px]"></i>
            <span>زُهرة — كتابة محضر بأسلوب سلايدات (غير ملخبط)</span>
          </div>

          <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
            {{ $meeting->title }}
          </h1>

          <p class="text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
            اكتب محضر واضح: أجندة → نقاش → قرارات → مهام تنفيذ.  
            وفي النهاية تقدر تبعث ملخص للجميع بإشعار واحد.
          </p>

          <div class="flex flex-wrap gap-2 pt-1">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
              <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
              حضور: {{ $attendance['attended'] }}/{{ $attendance['total'] }}
            </span>

            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
              <span class="w-1.5 h-1.5 rounded-full bg-rose-300"></span>
              اكتمال حالي: {{ $comp['percent'] }}%
            </span>

            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border {{ $riskLevel['badge'] ?? 'bg-white/5 border-white/10 text-white/70' }} text-[11px]">
              مؤشر الخطر: {{ $risk }}/20
            </span>
          </div>
        </div>

        {{-- SIDE CARD --}}
        <div class="w-full lg:w-auto">
          <div class="rounded-3xl bg-black/40 border border-white/15 px-4 py-4 text-xs text-slate-100 space-y-3 shadow-xl">
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-2xl bg-rose-500/15 border border-rose-400/25 grid place-items-center text-rose-200">
                <i class="fa-solid fa-user-shield"></i>
              </div>
              <div class="min-w-0">
                <div class="text-[11px] text-slate-300/80">المستخدم الحالي</div>
                <div class="font-extrabold text-sm text-white truncate">{{ auth()->user()->name }}</div>
                <div class="text-[11px] text-slate-400">SuperAdmin</div>
              </div>
            </div>

            <div class="rounded-2xl bg-white/5 border border-white/10 px-3 py-3 text-[12px] text-slate-200/85 leading-relaxed">
              تلميح: لو كتبت القرارات على شكل بنود (• / - / 1.)  
              التحليلات رح تكون أدق.
            </div>
          </div>
        </div>

      </div>
    </div>

    {{-- FORM --}}
    <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-slate-950/60 shadow-2xl">
      <div class="pointer-events-none absolute -bottom-28 -right-24 w-96 h-96 rounded-full bg-fuchsia-500/10 blur-3xl"></div>

      <div class="px-5 sm:px-6 py-4 border-b border-white/10 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-rose-500/15 border border-rose-400/25 grid place-items-center text-rose-200">
            <i class="fa-solid fa-sliders"></i>
          </div>
          <div>
            <div class="text-[11px] text-white/60">Wizard</div>
            <h3 class="text-base font-extrabold text-white">محضر الاجتماع — سلايدات</h3>
            <p class="text-[12px] text-white/70">تنقل بين الخطوات ثم احفظ في النهاية.</p>
          </div>
        </div>

        <div id="progressLabel" class="text-[11px] text-white/70 bg-white/5 border border-white/10 px-3 py-1 rounded-full">
          1/5
        </div>
      </div>

      <div class="p-5 sm:p-6">
        <form method="POST" action="{{ route('superadmin.zuhra.reports.store', $meeting) }}" id="zuhraWizardForm">
          @csrf

          {{-- Toast --}}
          <div id="wizardToast" class="hidden mb-5 rounded-2xl border border-rose-400/20 bg-rose-500/10 text-rose-100 px-4 py-3 text-sm">
            <span id="wizardToastText">—</span>
          </div>

          {{-- Progress bar --}}
          <div class="mb-6 rounded-3xl border border-white/10 bg-black/25 p-4 sm:p-5">
            <div class="flex items-center justify-between gap-3 mb-3">
              <div class="flex items-center gap-3">
                <div class="w-9 h-9 rounded-2xl bg-rose-500/15 border border-rose-400/25 grid place-items-center text-rose-200">
                  <i class="fa-solid fa-bolt"></i>
                </div>
                <div>
                  <div class="text-[11px] text-white/60">Progress</div>
                  <div class="font-extrabold text-white text-sm">خطوات المحضر</div>
                </div>
              </div>
              <div id="progressDone" class="text-[11px] text-white/70">—</div>
            </div>

            <div class="h-2 rounded-full bg-white/10 overflow-hidden">
              <div id="progressBar" class="h-full rounded-full bg-gradient-to-r from-rose-200 via-fuchsia-200 to-cyan-200" style="width:20%"></div>
            </div>

            <div class="mt-4 grid grid-cols-1 sm:grid-cols-5 gap-3" id="progressSteps">
              @foreach([1=>'الوقت',2=>'الأجندة',3=>'النقاش',4=>'القرارات',5=>'المهام+النشر'] as $i=>$t)
                <button type="button" data-step="{{ $i }}"
                        class="step-chip 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"
                        onclick="setWizardStep({{ $i }})">
                  <span class="w-8 h-8 rounded-xl bg-white/5 border border-white/10 grid place-items-center text-[11px] text-white/70 font-extrabold">{{ $i }}</span>
                  <div class="text-right min-w-0">
                    <div class="font-extrabold truncate">{{ $t }}</div>
                    <div class="text-[11px] text-white/50" data-step-status>—</div>
                  </div>
                </button>
              @endforeach
            </div>

            <div id="progressHint" class="mt-3 text-[11px] text-white/50">
              ابدأ بتحديد أوقات الاجتماع (إن وجدت).
            </div>
          </div>

          {{-- Slides --}}
          <div class="rounded-3xl border border-white/10 bg-black/20 overflow-hidden">
            <div dir="ltr" class="overflow-hidden">
              <div id="wizardTrack" class="flex transition-transform duration-500 ease-out" style="transform: translateX(0%);">

                {{-- SLIDE 1 --}}
                <section class="w-full shrink-0 p-4 sm:p-5" dir="rtl">
                  <div class="rounded-3xl border border-white/10 bg-black/25 p-4 sm:p-5 space-y-4">
                    <div class="flex items-center justify-between">
                      <div>
                        <div class="text-[11px] text-white/60">Step 1</div>
                        <div class="font-extrabold text-white">الوقت والمدة</div>
                      </div>
                      <span class="text-[11px] text-white/60 bg-white/5 border border-white/10 px-3 py-1 rounded-full">اختياري</span>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                      <div>
                        <label class="text-[11px] text-white/70">الوقت الفعلي للبداية</label>
                        <input type="datetime-local" name="actual_start_time"
                               value="{{ old('actual_start_time', $report?->actual_start_time ? \Carbon\Carbon::parse($report->actual_start_time)->format('Y-m-d\TH:i') : '') }}"
                               class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-4 py-2 focus:outline-none focus:ring-2 focus:ring-rose-500/40">
                      </div>
                      <div>
                        <label class="text-[11px] text-white/70">الوقت الفعلي للنهاية</label>
                        <input type="datetime-local" name="actual_end_time"
                               value="{{ old('actual_end_time', $report?->actual_end_time ? \Carbon\Carbon::parse($report->actual_end_time)->format('Y-m-d\TH:i') : '') }}"
                               class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-4 py-2 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
                      </div>
                      <div>
                        <label class="text-[11px] text-white/70">المدة بالدقائق</label>
                        <input type="number" name="duration_minutes" min="0" max="1000"
                               value="{{ old('duration_minutes', $report?->duration_minutes) }}"
                               class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-4 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
                        <div class="text-[11px] text-white/50 mt-1">إذا تركتها فارغة وزودت الوقتين، نحسبها تلقائيًا.</div>
                      </div>
                    </div>

                    <div class="rounded-2xl bg-rose-200/10 border border-rose-300/20 p-3 text-[12px] text-rose-100/90">
                      <span class="font-extrabold">ليش مهم؟</span>
                      عشان زُهرة تعطيك متوسطات دقيقة + تنبيه على الاجتماعات الطويلة.
                    </div>
                  </div>
                </section>

                {{-- SLIDE 2 --}}
                <section class="w-full shrink-0 p-4 sm:p-5" dir="rtl">
                  <div class="rounded-3xl border border-white/10 bg-black/25 p-4 sm:p-5 space-y-4">
                    <div class="flex items-center justify-between">
                      <div>
                        <div class="text-[11px] text-white/60">Step 2</div>
                        <div class="font-extrabold text-white">الأجندة</div>
                      </div>
                      <span class="text-[11px] text-white/60 bg-white/5 border border-white/10 px-3 py-1 rounded-full">يفضل بنود</span>
                    </div>

                    <textarea name="agenda" rows="10"
                              class="w-full rounded-3xl bg-black/40 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-rose-500/40"
                              placeholder="• بند 1
• بند 2
• بند 3 ...">{{ old('agenda', $report?->agenda) }}</textarea>

                    <div class="text-[11px] text-white/50">
                      نصيحة: أكتبها كبنود قصيرة (•) — التحليل يصير أذكى.
                    </div>
                  </div>
                </section>

                {{-- SLIDE 3 --}}
                <section class="w-full shrink-0 p-4 sm:p-5" dir="rtl">
                  <div class="rounded-3xl border border-white/10 bg-black/25 p-4 sm:p-5 space-y-4">
                    <div class="flex items-center justify-between">
                      <div>
                        <div class="text-[11px] text-white/60">Step 3</div>
                        <div class="font-extrabold text-white">النقاش</div>
                      </div>
                      <span class="text-[11px] text-white/60 bg-white/5 border border-white/10 px-3 py-1 rounded-full">مختصر + واضح</span>
                    </div>

                    <textarea name="discussions" rows="10"
                              class="w-full rounded-3xl bg-black/40 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40"
                              placeholder="أكتب أهم ما تم مناقشته...">{{ old('discussions', $report?->discussions) }}</textarea>

                    <div class="rounded-2xl bg-white/5 border border-white/10 p-3 text-[12px] text-white/75">
                      جملة ذهبية: “ما تم الاتفاق عليه” أهم من “ماذا قيل”.
                    </div>
                  </div>
                </section>

                {{-- SLIDE 4 --}}
                <section class="w-full shrink-0 p-4 sm:p-5" dir="rtl">
                  <div class="rounded-3xl border border-white/10 bg-black/25 p-4 sm:p-5 space-y-4">
                    <div class="flex items-center justify-between">
                      <div>
                        <div class="text-[11px] text-white/60">Step 4</div>
                        <div class="font-extrabold text-white">القرارات</div>
                      </div>
                      <span class="text-[11px] text-white/60 bg-white/5 border border-white/10 px-3 py-1 rounded-full">أساسي</span>
                    </div>

                    <textarea name="decisions" rows="10"
                              class="w-full rounded-3xl bg-black/40 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-rose-500/40"
                              placeholder="• قرار 1
• قرار 2
• قرار 3 ...">{{ old('decisions', $report?->decisions) }}</textarea>

                    <div class="rounded-2xl bg-rose-200/10 border border-rose-300/20 p-3 text-[12px] text-rose-100/90">
                      كل قرار لازم “من؟” و “متى؟” — لو موجودين بالمهمة التنفيذية، ممتاز.
                    </div>
                  </div>
                </section>

                {{-- SLIDE 5 --}}
                <section class="w-full shrink-0 p-4 sm:p-5" dir="rtl">
                  <div class="rounded-3xl border border-white/10 bg-black/25 p-4 sm:p-5 space-y-4">
                    <div class="flex items-center justify-between">
                      <div>
                        <div class="text-[11px] text-white/60">Step 5</div>
                        <div class="font-extrabold text-white">المهام + الملاحظات + إشعار للجميع</div>
                      </div>
                      <span class="text-[11px] text-white/60 bg-white/5 border border-white/10 px-3 py-1 rounded-full">Final</span>
                    </div>

                    <div class="grid gap-3 lg:grid-cols-2">
                      <div>
                        <label class="text-[11px] text-white/70">المهام التنفيذية (Action Items)</label>
                        <textarea name="action_items" rows="10"
                                  class="w-full mt-1 rounded-3xl bg-black/40 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-cyan-500/40"
                                  placeholder="• مهمة — المسؤول — الموعد
• مهمة...">{{ old('action_items', $report?->action_items) }}</textarea>
                      </div>

                      <div>
                        <label class="text-[11px] text-white/70">ملاحظات</label>
                        <textarea name="notes" rows="10"
                                  class="w-full mt-1 rounded-3xl bg-black/40 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40"
                                  placeholder="ملاحظات إضافية...">{{ old('notes', $report?->notes) }}</textarea>
                      </div>
                    </div>

                    <div class="rounded-3xl border border-white/10 bg-white/5 p-4 space-y-3">
                      <div class="flex items-center justify-between">
                        <div class="font-extrabold text-white">إشعار للجميع</div>
                        <label class="inline-flex items-center gap-2 cursor-pointer">
                          <input type="checkbox" name="send_broadcast" value="1" class="rounded bg-black/40 border-white/20">
                          <span class="text-[12px] text-white/80">إرسال ملخص الاجتماع بعد الحفظ</span>
                        </label>
                      </div>

                      <div>
                        <label class="text-[11px] text-white/60">إضافة شخصية من الإدارة (اختياري)</label>
                        <textarea name="broadcast_extra" rows="3"
                                  class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-4 py-2 focus:outline-none focus:ring-2 focus:ring-rose-500/40"
                                  placeholder="رسالة قصيرة للجميع...">{{ old('broadcast_extra') }}</textarea>
                      </div>

                      <div class="text-[11px] text-white/60">
                        سيتم إنشاء إشعار داخل manual_notifications وإرساله للجميع.
                      </div>
                    </div>
                  </div>
                </section>

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

          {{-- NAV --}}
          <div class="mt-5 flex items-center justify-between gap-2">
            <button type="button" id="btnPrev"
                    class="inline-flex items-center justify-center px-5 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-arrow-right ms-2 text-[11px]"></i>
              السابق
            </button>

            <div class="flex items-center gap-2">
              <button type="button" id="btnNext"
                      class="inline-flex items-center justify-center px-5 py-2 rounded-2xl bg-rose-200/10 border border-rose-300/20 text-rose-100 text-xs hover:bg-rose-200/15 transition">
                التالي
                <i class="fa-solid fa-arrow-left ms-2 text-[11px]"></i>
              </button>

              <button type="submit" id="btnSubmit"
                      class="hidden inline-flex items-center justify-center px-6 py-2 rounded-2xl text-xs font-bold text-slate-900
                        bg-gradient-to-r from-rose-200 via-fuchsia-200 to-cyan-200 shadow-lg shadow-rose-500/25 hover:scale-[1.01] active:scale-100 transition">
                <i class="fa-solid fa-floppy-disk ms-2 text-[11px]"></i>
                حفظ المحضر
              </button>
            </div>
          </div>

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

  </div>
</div>

<script>
  let currentStep = 1;
  const totalSteps = 5;

  const track = document.getElementById('wizardTrack');
  const progressBar = document.getElementById('progressBar');
  const progressLabel = document.getElementById('progressLabel');
  const progressDone = document.getElementById('progressDone');
  const hint = document.getElementById('progressHint');

  const btnPrev = document.getElementById('btnPrev');
  const btnNext = document.getElementById('btnNext');
  const btnSubmit = document.getElementById('btnSubmit');

  const toast = document.getElementById('wizardToast');
  const toastText = document.getElementById('wizardToastText');

  function showToast(msg) {
    toastText.textContent = msg;
    toast.classList.remove('hidden');
    setTimeout(() => toast.classList.add('hidden'), 2500);
  }

  function setWizardStep(step) {
    if (step < 1 || step > totalSteps) return;
    currentStep = step;

    // move slides (LTR track)
    const translate = (step - 1) * -100;
    track.style.transform = `translateX(${translate}%)`;

    // progress
    const pct = Math.round((step / totalSteps) * 100);
    progressBar.style.width = pct + '%';
    progressLabel.textContent = `${step}/${totalSteps}`;
    progressDone.textContent = `${step}/${totalSteps}`;

    // buttons
    btnPrev.disabled = step === 1;
    btnPrev.classList.toggle('opacity-50', step === 1);

    if (step === totalSteps) {
      btnNext.classList.add('hidden');
      btnSubmit.classList.remove('hidden');
    } else {
      btnNext.classList.remove('hidden');
      btnSubmit.classList.add('hidden');
    }

    // hint
    const hints = {
      1: 'حدد أوقات الاجتماع (اختياري).',
      2: 'اكتب أجندة كبنود.',
      3: 'اختصر النقاش بشكل واضح.',
      4: 'اكتب القرارات كبنود (أساسي).',
      5: 'اكتب المهام + أرسل ملخص للجميع لو تحب.'
    };
    hint.textContent = hints[step] || '—';

    // step chips status
    document.querySelectorAll('.step-chip').forEach(chip => {
      const s = parseInt(chip.getAttribute('data-step'));
      chip.classList.toggle('bg-white/10', s === step);
      chip.classList.toggle('text-white', s === step);
      const statusEl = chip.querySelector('[data-step-status]');
      if (statusEl) statusEl.textContent = s < step ? 'تم' : (s === step ? 'الآن' : 'قادم');
    });
  }

  btnPrev.addEventListener('click', () => setWizardStep(currentStep - 1));
  btnNext.addEventListener('click', () => {
    // validation خفيف: خطوة القرارات لو فاضية نبّه (مش اجباري)
    if (currentStep === 4) {
      const decisions = document.querySelector('textarea[name="decisions"]')?.value?.trim() || '';
      if (decisions.length === 0) showToast('تنبيه: خطوة القرارات فارغة — يفضل كتابة قرارات واضحة.');
    }
    setWizardStep(currentStep + 1);
  });

  // init
  setWizardStep(1);
</script>
@endsection