@extends('layouts.superadmin')

@section('title','تقارير الاختبارات — واتساب')
@section('page-title','📚 تقارير الاختبارات — تكامل واتساب')

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

    {{-- فلاش رسائل --}}
    @if(session('success'))
        <div class="bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm rounded-lg px-4 py-2">
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="bg-rose-50 border border-rose-200 text-rose-800 text-sm rounded-lg px-4 py-2">
            {{ session('error') }}
        </div>
    @endif

    {{-- شرح --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm">
        <h2 class="font-extrabold text-lg mb-2 text-gray-900 dark:text-gray-50">
            تقارير الاختبارات الأسبوعية — واتساب
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 leading-6">
            من هنا تقدر تطلع <b>تقارير جاهزة</b> عن الاختبارات، ويتم إرسالها مباشرة إلى جروب الواتساب
            عبر البوت المتصل بالنظام.
        </p>
        <p class="mt-2 text-[11px] text-gray-500 dark:text-gray-400">
            يتم الاعتماد على جدول <code>weekly_test_submissions</code> حيث <code>score</code> هي النسبة المئوية (0–100).
        </p>
    </div>

    {{-- فلاتر --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm">
        <form method="GET" class="grid grid-cols-1 md:grid-cols-5 gap-3">
            <div>
                <label class="block text-xs text-gray-500 mb-1">من تاريخ</label>
                <input type="date" name="from" value="{{ $from }}"
                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 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-lg border-gray-300 dark:border-gray-600 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="pass_score" value="{{ $passScore }}" min="0" max="100"
                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 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-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm">
            </div>
            <div class="flex items-end">
                <button type="submit"
                        class="w-full inline-flex items-center justify-center px-4 py-2.5 rounded-lg
                               bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold shadow-sm">
                    تحديث النتائج ⟳
                </button>
            </div>
        </form>
        <p class="mt-2 text-[11px] text-gray-500 dark:text-gray-400">
            الفترة الحالية: <b>{{ $from }}</b> → <b>{{ $to }}</b> ({{ $rangeDays }} يومًا)
        </p>
    </div>

    {{-- ملخص سريع --}}
    <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
        <div class="rounded-xl p-4 bg-gradient-to-br from-emerald-50 to-emerald-100 dark:from-emerald-900/20 dark:to-emerald-800/20 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">
                {{ $global['total_attempts'] ?? 0 }}
            </div>
        </div>
        <div class="rounded-xl p-4 bg-gradient-to-br from-sky-50 to-sky-100 dark:from-sky-900/20 dark:to-sky-800/20 border-r-4 border-sky-500">
            <div class="text-xs text-sky-700 dark:text-sky-200">متوسط العلامة العامة</div>
            <div class="text-2xl font-extrabold mt-1 text-sky-900 dark:text-sky-50">
                {{ $global['avg_score'] ?? 0 }}%
            </div>
        </div>
        <div class="rounded-xl p-4 bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-indigo-900/20 dark:to-indigo-800/20 border-r-4 border-indigo-500">
            <div class="text-xs text-indigo-700 dark:text-indigo-200">نسبة النجاح</div>
            <div class="text-2xl font-extrabold mt-1 text-indigo-900 dark:text-indigo-50">
                {{ $global['pass_rate'] ?? 0 }}%
            </div>
        </div>
        <div class="rounded-xl p-4 bg-gradient-to-br from-rose-50 to-rose-100 dark:from-rose-900/20 dark:to-rose-800/20 border-r-4 border-rose-500">
            <div class="text-xs text-rose-700 dark:text-rose-200">نسبة الرسوب</div>
            <div class="text-2xl font-extrabold mt-1 text-rose-900 dark:text-rose-50">
                {{ $global['fail_rate'] ?? 0 }}%
            </div>
        </div>
    </div>

    {{-- كارت: ملخص عام --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm space-y-3">
        <div class="flex items-center justify-between gap-3">
            <div>
                <h3 class="font-bold text-gray-900 dark:text-gray-50">
                    🧾 تقرير ملخص عام للاختبارات
                </h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    عدد المحاولات، متوسط العلامة، نسب النجاح والرسوب، ومتوسطات حسب الفئة.
                </p>
            </div>
            <form method="POST" action="{{ route('superadmin.whatsapp.tests.send') }}">
                @csrf
                <input type="hidden" name="type" value="summary">
                <input type="hidden" name="from" value="{{ $from }}">
                <input type="hidden" name="to" value="{{ $to }}">
                <input type="hidden" name="limit" value="{{ $limit }}">
                <input type="hidden" name="pass_score" value="{{ $passScore }}">
                <button type="submit"
                        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-800 hover:bg-slate-900 text-white text-xs font-semibold shadow">
                    📩 إرسال الملخص إلى الواتساب
                </button>
            </form>
        </div>
    </div>

    {{-- كارت: أفضل الأعضاء --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm space-y-3">
        <div class="flex items-center justify-between gap-3">
            <div>
                <h3 class="font-bold text-gray-900 dark:text-gray-50">
                    🏆 أفضل الأعضاء في الاختبارات
                </h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    أعلى {{ $limit }} عضو حسب متوسط العلامة.
                </p>
            </div>
            <form method="POST" action="{{ route('superadmin.whatsapp.tests.send') }}">
                @csrf
                <input type="hidden" name="type" value="top_members">
                <input type="hidden" name="from" value="{{ $from }}">
                <input type="hidden" name="to" value="{{ $to }}">
                <input type="hidden" name="limit" value="{{ $limit }}">
                <input type="hidden" name="pass_score" value="{{ $passScore }}">
                <button type="submit"
                        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold shadow">
                    📩 إرسال ترتيب الأعضاء للواتساب
                </button>
            </form>
        </div>

        <div class="space-y-2 text-sm">
            @forelse($topMembers->take(10) as $i => $row)
                <div class="flex items-center justify-between">
                    <div class="truncate">
                        <span class="text-gray-400 text-xs">#{{ $i+1 }}</span>
                        <span class="font-semibold text-gray-800 dark:text-gray-100">
                            {{ $row->user->name ?? 'عضو' }}
                        </span>
                    </div>
                    <div class="text-[11px] text-gray-500 dark:text-gray-400">
                        معدل {{ $row->avg_score }}% • {{ $row->attempts }} محاولة
                    </div>
                </div>
            @empty
                <div class="text-xs text-gray-500 dark:text-gray-400">
                    لا توجد بيانات لمحاولات الاختبارات في هذه الفترة.
                </div>
            @endforelse
        </div>
    </div>

    {{-- كارت: الأعضاء الأضعف --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm space-y-3">
        <div class="flex items-center justify-between gap-3">
            <div>
                <h3 class="font-bold text-gray-900 dark:text-gray-50">
                    📉 الأعضاء الأضعف في الاختبارات
                </h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    يساعدك تعرف مين محتاج دعم ومتابعة خاصة.
                </p>
            </div>
            <form method="POST" action="{{ route('superadmin.whatsapp.tests.send') }}">
                @csrf
                <input type="hidden" name="type" value="weak_members">
                <input type="hidden" name="from" value="{{ $from }}">
                <input type="hidden" name="to" value="{{ $to }}">
                <input type="hidden" name="limit" value="{{ $limit }}">
                <input type="hidden" name="pass_score" value="{{ $passScore }}">
                <button type="submit"
                        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-xs font-semibold shadow">
                    📩 إرسال تقرير الأضعف للواتساب
                </button>
            </form>
        </div>

        <div class="space-y-2 text-sm">
            @forelse($weakMembers->take(10) as $i => $row)
                <div class="flex items-center justify-between">
                    <div class="truncate">
                        <span class="text-gray-400 text-xs">#{{ $i+1 }}</span>
                        <span class="font-semibold text-gray-800 dark:text-gray-100">
                            {{ $row->user->name ?? 'عضو' }}
                        </span>
                    </div>
                    <div class="text-[11px] text-gray-500 dark:text-gray-400">
                        معدل {{ $row->avg_score }}% • {{ $row->attempts }} محاولة
                    </div>
                </div>
            @empty
                <div class="text-xs text-gray-500 dark:text-gray-400">
                    لا توجد بيانات كافية لعرض أعضاء ضعفاء.
                </div>
            @endforelse
        </div>
    </div>

    {{-- كارت: ترتيب الاختبارات --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm space-y-3">
        <div class="flex items-center justify-between gap-3">
            <div>
                <h3 class="font-bold text-gray-900 dark:text-gray-50">
                    📊 ترتيب الاختبارات (الأسهل والأصعب)
                </h3>
            </div>
            <form method="POST" action="{{ route('superadmin.whatsapp.tests.send') }}">
                @csrf
                <input type="hidden" name="type" value="tests_overview">
                <input type="hidden" name="from" value="{{ $from }}">
                <input type="hidden" name="to" value="{{ $to }}">
                <input type="hidden" name="limit" value="{{ $limit }}">
                <input type="hidden" name="pass_score" value="{{ $passScore }}">
                <button type="submit"
                        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-purple-600 hover:bg-purple-700 text-white text-xs font-semibold shadow">
                    📩 إرسال تقرير الاختبارات للواتساب
                </button>
            </form>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
            <div>
                <div class="text-xs font-semibold text-emerald-700 dark:text-emerald-300 mb-1">
                    أعلى الاختبارات معدلًا
                </div>
                @forelse($topTests as $i => $t)
                    <div class="flex items-center justify-between">
                        <span class="truncate text-gray-800 dark:text-gray-100">
                            #{{ $i+1 }} {{ $t->test->title ?? 'اختبار' }}
                        </span>
                        <span class="text-[11px] text-gray-500 dark:text-gray-400">
                            {{ $t->avg_score }}% • {{ $t->total_attempts }} محاولة
                        </span>
                    </div>
                @empty
                    <div class="text-xs text-gray-500 dark:text-gray-400">لا توجد بيانات.</div>
                @endforelse
            </div>
            <div>
                <div class="text-xs font-semibold text-rose-700 dark:text-rose-300 mb-1">
                    أكثر الاختبارات صعوبة
                </div>
                @forelse($hardTests as $i => $t)
                    <div class="flex items-center justify-between">
                        <span class="truncate text-gray-800 dark:text-gray-100">
                            #{{ $i+1 }} {{ $t->test->title ?? 'اختبار' }}
                        </span>
                        <span class="text-[11px] text-gray-500 dark:text-gray-400">
                            رسوب {{ $t->fail_rate }}% • معدل {{ $t->avg_score }}%
                        </span>
                    </div>
                @empty
                    <div class="text-xs text-gray-500 dark:text-gray-400">لا توجد بيانات.</div>
                @endforelse
            </div>
        </div>
    </div>

    {{-- textarea: آخر رسالة واتساب مبعوثة/جاهزة --}}
    @if($wa_message)
        <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
            <div class="flex items-center justify-between mb-2">
                <span class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                    نص رسالة الواتساب (آخر تقرير تم تجهيزه / إرساله)
                </span>
                <span class="text-[11px] text-gray-500 dark:text-gray-400">
                    بدون أي روابط أو توقيع، جاهز للنسخ.
                </span>
            </div>
            <textarea rows="10"
                      class="w-full text-xs md:text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-white p-3"
                      readonly>{{ $wa_message }}</textarea>
        </div>
    @endif

</div>
@endsection