@extends('layouts.superadmin')

@section('title', 'إنشاء مسابقة جديدة')

@push('meta')
<meta name="csrf-token" content="{{ csrf_token() }}">
@endpush

@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <!-- Page Header -->
        <div class="mb-6">
            <div class="flex items-center gap-4 mb-4">
                <a href="{{ route('superadmin.competitions.index') }}" 
                   class="inline-flex items-center text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200">
                    <svg class="w-5 h-5 ml-1" 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>
            <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>

        <!-- Form Container -->
        <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">بيانات المسابقة</h2>
            </div>

            <form id="competition-form" class="p-6">
                @csrf
                
                <!-- Title -->
                <div class="mb-6">
                    <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        عنوان المسابقة <span class="text-red-500">*</span>
                    </label>
                    <input type="text" 
                           id="title" 
                           name="title" 
                           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"
                           placeholder="أدخل عنوان المسابقة...">
                    <div id="title-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>

                <!-- Description -->
                <div class="mb-6">
                    <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        وصف تفصيلي للمسابقة <span class="text-red-500">*</span>
                    </label>
                    <textarea id="description" 
                              name="description" 
                              rows="4"
                              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"
                              placeholder="اكتب وصف تفصيلي للمسابقة..."></textarea>
                    <div id="description-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>

                <!-- Terms and Conditions -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        شروط المسابقة (اختياري)
                    </label>
                    <div id="terms-container" class="space-y-3">
                        <!-- Terms will be added dynamically -->
                    </div>
                    <button type="button" id="add-term" 
                            class="mt-3 inline-flex items-center px-3 py-2 text-sm bg-green-100 hover:bg-green-200 text-green-700 rounded-md transition duration-200">
                        <svg class="w-4 h-4 ml-1" 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>
                        إضافة شرط جديد
                    </button>
                </div>

                <!-- Participant Types Selection -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                        اختر فئات المشاركين <span class="text-red-500">*</span>
                    </label>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-4">يمكنك اختيار أكثر من فئة</p>
                    
                    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
                        <button type="button" onclick="toggleParticipantType('all')" 
                                class="participant-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="toggleParticipantType('moderators')" 
                                class="participant-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="toggleParticipantType('official_members')" 
                                class="participant-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="toggleParticipantType('beta_members')" 
                                class="participant-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>

                        <button type="button" onclick="toggleParticipantType('specific_users')" 
                                class="participant-type-btn flex flex-col items-center p-4 border-2 border-gray-200 dark:border-gray-600 rounded-lg hover:border-green-500 hover:bg-green-50 dark:hover:bg-green-900/20 transition duration-200"
                                data-type="specific_users">
                            <svg class="w-6 h-6 text-green-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"></path>
                            </svg>
                            <span class="text-xs text-center">أشخاص محددين</span>
                        </button>
                    </div>
                    
                    <!-- Hidden inputs for selected types -->
                    <div id="selected-types-container" class="hidden">
                        <!-- Selected types will be added dynamically -->
                    </div>
                    <div id="participant_types-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>

                <!-- User Selection (shown when specific_users is selected) -->
                <div class="mb-6" id="userSelectionDiv" style="display: none;">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        اختر المشاركين المحددين <span class="text-red-500">*</span>
                    </label>
                    
                    <!-- Search Input -->
                    <div class="mb-4">
                        <input type="text" 
                               id="user-search" 
                               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">
                    </div>

                    <!-- Users List -->
                    <div id="users-list" class="space-y-2 max-h-64 overflow-y-auto border border-gray-200 dark:border-gray-600 rounded-md p-4">
                        <div class="text-sm text-gray-500 dark:text-gray-400 text-center" id="no-users-available">
                            اختر الفئات المشاركة أولاً
                        </div>
                    </div>

                    <!-- Selected Count -->
                    <div class="mt-3">
                        <span id="selected-count" class="text-sm text-gray-600 dark:text-gray-400">
                            عدد المحددين: 0
                        </span>
                    </div>
                    
                    <div id="specific_users-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>

                <!-- Start Date -->
                <div class="mb-6">
                    <label for="start_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        تاريخ ووقت بدء المسابقة (اختياري)
                    </label>
                    <input type="datetime-local" 
                           id="start_date" 
                           name="start_date"
                           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">
                    <div id="start_date-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>

                <!-- End Date Options -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                        هل تريد تحديد تاريخ ووقت انتهاء المسابقة؟
                    </label>
                    <div class="flex items-center space-x-4 space-x-reverse mb-4">
                        <label class="flex items-center cursor-pointer">
                            <input type="radio" 
                                   name="has_end_date" 
                                   value="1" 
                                   onchange="toggleEndDateField(true)"
                                   class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                            <span class="mr-2 text-sm text-gray-900 dark:text-gray-300">نعم، تحديد تاريخ انتهاء</span>
                        </label>
                        <label class="flex items-center cursor-pointer">
                            <input type="radio" 
                                   name="has_end_date" 
                                   value="0" 
                                   checked
                                   onchange="toggleEndDateField(false)"
                                   class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                            <span class="mr-2 text-sm text-gray-900 dark:text-gray-300">لا، إنهاء يدوي لاحقاً</span>
                        </label>
                    </div>

                    <!-- End Date Field -->
                    <div id="end-date-field" class="hidden">
                        <label for="end_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="datetime-local" 
                               id="end_date" 
                               name="end_date"
                               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">
                        <div id="end_date-error" class="text-red-500 text-sm mt-1 hidden"></div>
                    </div>
                </div>

                <!-- Status -->
                <div class="mb-6">
                    <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" 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 dark:bg-gray-700 dark:text-white">
                        <option value="">جميع الحالات</option>
                        <option value="draft" {{ request('status') === 'draft' ? 'selected' : '' }}>مسودة</option>
                        <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>نشطة</option>
                        <option value="ended" {{ request('status') === 'ended' ? 'selected' : '' }}>منتهية</option>
                    </select>
                    <div id="status-error" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>

                <!-- Form Actions -->
                <div class="flex flex-col sm:flex-row justify-between items-center pt-6 border-t border-gray-200 dark:border-gray-700">
                    <div class="flex items-center space-x-4 space-x-reverse">
                        <button type="submit" 
                                id="submit-btn"
                                class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
                            <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="M5 13l4 4L19 7"></path>
                            </svg>
                            <span id="submit-text">إنشاء المسابقة</span>
                        </button>
                        
                        <a href="{{ route('superadmin.competitions.index') }}" 
                           class="inline-flex items-center px-6 py-3 bg-gray-300 hover:bg-gray-400 text-gray-700 font-medium rounded-lg transition duration-200">
                            إلغاء
                        </a>
                    </div>
                    
                    <!-- Loading Indicator -->
                    <div id="loading-indicator" class="hidden flex items-center mt-4 sm:mt-0">
                        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        <span class="text-sm text-gray-600 dark:text-gray-400">جار المعالجة...</span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // المتغيرات الأساسية
    let selectedParticipantTypes = [];
    let selectedUsers = [];
    let allUsers = [];
    let termsCount = 0;

    // العناصر الأساسية
    const form = document.getElementById('competition-form');
    const userSelectionDiv = document.getElementById('userSelectionDiv');
    const usersList = document.getElementById('users-list');
    const userSearch = document.getElementById('user-search');
    const selectedCountSpan = document.getElementById('selected-count');
    const submitBtn = document.getElementById('submit-btn');
    const submitText = document.getElementById('submit-text');
    const loadingIndicator = document.getElementById('loading-indicator');

    // إدارة الشروط
    const termsContainer = document.getElementById('terms-container');
    const addTermBtn = document.getElementById('add-term');

    // إضافة شرط جديد
    addTermBtn.addEventListener('click', function() {
        addNewTerm();
    });

    function addNewTerm(value = '') {
        termsCount++;
        const termDiv = document.createElement('div');
        termDiv.className = 'flex items-center gap-2';
        termDiv.innerHTML = `
            <textarea name="terms[]" 
                      rows="2" 
                      placeholder="أدخل شرط المسابقة..." 
                      class="flex-1 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">${value}</textarea>
            <button type="button" 
                    onclick="removeTerm(this)" 
                    class="p-2 text-red-600 hover:text-red-800 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md transition duration-200">
                <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                </svg>
            </button>
        `;
        termsContainer.appendChild(termDiv);
    }

    // حذف شرط
    window.removeTerm = function(button) {
        button.closest('.flex').remove();
    };

    // إدارة فئات المشاركين - النسخة المُحدثة
    window.toggleParticipantType = function(type) {
        const btn = document.querySelector(`[data-type="${type}"]`);
        const isSelected = selectedParticipantTypes.includes(type);

        if (isSelected) {
            // إزالة الاختيار
            selectedParticipantTypes = selectedParticipantTypes.filter(t => t !== type);
            btn.classList.remove('border-blue-500', 'bg-blue-50', 'dark:bg-blue-900/20');
            btn.classList.add('border-gray-200', 'dark:border-gray-600');
        } else {
            // إضافة الاختيار
            selectedParticipantTypes.push(type);
            btn.classList.remove('border-gray-200', 'dark:border-gray-600');
            btn.classList.add('border-blue-500', 'bg-blue-50', 'dark:bg-blue-900/20');
        }

        // تحديث الحقول المخفية
        updateSelectedTypesInputs();

        // إظهار قائمة الاختيار فقط عند اختيار "أشخاص محددين"
        if (selectedParticipantTypes.includes('specific_users')) {
            userSelectionDiv.style.display = 'block';
            // عند اختيار "أشخاص محددين" - جلب جميع المستخدمين بغض النظر عن الرول
            fetchAllUsers();
        } else {
            userSelectionDiv.style.display = 'none';
            selectedUsers = [];
            updateSelectedCount();
        }
    };

    // تحديث حقول الإدخال المخفية للفئات المختارة
    function updateSelectedTypesInputs() {
        const container = document.getElementById('selected-types-container');
        container.innerHTML = '';

        selectedParticipantTypes.forEach(type => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'participant_types[]';
            input.value = type;
            container.appendChild(input);
        });
    }

    // تبديل حقل تاريخ الانتهاء
    window.toggleEndDateField = function(show) {
        const endDateField = document.getElementById('end-date-field');
        const endDateInput = document.getElementById('end_date');
        
        if (show) {
            endDateField.classList.remove('hidden');
            endDateInput.required = true;
        } else {
            endDateField.classList.add('hidden');
            endDateInput.required = false;
            endDateInput.value = '';
        }
    };

    // جلب جميع المستخدمين (للأشخاص المحددين فقط)
    async function fetchAllUsers() {
        try {
            // جلب جميع المستخدمين بغض النظر عن الرول
            const response = await fetch(`/superadmin/competitions/ajax/users-by-roles?roles[]=all`, {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                }
            });
            
            if (!response.ok) {
                throw new Error(`خطأ في الاستجابة: ${response.status}`);
            }

            const users = await response.json();
            allUsers = users;
            displayUsers(users);
            
        } catch (error) {
            console.error('خطأ في جلب المستخدمين:', error);
            usersList.innerHTML = '<div class="text-red-500 text-sm text-center">حدث خطأ في تحميل المستخدمين</div>';
        }
    }

    // عرض قائمة المستخدمين
    function displayUsers(users) {
        if (!users || users.length === 0) {
            usersList.innerHTML = '<div class="text-sm text-gray-500 dark:text-gray-400 text-center">لا يوجد مستخدمون متاحون</div>';
            return;
        }

        const usersHtml = users.map(user => {
            const isSelected = selectedUsers.some(selected => selected.id === user.id);
            return `
                <div class="flex items-center p-3 border border-gray-200 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700">
                    <input type="checkbox" 
                           id="user_${user.id}" 
                           name="specific_users[]" 
                           value="${user.id}"
                           ${isSelected ? 'checked' : ''}
                           class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                           onchange="toggleUserSelection(${user.id}, '${user.name}', '${user.email}', this.checked)">
                    <label for="user_${user.id}" class="mr-3 text-sm font-medium text-gray-900 dark:text-gray-300 cursor-pointer flex-1">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center ml-3">
                                <span class="text-xs font-medium text-blue-600 dark:text-blue-400">${user.name.charAt(0)}</span>
                            </div>
                            <div>
                                <div class="font-medium">${user.name}</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">${user.email} - ${user.role}</div>
                            </div>
                        </div>
                    </label>
                </div>
            `;
        }).join('');
        
        usersList.innerHTML = usersHtml;
        updateSelectedCount();
    }

    // تبديل اختيار المستخدم
    window.toggleUserSelection = function(userId, userName, userEmail, isChecked) {
        const user = { id: userId, name: userName, email: userEmail };
        
        if (isChecked) {
            if (!selectedUsers.some(selected => selected.id === userId)) {
                selectedUsers.push(user);
            }
        } else {
            selectedUsers = selectedUsers.filter(selected => selected.id !== userId);
        }
        
        updateSelectedCount();
    };

    // تحديث عداد المستخدمين
    function updateSelectedCount() {
        if (selectedCountSpan) {
            selectedCountSpan.textContent = `عدد المحددين: ${selectedUsers.length}`;
        }
    }

    // البحث في المستخدمين
    if (userSearch) {
        userSearch.addEventListener('input', function() {
            const query = this.value.trim().toLowerCase();
            
            if (query.length === 0) {
                displayUsers(allUsers);
                return;
            }
            
            const filteredUsers = allUsers.filter(user => 
                user.name.toLowerCase().includes(query) || 
                user.email.toLowerCase().includes(query)
            );
            displayUsers(filteredUsers);
        });
    }

    // معالجة إرسال النموذج
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            if (!validateForm()) {
                return;
            }
            
            submitForm();
        });
    }

    // التحقق من صحة النموذج
    function validateForm() {
        let isValid = true;
        
        // إزالة الأخطاء السابقة
        clearErrors();
        
        // التحقق من العنوان
        const title = document.getElementById('title').value.trim();
        if (!title) {
            showError('title', 'عنوان المسابقة مطلوب');
            isValid = false;
        }
        
        // التحقق من الوصف
        const description = document.getElementById('description').value.trim();
        if (!description) {
            showError('description', 'وصف المسابقة مطلوب');
            isValid = false;
        }
        
        // التحقق من فئات المشاركين
        if (selectedParticipantTypes.length === 0) {
            showError('participant_types', 'يجب اختيار فئة واحدة على الأقل من المشاركين');
            isValid = false;
        }
        
        // التحقق من المستخدمين المحددين (فقط إذا تم اختيار "أشخاص محددين")
        if (selectedParticipantTypes.includes('specific_users')) {
            if (selectedUsers.length === 0) {
                showError('specific_users', 'يجب اختيار مستخدم واحد على الأقل');
                isValid = false;
            }
        }
        
        // التحقق من تاريخ الانتهاء
        const hasEndDate = document.querySelector('input[name="has_end_date"]:checked').value === '1';
        if (hasEndDate) {
            const endDate = document.getElementById('end_date').value;
            if (!endDate) {
                showError('end_date', 'تاريخ الانتهاء مطلوب');
                isValid = false;
            } else {
                const startDate = document.getElementById('start_date').value;
                if (startDate && new Date(endDate) <= new Date(startDate)) {
                    showError('end_date', 'تاريخ الانتهاء يجب أن يكون بعد تاريخ البدء');
                    isValid = false;
                }
            }
        }
        
        return isValid;
    }

    // إرسال النموذج
    function submitForm() {
        const formData = new FormData();
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
        
        // البيانات الأساسية
        formData.append('_token', csrfToken || '');
        formData.append('title', document.getElementById('title').value.trim());
        formData.append('description', document.getElementById('description').value.trim());
        formData.append('status', document.getElementById('status').value);
        
        // الشروط
        const terms = [];
        document.querySelectorAll('textarea[name="terms[]"]').forEach(textarea => {
            const value = textarea.value.trim();
            if (value) {
                terms.push(value);
            }
        });
        // إرسال الشروط كـ array منفصل
        terms.forEach((term, index) => {
            formData.append(`terms[${index}]`, term);
        });
        
        // فئات المشاركين
        selectedParticipantTypes.forEach(type => {
            formData.append('participant_types[]', type);
        });
        
        // المستخدمين المحددين (فقط إذا تم اختيار "أشخاص محددين")
        if (selectedParticipantTypes.includes('specific_users') && selectedUsers.length > 0) {
            selectedUsers.forEach(user => {
                formData.append('specific_users[]', user.id);
            });
        }
        
        // تواريخ البدء والانتهاء
        const startDate = document.getElementById('start_date').value;
        if (startDate) {
            formData.append('start_date', startDate);
        }
        
        const hasEndDate = document.querySelector('input[name="has_end_date"]:checked').value === '1';
        formData.append('has_end_date', hasEndDate ? '1' : '0');
        
        if (hasEndDate) {
            const endDate = document.getElementById('end_date').value;
            if (endDate) {
                formData.append('end_date', endDate);
            }
        }
        
        // تعطيل الزر وإظهار مؤشر التحميل
        setLoading(true);
        
        fetch('{{ route("superadmin.competitions.store") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                showAlert('نجح', data.message, 'success');
                setTimeout(() => {
                    window.location.href = '{{ route("superadmin.competitions.index") }}';
                }, 1500);
            } else {
                if (data.errors) {
                    Object.keys(data.errors).forEach(field => {
                        showError(field, data.errors[field][0]);
                    });
                }
                showAlert('خطأ', data.message, 'error');
            }
        })
        .catch(error => {
            console.error('خطأ في الإرسال:', error);
            showAlert('خطأ', 'حدث خطأ أثناء إرسال البيانات', 'error');
        })
        .finally(() => {
            setLoading(false);
        });
    }

    // دوال مساعدة
    function setLoading(loading) {
        if (submitBtn && submitText && loadingIndicator) {
            if (loading) {
                submitBtn.disabled = true;
                submitText.textContent = 'جار المعالجة...';
                loadingIndicator.classList.remove('hidden');
            } else {
                submitBtn.disabled = false;
                submitText.textContent = 'إنشاء المسابقة';
                loadingIndicator.classList.add('hidden');
            }
        }
    }

    function showError(field, message) {
        const errorDiv = document.getElementById(`${field}-error`);
        if (errorDiv) {
            errorDiv.textContent = message;
            errorDiv.classList.remove('hidden');
        }
        
        const input = document.getElementById(field) || document.querySelector(`[name="${field}"]`);
        if (input) {
            input.classList.add('border-red-500');
        }
    }

    function hideError(field) {
        const errorDiv = document.getElementById(`${field}-error`);
        if (errorDiv) {
            errorDiv.classList.add('hidden');
        }
        
        const input = document.getElementById(field) || document.querySelector(`[name="${field}"]`);
        if (input) {
            input.classList.remove('border-red-500');
        }
    }

    function clearErrors() {
        document.querySelectorAll('[id$="-error"]').forEach(errorDiv => {
            errorDiv.classList.add('hidden');
        });
        
        document.querySelectorAll('.border-red-500').forEach(input => {
            input.classList.remove('border-red-500');
        });
    }

    function showAlert(title, message, type) {
        // إزالة التنبيهات السابقة
        document.querySelectorAll('.competition-alert').forEach(alert => {
            alert.remove();
        });

        const alertDiv = document.createElement('div');
        alertDiv.className = `competition-alert fixed top-4 right-4 z-[10000] p-4 rounded-lg shadow-lg max-w-md transition-all duration-300 ${
            type === 'success' ? 'bg-green-100 text-green-800 border border-green-200' :
            type === 'error' ? 'bg-red-100 text-red-800 border border-red-200' :
            'bg-blue-100 text-blue-800 border border-blue-200'
        }`;
        alertDiv.innerHTML = `
            <div class="flex items-center">
                <div class="flex-1">
                    <h4 class="font-semibold">${title}</h4>
                    <p class="text-sm">${message}</p>
                </div>
                <button type="button" class="mr-2 text-gray-500 hover:text-gray-700" onclick="this.parentElement.parentElement.remove()">
                    <svg class="w-4 h-4" 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>
                </button>
            </div>
        `;
        
        document.body.appendChild(alertDiv);
        
        // إزالة تلقائية بعد 5 ثواني
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.style.transform = 'translateX(100%)';
                alertDiv.style.opacity = '0';
                setTimeout(() => {
                    alertDiv.remove();
                }, 300);
            }
        }, 5000);
    }
});
</script>

@endsection