@extends('layouts.superadmin')

@section('title','مراقبة الممنوعات — الرسائل')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black py-6">
    <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-4 rtl">

        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-xl font-extrabold text-rose-200">مراقبة رسائل الممنوعات</h1>
                <p class="text-xs text-slate-300/80">فلترة + مراجعة + توثيق قرار الأدمن.</p>
            </div>
            <a href="{{ route('superadmin.messages-monitor.dashboard') }}"
               class="px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
                رجوع للوحة
            </a>
        </div>

        <form method="get" class="grid grid-cols-1 md:grid-cols-6 gap-2 rounded-3xl bg-black/30 border border-white/10 p-3">
            <div>
                <label class="text-[10px] text-slate-300/80">من</label>
                <input type="date" name="from" value="{{ $from->format('Y-m-d') }}"
                    class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2">
            </div>
            <div>
                <label class="text-[10px] text-slate-300/80">إلى</label>
                <input type="date" name="to" value="{{ $to->format('Y-m-d') }}"
                    class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2">
            </div>
            <div>
                <label class="text-[10px] text-slate-300/80">النوع</label>
                <select name="type" class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2">
                    <option value="">الكل</option>
                    @foreach($types as $t)
                        <option value="{{ $t }}" @selected(request('type')===$t)>{{ $t }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="text-[10px] text-slate-300/80">الخطورة</label>
                <select name="risk" class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2">
                    <option value="">الكل</option>
                    @foreach(['low','medium','high','critical'] as $r)
                        <option value="{{ $r }}" @selected(request('risk')===$r)>{{ $r }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="text-[10px] text-slate-300/80">الحالة</label>
                <select name="status" class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2">
                    <option value="">الكل</option>
                    @foreach(['open','reviewed','dismissed','action_taken'] as $s)
                        <option value="{{ $s }}" @selected(request('status')===$s)>{{ $s }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex items-end">
                <button class="w-full px-4 py-2 rounded-2xl text-xs font-bold text-slate-900
                    bg-gradient-to-r from-rose-200 to-fuchsia-200 hover:scale-[1.01] transition">
                    تطبيق
                </button>
            </div>
        </form>

        <div class="rounded-3xl border border-white/10 bg-slate-950/70 overflow-hidden shadow-xl">
            <table class="w-full text-sm">
                <thead class="bg-white/5">
                    <tr class="text-white/60 text-[11px] font-semibold">
                        <th class="text-right px-4 py-3">#</th>
                        <th class="text-right px-4 py-3">النوع</th>
                        <th class="text-right px-4 py-3">من → إلى</th>
                        <th class="text-right px-4 py-3">مقتطف آمن</th>
                        <th class="text-right px-4 py-3">الخطورة</th>
                        <th class="text-right px-4 py-3">حالة</th>
                        <th class="text-right px-4 py-3">إجراء</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/5">
                    @forelse($flags as $f)
                        <tr class="text-white/80 align-top">
                            <td class="px-4 py-3 font-bold text-white">#{{ $f->message_id }}</td>
                            <td class="px-4 py-3 text-rose-200 font-bold">{{ $f->primary_type }}</td>
                            <td class="px-4 py-3 text-xs text-slate-200/80">
                                {{ $f->sender->name ?? '—' }} → {{ $f->receiver->name ?? '—' }}
                            </td>
                            <td class="px-4 py-3 text-xs text-slate-200/80">{{ $f->safe_excerpt }}</td>
                            <td class="px-4 py-3">
                                <span class="px-3 py-1 rounded-full border text-[11px] font-bold
                                    bg-rose-500/10 text-rose-200 border-rose-400/25">
                                    {{ strtoupper($f->risk_level) }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-xs text-slate-200/80">{{ $f->status }}</td>
                            <td class="px-4 py-3">
                                <a href="{{ route('superadmin.messages-monitor.messages.show',$f->message_id) }}"
                                   class="inline-flex items-center px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-xs hover:bg-white/15 transition">
                                    عرض
                                </a>
                            </td>
                        </tr>

                        <tr class="bg-black/20">
                            <td colspan="7" class="px-4 py-3">
                                <form method="post" action="{{ route('superadmin.messages-monitor.forbidden.review', $f->id) }}"
                                      class="grid grid-cols-1 md:grid-cols-6 gap-2">
                                    @csrf
                                    <div class="md:col-span-1">
                                        <select name="status" class="w-full rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2">
                                            <option value="reviewed">Reviewed</option>
                                            <option value="dismissed">Dismiss</option>
                                            <option value="action_taken">Action Taken</option>
                                        </select>
                                    </div>
                                    <div class="md:col-span-4">
                                        <input name="review_note" placeholder="ملاحظة الأدمن (اختياري)"
                                            class="w-full rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2">
                                    </div>
                                    <div class="md:col-span-1">
                                        <button class="w-full px-4 py-2 rounded-2xl text-xs font-bold text-slate-900
                                            bg-gradient-to-r from-cyan-200 to-fuchsia-200 hover:scale-[1.01] transition">
                                            حفظ
                                        </button>
                                    </div>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="px-4 py-10 text-center text-slate-300/70">لا نتائج.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div>{{ $flags->links() }}</div>

    </div>
</div>
@endsection