@extends('layouts.superadmin')

@section('title','رسائل القائد')
@section('page-title','رسائل القائد — رسالة واحدة فعّالة لكل فئة')

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

  {{-- بطاقة العنوان الجميلة (التي وضعتها) --}}
  <div class="bg-gradient-to-br from-yellow-400 via-yellow-500 to-orange-500 text-white rounded-lg shadow-md p-6 sm:p-8 relative overflow-hidden">
    <div class="absolute inset-0 opacity-10 pointer-events-none">
      <svg class="w-full h-full" fill="currentColor" viewBox="0 0 100 100">
        <path d="M50 5L61.8 38.2L95 38.2L69.1 61.8L80.9 95L50 71.8L19.1 95L30.9 61.8L5 38.2L38.2 38.2L50 5z"/>
      </svg>
    </div>
    <div class="relative z-10">
      <div class="flex items-center gap-3 mb-2">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        <h2 class="text-2xl sm:text-3xl font-extrabold">رسالة القائد</h2>
      </div>
      <p class="text-yellow-50/95 text-sm leading-relaxed">
        رسالة واحدة فعّالة لكل فئة (الأعضاء / المشرفون / الإداريون / المستشارون). يمكنك تبديلها في أي وقت أو جدولتها للنشر لاحقًا.
      </p>
    </div>
  </div>

  {{-- نموذج إنشاء/استبدال --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl p-4 sm:p-6 shadow">
    @if(session('success'))
      <div class="mb-3 rounded-lg bg-emerald-50 border border-emerald-200 text-emerald-700 px-3 py-2 text-sm">{{ session('success') }}</div>
    @endif
    @if ($errors->any())
      <div class="mb-3 rounded-lg bg-rose-50 border border-rose-200 text-rose-700 px-3 py-2 text-sm">
        <ul class="list-disc mr-4">
          @foreach ($errors->all() as $e)<li>{{ $e }}</li>@endforeach
        </ul>
      </div>
    @endif

    <form method="POST" action="{{ route('superadmin.leader-message.store') }}" class="grid grid-cols-1 gap-3">
      @csrf

      <div>
        <label class="block text-sm text-gray-600 dark:text-gray-300 mb-1">العنوان</label>
        <input name="title" required maxlength="200"
               class="w-full rounded border-gray-300 dark:bg-gray-700 dark:text-white" placeholder="عنوان موجز..." />
      </div>

      <div>
        <label class="block text-sm text-gray-600 dark:text-gray-300 mb-1">المحتوى</label>
        <textarea name="body" required rows="4" maxlength="2000"
                  class="w-full rounded border-gray-300 dark:bg-gray-700 dark:text-white" placeholder="نص الرسالة..."></textarea>
      </div>

      <div>
        <label class="block text-sm text-gray-600 dark:text-gray-300 mb-1">الفئات المستهدفة</label>
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
          @php $groups = ['members'=>'الأعضاء','moderators'=>'المشرفون','admins'=>'الإداريون','advisors'=>'المستشارون']; @endphp
          @foreach($groups as $key=>$label)
          <label class="flex items-center gap-2 text-sm">
            <input type="checkbox" name="groups[]" value="{{ $key }}" class="rounded border-gray-300">
            <span>{{ $label }}</span>
          </label>
          @endforeach
        </div>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <div>
          <label class="block text-sm text-gray-600 dark:text-gray-300 mb-1">تاريخ/وقت النشر (اختياري)</label>
          <input type="datetime-local" name="publish_at"
                 class="w-full rounded border-gray-300 dark:bg-gray-700 dark:text-white">
        </div>
        <label class="flex items-center gap-2 mt-6 sm:mt-auto">
          <input type="checkbox" name="send_now" value="1" class="rounded border-gray-300">
          <span class="text-sm text-gray-700 dark:text-gray-300">انشر الآن (يتجاهل التاريخ)</span>
        </label>
      </div>

      <div class="flex justify-end">
        <button class="px-4 py-2 rounded bg-primary-600 text-white hover:bg-primary-700">حفظ وتفعيل</button>
      </div>
    </form>
  </div>

  {{-- الحالي لكل فئة --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl p-4 sm:p-6 shadow">
    <h3 class="font-bold mb-3">الرسائل الفعّالة</h3>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
      @foreach (['members'=>'الأعضاء','moderators'=>'المشرفون','admins'=>'الإداريون','advisors'=>'المستشارون'] as $g=>$label)
        @php $msg = $current[$g] ?? null; @endphp
        <div class="rounded-lg border border-gray-200 dark:border-gray-700 p-3">
          <div class="text-xs text-gray-500 mb-1">{{ $label }}</div>
          @if($msg)
            <div class="font-semibold">{{ $msg->title }}</div>
            <div class="text-xs text-gray-500">{{ optional($msg->publish_at)->format('Y-m-d H:i') ?: 'منشورة الآن' }}</div>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-200 line-clamp-4">{{ $msg->body }}</p>
          @else
            <div class="text-sm text-gray-500">لا توجد رسالة فعّالة.</div>
          @endif
        </div>
      @endforeach
    </div>
  </div>

  {{-- السجلّ المختصر --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl p-4 sm:p-6 shadow">
    <h3 class="font-bold mb-3">آخر العمليات</h3>
    <div class="overflow-x-auto">
      <table class="min-w-full text-sm">
        <thead class="bg-gray-50 dark:bg-gray-900 text-gray-600 dark:text-gray-300">
          <tr>
            <th class="p-2">التاريخ</th>
            <th class="p-2">الفئة</th>
            <th class="p-2">العنوان</th>
            <th class="p-2">حالة</th>
            <th class="p-2">نشر عند</th>
            <th class="p-2">إجراءات</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
          @foreach($history as $row)
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
            <td class="p-2">{{ $row->created_at->format('Y-m-d H:i') }}</td>
            <td class="p-2">{{ ['members'=>'الأعضاء','moderators'=>'المشرفون','admins'=>'الإداريون','advisors'=>'المستشارون'][$row->group_type] }}</td>
            <td class="p-2 font-semibold">{{ $row->title }}</td>
            <td class="p-2">{{ $row->is_active ? 'فعّالة' : 'موقوفة' }}</td>
            <td class="p-2">{{ optional($row->publish_at)->format('Y-m-d H:i') ?: 'الآن' }}</td>
            <td class="p-2">
              <form method="POST" action="{{ route('superadmin.leader-message.toggle',$row->id) }}" class="inline">@csrf
                <button class="px-2 py-1 text-xs rounded bg-emerald-600 text-white hover:bg-emerald-700">
                  {{ $row->is_active ? 'إلغاء' : 'تفعيل' }}
                </button>
              </form>
              <form method="POST" action="{{ route('superadmin.leader-message.destroy',$row->id) }}" class="inline"
                    onsubmit="return confirm('حذف الرسالة؟')">
                @csrf @method('DELETE')
                <button class="px-2 py-1 text-xs rounded bg-rose-600 text-white hover:bg-rose-700">حذف</button>
              </form>
            </td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>

  {{-- توضيح سريع --}}
  <div class="text-xs text-gray-600 dark:text-gray-400">
    ✔️ عند حفظ رسالة لفئة ما، يتم إيقاف أي رسالة قديمة لنفس الفئة تلقائيًا لضمان وجود رسالة واحدة فعّالة فقط.<br>
    ⏱️ عند تحديد “انشر الآن” سيتم تجاهل “تاريخ/وقت النشر” ونشرها فورًا.<br>
    🔎 يمكن قراءة الرسالة الحالية عبر: <code>/api/leader-message/{members|moderators|admins|advisors}</code>.
  </div>

</div>
@endsection