@extends('layouts.superadmin')
@section('title','نظام زُهرة — المراقبة')

@section('content')
<div class="min-h-screen rtl py-6 sm:py-8 bg-gradient-to-b from-slate-950 via-rose-950/40 to-black">
  <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

    {{-- TOP BAR --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
      <nav class="flex items-center gap-2 text-[12px] text-slate-200/70">
        <a href="{{ route('superadmin.zuhra.dashboard') }}"
           class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl bg-black/30 border border-white/10 hover:bg-white/5 transition">
          <i class="fa-solid fa-seedling text-rose-200"></i>
          <span>زُهرة</span>
        </a>

        <svg class="w-4 h-4 text-white/30 rotate-180" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>

        <span class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl bg-black/40 border border-rose-300/20 text-white font-bold">
          المراقبة
        </span>
      </nav>

      <div class="flex items-center gap-2">
        <a href="{{ route('superadmin.zuhra.meetings.index') }}"
           class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
          <i class="fa-solid fa-calendar-days ms-2 text-[11px]"></i>
          الاجتماعات
        </a>

        <a href="{{ route('superadmin.zuhra.analytics.index') }}"
           class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
          <i class="fa-solid fa-chart-pie ms-2 text-[11px]"></i>
          الإحصائيات
        </a>
      </div>
    </div>

    @if(session('success'))
      <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 text-emerald-200 px-4 py-3 text-sm">
        {{ session('success') }}
      </div>
    @endif

    {{-- SUMMARY --}}
    <div class="grid gap-4 lg:grid-cols-4">
      <div class="rounded-3xl bg-black/25 border border-white/10 p-5">
        <div class="text-[11px] text-white/60">Overdue</div>
        <div class="text-2xl font-extrabold text-white">{{ $counts['overdue'] }}</div>
        <div class="text-[12px] text-white/70">اجتماعات غير مُغلقة</div>
      </div>

      <div class="rounded-3xl bg-black/25 border border-white/10 p-5">
        <div class="text-[11px] text-white/60">Missing Reports</div>
        <div class="text-2xl font-extrabold text-white">{{ $counts['missing_report'] }}</div>
        <div class="text-[12px] text-white/70">مكتمل بدون محضر</div>
      </div>

      <div class="rounded-3xl bg-black/25 border border-white/10 p-5">
        <div class="text-[11px] text-white/60">High Absence</div>
        <div class="text-2xl font-extrabold text-white">{{ $counts['high_absence'] }}</div>
        <div class="text-[12px] text-white/70">غياب بدون عذر مرتفع</div>
      </div>

      <div class="rounded-3xl bg-black/25 border border-white/10 p-5">
        <div class="text-[11px] text-white/60">High Risk</div>
        <div class="text-2xl font-extrabold text-white">{{ $counts['high_risk'] }}</div>
        <div class="text-[12px] text-white/70">محاضر خطر عالي</div>
      </div>
    </div>

    {{-- ALERTS --}}
    <div class="rounded-3xl bg-black/25 border border-white/10 overflow-hidden">
      <div class="px-5 py-4 border-b border-white/10 flex items-center justify-between">
        <div>
          <div class="text-[11px] text-white/60">Monitor Feed</div>
          <div class="font-extrabold text-white">تنبيهات زُهرة</div>
        </div>
        <span class="text-[11px] text-white/70 bg-white/5 border border-white/10 px-3 py-1 rounded-full">
          {{ $alerts->count() }} تنبيه
        </span>
      </div>

      <div class="p-5 space-y-3">
        @forelse($alerts as $a)
          @php
            $sev = $a['severity'];
            $sevBadge = $sev === 'high'
              ? 'bg-rose-500/15 border-rose-400/25 text-rose-200'
              : 'bg-amber-500/15 border-amber-400/25 text-amber-200';
          @endphp

          <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
            <div class="flex items-start justify-between gap-3">
              <div class="min-w-0">
                <div class="flex items-center gap-2">
                  <span class="text-[11px] px-3 py-1 rounded-full border {{ $sevBadge }}">
                    {{ $sev === 'high' ? 'عالي' : 'متوسط' }}
                  </span>
                  <div class="font-extrabold text-white">{{ $a['title'] }}</div>
                </div>

                <div class="mt-2 text-[12px] text-white/80 leading-relaxed">
                  {{ $a['text'] }}
                </div>

                <div class="mt-2 text-[11px] text-white/60">
                  اجتماع: <b class="text-white/80">{{ $a['meeting']->title }}</b>
                  · {{ \Carbon\Carbon::parse($a['meeting']->meeting_date)->format('Y-m-d H:i') }}
                </div>
              </div>

              <div class="shrink-0 flex flex-col gap-2">
                <a href="{{ route('superadmin.zuhra.meetings.show', $a['meeting']) }}"
                   class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
                  <i class="fa-solid fa-eye ms-2 text-[11px]"></i>
                  عرض
                </a>

                <a href="{{ route('superadmin.zuhra.reports.edit', $a['meeting']) }}"
                   class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-rose-200/10 border border-rose-300/20 text-rose-100 text-xs hover:bg-rose-200/15 transition">
                  <i class="fa-solid fa-pen-to-square ms-2 text-[11px]"></i>
                  محضر
                </a>
              </div>
            </div>
          </div>
        @empty
          <div class="rounded-3xl border border-white/10 bg-white/5 p-6 text-white/70">
            لا يوجد تنبيهات ضمن هذه الفترة 🎉
          </div>
        @endforelse
      </div>
    </div>

  </div>
</div>
@endsection