@extends('layouts.superadmin')

@section('title','ساعات القستات — واتساب')
@section('page-title','🎙️ تقرير ساعات القستات — إرسال للواتساب')

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

  {{-- شرح بسيط --}}
  <div class="bg-white dark:bg-gray-800 rounded-2xl p-4 shadow text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
    يعرض هذا التقرير <b>عدد ساعات القستات لكل هوست</b> خلال الفترة المحددة،
    مع فصل ساعات <b>الشباب</b> عن <b>الصبايا</b>، وحساب نسبة المتقدمين من جميع الأعضاء المستهدفين.
    <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
      الفترة الحالية: <b>{{ $from }}</b> → <b>{{ $to }}</b> ({{ $days }} يومًا).
    </div>
  </div>

  {{-- فلاتر الفترة --}}
  <div class="bg-white dark:bg-gray-800 rounded-2xl p-4 shadow">
    <form method="GET" class="grid grid-cols-1 md:grid-cols-5 gap-3 items-end">
      <div>
        <label class="block text-xs text-gray-500 mb-1">من تاريخ</label>
        <input type="date" name="from" value="{{ $from }}"
               class="w-full rounded-xl border-gray-300 dark:bg-gray-700 dark:text-white text-sm">
      </div>
      <div>
        <label class="block text-xs text-gray-500 mb-1">إلى تاريخ</label>
        <input type="date" name="to" value="{{ $to }}"
               class="w-full rounded-xl border-gray-300 dark:bg-gray-700 dark:text-white text-sm">
      </div>
      <div>
        <label class="block text-xs text-gray-500 mb-1">عدد الهوستات (Top)</label>
        <input type="number" name="limit" value="{{ $limit }}" min="5" max="100"
               class="w-full rounded-xl border-gray-300 dark:bg-gray-700 dark:text-white text-sm">
      </div>
      <div class="md:col-span-2 flex gap-2">
        <button type="submit"
                class="inline-flex items-center justify-center px-4 py-2.5 rounded-xl
                       bg-primary-600 text-white text-sm hover:bg-primary-700 flex-1 md:flex-none">
          <i class="fa-solid fa-rotate-right ml-2 text-xs"></i>
          تحديث النتائج
        </button>
      </div>
    </form>
  </div>

  {{-- كروت ملخص: ساعات الشباب/الصبايا ونسبة المتقدمين --}}
  <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
    <div class="rounded-2xl p-4 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/30 dark:to-blue-800/40 border-r-4 border-blue-500">
      <div class="text-xs text-blue-700 dark:text-blue-200">عدد ساعات الشباب</div>
      <div class="text-2xl font-extrabold mt-1 text-blue-900 dark:text-blue-50">
        {{ $summary['boys_hours'] }} <span class="text-sm font-normal">ساعة</span>
      </div>
    </div>

    <div class="rounded-2xl p-4 bg-gradient-to-br from-pink-50 to-pink-100 dark:from-pink-900/30 dark:to-pink-800/40 border-r-4 border-pink-500">
      <div class="text-xs text-pink-700 dark:text-pink-200">عدد ساعات الصبايا</div>
      <div class="text-2xl font-extrabold mt-1 text-pink-900 dark:text-pink-50">
        {{ $summary['girls_hours'] }} <span class="text-sm font-normal">ساعة</span>
      </div>
    </div>

    <div class="rounded-2xl p-4 bg-gradient-to-br from-emerald-50 to-emerald-100 dark:from-emerald-900/30 dark:to-emerald-800/40 border-r-4 border-emerald-500">
      <div class="text-xs text-emerald-700 dark:text-emerald-200">نسبة المتقدمين (لهم قستات)</div>
      <div class="text-2xl font-extrabold mt-1 text-emerald-900 dark:text-emerald-50">
        {{ $summary['applied_percent'] }} <span class="text-sm font-normal">%</span>
      </div>
      <div class="mt-1 text-[11px] text-emerald-700/70 dark:text-emerald-200/80">
        {{ $summary['hosts_count'] }} هوست من أصل {{ $summary['eligible_members_count'] }} عضو مستهدف
      </div>
    </div>
  </div>

  {{-- تشيبس الإحصائيات (كل إحصائية ببوتم) --}}
  <div class="bg-white dark:bg-gray-800 rounded-2xl p-4 shadow">
    <div class="text-xs text-gray-600 dark:text-gray-300 mb-2 font-semibold">
      إحصائيات إضافية:
    </div>
    <div class="flex flex-wrap gap-2">
      @foreach($summary['chips'] as $chip)
        <span class="inline-flex items-center px-3 py-1.5 rounded-full text-[11px]
                     bg-gray-100 text-gray-700 dark:bg-gray-900/60 dark:text-gray-200 border border-gray-200/70">
          <span class="font-semibold ml-1">{{ $chip['label'] }}:</span>
          <span>{{ $chip['value'] }}</span>
        </span>
      @endforeach
    </div>
  </div>

  {{-- أزرار الإرسال للواتساب --}}
  <div class="bg-white dark:bg-gray-800 rounded-2xl p-4 shadow flex flex-col md:flex-row md:items-center md:justify-between gap-3">
    <div class="text-xs text-gray-600 dark:text-gray-300 leading-relaxed">
      <div class="font-semibold mb-1">إرسال التقرير للواتساب:</div>
      <p>سيتم إرسال رسالة تحتوي على:</p>
      <ul class="list-disc pr-4 mt-1">
        <li>عدد ساعات الشباب والصبايا.</li>
        <li>نسبة المتقدمين من جميع الأعضاء المستهدفين.</li>
        <li>سطر لكل عضو: <span class="font-mono text-[11px]">الترتيب. الاسم — عدد الساعات (عدد القستات)</span></li>
      </ul>
    </div>

    <div class="flex flex-col md:flex-row gap-2">
      <form method="POST" action="{{ route('superadmin.whatsapp.guests-hours.send') }}">
        @csrf
        <input type="hidden" name="from" value="{{ $from }}">
        <input type="hidden" name="to" value="{{ $to }}">
        <input type="hidden" name="limit" value="{{ $limit }}">

        <button type="submit"
                class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl
                       bg-emerald-600 text-white text-sm hover:bg-emerald-700 shadow">
          <i class="fa-brands fa-whatsapp text-lg"></i>
          <span>إرسال تقرير ساعات القستات</span>
        </button>
      </form>
    </div>
  </div>

  {{-- قائمة الهوستات (سطر لكل عضو) --}}
  <div class="bg-white dark:bg-gray-800 rounded-2xl p-4 shadow">
    <div class="flex items-center justify-between mb-3">
      <h3 class="font-bold text-sm md:text-base text-gray-800 dark:text-gray-100">
        قائمة الهوستات حسب عدد الساعات
      </h3>
      <span class="text-[11px] text-gray-500 dark:text-gray-400">
        يظهر حتى {{ $limit }} هوست
      </span>
    </div>

    <div class="space-y-3">
      @forelse($rows as $index => $r)
        <div class="rounded-xl p-3 border border-gray-100 dark:border-gray-700 bg-gray-50/60 dark:bg-gray-900/40">
          <div class="flex items-center gap-3">
            <div class="h-8 w-8 rounded-full bg-slate-900/80 text-white text-xs flex items-center justify-center font-bold">
              #{{ $index + 1 }}
            </div>

            <div class="flex-1 min-w-0">
              <div class="flex items-center justify-between gap-2">
                <div class="min-w-0">
                  <div class="font-semibold text-sm text-gray-900 dark:text-white truncate">
                    {{ $r['name'] }}
                    @if($r['username'])
                      <span class="text-xs text-gray-400">({{ $r['username'] }})</span>
                    @endif
                  </div>
                  <div class="text-[11px] text-gray-500 dark:text-gray-400 mt-0.5">
                    {{ $r['membership'] ?? 'عضو' }}
                    @if($r['gender'] === 'male')
                      • شاب
                    @elseif($r['gender'] === 'female')
                      • صبية
                    @endif
                  </div>
                </div>

                <div class="text-right text-xs text-gray-700 dark:text-gray-200">
                  <div>الساعات: <span class="font-bold text-emerald-600 dark:text-emerald-300">{{ $r['hours'] }}</span></div>
                  <div>عدد القستات: <span class="font-bold text-sky-600 dark:text-sky-300">{{ $r['sessions_count'] }}</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      @empty
        <div class="text-sm text-gray-500 dark:text-gray-400 py-6 text-center">
          لا توجد قستات مكتملة في هذه الفترة.
        </div>
      @endforelse
    </div>
  </div>

</div>
@endsection