@extends('layouts.superadmin')

@section('title', 'غرفة الصقر — رسائل القائد الإدارية')
@section('page-title', 'غرفة الصقر — رسائل القائد الإدارية')

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

  <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 md:p-8">
    <div class="flex items-start justify-between gap-6">
      <div class="min-w-0">
        <div class="flex items-center gap-3 mb-2">
          <div class="grid h-12 w-12 place-items-center rounded-xl bg-rose-600/10 text-rose-600 dark:text-rose-300">
            <svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l3 5 6 .9-4.3 4.1 1 6-5.4-2.8L7 19l1-6L3 8.9 9 8l3-5z"/></svg>
          </div>
          <h1 class="text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white">غرفة الصقر — رسائل القائد الإدارية</h1>
        </div>
        <p class="text-gray-700 dark:text-gray-300">
          منصة مخصّصة لرسائل القائد الموجّهة للتيم كاملًا أو لفئات منتقاة، مع إبراز الأولويات والمهام العاجلة.
        </p>
      </div>
      <span class="shrink-0 inline-flex items-center gap-2 px-3 py-1.5 text-xs font-semibold rounded-full
                   bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200 border border-amber-200 dark:border-amber-800">
        <span class="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></span> قريبًا
      </span>
    </div>
  </div>

  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-100 dark:border-gray-700">
    <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">صياغة رسالة من القائد</h3>
    <form class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <input disabled type="text" placeholder="عنوان الرسالة القيادية"
             class="rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700
                    text-gray-700 dark:text-white px-3 py-2.5 disabled:opacity-60">
      <select disabled class="rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700
                             text-gray-700 dark:text-white px-3 py-2.5 disabled:opacity-60">
        <option>الجمهور: الجميع / المشرفون / الأعضاء / مجموعة محددة</option>
      </select>
      <textarea disabled rows="5" placeholder="نص الرسالة القيادية…"
                class="md:col-span-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700
                       text-gray-700 dark:text-white px-3 py-2.5 disabled:opacity-60"></textarea>
      <div class="md:col-span-2 grid grid-cols-1 md:grid-cols-3 gap-3">
        <input disabled type="datetime-local"
               class="rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700
                      text-gray-700 dark:text-white px-3 py-2.5 disabled:opacity-60">
        <select disabled class="rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700
                               text-gray-700 dark:text-white px-3 py-2.5 disabled:opacity-60">
          <option>وسيلة التبليغ: إشعار داخلي / بريد / كلاهما</option>
        </select>
        <label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
          <input disabled type="checkbox" class="rounded border-gray-300 dark:border-gray-600 text-rose-600">
          تثبيت الرسالة في لوحة الإعلانات
        </label>
      </div>
      <button disabled class="md:col-span-2 bg-gradient-to-r from-rose-500 to-red-600 text-white rounded-lg py-2.5 font-semibold opacity-60 cursor-not-allowed">
        إرسال (قريبًا)
      </button>
    </form>
  </div>

  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-100 font-semibold">رسائل القائد السابقة (تجريبي)</div>
    <div class="divide-y divide-gray-100 dark:divide-gray-700">
      @for($i=0;$i<6;$i++)
        <div class="grid grid-cols-4 md:grid-cols-6 gap-3 px-4 py-3">
          <div class="h-4 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
          <div class="h-4 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
          <div class="h-4 rounded bg-gray-200 dark:bg-gray-700 animate-pulse hidden md:block"></div>
          <div class="h-4 rounded bg-gray-200 dark:bg-gray-700 animate-pulse hidden md:block"></div>
          <div class="h-8 rounded bg-gray-200 dark:bg-gray-700 animate-pulse col-span-2"></div>
        </div>
      @endfor
    </div>
  </div>

</div>
@endsection