{{-- resources/views/superadmin/falcon-roLA-notes/index.blade.php --}}
@extends('layouts.superadmin')

@section('title','ملاحظات الصقر ورولا — القسم العام')
@section('page-title','📝 ملاحظات الصقر ورولا — القسم العام')

@section('content')
<div class="space-y-6">

  {{-- Hero / Header --}}
  <div class="relative overflow-hidden rounded-2xl bg-gradient-to-r from-purple-700 via-indigo-700 to-blue-700 text-white p-6">
    <div class="absolute inset-0 opacity-20 pointer-events-none">
      <svg class="w-full h-full" viewBox="0 0 800 400" fill="none">
        <defs>
          <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#C084FC"/>
            <stop offset="100%" stop-color="#60A5FA"/>
          </linearGradient>
        </defs>
        <circle cx="120" cy="100" r="160" fill="url(#g1)" />
        <circle cx="700" cy="260" r="220" fill="url(#g1)" opacity="0.5" />
      </svg>
    </div>
    <div class="relative flex items-start gap-4">
      <div class="flex items-center justify-center w-14 h-14 rounded-2xl bg-white/15 ring-1 ring-white/20">
        <svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
             stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round"
                d="M11.35 3.836c.454-.293 1.05-.293 1.503 0l6.287 4.055c.29.187.46.507.46.855v6.035a2.25 2.25 0 01-1.12 1.95l-5.17 2.914a2.25 2.25 0 01-2.24 0l-5.17-2.914A2.25 2.25 0 014 14.826V8.746c0-.348.171-.668.46-.855l6.89-4.055z"/>
          <path stroke-linecap="round" stroke-linejoin="round"
                d="M12 7v10m-3-5h6"/>
        </svg>
      </div>
      <div>
        <h1 class="text-2xl md:text-3xl font-extrabold">ملاحظات الصقر ورولا — القسم العام</h1>
        <p class="text-white/80 mt-1 leading-relaxed">
          هنا تُوثّق كل الملاحظات والتوجيهات العامة للفريق. استخدم هذا القسم لتسجيل النقاط المهمة، المتابعة، رسائل الدعم،
          والتنبيهات العامة. يمكن للقيادة فقط إضافة وحذف الملاحظات.
        </p>
        <div class="mt-3 flex items-center gap-3 text-sm text-white/80">
          <span class="inline-flex items-center gap-1 bg-white/10 px-3 py-1 rounded-full">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path
                d="M2 10a8 8 0 1116 0A8 8 0 012 10zm9 0a1 1 0 10-2 0v4a1 1 0 102 0v-4zm-1-6a1 1 0 100 2 1 1 0 000-2z"/></svg>
            عام
          </span>
          <span>تاريخ اليوم: {{ now()->translatedFormat('l d F Y') }}</span>
        </div>
      </div>
    </div>
  </div>

  {{-- Alerts --}}
  @if (session('success'))
    <div class="rounded-xl border border-emerald-300 bg-emerald-50 p-4 text-emerald-800">
      {{ session('success') }}
    </div>
  @endif

  {{-- إضافة ملاحظة جديدة --}}
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-slate-900 via-indigo-900 to-slate-950 text-white shadow-xl">
  {{-- هالة خلفية خفيفة --}}
  <div class="pointer-events-none absolute inset-0 opacity-40">
    <div class="absolute -top-24 -left-10 h-40 w-40 rounded-full bg-indigo-500/40 blur-3xl"></div>
    <div class="absolute -bottom-24 -right-10 h-40 w-40 rounded-full bg-cyan-500/30 blur-3xl"></div>
  </div>

  <div class="relative p-6 space-y-5">
    {{-- الهيدر --}}
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
      <div class="flex items-start gap-3">
        <div class="flex items-center justify-center w-11 h-11 rounded-2xl bg-white/10 border border-white/20">
          <i class="fa-solid fa-pen-to-square text-xl"></i>
        </div>
        <div>
          <h3 class="text-lg md:text-xl font-extrabold flex items-center gap-2">
            ✍️ إضافة ملاحظة جديدة — <span class="text-sm md:text-base text-emerald-300">بصياغة واضحة ورسمية</span>
          </h3>
          <p class="mt-1 text-xs md:text-sm text-white/75 leading-relaxed">
            هذه الملاحظات تُستخدم لاتخاذ قرارات حقيقية في <strong class="text-emerald-300 font-semibold">ProActive</strong>.
            لذلك، يُرجى:
            <span class="text-amber-300 font-semibold">الكتابة بلغة سليمة، بدون أخطاء إملائية أو تكرار</span>،
            مع توضيح الحدث أو العذر بدقة.
          </p>
        </div>
      </div>

      {{-- صندوق تنبيه صغير عن أهمية الكتابة --}}
      <div class="bg-black/30 border border-white/15 rounded-2xl px-4 py-3 text-xs md:text-sm space-y-1 max-w-md">
        <div class="flex items-center gap-2 text-amber-200">
          <i class="fa-solid fa-triangle-exclamation text-[13px]"></i>
          <span class="font-semibold">أهمية الكتابة السليمة</span>
        </div>
        <ul class="list-disc list-inside space-y-0.5 text-white/80">
          <li>تجنّب الأخطاء الإملائية والاختصارات الغامضة.</li>
          <li>اكتب الفكرة كاملة بدون غموض أو كلمات عامية مبهمة.</li>
          <li>لا تكرّر نفس الملاحظة أكثر من مرة، حدّث القديمة عند الحاجة.</li>
        </ul>
      </div>
    </div>

    <form method="POST" action="{{ route('superadmin.falconRolaNotes.store') }}" class="space-y-4">
      @csrf

      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        {{-- عنوان الملاحظة --}}
        <div class="md:col-span-2">
          <div class="flex items-center justify-between mb-1">
            <label class="block text-xs font-semibold text-white/80">
              عنوان الملاحظة
            </label>
            <span class="inline-flex items-center gap-1 rounded-full bg-amber-500/15 text-amber-200 text-[11px] px-2 py-0.5">
              <i class="fa-regular fa-calendar-days text-[11px]"></i>
              <span>من المهم جدًا كتابة <span class="font-bold">تاريخ الحدث / العذر</span> مع الساعة إن وُجدت</span>
            </span>
          </div>
          <input
            type="text"
            name="title"
            class="w-full rounded-lg border border-white/15 bg-white/5 text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:border-transparent"
            placeholder="مثال: 2025-11-08 — تأخر عن فعالية ProActive بلس الساعة 20:30 بسبب ظرف عائلي طارئ"
            value="{{ old('title') }}"
            required
          >
          <p class="mt-1 text-[11px] text-white/60">
            اكتب العنوان بشكل واضح: <span class="text-emerald-300">اليوم / التاريخ / نوع الحدث أو العذر / إن أمكن الساعة</span>.
          </p>
          @error('title')
            <p class="text-rose-300 text-xs mt-1">{{ $message }}</p>
          @enderror
        </div>

        {{-- التصنيف --}}
        <div>
          <label class="block text-xs font-semibold text-white/80 mb-1">
            التصنيف (اختياري)
          </label>
          <select
            name="category"
            class="w-full rounded-lg border border-white/15 bg-white/5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:border-transparent">
            <option value="">— دون تصنيف —</option>
            <option value="توجيه"  @selected(old('category') === 'توجيه')>توجيه</option>
            <option value="تنبيه"  @selected(old('category') === 'تنبيه')>تنبيه</option>
            <option value="متابعة" @selected(old('category') === 'متابعة')>متابعة</option>
            <option value="شكر"    @selected(old('category') === 'شكر')>شكر/تحفيز</option>
          </select>
          <p class="mt-1 text-[11px] text-white/55">
            يساعد التصنيف في فرز الملاحظات لاحقًا (تنبيه، متابعة، شكر...).
          </p>
        </div>
      </div>

      {{-- نص الملاحظة --}}
      <div>
        <div class="flex items-center justify-between mb-1">
          <label class="block text-xs font-semibold text-white/80">
            نص الملاحظة
          </label>
          <span class="text-[11px] text-white/60">
            حاول أن تكون <span class="text-emerald-300 font-semibold">مباشر، محترم، ومنظم</span> في الشرح.
          </span>
        </div>
        <textarea
          name="body"
          rows="5"
          class="w-full rounded-lg border border-white/15 bg-white/5 text-sm text-white placeholder:text-white/35 focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:border-transparent"
          placeholder="اكتب تفاصيل الملاحظة هنا، مع ذكر:
- الخلفية / ما الذي حدث؟
- التاريخ والوقت بدقة إن أمكن
- أسماء الأعضاء أو الفعالية المرتبطة
- أي معلومات إضافية تساعد البرنامج على فهم السياق جيدًا"
          required>{{ old('body') }}</textarea>
        @error('body')
          <p class="text-rose-300 text-xs mt-1">{{ $message }}</p>
        @enderror
      </div>

      {{-- تنبيه أخير قبل الإرسال --}}
      <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 text-[11px] md:text-xs text-white/70">
        <div class="flex items-start gap-2">
          <i class="fa-solid fa-circle-info mt-0.5 text-cyan-300 text-[13px]"></i>
          <p>
            تذكّر: <span class="text-emerald-300 font-semibold">الملاحظات غير الواضحة، المكرّرة، أو المليئة بالأخطاء</span>
            قد يتم رفضها من قبل البرنامج تلقائيًا. دقّتك في الكتابة تساعدنا على اتخاذ قرارات عادلة وواضحة.
          </p>
        </div>

        <div class="flex items-center justify-end gap-2">
          <button
            type="submit"
            class="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-purple-500 via-indigo-500 to-cyan-500 text-white px-5 py-2.5 text-sm font-semibold shadow-lg shadow-indigo-500/30 hover:brightness-110 active:scale-[0.98] transition">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path d="M17.707 10.293l-7-7A1 1 0 009 3H5a2 2 0 00-2 2v4a1 1 0 001 1h4v4a1 1 0 001 1h4a2 2 0 002-2v-3a1 1 0 00-.293-.707z"/>
            </svg>
            <span>حفظ الملاحظة وإرسالها للبرنامج</span>
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

{{-- مكتب الاستعلامات --}}
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-800 dark:to-gray-900 border border-indigo-200/40 dark:border-indigo-700/40 rounded-2xl p-6 shadow-sm">
  <div class="flex items-start gap-4">
    <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-indigo-600 text-white shadow">
      <i class="fa-solid fa-circle-info text-xl"></i>
    </div>
    <div class="space-y-3">
      <h3 class="text-lg font-bold text-indigo-900 dark:text-indigo-200">📘 مكتب الاستعلامات — حالة الرد من البرنامج</h3>

      <div class="space-y-2 text-sm leading-relaxed text-gray-700 dark:text-gray-300">
        <div class="flex items-start gap-2">
          <span class="font-semibold text-yellow-600">🕓 قيد المراجعة:</span>
          <span>قيد المراجعة من قبل البرنامج عبر الذكاء المختص بهذا الشيء، ويتم مراجعة وأخذ ملاحظاتكم بعين الاعتبار في أوقات مستقبلية وفق محتواها.</span>
        </div>

        <div class="flex items-start gap-2">
          <span class="font-semibold text-rose-600">❌ مرفوض:</span>
          <span>تم رفض الملاحظة لأسباب يتم عرضها، وقد تتضمن أخطاءً إملائية أو تنسيقية أو محتوى غير منطقي من وجهة نظر البرنامج. تأكد من الكتابة السليمة وتجنّب التكرار. <strong>من المهم جدًا وضع تاريخ الحدث في العنوان.</strong></span>
        </div>

        <div class="flex items-start gap-2">
          <span class="font-semibold text-emerald-600">✅ تم القبول:</span>
          <span>تم قبول الملاحظة من قبل البرنامج، وسيتم أخذها بعين الاعتبار في تطوير أو إنشاء فعاليات <strong>ProActive</strong> العادية أو <strong>Plus</strong> مستقبلاً، بعد التحقق الكامل من مضمونها.</span>
        </div>
      </div>
    </div>
  </div>
</div>

  {{-- قائمة الملاحظات --}}
  <div class="bg-white dark:bg-gray-800 rounded-2xl shadow p-0">
    <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
      <h3 class="text-lg font-bold text-gray-800 dark:text-white">📚 الملاحظات المسجّلة</h3>
      <span class="text-sm text-gray-500 dark:text-gray-400">الإجمالي: {{ $notes->total() }}</span>
    </div>

    @if ($notes->count())
      <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700">
        @foreach ($notes as $note)
          <li class="p-6 flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
            <div class="flex-1">
              <div class="flex items-center gap-2 flex-wrap">
                <h4 class="text-base font-semibold text-gray-900 dark:text-white">{{ $note->title }}</h4>
                @if($note->category)
                  <span class="px-2 py-0.5 text-xs rounded-full bg-indigo-100 text-indigo-700 dark:bg-indigo-800 dark:text-indigo-200">{{ $note->category }}</span>
                @endif
              </div>
              <p class="mt-2 text-gray-700 dark:text-gray-300 leading-relaxed">
                {{ $note->body }}
              </p>
              <div class="mt-3 text-sm text-gray-500 dark:text-gray-400 flex items-center gap-3">
                <span class="inline-flex items-center gap-1">
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path
                      d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v8a2 2 0 002 2h2.586l1.707 1.707a1 1 0 001.414 0L11.414 16H14a2 2 0 002-2V5a2 2 0 00-2-2h-2.586L8.293 1.293a1 1 0 00-1.414 0L5.172 3H4z"/></svg>
                  أضيفت {{ \Carbon\Carbon::parse($note->created_at)->diffForHumans() }}
                </span>
                @if($note->created_by)
                  <span class="inline-flex items-center gap-1">
                    <svg class="w-4 h-4 text-sky-500" fill="currentColor" viewBox="0 0 20 20">
                      <path d="M10 3a1 1 0 00-1 1v1H5a1 1 0 00-1 1v1h12V5a1 1 0 00-1-1h-4V4a1 1 0 10-2 0zM4 9h12v6H4V9z"/>
                    </svg>
                    بواسطة: {{ optional(\App\Models\User::find($note->created_by))->name ?? 'الإدارة' }}
                  </span>
                @endif
              </div>
            </div>
{{-- حالة البرنامج --}}
<div class="mt-3">
  @if($note->program_status === 'pending')
    <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-yellow-50 text-yellow-700 border border-yellow-200">
      <i class="fa-solid fa-hourglass-half"></i>
      <span>قيد المراجعة من قبل البرنامج</span>
    </div>
  @elseif($note->program_status === 'approved')
    <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-emerald-50 text-emerald-700 border border-emerald-200">
      <i class="fa-solid fa-circle-check"></i>
      <span>تم قبول الملاحظة — سيتم أخذها بعين الاعتبار من قبل البرنامج</span>
    </div>
  @elseif($note->program_status === 'rejected')
    <div class="inline-flex flex-col gap-1 px-3 py-2 rounded-lg bg-rose-50 text-rose-700 border border-rose-200">
      <div class="flex items-center gap-2">
        <i class="fa-solid fa-circle-xmark"></i>
        <span>تم رفض الملاحظة من قبل البرنامج</span>
      </div>
      @if($note->rejection_reason)
        <p class="text-xs text-rose-600 mt-1">🔸 السبب: {{ $note->rejection_reason }}</p>
      @endif
    </div>
  @endif
</div>
            {{-- إجراءات --}}
          <!--  <div class="flex items-center gap-2 mt-2 md:mt-0">
              <form action="{{ route('superadmin.falconRolaNotes.destroy', $note->id) }}" method="POST"
                    onsubmit="return confirm('هل أنت متأكد من حذف هذه الملاحظة؟');">
                @csrf
                @method('DELETE')
                <button type="submit"
                        class="inline-flex items-center gap-2 rounded-lg bg-rose-600 text-white px-4 py-2 hover:bg-rose-700">
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M6 8a1 1 0 011-1h6a1 1 0 011 1v7a2 2 0 01-2 2H8a2 2 0 01-2-2V8z"/>
                    <path fill-rule="evenodd" d="M4 5a1 1 0 011-1h10a1 1 0 110 2H4a1 1 0 010-2z" clip-rule="evenodd"/>
                  </path>
                </svg>
                  حذف
                </button>
              </form>
            </div>-->
          </li>
        @endforeach
      </ul>

      <div class="px-6 py-4">
        {{ $notes->onEachSide(1)->links() }}
      </div>
    @else
      <div class="p-8 text-center text-gray-500 dark:text-gray-400">
        لا توجد ملاحظات مُسجلة حتى الآن.
      </div>
    @endif
  </div>
</div>
@endsection