@extends('layouts.superadmin')

@section('title','إعلانات الواتساب — 10 كبسات')
@section('page-title','📣 إعلانات الواتساب — 10 كبسات')

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

  {{-- HERO --}}
  <div class="rounded-3xl p-5 sm:p-6 text-white shadow border border-white/10"
       style="background: radial-gradient(1200px 400px at 90% 0%, rgba(99,102,241,.35), transparent),
              radial-gradient(900px 300px at 10% 100%, rgba(16,185,129,.25), transparent),
              linear-gradient(135deg, #0b1220, #0b1220);">
    <div class="flex flex-col gap-2">
      <div class="text-xs opacity-90">⚡ نظام إعلانات سريع — بدون تعقيد</div>
      <div class="text-2xl font-black">10 كبسات جاهزة لإرسال الواتساب</div>
      <div class="text-sm opacity-90 leading-6">
        اختر الوقت، واضغط إرسال. (البنود 1–4 جاهزة وثابتة بلا كتابة).<br>
        البند 6 روابطه *نفس* البند 5.
      </div>
    </div>
  </div>

  {{-- Flash --}}
  @if(session('error'))
    <div class="rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-rose-700 text-sm">
      {{ session('error') }}
    </div>
  @endif
  @if(session('success'))
    <div class="rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2 text-emerald-700 text-sm">
      {{ session('success') }}
    </div>
  @endif

  {{-- Preview --}}
  @if(!empty($wa_message))
    <div class="bg-white dark:bg-gray-900 rounded-2xl p-4 shadow border border-gray-100 dark:border-gray-800">
      <div class="flex items-center justify-between mb-2">
        <div class="font-bold text-gray-800 dark:text-white text-sm">📨 آخر رسالة (معاينة)</div>
        <button type="button"
                onclick="navigator.clipboard.writeText(@js($wa_message)); alert('تم النسخ ✅');"
                class="px-3 py-2 rounded-xl bg-indigo-600 text-white text-xs hover:bg-indigo-700">
          نسخ
        </button>
      </div>
      <pre class="text-[12px] whitespace-pre-wrap text-gray-800 dark:text-gray-200 bg-gray-50 dark:bg-gray-950/40 rounded-xl p-3 border border-gray-100 dark:border-gray-800">{{ $wa_message }}</pre>
    </div>
  @endif

  @php
    $sendOptions = [
      'now'      => 'الآن',
      'soon'     => 'بعد قليل',
      'after_10' => 'بعد 10 دقائق',
      'after_30' => 'بعد نصف ساعة',
      'after_60' => 'بعد ساعة',
    ];
  @endphp

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

    {{-- Card helper classes --}}
    @php
      $card = "bg-white dark:bg-gray-900 rounded-2xl p-4 shadow border border-gray-100 dark:border-gray-800";
      $select = "w-full rounded-xl border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-950/40 text-gray-900 dark:text-white text-sm";
      $btn = "w-full py-2.5 rounded-2xl text-white text-sm font-black";
      $hint = "text-xs text-gray-500 dark:text-gray-400";
      $ta = "w-full rounded-2xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-950/40 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 p-3 text-sm leading-6 focus:ring-2 focus:ring-indigo-500";
    @endphp

    {{-- 1 --}}
    <div class="{{ $card }}">
      <div class="font-black text-gray-900 dark:text-white">🛡️ 1) بيان رسمي من القائد سيف الوفاء</div>
      <div class="{{ $hint }} mt-1">جاهز وثابت — فقط اختر الوقت واضغط إرسال.</div>

      <form method="POST" action="{{ route('superadmin.whatsapp.quick.send') }}" class="mt-3 space-y-3">
        @csrf
        <input type="hidden" name="template" value="saif">

        <select name="send_after" class="{{ $select }}">
          @foreach($sendOptions as $k=>$v)
            <option value="{{ $k }}">{{ $v }}</option>
          @endforeach
        </select>

        <button class="{{ $btn }} bg-indigo-600 hover:bg-indigo-700">إرسال</button>
      </form>
    </div>

    {{-- 2 --}}
    <div class="{{ $card }}">
      <div class="font-black text-gray-900 dark:text-white">👑 2) بيان رسمي من القائدة رولا</div>
      <div class="{{ $hint }} mt-1">جاهز وثابت — فقط الوقت.</div>

      <form method="POST" action="{{ route('superadmin.whatsapp.quick.send') }}" class="mt-3 space-y-3">
        @csrf
        <input type="hidden" name="template" value="rola">

        <select name="send_after" class="{{ $select }}">
          @foreach($sendOptions as $k=>$v)
            <option value="{{ $k }}">{{ $v }}</option>
          @endforeach
        </select>

        <button class="{{ $btn }} bg-fuchsia-600 hover:bg-fuchsia-700">إرسال</button>
      </form>
    </div>

    {{-- 3 --}}
    <div class="{{ $card }}">
      <div class="font-black text-gray-900 dark:text-white">🦅 3) بيان رسمي من مدير النظام ونائب القائد الصقر</div>
      <div class="{{ $hint }} mt-1">جاهز وثابت — فقط الوقت.</div>

      <form method="POST" action="{{ route('superadmin.whatsapp.quick.send') }}" class="mt-3 space-y-3">
        @csrf
        <input type="hidden" name="template" value="saqr">

        <select name="send_after" class="{{ $select }}">
          @foreach($sendOptions as $k=>$v)
            <option value="{{ $k }}">{{ $v }}</option>
          @endforeach
        </select>

        <button class="{{ $btn }} bg-slate-800 hover:bg-slate-900">إرسال</button>
      </form>
    </div>

    {{-- 4 --}}
    <div class="{{ $card }}">
      <div class="font-black text-gray-900 dark:text-white">🧠 4) بيان رسمي من المستشار كروان</div>
      <div class="{{ $hint }} mt-1">جاهز وثابت — فقط الوقت.</div>

      <form method="POST" action="{{ route('superadmin.whatsapp.quick.send') }}" class="mt-3 space-y-3">
        @csrf
        <input type="hidden" name="template" value="karwan">

        <select name="send_after" class="{{ $select }}">
          @foreach($sendOptions as $k=>$v)
            <option value="{{ $k }}">{{ $v }}</option>
          @endforeach
        </select>

        <button class="{{ $btn }} bg-emerald-600 hover:bg-emerald-700">إرسال</button>
      </form>
    </div>

    {{-- 5 --}}
    <div class="{{ $card }}">
      <div class="font-black text-gray-900 dark:text-white">📲 5) إعلان تنزيل التطبيق (روابط ثابتة)</div>
      <div class="{{ $hint }} mt-1">الروابط محفوظة داخل النظام — ما في إدخال روابط.</div>

      <form method="POST" action="{{ route('superadmin.whatsapp.quick.send') }}" class="mt-3 space-y-3">
        @csrf
        <input type="hidden" name="template" value="app">

        <select name="send_after" class="{{ $select }}">
          @foreach($sendOptions as $k=>$v)
            <option value="{{ $k }}">{{ $v }}</option>
          @endforeach
        </select>

        <button class="{{ $btn }} bg-green-600 hover:bg-green-700">إرسال</button>
      </form>
    </div>

    {{-- 6 --}}
    <div class="{{ $card }}">
      <div class="font-black text-gray-900 dark:text-white">🆕 6) إعلان تحديثات (روابطه نفس البند 5)</div>
      <div class="{{ $hint }} mt-1">اكتب فقط التحديثات… والروابط تلقائيًا نفس روابط التنزيل.</div>

      <form method="POST" action="{{ route('superadmin.whatsapp.quick.send') }}" class="mt-3 space-y-3">
        @csrf
        <input type="hidden" name="template" value="updates">

        <select name="send_after" class="{{ $select }}">
          @foreach($sendOptions as $k=>$v)
            <option value="{{ $k }}">{{ $v }}</option>
          @endforeach
        </select>

        <textarea name="updates_text" rows="5" class="{{ $ta }}"
                  placeholder="اكتب أهم التحديثات (استخدم - أو • للنقاط):
- تحسين الأداء
- إصلاح مشكلة التسجيل
- إضافة صفحة جديدة">{{ old('updates_text') }}</textarea>

        <button class="{{ $btn }} bg-sky-600 hover:bg-sky-700">إرسال</button>
      </form>
    </div>

    {{-- 7 --}}
    <div class="{{ $card }}">
      <div class="font-black text-gray-900 dark:text-white">⚠️ 7) تنبيه رسمي لعدم الالتزام باستعمال البرنامج</div>
      <div class="{{ $hint }} mt-1">جاهز وثابت — فقط الوقت.</div>

      <form method="POST" action="{{ route('superadmin.whatsapp.quick.send') }}" class="mt-3 space-y-3">
        @csrf
        <input type="hidden" name="template" value="warn">

        <select name="send_after" class="{{ $select }}">
          @foreach($sendOptions as $k=>$v)
            <option value="{{ $k }}">{{ $v }}</option>
          @endforeach
        </select>

        <button class="{{ $btn }} bg-rose-600 hover:bg-rose-700">إرسال</button>
      </form>
    </div>

    {{-- 8 --}}
    <div class="{{ $card }}">
      <div class="font-black text-gray-900 dark:text-white">⭐ 8) أهمية استعمال البرنامج للتيم</div>
      <div class="{{ $hint }} mt-1">جاهز وثابت — فقط الوقت.</div>

      <form method="POST" action="{{ route('superadmin.whatsapp.quick.send') }}" class="mt-3 space-y-3">
        @csrf
        <input type="hidden" name="template" value="why">

        <select name="send_after" class="{{ $select }}">
          @foreach($sendOptions as $k=>$v)
            <option value="{{ $k }}">{{ $v }}</option>
          @endforeach
        </select>

        <button class="{{ $btn }} bg-amber-500 hover:bg-amber-600">إرسال</button>
      </form>
    </div>

    {{-- 9 --}}
    <div class="{{ $card }}">
      <div class="font-black text-gray-900 dark:text-white">🎉 9) إعلان لايف / سهرة (اختيار عضو من النظام)</div>
      <div class="{{ $hint }} mt-1">اختَر نوع الفعالية + العضو + اليوم/غدًا/تاريخ + الوقت.</div>

      <form method="POST" action="{{ route('superadmin.whatsapp.quick.send') }}" class="mt-3 space-y-3">
        @csrf
        <input type="hidden" name="template" value="event">

        <select name="send_after" class="{{ $select }}">
          @foreach($sendOptions as $k=>$v)
            <option value="{{ $k }}">{{ $v }}</option>
          @endforeach
        </select>

        <select name="event_type" class="{{ $select }}">
          <option value="">نوع الفعالية</option>
          <option value="لايف">لايف</option>
          <option value="سهرة">سهرة</option>
          <option value="تحدي">تحدي</option>
          <option value="لقاء">لقاء</option>
        </select>

        <select name="host_user_id" class="{{ $select }}">
          <option value="">عند (اختر العضو)</option>
          @foreach($hosts as $h)
            <option value="{{ $h->id }}">
              {{ $h->name }}
              @if(!empty($h->membership_status)) ({{ $h->membership_status }}) @endif
            </option>
          @endforeach
        </select>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
          <select name="event_day" class="{{ $select }}">
            <option value="today">اليوم</option>
            <option value="tomorrow">غدًا</option>
            <option value="custom">تاريخ مخصص</option>
          </select>

          <input type="date" name="event_date" class="{{ $select }}" />

          <input type="time" name="event_time" class="{{ $select }}" />
        </div>

        <div class="{{ $hint }}">إذا اخترت “تاريخ مخصص” لازم تعبي التاريخ.</div>

        <button class="{{ $btn }} bg-violet-600 hover:bg-violet-700">إرسال</button>
      </form>
    </div>

    {{-- 10 --}}
    <div class="{{ $card }}">
      <div class="font-black text-gray-900 dark:text-white">🔥 10) تنبيه ملحمي (تكتب على ذوقك)</div>
      <div class="{{ $hint }} mt-1">اكتب النص، ونحن نرتبه كنقاط لو بدأت بـ - أو •</div>

      <form method="POST" action="{{ route('superadmin.whatsapp.quick.send') }}" class="mt-3 space-y-3">
        @csrf
        <input type="hidden" name="template" value="epic">

        <select name="send_after" class="{{ $select }}">
          @foreach($sendOptions as $k=>$v)
            <option value="{{ $k }}">{{ $v }}</option>
          @endforeach
        </select>

        <textarea name="epic_text" rows="5" class="{{ $ta }}"
                  placeholder="اكتب التنبيه… مثال:
- نحن أبناء الوفاء، مش أبناء المزاج
- الالتزام من اليوم مش من بكرة
- كل شخص يمثل التيم">{{ old('epic_text') }}</textarea>

        <button class="{{ $btn }} bg-black hover:bg-gray-900">إرسال</button>
      </form>
    </div>

  </div>

</div>
@endsection