{{-- resources/views/superadmin/loyalty/index.blade.php --}}

@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-3 shadow-sm">
        <form method="GET" class="flex flex-col sm:flex-row items-start sm:items-center gap-3 text-sm">
            <div class="flex items-center gap-2">
                <label class="text-gray-700 dark:text-gray-300">من:</label>
                <input type="date" name="from" value="{{ request('from', $from) }}"
                       class="px-2 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-sm
                              dark:bg-gray-700 dark:text-white focus:outline-none focus:ring-2 focus:ring-amber-500">
            </div>
            <div class="flex items-center gap-2">
                <label class="text-gray-700 dark:text-gray-300">إلى:</label>
                <input type="date" name="to" value="{{ request('to', $to) }}"
                       class="px-2 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-sm
                              dark:bg-gray-700 dark:text-white focus:outline-none focus:ring-2 focus:ring-amber-500">
            </div>
            <button type="submit"
                    class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-amber-500 hover:bg-amber-600
                           text-white text-xs font-semibold shadow-sm mt-1 sm:mt-0">
                <i class="fa-solid fa-rotate-right text-[10px]"></i>
                تحديث الفترة
            </button>
        </form>
    </div>

    {{-- شرح مبسّط --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
        يقيس <b>مؤشر الولاء</b> ولاء الأعضاء عبر (التواجد، الأنشطة، النقاط) ويخصم من (المخالفات والغياب غير المبرر).  
        الفترة: <b>{{ $from }}</b> → <b>{{ $to }}</b> ({{ $days }} يومًا).  
    </div>
{{-- فلتر الفترة + زر إرسال الواتساب --}}
<div class="bg-white dark:bg-gray-800 rounded-xl p-3 shadow-sm flex flex-col gap-3">

  {{-- فلتر التاريخ --}}
  <form method="GET"
        class="flex flex-col sm:flex-row items-start sm:items-center gap-3 text-sm">
    <div class="flex items-center gap-2">
      <label class="text-gray-700 dark:text-gray-300">من:</label>
      <input type="date" name="from" value="{{ request('from', $from) }}"
             class="px-2 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-sm
                    dark:bg-gray-700 dark:text-white focus:outline-none focus:ring-2 focus:ring-amber-500">
    </div>
    <div class="flex items-center gap-2">
      <label class="text-gray-700 dark:text-gray-300">إلى:</label>
      <input type="date" name="to" value="{{ request('to', $to) }}"
             class="px-2 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-sm
                    dark:bg-gray-700 dark:text-white focus:outline-none focus:ring-2 focus:ring-amber-500">
    </div>
    <button type="submit"
            class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-amber-500 hover:bg-amber-600
                   text-white text-xs font-semibold shadow-sm mt-1 sm:mt-0">
      <i class="fa-solid fa-rotate-right text-[10px]"></i>
      تحديث الفترة
    </button>
  </form>

  {{-- زر إرسال تقرير مؤشر الولاء للجروب على الواتساب --}}
  <form method="POST"
        action="{{ route('superadmin.loyalty.whatsapp.send') }}"
        class="flex flex-col sm:flex-row items-start sm:items-center gap-2 text-xs sm:text-sm">
    @csrf
    {{-- نثبت نفس الفترة اللي ظاهرة فوق --}}
    <input type="hidden" name="from" value="{{ $from }}">
    <input type="hidden" name="to"   value="{{ $to }}">

    <button type="submit"
            class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg
                   bg-emerald-600 hover:bg-emerald-700 text-white font-semibold shadow-sm">
      <i class="fa-brands fa-whatsapp text-[13px]"></i>
      إرسال تقرير مؤشر الولاء للجروب على واتساب
    </button>

    <span class="text-gray-500 dark:text-gray-400">
      سيتم إرسال إحصائيات الفترة الحالية ({{
        $from
      }} → {{
        $to
      }}) تلقائيًا للجروب المحدد في البوت.
    </span>
  </form>
</div>

    {{-- ملخص: الشباب vs الصبايا --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
        <div class="rounded-xl p-4 bg-gradient-to-br from-yellow-50 to-yellow-100 dark:from-yellow-900/20 dark:to-yellow-800/20 border-r-4 border-yellow-400">
            <div class="text-xs text-gray-600 dark:text-gray-300">الأقرب للولاء الذهبي</div>
            <div class="text-2xl font-extrabold mt-1 text-gray-900 dark:text-white">{{ $closer }}</div>
        </div>
        <div class="rounded-xl p-4 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 border-r-4 border-blue-400">
            <div class="text-xs text-gray-600 dark:text-gray-300">ولاء الشباب</div>
            <div class="text-2xl font-extrabold mt-1 text-blue-700 dark:text-blue-300">{{ number_format($boys['loyal'],1) }}</div>
        </div>
        <div class="rounded-xl p-4 bg-gradient-to-br from-pink-50 to-pink-100 dark:from-pink-900/20 dark:to-pink-800/20 border-r-4 border-pink-400">
            <div class="text-xs text-gray-600 dark:text-gray-300">ولاء الصبايا</div>
            <div class="text-2xl font-extrabold mt-1 text-pink-700 dark:text-pink-300">{{ number_format($girls['loyal'],1) }}</div>
        </div>
    </div>

    {{-- مقارنة المؤشرات الرئيسية --}}
    @php
        $rows = [
            ['label'=>'عدد الأعضاء','b'=>$boys['users'],'g'=>$girls['users']],
            ['label'=>'إجمالي الدقائق','b'=>$boys['minutes'],'g'=>$girls['minutes']],
            ['label'=>'دقائق/فرد','b'=>$boys['min_per_user'],'g'=>$girls['min_per_user']],
            ['label'=>'إجمالي النقاط','b'=>$boys['points'],'g'=>$girls['points']],
            ['label'=>'نقاط/فرد','b'=>$boys['pts_per_user'],'g'=>$girls['pts_per_user']],
            ['label'=>'المشاركات','b'=>$boys['acts'],'g'=>$girls['acts']],
            ['label'=>'الحضور المعتمد','b'=>$boys['present'],'g'=>$girls['present']],
            ['label'=>'غياب غير مبرر (أقل أفضل)','b'=>$boys['abs_unexc'],'g'=>$girls['abs_unexc']],
            ['label'=>'المخالفات (أقل أفضل)','b'=>$boys['viol'],'g'=>$girls['viol']],
        ];
    @endphp

    <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow overflow-x-auto">
        <table class="min-w-full text-sm">
            <thead class="bg-gray-50 dark:bg-gray-900 text-gray-600 dark:text-gray-300">
                <tr>
                    <th class="p-2 text-right">المؤشر</th>
                    <th class="p-2 text-center">الشباب</th>
                    <th class="p-2 text-center">الصبايا</th>
                    <th class="p-2 text-center">الأفضل</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                @foreach($rows as $r)
                    @php
                        $b = $r['b']; 
                        $g = $r['g'];

                        $better = $b == $g ? 'متقارب' : (
                            in_array($r['label'], ['غياب غير مبرر (أقل أفضل)','المخالفات (أقل أفضل)'])
                                ? ($b < $g ? 'الشباب' : 'الصبايا')
                                : ($b > $g ? 'الشباب' : 'الصبايا')
                        );

                        $color = $better === 'الشباب' 
                            ? 'text-blue-600 dark:text-blue-300' 
                            : ($better === 'الصبايا' 
                                ? 'text-pink-600 dark:text-pink-300' 
                                : 'text-gray-500 dark:text-gray-400');
                    @endphp
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/60">
                        <td class="p-2 font-medium text-gray-800 dark:text-white">{{ $r['label'] }}</td>
                        <td class="p-2 text-center">
                            {{ is_numeric($b) ? number_format($b, fmod($b,1)!=0?1:0) : $b }}
                        </td>
                        <td class="p-2 text-center">
                            {{ is_numeric($g) ? number_format($g, fmod($g,1)!=0?1:0) : $g }}
                        </td>
                        <td class="p-2 text-center font-bold {{ $color }}">{{ $better }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- ملاحظات تفسيرية --}}
    <div class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">
        <p>⭐ يتم احتساب <b>مؤشر الولاء</b> من: (دقائق/فرد × 30%) + (أنشطة × 20%) + (نقاط/فرد × 25%) − (مخالفات × 15%) − (غياب غير مبرر × 10%).</p>
        <p>📱 الصفحة متجاوبة بالكامل مع الهاتف: البطاقات تتكدّس، والجداول تنسحب أفقيًا.</p>
    </div>

</div>
@endsection