@extends('layouts.superadmin')

@section('title','رسائل الولاء والتواجد — واتساب')
@section('page-title','رسائل واتساب — مؤشر الولاء والتواجد')

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

  {{-- شرح بسيط --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow">
    <h3 class="font-extrabold text-lg mb-1">ما هي رسائل الولاء؟</h3>
    <p class="text-xs text-gray-600 dark:text-gray-300 leading-6">
      هذا النظام يرسل تقريرًا جاهزًا على الواتساب عن
      <b>تواجد الفريق، النقاط، الأنشطة، والغياب</b>،
      محسوبًا بخوارزمية <b>الولاء الذهبي</b> للشباب والصبايا.
      يمكنك اختيار فئة واحدة أو كلا الفئتين، وإرسال نسخة مختصرة أو تقرير معمّق.
    </p>
  </div>

  {{-- فلاتر --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl 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 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 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="number" name="days" value="{{ $days }}"
               class="w-full rounded 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>
        <select name="segment"
                class="w-full rounded border-gray-300 dark:bg-gray-700 dark:text-white text-sm">
          <option value="boys"  @selected($segment==='boys')>الشباب فقط</option>
          <option value="girls" @selected($segment==='girls')>الصبايا فقط</option>
          <option value="both"  @selected($segment==='both')>الشباب + الصبايا</option>
        </select>
      </div>
      <div class="flex md:justify-end">
        <button class="px-4 py-2 rounded-lg bg-primary-600 hover:bg-primary-700 text-white text-sm w-full md:w-auto">
          تحديث المؤشرات
        </button>
      </div>
    </form>
  </div>

  {{-- كروت الولاء للشباب/الصبايا --}}
  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
    @if($boys)
      <div class="rounded-xl p-4 bg-sky-50 dark:bg-sky-900/20 border border-sky-100">
        <div class="flex items-center justify-between mb-2">
          <div>
            <div class="text-xs text-sky-700 dark:text-sky-200 font-semibold">👦 الشباب</div>
            <div class="text-2xl font-black text-sky-900 dark:text-sky-100">
              {{ $boys['loyal'] }}%
            </div>
            <div class="text-[11px] text-gray-500">مؤشر الولاء الذهبي</div>
          </div>
          <div class="text-xs text-right text-gray-600 dark:text-gray-300">
            <div>الأعضاء: <b>{{ $boys['users'] }}</b></div>
            <div>دقائق/عضو: <b>{{ $boys['min_per_user'] }}</b></div>
            <div>نقاط/عضو: <b>{{ $boys['pts_per_user'] }}</b></div>
          </div>
        </div>
        <div class="mt-2 text-[11px] text-gray-500 space-y-1">
          <div>حضور: <b>{{ $boys['present'] }}</b> يوم · غياب غير مبرر: <b>{{ $boys['abs_unexc'] }}</b></div>
          <div>أنشطة: <b>{{ $boys['acts'] }}</b> · مخالفات: <b>{{ $boys['viol'] }}</b></div>
        </div>
      </div>
    @endif

    @if($girls)
      <div class="rounded-xl p-4 bg-pink-50 dark:bg-pink-900/20 border border-pink-100">
        <div class="flex items-center justify-between mb-2">
          <div>
            <div class="text-xs text-pink-700 dark:text-pink-200 font-semibold">👧 الصبايا</div>
            <div class="text-2xl font-black text-pink-900 dark:text-pink-100">
              {{ $girls['loyal'] }}%
            </div>
            <div class="text-[11px] text-gray-500">مؤشر الولاء الذهبي</div>
          </div>
          <div class="text-xs text-right text-gray-600 dark:text-gray-300">
            <div>الأعضاء: <b>{{ $girls['users'] }}</b></div>
            <div>دقائق/عضوة: <b>{{ $girls['min_per_user'] }}</b></div>
            <div>نقاط/عضوة: <b>{{ $girls['pts_per_user'] }}</b></div>
          </div>
        </div>
        <div class="mt-2 text-[11px] text-gray-500 space-y-1">
          <div>حضور: <b>{{ $girls['present'] }}</b> يوم · غياب غير مبرر: <b>{{ $girls['abs_unexc'] }}</b></div>
          <div>أنشطة: <b>{{ $girls['acts'] }}</b> · مخالفات: <b>{{ $girls['viol'] }}</b></div>
        </div>
      </div>
    @endif
  </div>

  @if($boys && $girls && $segment === 'both')
    <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow text-xs text-gray-600 dark:text-gray-300">
      <div class="font-semibold mb-1">مقارنة سريعة</div>
      <p>
        الأقرب حاليًا للولاء الذهبي:
        <b>{{ $closer }}</b>.
      </p>
    </div>
  @endif

  {{-- إرسال واتساب --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow space-y-3">
    <div class="flex items-center justify-between">
      <div>
        <h3 class="font-bold text-sm">إرسال تقرير الولاء على الواتساب</h3>
        <p class="text-[11px] text-gray-500">
          اختر نسخة سطر واحد أو تقرير معمّق. سيتم استخدام نفس الإعدادات في الأعلى (الفترة + الفئة).
        </p>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
      {{-- نسخة سطر مختصر --}}
      <form method="post" action="{{ route('superadmin.whatsapp.falcon.send') }}" class="space-y-1">
        @csrf
        <input type="hidden" name="from" value="{{ $from }}">
        <input type="hidden" name="to" value="{{ $to }}">
        <input type="hidden" name="segment" value="{{ $segment }}">
        <input type="hidden" name="mode" value="line">
        <button type="submit"
                class="w-full px-4 py-2 rounded-lg bg-sky-600 hover:bg-sky-700 text-white text-sm flex items-center justify-center gap-2">
          <i class="fa-solid fa-paper-plane text-xs"></i>
          <span>إرسال نسخة مختصرة (سطر)</span>
        </button>
      </form>

      {{-- نسخة مفصّلة --}}
      <form method="post" action="{{ route('superadmin.whatsapp.falcon.send') }}" class="space-y-1">
        @csrf
        <input type="hidden" name="from" value="{{ $from }}">
        <input type="hidden" name="to" value="{{ $to }}">
        <input type="hidden" name="segment" value="{{ $segment }}">
        <input type="hidden" name="mode" value="deep">
        <button type="submit"
                class="w-full px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white text-sm flex items-center justify-center gap-2">
          <i class="fa-solid fa-message text-xs"></i>
          <span>إرسال تقرير معمّق</span>
        </button>
      </form>
    </div>

    {{-- معاينة --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-[11px]">
      <div>
        <div class="text-gray-500 mb-1">معاينة النسخة المختصرة:</div>
        <pre class="bg-gray-50 dark:bg-gray-900 rounded-lg p-2 whitespace-pre-wrap text-[11px] leading-5 dir-rtl text-right">
{{ $previewLine }}
        </pre>
      </div>
      <div>
        <div class="text-gray-500 mb-1">معاينة النسخة المعمّقة:</div>
        <pre class="bg-gray-50 dark:bg-gray-900 rounded-lg p-2 whitespace-pre-wrap text-[11px] leading-5 dir-rtl text-right">
{{ $previewDeep }}
        </pre>
      </div>
    </div>

    @if($wa_message)
      <div class="mt-3 border-t pt-3 text-[11px]">
        <div class="text-gray-500 mb-1">آخر رسالة أُرسلت للواتساب:</div>
        <pre class="bg-yellow-50 dark:bg-yellow-900/30 rounded-lg p-2 whitespace-pre-wrap dir-rtl text-right">
{{ $wa_message }}
        </pre>
      </div>
    @endif
  </div>

</div>
@endsection