@extends('layouts.superadmin')
@section('title', 'واتساب اللايفات والقستات')
@section('page-title', '📡 تقارير واتساب — ساعات اللايفات والقستات')

@section('content')
<div class="max-w-5xl mx-auto px-3 sm:px-6 lg:px-8 py-6 space-y-6">

    {{-- HERO --}}
    <div class="rounded-3xl bg-gradient-to-br from-slate-900 via-slate-950 to-slate-900 border border-white/10 p-5 sm:p-6 shadow-2xl relative overflow-hidden">
        <div class="pointer-events-none absolute -top-24 -left-24 w-56 h-56 rounded-full bg-indigo-500/25 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-24 -right-24 w-56 h-56 rounded-full bg-emerald-500/20 blur-3xl"></div>

        <div class="relative flex flex-col gap-3">
            <div>
                <h1 class="text-xl sm:text-2xl font-extrabold text-white">
                    تقارير واتساب — ساعات اللايفات والقستات
                </h1>
                <p class="text-sm text-slate-300 mt-1">
                    من هنا ترسّل <b>أربع تقارير جاهزة</b> لجروب الواتساب: ملخص عام، أفضل الأعضاء،
                    سهرات التيم، وإحصائيات القستات — مع زر نسخ لكل رسالة.
                </p>
            </div>

            <div class="flex flex-wrap gap-2 text-[11px] text-slate-200">
                <span class="px-2 py-1 rounded-full bg-black/40 border border-white/10">
                    الفترة الحالية: {{ $from }} → {{ $to }}
                </span>
                <span class="px-2 py-1 rounded-full bg-black/40 border border-white/10">
                    أعضاء لديهم نشاط: {{ $totals['members'] }}
                </span>
                <span class="px-2 py-1 rounded-full bg-black/40 border border-white/10">
                    إجمالي الساعات: {{ $totals['total_hours'] }} ساعة
                </span>
            </div>
        </div>
    </div>

    {{-- Flash messages --}}
    @if (session('success'))
        <div class="rounded-2xl bg-emerald-500/15 border border-emerald-500/40 px-4 py-3 text-sm text-emerald-100">
            <i class="fa-solid fa-circle-check me-1"></i> {!! session('success') !!}
        </div>
    @endif
    @if (session('error'))
        <div class="rounded-2xl bg-rose-500/15 border border-rose-500/40 px-4 py-3 text-sm text-rose-100">
            <i class="fa-solid fa-triangle-exclamation me-1"></i> {!! session('error') !!}
        </div>
    @endif

    {{-- Filters (فترة التقرير فقط) --}}
    <form method="GET" class="rounded-2xl bg-slate-900/90 border border-white/10 px-4 py-4 space-y-3">
        <div class="grid grid-cols-1 sm:grid-cols-4 gap-3">
            <div>
                <label class="block text-xs text-slate-300 mb-1">من تاريخ</label>
                <input type="date" name="from" value="{{ $from }}"
                       class="w-full rounded-xl bg-black/30 border border-white/10 text-white px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-xs text-slate-300 mb-1">إلى تاريخ</label>
                <input type="date" name="to" value="{{ $to }}"
                       class="w-full rounded-xl bg-black/30 border border-white/10 text-white px-3 py-2 text-sm">
            </div>
            <div class="sm:col-span-2 flex items-end gap-2">
                <button type="submit"
                        class="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold
                               bg-indigo-600/90 hover:bg-indigo-500 text-white">
                    <i class="fa-solid fa-rotate text-xs"></i> تحديث الإحصائيات
                </button>
            </div>
        </div>

        <p class="mt-1 text-[11px] text-slate-400">
            يتم بناء تقارير الواتساب من نفس خوارزميات ساعات اللايفات والقستات في النظام، ولا يتم تخزين أي شيء إضافي.
        </p>
    </form>

    {{-- أربع أزرار / كروت واتساب --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

        @foreach($templates as $key => $tpl)
            @php
                $tone = $tpl['tone'] ?? 'neutral';
                $btn =
                    $tone === 'danger'  ? 'bg-rose-600/90 hover:bg-rose-500' :
                    ($tone === 'success'? 'bg-emerald-600/90 hover:bg-emerald-500' :
                    ($tone === 'warning'? 'bg-amber-500/90 hover:bg-amber-400 text-black' :
                    ($tone === 'info'   ? 'bg-sky-600/90 hover:bg-sky-500' :
                                          'bg-indigo-600/90 hover:bg-indigo-500')));
                $chip =
                    $tone === 'danger'  ? 'bg-rose-500/20 text-rose-200 border-rose-500/30' :
                    ($tone === 'success'? 'bg-emerald-500/20 text-emerald-200 border-emerald-500/30' :
                    ($tone === 'warning'? 'bg-amber-400/20 text-amber-200 border-amber-400/30' :
                    ($tone === 'info'   ? 'bg-sky-500/20 text-sky-200 border-sky-500/30' :
                                          'bg-white/5 text-white/70 border-white/10')));
            @endphp

            <div class="rounded-2xl bg-slate-900/90 border border-white/10 p-4 shadow-lg">
                <div class="flex items-start gap-3">
                    <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-white/5 border border-white/10">
                        <i class="fa-solid {{ $tpl['icon'] ?? 'fa-bullhorn' }} text-sm text-white/90"></i>
                    </span>

                    <div class="flex-1">
                        <div class="flex items-center justify-between gap-2">
                            <h3 class="font-bold text-white text-sm sm:text-[15px]">{{ $tpl['title'] }}</h3>
                            <span class="text-[11px] px-2 py-1 rounded-lg border {{ $chip }}">
                                جاهز للواتساب
                            </span>
                        </div>
                        <p class="text-[12px] text-slate-300 mt-1 leading-relaxed">
                            {{ $tpl['desc'] ?? '' }}
                        </p>

                        <div class="mt-3 flex flex-col sm:flex-row gap-2">
                            {{-- زر الإرسال --}}
                            <form method="POST" action="{{ route('superadmin.whatsapp.lives.send') }}" class="w-full">
                                @csrf
                                <input type="hidden" name="key" value="{{ $key }}">
                                <input type="hidden" name="from" value="{{ $from }}">
                                <input type="hidden" name="to" value="{{ $to }}">

                                <button type="submit"
                                        class="w-full inline-flex items-center justify-center gap-2 px-3 py-2 rounded-xl text-sm font-semibold text-white {{ $btn }}">
                                    <i class="fa-solid fa-paper-plane text-xs"></i>
                                    إرسال للجروب الآن
                                </button>
                            </form>

                            {{-- زر النسخ --}}
                            <button type="button"
                                    class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-3 py-2 rounded-xl text-sm font-semibold bg-white/5 hover:bg-white/10 text-white border border-white/10"
                                    onclick="copyWaTemplate(@js($tpl['message']), this)">
                                <i class="fa-regular fa-copy text-xs"></i>
                                <span class="txt">نسخ النص</span>
                            </button>
                        </div>

                        <details class="mt-3">
                            <summary class="cursor-pointer text-xs text-slate-400 hover:text-slate-100">
                                معاينة رسالة الواتساب
                            </summary>
                            <pre class="mt-2 text-[11px] whitespace-pre-wrap rounded-xl bg-black/30 border border-white/10 p-3 text-slate-100 overflow-auto">{{ $tpl['message'] }}</pre>
                        </details>
                    </div>
                </div>
            </div>
        @endforeach

    </div>

    {{-- آخر رسالة أُرسلت (للتأكد) --}}
    @if(!empty($wa_message))
        <div class="mt-4 rounded-2xl bg-slate-900/90 border border-white/10 p-4">
            <div class="flex items-center justify-between gap-2">
                <h3 class="font-bold text-white text-sm">آخر رسالة واتساب تم تجهيزها/إرسالها</h3>
                <button type="button"
                        class="text-[11px] px-3 py-1.5 rounded-full bg-white/5 hover:bg-white/10 text-white border border-white/10"
                        onclick="copyWaTemplate(@js($wa_message), this)">
                    نسخ
                </button>
            </div>
            <pre class="mt-2 text-[11px] whitespace-pre-wrap rounded-xl bg-black/30 border border-white/10 p-3 text-slate-100 overflow-auto">{{ $wa_message }}</pre>
        </div>
    @endif

</div>

<script>
function copyWaTemplate(text, btn){
    navigator.clipboard.writeText(text || '')
        .then(() => {
            if (btn) {
                const span = btn.querySelector('.txt') || btn;
                const old  = span.innerText;
                span.innerText = '✅ تم النسخ';
                setTimeout(() => span.innerText = old, 1200);
            } else {
                alert('✅ تم النسخ');
            }
        })
        .catch(() => {
            alert('❌ فشل النسخ، حاول يدويًا.');
        });
}
</script>
@endsection