@extends($layout)

@section('title', 'إرسال مشاركة - ' . $competition->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">
        <!-- Breadcrumb & Back Button -->
        <div class="mb-6">
            <div class="flex items-center gap-4 mb-4">
                <a href="{{ route('general.competitions.show', $competition) }}" 
                   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>
            
            <div class="mb-4">
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">إرسال مشاركة جديدة</h1>
                <p class="text-gray-600 dark:text-gray-400">{{ $competition->title }}</p>
            </div>
        </div>

        <!-- Competition Status Check -->
        @if(!$competition->can_submit)
            <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
                <div class="flex">
                    <svg class="w-5 h-5 text-red-400 dark:text-red-300" 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 class="mr-3">
                        <h3 class="text-sm font-medium text-red-800 dark:text-red-200">لا يمكن الإرسال حالياً</h3>
                        <p class="text-sm text-red-700 dark:text-red-300 mt-1">
                            @if($competition->status !== 'active')
                                المسابقة غير نشطة حالياً
                            @elseif($competition->is_expired)
                                انتهت مدة المسابقة
                            @else
                                المسابقة غير متاحة للإرسال
                            @endif
                        </p>
                    </div>
                </div>
            </div>
        @endif

        @if($participant->status === 'disqualified')
            <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
                <div class="flex">
                    <svg class="w-5 h-5 text-red-400 dark:text-red-300" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd"></path>
                    </svg>
                    <div class="mr-3">
                        <h3 class="text-sm font-medium text-red-800 dark:text-red-200">تم استبعادك من المسابقة</h3>
                        <p class="text-sm text-red-700 dark:text-red-300 mt-1">لا يمكنك إرسال مشاركات في هذه المسابقة</p>
                    </div>
                </div>
            </div>
        @endif

        <!-- Main Content -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Submission Form -->
            <div class="lg:col-span-2">
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
                    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">معلومات المشاركة</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">أدخل تفاصيل مشاركتك في المسابقة</p>
                    </div>
                    
                    @if($competition->can_submit && $participant->status !== 'disqualified')
                        <form id="submission-form" class="p-6 space-y-6">
                            @csrf
                            
                            <!-- Description -->
                            <div>
                                <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    وصف المشاركة <span class="text-gray-500">(اختياري)</span>
                                </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-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white resize-none"
                                    maxlength="2000"></textarea>
                                <div class="flex justify-between mt-1">
                                    <span class="text-xs text-gray-500 dark:text-gray-400">اكتب وصفاً واضحاً لمشاركتك</span>
                                    <span id="char-count" class="text-xs text-gray-500 dark:text-gray-400">0/2000</span>
                                </div>
                            </div>

                            <!-- File Attachments -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    المرفقات <span class="text-gray-500">(اختياري - حد أقصى 5 ملفات)</span>
                                </label>
                                
                                <!-- File Drop Zone -->
                                <div id="file-drop-zone" 
                                     class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-colors cursor-pointer">
                                    <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                                    </svg>
                                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                                        <span class="font-medium text-blue-600 dark:text-blue-400">اضغط لاختيار الملفات</span> أو اسحب الملفات هنا
                                    </p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                        الملفات المدعومة: الصور، الفيديو، الصوت، PDF، الوثائق (حد أقصى 10 ميجا لكل ملف)
                                    </p>
                                </div>
                                
                                <input type="file" 
                                       id="attachments" 
                                       name="attachments[]" 
                                       multiple 
                                       accept="image/*,video/*,audio/*,.pdf,.doc,.docx,.txt"
                                       class="hidden">

                                <!-- Selected Files Preview -->
                                <div id="selected-files" class="mt-4 space-y-2 hidden">
                                    <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300">الملفات المحددة:</h4>
                                    <div id="files-list" class="space-y-2"></div>
                                </div>
                            </div>

                            <!-- Submit Button -->
                            <div class="flex items-center justify-between pt-4">
                                <button type="button" 
                                        onclick="window.history.back()" 
                                        class="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 rounded-lg transition duration-200">
                                    إلغاء
                                </button>
                                
                                <button type="submit" 
                                        id="submit-btn"
                                        class="px-6 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-medium rounded-lg transition duration-200 flex items-center">
                                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                                    </svg>
                                    <span id="submit-text">إرسال المشاركة</span>
                                </button>
                            </div>
                        </form>
                    @else
                        <div class="p-6 text-center">
                            <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L18.364 5.636M5.636 18.364l12.728-12.728"></path>
                            </svg>
                            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">لا يمكن الإرسال</h3>
                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                                @if(!$competition->can_submit)
                                    المسابقة غير متاحة للإرسال حالياً
                                @else
                                    تم استبعادك من هذه المسابقة
                                @endif
                            </p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Sidebar -->
            <div class="space-y-6">
                <!-- Competition Info -->
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">معلومات المسابقة</h3>
                    
                    <div class="space-y-4">
                        <div>
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">العنوان:</span>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ $competition->title }}</p>
                        </div>

                        <div>
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">الحالة:</span>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $competition->status === 'active' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200' }} mt-1 mr-2">
                                {{ $competition->status_text }}
                            </span>
                        </div>

                        @if($competition->has_end_date && $competition->end_date)
                            <div>
                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">ينتهي في:</span>
                                <p class="text-sm {{ $competition->is_expired ? 'text-red-600 dark:text-red-400' : 'text-gray-600 dark:text-gray-400' }} mt-1">
                                    {{ $competition->end_date->format('Y/m/d H:i') }}
                                    @if($competition->is_expired)
                                        <span class="font-medium">(منتهية)</span>
                                    @endif
                                </p>
                            </div>
                        @endif

                        <div>
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">حالة مشاركتك:</span>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $participant->status_badge_class }} mt-1 mr-2">
                                {{ $participant->status_text }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Guidelines -->
                <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
                    <h4 class="text-sm font-medium text-blue-900 dark:text-blue-200 mb-3">إرشادات المشاركة</h4>
                    <ul class="text-xs text-blue-800 dark:text-blue-300 space-y-2">
                        <li class="flex items-start">
                            <svg class="w-3 h-3 text-blue-500 mt-0.5 ml-1 flex-shrink-0" 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>
                            اكتب وصفاً واضحاً ومفصلاً لمشاركتك
                        </li>
                        <li class="flex items-start">
                            <svg class="w-3 h-3 text-blue-500 mt-0.5 ml-1 flex-shrink-0" 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>
                            أرفق الملفات المطلوبة بجودة عالية
                        </li>
                        <li class="flex items-start">
                            <svg class="w-3 h-3 text-blue-500 mt-0.5 ml-1 flex-shrink-0" 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>
                            تأكد من التزامك بشروط المسابقة
                        </li>
                        <li class="flex items-start">
                            <svg class="w-3 h-3 text-blue-500 mt-0.5 ml-1 flex-shrink-0" 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>
                            يمكنك إرسال عدة مشاركات
                        </li>
                    </ul>
                </div>

                <!-- Previous Submissions -->
                @if($userSubmissions->count() > 0)
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">إرسالاتك السابقة</h3>
                        
                        <div class="space-y-3">
                            @foreach($userSubmissions->take(3) as $submission)
                                <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded border">
                                    <div class="flex-1">
                                        <div class="flex items-center">
                                            <span class="text-sm font-medium text-gray-900 dark:text-white">
                                                إرسال #{{ $loop->iteration }}
                                            </span>
                                            <span class="mr-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {{ $submission->status_badge_class }}">
                                                {{ $submission->status_text }}
                                            </span>
                                        </div>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                            {{ $submission->formatted_submitted_at }}
                                        </p>
                                    </div>
                                    <a href="{{ route('general.competitions.submission.show', $submission) }}" 
                                       class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
                                        <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="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>
                                </div>
                            @endforeach
                            
                            @if($userSubmissions->count() > 3)
                                <div class="text-center">
                                    <a href="{{ route('general.competitions.show', $competition) }}" 
                                       class="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
                                        عرض جميع الإرسالات ({{ $userSubmissions->count() }})
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Loading Modal -->
<div id="loading-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
        <div class="mt-3 text-center">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900">
                <svg class="animate-spin h-6 w-6 text-blue-600 dark:text-blue-400" 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>
            </div>
            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white mt-4">جاري الإرسال...</h3>
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500 dark:text-gray-400">يتم رفع المشاركة والملفات، يرجى الانتظار</p>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('submission-form');
    const submitBtn = document.getElementById('submit-btn');
    const submitText = document.getElementById('submit-text');
    const loadingModal = document.getElementById('loading-modal');
    const descriptionTextarea = document.getElementById('description');
    const charCount = document.getElementById('char-count');
    const fileInput = document.getElementById('attachments');
    const dropZone = document.getElementById('file-drop-zone');
    const selectedFiles = document.getElementById('selected-files');
    const filesList = document.getElementById('files-list');
    
    let selectedFilesArray = [];
    
    // Character count for description
    if (descriptionTextarea && charCount) {
        descriptionTextarea.addEventListener('input', function() {
            const length = this.value.length;
            charCount.textContent = `${length}/2000`;
            
            if (length > 1900) {
                charCount.classList.add('text-orange-500');
            } else if (length > 2000) {
                charCount.classList.add('text-red-500');
            } else {
                charCount.classList.remove('text-orange-500', 'text-red-500');
            }
        });
    }
    
    // File handling
    if (dropZone && fileInput) {
        // Click to open file dialog
        dropZone.addEventListener('click', () => fileInput.click());
        
        // Drag and drop
        dropZone.addEventListener('dragover', function(e) {
            e.preventDefault();
            this.classList.add('border-blue-400', 'bg-blue-50', 'dark:bg-blue-900/10');
        });
        
        dropZone.addEventListener('dragleave', function(e) {
            e.preventDefault();
            this.classList.remove('border-blue-400', 'bg-blue-50', 'dark:bg-blue-900/10');
        });
        
        dropZone.addEventListener('drop', function(e) {
            e.preventDefault();
            this.classList.remove('border-blue-400', 'bg-blue-50', 'dark:bg-blue-900/10');
            
            const files = Array.from(e.dataTransfer.files);
            handleFiles(files);
        });
        
        fileInput.addEventListener('change', function(e) {
            const files = Array.from(e.target.files);
            handleFiles(files);
        });
    }
    
    function handleFiles(files) {
        // Check file count limit
        const totalFiles = selectedFilesArray.length + files.length;
        if (totalFiles > 5) {
            showAlert('error', 'لا يمكن رفع أكثر من 5 ملفات');
            return;
        }
        
        files.forEach(file => {
            // Check file size (10MB)
            if (file.size > 10 * 1024 * 1024) {
                showAlert('error', `الملف ${file.name} أكبر من 10 ميجابايت`);
                return;
            }
            
            // Check file type
            const allowedTypes = [
                'image/jpeg', 'image/png', 'image/gif', 'image/jpg',
                'video/mp4', 'video/avi',
                'audio/mp3', 'audio/wav',
                'application/pdf',
                'application/msword',
                'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                'text/plain'
            ];
            
            if (!allowedTypes.includes(file.type)) {
                showAlert('error', `نوع الملف ${file.name} غير مدعوم`);
                return;
            }
            
            selectedFilesArray.push(file);
            addFileToList(file);
        });
        
        updateFilesDisplay();
    }
    
    function addFileToList(file) {
        const fileDiv = document.createElement('div');
        fileDiv.className = 'flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded border';
        fileDiv.dataset.fileName = file.name;
        
        const fileInfo = document.createElement('div');
        fileInfo.className = 'flex-1';
        
        const fileName = document.createElement('p');
        fileName.className = 'text-sm font-medium text-gray-900 dark:text-white';
        fileName.textContent = file.name;
        
        const fileSize = document.createElement('p');
        fileSize.className = 'text-xs text-gray-500 dark:text-gray-400';
        fileSize.textContent = formatFileSize(file.size);
        
        fileInfo.appendChild(fileName);
        fileInfo.appendChild(fileSize);
        
        const removeBtn = document.createElement('button');
        removeBtn.type = 'button';
        removeBtn.className = 'text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300';
        removeBtn.innerHTML = '<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>';
        
        removeBtn.addEventListener('click', function() {
            removeFile(file.name);
        });
        
        fileDiv.appendChild(fileInfo);
        fileDiv.appendChild(removeBtn);
        filesList.appendChild(fileDiv);
    }
    
    function removeFile(fileName) {
        selectedFilesArray = selectedFilesArray.filter(file => file.name !== fileName);
        const fileDiv = filesList.querySelector(`[data-file-name="${fileName}"]`);
        if (fileDiv) {
            fileDiv.remove();
        }
        updateFilesDisplay();
    }
    
    function updateFilesDisplay() {
        if (selectedFilesArray.length > 0) {
            selectedFiles.classList.remove('hidden');
        } else {
            selectedFiles.classList.add('hidden');
        }
    }
    
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
    
    function showAlert(type, message) {
        // Create alert element
        const alert = document.createElement('div');
        alert.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg ${
            type === 'error' ? 'bg-red-100 border border-red-400 text-red-700' : 
            type === 'success' ? 'bg-green-100 border border-green-400 text-green-700' :
            'bg-blue-100 border border-blue-400 text-blue-700'
        }`;
        
        alert.innerHTML = `
            <div class="flex items-center">
                <svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20">
                    ${type === 'error' ? 
                        '<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>' :
                        '<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>${message}</span>
                <button onclick="this.parentElement.parentElement.remove()" class="mr-2 text-lg">&times;</button>
            </div>
        `;
        
        document.body.appendChild(alert);
        setTimeout(() => alert.remove(), 5000);
    }
    
    // Form submission
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            if (submitBtn.disabled) return;
            
            // Show loading state
            submitBtn.disabled = true;
            submitText.textContent = 'جاري الإرسال...';
            loadingModal.classList.remove('hidden');
            
            // Create FormData
            const formData = new FormData();
            formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
            formData.append('description', descriptionTextarea.value);
            
            // Add files
            selectedFilesArray.forEach((file, index) => {
                formData.append(`attachments[${index}]`, file);
            });
            
            // Submit form
            fetch('{{ route("general.competitions.submit.store", $competition) }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                loadingModal.classList.add('hidden');
                
                if (data.success) {
                    showAlert('success', data.message);
                    
                    // Reset form
                    form.reset();
                    selectedFilesArray = [];
                    filesList.innerHTML = '';
                    selectedFiles.classList.add('hidden');
                    charCount.textContent = '0/2000';
                    
                    // Redirect after delay
                    setTimeout(() => {
                        window.location.href = '{{ route("general.competitions.show", $competition) }}';
                    }, 2000);
                } else {
                    showAlert('error', data.message || 'حدث خطأ أثناء الإرسال');
                    
                    // Handle validation errors
                    if (data.errors) {
                        Object.keys(data.errors).forEach(key => {
                            data.errors[key].forEach(error => {
                                showAlert('error', error);
                            });
                        });
                    }
                }
            })
            .catch(error => {
                console.error('Error:', error);
                loadingModal.classList.add('hidden');
                showAlert('error', 'حدث خطأ في الاتصال، يرجى المحاولة مرة أخرى');
            })
            .finally(() => {
                submitBtn.disabled = false;
                submitText.textContent = 'إرسال المشاركة';
            });
        });
    }
});
</script>

@endsection