@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-slate-950">
  <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.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>

        <a href="{{ route('superadmin.zuhra.monitor.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-shield-heart ms-2 text-[11px]"></i>
          المراقبة
        </a>
      </div>
    </div>

    {{-- FILTER CARD --}}
    <div class="rounded-3xl bg-black/25 border border-white/10 p-5 shadow-xl">
      <div class="flex items-center justify-between gap-3 mb-4">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-rose-500/15 border border-rose-400/25 grid place-items-center text-rose-200">
            <i class="fa-solid fa-filter"></i>
          </div>
          <div>
            <div class="text-[11px] text-white/60">Filters</div>
            <div class="font-extrabold text-white">فلترة الاجتماعات</div>
          </div>
        </div>
        <span class="text-[11px] text-white/70 bg-white/5 border border-white/10 px-3 py-1 rounded-full">
          {{ $range['fromDate'] }} → {{ $range['toDate'] }}
        </span>
      </div>

      <form method="get" class="grid grid-cols-1 md:grid-cols-5 gap-2">
        <div class="md:col-span-2">
          <label class="text-[10px] text-white/60">بحث</label>
          <input name="q" value="{{ request('q') }}" placeholder="عنوان / وصف..."
                 class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-4 py-2 focus:outline-none focus:ring-2 focus:ring-rose-500/40">
        </div>

        <div>
          <label class="text-[10px] text-white/60">الحالة</label>
          <select name="status"
                  class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-4 py-2 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
            <option value="">الكل</option>
            <option value="scheduled" @selected(request('status')==='scheduled')>مجدول</option>
            <option value="ongoing" @selected(request('status')==='ongoing')>جارٍ</option>
            <option value="completed" @selected(request('status')==='completed')>مكتمل</option>
            <option value="cancelled" @selected(request('status')==='cancelled')>ملغي</option>
          </select>
        </div>

        <div>
          <label class="text-[10px] text-white/60">محضر</label>
          <select name="has_report"
                  class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-4 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
            <option value="">الكل</option>
            <option value="yes" @selected(request('has_report')==='yes')>محضر موجود</option>
            <option value="no" @selected(request('has_report')==='no')>بدون محضر</option>
          </select>
        </div>

        <div class="grid grid-cols-2 gap-2">
          <div>
            <label class="text-[10px] text-white/60">من</label>
            <input type="date" name="from" value="{{ $range['fromDate'] }}"
                   class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-rose-500/40">
          </div>
          <div>
            <label class="text-[10px] text-white/60">إلى</label>
            <input type="date" name="to" value="{{ $range['toDate'] }}"
                   class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
          </div>
        </div>

        <div class="md:col-span-5 flex justify-end">
          <button class="inline-flex items-center justify-center px-5 py-2 rounded-2xl text-xs font-bold text-slate-900
                  bg-gradient-to-r from-rose-200 via-fuchsia-200 to-cyan-200 shadow-lg shadow-rose-500/25 hover:scale-[1.01] active:scale-100 transition">
            <i class="fa-solid fa-magnifying-glass ms-2 text-[11px]"></i>
            تطبيق
          </button>
        </div>
      </form>
    </div>

    {{-- LIST --}}
    <div class="grid gap-3 lg:grid-cols-2">
      @forelse($meetings as $m)
        @php
          $z = $m->zuhra ?? [];
          $riskLevel = $z['risk_level'] ?? ['label'=>'—','badge'=>'bg-white/5 border-white/10 text-white/70','dot'=>'bg-white/30'];
        @endphp

        <div class="rounded-3xl border border-white/10 bg-black/20 p-5 shadow-xl">
          <div class="flex items-start justify-between gap-3">
            <div class="min-w-0">
              <div class="text-[11px] text-white/60">
                {{ \Carbon\Carbon::parse($m->meeting_date)->format('Y-m-d H:i') }}
                @if($m->location) · <span class="text-white/50">{{ $m->location }}</span>@endif
              </div>
              <div class="mt-1 font-extrabold text-white text-sm truncate">{{ $m->title }}</div>

              <div class="mt-3 flex flex-wrap gap-2">
                <span class="text-[11px] px-3 py-1 rounded-full bg-white/5 border border-white/10 text-white/70">
                  حالة: {{ \App\Services\Zuhra\ZuhraAi::statusLabel($m->status) }}
                </span>

                <span class="text-[11px] px-3 py-1 rounded-full bg-white/5 border border-white/10 text-white/70">
                  حضور: {{ $z['participants_attended'] ?? 0 }}/{{ $z['participants_total'] ?? 0 }} ({{ $z['attendance_rate'] ?? 0 }}%)
                </span>

                <span class="text-[11px] px-3 py-1 rounded-full {{ ($z['has_report'] ?? false) ? 'bg-fuchsia-500/10 border-fuchsia-300/20 text-fuchsia-100' : 'bg-amber-500/10 border-amber-300/20 text-amber-100' }}">
                  {{ ($z['has_report'] ?? false) ? 'محضر موجود' : 'بدون محضر' }}
                </span>

                <span class="text-[11px] px-3 py-1 rounded-full border {{ $riskLevel['badge'] }}">
                  <span class="inline-block w-1.5 h-1.5 rounded-full {{ $riskLevel['dot'] }} ms-1"></span>
                  {{ $riskLevel['label'] }} · {{ $z['risk_score'] ?? 0 }}/20
                </span>

                <span class="text-[11px] px-3 py-1 rounded-full bg-white/5 border border-white/10 text-white/70">
                  اكتمال: {{ $z['completeness'] ?? 0 }}%
                </span>
              </div>
            </div>

            <div class="shrink-0 flex flex-col gap-2">
              <a href="{{ route('superadmin.zuhra.meetings.show', $m) }}"
                 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', $m) }}"
                 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>
                محضر (Wizard)
              </a>
            </div>
          </div>
        </div>
      @empty
        <div class="lg:col-span-2 rounded-3xl border border-white/10 bg-black/20 p-6 text-white/70 text-sm">
          لا يوجد نتائج.
        </div>
      @endforelse
    </div>

    <div class="pt-2">
      {{ $meetings->links() }}
    </div>

  </div>
</div>
@endsection