<div>
    <!-- Header -->
    <div class="mb-4 sm:mb-6">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
            <div>
                <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('تسجيل الحضور') }}</h1>
                <p class="mt-1 text-sm text-gray-500">
                    {{ $session->group?->name_ar ?? '-' }} &mdash;
                    {{ $session->session_date->format('Y-m-d') }}
                    ({{ $session->start_time }} - {{ $session->end_time }})
                </p>
            </div>
            <a href="{{ route('attendance.list') }}"
               class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                <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="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
                {{ __('العودة') }}
            </a>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-3 lg:grid-cols-6 gap-2 sm:gap-4 mb-4 sm:mb-6">
        <div class="p-3 sm:p-4 bg-white border border-gray-200 rounded-lg">
            <p class="text-sm text-gray-500">{{ __('الإجمالي') }}</p>
            <p class="text-xl sm:text-2xl font-bold text-gray-900" dir="ltr">{{ $summary['total'] }}</p>
        </div>
        <div class="p-3 sm:p-4 bg-green-50 border border-green-200 rounded-lg">
            <p class="text-sm text-green-700">{{ __('حاضر') }}</p>
            <p class="text-xl sm:text-2xl font-bold text-green-700" dir="ltr">{{ $summary['present'] }}</p>
        </div>
        <div class="p-3 sm:p-4 bg-amber-50 border border-amber-200 rounded-lg">
            <p class="text-sm text-amber-700">{{ __('متأخر') }}</p>
            <p class="text-xl sm:text-2xl font-bold text-amber-700" dir="ltr">{{ $summary['late'] }}</p>
        </div>
        <div class="p-3 sm:p-4 bg-red-50 border border-red-200 rounded-lg">
            <p class="text-sm text-red-700">{{ __('غائب') }}</p>
            <p class="text-xl sm:text-2xl font-bold text-red-700" dir="ltr">{{ $summary['absent'] }}</p>
        </div>
        <div class="p-3 sm:p-4 bg-gray-50 border border-gray-200 rounded-lg">
            <p class="text-sm text-gray-500">{{ __('متبقي') }}</p>
            <p class="text-xl sm:text-2xl font-bold text-gray-700" dir="ltr">{{ $summary['expected'] }}</p>
        </div>
        <div class="p-3 sm:p-4 bg-blue-50 border border-blue-200 rounded-lg">
            <p class="text-sm text-blue-700">{{ __('معذور') }}</p>
            <p class="text-xl sm:text-2xl font-bold text-blue-700" dir="ltr">{{ $summary['excused'] }}</p>
        </div>
    </div>

    <!-- Session Notes -->
    <div class="mb-4 sm:mb-6 bg-white border border-gray-200 rounded-lg p-4 sm:p-6">
        <label for="sessionNotes" class="block text-sm font-medium text-gray-700 mb-2">{{ __('ملاحظات الجلسة') }}</label>
        <textarea
            id="sessionNotes"
            wire:model="sessionNotes"
            rows="3"
            class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
            placeholder="{{ __('أضف ملاحظات أو تعليقات حول هذه الجلسة...') }}"
        ></textarea>
        <div class="mt-2 flex items-center gap-3">
            <button
                wire:click="saveNotes"
                wire:loading.attr="disabled"
                wire:target="saveNotes"
                class="inline-flex items-center gap-2 px-3 py-2.5 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed">
                <span wire:loading.remove wire:target="saveNotes">{{ __('حفظ الملاحظات') }}</span>
                <span wire:loading wire:target="saveNotes">{{ __('جارٍ الحفظ...') }}</span>
            </button>
            @if(session('notes_saved'))
                <span class="text-sm text-green-600">{{ session('notes_saved') }}</span>
            @endif
        </div>
    </div>

    <!-- Bulk Action -->
    @if($summary['expected'] > 0)
    <div class="mb-4">
        <button
            wire:click="markAllPresent"
            wire:loading.attr="disabled"
            wire:target="markAllPresent"
            class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed">
            <span wire:loading.remove wire:target="markAllPresent">
                <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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </span>
            <span wire:loading wire:target="markAllPresent">
                <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
            </span>
            <span wire:loading.remove wire:target="markAllPresent">{{ __('تحضير الجميع') }}</span>
            <span wire:loading wire:target="markAllPresent">{{ __('جارٍ التحضير...') }}</span>
        </button>
    </div>
    @endif

    <div wire:loading.class="opacity-50 pointer-events-none" wire:target="markAs, markPresent, markAllPresent, saveRecordNote">

    {{-- ========== TRAINERS SECTION ========== --}}
    @if($trainerRecords->isNotEmpty())
    <div class="mb-6">
        <div class="flex items-center gap-2 mb-3">
            <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center">
                <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
            </div>
            <h2 class="text-base font-bold text-gray-800">{{ __('المدربون') }}</h2>
            <span class="text-xs text-gray-500">({{ $trainerRecords->count() }})</span>
        </div>

        <div class="bg-white border border-purple-200 rounded-lg overflow-hidden">
            {{-- Mobile cards --}}
            <div class="md:hidden space-y-2 p-3">
                @foreach($trainerRecords as $record)
                @php
                    $isOwnRecord = $record->subject_id === $currentUserId;
                    $canMark = $canManageTrainers || $isOwnRecord;
                @endphp
                <div class="border {{ $isOwnRecord ? 'border-purple-300 bg-purple-50' : 'border-gray-200 bg-white' }} rounded-lg p-3 {{ !$canMark ? 'opacity-50' : '' }}">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm font-medium text-gray-900">
                            {{ $record->subject?->name ?? '-' }}
                            @if($isOwnRecord)
                                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold bg-purple-600 text-white ms-1">{{ __('أنت') }}</span>
                            @endif
                        </span>
                        @php $color = $record->status->color(); @endphp
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                            @switch($color)
                                @case('green') bg-green-100 text-green-800 @break
                                @case('amber') bg-amber-100 text-amber-800 @break
                                @case('red') bg-red-100 text-red-800 @break
                                @case('blue') bg-blue-100 text-blue-800 @break
                                @default bg-gray-100 text-gray-800
                            @endswitch
                        ">
                            {{ $record->status->label() }}
                        </span>
                    </div>
                    <div class="grid grid-cols-4 gap-1.5">
                        @foreach(['present' => ['حاضر', 'green'], 'late' => ['متأخر', 'amber'], 'absent' => ['غائب', 'red'], 'excused' => ['معذور', 'blue']] as $st => [$label, $clr])
                        <button wire:click="markAs({{ $record->id }}, '{{ $st }}')" wire:loading.attr="disabled"
                            @if(!$canMark) disabled @endif
                            class="py-2.5 text-xs font-medium rounded border text-center
                                {{ $record->status->value === $st ? "bg-{$clr}-600 text-white border-{$clr}-600" : "text-{$clr}-700 border-{$clr}-300 hover:bg-{$clr}-50" }}
                                disabled:opacity-50 disabled:cursor-not-allowed">
                            {{ __($label) }}
                        </button>
                        @endforeach
                    </div>
                </div>
                @endforeach
            </div>

            {{-- Desktop table --}}
            <div class="hidden md:block overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-purple-50">
                        <tr>
                            <th class="px-4 py-3 text-start text-xs font-medium text-purple-700 uppercase">{{ __('المدرب') }}</th>
                            <th class="px-4 py-3 text-start text-xs font-medium text-purple-700 uppercase">{{ __('الحالة') }}</th>
                            <th class="px-4 py-3 text-start text-xs font-medium text-purple-700 uppercase">{{ __('وقت الحضور') }}</th>
                            <th class="px-4 py-3 text-start text-xs font-medium text-purple-700 uppercase">{{ __('الإجراءات') }}</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($trainerRecords as $record)
                        @php
                            $isOwnRecord = $record->subject_id === $currentUserId;
                            $canMark = $canManageTrainers || $isOwnRecord;
                        @endphp
                        <tr class="{{ $isOwnRecord ? 'bg-purple-50' : 'hover:bg-gray-50' }} {{ !$canMark ? 'opacity-50' : '' }}">
                            <td class="px-4 py-3 whitespace-nowrap">
                                <span class="text-sm font-medium text-gray-900">
                                    {{ $record->subject?->name ?? '-' }}
                                </span>
                                @if($isOwnRecord)
                                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold bg-purple-600 text-white ms-1">{{ __('أنت') }}</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap">
                                @php $color = $record->status->color(); @endphp
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                    @switch($color)
                                        @case('green') bg-green-100 text-green-800 @break
                                        @case('amber') bg-amber-100 text-amber-800 @break
                                        @case('red') bg-red-100 text-red-800 @break
                                        @case('blue') bg-blue-100 text-blue-800 @break
                                        @default bg-gray-100 text-gray-800
                                    @endswitch
                                ">
                                    {{ $record->status->label() }}
                                </span>
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500" dir="ltr">
                                {{ $record->check_in_at?->format('H:i') ?? '-' }}
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap">
                                <div class="flex items-center gap-1">
                                    @foreach(['present' => ['حاضر', 'green', \App\Domain\Attendance\Enums\AttendanceStatus::Present], 'late' => ['متأخر', 'amber', \App\Domain\Attendance\Enums\AttendanceStatus::Late], 'absent' => ['غائب', 'red', \App\Domain\Attendance\Enums\AttendanceStatus::Absent], 'excused' => ['معذور', 'blue', \App\Domain\Attendance\Enums\AttendanceStatus::Excused]] as $st => [$label, $clr, $enum])
                                    <button
                                        wire:click="markAs({{ $record->id }}, '{{ $st }}')"
                                        wire:loading.attr="disabled"
                                        @if(!$canMark) disabled @endif
                                        class="inline-flex items-center px-2 py-1 text-xs font-medium rounded border
                                            {{ $record->status === $enum ? "bg-{$clr}-600 text-white border-{$clr}-600" : "text-{$clr}-700 border-{$clr}-300 hover:bg-{$clr}-50" }}
                                            disabled:opacity-50 disabled:cursor-not-allowed"
                                        title="{{ __($label) }}">
                                        {{ __($label) }}
                                    </button>
                                    @endforeach
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif

    {{-- ========== PARTICIPANTS SECTION ========== --}}
    @if($participantRecords->isNotEmpty())
    <div>
        <div class="flex items-center gap-2 mb-3">
            <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
            </div>
            <h2 class="text-base font-bold text-gray-800">{{ __('اللاعبون') }}</h2>
            <span class="text-xs text-gray-500">({{ $participantRecords->count() }})</span>
        </div>

        <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
            @if($participantRecords->isEmpty())
                <div class="p-12 text-center">
                    <p class="text-sm text-gray-500">{{ __('لا يوجد لاعبون في هذه الجلسة') }}</p>
                </div>
            @else
                {{-- Mobile cards --}}
                <div class="md:hidden space-y-2 p-3">
                    @foreach($participantRecords as $record)
                    @php $isUnpaid = in_array($record->subject_id, $notPaidParticipantIds); @endphp
                    <div class="{{ $isUnpaid ? 'bg-red-50 border-red-300' : 'bg-white border-gray-200' }} border rounded-lg p-3">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-medium {{ $isUnpaid ? 'text-red-700' : 'text-gray-900' }}">
                                {{ $record->subject?->person?->name_ar ?? '-' }}
                                @if($record->subject?->is_free)
                                    <x-ui.free-player-badge :small="true" />
                                @elseif($isUnpaid)
                                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold bg-red-600 text-white ms-1">{{ __('غير مدفوع') }}</span>
                                @endif
                            </span>
                            @php $color = $record->status->color(); @endphp
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                                @switch($color)
                                    @case('green') bg-green-100 text-green-800 @break
                                    @case('amber') bg-amber-100 text-amber-800 @break
                                    @case('red') bg-red-100 text-red-800 @break
                                    @case('blue') bg-blue-100 text-blue-800 @break
                                    @case('orange') bg-orange-100 text-orange-800 @break
                                    @case('yellow') bg-yellow-100 text-yellow-800 @break
                                    @case('purple') bg-purple-100 text-purple-800 @break
                                    @default bg-gray-100 text-gray-800
                                @endswitch
                            ">
                                {{ $record->status->label() }}
                            </span>
                        </div>
                        <div class="grid grid-cols-4 gap-1.5">
                            <button wire:click="markAs({{ $record->id }}, 'present')" wire:loading.attr="disabled" wire:target="markAs({{ $record->id }}, 'present')"
                                class="py-2.5 text-xs font-medium rounded border text-center
                                    {{ $record->status === \App\Domain\Attendance\Enums\AttendanceStatus::Present ? 'bg-green-600 text-white border-green-600' : 'text-green-700 border-green-300 hover:bg-green-50' }} disabled:opacity-50">
                                <span wire:loading.remove wire:target="markAs({{ $record->id }}, 'present')">{{ __('حاضر') }}</span>
                                <span wire:loading wire:target="markAs({{ $record->id }}, 'present')">...</span>
                            </button>
                            <button wire:click="markAs({{ $record->id }}, 'late')" wire:loading.attr="disabled" wire:target="markAs({{ $record->id }}, 'late')"
                                class="py-2.5 text-xs font-medium rounded border text-center
                                    {{ $record->status === \App\Domain\Attendance\Enums\AttendanceStatus::Late ? 'bg-amber-600 text-white border-amber-600' : 'text-amber-700 border-amber-300 hover:bg-amber-50' }} disabled:opacity-50">
                                <span wire:loading.remove wire:target="markAs({{ $record->id }}, 'late')">{{ __('متأخر') }}</span>
                                <span wire:loading wire:target="markAs({{ $record->id }}, 'late')">...</span>
                            </button>
                            <button wire:click="markAs({{ $record->id }}, 'absent')" wire:loading.attr="disabled" wire:target="markAs({{ $record->id }}, 'absent')"
                                class="py-2.5 text-xs font-medium rounded border text-center
                                    {{ $record->status === \App\Domain\Attendance\Enums\AttendanceStatus::Absent ? 'bg-red-600 text-white border-red-600' : 'text-red-700 border-red-300 hover:bg-red-50' }} disabled:opacity-50">
                                <span wire:loading.remove wire:target="markAs({{ $record->id }}, 'absent')">{{ __('غائب') }}</span>
                                <span wire:loading wire:target="markAs({{ $record->id }}, 'absent')">...</span>
                            </button>
                            <button wire:click="markAs({{ $record->id }}, 'excused')" wire:loading.attr="disabled" wire:target="markAs({{ $record->id }}, 'excused')"
                                class="py-2.5 text-xs font-medium rounded border text-center
                                    {{ $record->status === \App\Domain\Attendance\Enums\AttendanceStatus::Excused ? 'bg-blue-600 text-white border-blue-600' : 'text-blue-700 border-blue-300 hover:bg-blue-50' }} disabled:opacity-50">
                                <span wire:loading.remove wire:target="markAs({{ $record->id }}, 'excused')">{{ __('معذور') }}</span>
                                <span wire:loading wire:target="markAs({{ $record->id }}, 'excused')">...</span>
                            </button>
                        </div>
                    </div>
                    @endforeach
                </div>

                {{-- 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>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach($participantRecords as $record)
                                @php $isUnpaidRow = in_array($record->subject_id, $notPaidParticipantIds); @endphp
                                <tr class="{{ $isUnpaidRow ? 'bg-red-50 hover:bg-red-100' : 'hover:bg-gray-50' }}">
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span class="text-sm font-medium {{ $isUnpaidRow ? 'text-red-700' : 'text-gray-900' }}">
                                            {{ $record->subject?->person?->name_ar ?? '-' }}
                                            @if($record->subject?->is_free)
                                                <x-ui.free-player-badge :small="true" />
                                            @elseif($isUnpaidRow)
                                                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold bg-red-600 text-white ms-1">{{ __('غير مدفوع') }}</span>
                                            @endif
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        @php $color = $record->status->color(); @endphp
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                            @switch($color)
                                                @case('green') bg-green-100 text-green-800 @break
                                                @case('amber') bg-amber-100 text-amber-800 @break
                                                @case('red') bg-red-100 text-red-800 @break
                                                @case('blue') bg-blue-100 text-blue-800 @break
                                                @case('orange') bg-orange-100 text-orange-800 @break
                                                @case('yellow') bg-yellow-100 text-yellow-800 @break
                                                @case('purple') bg-purple-100 text-purple-800 @break
                                                @default bg-gray-100 text-gray-800
                                            @endswitch
                                        ">
                                            {{ $record->status->label() }}
                                        </span>
                                        @if($record->late_minutes)
                                            <span class="ms-1 text-xs text-gray-500" dir="ltr">({{ $record->late_minutes }} {{ __('د') }})</span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500" dir="ltr">
                                        {{ $record->check_in_at?->format('H:i') ?? '-' }}
                                    </td>
                                    <td class="px-4 py-3" x-data="{ expanded: false }">
                                        <div class="flex items-center gap-1">
                                            <input
                                                type="text"
                                                wire:model.blur="recordNotes.{{ $record->id }}"
                                                wire:change="saveRecordNote({{ $record->id }})"
                                                class="w-32 text-xs rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 placeholder-gray-400"
                                                placeholder="{{ __('ملاحظة...') }}"
                                                x-show="!expanded"
                                            >
                                            <textarea
                                                wire:model.blur="recordNotes.{{ $record->id }}"
                                                wire:change="saveRecordNote({{ $record->id }})"
                                                rows="2"
                                                class="w-48 text-xs rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 placeholder-gray-400"
                                                placeholder="{{ __('ملاحظة...') }}"
                                                x-show="expanded"
                                                x-cloak
                                            ></textarea>
                                            <button
                                                type="button"
                                                @click="expanded = !expanded"
                                                class="text-gray-400 hover:text-gray-600 shrink-0"
                                                :title="expanded ? '{{ __('تصغير') }}' : '{{ __('توسيع') }}'"
                                            >
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path x-show="!expanded" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/>
                                                    <path x-show="expanded" x-cloak stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 4H5v4M15 4h4v4M9 20H5v-4M15 20h4v-4"/>
                                                </svg>
                                            </button>
                                        </div>
                                        @if(session("record_note_saved_{$record->id}"))
                                            <span class="text-xs text-green-600 mt-0.5 block">{{ __('تم') }}</span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <div class="flex items-center gap-1">
                                            <button
                                                wire:click="markAs({{ $record->id }}, 'present')"
                                                wire:loading.attr="disabled"
                                                wire:target="markAs({{ $record->id }}, 'present')"
                                                class="inline-flex items-center px-2 py-1 text-xs font-medium rounded border
                                                    {{ $record->status === \App\Domain\Attendance\Enums\AttendanceStatus::Present ? 'bg-green-600 text-white border-green-600' : 'text-green-700 border-green-300 hover:bg-green-50' }}
                                                    disabled:opacity-50"
                                                title="{{ __('حاضر') }}">
                                                <span wire:loading.remove wire:target="markAs({{ $record->id }}, 'present')">{{ __('حاضر') }}</span>
                                                <span wire:loading wire:target="markAs({{ $record->id }}, 'present')" class="w-3 h-3">
                                                    <svg class="animate-spin w-3 h-3" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                                                </span>
                                            </button>
                                            <button
                                                wire:click="markAs({{ $record->id }}, 'late')"
                                                wire:loading.attr="disabled"
                                                wire:target="markAs({{ $record->id }}, 'late')"
                                                class="inline-flex items-center px-2 py-1 text-xs font-medium rounded border
                                                    {{ $record->status === \App\Domain\Attendance\Enums\AttendanceStatus::Late ? 'bg-amber-600 text-white border-amber-600' : 'text-amber-700 border-amber-300 hover:bg-amber-50' }}
                                                    disabled:opacity-50"
                                                title="{{ __('متأخر') }}">
                                                <span wire:loading.remove wire:target="markAs({{ $record->id }}, 'late')">{{ __('متأخر') }}</span>
                                                <span wire:loading wire:target="markAs({{ $record->id }}, 'late')" class="w-3 h-3">
                                                    <svg class="animate-spin w-3 h-3" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                                                </span>
                                            </button>
                                            <button
                                                wire:click="markAs({{ $record->id }}, 'absent')"
                                                wire:loading.attr="disabled"
                                                wire:target="markAs({{ $record->id }}, 'absent')"
                                                class="inline-flex items-center px-2 py-1 text-xs font-medium rounded border
                                                    {{ $record->status === \App\Domain\Attendance\Enums\AttendanceStatus::Absent ? 'bg-red-600 text-white border-red-600' : 'text-red-700 border-red-300 hover:bg-red-50' }}
                                                    disabled:opacity-50"
                                                title="{{ __('غائب') }}">
                                                <span wire:loading.remove wire:target="markAs({{ $record->id }}, 'absent')">{{ __('غائب') }}</span>
                                                <span wire:loading wire:target="markAs({{ $record->id }}, 'absent')" class="w-3 h-3">
                                                    <svg class="animate-spin w-3 h-3" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                                                </span>
                                            </button>
                                            <button
                                                wire:click="markAs({{ $record->id }}, 'excused')"
                                                wire:loading.attr="disabled"
                                                wire:target="markAs({{ $record->id }}, 'excused')"
                                                class="inline-flex items-center px-2 py-1 text-xs font-medium rounded border
                                                    {{ $record->status === \App\Domain\Attendance\Enums\AttendanceStatus::Excused ? 'bg-blue-600 text-white border-blue-600' : 'text-blue-700 border-blue-300 hover:bg-blue-50' }}
                                                    disabled:opacity-50"
                                                title="{{ __('معذور') }}">
                                                <span wire:loading.remove wire:target="markAs({{ $record->id }}, 'excused')">{{ __('معذور') }}</span>
                                                <span wire:loading wire:target="markAs({{ $record->id }}, 'excused')" class="w-3 h-3">
                                                    <svg class="animate-spin w-3 h-3" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                                                </span>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
    @endif

    {{-- Empty state --}}
    @if($trainerRecords->isEmpty() && $participantRecords->isEmpty())
    <div class="bg-white border border-gray-200 rounded-lg 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="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>
        <p class="mt-4 text-sm text-gray-500">{{ __('لا توجد سجلات حضور لهذه الجلسة') }}</p>
    </div>
    @endif

    </div>
</div>
