@extends('layouts.superadmin')

@section('title','نظام الجاجي Chiken — Wizard الإشعارات')

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

    <div class="flex items-center justify-between">
      <div>
        <h1 class="text-xl sm:text-2xl font-extrabold text-white">
          منبر الجاجي <span class="text-rose-200">Broadcast Wizard</span>
        </h1>
        <p class="text-[12px] text-white/60">إشعار رسمي “سلايد” — بدون وجع راس</p>
      </div>

      <div class="flex gap-2">
        {{-- ✅ داشبورد الجاجي --}}
        <a href="{{ route('superadmin.chiken.dashboard') }}"
          class="inline-flex items-center gap-2 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-house"></i>
          الداشبورد
        </a>
      </div>
    </div>

    @if(session('success'))
      <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 text-emerald-200 px-4 py-3 text-sm">
        {{ session('success') }}
      </div>
    @endif

    <div class="rounded-3xl border border-white/10 bg-black/20 overflow-hidden">
      <div class="p-5 sm:p-6 border-b border-white/10">
        <div class="flex items-center justify-between gap-3 mb-4">
          <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-bullhorn"></i>
            </div>
            <div>
              <div class="text-[11px] text-white/60">Wizard</div>
              <div class="font-extrabold text-white">خطوات إرسال الإشعار</div>
            </div>
          </div>

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

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

      {{-- ✅ Send Route تبع الجاجي --}}
      <form action="{{ route('superadmin.chiken.broadcast.send') }}" method="POST" id="broadcastForm">
        @csrf

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

        <div dir="ltr" class="overflow-hidden">
          <div id="wizTrack" class="flex transition-transform duration-500 ease-out" style="transform: translateX(0%);">

            {{-- Slide 1: Target --}}
            <section class="w-full shrink-0 p-5 sm:p-6" dir="rtl">
              <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
                <div class="flex items-center justify-between mb-4">
                  <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">
                      <span class="font-extrabold">1</span>
                    </div>
                    <div>
                      <div class="text-[11px] text-white/60">Step 1</div>
                      <div class="font-extrabold text-white">مين هدف الإشعار؟</div>
                    </div>
                  </div>

                  <span class="text-[11px] text-white/60 bg-white/5 border border-white/10 px-3 py-1 rounded-full">
                    يدعم الصبايا 🎀
                  </span>
                </div>

                <label class="text-[11px] text-white/60">Target</label>
                <select name="target" id="target"
                  class="w-full mt-1 rounded-2xl bg-black/50 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-rose-500/40">
                  <option value="all">الجميع</option>
                  <option value="girls">الصبايا 🎀</option>
                  <option value="boys">الشباب</option>
                  <option value="members">الأعضاء (Beta+Official)</option>
                  <option value="official">Official فقط</option>
                  <option value="beta">Beta فقط</option>
                  <option value="moderators">Moderators</option>
                  <option value="advisors">Advisors</option>
                  <option value="custom">تحديد IDs</option>
                </select>

                <div id="customBox" class="hidden mt-3">
                  <label class="text-[11px] text-white/60">IDs (مثال: 1,2,3)</label>
                  <input type="text" name="custom_user_ids" id="custom_user_ids"
                    class="w-full mt-1 rounded-2xl bg-black/50 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">
                </div>

                <div class="mt-5 flex justify-end">
                  <button type="button" onclick="wizNext()"
                    class="inline-flex items-center gap-2 px-5 py-3 rounded-2xl bg-gradient-to-r from-rose-200 via-fuchsia-200 to-cyan-200 text-slate-900 text-sm font-extrabold hover:scale-[1.01] transition">
                    التالي
                    <i class="fa-solid fa-arrow-left"></i>
                  </button>
                </div>
              </div>
            </section>

            {{-- Slide 2: Message --}}
            <section class="w-full shrink-0 p-5 sm:p-6" dir="rtl">
              <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
                <div class="flex items-center gap-3 mb-4">
                  <div class="w-9 h-9 rounded-2xl bg-fuchsia-500/15 border border-fuchsia-400/25 grid place-items-center text-fuchsia-200">
                    <span class="font-extrabold">2</span>
                  </div>
                  <div>
                    <div class="text-[11px] text-white/60">Step 2</div>
                    <div class="font-extrabold text-white">الرسالة + النوع</div>
                  </div>
                </div>

                <div class="grid gap-3 lg:grid-cols-2">
                  <div>
                    <label class="text-[11px] text-white/60">Type</label>
                    <select name="type" id="type"
                      class="w-full mt-1 rounded-2xl bg-black/50 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
                      <option value="info">Info</option>
                      <option value="success">Success</option>
                      <option value="warning">Warning</option>
                      <option value="danger">Danger</option>
                    </select>
                  </div>

                  <div>
                    <label class="text-[11px] text-white/60">Icon (FontAwesome class)</label>
                    <input name="icon" id="icon" type="text"
                      class="w-full mt-1 rounded-2xl bg-black/50 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40"
                      placeholder="fa-solid fa-bell" value="fa-solid fa-bell">
                  </div>

                  <div class="lg:col-span-2">
                    <label class="text-[11px] text-white/60">Message</label>
                    <textarea name="message" id="message" rows="4"
                      class="w-full mt-1 rounded-2xl bg-black/50 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40"
                      placeholder="اكتب الرسالة هنا..."></textarea>
                  </div>
                </div>

                <div class="mt-5 flex items-center justify-between">
                  <button type="button" onclick="wizBack()"
                    class="inline-flex items-center gap-2 px-5 py-3 rounded-2xl bg-white/10 border border-white/15 text-white text-sm font-bold hover:bg-white/15 transition">
                    <i class="fa-solid fa-arrow-right"></i>
                    رجوع
                  </button>
                  <button type="button" onclick="wizNext()"
                    class="inline-flex items-center gap-2 px-5 py-3 rounded-2xl bg-gradient-to-r from-rose-200 via-fuchsia-200 to-cyan-200 text-slate-900 text-sm font-extrabold hover:scale-[1.01] transition">
                    التالي
                    <i class="fa-solid fa-arrow-left"></i>
                  </button>
                </div>
              </div>
            </section>

            {{-- Slide 3: Action --}}
            <section class="w-full shrink-0 p-5 sm:p-6" dir="rtl">
              <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
                <div class="flex items-center gap-3 mb-4">
                  <div class="w-9 h-9 rounded-2xl bg-cyan-500/15 border border-cyan-400/25 grid place-items-center text-cyan-200">
                    <span class="font-extrabold">3</span>
                  </div>
                  <div>
                    <div class="text-[11px] text-white/60">Step 3</div>
                    <div class="font-extrabold text-white">رابط الإجراء (اختياري)</div>
                  </div>
                </div>

                <label class="text-[11px] text-white/60">Action URL</label>
                <input name="action_url" id="action_url" type="text"
                  class="w-full mt-1 rounded-2xl bg-black/50 border border-white/15 text-sm text-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-cyan-500/40"
                  placeholder="/some/page/or/https://...">

                <div class="mt-5 flex items-center justify-between">
                  <button type="button" onclick="wizBack()"
                    class="inline-flex items-center gap-2 px-5 py-3 rounded-2xl bg-white/10 border border-white/15 text-white text-sm font-bold hover:bg-white/15 transition">
                    <i class="fa-solid fa-arrow-right"></i>
                    رجوع
                  </button>
                  <button type="button" onclick="wizNext()"
                    class="inline-flex items-center gap-2 px-5 py-3 rounded-2xl bg-gradient-to-r from-rose-200 via-fuchsia-200 to-cyan-200 text-slate-900 text-sm font-extrabold hover:scale-[1.01] transition">
                    التالي
                    <i class="fa-solid fa-arrow-left"></i>
                  </button>
                </div>
              </div>
            </section>

            {{-- Slide 4: Confirm --}}
            <section class="w-full shrink-0 p-5 sm:p-6" dir="rtl">
              <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
                <div class="flex items-center gap-3 mb-4">
                  <div class="w-9 h-9 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 grid place-items-center text-emerald-200">
                    <span class="font-extrabold">4</span>
                  </div>
                  <div>
                    <div class="text-[11px] text-white/60">Step 4</div>
                    <div class="font-extrabold text-white">تأكيد وإرسال</div>
                  </div>
                </div>

                <div class="rounded-3xl bg-gradient-to-br from-rose-500/10 via-black/30 to-black/30 border border-rose-300/20 p-4">
                  <div class="text-[11px] text-white/60">Preview</div>
                  <div class="mt-2 flex items-start gap-3">
                    <div class="w-10 h-10 rounded-2xl bg-black/40 border border-white/10 grid place-items-center text-rose-200">
                      <i id="pvIcon" class="fa-solid fa-bell"></i>
                    </div>
                    <div class="flex-1">
                      <div class="text-[12px] text-white/70">Type: <span id="pvType" class="font-bold">info</span> • Target: <span id="pvTarget" class="font-bold">all</span></div>
                      <div id="pvMessage" class="mt-2 text-[13px] text-white leading-relaxed">—</div>
                      <div id="pvUrl" class="mt-2 text-[11px] text-cyan-200 break-all hidden">—</div>
                    </div>
                  </div>
                </div>

                <div class="mt-5 flex items-center justify-between">
                  <button type="button" onclick="wizBack()"
                    class="inline-flex items-center gap-2 px-5 py-3 rounded-2xl bg-white/10 border border-white/15 text-white text-sm font-bold hover:bg-white/15 transition">
                    <i class="fa-solid fa-arrow-right"></i>
                    رجوع
                  </button>

                  <button type="submit"
                    class="inline-flex items-center gap-2 px-6 py-3 rounded-2xl bg-gradient-to-r from-emerald-200 via-cyan-200 to-rose-200 text-slate-900 text-sm font-extrabold hover:scale-[1.01] transition">
                    إرسال الآن
                    <i class="fa-solid fa-paper-plane"></i>
                  </button>
                </div>
              </div>
            </section>

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

  </div>
</div>

<script>
  let step = 1;
  const track = document.getElementById('wizTrack');
  const bar = document.getElementById('wizBar');
  const label = document.getElementById('wizLabel');
  const toast = document.getElementById('wizToast');
  const toastText = document.getElementById('wizToastText');

  const targetSel = document.getElementById('target');
  const customBox = document.getElementById('customBox');

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

  targetSel.addEventListener('change', () => {
    customBox.classList.toggle('hidden', targetSel.value !== 'custom');
  });

  function syncPreview(){
    const icon = document.getElementById('icon').value || 'fa-solid fa-bell';
    const type = document.getElementById('type').value;
    const target = document.getElementById('target').value;
    const msg = document.getElementById('message').value.trim();
    const url = document.getElementById('action_url').value.trim();

    document.getElementById('pvIcon').className = icon;
    document.getElementById('pvType').textContent = type;
    document.getElementById('pvTarget').textContent = target;
    document.getElementById('pvMessage').textContent = msg || '—';

    const pvUrl = document.getElementById('pvUrl');
    if(url){
      pvUrl.textContent = url;
      pvUrl.classList.remove('hidden');
    } else {
      pvUrl.classList.add('hidden');
    }
  }

  function setStep(s){
    step = Math.min(4, Math.max(1, s));
    const x = (step - 1) * 100;
    track.style.transform = `translateX(-${x}%)`;
    bar.style.width = `${step * 25}%`;
    label.textContent = `${step}/4`;
    if(step === 4) syncPreview();
  }

  function wizNext(){
    if(step === 1 && targetSel.value === 'custom'){
      const ids = (document.getElementById('custom_user_ids').value || '').trim();
      if(!ids){
        showToast('اكتب IDs لما تختار Custom.');
        return;
      }
    }
    if(step === 2){
      const msg = document.getElementById('message').value.trim();
      if(!msg){
        showToast('اكتب الرسالة قبل ما تكمل.');
        return;
      }
    }
    setStep(step + 1);
  }

  function wizBack(){
    setStep(step - 1);
  }

  document.getElementById('type').addEventListener('change', syncPreview);
  document.getElementById('icon').addEventListener('input', syncPreview);
  document.getElementById('message').addEventListener('input', syncPreview);
  document.getElementById('action_url').addEventListener('input', syncPreview);

  setStep(1);
</script>
@endsection