@extends('layouts.superadmin')

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

@push('styles')
<style>
  /* قصّ النص في الأرشيف على سطرين (يتوسّع عند الطلب) — يعمل على أغلب المتصفحات */
  .clamp-2 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .clamp-6 {
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .btn-mobile {
    width: 100%;
  }
  @media (min-width: 640px) {
    .btn-mobile { width: auto; }
  }
</style>
@endpush

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

  {{-- تنبيهات --}}
  @if(session('success'))
    <div class="bg-emerald-50 text-emerald-800 p-3 rounded border border-emerald-300">{{ session('success') }}</div>
  @endif
  @if(session('error'))
    <div class="bg-rose-50 text-rose-800 p-3 rounded border border-rose-300">{{ session('error') }}</div>
  @endif

  {{-- معلومات سريعة + شرح موجه (مناسب للهاتف) --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 md:p-5 border border-gray-100 dark:border-gray-700">
    <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
      <div class="min-w-0">
        <h3 class="text-lg md:text-xl font-extrabold text-gray-900 dark:text-white flex items-center gap-2">
          <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600/10 text-blue-600"><i class="fa-solid fa-bullhorn"></i></span>
          ما هي «رسائل الإدارة»؟
        </h3>
        <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
          تُعرَض هذه الرسائل في واجهة المستخدمين المستهدفين داخل الداشبورد مباشرة.
          اختر <strong>الفئة المستهدفة</strong> بدقّة: 
          <span class="px-2 py-0.5 bg-gray-100 dark:bg-gray-700 rounded">جميع الأعضاء</span>،
          <span class="px-2 py-0.5 bg-green-100 text-green-800 rounded">الأعضاء الرسميّون</span>،
          <span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded">أعضاء بيتا</span>،
          <span class="px-2 py-0.5 bg-blue-100 text-blue-800 rounded">المشرفون</span>،
          <span class="px-2 py-0.5 bg-purple-100 text-purple-800 rounded">المستشارون</span>،
          أو <span class="px-2 py-0.5 bg-rose-100 text-rose-800 rounded">الإداريّون</span>.
        </p>
        <div class="mt-2 text-xs text-gray-600 dark:text-gray-400 space-y-1">
          <div>• <strong>الدقّة اللغوية مهمّة:</strong> راجع الإملاء وعلامات الترقيم قبل الإرسال، وتجنّب الأخطاء الشائعة.</div>
          <div>• <strong>الاختصار والوضوح:</strong> اجعل الجملة قصيرة ومباشرة، وتجنّب الحشو. الرسالة تظهر للجمهور المستهدَف فور النشر.</div>
          <div>• <strong>الأولوية والتثبيت:</strong> حدِّد الأولوية (عادية/عالية/عاجلة) ويمكنك تثبيت الرسالة لتظهر أعلى الداشبورد.</div>
        </div>
      </div>
      <div class="flex items-center gap-2">
        <a href="{{ route('dashboard.admin-messages.feed') }}"
           class="btn-mobile px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm">
          مشاهدة كما يراها المستخدم
        </a>
      </div>
    </div>
  </div>

  {{-- إنشاء رسالة (محسّن للموبايل) --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 md:p-6 border border-gray-100 dark:border-gray-700">
    <h3 class="font-bold mb-4 flex items-center gap-2">
      ✉️ إنشاء رسالة جديدة
      <span class="text-xs text-gray-500">(تظهر بحسب الفئة المستهدفة في الداشبورد)</span>
    </h3>

    @if($errors->any())
      <div class="bg-rose-50 text-rose-700 border border-rose-300 p-3 rounded text-sm mb-3">
        <ul class="list-disc list-inside">
          @foreach($errors->all() as $e) <li>{{ $e }}</li> @endforeach
        </ul>
      </div>
    @endif

    <form method="POST" action="{{ route('superadmin.admin-messages.store') }}"
          class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3" novalidate>
      @csrf

      {{-- العنوان --}}
      <div class="sm:col-span-2">
        <label class="block text-sm mb-1">العنوان <span class="text-rose-600">*</span></label>
        <input type="text" name="title" required maxlength="200" id="msg-title"
               placeholder="اكتب عنوانًا دقيقًا وواضحًا"
               class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700
                      text-gray-900 dark:text-white px-3 py-2.5" autocomplete="off">
        <div class="mt-1 text-[11px] text-gray-500">
          أقصى 200 حرف. <span id="title-count">0</span>/200
        </div>
      </div>

      {{-- الفئة --}}
      <div>
        <label class="block text-sm mb-1">الفئة المستهدفة <span class="text-rose-600">*</span></label>
        <select name="segment" required
                class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700
                       text-gray-900 dark:text-white px-3 py-2.5">
          <option value="all">جميع الأعضاء</option>
          <option value="official">الأعضاء الرسميون</option>
          <option value="beta">أعضاء بيتا</option>
          <option value="moderators">المشرفون</option>
          <option value="advisors">المستشارون</option>
          <option value="admins">الإداريون</option>
        </select>
        <div class="mt-1 text-[11px] text-gray-500">اختر الجمهور الذي ستظهر له الرسالة على الداشبورد.</div>
      </div>

      {{-- الأولوية --}}
      <div>
        <label class="block text-sm mb-1">الأولوية</label>
        <select name="priority"
                class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700
                       text-gray-900 dark:text-white px-3 py-2.5">
          <option value="normal">عادية</option>
          <option value="high">عالية</option>
          <option value="urgent">عاجلة</option>
        </select>
        <div class="mt-1 text-[11px] text-gray-500">اختر «عاجلة» فقط عند الضرورة القصوى.</div>
      </div>

      {{-- المحتوى --}}
      <div class="sm:col-span-2 lg:col-span-4">
        <label class="block text-sm mb-1">المحتوى <span class="text-rose-600">*</span></label>
        <textarea name="body" id="msg-body" rows="4" required maxlength="5000"
                  placeholder="اكتب رسالة مختصرة وواضحة، مع مراعاة الإملاء وعلامات الترقيم."
                  class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700
                         text-gray-900 dark:text-white px-3 py-2.5"></textarea>
        <div class="mt-1 text-[11px] text-gray-500">
          أقصى 5000 حرف. <span id="body-count">0</span>/5000 — <strong>تذكير:</strong> دقّة الإملاء والنحو مهمة لظهور الرسالة بمظهر مهني.
        </div>
      </div>

      {{-- انتهاء + خيارات --}}
      <div>
        <label class="block text-sm mb-1">تاريخ انتهاء (اختياري)</label>
        <input type="datetime-local" name="expires_at"
               class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700
                      text-gray-900 dark:text-white px-3 py-2.5">
        <div class="mt-1 text-[11px] text-gray-500">بعد هذا التاريخ لن تظهر الرسالة للمستخدمين.</div>
      </div>

      <div class="flex items-center gap-2">
        <input type="checkbox" name="is_pinned" value="1" id="pin-chk"
               class="rounded border-gray-300 dark:border-gray-600">
        <label for="pin-chk" class="text-sm">تثبيت أعلى الداشبورد</label>
      </div>

      <div class="flex items-center gap-2">
        <input type="checkbox" name="publish_now" value="1" id="pub-chk"
               class="rounded border-gray-300 dark:border-gray-600">
        <label for="pub-chk" class="text-sm">نشر الآن</label>
      </div>

      <div class="sm:col-span-2 lg:col-span-4 flex flex-col sm:flex-row gap-2 justify-end">
        <button class="btn-mobile px-5 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-semibold">
          🚀 حفظ
        </button>
      </div>
    </form>
  </div>

  {{-- الأرشيف (مناسب للهواتف: قصّ النص + زر "عرض المزيد") --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 md:p-6 border border-gray-100 dark:border-gray-700">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-3">
      <h3 class="font-bold">📜 الأرشيف</h3>
      <form method="GET" class="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
        <select name="segment" class="rounded bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-sm">
          <option value="">كل الفئات</option>
          <option value="all"        @selected(request('segment')==='all')>الكل</option>
          <option value="official"   @selected(request('segment')==='official')>رسمي</option>
          <option value="beta"       @selected(request('segment')==='beta')>بيتا</option>
          <option value="moderators" @selected(request('segment')==='moderators')>مشرفون</option>
          <option value="advisors"   @selected(request('segment')==='advisors')>مستشارون</option>
          <option value="admins"     @selected(request('segment')==='admins')>الإداريون</option>
        </select>
        <div class="flex gap-2">
          <input type="text" name="search" value="{{ request('search') }}" placeholder="بحث…"
                 class="rounded bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-sm px-3 py-1.5 w-full sm:w-64">
          <button class="px-3 py-1.5 rounded bg-primary-600 text-white">بحث</button>
        </div>
      </form>
    </div>

    <div class="divide-y divide-gray-200 dark:divide-gray-700">
      @forelse($messages as $m)
      <div class="py-3">
        <div class="flex items-start justify-between gap-3">
          <div class="min-w-0">
            <div class="font-bold text-gray-900 dark:text-white truncate">{{ $m->title }}</div>
            <div class="text-gray-700 dark:text-gray-300 clamp-2" data-clamp="2">
              {{ $m->body }}
            </div>
            <div class="text-[11px] text-gray-500 mt-1 flex flex-wrap gap-2">
              <span>الفئة: {{ $m->segment }}</span>
              <span>• الأولوية: {{ $m->priority }}</span>
              <span>• الحالة: {{ $m->published_at ? 'منشورة' : 'مسودة' }}</span>
              @if($m->expires_at)
                <span>• ينتهي: {{ \Carbon\Carbon::parse($m->expires_at)->format('Y-m-d H:i') }}</span>
              @endif
            </div>
          </div>
          <div class="shrink-0 flex flex-col gap-2">
            <form method="POST" action="{{ route('superadmin.admin-messages.publish',$m->id) }}">@csrf
              <button class="btn-mobile px-3 py-1.5 rounded {{ $m->published_at ? 'bg-amber-600 text-white' : 'bg-emerald-600 text-white' }}">
                {{ $m->published_at ? 'إلغاء النشر' : 'نشر' }}
              </button>
            </form>
            <form method="POST" action="{{ route('superadmin.admin-messages.pin',$m->id) }}">@csrf
              <button class="btn-mobile px-3 py-1.5 rounded {{ $m->is_pinned ? 'bg-gray-500 text-white' : 'bg-violet-600 text-white' }}">
                {{ $m->is_pinned ? 'إلغاء التثبيت' : 'تثبيت' }}
              </button>
            </form>
            <form method="POST" action="{{ route('superadmin.admin-messages.destroy',$m->id) }}" onsubmit="return confirm('حذف الرسالة؟')">
              @csrf @method('DELETE')
              <button class="btn-mobile px-3 py-1.5 rounded bg-rose-600 text-white">حذف</button>
            </form>
          </div>
        </div>

        {{-- زر عرض المزيد للموبايل --}}
        <button type="button" class="mt-2 text-xs text-blue-600 hover:underline show-more">عرض المزيد</button>
      </div>
      @empty
      <div class="text-gray-500 text-sm text-center py-6">لا توجد رسائل بعد.</div>
      @endforelse
    </div>

    @if($messages->hasPages())
    <div class="mt-4">
      {{ $messages->withQueryString()->links() }}
    </div>
    @endif
  </div>
</div>
@endsection

@push('scripts')
<script>
// عدّادات الأحرف
(function(){
  const title = document.getElementById('msg-title');
  const body  = document.getElementById('msg-body');
  if (title) title.addEventListener('input', ()=> {
    document.getElementById('title-count').textContent = title.value.length;
  });
  if (body) body.addEventListener('input', ()=>{
    document.getElementById('body-count').textContent = body.value.length;
  });
})();

// فتح/إغلاق النص في الأرشيف (مفيد للموبايل)
document.querySelectorAll('.show-more').forEach(btn=>{
  btn.addEventListener('click', function(){
    const wrap = this.closest('.py-3').querySelector('[data-clamp]');
    if(!wrap) return;
    if (wrap.classList.contains('clamp-2')) {
      wrap.classList.remove('clamp-2'); wrap.classList.add('clamp-6');
      this.textContent = 'إظهار أقل';
    } else if (wrap.classList.contains('clamp-6')) {
      wrap.classList.remove('clamp-6'); wrap.classList.add('clamp-2');
      this.textContent = 'عرض المزيد';
    } else {
      // fallback
      wrap.classList.add('clamp-6'); this.textContent = 'إظهار أقل';
    }
  });
});
</script>
@endpush