@extends('layouts.moderator')

@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('moderator.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-2 lg:grid-cols-4 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('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>
    <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">سيتم عرض الأعضاء من نفس الجنس فقط</p>
    
    <!-- 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>
    
    <!-- Selected users counter -->
    <div class="mb-4">
        <span id="selected-count" class="text-sm font-medium text-gray-600 dark:text-gray-400">عدد المحددين: 0</span>
    </div>
    
    <!-- Users list -->
    <div id="users-list" class="space-y-2 max-h-60 overflow-y-auto">
        <!-- Users will be populated here -->
    </div>
    
    <div id="specific_users-error" class="text-red-500 text-sm mt-1 hidden"></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="draft">مسودة (لن يتم تفعيلها)</option>
                        <option value="active">نشطة (سيتم تفعيلها فوراً)</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('moderator.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 = '';
        }
    };

    // جلب جميع المستخدمين الأعضاء من نفس الجنس
// Update this function
async function fetchAllUsers() {
    try {
        // Make sure we're sending the correct data format
        const response = await fetch(`/moderator/competitions/ajax/users-by-roles?roles[]=${selectedParticipantTypes.join('&roles[]=')}`, {
            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;
        
        // Create user selection UI
        const userSelectionDiv = document.getElementById('userSelectionDiv');
        userSelectionDiv.innerHTML = `
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                اختر المشاركين المحددين <span class="text-red-500">*</span>
            </label>
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">سيتم عرض الأعضاء من نفس الجنس فقط</p>
            
            <!-- 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>
            
            <!-- Selected users counter -->
            <div class="mb-4">
                <span id="selected-count" class="text-sm font-medium text-gray-600 dark:text-gray-400">عدد المحددين: 0</span>
            </div>
            
            <!-- Users list -->
            <div id="users-list" class="space-y-2 max-h-60 overflow-y-auto">
            </div>
        `;
        
        displayUsers(users);
        
        // Re-initialize the search functionality
        const userSearch = document.getElementById('user-search');
        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);
            });
        }
        
    } catch (error) {
        console.error('خطأ في جلب المستخدمين:', error);
        const usersList = document.getElementById('users-list');
        if (usersList) {
            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();
        });
    }

    // التحقق من صحة النموذج
  // في دالة validateForm
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;
        }
    }
    // Add CSRF token to all fetch POST requests
function postData(url, data = {}) {
    return fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify(data)
    });
}
    // التحقق من تاريخ الانتهاء (تجنب الخطأ إذا لم يكن العنصر موجودًا)
    const hasEndDateEl = document.querySelector('input[name="has_end_date"]:checked');
    if (hasEndDateEl) {
        const hasEndDate = hasEndDateEl.value === '1';
        if (hasEndDate) {
            const endDateEl = document.getElementById('end_date');
            if (endDateEl) {
                const endDate = endDateEl.value;
                if (!endDate) {
                    showError('end_date', 'تاريخ الانتهاء مطلوب');
                    isValid = false;
                } else {
                    const startDateEl = document.getElementById('start_date');
                    if (startDateEl && startDateEl.value && new Date(endDate) <= new Date(startDateEl.value)) {
                        showError('end_date', 'تاريخ الانتهاء يجب أن يكون بعد تاريخ البدء');
                        isValid = false;
                    }
                }
            }
        }
    }
    
    return isValid;
}

    // إرسال النموذج
  // في دالة submitForm
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);
        }
    });
    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 startDateEl = document.getElementById('start_date');
    if (startDateEl && startDateEl.value) {
        formData.append('start_date', startDateEl.value);
    }
    
    // Always include has_end_date regardless of whether the element exists
    const hasEndDateEl = document.querySelector('input[name="has_end_date"]:checked');
    formData.append('has_end_date', hasEndDateEl ? (hasEndDateEl.value === '1' ? '1' : '0') : '0');
    
    const endDateEl = document.getElementById('end_date');
    if (endDateEl && endDateEl.value) {
        formData.append('end_date', endDateEl.value);
    }
    
    // تعطيل الزر وإظهار مؤشر التحميل
    setLoading(true);
    
    // Log the form data for debugging
    console.log('Submitting form data:');
    for (let pair of formData.entries()) {
        console.log(pair[0] + ': ' + pair[1]);
    }
    
    fetch('{{ route("moderator.competitions.store") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => {
        if (!response.ok) {
            return response.json().then(data => {
                throw new Error(data.message || `HTTP error! status: ${response.status}`);
            });
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            showAlert('نجح', data.message, 'success');
            setTimeout(() => {
                window.location.href = '{{ route("moderator.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.message || 'حدث خطأ أثناء إرسال البيانات', '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 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