@extends('layouts.superadmin')

@section('title','إضافة موعد ProActive')
@section('page-title','➕ إضافة موعد ProActive')

@section('content')
@php
    $isUserOne = auth()->check() && (int)auth()->id() === 1;
@endphp

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

        {{-- 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-emerald-400/20 shadow-2xl shadow-emerald-500/10">
            <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-emerald-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-emerald-300/25 text-[11px] text-emerald-100">
                        <i class="fa-solid fa-calendar-plus text-xs"></i>
                        <span>ProActive — إضافة موعد جديد • SuperAdmin</span>
                    </div>

                    <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
                        إضافة موعد <span class="text-emerald-300">ProActive</span>
                    </h1>

                    <p class="text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
                        أدخل تفاصيل الموعد بدقة. سيتم استخدام هذه البيانات ضمن لوحة ProActive والجدولة والمتابعة.
                    </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-cyan-400"></span>
                            المنطقة الزمنية: {{ config('app.timezone','Asia/Jerusalem') }}
                        </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 {{ $isUserOne ? 'bg-emerald-400' : 'bg-rose-400' }}"></span>
                            الصلاحية: {{ $isUserOne ? 'مسموح (User #1)' : 'مقيّد (User #1 فقط)' }}
                        </span>
                    </div>
                </div>

                {{-- Side Card --}}
                <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-10 h-10 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 text-emerald-200 grid place-items-center">
                                <i class="fa-solid fa-shield-halved"></i>
                            </div>
                            <div class="min-w-0">
                                <div class="text-[11px] text-slate-300/80">حماية الصفحة</div>
                                <div class="font-bold text-sm truncate">كلمة مرور + User #1</div>
                            </div>
                        </div>
                        <div class="text-[11px] text-slate-300/80 leading-relaxed">
                            لن يتم فتح نموذج الإضافة إلا بعد التحقق.
                        </div>
                        <div class="flex items-center gap-2 pt-1">
                            <a href="{{ route('superadmin.proactive.schedules.index') }}"
                               class="flex-1 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-arrow-right ms-2 text-[11px]"></i>
                                رجوع للجدول
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        {{-- FLASH / ALERTS --}}
        @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">
                <i class="fa-solid fa-circle-check ms-2"></i>
                {{ session('success') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="rounded-2xl border border-rose-400/20 bg-rose-500/10 text-rose-200 px-4 py-3 text-sm">
                <div class="font-extrabold mb-2">
                    <i class="fa-solid fa-triangle-exclamation ms-2"></i>
                    يوجد أخطاء في الإدخال:
                </div>
                <ul class="list-disc list-inside space-y-1 text-[13px]">
                    @foreach($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- FORM CARD --}}
        <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-slate-900/85 via-slate-950/85 to-black/85 shadow-2xl">
            <div class="pointer-events-none absolute -top-16 -left-16 w-64 h-64 rounded-full bg-white/8 blur-3xl"></div>

            <div class="relative p-5 sm:p-7 lg:p-8 space-y-6">

                <div class="flex items-center justify-between gap-3">
                    <div class="flex items-center gap-3">
                        <div class="w-11 h-11 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 grid place-items-center text-emerald-200">
                            <i class="fa-solid fa-clipboard-list text-lg"></i>
                        </div>
                        <div>
                            <div class="text-[11px] text-white/60">نموذج الإدخال</div>
                            <div class="text-lg font-extrabold text-white">معلومات الموعد</div>
                        </div>
                    </div>

                    <div class="hidden sm:flex items-center gap-2 text-[11px] text-white/60">
                        <span class="px-3 py-1 rounded-full bg-white/5 border border-white/10">
                            الحقول المطلوبة <span class="text-rose-200 font-bold">*</span>
                        </span>
                    </div>
                </div>

                <form id="proactiveCreateForm" method="POST" action="{{ route('superadmin.proactive.schedules.store') }}" class="space-y-5" novalidate>
                    @csrf

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

                        {{-- event_type --}}
                        <div class="space-y-1">
                            <label class="text-[12px] text-white/70">نوع الفعالية <span class="text-rose-300">*</span></label>
                            <select name="event_type"
                                    class="w-full rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-3 py-2.5
                                           focus:outline-none focus:ring-2 focus:ring-emerald-500/40"
                                    required>
                                <option value="regular" @selected(($defaults['event_type']??'')==='regular')>عادي</option>
                                <option value="plus"    @selected(($defaults['event_type']??'')==='plus')>بلس</option>
                            </select>
                            <div class="text-[11px] text-white/45">حدد نوع الموعد داخل منظومة ProActive.</div>
                        </div>

                        {{-- status --}}
                        <div class="space-y-1">
                            <label class="text-[12px] text-white/70">الحالة <span class="text-rose-300">*</span></label>
                            <select name="status"
                                    class="w-full rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-3 py-2.5
                                           focus:outline-none focus:ring-2 focus:ring-cyan-500/40"
                                    required>
                                <option value="upcoming" selected>قادمة</option>
                                <option value="active">نشطة</option>
                                <option value="finished">منتهية</option>
                                <option value="cancelled">ملغاة</option>
                            </select>
                            <div class="text-[11px] text-white/45">يمكن تعديل الحالة لاحقًا من لوحة ProActive.</div>
                        </div>

                        {{-- event_title --}}
                        <div class="space-y-1">
                            <label class="text-[12px] text-white/70">عنوان الفعالية <span class="text-rose-300">*</span></label>
                            <input type="text" name="event_title"
                                   value="{{ old('event_title') }}"
                                   class="w-full rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-3 py-2.5
                                          placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/35"
                                   placeholder="سهرة تواصل — فريق الشباب"
                                   required>
                            <div class="text-[11px] text-white/45">اكتب عنوان واضح ومحدد.</div>
                        </div>

                        {{-- platform --}}
                        <div class="space-y-1">
                            <label class="text-[12px] text-white/70">المنصة <span class="text-rose-300">*</span></label>
                            <select name="platform"
                                    class="w-full rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-3 py-2.5
                                           focus:outline-none focus:ring-2 focus:ring-amber-500/35"
                                    required>
                                @foreach($platforms as $k=>$v)
                                    <option value="{{ $k }}" @selected(($defaults['platform']??'')===$k)>{{ $v }}</option>
                                @endforeach
                            </select>
                            <div class="text-[11px] text-white/45">TikTok / WhatsApp / Telegram … حسب تعريفك.</div>
                        </div>

                        {{-- event_date --}}
                        <div class="space-y-1">
                            <label class="text-[12px] text-white/70">تاريخ الفعالية <span class="text-rose-300">*</span></label>
                            <input type="date" name="event_date"
                                   value="{{ old('event_date', $defaults['event_date'] ?? null) }}"
                                   class="w-full rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-3 py-2.5
                                          focus:outline-none focus:ring-2 focus:ring-cyan-500/35"
                                   required>
                            <div class="text-[11px] text-white/45">التاريخ الأساسي للموعد.</div>
                        </div>

                        {{-- event_time --}}
                        <div class="space-y-1">
                            <label class="text-[12px] text-white/70">وقت البداية (اختياري)</label>
                            <input type="time" name="event_time"
                                   value="{{ old('event_time') }}"
                                   class="w-full rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-3 py-2.5
                                          focus:outline-none focus:ring-2 focus:ring-emerald-500/35">
                            <div class="text-[11px] text-white/45">المنطقة الزمنية: {{ config('app.timezone','Asia/Jerusalem') }}</div>
                        </div>

                        {{-- leader_name --}}
                        <div class="space-y-1">
                            <label class="text-[12px] text-white/70">القائد/المسؤول (اختياري)</label>
                            <input type="text" name="leader_name"
                                   value="{{ old('leader_name') }}"
                                   class="w-full rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-3 py-2.5
                                          placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/30"
                                   placeholder="اسم القائد">
                            <div class="text-[11px] text-white/45">مثلاً: سيف / رولا / الصقر …</div>
                        </div>

                        {{-- notes --}}
                        <div class="space-y-1">
                            <label class="text-[12px] text-white/70">ملاحظات تنظيمية (اختياري)</label>
                            <textarea name="notes" rows="3"
                                      class="w-full rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-3 py-2.5
                                             placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-amber-500/30"
                                      placeholder="التجهيزات، توزيع الأدوار، روابط...">{{ old('notes') }}</textarea>
                            <div class="text-[11px] text-white/45">أي تفاصيل داخلية تساعد بالتنفيذ.</div>
                        </div>

                        {{-- event_description --}}
                        <div class="md:col-span-2 space-y-1">
                            <label class="text-[12px] text-white/70">وصف الفعالية (اختياري)</label>
                            <textarea name="event_description" rows="4"
                                      class="w-full rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-3 py-2.5
                                             placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-cyan-500/30"
                                      placeholder="ملخص فكرة الفعالية، أهدافها، فقراتها…">{{ old('event_description') }}</textarea>
                            <div class="text-[11px] text-white/45">وصف تفصيلي يساعد الأعضاء يفهموا الهدف.</div>
                        </div>
                    </div>

                    {{-- Actions --}}
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-end gap-2 pt-2">
                        <a href="{{ route('superadmin.proactive.schedules.index') }}"
                           class="px-4 py-2.5 rounded-2xl bg-white/10 border border-white/15 text-white/85 text-sm hover:bg-white/15 transition text-center">
                            <i class="fa-solid fa-arrow-right ms-2 text-[12px]"></i>
                            رجوع
                        </a>
                        <button id="saveBtn"
                                class="px-5 py-2.5 rounded-2xl text-sm font-extrabold text-slate-950
                                       bg-gradient-to-r from-emerald-300 via-emerald-200 to-cyan-200
                                       shadow-lg shadow-emerald-500/20 hover:scale-[1.01] active:scale-100 transition">
                            <i class="fa-solid fa-floppy-disk ms-2 text-[12px]"></i>
                            حفظ الموعد
                        </button>
                    </div>
                </form>

            </div>
        </div>

    </div>
</div>

{{-- ✅ Overlay Password Gate (User#1 + 12234) --}}
<div id="proactiveGate" class="fixed inset-0 z-[999999] hidden">
    <div class="absolute inset-0 bg-black/80 backdrop-blur-2xl"></div>

    <div class="relative max-w-md mx-auto mt-20 sm:mt-28 px-4">
        <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-950/95 to-black/95 border border-emerald-400/25 shadow-2xl shadow-emerald-500/10 p-5 sm:p-6">
            <div class="pointer-events-none absolute -top-16 -right-16 w-56 h-56 rounded-full bg-emerald-400/15 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-16 -left-16 w-56 h-56 rounded-full bg-cyan-400/15 blur-3xl"></div>

            <div class="relative space-y-4">
                <div class="flex items-center gap-3">
                    <div class="w-11 h-11 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 text-emerald-200 grid place-items-center">
                        <i class="fa-solid fa-lock text-lg"></i>
                    </div>
                    <div>
                        <div class="text-[11px] text-white/60">تحقق أمني</div>
                        <div class="text-lg font-extrabold text-white">فتح إضافة موعد ProActive</div>
                    </div>
                </div>

                <div class="rounded-2xl bg-black/40 border border-white/15 px-4 py-3 text-[12px] text-white/80 leading-relaxed">
                    هذه الصفحة محمية: <b class="text-white">فقط user #1</b> + كلمة مرور.
                </div>

                <div id="gateAlert" class="hidden rounded-2xl border border-rose-400/20 bg-rose-500/10 text-rose-200 px-4 py-3 text-sm">
                    <i class="fa-solid fa-triangle-exclamation ms-2"></i>
                    <span id="gateAlertText">خطأ</span>
                </div>

                <div class="space-y-1">
                    <label class="text-[12px] text-white/70">كلمة المرور</label>
                    <input id="gatePass" type="password" inputmode="numeric"
                           class="w-full rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-3 py-2.5
                                  placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-emerald-500/40"
                           placeholder="ادخل كلمة المرور">
                    <div class="text-[11px] text-white/45">ملاحظة: التحقق أيضاً من رقم العضوية (User ID).</div>
                </div>

                <div class="flex items-center gap-2">
                    <button type="button" onclick="gateTry()"
                            class="flex-1 px-4 py-2.5 rounded-2xl text-sm font-extrabold text-slate-950
                                   bg-gradient-to-r from-emerald-300 via-emerald-200 to-cyan-200
                                   shadow-lg shadow-emerald-500/20 hover:scale-[1.01] active:scale-100 transition">
                        <i class="fa-solid fa-unlock ms-2 text-[12px]"></i>
                        فتح
                    </button>

                    <a href="{{ route('superadmin.proactive.schedules.index') }}"
                       class="px-4 py-2.5 rounded-2xl bg-white/10 border border-white/15 text-white/85 text-sm hover:bg-white/15 transition">
                        رجوع
                    </a>
                </div>

                <div class="text-[11px] text-white/40">
                    إذا نسيت كلمة المرور، تواصل مع الإدارة العليا.
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function(){
    const isUserOne = @json($isUserOne);
    const PASS = '12234';

    const gate = document.getElementById('proactiveGate');
    const form = document.getElementById('proactiveCreateForm');
    const pass = document.getElementById('gatePass');
    const alertBox = document.getElementById('gateAlert');
    const alertText = document.getElementById('gateAlertText');

    function showError(msg){
        alertText.textContent = msg;
        alertBox.classList.remove('hidden');
    }
    function hideError(){
        alertBox.classList.add('hidden');
    }

    function openGate(){
        if (!gate) return;
        gate.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
        setTimeout(()=>pass?.focus(), 150);
    }

    function closeGate(){
        gate.classList.add('hidden');
        document.body.style.overflow = '';
        hideError();
        if (pass) pass.value = '';
    }

    // ✅ expose
    window.gateTry = function(){
        hideError();

        if (!isUserOne) {
            showError('ممنوع: هذه الصفحة متاحة فقط لـ user #1.');
            return;
        }

        const v = (pass?.value || '').trim();
        if (v !== PASS) {
            showError('كلمة المرور غير صحيحة.');
            return;
        }

        // unlock
        localStorage.setItem('proactive_add_unlocked_v1', '1');
        closeGate();
        form?.querySelector('input,select,textarea,button')?.focus?.();
    };

    // Enter key
    pass?.addEventListener('keydown', (e)=>{
        if(e.key === 'Enter'){
            e.preventDefault();
            window.gateTry();
        }
    });

    // Lock form until verified
    function lockForm(){
        if(!form) return;
        const els = form.querySelectorAll('input,select,textarea,button,a');
        els.forEach(el=>{
            if(el.tagName.toLowerCase() === 'a') return;
            el.disabled = true;
        });
        // allow back link
        form.querySelectorAll('a').forEach(a=>a.style.pointerEvents='auto');
    }

    function unlockForm(){
        if(!form) return;
        const els = form.querySelectorAll('input,select,textarea,button');
        els.forEach(el=>el.disabled = false);
    }

    document.addEventListener('DOMContentLoaded', ()=>{
        const ok = localStorage.getItem('proactive_add_unlocked_v1') === '1';

        lockForm();

        // إذا user#1 وسبق فتحها
        if(isUserOne && ok){
            unlockForm();
            return;
        }

        // otherwise show gate
        openGate();
        // وحتى لو حد حاول يضغط حفظ
        document.getElementById('saveBtn')?.addEventListener('click', (e)=>{
            const okNow = localStorage.getItem('proactive_add_unlocked_v1') === '1';
            if(!(isUserOne && okNow)){
                e.preventDefault();
                openGate();
            }
        });
    });
})();
</script>
@endsection