@extends($layout)

@section('title', 'أنشطتي')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-pink-50 px-4 sm:px-6 lg:px-8 py-8">
    <div class="max-w-7xl mx-auto">
        
        <!-- Header -->
        <div class="mb-8">
            <h1 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-2">أنشطتي</h1>
            <p class="text-gray-600">تتبع جميع الأنشطة التي تشارك فيها</p>
        </div>

        <!-- Stats Cards -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6 mb-8">
            <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl p-6 text-white shadow-xl transform hover:scale-105 transition-all duration-300">
                <div class="flex items-center gap-4">
                    <svg class="w-12 h-12 opacity-80" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"/>
                    </svg>
                    <div>
                        <p class="text-4xl font-bold">{{ $stats['total'] }}</p>
                        <p class="text-sm opacity-90">إجمالي الأنشطة</p>
                    </div>
                </div>
            </div>

            <div class="bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl p-6 text-white shadow-xl transform hover:scale-105 transition-all duration-300">
                <div class="flex items-center gap-4">
                    <svg class="w-12 h-12 opacity-80" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
                    </svg>
                    <div>
                        <p class="text-4xl font-bold">{{ $stats['confirmed'] }}</p>
                        <p class="text-sm opacity-90">مؤكدة</p>
                    </div>
                </div>
            </div>

            <div class="bg-gradient-to-br from-yellow-500 to-orange-500 rounded-2xl p-6 text-white shadow-xl transform hover:scale-105 transition-all duration-300">
                <div class="flex items-center gap-4">
                    <svg class="w-12 h-12 opacity-80" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
                    </svg>
                    <div>
                        <p class="text-4xl font-bold">{{ $stats['pending'] }}</p>
                        <p class="text-sm opacity-90">قيد الانتظار</p>
                    </div>
                </div>
            </div>

            <div class="bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl p-6 text-white shadow-xl transform hover:scale-105 transition-all duration-300">
                <div class="flex items-center gap-4">
                    <svg class="w-12 h-12 opacity-80" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
                    </svg>
                    <div>
                        <p class="text-4xl font-bold">{{ $stats['total_points'] }}</p>
                        <p class="text-sm opacity-90">إجمالي النقاط</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="bg-white rounded-2xl shadow-lg p-6 mb-8">
            <form method="GET" class="flex flex-col lg:flex-row gap-4">
                <div class="flex-1">
                    <label class="block text-sm font-medium text-gray-700 mb-2">الحالة</label>
                    <select name="status" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
                        <option value="">جميع الحالات</option>
                        <option value="invited" {{ request('status') == 'invited' ? 'selected' : '' }}>مدعو</option>
                        <option value="confirmed" {{ request('status') == 'confirmed' ? 'selected' : '' }}>مؤكد</option>
                        <option value="absent_with_excuse" {{ request('status') == 'absent_with_excuse' ? 'selected' : '' }}>غياب بعذر</option>
                        <option value="absent_no_excuse" {{ request('status') == 'absent_no_excuse' ? 'selected' : '' }}>غياب بدون عذر</option>
                    </select>
                </div>

                <div class="flex-1">
                    <label class="block text-sm font-medium text-gray-700 mb-2">من تاريخ</label>
                    <input type="date" name="date_from" value="{{ request('date_from') }}" 
                           class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
                </div>

                <div class="flex items-end gap-2">
                    <button type="submit" class="px-8 py-3 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white rounded-xl font-medium transition-all duration-300 shadow-lg hover:shadow-xl flex items-center gap-2">
                        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                        بحث
                    </button>
                    <a href="{{ route('live-activities.my-activities') }}" class="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl font-medium transition-all duration-300">
                        إعادة تعيين
                    </a>
                </div>
            </form>
        </div>

        <!-- Activities List -->
        <div class="space-y-4">
            @forelse($activities as $participation)
            <div class="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden border border-gray-100">
                <div class="p-6">
                    <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
                        
                        <!-- Activity Info -->
                        <div class="flex-1">
                            <div class="flex items-start gap-4">
                                <!-- Icon -->
                                <div class="p-4 bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl">
                                    @if($participation->activity->activityType->icon === 'video')
                                    <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                                    </svg>
                                    @elseif($participation->activity->activityType->icon === 'users')
                                    <svg class="w-8 h-8 text-purple-600" 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 7a4 4 0 11-8 0 4 4 0 018 0z"/>
                                    </svg>
                                    @else
                                    <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
                                    </svg>
                                    @endif
                                </div>

                                <!-- Details -->
                                <div class="flex-1">
                                    <h3 class="text-xl font-bold text-gray-900 mb-2">{{ $participation->activity->activityType->display_name }}</h3>
                                    @if($participation->activity->title)
                                    <p class="text-gray-600 mb-3">{{ $participation->activity->title }}</p>
                                    @endif
                                    
                                    <div class="flex flex-wrap gap-4 text-sm">
                                        <div class="flex items-center gap-2 text-gray-700">
                                            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                            </svg>
                                            <span class="font-medium">{{ $participation->activity->scheduled_date->format('Y-m-d') }}</span>
                                        </div>

                                        <div class="flex items-center gap-2 text-gray-700">
                                            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                            </svg>
                                            <span class="font-medium">{{ date('h:i A', strtotime($participation->activity->scheduled_time)) }}</span>
                                        </div>

                                        <div class="flex items-center gap-2 text-gray-700">
                                            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                            </svg>
                                            <span class="font-medium">{{ $participation->activity->duration }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Status & Actions -->
                        <div class="flex flex-col items-end gap-3">
                            <!-- Status Badge -->
                            <span class="px-4 py-2 rounded-xl text-sm font-bold
                                @if($participation->status === 'confirmed') bg-green-100 text-green-700
                                @elseif($participation->status === 'invited') bg-blue-100 text-blue-700
                                @elseif($participation->status === 'absent_with_excuse') bg-yellow-100 text-yellow-700
                                @elseif($participation->status === 'proof_rejected') bg-orange-100 text-orange-700
                                @else bg-red-100 text-red-700
                                @endif">
                                {{ $participation->status_label }}
                            </span>

                            <!-- Points Badge -->
                            @if($participation->total_points > 0)
                            <div class="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-yellow-50 to-orange-50 rounded-xl">
                                <svg class="w-5 h-5 text-yellow-600" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
                                </svg>
                                <span class="font-bold text-gray-900">{{ $participation->total_points }} نقطة</span>
                            </div>
                            @endif

                            <!-- Action Buttons -->
                            <div class="flex gap-2">
                                @if($participation->canSubmitProof())
                                <button onclick="openUploadProofModal({{ $participation->id }})" 
                                        class="px-4 py-2 bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white rounded-xl font-medium transition-all duration-300 shadow-md hover:shadow-lg flex items-center gap-2">
                                    <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="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"/>
                                    </svg>
                                    رفع إثبات
                                </button>
                                @endif

                                @if($participation->canSubmitExcuse())
                                <button onclick="openExcuseModal({{ $participation->id }})" 
                                        class="px-4 py-2 bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-700 hover:to-red-700 text-white rounded-xl font-medium transition-all duration-300 shadow-md hover:shadow-lg flex items-center gap-2">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                    </svg>
                                    تقديم عذر
                                </button>
                                @endif

                                <a href="{{ route('live-activities.show', $participation->activity) }}" 
                                   class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl font-medium transition-all duration-300 flex items-center gap-2">
                                    <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                        <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"/>
                                    </svg>
                                    التفاصيل
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Moderator Notes -->
                    @if($participation->moderator_notes)
                    <div class="mt-4 p-4 bg-blue-50 rounded-xl border border-blue-200">
                        <div class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <div class="flex-1">
                                <p class="font-medium text-blue-900 mb-1">ملاحظات المشرف:</p>
                                <p class="text-blue-800">{{ $participation->moderator_notes }}</p>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
            @empty
            <div class="bg-white rounded-2xl shadow-lg p-12 text-center">
                <div class="p-6 bg-gray-100 rounded-full inline-block mb-4">
                    <svg class="w-16 h-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                    </svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">لا توجد أنشطة</h3>
                <p class="text-gray-600">لم تشارك في أي نشاط حتى الآن</p>
            </div>
            @endforelse
        </div>

        <!-- Pagination -->
        @if($activities->hasPages())
        <div class="mt-8">
            {{ $activities->links() }}
        </div>
        @endif

    </div>
</div>

<!-- Upload Proof Modal -->
<div id="uploadProofModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-2xl w-full p-8 shadow-2xl">
        <h3 class="text-2xl font-bold text-gray-900 mb-6">رفع إثبات الحضور</h3>
        
        <form id="uploadProofForm" enctype="multipart/form-data">
            @csrf
            <input type="hidden" id="participant_id" name="participant_id">
            
            <!-- Custom File Upload -->
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-3">صورة الإثبات *</label>
                
                <!-- Hidden File Input -->
                <input type="file" 
                       id="proof_file_input" 
                       name="proof_file" 
                       accept="image/*" 
                       required
                       class="hidden">
                
                <!-- Custom Upload Area -->
                <div id="upload_area" class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all duration-300">
                    <div id="upload_placeholder">
                        <svg class="w-16 h-16 mx-auto text-gray-400 mb-4" 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"/>
                        </svg>
                        <p class="text-gray-600 font-medium mb-2">اضغط لاختيار صورة</p>
                        <p class="text-gray-400 text-sm">أو اسحب الصورة وأفلتها هنا</p>
                        <p class="text-gray-400 text-xs mt-2">PNG, JPG, JPEG (حتى 2MB)</p>
                    </div>
                    
                    <!-- Image Preview -->
                    <div id="image_preview_container" class="hidden">
                        <div class="relative inline-block">
                            <img id="image_preview" src="" alt="Preview" class="max-h-64 rounded-lg shadow-lg">
                            <div class="absolute -top-3 -right-3 flex gap-2">
                                <!-- Change Image Button -->
                                <button type="button" 
                                        id="change_image_btn"
                                        class="p-2 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all duration-300 group">
                                    <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                                    </svg>
                                </button>
                                
                                <!-- Delete Image Button -->
                                <button type="button" 
                                        id="delete_image_btn"
                                        class="p-2 bg-red-600 hover:bg-red-700 text-white rounded-full shadow-lg transition-all duration-300">
                                    <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"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                        <p class="text-gray-600 text-sm mt-4 font-medium" id="file_name"></p>
                    </div>
                </div>
            </div>

            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">ملاحظات (اختياري)</label>
                <textarea name="proof_notes" rows="4" 
                          class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                          placeholder="أضف أي ملاحظات إضافية..."></textarea>
            </div>

            <div class="flex gap-3">
                <button type="submit" 
                        class="flex-1 px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white rounded-xl font-medium transition-all duration-300 shadow-lg hover:shadow-xl">
                    رفع الإثبات
                </button>
                <button type="button" onclick="closeModal('uploadProofModal')" 
                        class="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl font-medium transition-all duration-300">
                    إلغاء
                </button>
            </div>
        </form>
    </div>
</div>


<!-- Excuse Modal -->
<div id="excuseModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-2xl w-full p-8 shadow-2xl">
        <h3 class="text-2xl font-bold text-gray-900 mb-6">تقديم عذر الغياب</h3>
        
        <form id="excuseForm">
            @csrf
            <input type="hidden" id="excuse_participant_id" name="participant_id">
            
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">سبب العذر *</label>
                <textarea name="excuse_reason" rows="5" required
                          class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                          placeholder="اكتب سبب عذرك بالتفصيل..."></textarea>
            </div>

            <div class="flex gap-3">
                <button type="submit" 
                        class="flex-1 px-6 py-3 bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-700 hover:to-red-700 text-white rounded-xl font-medium transition-all duration-300 shadow-lg hover:shadow-xl">
                    تقديم العذر
                </button>
                <button type="button" onclick="closeModal('excuseModal')" 
                        class="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl font-medium transition-all duration-300">
                    إلغاء
                </button>
            </div>
        </form>
    </div>
</div>

<script>
// Global variable to store selected file
let selectedFile = null;

function openUploadProofModal(participantId) {
    document.getElementById('participant_id').value = participantId;
    document.getElementById('uploadProofModal').classList.remove('hidden');
    resetFileUpload();
}

function openExcuseModal(participantId) {
    document.getElementById('excuse_participant_id').value = participantId;
    document.getElementById('excuseModal').classList.remove('hidden');
}

function closeModal(modalId) {
    document.getElementById(modalId).classList.add('hidden');
    if(modalId === 'uploadProofModal') {
        resetFileUpload();
    }
}

// Reset file upload
function resetFileUpload() {
    selectedFile = null;
    document.getElementById('proof_file_input').value = '';
    document.getElementById('upload_placeholder').classList.remove('hidden');
    document.getElementById('image_preview_container').classList.add('hidden');
    document.getElementById('image_preview').src = '';
    document.getElementById('file_name').textContent = '';
}

// Click on upload area to trigger file input
document.getElementById('upload_area').addEventListener('click', function(e) {
    if(e.target.id !== 'change_image_btn' && e.target.id !== 'delete_image_btn' && !e.target.closest('#change_image_btn') && !e.target.closest('#delete_image_btn')) {
        document.getElementById('proof_file_input').click();
    }
});

// Handle file selection
document.getElementById('proof_file_input').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if(file) {
        // Validate file type
        if(!file.type.startsWith('image/')) {
            alert('الرجاء اختيار صورة فقط');
            return;
        }
        
        // Validate file size (2MB)
        if(file.size > 2 * 1024 * 1024) {
            alert('حجم الصورة يجب أن يكون أقل من 2 ميجابايت');
            return;
        }
        
        selectedFile = file;
        previewImage(file);
    }
});

// Preview image
function previewImage(file) {
    const reader = new FileReader();
    
    reader.onload = function(e) {
        document.getElementById('image_preview').src = e.target.result;
        document.getElementById('file_name').textContent = file.name;
        document.getElementById('upload_placeholder').classList.add('hidden');
        document.getElementById('image_preview_container').classList.remove('hidden');
    };
    
    reader.readAsDataURL(file);
}

// Change image button
document.getElementById('change_image_btn').addEventListener('click', function(e) {
    e.stopPropagation();
    document.getElementById('proof_file_input').click();
});

// Delete image button
document.getElementById('delete_image_btn').addEventListener('click', function(e) {
    e.stopPropagation();
    resetFileUpload();
});

// Drag and drop functionality
const uploadArea = document.getElementById('upload_area');

uploadArea.addEventListener('dragover', function(e) {
    e.preventDefault();
    this.classList.add('border-blue-500', 'bg-blue-50');
});

uploadArea.addEventListener('dragleave', function(e) {
    e.preventDefault();
    this.classList.remove('border-blue-500', 'bg-blue-50');
});

uploadArea.addEventListener('drop', function(e) {
    e.preventDefault();
    this.classList.remove('border-blue-500', 'bg-blue-50');
    
    const file = e.dataTransfer.files[0];
    if(file && file.type.startsWith('image/')) {
        // Set file to input
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(file);
        document.getElementById('proof_file_input').files = dataTransfer.files;
        
        selectedFile = file;
        previewImage(file);
    } else {
        alert('الرجاء اختيار صورة فقط');
    }
});

// Upload Proof Form
document.getElementById('uploadProofForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    if(!selectedFile) {
        alert('الرجاء اختيار صورة الإثبات');
        return;
    }
    
    const formData = new FormData(e.target);
    const participantId = formData.get('participant_id');
    
    try {
        const response = await fetch(`/live-activities/participants/${participantId}/upload-proof`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
            },
            body: formData
        });
        
        const result = await response.json();
        
        if(result.success) {
            alert(result.message);
            location.reload();
        } else {
            alert(result.message || 'حدث خطأ أثناء رفع الإثبات');
        }
    } catch (error) {
        alert('حدث خطأ أثناء رفع الإثبات');
        console.error(error);
    }
});

// Excuse Form
document.getElementById('excuseForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const participantId = formData.get('participant_id');
    
    try {
        const response = await fetch(`/live-activities/participants/${participantId}/submit-excuse`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                excuse_reason: formData.get('excuse_reason')
            })
        });
        
        const result = await response.json();
        
        if(result.success) {
            alert(result.message);
            location.reload();
        } else {
            alert(result.message || 'حدث خطأ أثناء تقديم العذر');
        }
    } catch (error) {
        alert('حدث خطأ أثناء تقديم العذر');
        console.error(error);
    }
});
</script>

@endsection