@extends('layouts.superadmin')

@section('title','NotifyHub — القواعد')

@section('content')
@php
    $sources = [
        'decision_activated'      => ['label' => 'قرار: تفعيل/نشر',        'icon' => 'fa-gavel'],
        'live_created'            => ['label' => 'لايف: إنشاء',             'icon' => 'fa-satellite-dish'],
        'live_status_changed'     => ['label' => 'لايف: تغيير الحالة',       'icon' => 'fa-rotate'],
        'weekly_test_created'     => ['label' => 'اختبار: إنشاء',            'icon' => 'fa-clipboard-check'],
        'daily_reading_published' => ['label' => 'اقرأني: نشر',             'icon' => 'fa-book-open'],
    ];

    $audLabels = [
        'all'        => 'الجميع',
        'moderators' => 'المشرفين',
        'beta'       => 'Beta',
        'male'       => 'ذكور',
        'female'     => 'إناث',
    ];

    $enabledCls = 'bg-emerald-500/15 border-emerald-400/25 text-emerald-200';
    $disabledCls = 'bg-rose-500/15 border-rose-400/25 text-rose-200';
@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-5 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/25 shadow-2xl shadow-fuchsia-500/10">
            <div class="pointer-events-none absolute -top-20 -right-12 w-72 h-72 rounded-full bg-fuchsia-400/15 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -left-16 w-80 h-80 rounded-full bg-cyan-500/12 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-4">
                <div class="space-y-2">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-white/15 text-[11px] text-white/85">
                        <i class="fa-solid fa-sliders text-xs"></i>
                        <span>NotifyHub — Rules</span>
                    </div>
                    <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
                        قواعد الإشعارات <span class="text-fuchsia-300">Rules</span>
                    </h1>
                    <p class="text-[12px] sm:text-[14px] text-slate-200/85">
                        تحكم بالإشعارات التلقائية: المصدر + الجمهور + Throttle + قالب العنوان/النص + رابط اختياري.
                    </p>
                </div>

                <div class="flex flex-wrap gap-2">
                    <a href="{{ route('superadmin.notifyhub.notifications.index') }}"
                       class="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-bell ms-2 text-[11px]"></i>
                        الإشعارات
                    </a>
                    <a href="{{ route('superadmin.notifyhub.logs.index') }}"
                       class="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-clock-rotate-left ms-2 text-[11px]"></i>
                        السجل
                    </a>
                    <a href="{{ route('superadmin.notifyhub.dashboard') }}"
                       class="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-gauge-high ms-2 text-[11px]"></i>
                        الداشبورد
                    </a>
                </div>
            </div>
        </div>

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

        {{-- Create Rule --}}
        <div class="rounded-3xl bg-gradient-to-br from-slate-900/90 via-slate-950/95 to-black/95 border border-white/10 shadow-xl overflow-hidden">
            <div class="p-4 sm:p-5 border-b border-white/10 flex items-center justify-between">
                <div class="text-sm font-extrabold text-white">إنشاء Rule</div>
                <div class="text-[11px] text-slate-300/80">القواعد تتحكم بالإشعارات التلقائية فقط</div>
            </div>

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

                <div class="lg:col-span-1 space-y-3">
                    <div>
                        <label class="text-[10px] text-slate-300/80">المصدر (Source)</label>
                        <select name="source" required
                                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($sources as $k => $s)
                                <option value="{{ $k }}" @selected(old('source')===$k)>{{ $s['label'] }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="text-[10px] text-slate-300/80">الجمهور (Audience)</label>
                        <select name="audience" required
                                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">
                            @foreach($audLabels as $k => $lbl)
                                <option value="{{ $k }}" @selected(old('audience','all')===$k)>{{ $lbl }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="text-[10px] text-slate-300/80">Throttle (بالدقائق)</label>
                        <input type="number" name="throttle_minutes" min="0" max="1440" value="{{ old('throttle_minutes', 0) }}" required
                               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 class="text-[10px] text-slate-400/80 mt-1">0 = بدون تقييد</div>
                    </div>
                </div>

                <div class="lg:col-span-2 space-y-3">
                    <div>
                        <label class="text-[10px] text-slate-300/80">عنوان القالب (template_title)</label>
                        <input name="template_title" value="{{ old('template_title') }}" required 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">نص القالب (template_body)</label>
                        <textarea name="template_body" rows="5" required 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('template_body') }}</textarea>
                    </div>

                    <div>
                        <label class="text-[10px] text-slate-300/80">رابط القالب (template_url) اختياري</label>
                        <input name="template_url" value="{{ old('template_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="اتركه فارغًا إن لم يوجد">
                    </div>

                    <div class="flex flex-wrap gap-2 pt-1">
                        <button class="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/20 hover:scale-[1.01] active:scale-100 transition">
                            <i class="fa-solid fa-plus ms-2 text-[11px]"></i>
                            إنشاء Rule
                        </button>
                    </div>
                </div>
            </form>
        </div>

        {{-- Rules List --}}
        <div class="rounded-3xl bg-gradient-to-br from-slate-900/90 via-slate-950/95 to-black/95 border border-white/10 shadow-xl overflow-hidden">
            <div class="p-4 sm:p-5 border-b border-white/10 flex items-center justify-between">
                <div class="text-sm font-extrabold text-white">القواعد الحالية</div>
                <div class="text-[11px] text-slate-300/80">عدد: {{ number_format(count($rules ?? [])) }}</div>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full text-xs text-slate-100">
                    <thead class="bg-white/5 text-[11px] text-slate-200/80">
                        <tr>
                            <th class="px-4 py-3 text-right">#</th>
                            <th class="px-4 py-3 text-right">المصدر</th>
                            <th class="px-4 py-3 text-right">الجمهور</th>
                            <th class="px-4 py-3 text-right">Throttle</th>
                            <th class="px-4 py-3 text-right">الحالة</th>
                            <th class="px-4 py-3 text-right">قالب العنوان/النص</th>
                            <th class="px-4 py-3 text-right">إدارة</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-white/5">
                        @forelse($rules as $r)
                            @php
                                $src = $sources[$r->source] ?? ['label'=>$r->source,'icon'=>'fa-bolt'];
                                $aud = $audLabels[$r->audience] ?? $r->audience;
                                $isOn = (int)$r->is_enabled === 1;
                            @endphp
                            <tr class="hover:bg-white/5 transition">
                                <td class="px-4 py-3 text-slate-200/90">{{ $r->id }}</td>

                                <td class="px-4 py-3">
                                    <div class="inline-flex items-center gap-2">
                                        <span class="w-8 h-8 rounded-xl bg-black/40 border border-white/10 grid place-items-center text-white/80">
                                            <i class="fa-solid {{ $src['icon'] }}"></i>
                                        </span>
                                        <div class="min-w-0">
                                            <div class="font-bold text-white/90">{{ $src['label'] }}</div>
                                            <div class="text-[11px] text-slate-300/70">{{ $r->source }}</div>
                                        </div>
                                    </div>
                                </td>

                                <td class="px-4 py-3 text-white/85 font-bold">{{ $aud }}</td>
                                <td class="px-4 py-3 text-slate-200/90">{{ (int)$r->throttle_minutes }}m</td>

                                <td class="px-4 py-3">
                                    <span class="inline-flex items-center px-2 py-1 rounded-xl border {{ $isOn ? $enabledCls : $disabledCls }}">
                                        {{ $isOn ? 'مفعل' : 'معطل' }}
                                    </span>
                                </td>

                                <td class="px-4 py-3">
                                    <div class="font-bold text-white/90 truncate max-w-[420px]">{{ $r->template_title }}</div>
                                    <div class="text-[11px] text-slate-300/70 truncate max-w-[520px]">{{ $r->template_body }}</div>
                                    @if(!empty($r->template_url))
                                        <div class="text-[11px] text-cyan-200/90 truncate max-w-[520px]">
                                            <i class="fa-solid fa-link ms-1"></i>{{ $r->template_url }}
                                        </div>
                                    @endif
                                </td>

                                <td class="px-4 py-3">
                                    <div class="flex flex-wrap gap-2">
                                        <form method="post" action="{{ route('superadmin.notifyhub.rules.toggle', $r->id) }}">
                                            @csrf
                                            <button class="inline-flex items-center justify-center px-3 py-2 rounded-2xl text-[11px] font-bold
                                                bg-white/10 border border-white/15 text-white/90 hover:bg-white/15 transition">
                                                <i class="fa-solid fa-power-off ms-2 text-[11px]"></i>
                                                Toggle
                                            </button>
                                        </form>

                                        <button type="button"
                                                class="nh-edit inline-flex items-center justify-center px-3 py-2 rounded-2xl text-[11px] font-bold
                                                bg-white/10 border border-white/15 text-white/90 hover:bg-white/15 transition"
                                                data-id="{{ $r->id }}"
                                                data-audience="{{ $r->audience }}"
                                                data-throttle="{{ (int)$r->throttle_minutes }}"
                                                data-title="{{ e($r->template_title) }}"
                                                data-body="{{ e($r->template_body) }}"
                                                data-url="{{ e((string)$r->template_url) }}">
                                            <i class="fa-solid fa-pen ms-2 text-[11px]"></i>
                                            تعديل
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-4 py-10 text-center text-slate-300/80">
                                    لا توجد Rules حتى الآن.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Modal Edit --}}
        <div id="nhModal" class="fixed inset-0 z-[999] hidden">
            <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>

            <div class="relative max-w-2xl mx-auto mt-10 sm:mt-16 px-3">
                <div class="rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-950/98 to-black/98 border border-white/10 shadow-2xl overflow-hidden">
                    <div class="p-4 sm:p-5 border-b border-white/10 flex items-center justify-between">
                        <div class="text-sm font-extrabold text-white">تعديل Rule</div>
                        <button id="nhClose" class="w-9 h-9 rounded-xl bg-white/10 border border-white/15 text-white/80 hover:bg-white/15 transition">
                            <i class="fa-solid fa-xmark"></i>
                        </button>
                    </div>

                    <form id="nhEditForm" method="post" class="p-4 sm:p-6 space-y-3">
                        @csrf

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <div>
                                <label class="text-[10px] text-slate-300/80">الجمهور</label>
                                <select name="audience" id="nhAud" required
                                        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">
                                    @foreach($audLabels as $k => $lbl)
                                        <option value="{{ $k }}">{{ $lbl }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div>
                                <label class="text-[10px] text-slate-300/80">Throttle (دقائق)</label>
                                <input type="number" name="throttle_minutes" id="nhThr" min="0" max="1440" required
                                       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>
                            <label class="text-[10px] text-slate-300/80">عنوان القالب</label>
                            <input name="template_title" id="nhTitle" required 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">نص القالب</label>
                            <textarea name="template_body" id="nhBody" rows="6" required 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"></textarea>
                        </div>

                        <div>
                            <label class="text-[10px] text-slate-300/80">رابط القالب (اختياري)</label>
                            <input name="template_url" id="nhUrl" 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">
                        </div>

                        <div class="flex gap-2 pt-1">
                            <button class="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/20 hover:scale-[1.01] active:scale-100 transition">
                                <i class="fa-solid fa-floppy-disk ms-2 text-[11px]"></i>
                                حفظ التعديل
                            </button>

                            <button type="button" id="nhCancel"
                                    class="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">
                                إلغاء
                            </button>
                        </div>
                    </form>

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

    </div>
</div>

<script>
(function(){
    const modal = document.getElementById('nhModal');
    const closeBtn = document.getElementById('nhClose');
    const cancelBtn = document.getElementById('nhCancel');
    const form = document.getElementById('nhEditForm');

    const aud = document.getElementById('nhAud');
    const thr = document.getElementById('nhThr');
    const ttl = document.getElementById('nhTitle');
    const bdy = document.getElementById('nhBody');
    const url = document.getElementById('nhUrl');

    function openModal(){
        modal.classList.remove('hidden');
    }
    function closeModal(){
        modal.classList.add('hidden');
    }

    closeBtn.addEventListener('click', closeModal);
    cancelBtn.addEventListener('click', closeModal);
    modal.addEventListener('click', (e)=>{ if(e.target === modal) closeModal(); });

    document.querySelectorAll('.nh-edit').forEach(btn=>{
        btn.addEventListener('click', ()=>{
            const id = btn.getAttribute('data-id');
            form.setAttribute('action', "{{ url('/superadmin/notifyhub/rules') }}/" + id);

            aud.value = btn.getAttribute('data-audience') || 'all';
            thr.value = btn.getAttribute('data-throttle') || 0;
            ttl.value = btn.getAttribute('data-title') || '';
            bdy.value = btn.getAttribute('data-body') || '';
            url.value = btn.getAttribute('data-url') || '';

            openModal();
        });
    });
})();
</script>
@endsection