@extends('layouts.superadmin')
@section('title', 'إضافة عضو جديد')

@push('styles')
<style>
  /* Socrates/Enterprise */
  @keyframes pulseScale { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
  .animate-pulse-scale{ animation:pulseScale 1.15s ease-in-out infinite; }

  .sc-scroll::-webkit-scrollbar{ width:10px; height:10px; }
  .sc-scroll::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius:999px; }
  .sc-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius:999px; }
  .sc-scroll::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.28); }

  .sc-card{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .sc-soft{
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
</style>
@endpush

@section('content')
<div class="min-h-screen rtl" dir="rtl"
     style="background:
       radial-gradient(46vmax 46vmax at 115% -10%, rgba(59,130,246,.22) 0, transparent 60%),
       radial-gradient(42vmax 42vmax at -10% 120%, rgba(34,211,238,.16) 0, transparent 60%),
       radial-gradient(38vmax 38vmax at 30% 10%, rgba(168,85,247,.14) 0, transparent 55%),
       linear-gradient(180deg, #020617 0%, #0b1224 45%, #020617 100%);">

  <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 py-6 sm:py-8 space-y-6 text-white">

    {{-- Header / Breadcrumb --}}
    <section class="relative overflow-hidden rounded-3xl shadow-2xl
                    bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
                    border border-sky-500/25">
      <div class="pointer-events-none absolute -top-24 -right-12 w-80 h-80 rounded-full bg-sky-500/16 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-16 w-96 h-96 rounded-full bg-indigo-500/14 blur-3xl"></div>

      <div class="relative p-5 sm:p-7 lg:p-8 space-y-4">

        <nav class="flex" aria-label="Breadcrumb">
          <ol class="inline-flex items-center space-x-1 md:space-x-3 space-x-reverse text-[12px] text-white/70">
            <li class="inline-flex items-center">
              <a href="{{ route('superadmin.users.index') }}"
                 class="inline-flex items-center hover:text-white transition">
                إدارة الأعضاء
              </a>
            </li>
            <li>
              <div class="flex items-center">
                <svg class="w-6 h-6 text-white/35 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="mr-1 text-white/55">إضافة عضو</span>
              </div>
            </li>
          </ol>
        </nav>

        <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
          <div class="space-y-2 max-w-3xl">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-sky-400/20 text-[11px] text-white/85">
              <span class="inline-flex w-6 h-6 rounded-full bg-gradient-to-br from-sky-500 to-indigo-500 text-white items-center justify-center">
                <i class="fa-solid fa-user-plus text-[11px]"></i>
              </span>
              إضافة عضو جديد — Enterprise / Socrates Wizard
            </div>

            <h1 class="text-xl sm:text-2xl lg:text-3xl font-extrabold tracking-tight">
              إضافة عضو جديد
            </h1>

            <p class="text-[12px] sm:text-[14px] text-white/70 leading-relaxed">
              نموذج ذكي على شكل سلايدات: امشي خطوة بخطوة، وفي النهاية يظهر لك ملخص كامل قبل الإنشاء.
            </p>
          </div>

          <div class="flex gap-2">
            <a href="{{ route('superadmin.users.index') }}"
               class="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-2xl
                      bg-white/10 hover:bg-white/15 border border-white/15
                      text-white/90 font-extrabold transition">
              <i class="fa-solid fa-arrow-right text-[12px]"></i>
              العودة للقائمة
            </a>
          </div>
        </div>
      </div>
    </section>

    {{-- Wizard shell --}}
    <section class="sc-card rounded-3xl shadow-2xl overflow-hidden">
      {{-- Wizard header + progress --}}
      <div class="p-5 sm:p-6 border-b border-white/10">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
          <div class="flex items-center gap-3">
            <div class="w-11 h-11 rounded-2xl bg-sky-500/12 border border-sky-400/20 text-sky-200 grid place-items-center">
              <i class="fa-solid fa-wand-magic-sparkles"></i>
            </div>
            <div>
              <div class="text-[11px] text-white/55">مُعالج الإنشاء</div>
              <div class="text-lg font-extrabold text-white">سلايدات + Progress</div>
            </div>
          </div>

          <div class="w-full lg:w-[440px] sc-soft rounded-3xl p-4">
            <div class="flex items-center justify-between text-[11px] text-white/60 mb-2">
              <span id="stepLabel">الخطوة 1/5 — المعلومات الأساسية</span>
              <span id="percentLabel">0%</span>
            </div>
            <div class="h-2 rounded-full bg-white/10 border border-white/10 overflow-hidden">
              <div id="progressBar" class="h-full w-[0%] bg-gradient-to-r from-sky-500 via-cyan-400 to-emerald-300 transition-all duration-300"></div>
            </div>

            <div class="mt-3 grid grid-cols-5 gap-2 text-[11px]">
              <button type="button" class="stepDot px-2 py-1 rounded-2xl bg-white/5 border border-white/10 text-white/70 font-extrabold" data-step-jump="1">1</button>
              <button type="button" class="stepDot px-2 py-1 rounded-2xl bg-white/5 border border-white/10 text-white/70 font-extrabold" data-step-jump="2">2</button>
              <button type="button" class="stepDot px-2 py-1 rounded-2xl bg-white/5 border border-white/10 text-white/70 font-extrabold" data-step-jump="3">3</button>
              <button type="button" class="stepDot px-2 py-1 rounded-2xl bg-white/5 border border-white/10 text-white/70 font-extrabold" data-step-jump="4">4</button>
              <button type="button" class="stepDot px-2 py-1 rounded-2xl bg-white/5 border border-white/10 text-white/70 font-extrabold" data-step-jump="5">5</button>
            </div>

            <div class="mt-2 text-[11px] text-white/45">
              *الملخص في الخطوة الأخيرة يظهر تلقائيًا قبل زر الإنشاء.
            </div>
          </div>
        </div>
      </div>

      {{-- FORM --}}
      <form id="createUserForm"
            action="{{ route('superadmin.users.store') }}"
            method="POST"
            enctype="multipart/form-data"
            class="p-5 sm:p-6 space-y-6">
        @csrf

        {{-- SLIDE 1: Basic info --}}
        <div class="slide" data-step="1">
          <div class="flex items-center justify-between mb-4">
            <div>
              <div class="text-[11px] text-white/55 font-extrabold">الخطوة 1/5</div>
              <h3 class="text-lg font-extrabold text-white">المعلومات الأساسية</h3>
              <p class="text-[12px] text-white/60">الاسم، اليوزر، الإيميل، الهاتف، كلمة المرور.</p>
            </div>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            {{-- الاسم --}}
            <div>
              <label for="name" class="block text-sm font-extrabold text-white/80 mb-2">الاسم الكامل *</label>
              <input type="text" name="name" id="name" required value="{{ old('name') }}"
                     class="w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/12
                            text-white placeholder:text-white/30
                            focus:outline-none focus:ring-2 focus:ring-sky-500/50 focus:border-sky-500/40 transition"
                     placeholder="أدخل اسم العضو بالكامل...">
              @error('name')
                <div class="text-rose-200 text-sm mt-1">{{ $message }}</div>
              @enderror
            </div>

            {{-- username --}}
            <div>
              <label for="username" class="block text-sm font-extrabold text-white/80 mb-2">اسم المستخدم *</label>
              <input type="text" name="username" id="username" required value="{{ old('username') }}"
                     class="w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/12
                            text-white placeholder:text-white/30
                            focus:outline-none focus:ring-2 focus:ring-sky-500/50 focus:border-sky-500/40 transition"
                     placeholder="أدخل اسم المستخدم للتسجيل...">
              <div class="text-[11px] text-white/45 mt-1">يجب أن يكون فريداً ويمكن استخدامه لتسجيل الدخول</div>
              @error('username')
                <div class="text-rose-200 text-sm mt-1">{{ $message }}</div>
              @enderror
            </div>

            {{-- email --}}
            <div>
              <label for="email" class="block text-sm font-extrabold text-white/80 mb-2">البريد الإلكتروني *</label>
              <input type="email" name="email" id="email" required value="{{ old('email') }}"
                     class="w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/12
                            text-white placeholder:text-white/30
                            focus:outline-none focus:ring-2 focus:ring-sky-500/50 focus:border-sky-500/40 transition"
                     placeholder="example@domain.com">
              @error('email')
                <div class="text-rose-200 text-sm mt-1">{{ $message }}</div>
              @enderror
            </div>

            {{-- phone --}}
            <div>
              <label for="phone" class="block text-sm font-extrabold text-white/80 mb-2">رقم الهاتف</label>
              <input type="text" name="phone" id="phone" value="{{ old('phone') }}"
                     class="w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/12
                            text-white placeholder:text-white/30
                            focus:outline-none focus:ring-2 focus:ring-sky-500/50 focus:border-sky-500/40 transition"
                     placeholder="أدخل رقم الهاتف (اختياري)">
              @error('phone')
                <div class="text-rose-200 text-sm mt-1">{{ $message }}</div>
              @enderror
            </div>

            {{-- password --}}
            <div>
              <label for="password" class="block text-sm font-extrabold text-white/80 mb-2">كلمة المرور *</label>
              <input type="password" name="password" id="password" required
                     class="w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/12
                            text-white placeholder:text-white/30
                            focus:outline-none focus:ring-2 focus:ring-sky-500/50 focus:border-sky-500/40 transition"
                     placeholder="أدخل كلمة المرور...">
              <div class="text-[11px] text-white/45 mt-1">يجب أن تكون ٦ أحرف على الأقل</div>
              @error('password')
                <div class="text-rose-200 text-sm mt-1">{{ $message }}</div>
              @enderror
            </div>

            {{-- confirm --}}
            <div>
              <label for="password_confirmation" class="block text-sm font-extrabold text-white/80 mb-2">تأكيد كلمة المرور *</label>
              <input type="password" name="password_confirmation" id="password_confirmation" required
                     class="w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/12
                            text-white placeholder:text-white/30
                            focus:outline-none focus:ring-2 focus:ring-sky-500/50 focus:border-sky-500/40 transition"
                     placeholder="أعد إدخال كلمة المرور...">
              @error('password_confirmation')
                <div class="text-rose-200 text-sm mt-1">{{ $message }}</div>
              @enderror
            </div>
          </div>
        </div>

        {{-- SLIDE 2: Additional --}}
        <div class="slide hidden" data-step="2">
          <div class="flex items-center justify-between mb-4">
            <div>
              <div class="text-[11px] text-white/55 font-extrabold">الخطوة 2/5</div>
              <h3 class="text-lg font-extrabold text-white">معلومات إضافية</h3>
              <p class="text-[12px] text-white/60">الجنس + العضوية + حالة الحساب.</p>
            </div>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            {{-- gender --}}
            <div>
              <label class="block text-sm font-extrabold text-white/80 mb-2">الجنس *</label>
              <div class="flex gap-4">
                <label class="flex items-center gap-2 rounded-2xl bg-black/25 border border-white/10 px-3 py-2 cursor-pointer">
                  <input type="radio" name="gender" value="male" {{ old('gender') == 'male' ? 'checked' : '' }} required
                         class="rounded-full border-gray-300 text-sky-600 shadow-sm ml-2">
                  <span class="text-sm text-white/80">ذكر</span>
                </label>

                <label class="flex items-center gap-2 rounded-2xl bg-black/25 border border-white/10 px-3 py-2 cursor-pointer">
                  <input type="radio" name="gender" value="female" {{ old('gender') == 'female' ? 'checked' : '' }} required
                         class="rounded-full border-gray-300 text-pink-600 shadow-sm ml-2">
                  <span class="text-sm text-white/80">أنثى</span>
                </label>
              </div>
              @error('gender')
                <div class="text-rose-200 text-sm mt-1">{{ $message }}</div>
              @enderror
            </div>

            {{-- membership --}}
            <div>
              <label for="membership_status" class="block text-sm font-extrabold text-white/80 mb-2">حالة العضوية *</label>
              <select name="membership_status" id="membership_status" required
                      class="w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/12 text-white
                             focus:outline-none focus:ring-2 focus:ring-sky-500/50 focus:border-sky-500/40 transition">
                <option value="beta" {{ old('membership_status') == 'beta' ? 'selected' : '' }}>عضو بيتا</option>
                <option value="official" {{ old('membership_status') == 'official' ? 'selected' : '' }}>عضو رسمي</option>
                <option value="moderator" {{ old('membership_status') == 'moderator' ? 'selected' : '' }}>مشرف</option>
                <option value="advisor" {{ old('membership_status') == 'advisor' ? 'selected' : '' }}>مستشار</option>
                <option value="super-admin" {{ old('membership_status') == 'super-admin' ? 'selected' : '' }}>مدير عام</option>
              </select>
              @error('membership_status')
                <div class="text-rose-200 text-sm mt-1">{{ $message }}</div>
              @enderror
            </div>

            {{-- account --}}
            <div>
              <label for="account_status" class="block text-sm font-extrabold text-white/80 mb-2">حالة الحساب *</label>
              <select name="account_status" id="account_status" required
                      class="w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/12 text-white
                             focus:outline-none focus:ring-2 focus:ring-sky-500/50 focus:border-sky-500/40 transition">
                <option value="active" {{ old('account_status') == 'active' ? 'selected' : '' }}>نشط</option>
                <option value="suspended" {{ old('account_status') == 'suspended' ? 'selected' : '' }}>موقوف</option>
                <option value="banned" {{ old('account_status') == 'banned' ? 'selected' : '' }}>محظور</option>
              </select>
              @error('account_status')
                <div class="text-rose-200 text-sm mt-1">{{ $message }}</div>
              @enderror
            </div>
          </div>
        </div>

        {{-- SLIDE 3: Roles --}}
        <div class="slide hidden" data-step="3">
          <div class="flex items-center justify-between mb-4">
            <div>
              <div class="text-[11px] text-white/55 font-extrabold">الخطوة 3/5</div>
              <h3 class="text-lg font-extrabold text-white">الصلاحيات والدور</h3>
              <p class="text-[12px] text-white/60">اختر دور واحد للعضو.</p>
            </div>
          </div>

          <div>
            <label class="block text-sm font-extrabold text-white/80 mb-3">الدور *</label>

            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
              @foreach($roles as $role)
                <div class="rounded-2xl bg-black/25 border border-white/10 p-3 hover:bg-white/5 transition">
                  <label class="flex items-center cursor-pointer gap-2">
                    <input type="radio" name="role" value="{{ $role->name }}" required
                           {{ old('role') == $role->name ? 'checked' : '' }}
                           class="rounded-full border-gray-300 text-sky-600 shadow-sm ml-2">
                    <div class="min-w-0">
                      <span class="block text-sm font-extrabold text-white">{{ $role->display_name ?? $role->name }}</span>
                      @if($role->description)
                        <span class="block text-[11px] text-white/55">{{ $role->description }}</span>
                      @endif
                    </div>
                  </label>
                </div>
              @endforeach
            </div>

            @error('role')
              <div class="text-rose-200 text-sm mt-2">{{ $message }}</div>
            @enderror
          </div>
        </div>

        {{-- SLIDE 4: Personal --}}
        <div class="slide hidden" data-step="4">
          <div class="flex items-center justify-between mb-4">
            <div>
              <div class="text-[11px] text-white/55 font-extrabold">الخطوة 4/5</div>
              <h3 class="text-lg font-extrabold text-white">المعلومات الشخصية</h3>
              <p class="text-[12px] text-white/60">نبذة + صورة شخصية مع معاينة.</p>
            </div>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            {{-- bio --}}
            <div>
              <label for="bio" class="block text-sm font-extrabold text-white/80 mb-2">نبذة تعريفية</label>
              <textarea name="bio" id="bio" rows="4"
                        class="w-full px-3 py-2.5 rounded-2xl bg-black/30 border border-white/12
                               text-white placeholder:text-white/30
                               focus:outline-none focus:ring-2 focus:ring-sky-500/50 focus:border-sky-500/40 transition"
                        placeholder="نبذة قصيرة عن العضو (اختياري)...">{{ old('bio') }}</textarea>
              @error('bio')
                <div class="text-rose-200 text-sm mt-1">{{ $message }}</div>
              @enderror
            </div>

            {{-- avatar --}}
            <div>
              <label class="block text-sm font-extrabold text-white/80 mb-2">الصورة الشخصية</label>

              <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-white/12 border-dashed rounded-2xl bg-black/20">
                <div class="space-y-2 text-center">
                  <svg class="mx-auto h-12 w-12 text-white/40" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
                          stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>

                  <div class="flex text-sm text-white/70 justify-center gap-1">
                    <label for="avatar"
                           class="relative cursor-pointer rounded-xl font-extrabold text-sky-200 hover:text-sky-100 transition">
                      <span>رفع صورة</span>
                      <input id="avatar" name="avatar" type="file" class="sr-only" accept="image/*">
                    </label>
                    <p class="text-white/40">أو سحب وإفلات</p>
                  </div>

                  <p class="text-[11px] text-white/45">PNG, JPG حتى 2MB</p>
                </div>
              </div>

              @error('avatar')
                <div class="text-rose-200 text-sm mt-1">{{ $message }}</div>
              @enderror

              <div id="avatarPreview" class="mt-2 text-sm text-white/70"></div>
            </div>
          </div>
        </div>

        {{-- SLIDE 5: Summary --}}
        <div class="slide hidden" data-step="5">
          <div class="flex items-center justify-between mb-4">
            <div>
              <div class="text-[11px] text-white/55 font-extrabold">الخطوة 5/5</div>
              <h3 class="text-lg font-extrabold text-white">✅ ملخص سريع قبل الإنشاء</h3>
              <p class="text-[12px] text-white/60">تأكد من البيانات، ثم اضغط “إنشاء الحساب”.</p>
            </div>

            <div class="hidden sm:flex items-center gap-2 text-[11px] text-white/55">
              <i class="fa-solid fa-shield-halved text-sky-200"></i>
              مراجعة نهائية
            </div>
          </div>

          <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <div class="rounded-3xl bg-black/25 border border-white/10 p-4">
              <div class="text-[11px] text-white/60 font-extrabold mb-2">بيانات الدخول</div>
              <div class="space-y-2 text-sm">
                <div class="flex items-center justify-between gap-2"><span class="text-white/60">الاسم:</span><span class="font-extrabold" id="sum_name">—</span></div>
                <div class="flex items-center justify-between gap-2"><span class="text-white/60">اليوزر:</span><span class="font-extrabold" id="sum_username">—</span></div>
                <div class="flex items-center justify-between gap-2"><span class="text-white/60">الإيميل:</span><span class="font-extrabold" id="sum_email">—</span></div>
                <div class="flex items-center justify-between gap-2"><span class="text-white/60">الهاتف:</span><span class="font-extrabold" id="sum_phone">—</span></div>
              </div>
            </div>

            <div class="rounded-3xl bg-black/25 border border-white/10 p-4">
              <div class="text-[11px] text-white/60 font-extrabold mb-2">العضوية والصلاحيات</div>
              <div class="space-y-2 text-sm">
                <div class="flex items-center justify-between gap-2"><span class="text-white/60">الجنس:</span><span class="font-extrabold" id="sum_gender">—</span></div>
                <div class="flex items-center justify-between gap-2"><span class="text-white/60">العضوية:</span><span class="font-extrabold" id="sum_membership">—</span></div>
                <div class="flex items-center justify-between gap-2"><span class="text-white/60">حالة الحساب:</span><span class="font-extrabold" id="sum_account">—</span></div>
                <div class="flex items-center justify-between gap-2"><span class="text-white/60">الدور:</span><span class="font-extrabold" id="sum_role">—</span></div>
              </div>
            </div>

            <div class="rounded-3xl bg-black/25 border border-white/10 p-4 lg:col-span-2">
              <div class="text-[11px] text-white/60 font-extrabold mb-2">الصورة والنبذة</div>
              <div class="flex flex-col sm:flex-row gap-4 sm:items-center">
                <div id="sum_avatar_box" class="w-20 h-20 rounded-2xl bg-white/5 border border-white/10 overflow-hidden grid place-items-center text-white/40">
                  <i class="fa-regular fa-image"></i>
                </div>
                <div class="flex-1">
                  <div class="text-[11px] text-white/55">نبذة:</div>
                  <div class="text-sm text-white/80 leading-relaxed" id="sum_bio">—</div>
                </div>
              </div>
            </div>
          </div>

          {{-- Actions final --}}
          <div class="flex flex-col sm:flex-row-reverse gap-3 pt-4 border-t border-white/10 mt-4">
            <button type="submit"
                    class="inline-flex justify-center items-center gap-2 px-6 py-3 rounded-2xl
                           bg-gradient-to-r from-sky-500/20 to-indigo-500/20 hover:from-sky-500/28 hover:to-indigo-500/28
                           border border-sky-400/25 text-white font-extrabold transition shadow-lg shadow-sky-500/10">
              <i class="fa-solid fa-check text-[12px]"></i>
              إنشاء الحساب
            </button>

            <a href="{{ route('superadmin.users.index') }}"
               class="inline-flex justify-center items-center px-6 py-3 rounded-2xl
                      bg-white/10 hover:bg-white/15 border border-white/15 text-white/90 font-extrabold transition">
              إلغاء
            </a>
          </div>
        </div>

        {{-- NAV --}}
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 pt-4 border-t border-white/10">
          <button type="button" id="prevBtn"
                  class="px-5 py-2.5 rounded-2xl bg-white/10 hover:bg-white/15 border border-white/15
                         text-white/90 text-sm font-extrabold transition disabled:opacity-40 disabled:cursor-not-allowed">
            <i class="fa-solid fa-arrow-right ms-2 text-[12px]"></i>
            السابق
          </button>

          <button type="button" id="nextBtn"
                  class="px-5 py-2.5 rounded-2xl bg-sky-500/15 hover:bg-sky-500/20 border border-sky-400/20
                         text-sky-100 text-sm font-extrabold transition">
            التالي
            <i class="fa-solid fa-arrow-left ms-2 text-[12px]"></i>
          </button>
        </div>

      </form>
    </section>

  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {

  // ===== Slides + Progress =====
  const slides = Array.from(document.querySelectorAll('.slide'));
  const totalSteps = slides.length;
  let currentStep = 1;

  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');
  const progressBar = document.getElementById('progressBar');
  const stepLabel = document.getElementById('stepLabel');
  const percentLabel = document.getElementById('percentLabel');
  const stepDots = Array.from(document.querySelectorAll('.stepDot'));

  const titles = {
    1: 'المعلومات الأساسية',
    2: 'معلومات إضافية',
    3: 'الصلاحيات والدور',
    4: 'المعلومات الشخصية',
    5: 'ملخص سريع'
  };

  function markDots() {
    stepDots.forEach((b, idx) => {
      const n = idx + 1;
      const active = n <= currentStep;

      b.classList.toggle('bg-sky-500/15', active);
      b.classList.toggle('border-sky-400/25', active);
      b.classList.toggle('text-sky-100', active);

      b.classList.toggle('bg-white/5', !active);
      b.classList.toggle('border-white/10', !active);
      b.classList.toggle('text-white/70', !active);
    });
  }

  function showStep(step) {
    currentStep = Math.min(Math.max(step, 1), totalSteps);
    slides.forEach(s => s.classList.toggle('hidden', Number(s.dataset.step) !== currentStep));

    const pct = (totalSteps === 1) ? 100 : Math.round(((currentStep - 1) / (totalSteps - 1)) * 100);
    progressBar.style.width = pct + '%';
    percentLabel.textContent = pct + '%';
    stepLabel.textContent = `الخطوة ${currentStep}/${totalSteps} — ${titles[currentStep] || ''}`;

    prevBtn.disabled = currentStep === 1;
    nextBtn.disabled = currentStep === totalSteps;

    // لو وصلنا للملخص، حدّثه
    if (currentStep === 5) {
      updateSummary();
    }

    markDots();
  }

  prevBtn.addEventListener('click', () => showStep(currentStep - 1));
  nextBtn.addEventListener('click', () => showStep(currentStep + 1));
  stepDots.forEach(btn => btn.addEventListener('click', () => showStep(Number(btn.dataset.stepJump || 1))));

  // لو في أخطاء validation — اقفز لأول سلايد فيه خطأ
  const firstErrorEl = document.querySelector('.text-rose-200');
  if (firstErrorEl) {
    const slide = firstErrorEl.closest('.slide');
    if (slide) showStep(Number(slide.dataset.step || 1));
    else showStep(1);
  } else {
    showStep(1);
  }

  // ===== Avatar preview (نفس منطقك) =====
  const avatarInput = document.getElementById('avatar');
  const avatarPreview = document.getElementById('avatarPreview');

  if (avatarInput && avatarPreview) {
    avatarInput.addEventListener('change', function() {
      if (this.files[0]) {
        const fileName = this.files[0].name;
        avatarPreview.innerHTML = `تم اختيار: ${fileName}`;

        const reader = new FileReader();
        reader.onload = function(e) {
          avatarPreview.innerHTML = `
            <div class="mt-2 flex items-center gap-3">
              <img src="${e.target.result}" class="w-16 h-16 object-cover rounded-2xl border border-white/15">
              <span class="text-white/80">${fileName}</span>
            </div>
          `;
        };
        reader.readAsDataURL(this.files[0]);
      } else {
        avatarPreview.innerHTML = '';
      }
    });
  }

  // ===== ربط حالة العضوية بالدور (نفس منطقك) =====
  const membershipStatus = document.getElementById('membership_status');
  const roleInputs = document.querySelectorAll('input[name="role"]');

  if (membershipStatus && roleInputs.length > 0) {
    membershipStatus.addEventListener('change', function() {
      const selectedStatus = this.value;

      switch (selectedStatus) {
        case 'beta':
          selectRoleByName('member');
          break;
        case 'official':
          selectRoleByName('official-member');
          break;
        case 'moderator':
          selectRoleByName('moderator');
          break;
        case 'advisor':
          selectRoleByName('advisor');
          break;
        case 'super-admin':
          selectRoleByName('super-admin');
          break;
      }
    });

    function selectRoleByName(roleName) {
      roleInputs.forEach(input => {
        if (input.value === roleName) {
          input.checked = true;
        }
      });
    }
  }

  // ===== Summary auto (Slide 5) =====
  function getCheckedValue(name) {
    const el = document.querySelector(`input[name="${name}"]:checked`);
    return el ? el.value : '';
  }

  function getRoleLabel(roleName) {
    switch (roleName) {
      case 'super-admin': return 'مدير عام / إدارة عليا';
      case 'advisor': return 'مستشار';
      case 'moderator': return 'مشرف';
      case 'official-member': return 'عضو رسمي';
      case 'member': return 'عضو بيتا';
      default: return roleName || '—';
    }
  }

  function getMembershipLabel(v) {
    switch (v) {
      case 'beta': return 'عضو بيتا';
      case 'official': return 'عضو رسمي';
      case 'moderator': return 'مشرف';
      case 'advisor': return 'مستشار';
      case 'super-admin': return 'مدير عام';
      default: return v || '—';
    }
  }

  function getAccountLabel(v) {
    switch (v) {
      case 'active': return 'نشط';
      case 'suspended': return 'موقوف';
      case 'banned': return 'محظور';
      default: return v || '—';
    }
  }

  function updateSummary() {
    const name = (document.getElementById('name')?.value || '').trim();
    const username = (document.getElementById('username')?.value || '').trim();
    const email = (document.getElementById('email')?.value || '').trim();
    const phone = (document.getElementById('phone')?.value || '').trim();

    const gender = getCheckedValue('gender');
    const membership = document.getElementById('membership_status')?.value || '';
    const account = document.getElementById('account_status')?.value || '';
    const role = getCheckedValue('role');

    const bio = (document.getElementById('bio')?.value || '').trim();

    document.getElementById('sum_name').textContent = name || '—';
    document.getElementById('sum_username').textContent = username ? '@' + username : '—';
    document.getElementById('sum_email').textContent = email || '—';
    document.getElementById('sum_phone').textContent = phone || '—';

    document.getElementById('sum_gender').textContent = gender === 'male' ? 'ذكر' : (gender === 'female' ? 'أنثى' : '—');
    document.getElementById('sum_membership').textContent = getMembershipLabel(membership);
    document.getElementById('sum_account').textContent = getAccountLabel(account);
    document.getElementById('sum_role').textContent = getRoleLabel(role);

    document.getElementById('sum_bio').textContent = bio || '—';

    // avatar summary
    const box = document.getElementById('sum_avatar_box');
    if (box && avatarInput && avatarInput.files && avatarInput.files[0]) {
      const reader = new FileReader();
      reader.onload = function(e) {
        box.innerHTML = `<img src="${e.target.result}" class="w-full h-full object-cover">`;
      };
      reader.readAsDataURL(avatarInput.files[0]);
    } else if (box) {
      box.innerHTML = `<i class="fa-regular fa-image"></i>`;
    }
  }

  // تحديث الملخص أثناء الكتابة (لطيف)
  ['name','username','email','phone','bio','membership_status','account_status'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.addEventListener('input', () => { if (currentStep === 5) updateSummary(); });
    if (el) el.addEventListener('change', () => { if (currentStep === 5) updateSummary(); });
  });
  document.querySelectorAll('input[name="gender"], input[name="role"]').forEach(el => {
    el.addEventListener('change', () => { if (currentStep === 5) updateSummary(); });
  });

});
</script>
@endsection