@extends('layouts.superadmin')

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

    {{-- عنوان الصفحة --}}
    <div class="rounded-3xl bg-gradient-to-l from-slate-950 via-slate-900 to-slate-950 border border-white/10 shadow-lg px-4 sm:px-6 py-4">
        <div class="flex items-center justify-between gap-3">
            <div>
                <h1 class="text-lg sm:text-xl font-extrabold text-white flex items-center gap-2">
                    <span class="inline-flex items-center justify-center w-8 h-8 rounded-2xl bg-indigo-500/80">
                        <i class="fa-solid fa-server text-xs text-white"></i>
                    </span>
                    <span>إشعارات النظام (واتساب)</span>
                </h1>
                <p class="text-xs sm:text-sm text-white/70 mt-1 leading-relaxed">
                    كبسات جاهزة لإرسال رسائل رسمية عن حالة التطبيق والسيرفر والذكاء الاصطناعي مباشرة إلى الجروب،
                    بجملة واحدة منك: “إرسال للجروب الآن”.
                </p>
            </div>
            <div class="hidden sm:flex flex-col items-end gap-1 text-[11px] text-white/70">
                <span class="px-2 py-1 rounded-lg bg-white/10 border border-white/15">
                    ⚙️ رسائل ثابتة ومنسّقة للواتساب
                </span>
                <span class="px-2 py-1 rounded-lg bg-white/10 border border-white/15">
                    🚫 بدون روابط إضافية داخل النص
                </span>
            </div>
        </div>
    </div>

    {{-- Alerts --}}
    @if (session('success'))
        <div class="p-3 rounded-xl bg-emerald-500/10 border border-emerald-500/40 text-emerald-100 text-sm flex items-center gap-2">
            <i class="fa-solid fa-circle-check text-emerald-300 text-sm"></i>
            <span>{!! session('success') !!}</span>
        </div>
    @endif

    @if (session('error'))
        <div class="p-3 rounded-xl bg-rose-500/10 border border-rose-500/40 text-rose-100 text-sm flex items-center gap-2">
            <i class="fa-solid fa-triangle-exclamation text-rose-300 text-sm"></i>
            <span>{!! session('error') !!}</span>
        </div>
    @endif

    {{-- الشبكة --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

        @foreach($templates as $key => $t)
            @php
                $tone = $t['tone'] ?? 'neutral';

                $cardBg =
                    $tone === 'danger'  ? 'from-rose-950/90 via-rose-900/90 to-slate-950/90 border-rose-500/40' :
                    ($tone === 'success'? 'from-emerald-950/90 via-emerald-900/90 to-slate-950/90 border-emerald-500/35' :
                    ($tone === 'warning'? 'from-amber-950/90 via-amber-900/90 to-slate-950/90 border-amber-400/40' :
                    ($tone === 'info'   ? 'from-sky-950/90 via-sky-900/90 to-slate-950/90 border-sky-500/35' :
                                          'from-slate-950/90 via-slate-900/90 to-slate-950/90 border-slate-500/25')));

                $btn =
                    $tone === 'danger'  ? 'bg-rose-600 hover:bg-rose-500' :
                    ($tone === 'success'? 'bg-emerald-600 hover:bg-emerald-500' :
                    ($tone === 'warning'? 'bg-amber-500 hover:bg-amber-400 text-slate-900' :
                    ($tone === 'info'   ? 'bg-sky-600 hover:bg-sky-500' :
                                          'bg-indigo-600 hover:bg-indigo-500')));

                $chip =
                    $tone === 'danger'  ? 'bg-rose-500/15 text-rose-100 border-rose-400/50' :
                    ($tone === 'success'? 'bg-emerald-500/15 text-emerald-100 border-emerald-400/50' :
                    ($tone === 'warning'? 'bg-amber-400/15 text-amber-50 border-amber-300/70' :
                    ($tone === 'info'   ? 'bg-sky-500/15 text-sky-100 border-sky-400/50' :
                                          'bg-white/5 text-white/70 border-white/15')));
            @endphp

            <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br {{ $cardBg }} shadow-lg border backdrop-blur-md">
                <div class="absolute -top-16 -left-10 w-32 h-32 rounded-full bg-white/5 blur-3xl pointer-events-none"></div>
                <div class="absolute -bottom-20 -right-16 w-40 h-40 rounded-full bg-white/5 blur-3xl pointer-events-none"></div>

                <div class="relative p-4 flex items-start gap-3">
                    <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-black/30 border border-white/20 shadow">
                        <i class="fa-solid {{ $t['icon'] ?? 'fa-bullhorn' }} text-sm text-white"></i>
                    </span>

                    <div class="flex-1 space-y-2">
                        <div class="flex items-start justify-between gap-2">
                            <div>
                                <h3 class="font-bold text-sm sm:text-base text-white">
                                    {{ $t['title'] }}
                                </h3>
                                @if(!empty($t['desc']))
                                    <p class="text-[11px] sm:text-xs text-white/70 mt-1 leading-relaxed">
                                        {{ $t['desc'] }}
                                    </p>
                                @endif
                            </div>
                            <span class="text-[10px] px-2 py-1 rounded-lg border {{ $chip }} whitespace-nowrap">
                                جاهز للإرسال
                            </span>
                        </div>

                        <div class="mt-2 flex flex-col sm:flex-row gap-2">
                            <form method="POST" action="{{ route('superadmin.whatsapp.system.send') }}" class="w-full sm:w-auto flex-1">
                                @csrf
                                <input type="hidden" name="key" value="{{ $key }}">
                                <button type="submit"
                                        class="w-full inline-flex items-center justify-center gap-2 px-3 py-2 rounded-xl text-[13px] font-semibold text-white {{ $btn }}">
                                    <i class="fa-solid fa-paper-plane text-xs"></i>
                                    <span>إرسال للجروب الآن</span>
                                </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-[12px] font-semibold bg-black/30 hover:bg-black/40 text-white border border-white/20"
                                    onclick="navigator.clipboard.writeText(@js($t['message'])); this.innerText='✅ تم النسخ'; setTimeout(()=>this.innerText='نسخ النص',1200);">
                                <i class="fa-regular fa-copy text-xs"></i>
                                <span>نسخ النص</span>
                            </button>
                        </div>

                        <details class="mt-2 group">
                            <summary class="cursor-pointer text-[11px] text-white/60 group-hover:text-white/90 flex items-center gap-1 select-none">
                                <i class="fa-solid fa-eye text-[9px] opacity-80"></i>
                                <span>معاينة الرسالة</span>
                            </summary>
                            <pre class="mt-2 text-[11px] whitespace-pre-wrap rounded-xl bg-black/40 border border-white/15 p-3 text-white/85 max-h-52 overflow-auto">
{{ $t['message'] }}
                            </pre>
                        </details>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- آخر رسالة --}}
    @if(!empty($wa_message))
        <div class="mt-5 rounded-2xl bg-slate-950/80 border border-white/15 p-4 shadow-lg backdrop-blur-md">
            <div class="flex items-center justify-between gap-2 mb-2">
                <h3 class="font-bold text-sm sm:text-base text-white">📨 آخر رسالة تم إرسالها (للتأكيد)</h3>
                <button type="button"
                        class="text-[11px] px-3 py-1.5 rounded-xl bg-white/5 hover:bg-white/10 text-white border border-white/20"
                        onclick="navigator.clipboard.writeText(@js($wa_message)); this.innerText='✅ تم النسخ'; setTimeout(()=>this.innerText='نسخ',1200);">
                    نسخ
                </button>
            </div>
            <pre class="mt-1 text-[11px] whitespace-pre-wrap rounded-xl bg-black/40 border border-white/10 p-3 text-white/85 max-h-60 overflow-auto">
{{ $wa_message }}
            </pre>
        </div>
    @endif

</div>
@endsection