@extends('layouts.superadmin')

@section('title', 'تعديل البث المباشر')

@push('styles') 
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

@section('content')
<div class="container mx-auto px-4 py-6 rtl">
    <!-- Page Header -->
    <div class="mb-6">
        <!-- Breadcrumb -->
        <nav class="flex mb-4" 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 text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
                        الرئيسية
                    </a>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-6 h-6 text-gray-400 rotate-180" 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="mr-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:mr-2 dark:text-gray-400 dark:hover:text-white">
                            البث المباشر
                        </a>
                    </div>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-6 h-6 text-gray-400 rotate-180" 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.show', $liveStream) }}" 
                           class="mr-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:mr-2 dark:text-gray-400 dark:hover:text-white">
                            {{ $liveStream->title ?: 'عرض البث' }}
                        </a>
                    </div>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-6 h-6 text-gray-400 rotate-180" 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="mr-1 text-sm font-medium text-gray-500 md:mr-2 dark:text-gray-400">تعديل</span>
                    </div>
                </li>
            </ol>
        </nav>

        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">تعديل البث المباشر</h1>
                <p class="text-gray-600 dark:text-gray-400">تعديل معلومات البث المجدول</p>
            </div>
            <div class="flex flex-col sm:flex-row gap-2">
                <a href="{{ route('superadmin.live-streams.show', $liveStream) }}" 
                   class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200">
                    <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="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>
                    عرض البث
                </a>
                <a href="{{ route('superadmin.live-streams.index') }}" 
                   class="inline-flex items-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition duration-200">
                    <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 class="max-w-4xl mx-auto">
        <!-- Current Status Info -->
        <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-6">
            <div class="flex items-start">
                <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 ml-2 mt-0.5 flex-shrink-0" 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>
                    <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">معلومات</h3>
                    <p class="mt-1 text-sm text-blue-700 dark:text-blue-300">
                        الحالة الحالية: <span class="font-semibold">{{ $liveStream->status_text }}</span>
                        @if($liveStream->confirmed_at)
                            - تم التأكيد في {{ $liveStream->confirmed_at->format('Y/m/d H:i') }}
                        @endif
                    </p>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
                    <svg class="w-6 h-6 ml-2 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                    </svg>
                    تعديل معلومات البث
                </h2>
            </div>

            <!-- Current Member Info -->
            <div class="px-6 py-4 bg-blue-50 dark:bg-blue-900/20 border-b border-gray-200 dark:border-gray-700">
                <div class="flex items-center">
                    @if($liveStream->user->avatar)
                        <img src="{{ asset('storage/avatars/' . $liveStream->user->avatar) }}" 
                             class="h-10 w-10 rounded-full ml-3">
                    @else
                        <div class="h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center ml-3">
                            <svg class="h-6 w-6 text-gray-500 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                    @endif
                    <div>
                        <div class="text-sm font-medium text-blue-900 dark:text-blue-100">العضو الحالي: {{ $liveStream->user->name }}</div>
                        <div class="text-sm text-blue-700 dark:text-blue-300">{{ $liveStream->user->username }} - {{ $liveStream->user->total_points }} نقطة</div>
                    </div>
                </div>
            </div>

            @if ($errors->any())
                <div class="px-6 py-4 bg-red-50 dark:bg-red-900/20 border-b border-gray-200 dark:border-gray-700">
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-red-600 dark:text-red-400 ml-2 mt-0.5 flex-shrink-0" 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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                        </svg>
                        <div>
                            <h3 class="text-sm font-medium text-red-800 dark:text-red-200">يوجد أخطاء في البيانات:</h3>
                            <ul class="mt-1 text-sm text-red-700 dark:text-red-300 list-disc list-inside">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            @endif

            <form method="POST" action="{{ route('superadmin.live-streams.update', $liveStream) }}" id="liveStreamEditForm">
                @csrf
                @method('PUT')
                
                <div class="p-6 space-y-6">
                    <!-- User Type Selection (matching create.blade.php) -->
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">اختر نوع المستخدمين</label>
                        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
                            <button type="button" onclick="selectUserType('all')" 
                                    class="user-type-btn flex flex-col items-center p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition duration-200"
                                    data-type="all">
                                <svg class="w-6 h-6 text-gray-600 mb-2" 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>
                                <span class="text-xs text-center">جميع المستخدمين</span>
                            </button>
                            
                            <button type="button" onclick="selectUserType('moderators')" 
                                    class="user-type-btn flex flex-col items-center p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-purple-500 hover:bg-purple-50 dark:hover:bg-purple-900/20 transition duration-200"
                                    data-type="moderators">
                                <svg class="w-6 h-6 text-purple-600 mb-2" 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 class="text-xs text-center">المشرفين</span>
                            </button>
                            
                            <button type="button" onclick="selectUserType('official_members')" 
                                    class="user-type-btn flex flex-col items-center p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-indigo-500 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition duration-200"
                                    data-type="official_members">
                                <svg class="w-6 h-6 text-indigo-600 mb-2" 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 class="text-xs text-center">الأعضاء الرسميين</span>
                            </button>
                            
                            <button type="button" onclick="selectUserType('beta_members')" 
                                    class="user-type-btn flex flex-col items-center p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-orange-500 hover:bg-orange-50 dark:hover:bg-orange-900/20 transition duration-200"
                                    data-type="beta_members">
                                <svg class="w-6 h-6 text-orange-600 mb-2" 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>
                                <span class="text-xs text-center">أعضاء بيتا</span>
                            </button>
                        </div>
                        <input type="hidden" id="selectedUserType" name="user_type" value="">
                    </div>

                    <!-- User Selection -->
                    <div class="mb-6">
                        <label for="user_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            العضو المكلف <span class="text-red-500">*</span>
                        </label>
                        <select id="user_id" 
                                name="user_id" 
                                required
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white @error('user_id') border-red-500 @enderror">
                            <option value="">اختر العضو</option>
                            @foreach($users as $user)
                                <option value="{{ $user->id }}" {{ old('user_id', $liveStream->user_id) == $user->id ? 'selected' : '' }}>
                                    {{ $user->name }} ({{ $user->username }}) - {{ $user->total_points }} نقطة
                                </option>
                            @endforeach
                        </select>
                        @error('user_id')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- نوع البث -->
                    <div>
                        <label for="type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            نوع البث <span class="text-red-500">*</span>
                        </label>
                        <select id="type" 
                                name="type" 
                                required
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white @error('type') border-red-500 @enderror">
                            <option value="">اختر نوع البث</option>
                            <option value="guests" {{ old('type', $liveStream->type) === 'guests' ? 'selected' : '' }}>ضيوف</option>
                            <option value="tours" {{ old('type', $liveStream->type) === 'tours' ? 'selected' : '' }}>جولات</option>
                            <option value="both" {{ old('type', $liveStream->type) === 'both' ? 'selected' : '' }}>كلاهما</option>
                        </select>
                        @error('type')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- عنوان البث -->
                    <div>
                        <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">عنوان البث (اختياري)</label>
                        <input type="text" 
                               id="title" 
                               name="title" 
                               value="{{ old('title', $liveStream->title) }}" 
                               placeholder="مثل: بث ضيوف - موضوع معين"
                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white @error('title') border-red-500 @enderror">
                        @error('title')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">يمكن ترك هذا الحقل فارغاً إذا لم يكن هناك موضوع محدد</p>
                    </div>

                    <!-- وصف البث -->
                    <div>
                        <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">وصف البث (اختياري)</label>
                        <textarea id="description" 
                                  name="description" 
                                  rows="4" 
                                  placeholder="وصف مختصر عن محتوى البث المتوقع..."
                                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white @error('description') border-red-500 @enderror">{{ old('description', $liveStream->description) }}</textarea>
                        @error('description')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- التاريخ والوقت والمدة -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                        <div>
                            <label for="scheduled_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">تاريخ البث <span class="text-red-500">*</span></label>
                            <input type="date" 
                                   id="scheduled_date" 
                                   name="scheduled_date" 
                                   value="{{ old('scheduled_date', $liveStream->scheduled_date->format('Y-m-d')) }}" 
                                   required
                                   class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white @error('scheduled_date') border-red-500 @enderror">
                            @error('scheduled_date')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="scheduled_time" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">وقت البث <span class="text-red-500">*</span></label>
                            <input type="time" 
                                   id="scheduled_time" 
                                   name="scheduled_time" 
                                   value="{{ old('scheduled_time', $liveStream->scheduled_time->format('H:i')) }}" 
                                   required
                                   class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white @error('scheduled_time') border-red-500 @enderror">
                            @error('scheduled_time')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="duration_hours" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">الساعات</label>
                            <input type="number" 
                                   id="duration_hours" 
                                   name="duration_hours" 
                                   value="{{ old('duration_hours', $liveStream->duration_hours ?? 0) }}" 
                                   min="0" 
                                   max="24"
                                   placeholder="0"
                                   class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white @error('duration_hours') border-red-500 @enderror">
                            @error('duration_hours')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="duration_minutes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">الدقائق</label>
                            <input type="number" 
                                   id="duration_minutes" 
                                   name="duration_minutes" 
                                   value="{{ old('duration_minutes', $liveStream->duration_minutes ?? 0) }}" 
                                   min="0" 
                                   max="59"
                                   placeholder="0"
                                   class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white @error('duration_minutes') border-red-500 @enderror">
                            @error('duration_minutes')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

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

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

                    <!-- الملاحظات الإدارية -->
                    <div>
                        <label for="admin_notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">ملاحظات إدارية (اختياري)</label>
                        <textarea id="admin_notes" 
                                  name="admin_notes" 
                                  rows="4" 
                                  placeholder="ملاحظات إضافية للعضو المكلف..."
                                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white @error('admin_notes') border-red-500 @enderror">{{ old('admin_notes', $liveStream->admin_notes) }}</textarea>
                        @error('admin_notes')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">هذه الملاحظات ستكون مرئية للعضو المكلف</p>
                    </div>

                    <!-- حالة البث -->
                    <div>
                        <label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            حالة البث <span class="text-red-500">*</span>
                        </label>
                        <select id="status" name="status" required
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white @error('status') border-red-500 @enderror">
                            <option value="scheduled" {{ old('status', $liveStream->status) == 'scheduled' ? 'selected' : '' }}>مجدولة</option>
                            <option value="pending_proof" {{ old('status', $liveStream->status) == 'pending_proof' ? 'selected' : '' }}>في انتظار مراجعة الإثبات</option>
                            <option value="pending_excuse" {{ old('status', $liveStream->status) == 'pending_excuse' ? 'selected' : '' }}>في انتظار مراجعة العذر</option>
                            <option value="confirmed" {{ old('status', $liveStream->status) == 'confirmed' ? 'selected' : '' }}>مؤكدة</option>
                            <option value="missed_excuse" {{ old('status', $liveStream->status) == 'missed_excuse' ? 'selected' : '' }}>لم يفتح بعذر</option>
                            <option value="missed_no_excuse" {{ old('status', $liveStream->status) == 'missed_no_excuse' ? 'selected' : '' }}>لم يفتح بدون عذر</option>
                            <option value="proof_rejected" {{ old('status', $liveStream->status) == 'proof_rejected' ? 'selected' : '' }}>الإثبات مرفوض</option>
                            <option value="excuse_rejected" {{ old('status', $liveStream->status) == 'excuse_rejected' ? 'selected' : '' }}>العذر مرفوض</option>
                        </select>
                        @error('status')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">يمكن تغيير الحالة عند الحاجة</p>
                    </div>

                    <!-- نظام النقاط -->
                    <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-blue-900 dark:text-blue-100 mb-4 flex items-center">
                            <svg class="w-6 h-6 ml-2 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="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>
                            نظام النقاط للبث المباشر
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div class="text-center p-4 bg-green-100 dark:bg-green-900/20 rounded-lg">
                                <div class="text-2xl font-bold text-green-700 dark:text-green-300 mb-2">+3</div>
                                <p class="text-sm text-green-600 dark:text-green-400">تم البث بنجاح<br>(بعد مراجعة الإثبات)</p>
                            </div>
                            <div class="text-center p-4 bg-yellow-100 dark:bg-yellow-900/20 rounded-lg">
                                <div class="text-2xl font-bold text-yellow-700 dark:text-yellow-300 mb-2">+1</div>
                                <p class="text-sm text-yellow-600 dark:text-yellow-400">لم يفتح بعذر مقبول<br>(بعد مراجعة العذر)</p>
                            </div>
                            <div class="text-center p-4 bg-red-100 dark:bg-red-900/20 rounded-lg">
                                <div class="text-2xl font-bold text-red-700 dark:text-red-300 mb-2">-3</div>
                                <p class="text-sm text-red-600 dark:text-red-400">لم يفتح بدون عذر<br>(تلقائياً بعد 10 دقائق)</p>
                            </div>
                        </div>
                    </div>

                    <!-- Super Admin Privileges Info -->
                    <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-green-900 dark:text-green-100 mb-3 flex items-center">
                            <svg class="w-5 h-5 ml-2 text-green-600 dark:text-green-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>
                            صلاحيات السوبر أدمن
                        </h3>
                        <ul class="space-y-2 text-green-800 dark:text-green-200">
                            <li class="flex items-start">
                                <svg class="w-4 h-4 ml-2 mt-0.5 flex-shrink-0" 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>
                                يمكنك تعديل البث في أي وقت بصرف النظر عن الحالة
                            </li>
                            <li class="flex items-start">
                                <svg class="w-4 h-4 ml-2 mt-0.5 flex-shrink-0" 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>
                                تحديد أي تاريخ ووقت حتى لو كان في الماضي
                            </li>
                            <li class="flex items-start">
                                <svg class="w-4 h-4 ml-2 mt-0.5 flex-shrink-0" 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>
                                سيتم التحقق من التضارب الزمني مع بثوث أخرى
                            </li>
                            <li class="flex items-start">
                                <svg class="w-4 h-4 ml-2 mt-0.5 flex-shrink-0" 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>
                                يمكن تغيير العضو المكلف في أي وقت
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
                    <div class="flex flex-col sm:flex-row justify-between gap-3">
                        <div class="flex flex-col sm:flex-row gap-2">
                            <a href="{{ route('superadmin.live-streams.show', $liveStream) }}" 
                               class="inline-flex items-center justify-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition duration-200">
                                <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="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                                إلغاء
                            </a>
                        </div>
                        
                        <div class="flex flex-col sm:flex-row gap-2">
                            <button type="button" 
                                    id="preview-changes"
                                    class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200">
                                <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="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>
                                معاينة التغييرات
                            </button>
                            <button type="submit" 
                                    class="inline-flex items-center justify-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition duration-200">
                                <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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path>
                                </svg>
                                حفظ التعديلات
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- Change History -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm mt-6">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
                    <svg class="w-6 h-6 ml-2 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    تاريخ البث
                </h2>
            </div>
            <div class="p-6">
                <div class="flow-root">
                    <ul class="-mb-8">
                        <li>
                            <div class="relative pb-8">
                                <span class="absolute top-4 right-4 -ml-px h-full w-0.5 bg-gray-200 dark:bg-gray-600" aria-hidden="true"></span>
                                <div class="relative flex space-x-3 space-x-reverse">
                                    <div>
                                        <span class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center ring-8 ring-white dark:ring-gray-800">
                                            <svg class="h-5 w-5 text-white" 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>
                                        </span>
                                    </div>
                                    <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 space-x-reverse">
                                        <div>
                                            <p class="text-sm text-gray-500 dark:text-gray-400">تم إنشاء البث بواسطة <span class="font-medium text-gray-900 dark:text-white">{{ $liveStream->assignedBy->name }}</span></p>
                                        </div>
                                        <div class="text-right text-sm whitespace-nowrap text-gray-500 dark:text-gray-400">
                                            <time>{{ $liveStream->created_at->format('Y/m/d H:i') }}</time>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>

                        @if($liveStream->updated_at != $liveStream->created_at)
                            <li>
                                <div class="relative pb-8">
                                    <span class="absolute top-4 right-4 -ml-px h-full w-0.5 bg-gray-200 dark:bg-gray-600" aria-hidden="true"></span>
                                    <div class="relative flex space-x-3 space-x-reverse">
                                        <div>
                                            <span class="h-8 w-8 rounded-full bg-yellow-500 flex items-center justify-center ring-8 ring-white dark:ring-gray-800">
                                                <svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                                </svg>
                                            </span>
                                        </div>
                                        <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 space-x-reverse">
                                            <div>
                                                <p class="text-sm text-gray-500 dark:text-gray-400">آخر تعديل</p>
                                            </div>
                                            <div class="text-right text-sm whitespace-nowrap text-gray-500 dark:text-gray-400">
                                                <time>{{ $liveStream->updated_at->format('Y/m/d H:i') }}</time>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        @endif

                        @if($liveStream->confirmed_at)
                            <li>
                                <div class="relative">
                                    <div class="relative flex space-x-3 space-x-reverse">
                                        <div>
                                            <span class="h-8 w-8 rounded-full 
                                                @if($liveStream->status_color === 'green') bg-green-500
                                                @elseif($liveStream->status_color === 'yellow') bg-yellow-500
                                                @elseif($liveStream->status_color === 'red') bg-red-500
                                                @else bg-blue-500
                                                @endif
                                                flex items-center justify-center ring-8 ring-white dark:ring-gray-800">
                                                <svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                                </svg>
                                            </span>
                                        </div>
                                        <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 space-x-reverse">
                                            <div>
                                                <p class="text-sm text-gray-500 dark:text-gray-400">تم تأكيد الحالة: 
                                                    <span class="inline-flex px-2 py-1 text-xs font-medium rounded-full 
                                                        @if($liveStream->status_color === 'green') bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200
                                                        @elseif($liveStream->status_color === 'yellow') bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200
                                                        @elseif($liveStream->status_color === 'red') bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-200
                                                        @else bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200
                                                        @endif">{{ $liveStream->status_text }}</span>
                                                </p>
                                                @if($liveStream->confirmedBy)
                                                    <p class="text-xs text-gray-400 dark:text-gray-500">بواسطة {{ $liveStream->confirmedBy->name }}</p>
                                                @endif
                                            </div>
                                            <div class="text-right text-sm whitespace-nowrap text-gray-500 dark:text-gray-400">
                                                <time>{{ $liveStream->confirmed_at->format('Y/m/d H:i') }}</time>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        @endif
                    </ul>
                </div>
            </div>
        </div>

        <!-- Quick Tips Card -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm mt-6">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
                    <svg class="w-6 h-6 ml-2 text-yellow-600 dark:text-yellow-400" 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>
                    نصائح مهمة
                </h2>
            </div>
            <div class="p-6">
                <div class="space-y-3">
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mt-0.5 ml-3 flex-shrink-0" 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>
                        <p class="text-gray-700 dark:text-gray-300">تأكد من عدم تضارب الأوقات مع بثوث أخرى لنفس العضو</p>
                    </div>
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mt-0.5 ml-3 flex-shrink-0" 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>
                        <p class="text-gray-700 dark:text-gray-300">يمكن إدخال الساعات أو الدقائق أو كليهما</p>
                    </div>
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mt-0.5 ml-3 flex-shrink-0" 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>
                        <p class="text-gray-700 dark:text-gray-300">السوبر أدمن يمكنه تعديل أي بث في أي وقت</p>
                    </div>
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mt-0.5 ml-3 flex-shrink-0" 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>
                        <p class="text-gray-700 dark:text-gray-300">سيتم منح النقاط فقط بعد مراجعة الإدارة للإثبات أو العذر</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Preview Changes Modal -->
<div id="previewModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 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 bg-white dark:bg-gray-800 rounded-lg px-4 pt-5 pb-4 text-right overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full sm:p-6">
            <div>
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900/20">
                    <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-lg leading-6 font-medium text-gray-900 dark:text-white">معاينة التغييرات</h3>
                </div>
            </div>

            <div class="mt-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-3">البيانات الحالية</h4>
                        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg space-y-2 text-sm">
                            <div><strong>العضو:</strong> {{ $liveStream->user->name }}</div>
                            <div><strong>العنوان:</strong> {{ $liveStream->title ?: 'بدون عنوان' }}</div>
                            <div><strong>النوع:</strong> {{ $liveStream->type_text }}</div>
                            <div><strong>التاريخ:</strong> {{ $liveStream->scheduled_date->format('Y/m/d') }}</div>
                            <div><strong>الوقت:</strong> {{ $liveStream->scheduled_time->format('H:i') }}</div>
                            <div><strong>المدة:</strong> {{ $liveStream->formatted_duration }}</div>
                            <div><strong>الحالة:</strong> {{ $liveStream->status_text }}</div>
                        </div>
                    </div>
                    <div>
                        <h4 class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-3">البيانات الجديدة</h4>
                        <div id="new-data" class="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg space-y-2 text-sm">
                            <!-- سيتم ملؤها بـ JavaScript -->
                        </div>
                    </div>
                </div>
                
                <div class="mt-6 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 ml-2 mt-0.5" 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>
                        <p class="text-sm text-blue-800 dark:text-blue-200">
                            تأكد من صحة البيانات الجديدة قبل الحفظ
                        </p>
                    </div>
                </div>
            </div>

            <div class="mt-6 flex flex-col sm:flex-row-reverse gap-3">
                <button type="button" 
                        onclick="document.querySelector('form').submit();"
                        class="inline-flex justify-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition duration-200">
                    تأكيد الحفظ
                </button>
                <button type="button" 
                        onclick="closePreviewModal()" 
                        class="inline-flex justify-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition duration-200">
                    إغلاق
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
// تحديد نوع المستخدمين (نفس الكود من create.blade.php)
function selectUserType(type) {
    console.log('تم اختيار نوع المستخدم:', type);

    // إزالة التحديد من جميع الأزرار
    document.querySelectorAll('.user-type-btn').forEach(btn => {
        btn.classList.remove('border-blue-500', 'bg-blue-50', 'dark:bg-blue-900/20', 'selected');
        btn.classList.add('border-gray-200', 'dark:border-gray-600');
    });

    // تحديد الزر المختار
    const selectedBtn = document.querySelector(`[data-type="${type}"]`);
    if (selectedBtn) {
        selectedBtn.classList.remove('border-gray-200', 'dark:border-gray-600');
        selectedBtn.classList.add('border-blue-500', 'bg-blue-50', 'dark:bg-blue-900/20', 'selected');
    }

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

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

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

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

    try {
        // استخدام نفس endpoint الموجود في التقييمات
        const response = await fetch(`/superadmin/evaluations/users-by-type?type=${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 selected>اختر مستخدماً...</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} نقطة`;
            userSelect.appendChild(option);
        });

        // استعادة القيمة المحفوظة إذا كانت موجودة
        if (currentValue) {
            userSelect.value = currentValue;
        }

    } 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();
    
    // السوبر أدمن يمكنه تحديد أي وقت، لذا نزيل التحقق
    messageDiv.classList.add('hidden');
    return true;
}

document.addEventListener('DOMContentLoaded', function() {
    // Initialize Select2 for user selection
    $('#user_id').select2({
        placeholder: 'البحث عن العضو...',
        allowClear: true,
        dir: 'rtl'
    });

    // Preview changes functionality
    const previewBtn = document.getElementById('preview-changes');
    
    if (previewBtn) {
        previewBtn.addEventListener('click', function() {
            const userSelect = document.getElementById('user_id');
            const typeSelect = document.getElementById('type');
            const statusSelect = document.getElementById('status');
            const hours = parseInt(document.getElementById('duration_hours').value) || 0;
            const minutes = parseInt(document.getElementById('duration_minutes').value) || 0;
            
            const newData = {
                user: userSelect.selectedOptions[0]?.textContent || 'غير محدد',
                title: document.getElementById('title').value || 'بدون عنوان',
                type: typeSelect.selectedOptions[0]?.textContent || 'غير محدد',
                status: statusSelect.selectedOptions[0]?.textContent || 'غير محدد',
                date: document.getElementById('scheduled_date').value,
                time: document.getElementById('scheduled_time').value,
                duration: formatDuration(hours, minutes)
            };
            
            const newDataHtml = `
                <div><strong>العضو:</strong> ${newData.user}</div>
                <div><strong>العنوان:</strong> ${newData.title}</div>
                <div><strong>النوع:</strong> ${newData.type}</div>
                <div><strong>التاريخ:</strong> ${newData.date}</div>
                <div><strong>الوقت:</strong> ${newData.time}</div>
                <div><strong>المدة:</strong> ${newData.duration}</div>
                <div><strong>الحالة:</strong> ${newData.status}</div>
            `;
            
            document.getElementById('new-data').innerHTML = newDataHtml;
            openPreviewModal();
        });
    }

    // Duration calculation
    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 'غير محدد';
        }
    }

    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-green-600');
        } else {
            durationInfo.textContent = 'يجب تحديد مدة البث';
            durationInfo.classList.remove('text-green-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>البث سينتهي في الساعة ${endTime}`;
        }
    }
    
    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 calculation
    updateDurationInfo();

    // Form validation
    const form = document.getElementById('liveStreamEditForm');
    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 hours = parseInt(document.getElementById('duration_hours').value) || 0;
        const minutes = parseInt(document.getElementById('duration_minutes').value) || 0;
        
        if (!userId || !date || !time) {
            e.preventDefault();
            alert('يرجى ملء جميع الحقول المطلوبة');
            return;
        }

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

    // Close modals when clicking outside or pressing Escape
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closePreviewModal();
        }
    });
});
</script>
@endpush
@endsection