@extends('layouts.superadmin')

@section('title','NotifyHub — قائمة الإشعارات')

@section('content')
@php
    $status = $status ?? '';
    $type   = $type ?? '';
    $q      = $q ?? '';

    $badge = [
        'sent'      => 'border-emerald-400/25 bg-emerald-500/15 text-emerald-200',
        'scheduled' => 'border-sky-400/25 bg-sky-500/15 text-sky-200',
        'draft'     => 'border-slate-400/25 bg-white/10 text-white/80',
        'cancelled' => 'border-rose-400/25 bg-rose-500/15 text-rose-200',
    ];

    $typeMeta = [
        'decision'      => ['t'=>'قرار',     'i'=>'fa-gavel',             'c'=>'emerald'],
        'live'          => ['t'=>'لايف',      'i'=>'fa-tower-broadcast',   'c'=>'fuchsia'],
        'weekly_test'   => ['t'=>'اختبار',    'i'=>'fa-clipboard-check',   'c'=>'amber'],
        'daily_reading' => ['t'=>'قراءة',     'i'=>'fa-book-open-reader',  'c'=>'cyan'],
        'custom'        => ['t'=>'مخصص',      'i'=>'fa-wand-magic-sparkles','c'=>'violet'],
    ];

    $chip = [
        'emerald' => 'bg-emerald-500/12 border-emerald-400/25 text-emerald-200',
        'fuchsia' => 'bg-fuchsia-500/12 border-fuchsia-400/25 text-fuchsia-200',
        'amber'   => 'bg-amber-500/12 border-amber-400/25 text-amber-200',
        'cyan'    => 'bg-cyan-500/12 border-cyan-400/25 text-cyan-200',
        'violet'  => 'bg-violet-500/12 border-violet-400/25 text-violet-200',
        'slate'   => 'bg-white/8 border-white/10 text-white/80',
    ];
@endphp

<div class="min-h-screen rtl">
  <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 py-6 space-y-6">

    {{-- HERO / HEADER (Epic) --}}
    <div class="relative overflow-hidden rounded-[28px] border border-white/10
                bg-gradient-to-br from-slate-950 via-slate-950/70 to-black
                shadow-[0_30px_120px_-60px_rgba(0,0,0,0.75)]">
      <div class="absolute -top-24 -left-24 h-72 w-72 rounded-full bg-fuchsia-500/15 blur-3xl"></div>
      <div class="absolute -bottom-24 -right-24 h-72 w-72 rounded-full bg-cyan-500/15 blur-3xl"></div>
      <div class="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.08),transparent_55%)]"></div>

      <div class="relative p-4 sm:p-6 flex flex-col gap-4 sm:gap-5">

        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div class="flex items-center gap-3 min-w-0">
            <div class="h-11 w-11 rounded-2xl grid place-items-center
                        bg-gradient-to-br from-fuchsia-400/20 via-cyan-400/15 to-emerald-400/15
                        border border-white/10 shadow-xl">
              <i class="fa-solid fa-bell text-lg text-white"></i>
            </div>

            <div class="min-w-0">
              <div class="flex items-center gap-2 flex-wrap">
                <h1 class="text-[16px] sm:text-[18px] font-extrabold text-white truncate">
                  NotifyHub — قائمة الإشعارات
                </h1>
                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-extrabold
                             bg-white/5 border border-white/10 text-white/80">
                  <span class="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
                  Live Center
                </span>
              </div>
              <p class="text-[11px] sm:text-xs text-slate-300/90">
                إدارة، تصفية، ومتابعة جميع الإشعارات (يدوي + تلقائي)
              </p>
            </div>
          </div>

          <a href="{{ route('superadmin.notifyhub.notifications.create') }}"
             class="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-2xl
                    bg-gradient-to-r from-fuchsia-300 to-cyan-200
                    text-slate-900 font-extrabold text-sm shadow-lg
                    hover:brightness-110 transition
                    ring-1 ring-white/30">
            <i class="fa-solid fa-plus"></i>
            إشعار جديد
          </a>
        </div>

        {{-- QUICK STATS --}}
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-2.5">
          <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
            <div class="text-[10px] text-slate-300/80">الإجمالي</div>
            <div class="mt-1 text-lg font-extrabold text-white">{{ $rows->total() ?? count($rows) }}</div>
          </div>
          <div class="rounded-2xl border border-emerald-400/15 bg-emerald-500/8 p-3">
            <div class="text-[10px] text-emerald-200/80">مرسل</div>
            <div class="mt-1 text-lg font-extrabold text-emerald-100">
              {{ method_exists($rows,'where') ? $rows->where('status','sent')->count() : '' }}
            </div>
          </div>
          <div class="rounded-2xl border border-sky-400/15 bg-sky-500/8 p-3">
            <div class="text-[10px] text-sky-200/80">مجدول</div>
            <div class="mt-1 text-lg font-extrabold text-sky-100">
              {{ method_exists($rows,'where') ? $rows->where('status','scheduled')->count() : '' }}
            </div>
          </div>
          <div class="rounded-2xl border border-rose-400/15 bg-rose-500/8 p-3">
            <div class="text-[10px] text-rose-200/80">ملغي</div>
            <div class="mt-1 text-lg font-extrabold text-rose-100">
              {{ method_exists($rows,'where') ? $rows->where('status','cancelled')->count() : '' }}
            </div>
          </div>
        </div>

      </div>
    </div>

    {{-- FILTERS (Epic + Mobile Friendly) --}}
    <form method="get"
          class="rounded-[26px] border border-white/10 bg-slate-950/65 backdrop-blur-xl
                 shadow-[0_20px_80px_-55px_rgba(0,0,0,0.8)] p-3 sm:p-4">

      <div class="flex items-center gap-2 mb-3">
        <div class="h-9 w-9 rounded-2xl grid place-items-center bg-white/5 border border-white/10">
          <i class="fa-solid fa-sliders text-white/80"></i>
        </div>
        <div class="min-w-0">
          <div class="text-sm font-extrabold text-white">التصفية والبحث</div>
          <div class="text-[11px] text-slate-300/80">ابحث بالعنوان/النص وحدد الحالة والنوع</div>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-4 gap-2.5">
        <label class="block">
          <span class="sr-only">بحث</span>
          <div class="relative">
            <i class="fa-solid fa-magnifying-glass absolute right-3 top-1/2 -translate-y-1/2 text-white/45 text-xs"></i>
            <input type="text" name="q" value="{{ $q }}"
                   placeholder="بحث بالعنوان أو النص..."
                   class="w-full rounded-2xl bg-black/35 border border-white/12
                          text-white placeholder:text-white/35 text-sm
                          px-10 py-2.5 focus:outline-none focus:ring-2 focus:ring-cyan-400/25">
          </div>
        </label>

        <label class="block">
          <span class="sr-only">الحالة</span>
          <select name="status"
                  class="w-full rounded-2xl bg-black/35 border border-white/12
                         text-white text-sm px-3 py-2.5
                         focus:outline-none focus:ring-2 focus:ring-emerald-400/25">
            <option value="">كل الحالات</option>
            <option value="sent" @selected($status==='sent')>مرسل</option>
            <option value="scheduled" @selected($status==='scheduled')>مجدول</option>
            <option value="draft" @selected($status==='draft')>مسودة</option>
            <option value="cancelled" @selected($status==='cancelled')>ملغي</option>
          </select>
        </label>

        <label class="block">
          <span class="sr-only">النوع</span>
          <select name="type"
                  class="w-full rounded-2xl bg-black/35 border border-white/12
                         text-white text-sm px-3 py-2.5
                         focus:outline-none focus:ring-2 focus:ring-fuchsia-400/25">
            <option value="">كل الأنواع</option>
            <option value="decision" @selected($type==='decision')>قرار</option>
            <option value="live" @selected($type==='live')>لايف</option>
            <option value="weekly_test" @selected($type==='weekly_test')>اختبار</option>
            <option value="daily_reading" @selected($type==='daily_reading')>قراءة</option>
            <option value="custom" @selected($type==='custom')>مخصص</option>
          </select>
        </label>

        <div class="flex gap-2">
          <button
              class="flex-1 rounded-2xl bg-gradient-to-r from-fuchsia-500/25 to-cyan-500/20
                     border border-white/12 text-white font-extrabold text-sm px-4 py-2.5
                     hover:brightness-110 transition">
            <i class="fa-solid fa-filter ml-1"></i>
            تطبيق
          </button>

          <a href="{{ route('superadmin.notifyhub.notifications.index') }}"
             class="inline-flex items-center justify-center rounded-2xl px-4 py-2.5
                    bg-white/5 border border-white/10 text-white/80
                    hover:bg-white/10 transition">
            <i class="fa-solid fa-rotate-right"></i>
          </a>
        </div>
      </div>

      {{-- Active filter chips --}}
      <div class="mt-3 flex flex-wrap items-center gap-2">
        @if($q)
          <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border text-[11px] font-bold {{ $chip['cyan'] }}">
            <i class="fa-solid fa-magnifying-glass"></i> بحث: <span class="opacity-90">{{ $q }}</span>
          </span>
        @endif

        @if($status)
          <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border text-[11px] font-bold {{ $badge[$status] ?? $chip['slate'] }}">
            <i class="fa-solid fa-circle-notch"></i> حالة: <span class="uppercase opacity-90">{{ $status }}</span>
          </span>
        @endif

        @if($type)
          @php
            $tm = $typeMeta[$type] ?? ['t'=>$type,'i'=>'fa-shapes','c'=>'slate'];
            $tcls = $chip[$tm['c']] ?? $chip['slate'];
          @endphp
          <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border text-[11px] font-bold {{ $tcls }}">
            <i class="fa-solid {{ $tm['i'] }}"></i> نوع: <span class="opacity-90">{{ $tm['t'] }}</span>
          </span>
        @endif
      </div>
    </form>

    {{-- MOBILE CARDS --}}
    <div class="grid grid-cols-1 gap-3 lg:hidden">
      @forelse($rows as $n)
        @php
          $st  = $n->status;
          $cls = $badge[$st] ?? 'border-white/10 bg-white/5 text-white/80';

          $tm = $typeMeta[$n->type] ?? ['t'=>$n->type,'i'=>'fa-shapes','c'=>'slate'];
          $tcls = $chip[$tm['c']] ?? $chip['slate'];
        @endphp

        <div class="rounded-[26px] border border-white/10 bg-slate-950/60 backdrop-blur-xl
                    shadow-[0_20px_80px_-55px_rgba(0,0,0,0.8)] overflow-hidden">
          <div class="p-4 space-y-3">
            <div class="flex items-start justify-between gap-3">
              <div class="min-w-0">
                <div class="text-[13px] font-extrabold text-white truncate">
                  #{{ $n->id }} — {{ $n->title }}
                </div>
                <div class="mt-1 text-[11px] text-slate-300/80 line-clamp-2">
                  {{ \Illuminate\Support\Str::limit($n->body, 140) }}
                </div>
              </div>

              <span class="shrink-0 inline-flex items-center gap-1 px-2.5 py-1 rounded-full border text-[10px] font-extrabold {{ $cls }}">
                <i class="fa-solid fa-circle-check"></i>
                <span class="uppercase">{{ $st }}</span>
              </span>
            </div>

            <div class="flex flex-wrap items-center gap-2">
              <span class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full border text-[11px] font-bold {{ $tcls }}">
                <i class="fa-solid {{ $tm['i'] }}"></i>
                {{ $tm['t'] }}
              </span>

              <span class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full border text-[11px] font-bold {{ $chip['slate'] }}">
                <i class="fa-solid fa-bullseye"></i>
                {{ $n->audience }}
              </span>

              <span class="inline-flex items-center gap-2 px-2.5 py-1 rounded-full border text-[11px] font-bold {{ $chip['slate'] }}">
                <i class="fa-solid fa-clock"></i>
                {{ \Carbon\Carbon::parse($n->created_at)->format('Y-m-d H:i') }}
              </span>
            </div>

            <div class="flex items-center justify-between pt-1">
              <div class="text-[11px] text-slate-400">
                <i class="fa-solid fa-hashtag ml-1"></i>{{ $n->type }}
              </div>

              <a href="{{ route('superadmin.notifyhub.notifications.edit',$n->id) }}"
                 class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl
                        bg-white/6 border border-white/10 text-white font-extrabold text-xs
                        hover:bg-white/10 transition">
                <i class="fa-solid fa-pen-to-square"></i>
                تعديل
              </a>
            </div>
          </div>
        </div>
      @empty
        <div class="rounded-[26px] border border-white/10 bg-slate-950/60 backdrop-blur-xl p-8 text-center">
          <div class="text-white font-extrabold">لا يوجد إشعارات</div>
          <div class="text-slate-300/80 text-sm mt-1">جرّب تغيير الفلاتر أو أضف إشعار جديد</div>
        </div>
      @endforelse
    </div>

    {{-- DESKTOP TABLE --}}
    <div class="hidden lg:block rounded-[28px] border border-white/10 bg-slate-950/60 backdrop-blur-xl
                shadow-[0_25px_90px_-60px_rgba(0,0,0,0.85)] overflow-hidden">
      <div class="p-4 border-b border-white/10 flex items-center justify-between">
        <div class="flex items-center gap-2">
          <div class="h-9 w-9 rounded-2xl grid place-items-center bg-white/5 border border-white/10">
            <i class="fa-solid fa-table text-white/80"></i>
          </div>
          <div>
            <div class="text-sm font-extrabold text-white">الجدول</div>
            <div class="text-[11px] text-slate-300/80">عرض مكتبي احترافي</div>
          </div>
        </div>

        <div class="text-[11px] text-slate-300/80">
          إجمالي النتائج: <span class="font-extrabold text-white">{{ $rows->total() ?? count($rows) }}</span>
        </div>
      </div>

      <div class="overflow-x-auto">
        <table class="min-w-full text-sm text-white">
          <thead class="bg-black/35 text-slate-300 text-xs">
            <tr class="border-b border-white/10">
              <th class="px-4 py-3 text-right whitespace-nowrap">#</th>
              <th class="px-4 py-3 text-right">العنوان</th>
              <th class="px-4 py-3 text-right whitespace-nowrap">النوع</th>
              <th class="px-4 py-3 text-right whitespace-nowrap">الجمهور</th>
              <th class="px-4 py-3 text-right whitespace-nowrap">الحالة</th>
              <th class="px-4 py-3 text-right whitespace-nowrap">تاريخ</th>
              <th class="px-4 py-3 text-right whitespace-nowrap">إجراء</th>
            </tr>
          </thead>

          <tbody class="divide-y divide-white/10">
          @forelse($rows as $n)
            @php
              $st  = $n->status;
              $cls = $badge[$st] ?? 'border-white/10 bg-white/5 text-white/80';

              $tm = $typeMeta[$n->type] ?? ['t'=>$n->type,'i'=>'fa-shapes','c'=>'slate'];
              $tcls = $chip[$tm['c']] ?? $chip['slate'];
            @endphp

            <tr class="hover:bg-white/5 transition">
              <td class="px-4 py-4 text-white/90 font-bold">{{ $n->id }}</td>

              <td class="px-4 py-4">
                <div class="font-extrabold text-white">{{ $n->title }}</div>
                <div class="text-xs text-slate-300/70 mt-1">
                  {{ \Illuminate\Support\Str::limit($n->body, 110) }}
                </div>
              </td>

              <td class="px-4 py-4">
                <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-extrabold {{ $tcls }}">
                  <i class="fa-solid {{ $tm['i'] }}"></i>
                  {{ $tm['t'] }}
                </span>
              </td>

              <td class="px-4 py-4 text-white/85">{{ $n->audience }}</td>

              <td class="px-4 py-4">
                <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-extrabold {{ $cls }}">
                  <span class="h-1.5 w-1.5 rounded-full bg-white/60"></span>
                  <span class="uppercase">{{ $st }}</span>
                </span>
              </td>

              <td class="px-4 py-4 text-xs text-slate-300">
                {{ \Carbon\Carbon::parse($n->created_at)->format('Y-m-d H:i') }}
              </td>

              <td class="px-4 py-4">
                <a href="{{ route('superadmin.notifyhub.notifications.edit',$n->id) }}"
                   class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl
                          bg-cyan-500/15 border border-cyan-400/20 text-cyan-200 font-extrabold text-xs
                          hover:bg-cyan-500/20 transition">
                  <i class="fa-solid fa-pen-to-square"></i>
                  تعديل
                </a>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="7" class="px-6 py-10 text-center text-slate-300/70">
                <div class="font-extrabold text-white">لا يوجد إشعارات</div>
                <div class="text-sm mt-1">جرّب تغيير الفلاتر أو أضف إشعار جديد</div>
              </td>
            </tr>
          @endforelse
          </tbody>
        </table>
      </div>
    </div>

    {{-- Pagination --}}
    <div class="rounded-3xl border border-white/10 bg-slate-950/35 backdrop-blur-xl p-3">
      {{ $rows->links() }}
    </div>

  </div>
</div>

{{-- clamp helper (Tailwind line-clamp plugin) fallback (safe) --}}
<style>
  .line-clamp-2{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
</style>
@endsection