@php
    $isArabic = app()->getLocale() === 'ar';
    $campaign = $card['model'];
    $candidateGroups = $card['candidateGroups'];
    $selectedVotes = collect($card['selectedVotes'] ?? [])->map(fn ($id) => (int) $id);
    $results = $card['results'] ?? null;
    $eligibleClasses = $card['eligibleClasses'] ?? collect();
    $scopeLabel = match ($campaign->scope_type) {
        'school_class' => $isArabic ? 'على مستوى الفصل' : 'Class level',
        'grade' => $isArabic ? 'على مستوى الصف الدراسي' : 'Grade level',
        'stage' => $isArabic ? 'على مستوى المرحلة' : 'Stage level',
        default => '—',
    };
    $statusLabel = match ($campaign->status) {
        'draft' => $isArabic ? 'مسودة' : 'Draft',
        'scheduled' => $isArabic ? 'مجدول' : 'Scheduled',
        'active' => $isArabic ? 'نشط' : 'Active',
        'closed' => $isArabic ? 'مغلق' : 'Closed',
        default => $campaign->status,
    };
    $maleGroups = $candidateGroups['male'] ?? [];
    $femaleGroups = $candidateGroups['female'] ?? [];
@endphp

<article class="rounded-[1.8rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
    <div class="flex flex-col gap-5 xl:flex-row xl:items-start xl:justify-between">
        <div class="min-w-0 flex-1">
            <div class="flex flex-wrap items-center gap-2">
                <span class="rounded-full bg-blue-100 px-3 py-1 text-xs font-black text-blue-700 dark:bg-blue-500/10 dark:text-blue-300">{{ $scopeLabel }}</span>
                <span class="rounded-full bg-zinc-100 px-3 py-1 text-xs font-black text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">{{ $statusLabel }}</span>
                <span class="rounded-full bg-emerald-100 px-3 py-1 text-xs font-black text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300">
                    {{ $campaign->max_votes_per_gender }} {{ $isArabic ? 'اختيار/جنس' : 'pick(s)/gender' }}
                </span>
            </div>
            <h2 class="mt-4 text-2xl font-black text-zinc-900 dark:text-white">{{ $campaign->title }}</h2>
            @if($campaign->description)
                <p class="mt-3 text-sm leading-7 text-zinc-500 dark:text-zinc-400">{{ $campaign->description }}</p>
            @endif
            <div class="mt-4 grid gap-3 md:grid-cols-3">
                <div class="rounded-2xl bg-zinc-50 px-4 py-3 dark:bg-zinc-800/70">
                    <div class="text-[11px] font-black uppercase tracking-[0.22em] text-zinc-400">{{ $isArabic ? 'فترة التصويت' : 'Voting window' }}</div>
                    <div class="mt-2 text-sm font-black text-zinc-900 dark:text-white">{{ $campaign->starts_at?->format('Y-m-d H:i') }} → {{ $campaign->ends_at?->format('Y-m-d H:i') }}</div>
                </div>
                <div class="rounded-2xl bg-zinc-50 px-4 py-3 dark:bg-zinc-800/70">
                    <div class="text-[11px] font-black uppercase tracking-[0.22em] text-zinc-400">{{ $isArabic ? 'الفئات المسموح لها' : 'Voting audience' }}</div>
                    <div class="mt-2 text-sm font-black text-zinc-900 dark:text-white">
                        {{ collect([
                            $campaign->allow_students ? ($isArabic ? 'طلاب' : 'Students') : null,
                            $campaign->allow_teachers ? ($isArabic ? 'معلمون' : 'Teachers') : null,
                        ])->filter()->join(' / ') }}
                    </div>
                </div>
                <div class="rounded-2xl bg-zinc-50 px-4 py-3 dark:bg-zinc-800/70">
                    <div class="text-[11px] font-black uppercase tracking-[0.22em] text-zinc-400">{{ $isArabic ? 'الفصول المشمولة' : 'Included classes' }}</div>
                    <div class="mt-2 text-sm font-black text-zinc-900 dark:text-white">{{ $eligibleClasses->pluck('name')->join('، ') ?: '—' }}</div>
                </div>
            </div>
        </div>

        <div class="w-full xl:max-w-[26rem]">
            <form action="{{ route($routePrefix . '.ideal-student-votes.store', $campaign) }}" method="POST" class="space-y-4 rounded-[1.6rem] border border-zinc-200 p-5 dark:border-zinc-800">
                @csrf
                @if($campaign->allow_male_candidates)
                    <div>
                        <label class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'اختيارات البنين' : 'Male selections' }}</label>
                        <select name="male_candidate_ids[]" multiple size="6" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white">
                            @foreach($maleGroups as $className => $students)
                                <optgroup label="{{ $className }}">
                                    @foreach($students as $student)
                                        <option value="{{ $student['id'] }}" @selected($selectedVotes->contains($student['id']))>{{ $student['name'] }}</option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                        </select>
                        <p class="mt-2 text-xs text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'يمكنك اختيار حتى' : 'You can select up to' }} {{ $campaign->max_votes_per_gender }} {{ $isArabic ? 'طالب/طلاب.' : 'student(s).' }}</p>
                    </div>
                @endif

                @if($campaign->allow_female_candidates)
                    <div>
                        <label class="mb-2 block text-sm font-black text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'اختيارات البنات' : 'Female selections' }}</label>
                        <select name="female_candidate_ids[]" multiple size="6" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white">
                            @foreach($femaleGroups as $className => $students)
                                <optgroup label="{{ $className }}">
                                    @foreach($students as $student)
                                        <option value="{{ $student['id'] }}" @selected($selectedVotes->contains($student['id']))>{{ $student['name'] }}</option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                        </select>
                        <p class="mt-2 text-xs text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'يمكنك اختيار حتى' : 'You can select up to' }} {{ $campaign->max_votes_per_gender }} {{ $isArabic ? 'طالبة/طالبات.' : 'student(s).' }}</p>
                    </div>
                @endif

                <button type="submit" @disabled(! $campaign->isOpen()) class="inline-flex w-full items-center justify-center rounded-2xl bg-brand-600 px-5 py-3 text-sm font-black text-white disabled:cursor-not-allowed disabled:opacity-50">
                    {{ $campaign->isOpen() ? ($isArabic ? 'حفظ التصويت' : 'Save vote') : ($isArabic ? 'التصويت مغلق حاليًا' : 'Voting is closed') }}
                </button>
            </form>
        </div>
    </div>

    @if($results)
        <div class="mt-6 grid gap-4 lg:grid-cols-2">
            <section class="rounded-[1.5rem] border border-zinc-200 p-5 dark:border-zinc-800">
                <h3 class="text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'نتائج البنين' : 'Male results' }}</h3>
                <div class="mt-4 space-y-3">
                    @forelse($results['male'] as $row)
                        <div class="flex items-center justify-between gap-4 rounded-2xl bg-zinc-50 px-4 py-3 dark:bg-zinc-800/70">
                            <div>
                                <div class="font-black text-zinc-900 dark:text-white">{{ $row['candidate_name'] }}</div>
                                <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $row['grade_name'] }} / {{ $row['class_name'] }}</div>
                            </div>
                            <div class="text-sm font-black text-brand-600 dark:text-brand-300">{{ $row['votes_count'] }}</div>
                        </div>
                    @empty
                        <p class="text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'لا توجد نتائج بعد.' : 'No results yet.' }}</p>
                    @endforelse
                </div>
            </section>
            <section class="rounded-[1.5rem] border border-zinc-200 p-5 dark:border-zinc-800">
                <h3 class="text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'نتائج البنات' : 'Female results' }}</h3>
                <div class="mt-4 space-y-3">
                    @forelse($results['female'] as $row)
                        <div class="flex items-center justify-between gap-4 rounded-2xl bg-zinc-50 px-4 py-3 dark:bg-zinc-800/70">
                            <div>
                                <div class="font-black text-zinc-900 dark:text-white">{{ $row['candidate_name'] }}</div>
                                <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $row['grade_name'] }} / {{ $row['class_name'] }}</div>
                            </div>
                            <div class="text-sm font-black text-brand-600 dark:text-brand-300">{{ $row['votes_count'] }}</div>
                        </div>
                    @empty
                        <p class="text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'لا توجد نتائج بعد.' : 'No results yet.' }}</p>
                    @endforelse
                </div>
            </section>
        </div>
    @endif
</article>