@extends('layouts.superadmin')

@section('title','موجز قرارات القيادة عبر الواتساب')
@section('page-title','🛡️ موجز قرارات القيادة عبر الواتساب')

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

    {{-- تعريف بسيط --}}
    <div class="bg-white dark:bg-slate-900 rounded-2xl shadow border border-slate-200/70 dark:border-slate-700/70 p-4 sm:p-5">
        <h2 class="text-base sm:text-lg font-bold text-slate-900 dark:text-slate-50 mb-2">
            ما هو هذا النظام؟
        </h2>
        <p class="text-xs sm:text-sm text-slate-600 dark:text-slate-300 leading-relaxed">
            يسمح لك هذا النظام باختيار <b>قرار واحد</b> أو <b>عدة قرارات</b> من
            <span class="font-semibold">قرارات القيادة العليا</span>
            مع إمكانية إرفاق <b>رسائل الإدارة</b>،
            وتحويلها إلى <b>رسالة واتساب منسّقة</b> تُرسل مباشرة إلى جروب القيادة بدون روابط، مع توقيع واضح.
        </p>
    </div>

    {{-- اختيار وضع الإرسال --}}
    <div class="bg-white dark:bg-slate-900 rounded-2xl shadow border border-slate-200/70 dark:border-slate-700/70 p-4 sm:p-5">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
            <div class="col-span-1 md:col-span-3 mb-1">
                <div class="text-xs font-semibold text-slate-700 dark:text-slate-200 mb-1">
                    وضع الإرسال
                </div>
                <p class="text-[11px] text-slate-500 dark:text-slate-400">
                    يمكنك إرسال قرار واحد، عدّة قرارات، أو كل القرارات الفعّالة مع الرسائل الإدارية المنشورة.
                </p>
            </div>

            <label class="flex items-start gap-2 rounded-xl border border-slate-200 dark:border-slate-700 p-3 cursor-pointer">
                <input type="radio" name="mode_visible" checked
                       class="mt-1 text-indigo-600 border-slate-300 focus:ring-indigo-500"
                       onclick="document.getElementById('mode-input-selected').checked = true;">
                <div>
                    <div class="text-xs sm:text-sm font-semibold text-slate-900 dark:text-slate-50">
                        حسب الاختيار اليدوي
                    </div>
                    <div class="text-[11px] text-slate-500 dark:text-slate-400">
                        اختر قرار واحد أو عدّة قرارات، مع رسائل إدارية محددة من الجداول بالأسفل.
                    </div>
                </div>
            </label>

            <label class="flex items-start gap-2 rounded-xl border border-slate-200 dark:border-slate-700 p-3 cursor-pointer">
                <input type="radio" name="mode_visible"
                       class="mt-1 text-indigo-600 border-slate-300 focus:ring-indigo-500"
                       onclick="document.getElementById('mode-input-active').checked = true;">
                <div>
                    <div class="text-xs sm:text-sm font-semibold text-slate-900 dark:text-slate-50">
                        كل القرارات الفعّالة فقط
                    </div>
                    <div class="text-[11px] text-slate-500 dark:text-slate-400">
                        يجمع كل القرارات التي حالتها <b>فعّال</b> ويرسلها كموجز واحد بدون رسائل إدارية.
                    </div>
                </div>
            </label>

            <label class="flex items-start gap-2 rounded-xl border border-slate-200 dark:border-slate-700 p-3 cursor-pointer">
                <input type="radio" name="mode_visible"
                       class="mt-1 text-indigo-600 border-slate-300 focus:ring-indigo-500"
                       onclick="document.getElementById('mode-input-all').checked = true;">
                <div>
                    <div class="text-xs sm:text-sm font-semibold text-slate-900 dark:text-slate-50">
                        القرارات الفعّالة + رسائل الإدارة
                    </div>
                    <div class="text-[11px] text-slate-500 dark:text-slate-400">
                        يرسل كل القرارات الفعّالة مرفقة بأحدث الرسائل الإدارية المنشورة
                        (مناسب لتحديث أسبوعي شامل).
                    </div>
                </div>
            </label>
        </div>
    </div>

    {{-- الجداول + نموذج الإرسال --}}
    <form method="POST" action="{{ route('superadmin.whatsapp.decisions.send') }}" class="space-y-6">
        @csrf

        {{-- مدخل المود الحقيقي --}}
        <input type="radio" id="mode-input-selected" name="mode" value="selected" checked hidden>
        <input type="radio" id="mode-input-active"   name="mode" value="active_decisions" hidden>
        <input type="radio" id="mode-input-all"      name="mode" value="all" hidden>

        {{-- جدول القرارات --}}
        <div class="bg-white dark:bg-slate-900 rounded-2xl shadow border border-slate-200/70 dark:border-slate-700/70 p-4 sm:p-5">
            <div class="flex flex-col sm:flex-row justify-between gap-3 mb-4">
                <div>
                    <h3 class="text-sm sm:text-base font-bold text-slate-900 dark:text-slate-50">
                        🛡️ قرارات القيادة العليا
                    </h3>
                    <p class="text-[11px] text-slate-500 dark:text-slate-400 mt-1">
                        اختر قرار واحد أو أكثر ليتم تضمينها في رسالة الواتساب (تُتجاهل الاختيارات في وضع "كل القرارات الفعّالة").
                    </p>
                </div>
                <div class="text-[11px] text-slate-500 dark:text-slate-400">
                    <span class="inline-flex items-center gap-1">
                        <span class="w-2 h-2 rounded-full bg-emerald-500"></span> فعّال
                    </span>
                    <span class="inline-flex items-center gap-1 ms-3">
                        <span class="w-2 h-2 rounded-full bg-slate-400"></span> غير فعّال
                    </span>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full text-xs sm:text-sm">
                    <thead class="bg-slate-50 dark:bg-slate-950/70 text-slate-600 dark:text-slate-300">
                        <tr>
                            <th class="px-2 py-2 text-center w-10">تحديد</th>
                            <th class="px-2 py-2 text-right">العنوان</th>
                            <th class="px-2 py-2 text-center">الحالة</th>
                            <th class="px-2 py-2 text-center hidden sm:table-cell">بواسطة</th>
                            <th class="px-2 py-2 text-center hidden sm:table-cell">تاريخ الإنشاء</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700/70">
                        @forelse($decisions as $d)
                            @php
                                $isActive = $d->status === 'active';
                                $title = $d->title ?? ('قرار #' . $d->id);
                            @endphp
                            <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/70">
                                <td class="px-2 py-2 text-center align-top">
                                    <input type="checkbox" name="decision_ids[]" value="{{ $d->id }}"
                                           class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                                </td>
                                <td class="px-2 py-2 align-top">
                                    <div class="flex flex-col gap-0.5">
                                        <div class="text-xs sm:text-sm font-semibold text-slate-900 dark:text-slate-50">
                                            {{ $title }}
                                        </div>
                                        @if(!empty($d->body))
                                            @php
                                                $clean = strip_tags($d->body);
                                                $clean = preg_replace('/\s+/', ' ', $clean);
                                                $short = mb_substr($clean, 0, 80);
                                                if (mb_strlen($clean) > 80) $short .= '…';
                                            @endphp
                                            <div class="text-[11px] text-slate-500 dark:text-slate-400">
                                                {{ $short }}
                                            </div>
                                        @endif
                                    </div>
                                </td>
                                <td class="px-2 py-2 text-center align-top">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-medium
                                        {{ $isActive
                                            ? 'bg-emerald-50 text-emerald-700 border border-emerald-200'
                                            : 'bg-slate-50 text-slate-600 border border-slate-200' }}">
                                        <span class="w-2 h-2 rounded-full me-1
                                            {{ $isActive ? 'bg-emerald-500' : 'bg-slate-400' }}"></span>
                                        {{ $isActive ? 'فعّال' : 'غير فعّال' }}
                                    </span>
                                </td>
                                <td class="px-2 py-2 text-center text-[11px] text-slate-500 dark:text-slate-400 hidden sm:table-cell align-top">
                                    {{ $d->creator_name ?? 'غير محدد' }}
                                </td>
                                <td class="px-2 py-2 text-center text-[11px] text-slate-500 dark:text-slate-400 hidden sm:table-cell align-top">
                                    {{ optional($d->created_at)->format('Y-m-d') ?? '' }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-3 py-6 text-center text-sm text-slate-500 dark:text-slate-400">
                                    لا توجد قرارات مسجّلة حاليًا.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- جدول رسائل الإدارة --}}
        <div class="bg-white dark:bg-slate-900 rounded-2xl shadow border border-slate-200/70 dark:border-slate-700/70 p-4 sm:p-5">
            <div class="flex flex-col sm:flex-row justify-between gap-3 mb-4">
                <div>
                    <h3 class="text-sm sm:text-base font-bold text-slate-900 dark:text-slate-50">
                        📣 رسائل الإدارة (اختياري)
                    </h3>
                    <p class="text-[11px] text-slate-500 dark:text-slate-400 mt-1">
                        يمكن إرفاق بعض رسائل الإدارة في نفس رسالة الواتساب (تُتجاهل الاختيارات في وضع "القرارات + كل الرسائل المنشورة").
                    </p>
                </div>
                <div class="text-[11px] text-slate-500 dark:text-slate-400">
                    <span class="me-2">🔴 عاجلة</span>
                    <span class="me-2">🟠 عالية</span>
                    <span>🟢 عادية</span>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full text-xs sm:text-sm">
                    <thead class="bg-slate-50 dark:bg-slate-950/70 text-slate-600 dark:text-slate-300">
                        <tr>
                            <th class="px-2 py-2 text-center w-10">تحديد</th>
                            <th class="px-2 py-2 text-right">العنوان</th>
                            <th class="px-2 py-2 text-center hidden sm:table-cell">الأولوية</th>
                            <th class="px-2 py-2 text-center hidden sm:table-cell">الفئة</th>
                            <th class="px-2 py-2 text-center hidden md:table-cell">تاريخ النشر</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700/70">
                        @forelse($adminMessages as $m)
                            @php
                                $prioEmoji = $m->priority === 'urgent'
                                    ? '🔴'
                                    : ($m->priority === 'high' ? '🟠' : '🟢');

                                $segmentLabel = match ($m->segment) {
                                    'all'        => 'كل الفريق',
                                    'official'   => 'الأعضاء الرسمية',
                                    'beta'       => 'بيتا',
                                    'moderators' => 'المشرفون',
                                    'advisors'   => 'المستشارون',
                                    'admins'     => 'الإدارة العليا',
                                    default      => $m->segment,
                                };

                                $shortBody = '';
                                if (!empty($m->body)) {
                                    $clean = strip_tags($m->body);
                                    $clean = preg_replace('/\s+/', ' ', $clean);
                                    $shortBody = mb_substr($clean, 0, 70);
                                    if (mb_strlen($clean) > 70) $shortBody .= '…';
                                }
                            @endphp
                            <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/70">
                                <td class="px-2 py-2 text-center align-top">
                                    <input type="checkbox" name="message_ids[]" value="{{ $m->id }}"
                                           class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                                </td>
                                <td class="px-2 py-2 align-top">
                                    <div class="flex flex-col gap-0.5">
                                        <div class="text-xs sm:text-sm font-semibold text-slate-900 dark:text-slate-50">
                                            {{ $m->title }}
                                            @if($m->is_pinned)
                                                <span class="text-[11px] ms-1">📌</span>
                                            @endif
                                        </div>
                                        @if($shortBody)
                                            <div class="text-[11px] text-slate-500 dark:text-slate-400">
                                                {{ $shortBody }}
                                            </div>
                                        @endif
                                    </div>
                                </td>
                                <td class="px-2 py-2 text-center text-[11px] text-slate-600 dark:text-slate-300 hidden sm:table-cell align-top">
                                    {{ $prioEmoji }} {{ $m->priority ?? 'normal' }}
                                </td>
                                <td class="px-2 py-2 text-center text-[11px] text-slate-500 dark:text-slate-400 hidden sm:table-cell align-top">
                                    {{ $segmentLabel }}
                                </td>
                                <td class="px-2 py-2 text-center text-[11px] text-slate-500 dark:text-slate-400 hidden md:table-cell align-top">
                                    {{ optional($m->published_at)->format('Y-m-d') ?? '-' }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-3 py-6 text-center text-sm text-slate-500 dark:text-slate-400">
                                    لا توجد رسائل إدارية منشورة حاليًا.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- زر الإرسال + حالة --}}
        <div class="bg-white dark:bg-slate-900 rounded-2xl shadow border border-slate-200/70 dark:border-slate-700/70 p-4 sm:p-5">
            <div class="flex flex-col sm:flex-row gap-3 sm:items-center sm:justify-between">
                <button type="submit"
                        class="inline-flex items-center justify-center px-5 py-2.5 rounded-xl text-sm font-semibold
                               bg-emerald-600 text-white hover:bg-emerald-700 shadow-sm">
                    <i class="fa-brands fa-whatsapp ms-1 text-[13px]"></i>
                    إرسال الموجز إلى جروب الواتساب
                </button>

                @if(session('success'))
                    <div class="text-xs sm:text-sm text-emerald-600 dark:text-emerald-400">
                        {{ session('success') }}
                    </div>
                @elseif(session('error'))
                    <div class="text-xs sm:text-sm text-rose-600 dark:text-rose-400">
                        {{ session('error') }}
                    </div>
                @else
                    <div class="text-[11px] text-slate-500 dark:text-slate-400">
                        سيتم إرسال رسالة واحدة منسّقة بدون روابط، مع توقيع واضح باسم النظام.
                    </div>
                @endif
            </div>

            @if($wa_message)
                <div class="mt-4">
                    <details class="group bg-slate-50 dark:bg-slate-950/70 border border-slate-200 dark:border-slate-700 rounded-xl p-3">
                        <summary class="flex items-center justify-between cursor-pointer">
                            <span class="text-xs sm:text-sm font-semibold text-slate-800 dark:text-slate-100">
                                معاينة آخر رسالة واتساب تم توليدها
                            </span>
                            <span class="text-[11px] text-slate-500 dark:text-slate-400 group-open:hidden">إظهار</span>
                            <span class="text-[11px] text-slate-500 dark:text-slate-400 hidden group-open:inline">إخفاء</span>
                        </summary>
                        <pre class="mt-3 text-[11px] sm:text-xs text-slate-800 dark:text-slate-100 whitespace-pre-wrap">
{{ $wa_message }}
                        </pre>
                    </details>
                </div>
            @endif
        </div>
    </form>
</div>
@endsection