<div>
    <!-- Header -->
    <div class="mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('سجل الحضور') }}</h1>
        <p class="mt-1 text-sm text-gray-500">{{ __('عرض جلسات التدريب ونسب الحضور') }}</p>
    </div>

    <!-- Filters -->
    <div class="mb-6 p-3 sm:p-4 bg-white border border-gray-200 rounded-lg">
        <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
            <!-- Search -->
            <div class="col-span-2 md:col-span-1">
                <label for="search" class="block text-sm font-medium text-gray-700 mb-1">{{ __('بحث بالمجموعة') }}</label>
                <input
                    type="text"
                    id="search"
                    wire:model.live.debounce.300ms="search"
                    placeholder="{{ __('اسم المجموعة...') }}"
                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
            </div>

            <!-- Date From -->
            <div>
                <label for="dateFrom" class="block text-sm font-medium text-gray-700 mb-1">{{ __('من تاريخ') }}</label>
                <input
                    type="date"
                    id="dateFrom"
                    wire:model.live="dateFrom"
                    dir="ltr"
                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
            </div>

            <!-- Date To -->
            <div>
                <label for="dateTo" class="block text-sm font-medium text-gray-700 mb-1">{{ __('إلى تاريخ') }}</label>
                <input
                    type="date"
                    id="dateTo"
                    wire:model.live="dateTo"
                    dir="ltr"
                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
            </div>
        </div>
    </div>

    <!-- Sessions -->
    <div class="bg-white border border-gray-200 rounded-lg overflow-hidden" wire:loading.class="opacity-50 pointer-events-none">
        @if($sessions->isEmpty())
            <div class="p-12 text-center">
                <svg class="mx-auto h-12 w-12 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>
                <p class="mt-4 text-sm text-gray-500">{{ __('لا توجد جلسات في هذه الفترة') }}</p>
            </div>
        @else
            <!-- Desktop Table -->
            <div class="hidden md:block overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('التاريخ') }}</th>
                            <th class="px-4 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('المجموعة') }}</th>
                            <th class="px-4 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('الوقت') }}</th>
                            <th class="px-4 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('الإجمالي') }}</th>
                            <th class="px-4 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('حاضر/متأخر') }}</th>
                            <th class="px-4 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('غائب') }}</th>
                            <th class="px-4 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('النسبة') }}</th>
                            <th class="px-4 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('إجراء') }}</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($sessions as $session)
                            @php
                                $total = $session->attendance_records_count;
                                $presentCount = $session->present_count;
                                $absentCount = $session->absent_count;
                                $rate = $total > 0 ? round(($presentCount / $total) * 100, 0) : 0;
                            @endphp
                            <tr class="hover:bg-gray-50">
                                <!-- Date -->
                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900" dir="ltr">
                                    {{ $session->session_date->format('Y-m-d') }}
                                </td>

                                <!-- Group -->
                                <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
                                    {{ $session->group?->name_ar ?? '-' }}
                                </td>

                                <!-- Time -->
                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500" dir="ltr">
                                    {{ $session->start_time }} - {{ $session->end_time }}
                                </td>

                                <!-- Total -->
                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700" dir="ltr">
                                    {{ $total }}
                                </td>

                                <!-- Present/Late -->
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800" dir="ltr">
                                        {{ $presentCount }}
                                    </span>
                                </td>

                                <!-- Absent -->
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800" dir="ltr">
                                        {{ $absentCount }}
                                    </span>
                                </td>

                                <!-- Attendance Rate -->
                                <td class="px-4 py-3 whitespace-nowrap">
                                    @if($total > 0)
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                                            @if($rate >= 90) bg-green-100 text-green-800
                                            @elseif($rate >= 75) bg-amber-100 text-amber-800
                                            @else bg-red-100 text-red-800
                                            @endif
                                        " dir="ltr">
                                            {{ $rate }}%
                                        </span>
                                    @else
                                        <span class="text-xs text-gray-400">-</span>
                                    @endif
                                </td>

                                <!-- Action -->
                                <td class="px-4 py-3 whitespace-nowrap">
                                    @can('attendance.mark')
                                    <a href="{{ route('attendance.take', $session) }}"
                                       class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100">
                                        <svg class="w-3.5 h-3.5" 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 2m-6 9l2 2 4-4"/></svg>
                                        {{ __('تسجيل') }}
                                    </a>
                                    @endcan
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Mobile Cards -->
            <div class="md:hidden space-y-3 p-3">
                @foreach($sessions as $session)
                    @php
                        $total = $session->attendance_records_count;
                        $presentCount = $session->present_count;
                        $absentCount = $session->absent_count;
                        $rate = $total > 0 ? round(($presentCount / $total) * 100, 0) : 0;
                    @endphp
                    <div class="border border-gray-200 rounded-lg p-3">
                        <!-- Card Header: Group Name + Date -->
                        <div class="flex items-center justify-between mb-2">
                            <h3 class="text-sm font-medium text-gray-900">
                                {{ $session->group?->name_ar ?? '-' }}
                            </h3>
                            <span class="text-xs text-gray-500" dir="ltr">
                                {{ $session->session_date->format('Y-m-d') }}
                            </span>
                        </div>

                        <!-- Time -->
                        <p class="text-xs text-gray-500 mb-3" dir="ltr">
                            {{ $session->start_time }} - {{ $session->end_time }}
                        </p>

                        <!-- Stats Row -->
                        <div class="flex items-center gap-2 flex-wrap mb-3">
                            <!-- Total -->
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-700" dir="ltr">
                                {{ __('الإجمالي') }}: {{ $total }}
                            </span>

                            <!-- Present/Late -->
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800" dir="ltr">
                                {{ __('حاضر') }}: {{ $presentCount }}
                            </span>

                            <!-- Absent -->
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800" dir="ltr">
                                {{ __('غائب') }}: {{ $absentCount }}
                            </span>

                            <!-- Attendance Rate -->
                            @if($total > 0)
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                                    @if($rate >= 90) bg-green-100 text-green-800
                                    @elseif($rate >= 75) bg-amber-100 text-amber-800
                                    @else bg-red-100 text-red-800
                                    @endif
                                " dir="ltr">
                                    {{ $rate }}%
                                </span>
                            @endif
                        </div>

                        <!-- Action -->
                        @can('attendance.mark')
                        <a href="{{ route('attendance.take', $session) }}"
                           class="inline-flex items-center justify-center gap-1 w-full px-3 py-2 text-sm font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100">
                            <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="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-6 9l2 2 4-4"/></svg>
                            {{ __('تسجيل') }}
                        </a>
                        @endcan
                    </div>
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="px-4 py-3 border-t border-gray-200">
                {{ $sessions->links() }}
            </div>
        @endif
    </div>
</div>
