@extends('layouts.superadmin')

@section('title', 'تعديل اللايفات غير المؤكدة')
@section('page-title', 'تعديل اللايفات غير المؤكدة')

@section('content')
@php
    $badge = [
        'scheduled'      => ['label'=>'مجدول','cls'=>'border-slate-700 bg-slate-800 text-slate-200'],
        'pending_proof'  => ['label'=>'بانتظار إثبات','cls'=>'border-sky-500/30 bg-sky-500/15 text-sky-200'],
        'pending_excuse' => ['label'=>'بانتظار عذر','cls'=>'border-amber-500/30 bg-amber-500/15 text-amber-200'],
        'proof_rejected' => ['label'=>'رفض الإثبات','cls'=>'border-rose-500/30 bg-rose-500/15 text-rose-200'],
        'excuse_rejected'=> ['label'=>'رفض العذر','cls'=>'border-rose-500/30 bg-rose-500/15 text-rose-200'],
    ];

    $initialView = request('view','table');
    if (!in_array($initialView,['table','cards'])) {
        $initialView = 'table';
    }
@endphp

<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 py-6">
    <div class="max-w-6xl mx-auto px-4 rtl text-white">

        {{-- هيدر --}}
        <div class="mb-6">
            <div class="flex items-center gap-3 mb-3">
                <div class="h-11 w-11 rounded-2xl bg-slate-800 flex items-center justify-center
                            ring-2 ring-emerald-500/60 shadow-lg shadow-emerald-500/30">
                    <i class="fa-solid fa-pen-to-square text-emerald-400 text-xl"></i>
                </div>
            <div class="text-center sm:text-right">
                    <h1 class="text-xl sm:text-2xl font-bold">تعديل اللايفات غير المؤكدة</h1>
                    <p class="text-sm text-slate-300/80">
                        من هنا يمكن للإدارة تعديل <span class="font-semibold">الوقت</span> و <span class="font-semibold">المدة بالساعات</span> و
                        <span class="font-semibold">ملاحظات اللايف</span> فقط، لجميع اللايفات التي ما زالت في حالة
                        <span class="font-semibold">غير مؤكدة</span>، مع تسجيل كل تعديل في سجل اللايفات.
                    </p>
                </div>
            </div>

            <div class="grid gap-3 text-xs sm:text-sm text-slate-300 sm:grid-cols-3 grid-cols-1">
                <div class="flex flex-col">
                    <span class="text-slate-400">الفترة</span>
                    <span class="font-medium">{{ $from }} → {{ $to }}</span>
                </div>
                <div class="flex flex-col">
                    <span class="text-slate-400">عدد اللايفات المعروضة</span>
                    <span class="font-medium">{{ $streams->total() }}</span>
                </div>
                <div class="flex flex-col">
                    <span class="text-slate-400">تنبيه</span>
                    <span class="font-medium">لا يمكن من هنا تغيير الحالة أو النقاط، فقط الوقت والساعات والملاحظات.</span>
                </div>
            </div>
        </div>

        {{-- فلاتر --}}
        <form method="GET" action="{{ route('superadmin.falcon-room.lives-tools.unconfirmed.index') }}"
              class="mb-6 rounded-2xl border border-slate-700/80 bg-slate-900/90 p-4 sm:p-5 shadow-xl">

            <input type="hidden" name="view" id="unconfirmed-view-input" value="{{ $initialView }}">

            <div class="grid gap-4 md:grid-cols-5 grid-cols-1">
                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">من</label>
                    <input type="date" name="from" value="{{ $from }}"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                  focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">إلى</label>
                    <input type="date" name="to" value="{{ $to }}"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                  focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">بحث عضو</label>
                    <input type="text" name="q" value="{{ $q }}"
                           placeholder="اسم / يوزر"
                           class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm
                                  text-white placeholder:text-slate-500 focus:outline-none focus:ring-2
                                  focus:ring-emerald-500 focus:border-emerald-500">
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">النوع</label>
                    <select name="type"
                            class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                   focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                        <option value="" @selected($type==='')>الكل</option>
                        <option value="guests" @selected($type==='guests')>guests</option>
                        <option value="tours" @selected($type==='tours')>tours</option>
                        <option value="both" @selected($type==='both')>both</option>
                    </select>
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-xs text-slate-300 mb-1">الحالة</label>
                    <select name="status"
                            class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                   focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                        <option value="" @selected($status==='')>كل غير المؤكدة</option>
                        <option value="scheduled" @selected($status==='scheduled')>scheduled</option>
                        <option value="pending_proof" @selected($status==='pending_proof')>pending_proof</option>
                        <option value="pending_excuse" @selected($status==='pending_excuse')>pending_excuse</option>
                        <option value="proof_rejected" @selected($status==='proof_rejected')>proof_rejected</option>
                        <option value="excuse_rejected" @selected($status==='excuse_rejected')>excuse_rejected</option>
                    </select>
                </div>
            </div>

            <div class="mt-4 flex flex-wrap items-center gap-2">
                <button class="inline-flex items-center justify-center rounded-xl bg-emerald-500 px-4 py-2 text-sm font-semibold
                               text-slate-950 hover:bg-emerald-400 transition">
                    <i class="fa-solid fa-filter ml-2 text-xs"></i> تطبيق
                </button>

                <a href="{{ route('superadmin.falcon-room.lives-tools.unconfirmed.index') }}"
                   class="inline-flex items-center justify-center rounded-xl border border-slate-600 px-4 py-2 text-sm
                          font-medium text-slate-200 hover:bg-slate-800/80 transition">
                    إعادة ضبط
                </a>
            </div>
        </form>

        {{-- KPIs --}}
        <div class="grid gap-4 md:grid-cols-5 mb-6">
            <div class="rounded-2xl border border-slate-700/70 bg-gradient-to-br from-slate-900 via-slate-950 to-slate-900 p-4 shadow-lg">
                <p class="text-xs text-slate-400 mb-1">الإجمالي</p>
                <p class="text-2xl font-semibold text-emerald-300">{{ $kpis['total'] ?? 0 }}</p>
            </div>
            <div class="rounded-2xl border border-slate-700/70 bg-gradient-to-br from-slate-900 via-slate-950 to-slate-900 p-4 shadow-lg">
                <p class="text-xs text-slate-400 mb-1">scheduled</p>
                <p class="text-2xl font-semibold text-slate-200">{{ $kpis['scheduled'] ?? 0 }}</p>
            </div>
            <div class="rounded-2xl border border-slate-700/70 bg-gradient-to-br from-slate-900 via-slate-950 to-slate-900 p-4 shadow-lg">
                <p class="text-xs text-slate-400 mb-1">pending_proof</p>
                <p class="text-2xl font-semibold text-sky-300">{{ $kpis['pending_proof'] ?? 0 }}</p>
            </div>
            <div class="rounded-2xl border border-slate-700/70 bg-gradient-to-br from-slate-900 via-slate-950 to-slate-900 p-4 shadow-lg">
                <p class="text-xs text-slate-400 mb-1">pending_excuse</p>
                <p class="text-2xl font-semibold text-amber-300">{{ $kpis['pending_excuse'] ?? 0 }}</p>
            </div>
            <div class="rounded-2xl border border-slate-700/70 bg-gradient-to-br from-slate-900 via-slate-950 to-slate-900 p-4 shadow-lg">
                <p class="text-xs text-slate-400 mb-1">rejected</p>
                <p class="text-2xl font-semibold text-rose-300">{{ $kpis['rejected'] ?? 0 }}</p>
            </div>
        </div>

        {{-- جدول/كروت اللايفات --}}
        <div class="rounded-2xl border border-slate-700/80 bg-slate-900/90 shadow-xl overflow-hidden">
            <div class="border-b border-slate-800 px-4 py-3 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <div>
                    <h2 class="text-sm sm:text-base font-semibold">قائمة اللايفات غير المؤكدة</h2>
                    <p class="text-[11px] text-slate-400">
                        يمكنك عرض اللايفات كـ <span class="font-semibold">جدول</span> لمراجعة سريعة،
                        أو كـ <span class="font-semibold">كروت</span> مريحة على الهاتف. التعديل من خلال زر "تعديل" يفتح بانيل جانبي.
                    </p>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-[11px] text-slate-400 hidden sm:inline">يعرض 50 بكل صفحة</span>
                    <div class="inline-flex rounded-xl overflow-hidden border border-slate-700">
                        <button type="button" id="btn-unconfirmed-table"
                                class="px-3 py-2 text-xs font-semibold bg-slate-800 text-slate-200">
                            <i class="fa-solid fa-table ml-1"></i> جدول
                        </button>
                        <button type="button" id="btn-unconfirmed-cards"
                                class="px-3 py-2 text-xs font-semibold bg-slate-800 text-slate-200 border-r border-slate-700">
                            <i class="fa-solid fa-grip ml-1"></i> كروت
                        </button>
                    </div>
                </div>
            </div>

            {{-- جدول --}}
            <div id="unconfirmed-table-view" class="{{ $initialView === 'cards' ? 'hidden' : '' }}">
                <div class="overflow-x-auto">
                    <table class="min-w-full text-xs sm:text-sm text-slate-200">
                        <thead class="bg-slate-900/90 border-b border-slate-800 text-[11px] uppercase tracking-wide">
                            <tr>
                                <th class="px-3 py-2 text-right">ID</th>
                                <th class="px-3 py-2 text-right">العضو</th>
                                <th class="px-3 py-2 text-right">التاريخ</th>
                                <th class="px-3 py-2 text-right">الوقت</th>
                                <th class="px-3 py-2 text-right">الحالة</th>
                                <th class="px-3 py-2 text-right">النوع</th>
                                <th class="px-3 py-2 text-right">الساعات</th>
                                <th class="px-3 py-2 text-right">الملاحظات</th>
                                <th class="px-3 py-2 text-right">تعديل</th>
                            </tr>
                        </thead>

                        <tbody class="divide-y divide-slate-800">
                        @forelse($streams as $s)
                            @php
                                $memberName = $s->user?->name ?? $s->user?->username ?? ('#'.$s->user_id);
                                $planned = round(((int)($s->duration_hours ?? 0) * 60 + (int)($s->duration_minutes ?? 0))/60, 2);
                                $noteFull = (string)($s->description ?? '');
                                $notePreview = \Illuminate\Support\Str::limit(
                                    trim(preg_replace('/\s+/', ' ', strip_tags($noteFull))), 80
                                );
                                $noteB64 = base64_encode($noteFull);

                                // ✅ ADD: كشف ProActive (حسب الـ description أو slot_label)
                                $isProactive = str_contains($noteFull, '[PROACTIVE_SCHEDULE_ID=')
                                    || (strcasecmp((string)($s->slot_label ?? ''), 'ProActive') === 0);
                            @endphp

                            <tr class="hover:bg-slate-800/50"
                                data-live-row="{{ $s->id }}"
                                data-proactive="{{ $isProactive ? 1 : 0 }}">
                                <td class="px-3 py-2 align-top text-slate-300">#{{ $s->id }}</td>
                                <td class="px-3 py-2 align-top font-medium">{{ $memberName }}</td>
                                <td class="px-3 py-2 align-top text-slate-300">{{ (string)$s->scheduled_date }}</td>

                                {{-- ✅ إضافة بسيطة: data-time-raw عشان نقدر نطلع HH:MM ونحدّث --}}
                                <td class="px-3 py-2 align-top text-slate-300"
                                    data-time-cell
                                    data-time-raw="{{ (string)$s->scheduled_time }}">{{ (string)$s->scheduled_time }}</td>

                                <td class="px-3 py-2 align-top">
                                    @php $b = $badge[$s->status] ?? ['label'=>$s->status,'cls'=>'border-slate-700 bg-slate-800 text-slate-200']; @endphp
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full border text-[11px] {{ $b['cls'] }}">
                                        {{ $b['label'] }}
                                    </span>
                                </td>
                                <td class="px-3 py-2 align-top text-slate-300">{{ $s->type }}</td>
                                <td class="px-3 py-2 align-top font-semibold text-amber-200" data-hours>{{ $planned }} س</td>
                                <td class="px-3 py-2 align-top text-slate-300" data-note-preview>{{ $notePreview ?: '—' }}</td>
                                <td class="px-3 py-2 align-top">
                                    <button type="button"
                                            class="btn-edit-live inline-flex items-center gap-2 rounded-xl bg-emerald-500/15
                                                   border border-emerald-500/30 px-3 py-1.5 text-xs font-semibold text-emerald-200
                                                   hover:bg-emerald-500/25 transition"
                                            data-id="{{ $s->id }}"
                                            data-member="{{ e($memberName) }}"
                                            data-date="{{ (string)$s->scheduled_date }}"
                                            data-time="{{ (string)$s->scheduled_time }}"
                                            data-status="{{ (string)$s->status }}"
                                            data-type="{{ (string)$s->type }}"
                                            data-hours="{{ $planned }}"
                                            data-note-b64="{{ $noteB64 }}">
                                        <i class="fa-solid fa-pen"></i>
                                        تعديل
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="px-4 py-8 text-center text-slate-400">
                                    لا توجد لايفات غير مؤكدة ضمن الفلاتر الحالية.
                                </td>
                            </tr>
                        @endforelse
                        </tbody>

                    </table>
                </div>

                @if($streams->hasPages())
                    <div class="px-4 py-3 border-t border-slate-800">
                        {{ $streams->links() }}
                    </div>
                @endif
            </div>

            {{-- كروت --}}
            <div id="unconfirmed-cards-view" class="{{ $initialView === 'cards' ? '' : 'hidden' }}">
                <div class="p-4 grid gap-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1">
                    @forelse($streams as $s)
                        @php
                            $memberName = $s->user?->name ?? $s->user?->username ?? ('#'.$s->user_id);
                            $planned = round(((int)($s->duration_hours ?? 0) * 60 + (int)($s->duration_minutes ?? 0))/60, 2);
                            $noteFull = (string)($s->description ?? '');
                            $notePreview = \Illuminate\Support\Str::limit(
                                trim(preg_replace('/\s+/', ' ', strip_tags($noteFull))), 80
                            );
                            $noteB64 = base64_encode($noteFull);
                            $b = $badge[$s->status] ?? ['label'=>$s->status,'cls'=>'border-slate-700 bg-slate-800 text-slate-200'];

                            // ✅ ADD: كشف ProActive (حسب الـ description أو slot_label)
                            $isProactive = str_contains($noteFull, '[PROACTIVE_SCHEDULE_ID=')
                                || (strcasecmp((string)($s->slot_label ?? ''), 'ProActive') === 0);
                        @endphp

                        <div class="rounded-2xl border border-slate-700/70 bg-gradient-to-br
                                    from-slate-900 via-slate-950 to-slate-900 p-4 shadow-lg"
                             data-live-row="{{ $s->id }}"
                             data-proactive="{{ $isProactive ? 1 : 0 }}">
                            <div class="flex items-start justify-between gap-3 mb-2">
                                <div class="flex flex-col gap-0.5">
                                    <span class="text-[11px] text-slate-400">العضو</span>
                                    <span class="font-semibold text-slate-100">{{ $memberName }}</span>
                                    <span class="text-[11px] text-slate-400">
                                        {{ (string)$s->scheduled_date }} •
                                        <span data-time-cell data-time-raw="{{ (string)$s->scheduled_time }}">{{ (string)$s->scheduled_time }}</span>
                                    </span>
                                </div>
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full border text-[11px] {{ $b['cls'] }}">
                                    {{ $b['label'] }}
                                </span>
                            </div>

                            <div class="text-[11px] text-slate-300 mb-2">
                                نوع: <span class="font-semibold">{{ $s->type }}</span>
                                @if($s->is_sahra) • <span class="text-emerald-300 font-semibold">سهرة</span> @endif
                            </div>

                            <div class="text-[11px] text-slate-300 mb-2">
                                الساعات المخططة:
                                <span class="font-semibold text-amber-200" data-hours>{{ $planned }} س</span>
                            </div>

                            <div class="text-[11px] text-slate-300 mb-3" data-note-preview>
                                @if($notePreview)
                                    {{ $notePreview }}
                                @else
                                    <span class="text-slate-500">لا يوجد ملاحظات.</span>
                                @endif
                            </div>

                            <button type="button"
                                    class="btn-edit-live inline-flex items-center justify-center w-full gap-2 rounded-xl bg-emerald-500/15
                                           border border-emerald-500/30 px-3 py-1.5 text-xs font-semibold text-emerald-200
                                           hover:bg-emerald-500/25 transition"
                                    data-id="{{ $s->id }}"
                                    data-member="{{ e($memberName) }}"
                                    data-date="{{ (string)$s->scheduled_date }}"
                                    data-time="{{ (string)$s->scheduled_time }}"
                                    data-status="{{ (string)$s->status }}"
                                    data-type="{{ (string)$s->type }}"
                                    data-hours="{{ $planned }}"
                                    data-note-b64="{{ $noteB64 }}">
                                <i class="fa-solid fa-pen"></i>
                                تعديل الساعات والملاحظات
                            </button>
                        </div>
                    @empty
                        <div class="col-span-full text-center text-slate-400 text-sm py-6">
                            لا توجد لايفات غير مؤكدة ضمن الفلاتر الحالية.
                        </div>
                    @endforelse
                </div>

                @if($streams->hasPages())
                    <div class="px-4 py-3 border-t border-slate-800">
                        {{ $streams->links() }}
                    </div>
                @endif
            </div>
        </div>

        {{-- فوتر توضيحي --}}
        <div class="mt-5 text-[11px] text-slate-500 text-center">
            هذه الأداة مخصّصة لصيانة <span class="font-semibold text-slate-300">ساعات وملاحظات اللايفات غير المؤكدة فقط</span>،
            ولا يُسمح من خلالها بتغيير الحالة أو النقاط. أي تعديل يتم حفظه في سجل اللايفات لمرجعية الإدارة العليا.
        </div>

        {{-- Drawer تعديل --}}
        <div id="editDrawer" class="fixed inset-0 z-50 hidden">
            <div id="editBackdrop" class="absolute inset-0 bg-black/60"></div>

            <div class="absolute inset-x-0 bottom-0 sm:inset-y-0 sm:right-0 sm:left-auto
                        w-full sm:w-[540px] max-h-[85vh] sm:max-h-none
                        bg-slate-950 border border-slate-700 rounded-t-2xl sm:rounded-none sm:rounded-l-2xl
                        shadow-2xl overflow-hidden flex flex-col">

                <div class="px-4 py-3 border-b border-slate-800 flex items-center justify-between">
                    <div class="flex flex-col">
                        <span class="text-xs text-slate-400">تعديل لايف غير مؤكد</span>
                        <span id="edTitle" class="font-semibold text-slate-100">—</span>
                        <span id="edSub" class="text-[11px] text-slate-400">—</span>
                    </div>

                    <button id="btnCloseEdit" class="h-9 w-9 rounded-xl bg-slate-800 hover:bg-slate-700 transition flex items-center justify-center">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>

                <form id="editForm" class="p-4 overflow-y-auto space-y-4">
                    <input type="hidden" id="edId">

                    {{-- ✅ إضافة: وقت اللايف + عرض الوقت السابق --}}
                    <div class="rounded-2xl border border-slate-800 bg-slate-900/70 p-3">
                        <label class="block text-xs text-slate-300 mb-2">وقت اللايف</label>
                        <input type="time" id="edTime"
                               class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                      focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                        <p class="mt-2 text-[11px] text-slate-400">
                            الوقت السابق: <span id="edTimeWas" class="font-semibold text-slate-200">—</span>
                        </p>
                    </div>

                    <div class="rounded-2xl border border-slate-800 bg-slate-900/70 p-3">
                        <label class="block text-xs text-slate-300 mb-2">المدة بالساعات</label>
                        <input type="number" step="0.5" min="0.5" max="12" id="edHours"
                               class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                      focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                        <p class="mt-1 text-[11px] text-slate-400">مثال: 1.5 = ساعة ونصف.</p>
                    </div>

                    <div class="rounded-2xl border border-slate-800 bg-slate-900/70 p-3">
                        <label class="block text-xs text-slate-300 mb-2">ملاحظات اللايف</label>
                        <textarea id="edNote" rows="6"
                                  class="w-full rounded-xl border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm text-white
                                         focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"
                                  placeholder="اكتب ملاحظات/تفاصيل..."></textarea>
                        <p class="mt-1 text-[11px] text-slate-400">
                            سيتم تنظيف أي كود أو سكربت غير آمن تلقائيًا عند الحفظ.
                        </p>
                    </div>

                    <div class="flex items-center gap-2">
                        <button type="submit" id="btnSave"
                                class="inline-flex items-center justify-center rounded-xl bg-emerald-500 px-4 py-2 text-sm font-semibold
                                       text-slate-950 hover:bg-emerald-400 transition">
                            <i class="fa-solid fa-floppy-disk ml-2 text-xs"></i>
                            حفظ التعديل
                        </button>
                        <button type="button" id="btnCancel"
                                class="inline-flex items-center justify-center rounded-xl border border-slate-600 px-4 py-2 text-sm
                                       font-medium text-slate-200 hover:bg-slate-800/80 transition">
                            إلغاء
                        </button>
                        <span id="saveMsg" class="text-[11px] text-slate-400"></span>
                    </div>
                </form>
            </div>
        </div>

        {{-- Toast --}}
        <div id="toast" class="fixed top-4 left-4 z-[60] hidden">
            <div id="toastBox" class="rounded-xl border border-slate-700 bg-slate-900 text-slate-200 px-4 py-3 shadow-xl text-sm"></div>
        </div>

    </div>
</div>

{{-- ✅ ADD: Modal ملحمي لـ ProActive (منع التعديل من هنا) --}}
<div id="proBackdrop"
     class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm hidden z-40"
     onclick="closeProactiveModal()"></div>

<div id="proModal"
     class="fixed inset-0 hidden overflow-auto z-50">
  <div class="min-h-full flex items-center justify-center p-4">
    <div class="w-full max-w-xl rounded-2xl overflow-hidden
                bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
                border border-sky-500/40 shadow-2xl text-white">
      <div class="px-4 sm:px-5 py-4 border-b border-white/10 flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-2xl bg-sky-500/20 border border-sky-400/30 grid place-items-center shadow-lg shadow-sky-500/20">
            <i class="fa-solid fa-bolt text-sky-200"></i>
          </div>
          <div class="min-w-0">
            <div class="text-[11px] text-sky-200/80 font-semibold">تنبيه نظام</div>
            <div class="text-base sm:text-lg font-extrabold tracking-tight">
              هذا اللايف ProActive
            </div>
          </div>
        </div>

        <button type="button"
                class="text-sky-100/70 hover:text-white"
                onclick="closeProactiveModal()">
          <i class="fa-solid fa-xmark text-lg"></i>
        </button>
      </div>

      <div class="px-4 sm:px-5 py-4 space-y-3">
        <div class="text-sm sm:text-base text-sky-100/90 leading-relaxed">
          هذا اللايف <span id="proLiveIdTxt" class="font-extrabold text-white">#—</span>
          من نوع <span class="font-extrabold text-sky-200">ProActive</span>،
          لذلك لا يمكن تعديله من صفحة <span class="font-semibold">اللايفات غير المؤكدة</span>.
        </div>

        <div class="rounded-xl bg-white/5 border border-white/10 p-3 text-[12px] leading-relaxed">
          ✅ الطريقة الصحيحة:
          <ul class="list-disc pr-5 mt-2 space-y-1 text-sky-100/85">
            <li>اذهب إلى قسم <b>ProActive</b>.</li>
            <li>اضغط <b>بدء</b> عند بداية اللايف.</li>
            <li>اضغط <b>إنهاء</b> عند نهاية اللايف.</li>
          </ul>
        </div>

        <div class="text-[11px] text-sky-200/70">
          ملاحظة: هذا يضمن احتساب ProActive بشكل صحيح داخل النظام.
        </div>
      </div>

      <div class="px-4 sm:px-5 py-3 border-t border-white/10 flex items-center justify-end gap-2">
        <button type="button"
                class="inline-flex items-center px-4 py-2 rounded-xl text-sm font-bold
                       bg-sky-600 hover:bg-sky-500 text-white border border-sky-400/50 transition"
                onclick="closeProactiveModal()">
          حاضر
        </button>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const CSRF = @json(csrf_token());
    const updateTemplate = @json(route('superadmin.falcon-room.lives-tools.unconfirmed.update', ['live' => 0]));

    // -------- Toggle table/cards --------
    const tableView = document.getElementById('unconfirmed-table-view');
    const cardsView = document.getElementById('unconfirmed-cards-view');
    const btnTable  = document.getElementById('btn-unconfirmed-table');
    const btnCards  = document.getElementById('btn-unconfirmed-cards');
    const viewInput = document.getElementById('unconfirmed-view-input');

    function setActiveViewBtn(btn, active) {
        if (!btn) return;
        btn.classList.toggle('bg-emerald-500', active);
        btn.classList.toggle('text-slate-950', active);
        btn.classList.toggle('bg-slate-800', !active);
        btn.classList.toggle('text-slate-200', !active);
    }

    function setView(view, persist = true) {
        const isCards = view === 'cards';

        if (tableView) tableView.classList.toggle('hidden', isCards);
        if (cardsView) cardsView.classList.toggle('hidden', !isCards);

        setActiveViewBtn(btnTable, !isCards);
        setActiveViewBtn(btnCards, isCards);

        if (viewInput) viewInput.value = isCards ? 'cards' : 'table';

        if (persist) {
            try { localStorage.setItem('lives_unconfirmed_view', isCards ? 'cards' : 'table'); } catch (e) {}
        }

        try {
            const url = new URL(window.location.href);
            url.searchParams.set('view', isCards ? 'cards' : 'table');
            window.history.replaceState({}, '', url);
        } catch (e) {}
    }

    const qsView = new URLSearchParams(window.location.search).get('view');
    let saved = null;
    try { saved = localStorage.getItem('lives_unconfirmed_view'); } catch (e) {}

    const initial = (qsView === 'cards' || qsView === 'table')
        ? qsView
        : (saved || @json($initialView));

    setView(initial, false);

    if (btnTable) btnTable.addEventListener('click', () => setView('table'));
    if (btnCards) btnCards.addEventListener('click', () => setView('cards'));

    // -------- Drawer & حفظ --------
    const drawer = document.getElementById('editDrawer');
    const backdrop = document.getElementById('editBackdrop');
    const btnClose = document.getElementById('btnCloseEdit');
    const btnCancel = document.getElementById('btnCancel');

    const edTitle = document.getElementById('edTitle');
    const edSub = document.getElementById('edSub');
    const edId = document.getElementById('edId');

    const edTime = document.getElementById('edTime');       // ✅
    const edTimeWas = document.getElementById('edTimeWas'); // ✅

    const edHours = document.getElementById('edHours');
    const edNote = document.getElementById('edNote');

    const form = document.getElementById('editForm');
    const btnSave = document.getElementById('btnSave');
    const saveMsg = document.getElementById('saveMsg');

    const toast = document.getElementById('toast');
    const toastBox = document.getElementById('toastBox');

    let currentRow = null;

    function showToast(msg) {
        toastBox.textContent = msg;
        toast.classList.remove('hidden');
        setTimeout(() => toast.classList.add('hidden'), 2500);
    }

    function openDrawer() {
        drawer.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeDrawer() {
        drawer.classList.add('hidden');
        document.body.style.overflow = '';
        currentRow = null;
        saveMsg.textContent = '';
        btnSave.disabled = false;
        btnSave.classList.remove('opacity-60');
        if (edTimeWas) edTimeWas.textContent = '—';
    }

    // ✅ الأهم: استخراج HH:MM من أي صيغة (20:00:00 / 20:00 / ...الخ)
    function toHHMM(raw) {
        if (!raw) return '';
        const m = String(raw).match(/(\d{1,2}):(\d{2})/); // يلقط HH:MM من أي نص
        if (!m) return '';
        const hh = String(parseInt(m[1], 10)).padStart(2,'0');
        const mm = m[2];
        return `${hh}:${mm}`;
    }

    // ✅ ADD: ProActive Modal helpers
    const proBackdrop = document.getElementById('proBackdrop');
    const proModal = document.getElementById('proModal');
    const proLiveIdTxt = document.getElementById('proLiveIdTxt');

    window.closeProactiveModal = function () {
        proBackdrop?.classList.add('hidden');
        proModal?.classList.add('hidden');
    }

    function openProactiveModal(id){
        if (proLiveIdTxt) proLiveIdTxt.textContent = '#'+id;
        if (proBackdrop && proModal) {
            proBackdrop.classList.remove('hidden');
            proModal.classList.remove('hidden');
            return;
        }
        // fallback
        alert('هذا اللايف من نوع ProActive. يجب الذهاب لقسم ProActive والضغط على (بدء/إنهاء) وليس التعديل من هنا.');
    }

    function isRowProactive(row){
        if(!row) return false;
        return row.getAttribute('data-proactive') === '1';
    }

    document.querySelectorAll('.btn-edit-live').forEach(btn => {
        btn.addEventListener('click', () => {
            const id = btn.dataset.id;

            // ✅ ADD: منع فتح Drawer إذا ProActive
            const row = btn.closest('tr[data-live-row]') || btn.closest('div[data-live-row]');
            if (isRowProactive(row)) {
                openProactiveModal(id);
                return;
            }

            const member  = btn.dataset.member || ('#' + id);
            const date    = btn.dataset.date || '';
            const time    = btn.dataset.time || '';
            const status  = btn.dataset.status || '';
            const type    = btn.dataset.type || '';
            const hours   = btn.dataset.hours || '1';
            const noteB64 = btn.dataset.noteB64 || '';

            let note = '';
            try { if (noteB64) note = atob(noteB64); } catch (e) { note = ''; }

            edId.value = id;
            edHours.value = hours;
            edNote.value = note;

            // ✅ هنا الإصلاح: عبّي حقل الوقت بالوقت الموجود فعلاً
            const hhmm = toHHMM(time);
            if (edTime) edTime.value = hhmm;
            if (edTimeWas) edTimeWas.textContent = hhmm || '—';

            edTitle.textContent = `#${id} — ${member}`;
            edSub.textContent = `📅 ${date} • ⏰ ${time} • حالة: ${status} • نوع: ${type}`;

            currentRow = row;
            openDrawer();
        });
    });

    async function saveEdit() {
        const id = parseInt(edId.value, 10);

        // ✅ ADD: حماية إضافية لو حاول يرسل حفظ على ProActive
        if (isRowProactive(currentRow)) {
            closeDrawer();
            openProactiveModal(id);
            return;
        }

        const planned = parseFloat(edHours.value || '0');
        const newTime = (edTime ? (edTime.value || '') : '');

        btnSave.disabled = true;
        btnSave.classList.add('opacity-60');
        saveMsg.textContent = 'جارِ الحفظ...';

        const url = updateTemplate.replace(/\/0$/, '/' + id);

        try {
            const res = await fetch(url, {
                method: 'PATCH',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': CSRF
                },
                body: JSON.stringify({
                    planned_hours: planned,
                    scheduled_time: newTime, // ✅ إرسال الوقت
                    note: edNote.value
                })
            });

            const data = await res.json().catch(() => null);

            if (!res.ok || !data || !data.success) {
                const msg = (data && data.message) ? data.message : 'تعذر حفظ التعديل.';
                throw new Error(msg);
            }

            if (currentRow) {
                const hoursCell = currentRow.querySelector('[data-hours]');
                const noteCell  = currentRow.querySelector('[data-note-preview]');
                const timeCell  = currentRow.querySelector('[data-time-cell]');

                if (hoursCell) hoursCell.textContent = (data.planned_hours ?? planned) + ' س';
                if (noteCell)  noteCell.textContent  = (data.note_preview ?? (edNote.value
                    ? edNote.value.replace(/\s+/g,' ').substring(0,80) + '…'
                    : '—'));

                // ✅ تحديث الوقت في الجدول/الكرت بعد الحفظ (بدون تحويل عرض، فقط نفس القيمة)
                if (timeCell) {
                    const raw = (data.scheduled_time ?? newTime);
                    timeCell.setAttribute('data-time-raw', raw);
                    timeCell.textContent = raw;
                }
            }

            showToast('تم حفظ التعديل بنجاح ✅');
            closeDrawer();

        } catch (e) {
            showToast(String(e.message || e));
            saveMsg.textContent = 'فشل الحفظ.';
            btnSave.disabled = false;
            btnSave.classList.remove('opacity-60');
        }
    }

    form.addEventListener('submit', (e) => {
        e.preventDefault();
        saveEdit();
    });

    if (btnClose) btnClose.addEventListener('click', closeDrawer);
    if (btnCancel) btnCancel.addEventListener('click', closeDrawer);
    if (backdrop) backdrop.addEventListener('click', closeDrawer);
    document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !drawer.classList.contains('hidden')) closeDrawer(); });

    // ✅ ADD: ESC يقفل مودال ProActive كمان
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && proModal && !proModal.classList.contains('hidden')) {
            window.closeProactiveModal();
        }
    });
});
</script>
@endsection