@extends('layouts.superadmin')

@section('title','NotifyHub — إنشاء إشعار')

@section('content')
@php
    // نفس روح سقراط: KPI سريعة فوق
    $totalSent = (int)($kpis->sent ?? 0);
    $totalSch  = (int)($kpis->scheduled ?? 0);
    $totalFail = (int)($kpis->failed ?? 0);

    $types = [
        'decision'      => ['label'=>'قرار','icon'=>'fa-gavel'],
        'live'          => ['label'=>'لايف','icon'=>'fa-satellite-dish'],
        'weekly_test'   => ['label'=>'اختبار','icon'=>'fa-clipboard-check'],
        'daily_reading' => ['label'=>'اقرأني','icon'=>'fa-book-open'],
        'reminder'      => ['label'=>'تذكير','icon'=>'fa-bell'],
        'custom'        => ['label'=>'مخصص','icon'=>'fa-wand-magic-sparkles'],
    ];

    $oldType = old('type','custom');
    $oldAud  = old('audience','all');
    $oldMode = old('send_mode','send_now');
    $oldAuto = old('auto_from_picker','1');
@endphp

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

        {{-- HERO (نفس سقراط تماماً) --}}
        <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98 border border-fuchsia-400/30 shadow-2xl shadow-fuchsia-500/10">
            <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-fuchsia-400/20 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-cyan-500/20 blur-3xl"></div>

            <div class="relative p-5 sm:p-7 lg:p-8 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
                <div class="space-y-3 max-w-2xl">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-fuchsia-300/30 text-[11px] text-fuchsia-100">
                        <i class="fa-solid fa-bell text-xs"></i>
                        <span>NotifyHub — مركز الإشعارات الموحد • SuperAdmin</span>
                    </div>

                    <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
                        إنشاء إشعار <span class="text-fuchsia-300">للإدارة العليا</span>
                    </h1>

                    <p class="text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
                        اختر نوع الإشعار، ثم (اختياريًا) اختر عنصرًا من الموجود ليتم توليد
                        <span class="text-cyan-200 font-bold">العنوان + نص التذكير + الرابط + ref_id</span>
                        تلقائيًا.
                    </p>

                    <div class="flex flex-wrap gap-2 pt-1">
                        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
                            مُرسل: {{ number_format($totalSent) }}
                        </span>
                        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
                            <span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
                            مُجدول: {{ number_format($totalSch) }}
                        </span>
                        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
                            <span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span>
                            فشل: {{ number_format($totalFail) }}
                        </span>
                    </div>
                </div>

                {{-- عمليات سريعة --}}
                <div class="w-full lg:w-auto">
                    <div class="rounded-2xl bg-black/40 border border-white/15 px-4 py-3 space-y-2 text-xs text-slate-100">
                        <div class="flex items-center gap-2">
                            <div class="w-8 h-8 rounded-xl bg-fuchsia-500/20 text-fuchsia-200 grid place-items-center">
                                <i class="fa-solid fa-filter"></i>
                            </div>
                            <div class="min-w-0">
                                <div class="text-[11px] text-slate-300/80">عمليات سريعة</div>
                                <div class="font-bold text-sm truncate">NotifyHub</div>
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-2 pt-2">
                            <a href="{{ route('superadmin.notifyhub.dashboard') }}"
                               class="inline-flex items-center justify-center px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-[11px] hover:bg-white/15 transition">
                                <i class="fa-solid fa-gauge-high ms-2 text-[11px]"></i>
                                الداشبورد
                            </a>
                            <a href="{{ route('superadmin.notifyhub.notifications.index') }}"
                               class="inline-flex items-center justify-center px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-[11px] hover:bg-white/15 transition">
                                <i class="fa-solid fa-bell ms-2 text-[11px]"></i>
                                الإشعارات
                            </a>
                            <a href="{{ route('superadmin.notifyhub.rules.index') }}"
                               class="inline-flex items-center justify-center px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-[11px] hover:bg-white/15 transition">
                                <i class="fa-solid fa-sliders ms-2 text-[11px]"></i>
                                القواعد
                            </a>
                            <a href="{{ route('superadmin.notifyhub.analytics.index') }}"
                               class="inline-flex items-center justify-center px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-[11px] hover:bg-white/15 transition">
                                <i class="fa-solid fa-chart-simple ms-2 text-[11px]"></i>
                                التحليلات
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        @if(session('success'))
            <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 text-emerald-200 px-4 py-3 text-sm">
                {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div class="rounded-2xl border border-rose-400/20 bg-rose-500/10 text-rose-200 px-4 py-3 text-sm">
                {{ session('error') }}
            </div>
        @endif
        @if($errors->any())
            <div class="rounded-2xl border border-amber-400/20 bg-amber-500/10 text-amber-200 px-4 py-3 text-sm">
                <div class="font-extrabold mb-2">تحقق من الحقول:</div>
                <ul class="list-disc ms-5 space-y-1">
                    @foreach($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="post" action="{{ route('superadmin.notifyhub.notifications.store') }}" class="grid gap-4 lg:grid-cols-3">
            @csrf

            {{-- Hidden fields for picker --}}
            <input type="hidden" name="pick_id" id="nh_pick_id" value="{{ old('pick_id') }}">
            <input type="hidden" name="auto_from_picker" id="nh_auto_hidden" value="{{ $oldAuto }}">

            {{-- Main --}}
            <div class="lg:col-span-2 space-y-4">

                {{-- محتوى --}}
                <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-950/98 to-black/98 border border-white/10 shadow-xl p-5 sm:p-6">
                    <div class="pointer-events-none absolute -top-16 -right-10 w-44 h-44 rounded-full bg-white/8 blur-3xl"></div>

                    <div class="flex items-center gap-3 mb-4">
                        <div class="w-10 h-10 rounded-2xl bg-white/10 border border-white/10 grid place-items-center text-white">
                            <i class="fa-solid fa-pen-nib"></i>
                        </div>
                        <div>
                            <div class="text-[11px] text-slate-300/80">محتوى الإشعار</div>
                            <div class="text-sm font-extrabold text-white">عنوان + نص التذكير + (رابط/ref_id)</div>
                        </div>
                    </div>

                    <div class="grid gap-3">
                        <div>
                            <label class="text-[10px] text-slate-300/80">العنوان</label>
                            <input id="nh_title" name="title" value="{{ old('title') }}" maxlength="200"
                                   class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
                        </div>

                        <div>
                            <label class="text-[10px] text-slate-300/80">نص التذكير (Body)</label>
                            <textarea id="nh_body" name="body" rows="7" maxlength="15000"
                                      class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500/40">{{ old('body') }}</textarea>
                            <div class="mt-1 text-[11px] text-slate-300/70">
                                إذا اخترت عنصرًا من “اختيار من الموجود” سيتم توليد نص تذكير مناسب تلقائيًا.
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
                            <div class="sm:col-span-2">
                                <label class="text-[10px] text-slate-300/80">الرابط (اختياري)</label>
                                <input id="nh_url" name="url" value="{{ old('url') }}" maxlength="500"
                                       class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-white/15"
                                       placeholder="اتركه فارغًا ليُحسب تلقائيًا حسب النوع/ref_id">
                            </div>
                            <div>
                                <label class="text-[10px] text-slate-300/80">ref_id (اختياري)</label>
                                <input id="nh_ref" name="ref_id" value="{{ old('ref_id') }}" inputmode="numeric"
                                       class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-white/15">
                            </div>
                        </div>

                        <div class="mt-2 flex items-center justify-between gap-3 rounded-2xl bg-black/40 border border-white/15 px-3 py-3">
                            <div class="text-xs text-white/90 font-bold">
                                تعبئة تلقائية من الاختيار
                                <div class="text-[11px] text-slate-300/70 font-normal">
                                    إذا ON: الاختيار من تحت يكتب فوق تلقائيًا ويغلب اليدوي.
                                </div>
                            </div>
                            <label class="inline-flex items-center gap-2 cursor-pointer select-none">
                                <input id="nh_auto" type="checkbox" class="accent-fuchsia-500" @checked((string)$oldAuto==='1')>
                                <span class="text-xs text-slate-200">ON</span>
                            </label>
                        </div>
                    </div>
                </div>

                {{-- النوع + الوضع + picker --}}
                <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-950/98 to-black/98 border border-white/10 shadow-xl p-5 sm:p-6">
                    <div class="pointer-events-none absolute -bottom-24 -left-16 w-80 h-80 rounded-full bg-fuchsia-400/10 blur-3xl"></div>

                    <div class="flex items-center gap-3 mb-4">
                        <div class="w-10 h-10 rounded-2xl bg-fuchsia-500/15 border border-fuchsia-400/25 grid place-items-center text-fuchsia-200">
                            <i class="fa-solid fa-sitemap"></i>
                        </div>
                        <div>
                            <div class="text-[11px] text-slate-300/80">النوع</div>
                            <div class="text-sm font-extrabold text-white">قرار / لايف / اختبار / اقرأني / مخصص</div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                        <div>
                            <label class="text-[10px] text-slate-300/80">نوع الإشعار</label>
                            <select name="type" id="nh_type"
                                    class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40">
                                @foreach($types as $k => $t)
                                    <option value="{{ $k }}" @selected($oldType===$k)>{{ $t['label'] }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label class="text-[10px] text-slate-300/80">وضع الإرسال</label>
                            <select name="send_mode" id="nh_mode"
                                    class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500/40">
                                <option value="send_now" @selected($oldMode==='send_now')>إرسال الآن</option>
                                <option value="schedule" @selected($oldMode==='schedule')>جدولة</option>
                                <option value="draft" @selected($oldMode==='draft')>مسودة</option>
                            </select>
                        </div>

                        <div id="nh_schedule_box" class="sm:col-span-2 hidden">
                            <label class="text-[10px] text-slate-300/80">وقت الجدولة (send_at)</label>
                            <input type="datetime-local" name="send_at" value="{{ old('send_at') }}"
                                   class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-sky-500/40">
                        </div>
                    </div>

                    {{-- Picker --}}
                    <div id="nh_pick_wrap" class="mt-4 hidden">
                        <div class="rounded-3xl bg-black/35 border border-white/10 p-4">
                            <div class="flex items-center justify-between gap-3 mb-2">
                                <div class="text-sm font-extrabold text-white">
                                    اختيار من الموجود
                                    <span class="text-[11px] font-normal text-slate-300/80">سيتم توليد العنوان + نص التذكير + الرابط + ref_id</span>
                                </div>
                                <button type="button" id="nh_pick_clear"
                                        class="text-[11px] px-3 py-1 rounded-full bg-white/10 border border-white/15 text-white/80 hover:bg-white/15 transition">
                                    مسح الاختيار
                                </button>
                            </div>

                            <div class="space-y-2">
                                <div class="nh_pick_box hidden" data-type="decision">
                                    <label class="text-[10px] text-slate-300/80">قرارات القيادة</label>
                                    <select id="nh_pick_decision" class="nh_picker 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>
                                    </select>
                                </div>

                                <div class="nh_pick_box hidden" data-type="live">
                                    <label class="text-[10px] text-slate-300/80">اللايفات (مجدول/بانتظار إثبات/بانتظار عذر)</label>
                                    <select id="nh_pick_live" class="nh_picker 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>
                                    </select>
                                </div>

                                <div class="nh_pick_box hidden" data-type="weekly_test">
                                    <label class="text-[10px] text-slate-300/80">الاختبارات</label>
                                    <select id="nh_pick_weekly" class="nh_picker 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>
                                    </select>
                                </div>

                                <div class="nh_pick_box hidden" data-type="daily_reading">
                                    <label class="text-[10px] text-slate-300/80">اقرأني</label>
                                    <select id="nh_pick_reading" class="nh_picker 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>
                                    </select>
                                </div>

                                <div class="text-[11px] text-slate-300/75 pt-1">
                                    ملاحظة: هذا الاختيار لا يرسل “100 إشعار لنفس الشخص”. هو فقط يحدد المحتوى، والإرسال الحقيقي يوصل **إشعار واحد لكل عضو**.
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            {{-- Side --}}
            <div class="space-y-4">

                <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-950/98 to-black/98 border border-white/10 shadow-xl p-5 sm:p-6">
                    <div class="pointer-events-none absolute -top-16 -right-10 w-44 h-44 rounded-full bg-cyan-400/10 blur-3xl"></div>

                    <div class="flex items-center gap-3 mb-4">
                        <div class="w-10 h-10 rounded-2xl bg-cyan-500/15 border border-cyan-400/25 grid place-items-center text-cyan-200">
                            <i class="fa-solid fa-users"></i>
                        </div>
                        <div>
                            <div class="text-[11px] text-slate-300/80">الجمهور</div>
                            <div class="text-sm font-extrabold text-white">اختر من يستلم</div>
                        </div>
                    </div>

                    <div class="space-y-2">
                        @foreach(['all'=>'الجميع','moderators'=>'المشرفين','beta'=>'Beta','male'=>'ذكور','female'=>'إناث'] as $k=>$lbl)
                            <label class="flex items-center justify-between gap-3 rounded-2xl bg-black/40 border border-white/15 px-3 py-3 cursor-pointer hover:bg-white/5 transition">
                                <span class="text-xs text-white/90 font-bold">{{ $lbl }}</span>
                                <input type="radio" name="audience" value="{{ $k }}" class="accent-fuchsia-500" @checked($oldAud===$k)>
                            </label>
                        @endforeach
                    </div>

                    <button class="mt-4 w-full inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-bold text-slate-900
                        bg-gradient-to-r from-fuchsia-300 via-fuchsia-200 to-cyan-200 shadow-lg shadow-fuchsia-500/25 hover:scale-[1.01] active:scale-100 transition">
                        <i class="fa-solid fa-check ms-2 text-[11px]"></i>
                        حفظ
                    </button>

                    <a href="{{ route('superadmin.notifyhub.notifications.index') }}"
                       class="mt-2 w-full inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
                        <i class="fa-solid fa-arrow-right ms-2 text-[11px]"></i>
                        رجوع
                    </a>
                </div>

            </div>
        </form>

    </div>
</div>

<script>
(function(){
    // schedule ui
    const mode = document.getElementById('nh_mode');
    const box  = document.getElementById('nh_schedule_box');
    function syncSchedule(){
        const v = mode.value || 'send_now';
        box.classList.toggle('hidden', v !== 'schedule');
    }
    syncSchedule();
    mode.addEventListener('change', syncSchedule);
})();
</script>

<script>
(function(){
    const typeSel = document.getElementById('nh_type');

    const listUrl = @json(route('superadmin.notifyhub.picker.list'));
    const itemUrl = @json(route('superadmin.notifyhub.picker.item'));

    const titleInput = document.getElementById('nh_title');
    const bodyInput  = document.getElementById('nh_body');
    const urlInput   = document.getElementById('nh_url');
    const refInput   = document.getElementById('nh_ref');

    const pickWrap = document.getElementById('nh_pick_wrap');
    const pickBoxes = Array.from(document.querySelectorAll('.nh_pick_box'));
    const pickers = Array.from(document.querySelectorAll('.nh_picker'));

    const pickIdHidden = document.getElementById('nh_pick_id');

    const autoChk = document.getElementById('nh_auto');
    const autoHidden = document.getElementById('nh_auto_hidden');

    const clearBtn = document.getElementById('nh_pick_clear');

    function setAutoHidden(){
        autoHidden.value = autoChk.checked ? '1' : '0';
    }
    setAutoHidden();
    autoChk.addEventListener('change', setAutoHidden);

    function activePicker(){
        const t = (typeSel.value || '').trim();
        const box = pickBoxes.find(b => b.getAttribute('data-type') === t);
        if(!box) return null;
        return box.querySelector('select');
    }

    function showPickerForType(){
        const t = (typeSel.value || '').trim();
        const allowed = ['decision','live','weekly_test','daily_reading'].includes(t);
        pickWrap.classList.toggle('hidden', !allowed);
        pickBoxes.forEach(b => b.classList.toggle('hidden', b.getAttribute('data-type') !== t));
        if(!allowed){
            pickIdHidden.value = '';
        }
    }

    async function loadList(){
        showPickerForType();
        const t = (typeSel.value || '').trim();
        const allowed = ['decision','live','weekly_test','daily_reading'].includes(t);
        const sel = activePicker();
        if(!sel || !allowed) return;

        sel.innerHTML = `<option value="">— جارِ التحميل… —</option>`;
        try{
            const res = await fetch(`${listUrl}?type=${encodeURIComponent(t)}`, { headers: { 'Accept':'application/json' } });
            const rows = await res.json();

            let ph = '— اختر —';
            if(t==='live') ph = '— اختر لايف —';
            if(t==='decision') ph = '— اختر قرارًا —';
            if(t==='weekly_test') ph = '— اختر اختبارًا —';
            if(t==='daily_reading') ph = '— اختر من اقرأني —';

            sel.innerHTML = `<option value="">${ph}</option>`;
            (rows || []).forEach(r => {
                const opt = document.createElement('option');
                opt.value = r.id;
                opt.textContent = `#${r.id} — ${r.title || ''}`;
                sel.appendChild(opt);
            });
        }catch(e){
            sel.innerHTML = `<option value="">— فشل تحميل القائمة —</option>`;
        }
    }

    async function loadItem(){
        const t = (typeSel.value || '').trim();
        const sel = activePicker();
        if(!sel) return;

        const id = (sel.value || '').trim();
        pickIdHidden.value = id || '';

        if(!id) return;

        try{
            const res = await fetch(`${itemUrl}?type=${encodeURIComponent(t)}&id=${encodeURIComponent(id)}`, { headers: { 'Accept':'application/json' } });
            const data = await res.json();
            if(!data || !data.ref_id) return;

            // ref_id/url دائماً
            if(refInput) refInput.value = data.ref_id || '';
            if(urlInput) urlInput.value = data.url || '';

            // title/body حسب خيار auto
            if(autoChk.checked){
                if(titleInput) titleInput.value = data.title || '';
                if(bodyInput)  bodyInput.value  = data.body  || '';
            }

        }catch(e){}
    }

    // events
    typeSel.addEventListener('change', async () => {
        pickIdHidden.value = '';
        await loadList();
    });

    pickers.forEach(p => p.addEventListener('change', loadItem));

    clearBtn.addEventListener('click', () => {
        pickIdHidden.value = '';
        const sel = activePicker();
        if(sel) sel.value = '';
    });

    // init
    loadList();
})();
</script>
@endsection