<div class="max-w-4xl mx-auto px-3 sm:px-4 py-4 sm:py-6">
    {{-- Page Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">{{ __('حضور سريع') }}</h1>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ __('اختر الحصة وسجّل الحضور بسرعة') }}</p>
        </div>
    </div>

    {{-- Flash Message --}}
    @if (session('success'))
        <div class="mb-4 rounded-lg bg-green-50 dark:bg-green-900/20 p-4 border border-green-200 dark:border-green-800">
            <p class="text-sm font-medium text-green-800 dark:text-green-200">{{ session('success') }}</p>
        </div>
    @endif

    {{-- Session Selection --}}
    <div class="mb-6">
        <h2 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">{{ __('حصص اليوم') }}</h2>

        @if ($todaySessions->isEmpty())
            <div class="rounded-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-8 text-center">
                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
                </svg>
                <p class="mt-2 text-gray-600 dark:text-gray-400">{{ __('لا توجد حصص مجدولة لك اليوم') }}</p>
            </div>
        @else
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
                @foreach ($todaySessions as $session)
                    <button
                        wire:click="selectSession({{ $session->id }})"
                        class="text-start rounded-lg border-2 p-4 transition-all
                            {{ $selectedSessionId === $session->id
                                ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20 ring-1 ring-indigo-500'
                                : 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-indigo-300 dark:hover:border-indigo-600' }}"
                    >
                        <div class="font-semibold text-gray-900 dark:text-white">
                            {{ $session->group?->name_ar ?? $session->group?->name ?? __('مجموعة') }}
                        </div>
                        <div class="mt-1 text-sm text-gray-500 dark:text-gray-400 flex items-center gap-2">
                            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            <span dir="ltr">{{ \Carbon\Carbon::parse($session->start_time)->format('H:i') }} - {{ \Carbon\Carbon::parse($session->end_time)->format('H:i') }}</span>
                        </div>
                        <div class="mt-1">
                            <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium
                                {{ $session->status->value === 'completed' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300' : '' }}
                                {{ $session->status->value === 'scheduled' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300' : '' }}
                                {{ $session->status->value === 'in_progress' ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300' : '' }}
                            ">
                                {{ $session->status->value === 'scheduled' ? __('مجدولة') : '' }}
                                {{ $session->status->value === 'in_progress' ? __('جارية') : '' }}
                                {{ $session->status->value === 'completed' ? __('مكتملة') : '' }}
                            </span>
                        </div>
                    </button>
                @endforeach
            </div>
        @endif
    </div>

    {{-- Attendance Marking --}}
    @if ($selectedSessionId)
        <div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm">
            {{-- Summary Bar --}}
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-gray-200 dark:border-gray-700 p-4 sm:p-6">
                <div class="flex items-center gap-4">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
                        {{ __('الحضور:') }}
                        <span class="text-green-600 dark:text-green-400 font-bold">{{ $summary['present'] }}</span>
                        /
                        <span class="text-gray-900 dark:text-white font-bold">{{ $summary['total'] }}</span>
                    </span>
                    @if ($summary['absent'] > 0)
                        <span class="text-xs text-red-600 dark:text-red-400">
                            ({{ $summary['absent'] }} {{ __('غائب') }})
                        </span>
                    @endif
                </div>

                <button
                    wire:click="markAllPresent"
                    class="inline-flex items-center gap-1.5 rounded-md bg-green-50 dark:bg-green-900/20 px-3 py-1.5 text-xs font-medium text-green-700 dark:text-green-300 border border-green-200 dark:border-green-700 hover:bg-green-100 dark:hover:bg-green-900/40 transition-colors"
                >
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    {{ __('الكل حاضر') }}
                </button>
            </div>

            {{-- Participant List --}}
            @if ($records->isEmpty())
                <div class="p-8 text-center">
                    <p class="text-gray-500 dark:text-gray-400">{{ __('لا يوجد سجلات حضور لهذه الحصة') }}</p>
                </div>
            @else
                <ul class="divide-y divide-gray-100 dark:divide-gray-700">
                    @foreach ($records as $record)
                        @php
                            $isPresent = ($marks[$record->id] ?? '') === 'present';
                            $isUnpaid = in_array($record->subject_id, $notPaidParticipantIds);
                            $participantName = $record->subject?->person?->name_ar
                                ?? $record->subject?->person?->name
                                ?? __('مشترك');
                        @endphp
                        <li
                            wire:click="toggleAbsent({{ $record->id }})"
                            class="flex items-center justify-between px-4 py-3.5 min-h-[48px] cursor-pointer select-none transition-colors
                                {{ $isUnpaid
                                    ? 'bg-red-50 dark:bg-red-900/20 border-s-4 border-red-500'
                                    : ($isPresent
                                        ? 'hover:bg-gray-50 dark:hover:bg-gray-700/50'
                                        : 'bg-red-50 dark:bg-red-900/10 hover:bg-red-100 dark:hover:bg-red-900/20') }}"
                        >
                            <div class="flex items-center gap-3">
                                {{-- Status indicator --}}
                                <div class="flex-shrink-0">
                                    @if ($isPresent)
                                        <div class="h-8 w-8 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
                                            <svg class="h-5 w-5 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                                            </svg>
                                        </div>
                                    @else
                                        <div class="h-8 w-8 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
                                            <svg class="h-5 w-5 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                                            </svg>
                                        </div>
                                    @endif
                                </div>

                                {{-- Name --}}
                                <span class="text-sm font-medium {{ $isPresent ? 'text-gray-900 dark:text-white' : 'text-red-700 dark:text-red-300 line-through' }}">
                                    {{ $participantName }}
                                    @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>
                            </div>

                            {{-- Status label --}}
                            <span class="text-xs font-medium {{ $isPresent ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                {{ $isPresent ? __('حاضر') : __('غائب') }}
                            </span>
                        </li>
                    @endforeach
                </ul>
            @endif

            {{-- Save Button --}}
            @if ($records->isNotEmpty())
                <div class="border-t border-gray-200 dark:border-gray-700 p-4 sm:p-6">
                    <button
                        wire:click="save"
                        wire:loading.attr="disabled"
                        wire:target="save"
                        class="w-full rounded-lg bg-indigo-600 px-4 py-3 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                    >
                        <span wire:loading.remove wire:target="save">
                            {{ __('حفظ الحضور') }} ({{ $summary['present'] }}/{{ $summary['total'] }})
                        </span>
                        <span wire:loading wire:target="save" class="inline-flex items-center gap-2">
                            <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" 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>
                    </button>

                    @if ($saved)
                        <p class="mt-2 text-center text-sm text-green-600 dark:text-green-400 font-medium">
                            {{ __('تم الحفظ بنجاح') }} ✓
                        </p>
                    @endif
                </div>
            @endif
        </div>
    @endif
</div>
