<div>
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('تقرير الحضور') }}</h1>
        <a href="{{ route('reports.view') }}" wire:navigate class="text-sm text-blue-600 hover:text-blue-800">{{ __('العودة للتقارير') }}</a>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
            <div>
                <label class="block text-sm text-gray-600 mb-1">{{ __('البرنامج') }}</label>
                <select wire:model.live="programFilter" class="w-full rounded-lg border-gray-300 text-sm">
                    <option value="">{{ __('كل البرامج') }}</option>
                    @foreach($programs as $program)
                        <option value="{{ $program->id }}">{{ $program->name_ar }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm text-gray-600 mb-1">{{ __('المجموعة') }}</label>
                <select wire:model.live="groupFilter" class="w-full rounded-lg border-gray-300 text-sm">
                    <option value="">{{ __('كل المجموعات') }}</option>
                    @foreach($groups as $group)
                        <option value="{{ $group->id }}">{{ $group->name_ar }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm text-gray-600 mb-1">{{ __('من') }}</label>
                <input type="date" wire:model.live="dateFrom" dir="ltr" class="w-full rounded-lg border-gray-300 text-sm">
            </div>
            <div>
                <label class="block text-sm text-gray-600 mb-1">{{ __('إلى') }}</label>
                <input type="date" wire:model.live="dateTo" dir="ltr" class="w-full rounded-lg border-gray-300 text-sm">
            </div>
            <div class="col-span-2 md:col-span-1">
                <label class="block text-sm text-gray-600 mb-1 invisible">{{ __('تصدير') }}</label>
                <button
                    wire:click="export"
                    wire:loading.attr="disabled"
                    wire:target="export"
                    class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 transition disabled:opacity-50"
                >
                    <span wire:loading.remove wire:target="export">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
                    </span>
                    <span wire:loading.remove wire:target="export">{{ __('تصدير CSV') }}</span>
                    <span wire:loading wire:target="export">{{ __('جارٍ التصدير...') }}</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-4 sm:mb-6">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <p class="text-sm text-gray-500">{{ __('نسبة الحضور الإجمالية') }}</p>
            <p class="text-xl sm:text-2xl font-bold mt-1 {{ $summary->overall_rate >= 85 ? 'text-green-600' : ($summary->overall_rate >= 75 ? 'text-amber-600' : 'text-red-600') }}">
                {{ $summary->overall_rate }}%
            </p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <p class="text-sm text-gray-500">{{ __('إجمالي الحصص') }}</p>
            <p class="text-xl sm:text-2xl font-bold text-blue-600 mt-1">{{ $summary->total_sessions }}</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <p class="text-sm text-gray-500">{{ __('متوسط الحاضرين لكل حصة') }}</p>
            <p class="text-xl sm:text-2xl font-bold text-indigo-600 mt-1">{{ $summary->avg_present_per_session }}</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm text-gray-500">{{ __('أفضل يوم') }}</p>
                    @if($summary->best_day)
                        <p class="text-sm font-bold text-green-600 mt-1" dir="ltr">{{ $summary->best_day }}</p>
                        <p class="text-xs text-gray-400">{{ $summary->best_day_rate }}%</p>
                    @else
                        <p class="text-sm text-gray-400 mt-1">-</p>
                    @endif
                </div>
                <div>
                    <p class="text-sm text-gray-500">{{ __('أسوأ يوم') }}</p>
                    @if($summary->worst_day)
                        <p class="text-sm font-bold text-red-600 mt-1" dir="ltr">{{ $summary->worst_day }}</p>
                        <p class="text-xs text-gray-400">{{ $summary->worst_day_rate }}%</p>
                    @else
                        <p class="text-sm text-gray-400 mt-1">-</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Participant Attendance Table -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden" wire:loading.class="opacity-50 pointer-events-none">
        @if($participantStats->isNotEmpty())
            <div class="hidden md:block overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 border-b border-gray-200">
                        <tr>
                            <th class="px-4 py-3 text-start text-xs font-semibold text-gray-600 uppercase">{{ __('المشترك') }}</th>
                            <th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">{{ __('الحصص') }}</th>
                            <th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">{{ __('حاضر') }}</th>
                            <th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">{{ __('متأخر') }}</th>
                            <th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">{{ __('غائب') }}</th>
                            <th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">{{ __('معذور') }}</th>
                            <th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">{{ __('النسبة') }}</th>
                            <th class="px-4 py-3 text-start text-xs font-semibold text-gray-600 uppercase min-w-[200px]">{{ __('التوزيع') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @foreach($participantStats as $stat)
                            <tr class="hover:bg-gray-50 transition">
                                <td class="px-4 py-3">
                                    <div class="font-medium text-gray-800">{{ $stat->name }}</div>
                                    @if($stat->participant_number)
                                        <div class="text-xs text-gray-400" dir="ltr">#{{ $stat->participant_number }}</div>
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-center font-medium text-gray-700">{{ $stat->total_sessions }}</td>
                                <td class="px-4 py-3 text-center">
                                    <span class="inline-flex items-center justify-center min-w-[28px] px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">
                                        {{ $stat->present_count }}
                                    </span>
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <span class="inline-flex items-center justify-center min-w-[28px] px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-700">
                                        {{ $stat->late_count }}
                                    </span>
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <span class="inline-flex items-center justify-center min-w-[28px] px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">
                                        {{ $stat->absent_count }}
                                    </span>
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <span class="inline-flex items-center justify-center min-w-[28px] px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
                                        {{ $stat->excused_count }}
                                    </span>
                                </td>
                                <td class="px-4 py-3 text-center">
                                    @php
                                        $rateColor = $stat->rate >= 85 ? 'text-green-600' : ($stat->rate >= 75 ? 'text-amber-600' : 'text-red-600');
                                        $rateBg = $stat->rate >= 85 ? 'bg-green-50' : ($stat->rate >= 75 ? 'bg-amber-50' : 'bg-red-50');
                                    @endphp
                                    <span class="inline-flex items-center px-2 py-1 rounded-lg text-sm font-bold {{ $rateColor }} {{ $rateBg }}">
                                        {{ $stat->rate }}%
                                    </span>
                                </td>
                                <td class="px-4 py-3">
                                    @php
                                        $effectiveTotal = $stat->total_sessions - $stat->cancelled_count - $stat->exempt_count;
                                        $presentPct = $effectiveTotal > 0 ? round(($stat->present_count / $effectiveTotal) * 100) : 0;
                                        $latePct = $effectiveTotal > 0 ? round(($stat->late_count / $effectiveTotal) * 100) : 0;
                                        $partialPct = $effectiveTotal > 0 ? round(($stat->partial_count / $effectiveTotal) * 100) : 0;
                                        $absentPct = $effectiveTotal > 0 ? round(($stat->absent_count / $effectiveTotal) * 100) : 0;
                                        $excusedPct = $effectiveTotal > 0 ? round(($stat->excused_count / $effectiveTotal) * 100) : 0;
                                    @endphp
                                    <div class="flex h-3 rounded-full overflow-hidden bg-gray-100" title="{{ __('حاضر') }}: {{ $presentPct }}% | {{ __('متأخر') }}: {{ $latePct }}% | {{ __('غائب') }}: {{ $absentPct }}%">
                                        @if($presentPct > 0)
                                            <div class="bg-green-500 transition-all" style="width: {{ $presentPct }}%"></div>
                                        @endif
                                        @if($latePct > 0)
                                            <div class="bg-amber-400 transition-all" style="width: {{ $latePct }}%"></div>
                                        @endif
                                        @if($partialPct > 0)
                                            <div class="bg-yellow-300 transition-all" style="width: {{ $partialPct }}%"></div>
                                        @endif
                                        @if($excusedPct > 0)
                                            <div class="bg-blue-400 transition-all" style="width: {{ $excusedPct }}%"></div>
                                        @endif
                                        @if($absentPct > 0)
                                            <div class="bg-red-500 transition-all" style="width: {{ $absentPct }}%"></div>
                                        @endif
                                    </div>
                                    <!-- Legend -->
                                    <div class="flex gap-2 mt-1 text-[10px] text-gray-400">
                                        <span class="flex items-center gap-0.5"><span class="w-2 h-2 rounded-full bg-green-500 inline-block"></span> {{ __('حاضر') }}</span>
                                        <span class="flex items-center gap-0.5"><span class="w-2 h-2 rounded-full bg-amber-400 inline-block"></span> {{ __('متأخر') }}</span>
                                        <span class="flex items-center gap-0.5"><span class="w-2 h-2 rounded-full bg-red-500 inline-block"></span> {{ __('غائب') }}</span>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            {{-- Mobile Cards --}}
            <div class="md:hidden divide-y divide-gray-100">
                @foreach($participantStats as $stat)
                    <div class="p-4">
                        <div class="flex items-center justify-between mb-2">
                            <div>
                                <div class="font-medium text-sm text-gray-800">{{ $stat->name }}</div>
                                @if($stat->participant_number)
                                    <div class="text-xs text-gray-400" dir="ltr">#{{ $stat->participant_number }}</div>
                                @endif
                            </div>
                            @php
                                $rateColor = $stat->rate >= 85 ? 'text-green-600' : ($stat->rate >= 75 ? 'text-amber-600' : 'text-red-600');
                                $rateBg = $stat->rate >= 85 ? 'bg-green-50' : ($stat->rate >= 75 ? 'bg-amber-50' : 'bg-red-50');
                            @endphp
                            <span class="inline-flex items-center px-2 py-1 rounded-lg text-sm font-bold {{ $rateColor }} {{ $rateBg }}">
                                {{ $stat->rate }}%
                            </span>
                        </div>
                        <div class="grid grid-cols-4 gap-2 text-center text-xs">
                            <div>
                                <span class="inline-flex items-center justify-center min-w-[24px] px-1.5 py-0.5 rounded-full font-medium bg-green-100 text-green-700">{{ $stat->present_count }}</span>
                                <p class="mt-1 text-gray-400">{{ __('حاضر') }}</p>
                            </div>
                            <div>
                                <span class="inline-flex items-center justify-center min-w-[24px] px-1.5 py-0.5 rounded-full font-medium bg-amber-100 text-amber-700">{{ $stat->late_count }}</span>
                                <p class="mt-1 text-gray-400">{{ __('متأخر') }}</p>
                            </div>
                            <div>
                                <span class="inline-flex items-center justify-center min-w-[24px] px-1.5 py-0.5 rounded-full font-medium bg-red-100 text-red-700">{{ $stat->absent_count }}</span>
                                <p class="mt-1 text-gray-400">{{ __('غائب') }}</p>
                            </div>
                            <div>
                                <span class="inline-flex items-center justify-center min-w-[24px] px-1.5 py-0.5 rounded-full font-medium bg-blue-100 text-blue-700">{{ $stat->excused_count }}</span>
                                <p class="mt-1 text-gray-400">{{ __('معذور') }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <!-- Empty State -->
            <div class="flex flex-col items-center justify-center py-16 px-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-300 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                </svg>
                <h3 class="text-lg font-medium text-gray-600 mb-1">{{ __('لا توجد بيانات حضور') }}</h3>
                <p class="text-sm text-gray-400 text-center max-w-sm">
                    {{ __('لم يتم العثور على سجلات حضور للفترة والفلاتر المحددة. جرّب تغيير المجموعة أو الفترة الزمنية.') }}
                </p>
            </div>
        @endif
    </div>
</div>
