@extends('layouts.superadmin')
@section('title', '📣 رسالة القائد — الإدارة العليا')
@section('page-title', '📣 رسالة القائد — الإدارة العليا')

@section('content')
<div class="space-y-6">
  <div class="bg-white/90 dark:bg-gray-800 rounded-2xl shadow-lg p-6 border border-white/10">
    <h2 class="text-2xl font-bold text-yellow-600 mb-4 flex items-center gap-2">
      <i class="fa-solid fa-crown text-yellow-500"></i> لوحة إدارة رسالة القائد
    </h2>
    <p class="text-gray-600 dark:text-gray-300 mb-6">
      من هنا يمكن للقائد نشر أو تعديل رسالة واحدة لكل فئة من فئات النظام
      (<b>الأعضاء</b>، <b>المشرفين</b>، <b>الإداريين</b>، <b>المستشارين</b>).
    </p>

    {{-- نموذج إنشاء / تعديل --}}
    <form action="{{ route('superadmin.leader-messages.store') }}" method="POST" class="space-y-4">
      @csrf

      <div>
        <label class="block text-sm text-gray-600 dark:text-gray-300 mb-1">عنوان الرسالة</label>
        <input type="text" name="title" class="w-full rounded-lg border-gray-300 dark:bg-gray-700 dark:text-white" placeholder="عنوان ملهم..." required>
      </div>

      <div>
        <label class="block text-sm text-gray-600 dark:text-gray-300 mb-1">محتوى الرسالة</label>
        <textarea name="body" rows="5" class="w-full rounded-lg border-gray-300 dark:bg-gray-700 dark:text-white" placeholder="اكتب رسالة القائد هنا..." required></textarea>
      </div>

      <div>
        <label class="block text-sm text-gray-600 dark:text-gray-300 mb-2">اختر الفئات المستهدفة</label>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
          @foreach ($groups as $group)
            <label class="flex items-center gap-2">
              <input type="checkbox" name="groups[]" value="{{ $group }}" class="rounded text-yellow-500 focus:ring-yellow-500">
              <span class="capitalize">{{ ucfirst($group) }}</span>
            </label>
          @endforeach
        </div>
      </div>

      <div class="flex flex-col sm:flex-row gap-4">
        <label class="flex items-center gap-2">
          <input type="checkbox" name="send_now" value="1" class="rounded text-emerald-600 focus:ring-emerald-600">
          <span class="text-sm text-gray-700 dark:text-gray-200">إرسال فوري (الآن)</span>
        </label>
        <div class="flex-1">
          <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-lg border-gray-300 dark:bg-gray-700 dark:text-white">
        </div>
      </div>

      <div class="pt-4">
        <button type="submit" class="bg-yellow-600 hover:bg-yellow-700 text-white px-5 py-2.5 rounded-lg font-semibold">
          <i class="fa-solid fa-paper-plane"></i> حفظ الرسالة
        </button>
      </div>
    </form>
  </div>

  {{-- عرض آخر الرسائل النشطة لكل مجموعة --}}
  <div class="bg-white/90 dark:bg-gray-800 rounded-2xl shadow-lg p-6 border border-white/10">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">
      📜 آخر الرسائل المنشورة
    </h3>

    @forelse ($latest as $group => $msgs)
      <div class="border border-gray-200 dark:border-gray-700 rounded-xl mb-4 p-4">
        <div class="flex items-center justify-between">
          <h4 class="font-bold text-yellow-700 dark:text-yellow-400">{{ ucfirst($group) }}</h4>
          <span class="text-xs text-gray-400">عدد: {{ $msgs->count() }}</span>
        </div>
        <div class="mt-3 space-y-2">
          @foreach ($msgs as $msg)
            <div class="p-3 rounded-lg bg-yellow-50 dark:bg-yellow-900/20">
              <div class="font-semibold text-yellow-800 dark:text-yellow-300">{{ $msg->title }}</div>
              <div class="text-sm text-gray-700 dark:text-gray-200">{{ $msg->body }}</div>
              <div class="text-xs text-gray-400 mt-1">⏰ {{ \Carbon\Carbon::parse($msg->publish_at)->diffForHumans() }}</div>
            </div>
          @endforeach
        </div>
      </div>
    @empty
      <p class="text-gray-500 text-sm">لا توجد رسائل منشورة بعد.</p>
    @endforelse
  </div>
</div>
@endsection