@extends('layouts.superadmin')

@section('title','واتساب الاجتماعات — AmirOS')
@section('page-title','📅 واتساب الاجتماعات (4 كبسات جاهزة)')

@section('content')
<div class="min-h-screen bg-slate-950 px-4 sm:px-6 lg:px-8 py-8">
  <div class="max-w-5xl mx-auto space-y-6">

    {{-- HERO --}}
    <div class="rounded-3xl bg-slate-900/90 border border-white/10 p-6 sm:p-7 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-sky-500/20 blur-3xl"></div>

      <div class="relative space-y-3">
        <h1 class="text-2xl sm:text-3xl font-extrabold text-white">📅 نظام واتساب للاجتماعات</h1>
        <p class="text-sm text-slate-300 leading-relaxed">
          أربع كبسات جاهزة: <b>تذكير بموعد اجتماع</b> + <b>ملخص الاجتماع</b> + <b>النشيطين/المتغيبين</b> + <b>متابعة المهام والقرارات</b>.
          الإرسال يتم عبر نفس ربط البوت: <span class="text-slate-200/90" dir="ltr">{{ $bot_url }}{{ $send_path }}</span>
        </p>

        <div class="flex flex-wrap items-center gap-2 text-[11px] text-slate-200 mt-1">
          <span class="px-2 py-1 rounded-full bg-black/30 border border-white/10">
            <i class="fa-solid fa-paper-plane me-1"></i> إرسال للجروب
          </span>
          <span class="px-2 py-1 rounded-full bg-black/30 border border-white/10">
            <i class="fa-regular fa-copy me-1"></i> توليد + نسخ
          </span>
          <span class="px-2 py-1 rounded-full bg-black/30 border border-white/10">
            <i class="fa-solid fa-eye me-1"></i> معاينة داخل الصفحة
          </span>
        </div>
      </div>
    </div>

    {{-- FLASH --}}
    @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

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">

      {{-- 1) Reminder --}}
      <div class="rounded-3xl bg-slate-900/90 border border-white/10 p-5 sm:p-6 shadow-2xl">
        <div class="flex items-start gap-3">
          <span class="inline-flex items-center justify-center w-10 h-10 rounded-2xl bg-indigo-500/15 border border-indigo-400/30">
            <i class="fa-solid fa-bell text-indigo-200"></i>
          </span>
          <div class="flex-1">
            <div class="text-base font-extrabold text-white">تذكير بموعد الاجتماع</div>
            <div class="text-[12px] text-slate-400 mt-1">اختر الاجتماع + قبل كم دقيقة (اختياري) + ملاحظة بسيطة.</div>
          </div>
        </div>

        <form id="formReminder" method="POST" action="{{ route('superadmin.whatsapp.meetings.send') }}" class="mt-4 space-y-3">
          @csrf
          <input type="hidden" name="action" value="reminder">

          <div>
            <label class="block text-xs text-slate-300 mb-1">اختيار الاجتماع</label>
            <select name="meeting_id" class="w-full rounded-2xl bg-black/30 border border-white/10 text-white px-3 py-2 text-sm">
              @foreach($upcoming as $m)
                <option value="{{ $m->id }}">
                  {{ $m->title }} — {{ \Carbon\Carbon::parse($m->meeting_date)->format('Y-m-d h:i A') }}
                </option>
              @endforeach
            </select>
          </div>

          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="block text-xs text-slate-300 mb-1">قبل كم دقيقة؟</label>
              <select name="lead" class="w-full rounded-2xl bg-black/30 border border-white/10 text-white px-3 py-2 text-sm">
                <option value="0">الآن</option>
                <option value="10">قبل 10 دقائق</option>
                <option value="30">قبل 30 دقيقة</option>
                <option value="60">قبل ساعة</option>
              </select>
            </div>

            <div>
              <label class="block text-xs text-slate-300 mb-1">ملاحظة (اختياري)</label>
              <input name="note" placeholder="مثال: الدخول قبل الموعد بـ 5 دقائق."
                     class="w-full rounded-2xl bg-black/30 border border-white/10 text-white placeholder-white/25 px-3 py-2 text-sm">
            </div>
          </div>

          <div class="flex flex-col sm:flex-row gap-2">
            <button type="submit"
                    class="w-full inline-flex items-center justify-center gap-2 px-3 py-2.5 rounded-2xl text-sm font-semibold bg-indigo-600/90 hover:bg-indigo-500 text-white">
              <i class="fa-solid fa-paper-plane text-xs"></i> إرسال للجروب الآن
            </button>

            <button type="button" class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-3 py-2.5 rounded-2xl text-sm font-semibold bg-white/5 hover:bg-white/10 text-white border border-white/10"
                    onclick="waPreviewAndCopy('formReminder','prevReminder', this)">
              <i class="fa-regular fa-copy text-xs"></i> توليد + نسخ
            </button>
          </div>

          <details class="mt-2">
            <summary class="cursor-pointer text-xs text-white/60 hover:text-white/80">معاينة الرسالة</summary>
            <pre id="prevReminder" class="mt-2 text-xs whitespace-pre-wrap rounded-2xl bg-black/20 border border-white/10 p-3 text-white/80 overflow-auto">—</pre>
          </details>
        </form>
      </div>

      {{-- 2) Summary --}}
      <div class="rounded-3xl bg-slate-900/90 border border-white/10 p-5 sm:p-6 shadow-2xl">
        <div class="flex items-start gap-3">
          <span class="inline-flex items-center justify-center w-10 h-10 rounded-2xl bg-sky-500/15 border border-sky-400/30">
            <i class="fa-solid fa-file-lines text-sky-200"></i>
          </span>
          <div class="flex-1">
            <div class="text-base font-extrabold text-white">ملخص الاجتماع</div>
            <div class="text-[12px] text-slate-400 mt-1">إذا فيه تقرير: (قصير / كامل / نقاط). إذا ما فيه: يعطي تنبيه.</div>
          </div>
        </div>

        <form id="formSummary" method="POST" action="{{ route('superadmin.whatsapp.meetings.send') }}" class="mt-4 space-y-3">
          @csrf
          <input type="hidden" name="action" value="summary">

          <div>
            <label class="block text-xs text-slate-300 mb-1">اختيار اجتماع مكتمل</label>
            <select name="meeting_id" class="w-full rounded-2xl bg-black/30 border border-white/10 text-white px-3 py-2 text-sm">
              @foreach($completed as $m)
                <option value="{{ $m->id }}">
                  {{ $m->title }} — {{ \Carbon\Carbon::parse($m->meeting_date)->format('Y-m-d') }}
                </option>
              @endforeach
            </select>
          </div>

          <div>
            <label class="block text-xs text-slate-300 mb-1">نوع الملخص</label>
            <select name="type" class="w-full rounded-2xl bg-black/30 border border-white/10 text-white px-3 py-2 text-sm">
              <option value="auto">تلقائي (إذا فيه تقرير)</option>
              <option value="short">ملخص قصير</option>
              <option value="full">ملخص كامل</option>
              <option value="points">نقاط الاجتماع</option>
            </select>
          </div>

          <div class="flex flex-col sm:flex-row gap-2">
            <button type="submit"
                    class="w-full inline-flex items-center justify-center gap-2 px-3 py-2.5 rounded-2xl text-sm font-semibold bg-sky-600/90 hover:bg-sky-500 text-white">
              <i class="fa-solid fa-paper-plane text-xs"></i> إرسال للجروب الآن
            </button>

            <button type="button" class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-3 py-2.5 rounded-2xl text-sm font-semibold bg-white/5 hover:bg-white/10 text-white border border-white/10"
                    onclick="waPreviewAndCopy('formSummary','prevSummary', this)">
              <i class="fa-regular fa-copy text-xs"></i> توليد + نسخ
            </button>
          </div>

          <details class="mt-2">
            <summary class="cursor-pointer text-xs text-white/60 hover:text-white/80">معاينة الرسالة</summary>
            <pre id="prevSummary" class="mt-2 text-xs whitespace-pre-wrap rounded-2xl bg-black/20 border border-white/10 p-3 text-white/80 overflow-auto">—</pre>
          </details>
        </form>
      </div>

      {{-- 3) Attendance --}}
      <div class="rounded-3xl bg-slate-900/90 border border-white/10 p-5 sm:p-6 shadow-2xl">
        <div class="flex items-start gap-3">
          <span class="inline-flex items-center justify-center w-10 h-10 rounded-2xl bg-emerald-500/15 border border-emerald-400/30">
            <i class="fa-solid fa-user-check text-emerald-200"></i>
          </span>
          <div class="flex-1">
            <div class="text-base font-extrabold text-white">النشيطين والمتغيبين عن الاجتماعات</div>
            <div class="text-[12px] text-slate-400 mt-1">تقرير تلقائي لآخر N اجتماعات: الأكثر التزاماً + ضعف التزام.</div>
          </div>
        </div>

        <form id="formAttendance" method="POST" action="{{ route('superadmin.whatsapp.meetings.send') }}" class="mt-4 space-y-3">
          @csrf
          <input type="hidden" name="action" value="attendance">

          <div>
            <label class="block text-xs text-slate-300 mb-1">آخر كم اجتماع؟</label>
            <select name="last_n" class="w-full rounded-2xl bg-black/30 border border-white/10 text-white px-3 py-2 text-sm">
              <option value="3">آخر 3</option>
              <option value="5" selected>آخر 5</option>
              <option value="10">آخر 10</option>
              <option value="20">آخر 20</option>
            </select>
          </div>

          <div class="flex flex-col sm:flex-row gap-2">
            <button type="submit"
                    class="w-full inline-flex items-center justify-center gap-2 px-3 py-2.5 rounded-2xl text-sm font-semibold bg-emerald-600/90 hover:bg-emerald-500 text-white">
              <i class="fa-solid fa-paper-plane text-xs"></i> إرسال للجروب الآن
            </button>

            <button type="button" class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-3 py-2.5 rounded-2xl text-sm font-semibold bg-white/5 hover:bg-white/10 text-white border border-white/10"
                    onclick="waPreviewAndCopy('formAttendance','prevAttendance', this)">
              <i class="fa-regular fa-copy text-xs"></i> توليد + نسخ
            </button>
          </div>

          <details class="mt-2">
            <summary class="cursor-pointer text-xs text-white/60 hover:text-white/80">معاينة الرسالة</summary>
            <pre id="prevAttendance" class="mt-2 text-xs whitespace-pre-wrap rounded-2xl bg-black/20 border border-white/10 p-3 text-white/80 overflow-auto">—</pre>
          </details>
        </form>
      </div>

      {{-- 4) Important --}}
      <div class="rounded-3xl bg-slate-900/90 border border-white/10 p-5 sm:p-6 shadow-2xl">
        <div class="flex items-start gap-3">
          <span class="inline-flex items-center justify-center w-10 h-10 rounded-2xl bg-amber-500/15 border border-amber-400/30">
            <i class="fa-solid fa-flag-checkered text-amber-200"></i>
          </span>
          <div class="flex-1">
            <div class="text-base font-extrabold text-white">زر مهم (متابعة المهام والقرارات)</div>
            <div class="text-[12px] text-slate-400 mt-1">يسحب قرارات + مهام من تقرير الاجتماع ويعمل رسالة متابعة رسمية.</div>
          </div>
        </div>

        <form id="formFollowup" method="POST" action="{{ route('superadmin.whatsapp.meetings.send') }}" class="mt-4 space-y-3">
          @csrf
          <input type="hidden" name="action" value="followup">

          <div>
            <label class="block text-xs text-slate-300 mb-1">اختيار اجتماع مكتمل</label>
            <select name="meeting_id" class="w-full rounded-2xl bg-black/30 border border-white/10 text-white px-3 py-2 text-sm">
              @foreach($completed as $m)
                <option value="{{ $m->id }}">
                  {{ $m->title }} — {{ \Carbon\Carbon::parse($m->meeting_date)->format('Y-m-d') }}
                </option>
              @endforeach
            </select>
          </div>

          <div>
            <label class="block text-xs text-slate-300 mb-1">آخر موعد للتنفيذ (اختياري)</label>
            <input type="datetime-local" name="due_at"
                   class="w-full rounded-2xl bg-black/30 border border-white/10 text-white px-3 py-2 text-sm">
          </div>

          <div class="flex flex-col sm:flex-row gap-2">
            <button type="submit"
                    class="w-full inline-flex items-center justify-center gap-2 px-3 py-2.5 rounded-2xl text-sm font-semibold bg-amber-500/90 hover:bg-amber-400 text-black">
              <i class="fa-solid fa-paper-plane text-xs"></i> إرسال للجروب الآن
            </button>

            <button type="button" class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-3 py-2.5 rounded-2xl text-sm font-semibold bg-white/5 hover:bg-white/10 text-white border border-white/10"
                    onclick="waPreviewAndCopy('formFollowup','prevFollowup', this)">
              <i class="fa-regular fa-copy text-xs"></i> توليد + نسخ
            </button>
          </div>

          <details class="mt-2">
            <summary class="cursor-pointer text-xs text-white/60 hover:text-white/80">معاينة الرسالة</summary>
            <pre id="prevFollowup" class="mt-2 text-xs whitespace-pre-wrap rounded-2xl bg-black/20 border border-white/10 p-3 text-white/80 overflow-auto">—</pre>
          </details>
        </form>
      </div>

    </div>
  </div>
</div>

<script>
async function waPreviewAndCopy(formId, previewId, btn){
  const form = document.getElementById(formId);
  const pre  = document.getElementById(previewId);
  if (!form || !pre) return;

  const fd = new FormData(form);

  const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
  const oldTxt = btn?.innerText;

  try{
    if(btn) btn.innerText = '...';
    const res = await fetch(@json(route('superadmin.whatsapp.meetings.preview')), {
      method: 'POST',
      headers: {
        'X-CSRF-TOKEN': token || '',
        'Accept': 'application/json'
      },
      body: fd
    });

    const data = await res.json();
    if(!data || !data.ok) throw new Error('Preview failed');

    pre.textContent = data.message || '—';
    await navigator.clipboard.writeText(data.message || '');
    if(btn) btn.innerText = '✅ تم النسخ';
    setTimeout(()=>{ if(btn) btn.innerText = oldTxt || 'توليد + نسخ'; }, 1200);

  }catch(e){
    pre.textContent = '⚠️ تعذر توليد المعاينة. تحقق من اختيار الاجتماع/التقرير.';
    if(btn) btn.innerText = oldTxt || 'توليد + نسخ';
  }
}
</script>
@endsection