@extends('layouts.superadmin')
@section('title', 'جدولة بث جديد')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 py-6">
    <div class="max-w-5xl mx-auto px-4 rtl">

        <!-- Page Header -->
        <div class="mb-6 space-y-4">
            <!-- Breadcrumb -->
            <div class="inline-flex items-center px-3 py-2 rounded-full bg-slate-900/60 border border-slate-700/70 shadow-sm mb-2">
                <nav class="flex items-center text-xs sm:text-sm text-slate-300" aria-label="Breadcrumb">
                    <ol class="inline-flex items-center space-x-1 md:space-x-3 space-x-reverse">
                        <li class="inline-flex items-center">
                            <a href="{{ route('superadmin.dashboard') }}"
                               class="inline-flex items-center font-medium text-slate-200 hover:text-white">
                                الرئيسية
                            </a>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <svg class="w-4 h-4 text-slate-500 rotate-180 mx-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                                </svg>
                                <a href="{{ route('superadmin.live-streams.index') }}"
                                   class="text-slate-300 hover:text-white">
                                    البث المباشر
                                </a>
                            </div>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <svg class="w-4 h-4 text-slate-500 rotate-180 mx-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                                </svg>
                                <span class="text-slate-400">جدولة بث جديد</span>
                            </div>
                        </li>
                    </ol>
                </nav>
            </div>

            <!-- Title / Actions -->
            <div class="rounded-2xl bg-gradient-to-l from-blue-600 via-indigo-600 to-sky-500 text-white shadow-xl shadow-slate-950/40 overflow-hidden">
                <div class="p-4 sm:p-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                    <div>
                        <p class="text-xs opacity-90 mb-1">لوحة التحكم · البث المباشر</p>
                        <h1 class="text-2xl sm:text-3xl font-extrabold mb-1">جدولة بث جديد</h1>
                        <p class="text-sm text-blue-100">
                            قم بجدولة بث مباشر للأعضاء مع معاينة كاملة قبل التأكيد.
                        </p>
                    </div>

                    <div class="flex flex-col items-stretch sm:items-end gap-3 w-full sm:w-auto">
                        <div class="inline-flex items-center gap-2 rounded-xl bg-white/10 px-3 py-2 backdrop-blur-sm border border-white/20 max-sm:w-full">
                            <span class="inline-flex h-2 w-2 rounded-full bg-emerald-300 shadow-sm shadow-emerald-500/60"></span>
                            <span class="text-xs leading-none">جاهز للبث</span>
                        </div>

                        <a href="{{ route('superadmin.live-streams.index') }}"
                           class="inline-flex items-center justify-center px-3 py-2 rounded-xl bg-slate-900/60 hover:bg-slate-900 text-sm font-medium border border-white/10 shadow-lg shadow-slate-950/40 transition max-sm:w-full">
                            <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                            </svg>
                            العودة للقائمة
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="space-y-6">

            {{-- Hero / Intro عن اللايفات وأهميتها --}}
            <div class="mb-5 sm:mb-6">
                <div class="relative overflow-hidden rounded-2xl bg-gradient-to-l from-sky-900 via-slate-950 to-indigo-900 text-slate-50 border border-sky-500/40 shadow-xl shadow-slate-950/50">
                    <!-- زخارف خفيفة في الخلفية -->
                    <div class="pointer-events-none absolute -left-10 -bottom-10 w-40 h-40 rounded-full bg-sky-400/20 blur-3xl"></div>
                    <div class="pointer-events-none absolute -right-10 -top-10 w-40 h-40 rounded-full bg-indigo-500/20 blur-3xl"></div>

                    <div class="relative p-4 sm:p-5 lg:p-6 space-y-4">
                        <!-- هيدر صغير -->
                        <div class="inline-flex items-center gap-2 rounded-full bg-black/20 px-3 py-1 text-[11px] sm:text-xs">
                            <span class="inline-flex h-2 w-2 rounded-full bg-emerald-300 shadow shadow-emerald-400/70"></span>
                            <span>إرشادات مهمة قبل إنشاء أي لايف</span>
                        </div>

                        <!-- العنوان -->
                        <div class="space-y-1">
                            <h2 class="text-lg sm:text-xl lg:text-2xl font-extrabold tracking-tight">
                                كل لايف <span class="text-sky-300">مهمة رسمية</span> يتم تحليلها بدقة
                            </h2>
                            <p class="text-xs sm:text-sm text-slate-200/90 leading-relaxed">
                                هذه الصفحة مخصّصة لجدولة البثوث المباشرة (اللايفات) للأعضاء، وكل لايف تسجّله هنا يدخل في نظام
                                التقييم والتحليل الآلي، لذلك أي معلومة تُكتب تعتبر مسؤوليّة عليك.
                            </p>
                        </div>

                        <!-- النقاط الأساسية -->
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 text-xs sm:text-sm">
                            <div class="space-y-2">
                                <div class="flex items-start gap-2">
                                    <div class="mt-0.5 flex-shrink-0">
                                        <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-emerald-400/20 text-emerald-200">
                                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                                            </svg>
                                        </span>
                                    </div>
                                    <div>
                                        <p class="font-semibold text-slate-50 mb-0.5">أهمية الكتابة والتوثيق</p>
                                        <p class="text-slate-200/90 leading-relaxed">
                                            اكتب <span class="font-semibold text-sky-200">العنوان، الوصف، والملاحظات</span>
                                            بإملاء سليم وواضح، لأن هذه البيانات هي المرجع الرسمي عند مراجعة اللايف وتحليل أداء العضو.
                                        </p>
                                    </div>
                                </div>

                                <div class="flex items-start gap-2">
                                    <div class="mt-0.5 flex-shrink-0">
                                        <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-cyan-400/20 text-cyan-200">
                                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m4-3a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                                            </svg>
                                        </span>
                                    </div>
                                    <div>
                                        <p class="font-semibold text-slate-50 mb-0.5">المدّة الصحيحة ضرورية</p>
                                        <p class="text-slate-200/90 leading-relaxed">
                                            انتبه لـ <span class="font-semibold text-sky-200">المدّة (الساعات والدقائق)</span>،
                                            والتاريخ والوقت، لأن الخطأ في المدّة يؤثر على التقييم، التقارير، وحساب النقاط.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="space-y-2">
                                <div class="flex items-start gap-2">
                                    <div class="mt-0.5 flex-shrink-0">
                                        <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-fuchsia-400/20 text-fuchsia-200">
                                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M4 6h8m-8 4h5m-5 4h3"></path>
                                            </svg>
                                        </span>
                                    </div>
                                    <div>
                                        <p class="font-semibold text-slate-50 mb-0.5">تحليل بالذكاء الاصطناعي</p>
                                        <p class="text-slate-200/90 leading-relaxed">
                                            كل لايف يتم تحليله عبر <span class="font-semibold text-sky-200">الذكاء الاصطناعي</span>؛
                                            النظام يعتمد على البيانات التي تدخلها هنا (العضو، النوع، المدّة، الوصف)،
                                            لذلك الدقّة في الإدخال = عدالة في النتائج.
                                        </p>
                                    </div>
                                </div>

                                <div class="flex items-start gap-2">
                                    <div class="mt-0.5 flex-shrink-0">
                                        <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-red-400/20 text-red-200">
                                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M7.938 4.5L4.5 9l7.5 10L19.5 9l-3.438-4.5H7.938z"></path>
                                            </svg>
                                        </span>
                                    </div>
                                    <div>
                                        <p class="font-semibold text-slate-50 mb-0.5">لا تَظلِم أحدًا في اختيار الأعضاء</p>
                                        <p class="text-slate-200/90 leading-relaxed">
                                            اختَر فقط <span class="font-semibold text-sky-200">الأعضاء الذين شاركوا فعليًا</span> في اللايف،
                                            ولا تضف أي شخص لم يكن موجودًا حتى لو كان القائد. كل لايف مرتبط بعضوية معيّنة
                                            ويؤثر على نقاطه ومستواه في النظام.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- سطر خاص بنوع النشاط -->
                        <div class="pt-3 mt-1 border-t border-sky-500/30 text-[11px] sm:text-xs text-sky-100/90 flex flex-col sm:flex-row gap-2 sm:items-center sm:justify-between">
                            <div class="flex items-center gap-1.5">
                                <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-sky-400/20 text-sky-100">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2a2 2 0 012-2h6m-4-4h4m-6-4h6M7 7h.01M7 11h.01M7 15h.01"></path>
                                    </svg>
                                </span>
                                <span class="font-semibold">تحديد نوع النشاط مهم جداً جداً</span>
                            </div>
                            <p class="text-[11px] sm:text-xs text-sky-100/80 leading-relaxed">
                                اختر بدقّة نوع اللايف <span class="font-semibold">("ضيوف" ، "جولات" ، أو "كلاهما")</span>،
                                فهذا يؤثر على تحليل النشاط، التصنيفات، والتقارير الخاصة بالأداء العام للفريق.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- هنا يبدأ كرت الفورم (خلي باقي كودك كما هو بعد هذا التعليق) --}}
        <!-- Main Content -->
        <div class="space-y-6">
{{-- Hero / Intro عن اللايفات وأهميتها --}}
<div class="mb-5 sm:mb-6">
    <div class="relative overflow-hidden rounded-2xl bg-gradient-to-l from-sky-900 via-slate-950 to-indigo-900 text-slate-50 border border-sky-500/40 shadow-xl shadow-slate-950/50">
        <!-- زخارف خفيفة في الخلفية -->
        <div class="pointer-events-none absolute -left-10 -bottom-10 w-40 h-40 rounded-full bg-sky-400/20 blur-3xl"></div>
        <div class="pointer-events-none absolute -right-10 -top-10 w-40 h-40 rounded-full bg-indigo-500/20 blur-3xl"></div>

        <div class="relative p-4 sm:p-5 lg:p-6 space-y-4">
            <!-- هيدر صغير (Eyebrow) -->
            <div class="inline-flex items-center gap-2 rounded-full bg-black/20 px-3 py-1 text-[11px] sm:text-xs">
                <span class="inline-flex h-2 w-2 rounded-full bg-emerald-300 shadow shadow-emerald-400/70"></span>
                <span>إرشادات مهمة قبل إنشاء أي لايف</span>
            </div>

            <!-- العنوان الرئيسي (Hero Title) -->
            <div class="space-y-1">
                <h2 class="text-lg sm:text-xl lg:text-2xl font-extrabold tracking-tight">
                    كل لايف <span class="text-sky-300">مهمة رسمية</span> يتم تحليلها بدقة
                </h2>
                <p class="text-xs sm:text-sm text-slate-200/90 leading-relaxed">
                    هذه الصفحة مخصّصة لجدولة البثوث المباشرة (اللايفات) للأعضاء، وكل لايف تسجّله هنا يدخل في نظام
                    التقييم والتحليل الآلي، لذلك أي معلومة تُكتب تعتبر مسؤوليّة عليك.
                </p>
            </div>

            <!-- نقاط أساسية -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 text-xs sm:text-sm">
                <div class="space-y-2">
                    <div class="flex items-start gap-2">
                        <div class="mt-0.5 flex-shrink-0">
                            <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-emerald-400/20 text-emerald-200">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                                </svg>
                            </span>
                        </div>
                        <div>
                            <p class="font-semibold text-slate-50 mb-0.5">أهمية الكتابة والتوثيق</p>
                            <p class="text-slate-200/90 leading-relaxed">
                                اكتب <span class="font-semibold text-sky-200">العنوان، الوصف، والملاحظات</span>
                                بإملاء سليم وواضح، لأن هذه البيانات هي المرجع الرسمي عند مراجعة اللايف وتحليل أداء العضو.
                            </p>
                        </div>
                    </div>

                    <div class="flex items-start gap-2">
                        <div class="mt-0.5 flex-shrink-0">
                            <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-cyan-400/20 text-cyan-200">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m4-3a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                                </svg>
                            </span>
                        </div>
                        <div>
                            <p class="font-semibold text-slate-50 mb-0.5">المدّة الصحيحة ضرورية</p>
                            <p class="text-slate-200/90 leading-relaxed">
                                انتبه لـ <span class="font-semibold text-sky-200">المدّة (الساعات والدقائق)</span>،
                                والتاريخ والوقت، لأن الخطأ في المدّة يؤثر على التقييم، التقارير، وحساب النقاط.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="space-y-2">
                    <div class="flex items-start gap-2">
                        <div class="mt-0.5 flex-shrink-0">
                            <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-fuchsia-400/20 text-fuchsia-200">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M4 6h8m-8 4h5m-5 4h3"></path>
                                </svg>
                            </span>
                        </div>
                        <div>
                            <p class="font-semibold text-slate-50 mb-0.5">تحليل بالذكاء الاصطناعي</p>
                            <p class="text-slate-200/90 leading-relaxed">
                                كل لايف يتم تحليله عبر <span class="font-semibold text-sky-200">الذكاء الاصطناعي</span>؛
                                النظام يعتمد على البيانات التي تدخلها هنا (العضو، النوع، المدّة، الوصف)،
                                لذلك الدقّة في الإدخال = عدالة في النتائج.
                            </p>
                        </div>
                    </div>

                    <div class="flex items-start gap-2">
                        <div class="mt-0.5 flex-shrink-0">
                            <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-red-400/20 text-red-200">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M7.938 4.5L4.5 9l7.5 10L19.5 9l-3.438-4.5H7.938z"></path>
                                </svg>
                            </span>
                        </div>
                        <div>
                            <p class="font-semibold text-slate-50 mb-0.5">لا تَظلِم أحدًا في اختيار الأعضاء</p>
                            <p class="text-slate-200/90 leading-relaxed">
                                اختَر فقط <span class="font-semibold text-sky-200">الأعضاء الذين شاركوا فعليًا</span> في اللايف،
                                ولا تضف أي شخص لم يكن موجودًا حتى لو كان القائد. كل لايف مرتبط بعضوية معيّنة
                                ويؤثر على نقاطه ومستواه في النظام.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- سطر خاص بنوع النشاط -->
            <div class="pt-3 mt-1 border-t border-sky-500/30 text-[11px] sm:text-xs text-sky-100/90 flex flex-col sm:flex-row gap-2 sm:items-center sm:justify-between">
                <div class="flex items-center gap-1.5">
                    <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-sky-400/20 text-sky-100">
                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2a2 2 0 012-2h6m-4-4h4m-6-4h6M7 7h.01M7 11h.01M7 15h.01"></path>
                        </svg>
                    </span>
                    <span class="font-semibold">تحديد نوع النشاط مهم جداً جداً</span>
                </div>
                <p class="text-[11px] sm:text-xs text-sky-100/80 leading-relaxed">
                    اختر بدقّة نوع اللايف <span class="font-semibold">("ضيوف" ، "جولات" ، أو "كلاهما")</span>،
                    فهذا يؤثر على تحليل النشاط، التصنيفات، والتقارير الخاصة بالأداء العام للفريق.
                </p>
            </div>
        </div>
    </div>
</div>
            <div class="bg-white/95 dark:bg-slate-900/85 border border-slate-200/70 dark:border-slate-700 rounded-2xl shadow-2xl shadow-slate-900/40 overflow-hidden">
                <div class="px-5 sm:px-6 py-4 border-b border-slate-100 dark:border-slate-700/80 bg-slate-50/90 dark:bg-slate-900/80 backdrop-blur">
                    <h2 class="text-base sm:text-lg font-semibold text-slate-900 dark:text-white flex items-center gap-2">
                        <span class="inline-flex items-center justify-center w-8 h-8 rounded-2xl bg-blue-600 text-white shadow-lg shadow-blue-600/40">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                            </svg>
                        </span>
                        <span>معلومات البث الجديد</span>
                    </h2>
                    <p class="mt-1 text-xs sm:text-sm text-slate-500 dark:text-slate-400">
                        املأ التفاصيل التالية بدقة، وسيتم احتساب النقاط تلقائيًا بعد المراجعة.
                    </p>
                </div>

                @if ($errors->any())
                    <div class="mx-4 sm:mx-6 mt-4 mb-2">
                        <div class="p-4 rounded-2xl bg-red-50 border border-red-200 dark:bg-red-900/20 dark:border-red-800 flex gap-3">
                            <div class="flex-shrink-0">
                                <div class="w-8 h-8 rounded-full bg-red-100 dark:bg-red-900/40 flex items-center justify-center">
                                    <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                                    </svg>
                                </div>
                            </div>
                            <div>
                                <h3 class="text-sm font-semibold text-red-800 dark:text-red-100 mb-1">يرجى تصحيح الأخطاء التالية:</h3>
                                <ul class="mt-1 text-xs sm:text-sm text-red-700 dark:text-red-200 list-disc list-inside space-y-0.5">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                @endif

                <form method="POST" action="{{ route('superadmin.live-streams.store') }}" id="liveStreamForm" class="divide-y divide-slate-100 dark:divide-slate-800">
                    @csrf

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

                        <!-- User Type Selection -->
                        <div class="space-y-3">
                            <div class="flex items-center justify-between gap-2">
                                <label class="block text-sm font-medium text-slate-800 dark:text-slate-100">
                                    اختر نوع المستخدمين
                                </label>
                                <span class="text-[11px] px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400">
                                    خطوة 1 / 3
                                </span>
                            </div>

                            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                                <button type="button" onclick="selectUserType('all')"
                                        class="user-type-btn group flex flex-col items-center justify-center p-3 sm:p-4 rounded-2xl border-2 border-slate-200/80 dark:border-slate-700 bg-slate-50/70 dark:bg-slate-900/70 hover:border-blue-500 hover:bg-blue-50/80 dark:hover:bg-blue-900/20 transition-all duration-200 shadow-sm hover:shadow-md"
                                        data-type="all">
                                    <div class="w-9 h-9 rounded-2xl bg-slate-900/5 dark:bg-slate-100/5 flex items-center justify-center mb-1.5 sm:mb-2">
                                        <svg class="w-5 h-5 text-slate-700 dark:text-slate-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                        </svg>
                                    </div>
                                    <span class="text-[11px] sm:text-xs text-center font-medium text-slate-700 dark:text-slate-100">
                                        جميع المستخدمين
                                    </span>
                                    <span class="mt-1 text-[10px] text-slate-400 dark:text-slate-500">
                                        للجميع بدون استثناء
                                    </span>
                                </button>

                                <button type="button" onclick="selectUserType('moderators')"
                                        class="user-type-btn group flex flex-col items-center justify-center p-3 sm:p-4 rounded-2xl border-2 border-slate-200/80 dark:border-slate-700 bg-slate-50/70 dark:bg-slate-900/70 hover:border-purple-500 hover:bg-purple-50/80 dark:hover:bg-purple-900/20 transition-all duration-200 shadow-sm hover:shadow-md"
                                        data-type="moderators">
                                    <div class="w-9 h-9 rounded-2xl bg-purple-50 dark:bg-purple-900/20 flex items-center justify-center mb-1.5 sm:mb-2">
                                        <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                                        </svg>
                                    </div>
                                    <span class="text-[11px] sm:text-xs text-center font-medium text-slate-700 dark:text-slate-100">
                                        المشرفين
                                    </span>
                                    <span class="mt-1 text-[10px] text-slate-400 dark:text-slate-500">
                                        المهام الإدارية
                                    </span>
                                </button>

                                <button type="button" onclick="selectUserType('official_members')"
                                        class="user-type-btn group flex flex-col items-center justify-center p-3 sm:p-4 rounded-2xl border-2 border-slate-200/80 dark:border-slate-700 bg-slate-50/70 dark:bg-slate-900/70 hover:border-indigo-500 hover:bg-indigo-50/80 dark:hover:bg-indigo-900/20 transition-all duration-200 shadow-sm hover:shadow-md"
                                        data-type="official_members">
                                    <div class="w-9 h-9 rounded-2xl bg-indigo-50 dark:bg-indigo-900/20 flex items-center justify-center mb-1.5 sm:mb-2">
                                        <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
                                        </svg>
                                    </div>
                                    <span class="text-[11px] sm:text-xs text-center font-medium text-slate-700 dark:text-slate-100">
                                        الأعضاء الرسميين
                                    </span>
                                    <span class="mt-1 text-[10px] text-slate-400 dark:text-slate-500">
                                        الأعضاء المعتمدين
                                    </span>
                                </button>

                                <button type="button" onclick="selectUserType('beta_members')"
                                        class="user-type-btn group flex flex-col items-center justify-center p-3 sm:p-4 rounded-2xl border-2 border-slate-200/80 dark:border-slate-700 bg-slate-50/70 dark:bg-slate-900/70 hover:border-orange-500 hover:bg-orange-50/80 dark:hover:bg-orange-900/20 transition-all duration-200 shadow-sm hover:shadow-md"
                                        data-type="beta_members">
                                    <div class="w-9 h-9 rounded-2xl bg-orange-50 dark:bg-orange-900/20 flex items-center justify-center mb-1.5 sm:mb-2">
                                        <svg class="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path>
                                        </svg>
                                    </div>
                                    <span class="text-[11px] sm:text-xs text-center font-medium text-slate-700 dark:text-slate-100">
                                        أعضاء بيتا
                                    </span>
                                    <span class="mt-1 text-[10px] text-slate-400 dark:text-slate-500">
                                        الميزات التجريبية
                                    </span>
                                </button>
                            </div>

                            <input type="hidden" id="selectedUserType" name="user_type" value="{{ old('user_type', '') }}">
                        </div>

                        <!-- User Selection -->
                        <div class="space-y-2" id="userSelectionDiv" style="display: none;">
                            <label for="user_id" class="block text-sm font-medium text-slate-800 dark:text-slate-100">
                                اختر العضو <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <select id="user_id" name="user_id" required
                                        class="w-full px-3 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-white/90 dark:bg-slate-900/80 text-sm text-slate-900 dark:text-slate-50 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('user_id') border-red-500 focus:ring-red-500 @enderror">
                                    <option value="" disabled selected>اختر مستخدماً...</option>
                                </select>
                                <div class="pointer-events-none absolute inset-y-0 left-3 flex items-center">
                                    <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </div>
                            </div>
                            @error('user_id')
                                <p class="text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- نوع البث -->
                        <div class="space-y-2">
                            <label for="type" class="block text-sm font-medium text-slate-800 dark:text-slate-100">
                                نوع البث <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <select id="type" name="type" required
                                        class="w-full px-3 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-white/90 dark:bg-slate-900/80 text-sm text-slate-900 dark:text-slate-50 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('type') border-red-500 focus:ring-red-500 @enderror">
                                    <option value="">اختر النوع</option>
                                    <option value="guests" {{ old('type') == 'guests' ? 'selected' : '' }}>ضيوف</option>
                                    <option value="tours" {{ old('type') == 'tours' ? 'selected' : '' }}>جولات</option>
                                    <option value="both" {{ old('type') == 'both' ? 'selected' : '' }}>كلاهما</option>
                                </select>
                                <div class="pointer-events-none absolute inset-y-0 left-3 flex items-center">
                                    <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </div>
                            </div>
                            @error('type')
                                <p class="text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- عنوان البث -->
                        <div class="space-y-2">
                            <label for="title" class="block text-sm font-medium text-slate-800 dark:text-slate-100">
                                عنوان البث (اختياري)
                            </label>
                            <input type="text"
                                   id="title"
                                   name="title"
                                   value="{{ old('title') }}"
                                   placeholder="مثل: بث ضيوف - موضوع معين"
                                   class="w-full px-3 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-white/90 dark:bg-slate-900/80 text-sm text-slate-900 dark:text-slate-50 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('title') border-red-500 focus:ring-red-500 @enderror">
                            @error('title')
                                <p class="text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                            <p class="text-xs text-slate-500 dark:text-slate-400">
                                يمكن ترك هذا الحقل فارغاً إذا لم يكن هناك موضوع محدد
                            </p>
                        </div>

                        <!-- وصف البث -->
                        <div class="space-y-2">
                            <label for="description" class="block text-sm font-medium text-slate-800 dark:text-slate-100">
                                وصف البث (اختياري)
                            </label>
                            <textarea id="description"
                                      name="description"
                                      rows="4"
                                      placeholder="وصف مختصر عن محتوى البث المتوقع..."
                                      class="w-full px-3 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-white/90 dark:bg-slate-900/80 text-sm text-slate-900 dark:text-slate-50 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('description') border-red-500 focus:ring-red-500 @enderror">{{ old('description') }}</textarea>
                            @error('description')
                                <p class="text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- التاريخ والوقت والمدة -->
                        <div class="space-y-3">
                            <div class="flex items-center justify-between gap-2">
                                <label class="block text-sm font-medium text-slate-800 dark:text-slate-100">
                                    توقيت ومدة البث
                                </label>
                                <span class="text-[11px] px-2 py-0.5 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-200">
                                    خطوة 2 / 3
                                </span>
                            </div>

                            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-5">
                                <div class="space-y-1">
                                    <label for="scheduled_date" class="block text-xs font-medium text-slate-600 dark:text-slate-300">
                                        تاريخ البث <span class="text-red-500">*</span>
                                    </label>
                                    <input type="date"
                                           id="scheduled_date"
                                           name="scheduled_date"
                                           value="{{ old('scheduled_date', date('Y-m-d')) }}"
                                           min="{{ date('Y-m-d') }}"
                                           required
                                           class="w-full px-3 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-white/90 dark:bg-slate-900/80 text-sm text-slate-900 dark:text-slate-50 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('scheduled_date') border-red-500 focus:ring-red-500 @enderror">
                                    @error('scheduled_date')
                                        <p class="text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="space-y-1">
                                    <label for="scheduled_time" class="block text-xs font-medium text-slate-600 dark:text-slate-300">
                                        وقت البث <span class="text-red-500">*</span>
                                    </label>
                                    <input type="time"
                                           id="scheduled_time"
                                           name="scheduled_time"
                                           value="{{ old('scheduled_time', '20:00') }}"
                                           required
                                           class="w-full px-3 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-white/90 dark:bg-slate-900/80 text-sm text-slate-900 dark:text-slate-50 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('scheduled_time') border-red-500 focus:ring-red-500 @enderror">
                                    @error('scheduled_time')
                                        <p class="text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="space-y-1">
                                    <label for="duration_hours" class="block text-xs font-medium text-slate-600 dark:text-slate-300">
                                        الساعات
                                    </label>
                                    <input type="number"
                                           id="duration_hours"
                                           name="duration_hours"
                                           value="{{ old('duration_hours', 1) }}"
                                           min="0"
                                           max="24"
                                           placeholder="0"
                                           class="w-full px-3 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-white/90 dark:bg-slate-900/80 text-sm text-slate-900 dark:text-slate-50 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('duration_hours') border-red-500 focus:ring-red-500 @enderror">
                                    @error('duration_hours')
                                        <p class="text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="space-y-1">
                                    <label for="duration_minutes" class="block text-xs font-medium text-slate-600 dark:text-slate-300">
                                        الدقائق
                                    </label>
                                    <input type="number"
                                           id="duration_minutes"
                                           name="duration_minutes"
                                           value="{{ old('duration_minutes', 0) }}"
                                           min="0"
                                           max="59"
                                           placeholder="0"
                                           class="w-full px-3 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-white/90 dark:bg-slate-900/80 text-sm text-slate-900 dark:text-slate-50 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('duration_minutes') border-red-500 focus:ring-red-500 @enderror">
                                    @error('duration_minutes')
                                        <p class="text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>

                            @error('duration')
                                <div class="text-xs text-red-600 dark:text-red-400">{{ $message }}</div>
                            @enderror

                            <div id="duration-info" class="text-xs sm:text-sm text-slate-500 dark:text-slate-400"></div>
                            <div id="time-validation-message" class="text-xs sm:text-sm text-red-600 dark:text-red-400 hidden"></div>
                        </div>

                        <!-- الملاحظات الإدارية -->
                        <div class="space-y-2">
                            <label for="admin_notes" class="block text-sm font-medium text-slate-800 dark:text-slate-100">
                                ملاحظات إدارية (اختياري)
                            </label>
                            <textarea id="admin_notes"
                                      name="admin_notes"
                                      rows="3"
                                      placeholder="ملاحظات إضافية للعضو المكلف..."
                                      class="w-full px-3 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-white/90 dark:bg-slate-900/80 text-sm text-slate-900 dark:text-slate-50 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('admin_notes') border-red-500 focus:ring-red-500 @enderror">{{ old('admin_notes') }}</textarea>
                            @error('admin_notes')
                                <p class="text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                            <p class="text-xs text-slate-500 dark:text-slate-400">
                                هذه الملاحظات ستكون مرئية للعضو المكلف
                            </p>
                        </div>

                        <!-- حالة البث -->
                        <div class="space-y-2">
                            <label for="status" class="block text-sm font-medium text-slate-800 dark:text-slate-100">
                                حالة البث <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <select id="status" name="status" required
                                        class="w-full px-3 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-white/90 dark:bg-slate-900/80 text-sm text-slate-900 dark:text-slate-50 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('status') border-red-500 focus:ring-red-500 @enderror">
                                    <option value="scheduled" {{ old('status', 'scheduled') == 'scheduled' ? 'selected' : '' }}>مجدولة</option>
                                    <option value="pending_proof" {{ old('status') == 'pending_proof' ? 'selected' : '' }}>في انتظار مراجعة الإثبات</option>
                                    <option value="pending_excuse" {{ old('status') == 'pending_excuse' ? 'selected' : '' }}>في انتظار مراجعة العذر</option>
                                    <option value="confirmed" {{ old('status') == 'confirmed' ? 'selected' : '' }}>مؤكدة</option>
                                    <option value="missed_excuse" {{ old('status') == 'missed_excuse' ? 'selected' : '' }}>لم يفتح بعذر</option>
                                    <option value="missed_no_excuse" {{ old('status') == 'missed_no_excuse' ? 'selected' : '' }}>لم يفتح بدون عذر</option>
                                    <option value="proof_rejected" {{ old('status') == 'proof_rejected' ? 'selected' : '' }}>الإثبات مرفوض</option>
                                    <option value="excuse_rejected" {{ old('status') == 'excuse_rejected' ? 'selected' : '' }}>العذر مرفوض</option>
                                </select>
                                <div class="pointer-events-none absolute inset-y-0 left-3 flex items-center">
                                    <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </div>
                            </div>
                            @error('status')
                                <p class="text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                            <p class="text-xs text-slate-500 dark:text-slate-400">
                                الحالة الافتراضية هي <span class="font-semibold text-slate-700 dark:text-slate-200">"مجدولة"</span> للبث الجديد
                            </p>
                        </div>

                        <!-- نظام النقاط -->
                        <div class="rounded-2xl bg-gradient-to-l from-blue-50 via-slate-50 to-indigo-50 dark:from-slate-900/60 dark:via-slate-900/70 dark:to-slate-900/60 border border-blue-100/70 dark:border-slate-700 p-4 sm:p-5">
                            <div class="flex items-center justify-between gap-2 mb-4">
                                <h3 class="text-sm sm:text-base font-semibold text-blue-900 dark:text-blue-100 flex items-center gap-2">
                                    <span class="inline-flex items-center justify-center w-8 h-8 rounded-2xl bg-blue-600 text-white shadow-lg shadow-blue-600/40">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
                                        </svg>
                                    </span>
                                    نظام النقاط للبث المباشر
                                </h3>
                                <span class="hidden sm:inline-flex text-[11px] px-2 py-0.5 rounded-full bg-white/70 dark:bg-slate-900/60 text-slate-500 dark:text-slate-300 border border-slate-200/70 dark:border-slate-700">
                                    يمنح بعد المراجعة
                                </span>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4">
                                <div class="text-center p-3 sm:p-4 rounded-2xl bg-emerald-50 dark:bg-emerald-900/15 border border-emerald-100 dark:border-emerald-800">
                                    <div class="text-2xl font-extrabold text-emerald-700 dark:text-emerald-300 mb-1">+3</div>
                                    <p class="text-[11px] sm:text-xs text-emerald-700 dark:text-emerald-200 leading-relaxed">
                                        تم البث بنجاح<br>
                                        <span class="text-[10px] opacity-80">(بعد مراجعة الإثبات)</span>
                                    </p>
                                </div>
                                <div class="text-center p-3 sm:p-4 rounded-2xl bg-amber-50 dark:bg-amber-900/15 border border-amber-100 dark:border-amber-800">
                                    <div class="text-2xl font-extrabold text-amber-700 dark:text-amber-300 mb-1">+1</div>
                                    <p class="text-[11px] sm:text-xs text-amber-700 dark:text-amber-200 leading-relaxed">
                                        لم يفتح بعذر مقبول<br>
                                        <span class="text-[10px] opacity-80">(بعد مراجعة العذر)</span>
                                    </p>
                                </div>
                                <div class="text-center p-3 sm:p-4 rounded-2xl bg-rose-50 dark:bg-rose-900/15 border border-rose-100 dark:border-rose-800">
                                    <div class="text-2xl font-extrabold text-rose-700 dark:text-rose-300 mb-1">-3</div>
                                    <p class="text-[11px] sm:text-xs text-rose-700 dark:text-rose-200 leading-relaxed">
                                        لم يفتح بدون عذر<br>
                                        <span class="text-[10px] opacity-80">(تلقائياً بعد 10 دقائق)</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="px-5 sm:px-6 py-4 bg-slate-50/80 dark:bg-slate-950/70 border-t border-slate-100 dark:border-slate-800">
                        <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3">
                            <a href="{{ route('superadmin.live-streams.index') }}"
                               class="inline-flex items-center justify-center px-4 py-2.5 rounded-xl bg-slate-700 hover:bg-slate-800 text-white text-sm font-medium shadow-sm hover:shadow-md transition w-full sm:w-auto">
                                إلغاء
                            </a>

                            <div class="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
                                <button type="button"
                                        id="preview-btn"
                                        class="inline-flex items-center justify-center px-4 py-2.5 rounded-xl bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium shadow-sm hover:shadow-md transition w-full sm:w-auto">
                                    معاينة
                                </button>
                                <button type="submit"
                                        class="inline-flex items-center justify-center px-4 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium shadow-sm hover:shadow-md transition w-full sm:w-auto">
                                    جدولة البث
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Quick Tips Card -->
            <div class="bg-white/95 dark:bg-slate-900/85 border border-slate-200/70 dark:border-slate-700 rounded-2xl shadow-xl shadow-slate-900/40 overflow-hidden">
                <div class="px-5 sm:px-6 py-4 border-b border-slate-100 dark:border-slate-800 bg-slate-50/90 dark:bg-slate-900/80">
                    <h2 class="text-sm sm:text-base font-semibold text-slate-900 dark:text-white flex items-center gap-2">
                        <span class="inline-flex items-center justify-center w-8 h-8 rounded-2xl bg-amber-400/90 text-slate-900 shadow-lg shadow-amber-500/40">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                            </svg>
                        </span>
                        نصائح مهمة قبل الجدولة
                    </h2>
                </div>
                <div class="p-5 sm:p-6">
                    <div class="space-y-3">
                        <div class="flex items-start gap-3">
                            <div class="mt-0.5 flex-shrink-0">
                                <svg class="w-5 h-5 text-emerald-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                </svg>
                            </div>
                            <p class="text-sm text-slate-700 dark:text-slate-200">
                                تأكد من عدم تضارب الأوقات مع بثوث أخرى لنفس العضو.
                            </p>
                        </div>
                        <div class="flex items-start gap-3">
                            <div class="mt-0.5 flex-shrink-0">
                                <svg class="w-5 h-5 text-emerald-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                </svg>
                            </div>
                            <p class="text-sm text-slate-700 dark:text-slate-200">
                                يفضل جدولة البثوث قبل الموعد بيوم واحد على الأقل.
                            </p>
                        </div>
                        <div class="flex items-start gap-3">
                            <div class="mt-0.5 flex-shrink-0">
                                <svg class="w-5 h-5 text-emerald-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                </svg>
                            </div>
                            <p class="text-sm text-slate-700 dark:text-slate-200">
                                يمكن إدخال الساعات أو الدقائق أو كليهما لتحديد مدة البث بدقة.
                            </p>
                        </div>
                        <div class="flex items-start gap-3">
                            <div class="mt-0.5 flex-shrink-0">
                                <svg class="w-5 h-5 text-emerald-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                </svg>
                            </div>
                            <p class="text-sm text-slate-700 dark:text-slate-200">
                                سيتم منح النقاط فقط بعد مراجعة الإدارة للإثبات أو العذر المرتبط بالبث.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

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

<!-- Preview Modal -->
<div id="previewModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
    <div class="flex items-end sm:items-center justify-center min-h-screen px-4 py-6 text-center">
        <div class="fixed inset-0 bg-slate-950/70 backdrop-blur-sm transition-opacity" onclick="closePreviewModal()"></div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>

        <div class="relative inline-block align-bottom sm:align-middle bg-white dark:bg-slate-900 rounded-2xl px-4 pt-5 pb-4 text-right shadow-2xl transform transition-all sm:my-8 sm:max-w-lg w-full sm:p-6 border border-slate-200/80 dark:border-slate-700">
            <div>
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-50 dark:bg-blue-900/30">
                    <svg class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                    </svg>
                </div>
                <div class="mt-3 text-center sm:mt-5">
                    <h3 class="text-base sm:text-lg leading-6 font-semibold text-slate-900 dark:text-white">
                        معاينة البث المجدول
                    </h3>
                    <p class="mt-1 text-xs sm:text-sm text-slate-500 dark:text-slate-400">
                        هذه المعاينة تقريبية لِما سيراه العضو المكلف بالبث.
                    </p>
                </div>
            </div>

            <div class="mt-5 sm:mt-6">
                <div id="preview-content" class="text-right space-y-4 text-sm text-slate-800 dark:text-slate-100">
                    <!-- سيتم ملء المحتوى بـ JavaScript -->
                </div>

                <div class="mt-5 rounded-2xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 p-3.5 flex gap-3">
                    <div class="mt-0.5 flex-shrink-0">
                        <svg class="w-5 h-5 text-amber-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                        </svg>
                    </div>
                    <p class="text-xs sm:text-sm text-amber-900 dark:text-amber-100">
                        تأكد من صحة البيانات قبل الحفظ. يمكن تعديلها لاحقاً إذا لم يتم تأكيد الحالة.
                    </p>
                </div>
            </div>

            <div class="mt-5 sm:mt-6 flex flex-col sm:flex-row-reverse gap-2 sm:gap-3">
                <button type="button"
                        onclick="document.querySelector('#liveStreamForm').submit();"
                        class="inline-flex justify-center px-4 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium shadow-sm hover:shadow-md transition w-full sm:w-auto">
                    تأكيد الجدولة
                </button>
                <button type="button"
                        onclick="closePreviewModal()"
                        class="inline-flex justify-center px-4 py-2.5 rounded-xl bg-slate-700 hover:bg-slate-800 text-white text-sm font-medium shadow-sm hover:shadow-md transition w-full sm:w-auto">
                    إغلاق
                </button>
            </div>
        </div>
    </div>
</div>

<script>
const OLD_USER_ID = '{{ old('user_id') }}';
const OLD_USER_TYPE = '{{ old('user_type') }}';

// تحديد نوع المستخدمين
function selectUserType(type) {
    // إزالة التحديد من جميع الأزرار
    document.querySelectorAll('.user-type-btn').forEach(btn => {
        btn.classList.remove('border-blue-500', 'border-purple-500', 'border-indigo-500', 'border-orange-500', 'bg-blue-50', 'bg-purple-50', 'bg-indigo-50', 'bg-orange-50', 'dark:bg-blue-900/20', 'dark:bg-purple-900/20', 'dark:bg-indigo-900/20', 'dark:bg-orange-900/20', 'ring-2', 'ring-offset-2', 'ring-blue-500');
        btn.classList.add('border-slate-200', 'dark:border-slate-700');
        btn.classList.remove('selected');
    });

    // تحديد الزر المختار
    const selectedBtn = document.querySelector('[data-type="' + type + '"]');
    if (selectedBtn) {
        selectedBtn.classList.remove('border-slate-200', 'dark:border-slate-700');
        selectedBtn.classList.add('border-blue-500', 'ring-2', 'ring-offset-2', 'ring-blue-500');
        selectedBtn.classList.add('selected');
    }

    // حفظ النوع المختار
    const hiddenInput = document.getElementById('selectedUserType');
    if (hiddenInput) {
        hiddenInput.value = type;
    }

    // جلب المستخدمين
    fetchUsers(type);

    // إظهار قائمة المستخدمين
    const userDiv = document.getElementById('userSelectionDiv');
    if (userDiv) {
        userDiv.style.display = 'block';
    }
}

// جلب المستخدمين من الخادم
async function fetchUsers(type) {
    const userSelect = document.getElementById('user_id');
    if (!userSelect) {
        console.error('عنصر select المستخدم user_id غير موجود.');
        return;
    }

    userSelect.innerHTML = '<option value="" disabled selected>جاري تحميل المستخدمين...</option>';

    try {
        const response = await fetch(`/superadmin/evaluations/users-by-type?type=${encodeURIComponent(type)}`);

        if (!response.ok) {
            throw new Error(`خطأ في الاستجابة: ${response.status} ${response.statusText}`);
        }

        const users = await response.json();

        if (!Array.isArray(users) || users.length === 0) {
            userSelect.innerHTML = '<option value="" disabled selected>لا يوجد مستخدمون للنوع المختار</option>';
            return;
        }

        // إعادة بناء القائمة
        userSelect.innerHTML = '<option value="" disabled>اختر مستخدماً...</option>';

        users.forEach(user => {
            const option = document.createElement('option');
            option.value = user.id;
            option.textContent = `${user.name} (${user.username || user.email}) - ${user.total_points || 0} نقطة`;

            if (String(user.id) === String(OLD_USER_ID)) {
                option.selected = true;
            }

            userSelect.appendChild(option);
        });

        // إذا كان هناك مستخدم قديم، نضمن أن الخيار الأول ليس selected
        if (!OLD_USER_ID) {
            userSelect.selectedIndex = 0;
        }
    } catch (error) {
        console.error('خطأ في جلب المستخدمين:', error);
        userSelect.innerHTML = `<option value="" disabled selected>حدث خطأ في تحميل المستخدمين: ${error.message}</option>`;
    }
}

function openPreviewModal() {
    document.getElementById('previewModal').classList.remove('hidden');
}

function closePreviewModal() {
    document.getElementById('previewModal').classList.add('hidden');
}

// تحقق من صحة الوقت
function validateTime() {
    const dateInput = document.getElementById('scheduled_date');
    const timeInput = document.getElementById('scheduled_time');
    const messageDiv = document.getElementById('time-validation-message');

    if (!dateInput.value || !timeInput.value) {
        messageDiv.classList.add('hidden');
        return true;
    }

    const selectedDate = new Date(dateInput.value + 'T' + timeInput.value);
    const now = new Date();

    if (selectedDate <= now) {
        messageDiv.textContent = 'لا يمكن جدولة البث في وقت مضى من الآن';
        messageDiv.classList.remove('hidden');
        return false;
    } else {
        messageDiv.classList.add('hidden');
        return true;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    // Preview functionality
    const previewBtn = document.getElementById('preview-btn');

    function formatDuration(hours, minutes) {
        if (hours > 0 && minutes > 0) {
            return `${hours}س ${minutes}د`;
        } else if (hours > 0) {
            return `${hours}س`;
        } else if (minutes > 0) {
            return `${minutes}د`;
        } else {
            return 'غير محدد';
        }
    }

    if (previewBtn) {
        previewBtn.addEventListener('click', function () {
            const userSelect = document.getElementById('user_id');
            const typeSelect = document.getElementById('type');
            const statusSelect = document.getElementById('status');
            const hours = document.getElementById('duration_hours').value || 0;
            const minutes = document.getElementById('duration_minutes').value || 0;

            const formData = {
                user: userSelect && userSelect.selectedOptions[0] ? userSelect.selectedOptions[0].textContent : 'غير محدد',
                title: document.getElementById('title').value || 'بدون عنوان',
                description: document.getElementById('description').value || 'لا يوجد وصف',
                type: typeSelect && typeSelect.selectedOptions[0] ? typeSelect.selectedOptions[0].textContent : 'غير محدد',
                status: statusSelect && statusSelect.selectedOptions[0] ? statusSelect.selectedOptions[0].textContent : 'غير محدد',
                date: document.getElementById('scheduled_date').value || 'غير محدد',
                time: document.getElementById('scheduled_time').value || 'غير محدد',
                duration: formatDuration(parseInt(hours), parseInt(minutes))
            };

            const previewContent = `
                <div class="space-y-4">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div>
                            <div class="text-[11px] font-medium text-slate-500 dark:text-slate-400">العضو المكلف</div>
                            <div class="mt-1 text-sm font-semibold text-slate-900 dark:text-white">${formData.user}</div>
                        </div>
                        <div>
                            <div class="text-[11px] font-medium text-slate-500 dark:text-slate-400">نوع البث</div>
                            <div class="mt-1 inline-flex px-2 py-1 text-[11px] font-medium rounded-full bg-blue-50 dark:bg-blue-900/40 text-blue-700 dark:text-blue-200">
                                ${formData.type}
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div>
                            <div class="text-[11px] font-medium text-slate-500 dark:text-slate-400">حالة البث</div>
                            <div class="mt-1 inline-flex px-2 py-1 text-[11px] font-medium rounded-full bg-emerald-50 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-200">
                                ${formData.status}
                            </div>
                        </div>
                        <div>
                            <div class="text-[11px] font-medium text-slate-500 dark:text-slate-400">المدة</div>
                            <div class="mt-1 text-sm text-slate-900 dark:text-white">
                                ${formData.duration}
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-3 gap-3">
                        <div>
                            <div class="text-[11px] font-medium text-slate-500 dark:text-slate-400">التاريخ</div>
                            <div class="mt-1 text-sm text-slate-900 dark:text-white">${formData.date}</div>
                        </div>
                        <div>
                            <div class="text-[11px] font-medium text-slate-500 dark:text-slate-400">وقت البداية</div>
                            <div class="mt-1 text-sm text-slate-900 dark:text-white">${formData.time}</div>
                        </div>
                        <div id="preview-end-time"></div>
                    </div>

                    <div>
                        <div class="text-[11px] font-medium text-slate-500 dark:text-slate-400 mb-1">عنوان البث</div>
                        <div class="text-sm font-semibold text-slate-900 dark:text-white">${formData.title}</div>
                    </div>

                    <div>
                        <div class="text-[11px] font-medium text-slate-500 dark:text-slate-400 mb-1">الوصف</div>
                        <div class="text-sm text-slate-800 dark:text-slate-100 leading-relaxed">
                            ${formData.description}
                        </div>
                    </div>
                </div>
            `;

            document.getElementById('preview-content').innerHTML = previewContent;

            // حساب وقت النهاية للمعاينة
            const time = document.getElementById('scheduled_time').value;
            const h = parseInt(hours) || 0;
            const m = parseInt(minutes) || 0;
            if (time && (h > 0 || m > 0)) {
                const [startH, startM] = time.split(':');
                const startMinutes = parseInt(startH) * 60 + parseInt(startM);
                const totalMinutes = h * 60 + m;
                const endMinutes = startMinutes + totalMinutes;
                const endHours = Math.floor(endMinutes / 60) % 24;
                const endMins = endMinutes % 60;
                const endTime = `${endHours.toString().padStart(2, '0')}:${endMins.toString().padStart(2, '0')}`;

                const endTimeDiv = document.getElementById('preview-end-time');
                if (endTimeDiv) {
                    endTimeDiv.innerHTML = `
                        <div class="text-[11px] font-medium text-slate-500 dark:text-slate-400">وقت النهاية</div>
                        <div class="mt-1 text-sm text-slate-900 dark:text-white">${endTime}</div>
                    `;
                }
            }

            openPreviewModal();
        });
    }

    function updateDurationInfo() {
        const hours = parseInt(document.getElementById('duration_hours').value) || 0;
        const minutes = parseInt(document.getElementById('duration_minutes').value) || 0;

        const durationInfo = document.getElementById('duration-info');
        if (hours > 0 || minutes > 0) {
            durationInfo.textContent = `إجمالي مدة البث: ${formatDuration(hours, minutes)}`;
            durationInfo.classList.remove('text-red-500');
            durationInfo.classList.add('text-emerald-600');
        } else {
            durationInfo.textContent = 'يجب تحديد مدة البث';
            durationInfo.classList.remove('text-emerald-600');
            durationInfo.classList.add('text-red-500');
        }

        // حساب وقت النهاية
        const timeInput = document.getElementById('scheduled_time').value;
        if (timeInput && (hours > 0 || minutes > 0)) {
            const [timeHours, timeMinutes] = timeInput.split(':');
            const startMinutes = parseInt(timeHours) * 60 + parseInt(timeMinutes);
            const totalMinutes = hours * 60 + minutes;
            const endMinutes = startMinutes + totalMinutes;

            const endHours = Math.floor(endMinutes / 60) % 24;
            const endMins = endMinutes % 60;

            const endTime = `${endHours.toString().padStart(2, '0')}:${endMins.toString().padStart(2, '0')}`;

            durationInfo.innerHTML += `<br><span class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400">البث سينتهي تقريباً في الساعة ${endTime}</span>`;
        }
    }

    // Event listeners
    document.getElementById('duration_hours').addEventListener('input', updateDurationInfo);
    document.getElementById('duration_minutes').addEventListener('input', updateDurationInfo);
    document.getElementById('scheduled_time').addEventListener('change', updateDurationInfo);

    // Time validation
    document.getElementById('scheduled_date').addEventListener('change', validateTime);
    document.getElementById('scheduled_time').addEventListener('change', validateTime);

    // Initial calculations
    updateDurationInfo();

    // استرجاع نوع المستخدم السابق إن وجد
    if (OLD_USER_TYPE) {
        selectUserType(OLD_USER_TYPE);
    }

    // Form validation
    const form = document.getElementById('liveStreamForm');
    form.addEventListener('submit', function (e) {
        const userId = document.getElementById('user_id').value;
        const date = document.getElementById('scheduled_date').value;
        const time = document.getElementById('scheduled_time').value;
        const type = document.getElementById('type').value;
        const hours = parseInt(document.getElementById('duration_hours').value) || 0;
        const minutes = parseInt(document.getElementById('duration_minutes').value) || 0;

        if (!userId || !date || !time || !type) {
            e.preventDefault();
            alert('يرجى ملء جميع الحقول المطلوبة');
            return;
        }

        if (hours === 0 && minutes === 0) {
            e.preventDefault();
            alert('يجب تحديد مدة البث');
            return;
        }

        // التحقق من الوقت
        if (!validateTime()) {
            e.preventDefault();
            return;
        }
    });

    // Auto-focus first empty field
    const requiredFields = ['user_id', 'type', 'scheduled_date', 'scheduled_time'];
    for (const fieldId of requiredFields) {
        const field = document.getElementById(fieldId);
        if (field && !field.value) {
            if (fieldId === 'user_id') {
                const btn = document.querySelector('.user-type-btn');
                if (btn) btn.focus();
            } else {
                field.focus();
            }
            break;
        }
    }

    // إذا كان هناك user_type قديم بدون users محملين، نجلبهم
    if (OLD_USER_TYPE && !OLD_USER_ID) {
        const userDiv = document.getElementById('userSelectionDiv');
        if (userDiv) userDiv.style.display = 'block';
        fetchUsers(OLD_USER_TYPE);
    }
});
</script>

@endsection