@extends('layouts.superadmin')

@section('title','لوحة الأهداف والالتزام')
@section('page-title','🎯 لوحة الأهداف — متابعة تنفيذ المستهدفات')

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

  {{-- شرح عام --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow">
    <h2 class="text-xl font-bold mb-2">ما هي لوحة الأهداف؟ ولماذا تهمنا؟</h2>
    <p class="text-gray-700 dark:text-gray-300 leading-7">
      تتيح لك هذه اللوحة تحديد أهداف أسبوعية/شهرية لكل فئة (أعضاء، مشرفين، إداريين، صبايا/شباب) في محاور مثل ساعات اللايف، النقاط، عدد التقييمات، ونسبة الالتزام.
      يقوم النظام تلقائيًا بقراءة بيانات المنصّة (الحضور، اللايف، النقاط، المخالفات) وحساب نسبة التقدّم ومؤشر المخاطر،
      كما يوفّر أدوات سريعة للإجراءات (إرسال رسالة جماعية/تعيين مهام/خطط إنعاش).
    </p>
    <ul class="mt-3 list-disc pl-6 text-gray-700 dark:text-gray-300">
      <li>رؤية الشمول: كل الأهداف والفئات في مكان واحد.</li>
      <li>تحليل زمني: متابعة التطوّر أسبوعيًا/شهريًا.</li>
      <li>تنبيهات مبكرة للحالات المعرضة للخطر.</li>
      <li>ربط الأرقام بإجراءات عملية (رسائل/مهام/حملات).</li>
    </ul>
  </div>

  {{-- إنشاء هدف جديد --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow">
    <h3 class="text-lg font-bold mb-4">➕ إنشاء هدف جديد</h3>
    <form method="POST" action="{{ route('superadmin.goal-tracker.store') }}" class="grid md:grid-cols-3 gap-4">
      @csrf
      <div>
        <label class="block text-sm">العنوان</label>
        <input type="text" name="title" class="w-full rounded-lg border-gray-300 dark:bg-gray-700" required>
      </div>
      <div>
        <label class="block text-sm">الفترة</label>
        <select name="period" class="w-full rounded-lg border-gray-300 dark:bg-gray-700" required>
          <option value="weekly">أسبوعي</option>
          <option value="monthly">شهري</option>
        </select>
      </div>
      <div>
        <label class="block text-sm">المؤشر</label>
        <select name="metric" class="w-full rounded-lg border-gray-300 dark:bg-gray-700" required>
          <option value="live_minutes">ساعات/دقائق لايف</option>
          <option value="points">النقاط</option>
          <option value="evaluations">عدد التقييمات</option>
          <option value="attendance_rate">نسبة الالتزام</option>
          <option value="no_violations">صفر مخالفات</option>
        </select>
      </div>
      <div>
        <label class="block text-sm">الفئة المستهدفة</label>
        <select name="segment" class="w-full rounded-lg border-gray-300 dark:bg-gray-700">
          <option value="all">جميع المنظومة</option>
          <option value="members">الأعضاء</option>
          <option value="moderators">المشرفين</option>
          <option value="admins">الإداريين</option>
          <option value="advisors">المستشارين</option>
          <option value="girls">صبايا</option>
          <option value="boys">شباب</option>
        </select>
      </div>
      <div>
        <label class="block text-sm">القيمة المستهدفة</label>
        <input type="number" name="target_value" class="w-full rounded-lg border-gray-300 dark:bg-gray-700" min="1" required>
      </div>
      <div>
        <label class="block text-sm">الفترة من</label>
        <input type="date" name="start_date" class="w-full rounded-lg border-gray-300 dark:bg-gray-700" required>
      </div>
      <div>
        <label class="block text-sm">إلى</label>
        <input type="date" name="end_date" class="w-full rounded-lg border-gray-300 dark:bg-gray-700" required>
      </div>
      <div class="md:col-span-3">
        <label class="block text-sm">الوصف (اختياري)</label>
        <textarea name="description" rows="3" class="w-full rounded-lg border-gray-300 dark:bg-gray-700"></textarea>
      </div>
      <div class="md:col-span-3 flex justify-end">
        <button class="px-5 py-2.5 rounded bg-blue-600 text-white hover:bg-blue-700">إنشاء الهدف وتوزيعه</button>
      </div>
    </form>
  </div>

  {{-- فلاتر --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow">
    <form class="grid md:grid-cols-4 gap-4">
      <div>
        <label class="block text-sm">الفئة</label>
        <select name="scope" class="w-full rounded-lg border-gray-300 dark:bg-gray-700" onchange="this.form.submit()">
          @foreach (['all'=>'الجميع','members'=>'الأعضاء','moderators'=>'المشرفون','admins'=>'الإداريون','advisors'=>'المستشارون','girls'=>'الصبايا','boys'=>'الشباب'] as $k=>$v)
            <option value="{{ $k }}" @selected($scope==$k)>{{ $v }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="block text-sm">الفترة</label>
        <select name="period" class="w-full rounded-lg border-gray-300 dark:bg-gray-700" onchange="this.form.submit()">
          <option value="weekly"  @selected($period==='weekly')>أسبوعي</option>
          <option value="monthly" @selected($period==='monthly')>شهري</option>
        </select>
      </div>
      <div class="col-span-2 flex items-end justify-end">
        <div class="text-sm text-gray-600 dark:text-gray-300 space-x-4">
          <span>أهداف مفعّلة: <b>{{ $summary['active'] }}</b></span>
          <span>أسبوعية: <b>{{ $summary['weekly'] }}</b></span>
          <span>شهرية: <b>{{ $summary['monthly'] }}</b></span>
        </div>
      </div>
    </form>
  </div>

  {{-- قائمة الأهداف --}}
  <div class="grid md:grid-cols-2 gap-5">
    @forelse($goals as $g)
      <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow">
        <div class="flex items-center justify-between mb-2">
          <div>
            <div class="text-lg font-bold">{{ $g->title }} <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded">{{ $g->period==='weekly'?'أسبوعي':'شهري' }}</span></div>
            <div class="text-sm text-gray-600 dark:text-gray-400">الفئة: {{ __($g->segment) }} • الهدف: {{ $g->target_value }} • من {{ $g->start_date }} إلى {{ $g->end_date }}</div>
          </div>
          <div class="space-x-2">
            <a href="{{ route('superadmin.goal-tracker.show',$g->id) }}" class="px-3 py-1 rounded bg-emerald-600 text-white">التفاصيل</a>
            <form action="{{ route('superadmin.goal-tracker.recalc', $g->id) }}" method="POST" class="inline">
              @csrf
              <button class="px-3 py-1 rounded bg-blue-600 text-white">تحديث التقدّم</button>
            </form>
          </div>
        </div>
        @if($g->description)
          <p class="text-sm text-gray-700 dark:text-gray-300 mt-2">{{ $g->description }}</p>
        @endif
      </div>
    @empty
      <div class="col-span-2">
        <div class="bg-white dark:bg-gray-800 p-6 rounded text-center text-gray-600">لا توجد أهداف بعد.</div>
      </div>
    @endforelse
  </div>

  <div>
    {{ $goals->withQueryString()->links() }}
  </div>
</div>
@endsection