@extends('layouts.superadmin')
@section('title', 'إضافة مخالفة/إنذار جديد')

@push('styles')
<style>
    @keyframes pulse-scale { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
    .animate-pulse-scale { animation: pulse-scale 1.2s ease-in-out infinite; }
    .sc-scrollbar::-webkit-scrollbar{ width:10px; }
    .sc-scrollbar::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius: 999px; }
    .sc-scrollbar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 999px; }
    .sc-scrollbar::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.28); }
</style>
@endpush

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

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

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

      <div class="relative p-5 sm:p-7 lg:p-8">
        <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-5">
          <div class="space-y-2 max-w-2xl">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-emerald-300/25 text-[11px] text-emerald-100">
              <span class="inline-flex h-6 w-6 rounded-full bg-emerald-500/25 items-center justify-center">
                <i class="fa-solid fa-plus text-emerald-100 text-sm"></i>
              </span>
              <span>منظومة المخالفات والإنذارات — إنشاء جديد</span>
            </div>

            <h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight">
              إضافة <span class="text-emerald-300">مخالفة</span> / <span class="text-cyan-300">إنذار</span> جديد
            </h1>

            <p class="text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
              أنشئ مخالفة أو إنذار للأعضاء مع سلايدات احترافية وبروجريس واضح حتى لا تضيع خطوة.
            </p>
          </div>

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

        {{-- Progress --}}
        <div class="mt-5">
          <div class="flex items-center justify-between text-[11px] text-white/55 mb-2">
            <span id="stepLabel">الخطوة 1/4 — نوع الحدث</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-emerald-400 via-cyan-400 to-sky-400 transition-all duration-300"></div>
          </div>

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

    {{-- FORM WRAP --}}
    <section class="relative overflow-hidden rounded-3xl border border-white/10
                    bg-gradient-to-br from-slate-900/85 via-slate-950/85 to-black/90 shadow-2xl">
      <div class="pointer-events-none absolute -top-16 -left-16 w-64 h-64 rounded-full bg-white/7 blur-3xl"></div>

      <form id="violationForm" class="relative p-5 sm:p-7 space-y-6">
        @csrf

        {{-- SLIDES --}}
        <div class="space-y-4">

          {{-- Slide 1: Type --}}
          <div class="slide" data-step="1">
            <div class="flex items-center gap-3 mb-3">
              <div class="w-11 h-11 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 text-emerald-200 grid place-items-center">
                <i class="fa-solid fa-shield-halved text-lg"></i>
              </div>
              <div>
                <div class="text-[11px] text-white/60">الخطوة 1</div>
                <div class="text-base sm:text-lg font-extrabold text-white">تحديد نوع الحدث</div>
              </div>
            </div>

            <label class="block text-[11px] font-extrabold text-white/70 mb-2">نوع الحدث <span class="text-rose-300">*</span></label>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <label class="group flex items-center gap-3 p-4 rounded-3xl bg-black/35 border border-white/10 hover:bg-white/5 transition cursor-pointer">
                <input type="radio" name="type" value="warning" id="typeWarning" required
                       class="w-5 h-5 rounded border-white/20 bg-black/40 text-amber-400 focus:ring-amber-500/40">
                <div class="min-w-0">
                  <div class="font-extrabold text-white">إنذار</div>
                  <div class="text-[11px] text-white/55">تنبيه رسمي دون خصم نقاط.</div>
                </div>
                <div class="ms-auto w-10 h-10 rounded-2xl bg-amber-500/12 border border-amber-400/20 text-amber-200 grid place-items-center">
                  <i class="fa-solid fa-triangle-exclamation"></i>
                </div>
              </label>

              <label class="group flex items-center gap-3 p-4 rounded-3xl bg-black/35 border border-white/10 hover:bg-white/5 transition cursor-pointer">
                <input type="radio" name="type" value="violation" id="typeViolation" required
                       class="w-5 h-5 rounded border-white/20 bg-black/40 text-rose-400 focus:ring-rose-500/40">
                <div class="min-w-0">
                  <div class="font-extrabold text-white">مخالفة</div>
                  <div class="text-[11px] text-white/55">قد تشمل خصم نقاط حسب القرار.</div>
                </div>
                <div class="ms-auto w-10 h-10 rounded-2xl bg-rose-500/12 border border-rose-400/20 text-rose-200 grid place-items-center">
                  <i class="fa-solid fa-ban"></i>
                </div>
              </label>
            </div>

            <div class="text-rose-200 text-[12px] mt-2 hidden" id="type-error"></div>
          </div>

          {{-- Slide 2: Details --}}
          <div class="slide hidden" data-step="2">
            <div class="flex items-center gap-3 mb-3">
              <div class="w-11 h-11 rounded-2xl bg-cyan-500/12 border border-cyan-400/20 text-cyan-200 grid place-items-center">
                <i class="fa-solid fa-clipboard-list text-lg"></i>
              </div>
              <div>
                <div class="text-[11px] text-white/60">الخطوة 2</div>
                <div class="text-base sm:text-lg font-extrabold text-white">تفاصيل الحدث</div>
              </div>
            </div>

            <div class="grid grid-cols-1 gap-4">
              <div>
                <label class="block text-[11px] font-extrabold text-white/70 mb-1">عنوان المخالفة/الإنذار <span class="text-rose-300">*</span></label>
                <input type="text" name="title" id="title" required
                       class="w-full rounded-2xl bg-black/40 border border-white/15 px-3 py-2.5 text-sm text-white
                              placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-cyan-500/35"
                       placeholder="أدخل عنوان واضح للمخالفة أو الإنذار...">
                <div class="text-rose-200 text-[12px] mt-1 hidden" id="title-error"></div>
              </div>

              <div>
                <label class="block text-[11px] font-extrabold text-white/70 mb-1">وصف تفصيلي <span class="text-rose-300">*</span></label>
                <textarea name="description" id="description" rows="4" required
                          class="w-full rounded-2xl bg-black/40 border border-white/15 px-3 py-2.5 text-sm text-white
                                 placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-emerald-500/40"
                          placeholder="اشرح تفاصيل المخالفة أو الإنذار والأسباب..."></textarea>
                <div class="text-rose-200 text-[12px] mt-1 hidden" id="description-error"></div>
              </div>

              <div id="pointsSection" class="hidden">
                <label class="block text-[11px] font-extrabold text-white/70 mb-1">النقاط المخصومة</label>
                <input type="number" name="points_deducted" id="points_deducted" min="0" max="100" value="0"
                       class="w-full rounded-2xl bg-black/40 border border-white/15 px-3 py-2.5 text-sm text-white
                              placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-rose-500/35"
                       placeholder="عدد النقاط التي سيتم خصمها من كل عضو...">
                <div class="text-[11px] text-white/45 mt-1">إذا تركته صفر، لن يتم خصم نقاط.</div>
                <div class="text-rose-200 text-[12px] mt-1 hidden" id="points_deducted-error"></div>
              </div>
            </div>
          </div>

          {{-- Slide 3: Members --}}
          <div class="slide hidden" data-step="3">
            <div class="flex items-center gap-3 mb-3">
              <div class="w-11 h-11 rounded-2xl bg-violet-500/12 border border-violet-400/20 text-violet-200 grid place-items-center">
                <i class="fa-solid fa-users text-lg"></i>
              </div>
              <div>
                <div class="text-[11px] text-white/60">الخطوة 3</div>
                <div class="text-base sm:text-lg font-extrabold text-white">اختيار الأعضاء</div>
              </div>
            </div>

            <label class="block text-[11px] font-extrabold text-white/70 mb-2">الأعضاء المستهدفون <span class="text-rose-300">*</span></label>

            <div class="relative mb-3">
              <i class="fa-solid fa-magnifying-glass absolute right-3 top-1/2 -translate-y-1/2 text-white/40"></i>
              <input type="text" id="userSearch"
                     class="w-full rounded-2xl bg-black/40 border border-white/15 pr-10 pl-3 py-2.5 text-sm text-white
                            placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-cyan-500/35"
                     placeholder="البحث بالاسم أو البريد الإلكتروني...">
            </div>

            <div class="rounded-3xl border border-white/10 bg-black/35 overflow-hidden">
              <div class="max-h-72 overflow-y-auto sc-scrollbar divide-y divide-white/10" id="usersList">
                @if(isset($users) && count($users) > 0)
                  @foreach($users as $user)
                    <label class="flex items-center gap-3 p-3 hover:bg-white/5 transition cursor-pointer user-item"
                           data-name="{{ strtolower($user->name ?? '') }}"
                           data-email="{{ strtolower($user->email ?? '') }}">
                      <input type="checkbox" name="members[]" value="{{ $user->id }}"
                             class="w-5 h-5 rounded border-white/20 bg-black/40 text-emerald-400 focus:ring-emerald-500/40">

                      <div class="w-10 h-10 rounded-2xl {{ ($user->gender ?? 'male') == 'female' ? 'bg-pink-500/10 border border-pink-400/20 text-pink-200' : 'bg-cyan-500/10 border border-cyan-400/20 text-cyan-200' }} grid place-items-center">
                        <i class="fa-solid fa-user"></i>
                      </div>

                      <div class="min-w-0 flex-1">
                        <div class="font-extrabold text-white truncate">{{ $user->name ?? 'غير محدد' }}</div>
                        <div class="text-[12px] text-white/55 truncate">{{ $user->email ?? 'غير محدد' }}</div>
                        <div class="text-[11px] text-violet-200/80 mt-0.5">{{ $user->role_name ?? 'عضو' }}</div>
                      </div>
                    </label>
                  @endforeach
                @else
                  <div class="p-6 text-center text-white/60">لا توجد أعضاء متاحون حالياً</div>
                @endif
              </div>
            </div>

            <div class="text-rose-200 text-[12px] mt-2 hidden" id="members-error"></div>

            <div class="mt-2 text-[12px] text-white/60">
              الأعضاء المختارون:
              <span id="selectedCount" class="font-extrabold text-emerald-200">0</span>
            </div>
          </div>

          {{-- Slide 4: Attachment + Privacy --}}
          <div class="slide hidden" data-step="4">
            <div class="flex items-center gap-3 mb-3">
              <div class="w-11 h-11 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 text-emerald-200 grid place-items-center">
                <i class="fa-solid fa-paperclip text-lg"></i>
              </div>
              <div>
                <div class="text-[11px] text-white/60">الخطوة 4</div>
                <div class="text-base sm:text-lg font-extrabold text-white">المرفقات والخصوصية</div>
              </div>
            </div>

            <label class="block text-[11px] font-extrabold text-white/70 mb-2">مرفق كإثبات (اختياري)</label>

            <div class="rounded-3xl border border-dashed border-white/20 bg-black/35 p-6 text-center">
              <div class="w-14 h-14 rounded-3xl bg-white/5 border border-white/10 text-white/70 grid place-items-center mx-auto">
                <i class="fa-solid fa-cloud-arrow-up text-2xl"></i>
              </div>

              <div class="mt-3 text-[12px] text-white/60">
                PNG, JPG, PDF, DOC حتى 5MB
              </div>

              <label for="attachment"
                     class="mt-4 inline-flex items-center justify-center gap-2 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 cursor-pointer">
                <i class="fa-solid fa-upload text-[12px]"></i>
                رفع ملف
                <input id="attachment" name="attachment" type="file" class="sr-only" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
              </label>

              <div id="fileName" class="mt-3 text-[12px] text-white/60"></div>
              <div class="text-rose-200 text-[12px] mt-2 hidden" id="attachment-error"></div>
            </div>

            <div class="mt-5 rounded-3xl bg-black/35 border border-white/10 p-4">
              <label class="flex items-start gap-3 cursor-pointer">
                <input type="checkbox" name="show_creator_name" id="show_creator_name" checked
                       class="mt-1 w-5 h-5 rounded border-white/20 bg-black/40 text-emerald-400 focus:ring-emerald-500/40">
                <div>
                  <div class="font-extrabold text-white/90">إظهار اسمي للأعضاء المخالفين</div>
                  <div class="text-[11px] text-white/55 mt-1">
                    إذا ألغيتها، سيظهر "مجهول الهوية" للأعضاء المخالفين (الإدارة ترى اسمك دائماً).
                  </div>
                </div>
              </label>
            </div>
          </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>

          <div class="flex flex-col sm:flex-row-reverse gap-2 w-full sm:w-auto">
            <button type="button" id="nextBtn"
                    class="px-5 py-2.5 rounded-2xl bg-cyan-500/12 hover:bg-cyan-500/16 border border-cyan-400/20
                           text-cyan-100 text-sm font-extrabold transition">
              التالي
              <i class="fa-solid fa-arrow-left ms-2 text-[12px]"></i>
            </button>

            <button type="submit" id="submitBtn"
                    class="hidden px-6 py-2.5 rounded-2xl text-sm font-extrabold text-slate-950
                           bg-gradient-to-r from-emerald-300 via-emerald-200 to-cyan-200
                           shadow-lg shadow-emerald-500/20 hover:scale-[1.01] active:scale-100 transition">
              <i class="fa-solid fa-circle-check ms-2 text-[12px]"></i>
              إنشاء المخالفة/الإنذار
            </button>

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

      </form>
    </section>

  </div>
</div>

<!-- Loading Modal -->
<div id="loadingModal" class="fixed inset-0 z-[9999] overflow-y-auto hidden">
  <div class="absolute inset-0 bg-black/80 backdrop-blur-2xl"></div>
  <div class="relative max-w-sm mx-auto mt-24 px-4">
    <div class="relative overflow-hidden rounded-3xl
                bg-gradient-to-br from-slate-900/95 via-slate-950/95 to-black/95
                border border-emerald-400/25 shadow-2xl shadow-emerald-500/10 p-6 text-center">
      <div class="w-14 h-14 rounded-3xl bg-emerald-500/15 border border-emerald-400/25 text-emerald-200 grid place-items-center mx-auto">
        <i class="fa-solid fa-spinner fa-spin text-2xl"></i>
      </div>
      <div class="mt-3 text-lg font-extrabold text-white">جاري الإنشاء…</div>
      <div class="text-[12px] text-white/55 mt-1">يرجى الانتظار</div>
    </div>
  </div>
</div>

<!-- Success Alert -->
<div id="successAlert" class="fixed top-4 left-1/2 -translate-x-1/2 z-[99999] hidden w-[92vw] max-w-md">
  <div class="bg-emerald-500/10 border border-emerald-400/25 rounded-3xl p-4 shadow-2xl backdrop-blur-xl">
    <div class="flex items-start gap-3">
      <div class="w-10 h-10 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 text-emerald-200 grid place-items-center">
        <i class="fa-solid fa-circle-check"></i>
      </div>
      <div class="flex-1">
        <div class="text-sm font-extrabold text-emerald-100">تم بنجاح!</div>
        <div class="mt-1 text-sm text-emerald-100/90" id="successMessage"></div>
      </div>
    </div>
  </div>
</div>

<!-- Error Alert -->
<div id="errorAlert" class="fixed top-4 left-1/2 -translate-x-1/2 z-[99999] hidden w-[92vw] max-w-md">
  <div class="bg-rose-500/10 border border-rose-400/25 rounded-3xl p-4 shadow-2xl backdrop-blur-xl">
    <div class="flex items-start gap-3">
      <div class="w-10 h-10 rounded-2xl bg-rose-500/15 border border-rose-400/25 text-rose-200 grid place-items-center">
        <i class="fa-solid fa-triangle-exclamation"></i>
      </div>
      <div class="flex-1">
        <div class="text-sm font-extrabold text-rose-100">حدث خطأ</div>
        <div class="mt-1 text-sm text-rose-100/90" id="errorMessage"></div>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // ========= Slides + Progress =========
    const slides = Array.from(document.querySelectorAll('.slide'));
    let currentStep = 1;
    const totalSteps = slides.length;

    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const submitBtn = document.getElementById('submitBtn');

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

    const stepTitles = {
      1: 'نوع الحدث',
      2: 'تفاصيل الحدث',
      3: 'اختيار الأعضاء',
      4: 'المرفقات والخصوصية'
    };

    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 = Math.round(((currentStep - 1) / (totalSteps - 1)) * 100);
      progressBar.style.width = pct + '%';
      percentLabel.textContent = pct + '%';
      stepLabel.textContent = `الخطوة ${currentStep}/${totalSteps} — ${stepTitles[currentStep] || ''}`;

      prevBtn.disabled = currentStep === 1;

      const isLast = currentStep === totalSteps;
      nextBtn.classList.toggle('hidden', isLast);
      submitBtn.classList.toggle('hidden', !isLast);

      stepDots.forEach((b, idx) => {
        const n = idx + 1;
        b.classList.toggle('bg-emerald-500/15', n <= currentStep);
        b.classList.toggle('border-emerald-400/25', n <= currentStep);
        b.classList.toggle('text-emerald-100', n <= currentStep);

        b.classList.toggle('bg-white/5', n > currentStep);
        b.classList.toggle('border-white/10', n > currentStep);
        b.classList.toggle('text-white/70', n > currentStep);
      });
    }

    prevBtn.addEventListener('click', () => showStep(currentStep - 1));
    nextBtn.addEventListener('click', () => showStep(currentStep + 1));

    stepDots.forEach(btn => {
      btn.addEventListener('click', () => {
        const step = Number(btn.dataset.stepJump || 1);
        showStep(step);
      });
    });

    showStep(1);

    // ========= Type logic (points) =========
    const typeWarning = document.getElementById('typeWarning');
    const typeViolation = document.getElementById('typeViolation');
    const pointsSection = document.getElementById('pointsSection');

    function updateTypeDisplay() {
        if (typeViolation && typeViolation.checked) {
            pointsSection.classList.remove('hidden');
            submitBtn.innerHTML = `<i class="fa-solid fa-circle-check ms-2 text-[12px]"></i> إنشاء مخالفة`;
        } else if (typeWarning && typeWarning.checked) {
            pointsSection.classList.add('hidden');
            const pointsInput = document.getElementById('points_deducted');
            if (pointsInput) pointsInput.value = '0';
            submitBtn.innerHTML = `<i class="fa-solid fa-circle-check ms-2 text-[12px]"></i> إنشاء إنذار`;
        }
    }
    if (typeWarning) typeWarning.addEventListener('change', updateTypeDisplay);
    if (typeViolation) typeViolation.addEventListener('change', updateTypeDisplay);

    // ========= search users =========
    const userSearch = document.getElementById('userSearch');
    const userItems = document.querySelectorAll('.user-item');

    if (userSearch) {
        userSearch.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            userItems.forEach(item => {
                const name = item.dataset.name || '';
                const email = item.dataset.email || '';
                item.style.display = (name.includes(searchTerm) || email.includes(searchTerm)) ? 'flex' : 'none';
            });
        });
    }

    // ========= selected count =========
    const checkboxes = document.querySelectorAll('input[name="members[]"]');
    const selectedCount = document.getElementById('selectedCount');

    function updateSelectedCount() {
        if (selectedCount) {
            const selected = document.querySelectorAll('input[name="members[]"]:checked').length;
            selectedCount.textContent = selected;
        }
    }
    checkboxes.forEach(checkbox => checkbox.addEventListener('change', updateSelectedCount));
    updateSelectedCount();

    // ========= attachment name =========
    const attachmentInput = document.getElementById('attachment');
    const fileName = document.getElementById('fileName');

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

    // ========= submit (same logic, improved error clear) =========
    const violationForm = document.getElementById('violationForm');
    if (violationForm) {
        violationForm.addEventListener('submit', function(e) {
            e.preventDefault();

            // إخفاء رسائل الخطأ السابقة (فقط حقولنا)
            ['type','title','description','members','points_deducted','attachment'].forEach(f=>{
              const el = document.getElementById(f + '-error');
              if (el) el.classList.add('hidden');
            });

            const formData = new FormData(this);
            const loadingModal = document.getElementById('loadingModal');

            if (submitBtn) submitBtn.disabled = true;
            if (loadingModal) loadingModal.classList.remove('hidden');

            fetch('{{ route("superadmin.violations.store") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                    'Accept': 'application/json'
                },
                body: formData
            })
            .then(r => r.json())
            .then(data => {
                if (loadingModal) loadingModal.classList.add('hidden');

                if (data.success) {
                    showSuccessAlert(data.message);
                    setTimeout(() => window.location.href = '{{ route("superadmin.violations.index") }}', 1200);
                } else {
                    showErrorAlert(data.message || 'حدث خطأ أثناء إنشاء المخالفة/الإنذار');

                    if (data.errors) {
                        Object.keys(data.errors).forEach(field => {
                            const errorEl = document.getElementById(field + '-error');
                            if (errorEl) {
                                errorEl.textContent = data.errors[field][0];
                                errorEl.classList.remove('hidden');

                                // لو الخطأ بمرحلة معينة، ودّه عليها
                                const stepMap = { type:1, title:2, description:2, points_deducted:2, members:3, attachment:4, show_creator_name:4 };
                                if (stepMap[field]) showStep(stepMap[field]);
                            }
                        });
                    }
                }
            })
            .catch(err => {
                console.error('Error:', err);
                if (loadingModal) loadingModal.classList.add('hidden');
                showErrorAlert('تعذر الاتصال بالخادم، يرجى المحاولة مرة أخرى');
            })
            .finally(() => {
                if (submitBtn) submitBtn.disabled = false;
            });
        });
    }

    function showSuccessAlert(message) {
        const successAlert = document.getElementById('successAlert');
        const successMessage = document.getElementById('successMessage');
        if (successMessage) successMessage.textContent = message;
        if (successAlert) {
            successAlert.classList.remove('hidden');
            setTimeout(() => successAlert.classList.add('hidden'), 4500);
        }
    }

    function showErrorAlert(message) {
        const errorAlert = document.getElementById('errorAlert');
        const errorMessage = document.getElementById('errorMessage');
        if (errorMessage) errorMessage.textContent = message;
        if (errorAlert) {
            errorAlert.classList.remove('hidden');
            setTimeout(() => errorAlert.classList.add('hidden'), 5200);
        }
    }
});
</script>
@endsection