{{-- Partial: Participant Card Component --}}
{{-- Path: resources/views/general/live-activities/partials/participant-card.blade.php --}}

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition p-6 border border-gray-200 dark:border-gray-700">
    
    <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
        
        {{-- Activity Info --}}
        <div class="flex-1">
            <div class="flex items-start gap-3 mb-3">
                <span class="text-3xl">{{ $participant->activity->activityType->icon ?? '📅' }}</span>
                <div>
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white">
                        {{ $participant->activity->activityType->display_name }}
                    </h3>
                    @if($participant->activity->title)
                        <p class="text-sm text-gray-600 dark:text-gray-400">{{ $participant->activity->title }}</p>
                    @endif
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4 text-sm">
                <div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                    <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="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>{{ $participant->activity->scheduled_date->format('Y/m/d') }}</span>
                </div>
                <div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                    <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span>{{ $participant->activity->scheduled_time->format('H:i') }}</span>
                </div>
            </div>

            @if($participant->moderator_notes)
                <div class="mt-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
                    <p class="text-sm text-blue-800 dark:text-blue-200">
                        <strong>ملاحظات:</strong> {{ $participant->moderator_notes }}
                    </p>
                </div>
            @endif
        </div>

        {{-- Status & Actions --}}
        <div class="flex flex-col items-end gap-3">
            @include('general.live-activities.partials.status-badge', ['status' => $participant->status])
            
            @if($participant->total_points != 0)
                <div class="flex items-center gap-2 px-3 py-2 bg-gradient-to-r from-blue-50 to-blue-100 dark:from-blue-900/30 dark:to-blue-800/30 rounded-lg">
                    <svg class="w-5 h-5 text-blue-600" 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"/>
                    </svg>
                    <span class="font-bold text-blue-900 dark:text-blue-100">
                        {{ $participant->total_points > 0 ? '+' : '' }}{{ $participant->total_points }}
                    </span>
                </div>
            @endif

            {{-- Action Buttons --}}
            @if($participant->canSubmitProof())
                <button onclick="openProofModal({{ $participant->id }})" 
                        class="w-full px-4 py-2 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700 transition">
                    رفع إثبات
                </button>
            @endif

            @if($participant->canSubmitExcuse())
                <button onclick="openExcuseModal({{ $participant->id }})" 
                        class="w-full px-4 py-2 bg-yellow-600 text-white text-sm rounded-lg hover:bg-yellow-700 transition">
                    تقديم عذر
                </button>
            @endif

            <a href="{{ route('live-activities.show', $participant->activity) }}" 
               class="w-full px-4 py-2 bg-blue-600 text-white text-sm text-center rounded-lg hover:bg-blue-700 transition">
                عرض التفاصيل
            </a>
        </div>
    </div>
</div>