<div>
    {{-- Flash Messages --}}
    @if(session('success'))
    <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
        {{ session('success') }}
    </div>
    @endif
    @if(session('error'))
    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
        {{ session('error') }}
    </div>
    @endif

    {{-- Header Card --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
        <div class="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
            <div class="flex items-center gap-4">
                <div class="w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center">
                    <svg class="w-7 h-7 text-indigo-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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                    </svg>
                </div>
                <div>
                    <h1 class="text-xl font-bold text-gray-800">
                        {{ $group->name_ar ?? $group->name }}
                    </h1>
                    @if($group->name && $group->name_ar)
                    <p class="text-sm text-gray-500" dir="ltr">{{ $group->name }}</p>
                    @endif
                    <div class="flex items-center gap-3 mt-1">
                        <span class="text-sm text-gray-500 font-mono" dir="ltr">{{ $group->code }}</span>
                        @php
                            $statusValue = $group->status->value ?? $group->status;
                            $statusColors = [
                                'forming' => 'blue',
                                'active' => 'green',
                                'full' => 'amber',
                                'on_hold' => 'orange',
                                'completed' => 'purple',
                                'cancelled' => 'red',
                            ];
                            $statusLabels = [
                                'forming' => 'قيد التشكيل',
                                'active' => 'نشطة',
                                'full' => 'مكتملة العدد',
                                'on_hold' => 'معلقة',
                                'completed' => 'منتهية',
                                'cancelled' => 'ملغاة',
                            ];
                            $color = $statusColors[$statusValue] ?? 'gray';
                        @endphp
                        <span class="px-2 py-0.5 text-xs bg-{{ $color }}-100 text-{{ $color }}-700 rounded-full font-medium">
                            {{ __($statusLabels[$statusValue] ?? $statusValue) }}
                        </span>
                        {{-- Capacity indicator --}}
                        <span class="text-xs text-gray-500">
                            {{ $group->current_count }}/{{ $group->max_capacity }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="flex items-center gap-2 self-start sm:self-auto">
                @can('groups.update')
                <a href="{{ route('groups.edit', $group) }}" wire:navigate
                   class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium">
                    {{ __('تعديل') }}
                </a>
                @endcan
                <a href="{{ route('groups.list') }}" wire:navigate
                   class="px-4 py-2 text-gray-600 hover:text-gray-800 text-sm">
                    {{ __('رجوع') }}
                </a>
            </div>
        </div>
    </div>

    {{-- KPI Row --}}
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4 mb-4 sm:mb-6">
        {{-- Enrolled Count --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('المسجلون') }}</p>
                    <p class="text-lg font-bold text-gray-800">{{ $group->current_count }}</p>
                </div>
            </div>
        </div>

        {{-- Paid Count --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-green-600" 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>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('سددوا اشتراك الشهر') }}</p>
                    <p class="text-lg font-bold text-green-700">{{ $paidCount }}</p>
                </div>
            </div>
        </div>

        {{-- Collected — money actually received for this group, subscriptions
             plus any bundled products, split out of bundled invoices.
             Only for users who may see financials. --}}
        @if($canSeeFinancials)
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 9v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('المحصّل') }} <span class="text-gray-400">({{ __('اشتراك الشهر + المنتجات') }})</span></p>
                    <p class="text-lg font-bold text-emerald-700" dir="ltr">
                        {{ number_format($groupCollected / 100, 0) }}
                        <span class="text-xs font-normal text-gray-400">{{ __('ج.م') }}</span>
                    </p>
                </div>
            </div>
        </div>
        @endif

        {{-- Unpaid Count --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('عليهم مستحقات') }}</p>
                    <p class="text-lg font-bold text-red-700">{{ $unpaidCount }}</p>
                </div>
            </div>
        </div>

        {{-- Free Players --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-violet-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('لاعبون مجانيون') }}</p>
                    <p class="text-lg font-bold text-violet-700">{{ $freeCount }}</p>
                </div>
            </div>
        </div>

        {{-- Attendance Rate --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('نسبة الحضور') }}</p>
                    <p class="text-lg font-bold text-gray-800">{{ $attendanceRate }}%</p>
                </div>
            </div>
        </div>

        {{-- Waitlist --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-orange-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('قائمة الانتظار') }}</p>
                    <p class="text-lg font-bold text-gray-800">{{ $waitlistCount }}</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Essential Products Stats --}}
    @if(!empty($essentialProductStats))
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-{{ min(count($essentialProductStats), 6) }} gap-3 sm:gap-4 mb-4 sm:mb-6">
        @foreach($essentialProductStats as $stat)
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <p class="text-xs font-medium text-gray-700 mb-2 truncate">{{ $stat['product']->name_ar ?? $stat['product']->name }}</p>
            <div class="flex items-center gap-3">
                <div class="flex-1">
                    <div class="flex items-center justify-between text-xs mb-1">
                        <span class="text-green-600 font-medium">{{ __('اشتروا') }}: {{ $stat['bought_count'] }}</span>
                        <span class="text-red-600 font-medium">{{ __('لم يشتروا') }}: {{ $stat['not_bought_count'] }}</span>
                    </div>
                    @php $buyPercent = $activeEnrollments->count() > 0 ? round(($stat['bought_count'] / $activeEnrollments->count()) * 100) : 0; @endphp
                    <div class="w-full bg-red-100 rounded-full h-2">
                        <div class="h-2 rounded-full bg-green-500" style="width: {{ $buyPercent }}%"></div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    @endif

    {{-- Tabs --}}
    <div x-data="{ activeTab: @entangle('activeTab') }">
        <div class="border-b border-gray-200 mb-6">
            <nav class="flex gap-2 sm:gap-6 -mb-px overflow-x-auto pb-1">
                <button @click="activeTab = 'overview'"
                        :class="activeTab === 'overview' ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
                        class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap">
                    {{ __('نظرة عامة') }}
                </button>
                <button @click="activeTab = 'enrollments'"
                        :class="activeTab === 'enrollments' ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
                        class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap">
                    {{ __('المشتركون') }}
                </button>
                <button @click="activeTab = 'schedule'"
                        :class="activeTab === 'schedule' ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
                        class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap">
                    {{ __('الجدول') }}
                </button>
                <button @click="activeTab = 'sessions'"
                        :class="activeTab === 'sessions' ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
                        class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap">
                    {{ __('الحصص') }}
                </button>
                <button @click="activeTab = 'attendance'"
                        :class="activeTab === 'attendance' ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
                        class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap">
                    {{ __('الحضور') }}
                </button>
            </nav>
        </div>

        {{-- Overview Tab --}}
        <div x-show="activeTab === 'overview'" x-cloak>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {{-- Group Info Card --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
                    <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('معلومات المجموعة') }}</h3>
                    <dl class="space-y-3">
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('البرنامج') }}</dt>
                            <dd class="text-sm text-gray-800">
                                @if($group->program)
                                <a href="{{ route('programs.edit', $group->program) }}" wire:navigate
                                   class="text-blue-600 hover:text-blue-800 hover:underline">
                                    {{ $group->program->name_ar ?? $group->program->name }}
                                </a>
                                @else
                                    —
                                @endif
                            </dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('الفرع') }}</dt>
                            <dd class="text-sm text-gray-800">{{ $group->branch?->name_ar ?? $group->branch?->name ?? '—' }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('المدرب الرئيسي') }}</dt>
                            <dd class="text-sm text-gray-800">{{ $group->headTrainer?->name ?? '—' }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('الموسم') }}</dt>
                            <dd class="text-sm text-gray-800">{{ $group->season ?? '—' }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('تاريخ البدء') }}</dt>
                            <dd class="text-sm text-gray-800" dir="ltr">{{ $group->start_date?->format('Y-m-d') ?? '—' }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('تاريخ الانتهاء') }}</dt>
                            <dd class="text-sm text-gray-800" dir="ltr">{{ $group->end_date?->format('Y-m-d') ?? '—' }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('السعة القصوى') }}</dt>
                            <dd class="text-sm text-gray-800">{{ $group->max_capacity }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('أنشأه') }}</dt>
                            <dd class="text-sm text-gray-800">{{ $group->creator?->name ?? '—' }}</dd>
                        </div>
                    </dl>

                    @if($group->notes)
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <p class="text-sm text-gray-500 mb-1">{{ __('ملاحظات') }}</p>
                        <p class="text-sm text-gray-700 whitespace-pre-line">{{ $group->notes }}</p>
                    </div>
                    @endif
                </div>

                {{-- Trainer Assignments Card --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
                    <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('المدربون المُعيَّنون') }}</h3>

                    {{-- Current assignments --}}
                    @if($trainerAssignments->isNotEmpty())
                    <div class="space-y-2 mb-4">
                        @foreach($trainerAssignments as $assignment)
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 rounded-full bg-indigo-100 flex items-center justify-center">
                                    <svg class="w-5 h-5 text-indigo-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>
                                <div>
                                    <p class="text-sm font-medium text-gray-800">{{ $assignment->user?->name_ar ?? $assignment->user?->name ?? '—' }}</p>
                                    <p class="text-xs text-gray-500">{{ __('منذ') }} {{ $assignment->start_date?->format('Y-m-d') ?? '—' }}</p>
                                </div>
                            </div>
                            @can('groups.update')
                            <button wire:click="removeTrainer({{ $assignment->id }})"
                                    wire:confirm="{{ __('هل تريد إلغاء تعيين هذا المدرب؟') }}"
                                    class="text-red-500 hover:text-red-700 p-1">
                                <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="M6 18L18 6M6 6l12 12"/>
                                </svg>
                            </button>
                            @endcan
                        </div>
                        @endforeach
                    </div>
                    @else
                    <p class="text-sm text-gray-500 mb-4">{{ __('لا يوجد مدربون مُعيَّنون') }}</p>
                    @endif

                    {{-- Assign new trainer --}}
                    @can('groups.update')
                    <div class="flex items-center gap-2 pt-3 border-t border-gray-100">
                        <select wire:model="assignTrainerId" class="flex-1 text-sm border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                            <option value="">{{ __('اختر مدرب...') }}</option>
                            @foreach($availableTrainers as $trainer)
                            <option value="{{ $trainer->id }}">{{ $trainer->name_ar ?? $trainer->name }}</option>
                            @endforeach
                        </select>
                        <button wire:click="assignTrainer"
                                wire:loading.attr="disabled"
                                class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-sm font-medium whitespace-nowrap">
                            {{ __('تعيين') }}
                        </button>
                    </div>
                    @endcan
                </div>

                {{-- Schedule Grid Card --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
                    <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('مواعيد التدريب') }}</h3>

                    @if($group->schedules->isNotEmpty())
                    @php
                        $dayNames = [0 => 'الأحد', 1 => 'الاثنين', 2 => 'الثلاثاء', 3 => 'الأربعاء', 4 => 'الخميس', 5 => 'الجمعة', 6 => 'السبت'];
                    @endphp
                    <div class="space-y-3">
                        @foreach($group->schedules->sortBy('day_of_week') as $schedule)
                        <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                            <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
                                <span class="text-xs font-bold text-blue-700">
                                    {{ mb_substr($dayNames[$schedule->day_of_week] ?? '', 0, 2) }}
                                </span>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-800">
                                    {{ $dayNames[$schedule->day_of_week] ?? $schedule->day_of_week }}
                                </p>
                                <div class="flex items-center gap-2 text-xs text-gray-500">
                                    <span dir="ltr">{{ \Carbon\Carbon::parse($schedule->start_time)->format('H:i') }} - {{ \Carbon\Carbon::parse($schedule->end_time)->format('H:i') }}</span>
                                    @if($schedule->facility)
                                    <span class="text-gray-300">|</span>
                                    <span>{{ $schedule->facility->name_ar ?? $schedule->facility->name }}</span>
                                    @endif
                                </div>
                            </div>
                            @if($schedule->trainer)
                            <span class="text-xs text-gray-500 flex-shrink-0">{{ $schedule->trainer->name }}</span>
                            @endif
                        </div>
                        @endforeach
                    </div>
                    @else
                    <div class="text-center py-8">
                        <svg class="w-10 h-10 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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="text-gray-500 text-sm">{{ __('لا توجد مواعيد محددة') }}</p>
                    </div>
                    @endif
                </div>

                {{-- Capacity Visual --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 lg:col-span-2">
                    <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('حالة السعة') }}</h3>
                    <div class="flex items-center gap-4">
                        <div class="flex-1">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm text-gray-600">{{ __('المسجلون') }}: {{ $group->current_count }} {{ __('من') }} {{ $group->max_capacity }}</span>
                                <span class="text-sm font-bold {{ $capacityPercent >= 90 ? 'text-red-600' : ($capacityPercent >= 70 ? 'text-amber-600' : 'text-green-600') }}">{{ $capacityPercent }}%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-3">
                                <div class="h-3 rounded-full transition-all duration-500 {{ $capacityPercent >= 90 ? 'bg-red-500' : ($capacityPercent >= 70 ? 'bg-amber-500' : 'bg-green-500') }}"
                                     style="width: {{ min($capacityPercent, 100) }}%"></div>
                            </div>
                        </div>
                        @if($waitlistCount > 0)
                        <div class="text-center px-4 py-2 bg-orange-50 rounded-lg flex-shrink-0">
                            <p class="text-lg font-bold text-orange-700">{{ $waitlistCount }}</p>
                            <p class="text-xs text-orange-600">{{ __('بالانتظار') }}</p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        {{-- Enrollments Tab --}}
        <div x-show="activeTab === 'enrollments'" x-cloak x-data="{ enrollSearch: '' }">
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="p-4 border-b border-gray-100 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                    <h3 class="text-base font-semibold text-gray-800">{{ __('المشتركون النشطون') }} ({{ $activeEnrollments->count() }})</h3>
                    <div class="relative w-full sm:w-72">
                        <svg class="absolute start-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                        <input type="text" x-model="enrollSearch" placeholder="{{ __('بحث بالاسم أو الهاتف...') }}"
                               class="w-full ps-9 pe-3 py-2 text-sm border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder-gray-400">
                    </div>
                </div>

                @if($activeEnrollments->isNotEmpty())
                {{-- The atlas for the الاشتراك column. Every figure there is money
                     collected for THIS billing cycle only, and its colour says
                     why the figure is what it is. --}}
                <div class="px-4 py-3 bg-slate-50 border-b border-gray-200">
                    <div class="flex items-baseline gap-2 mb-2">
                        <span class="text-xs font-semibold text-gray-700">{{ __('دليل ألوان الاشتراك') }}</span>
                        <span class="text-[11px] text-gray-600">
                            {{ __('الدورة الحالية') }}:
                            <span dir="ltr">{{ \Carbon\Carbon::parse($cycleStart)->translatedFormat('j M Y') }}
                                – {{ \Carbon\Carbon::parse($cycleEnd)->subDay()->translatedFormat('j M Y') }}</span>
                        </span>
                    </div>
                    <ul class="flex flex-wrap gap-x-4 gap-y-1.5">
                        @foreach($caseLegend as $case)
                        <li class="flex items-center gap-1.5 text-[11px]">
                            <span aria-hidden="true" class="w-2.5 h-2.5 rounded-full flex-shrink-0 {{ $case->swatchClass() }}"></span>
                            <span class="font-medium text-gray-700">{{ $case->glyph() }} {{ $case->label() }}</span>
                            <span class="text-gray-600">— {{ $case->legend() }}</span>
                        </li>
                        @endforeach
                    </ul>
                </div>
                <div class="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 font-medium text-gray-600">
                                    <button type="button" wire:click="sortEnrollments('name_ar')" class="inline-flex items-center gap-1.5 cursor-pointer hover:text-blue-600 transition-colors group">
                                        {{ __('المشترك') }}
                                        @if($enrollSortBy === 'name_ar')
                                            <svg class="w-4 h-4 text-blue-600 {{ $enrollSortDir === 'asc' ? '' : 'rotate-180' }}" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L10 4.414 6.707 7.707a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>
                                        @else
                                            <svg class="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg>
                                        @endif
                                    </button>
                                </th>
                                <th class="px-4 py-3 text-center font-medium text-gray-600">
                                    <button type="button" wire:click="sortEnrollments('payment_status')" class="inline-flex items-center gap-1.5 cursor-pointer hover:text-blue-600 transition-colors group">
                                        {{ __('الاشتراك') }}
                                        <span class="font-normal text-gray-500">({{ \Carbon\Carbon::parse($cycleStart)->translatedFormat('F Y') }})</span>
                                        @if($enrollSortBy === 'payment_status')
                                            <svg class="w-4 h-4 text-blue-600 {{ $enrollSortDir === 'asc' ? '' : 'rotate-180' }}" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L10 4.414 6.707 7.707a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>
                                        @else
                                            <svg class="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg>
                                        @endif
                                    </button>
                                </th>
                                @foreach($bundleColumns as $col)
                                <th class="px-4 py-3 text-start font-medium text-gray-600">
                                    {{ $col['label'] }}
                                    @if($col['missing_count'] > 0)
                                        <span class="ms-1 px-1.5 py-0.5 text-[10px] bg-red-100 text-red-700 rounded-full">{{ $col['missing_count'] }} {{ __('بدون') }}</span>
                                    @endif
                                </th>
                                @endforeach
                                <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('الحالة') }}</th>
                                <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('نسبة الحضور') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @foreach($activeEnrollments as $enrollment)
                            @php
                                $subRow = $subscriptionCases[$enrollment->participant_id] ?? null;
                                $subCase = $subRow['case'] ?? \App\Domain\Financial\Enums\SubscriptionPaymentCase::NotBilled;
                                $subFacts = $subRow['facts'] ?? null;
                                // Red now means exactly one thing: money is missing
                                // for this cycle. It can no longer contradict the
                                // figure beside it, because both read the same row.
                                $isUnpaid = $subCase->isOwing();
                            @endphp
                            <tr x-show="!enrollSearch || '{{ str_replace("'", "", $enrollment->participant?->person?->name_ar ?? '') }} {{ $enrollment->participant?->person?->name ?? '' }} {{ $enrollment->participant?->person?->phone ?? '' }}'.toLowerCase().includes(enrollSearch.toLowerCase())"
                                class="{{ $isUnpaid ? 'bg-red-50 hover:bg-red-100' : 'hover:bg-gray-50' }} transition">
                                <td class="px-4 py-3">
                                    <div class="flex items-center gap-3">
                                        <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                                            <span class="text-xs font-bold text-blue-700">
                                                {{ mb_substr($enrollment->participant?->person?->name_ar ?? '', 0, 1) }}
                                            </span>
                                        </div>
                                        <div>
                                            <div class="flex items-center gap-2">
                                                @can('participants.list')
                                                <a href="{{ route('participants.show', $enrollment->participant) }}" wire:navigate
                                                   class="text-sm font-medium text-blue-600 hover:text-blue-800 hover:underline">
                                                    {{ $enrollment->participant?->person?->name_ar ?? '—' }}
                                                </a>
                                                @else
                                                <span class="text-sm font-medium text-gray-800">
                                                    {{ $enrollment->participant?->person?->name_ar ?? '—' }}
                                                </span>
                                                @endcan
                                                @if($enrollment->participant?->is_free) <x-ui.free-player-badge :small="true" /> @endif
                                                @php $mType = $enrollment->participant?->membership_type; @endphp
                                                @if($mType)
                                                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium
                                                    {{ $mType === \App\Domain\Participant\Enums\MembershipType::Member
                                                        ? 'bg-emerald-100 text-emerald-700'
                                                        : 'bg-gray-100 text-gray-600' }}">
                                                    {{ $mType->label() }}
                                                </span>
                                                @endif
                                            </div>
                                            @if($enrollment->participant?->person?->phone)
                                            <p class="text-xs text-gray-500" dir="ltr">{{ $enrollment->participant->person->phone }}</p>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-center">
                                    @php
                                        $subPaid = (int) ($subFacts['paid'] ?? 0);
                                        // Owing money, the useful comparison is what is still
                                        // due; settled below the standard price, it is what
                                        // they were billed before the discount came off.
                                        $subDue = $subCase->isOwing()
                                            ? (int) ($subFacts['due'] ?? 0)
                                            : (int) ($subFacts['billed'] ?? 0);
                                        $cases = \App\Domain\Financial\Enums\SubscriptionPaymentCase::class;
                                    @endphp
                                    {{-- The figure is this cycle's programme subscription only,
                                         split out of any bundled invoice; its colour is why. --}}
                                    <div class="inline-flex flex-col items-center gap-0.5" title="{{ $subCase->explain($subFacts) }}">
                                        <span class="inline-flex items-baseline gap-1 text-sm font-bold tabular-nums {{ $subCase->textClass() }}" dir="ltr">
                                            <span aria-hidden="true" class="text-[11px] leading-none">{{ $subCase->glyph() }}</span>
                                            @if($subCase === $cases::Free || $subCase === $cases::NotBilled)
                                                <span class="text-xs">{{ $subCase->label() }}</span>
                                            @else
                                                {{ number_format($subPaid / 100, 0) }}
                                                @if($subDue !== $subPaid)
                                                    <span class="font-normal text-gray-600">/ {{ number_format($subDue / 100, 0) }}</span>
                                                @endif
                                                <span class="text-[10px] font-normal text-gray-600">{{ __('ج.م') }}</span>
                                            @endif
                                        </span>
                                        @if($subCase !== $cases::Free && $subCase !== $cases::NotBilled)
                                            {{-- Colour alone must never be the only carrier of
                                                 meaning (WCAG 1.4.1); the case is named here too. --}}
                                            <span class="text-[10px] leading-tight {{ $subCase->textClass() }}">{{ $subCase->label() }}</span>
                                        @endif
                                        <span class="sr-only">{{ $subCase->explain($subFacts) }}</span>
                                    </div>
                                </td>
                                @foreach($bundleColumns as $col)
                                @php $b = $col['rows'][$enrollment->participant_id] ?? null; @endphp
                                <td class="px-4 py-3">
                                    @if($enrollment->participant?->is_free)
                                        <span class="text-gray-400 text-xs">—</span>
                                    @elseif(!$b || !$b['owned'])
                                        {{-- Required by the programme but never bought — this is
                                             the flag the group view exists to surface. --}}
                                        <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs {{ $col['required'] ? 'bg-red-100 text-red-700 font-bold' : 'bg-gray-100 text-gray-500' }} rounded-full">
                                            @if($col['required'])
                                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                                            @endif
                                            {{ __('لم يشترِ') }}
                                        </span>
                                    @else
                                        @php
                                            // Paid in full, still paying it off, or bought and not
                                            // yet paid at all — three different things, and the
                                            // roster has to say which rather than only colouring.
                                            $bLabel = $b['fully_paid']
                                                ? __('مدفوع بالكامل')
                                                : ($b['installment'] ? __('أقساط') : __('لم يُسدَّد'));
                                            $bTitle = $b['fully_paid']
                                                ? __('سدد قيمة :name كاملة', ['name' => $col['label']])
                                                : __('سدد :paid من :total من قيمة :name', [
                                                    'paid' => number_format($b['paid'] / 100, 0) . ' ' . __('ج.م'),
                                                    'total' => number_format($b['billed'] / 100, 0) . ' ' . __('ج.م'),
                                                    'name' => $col['label'],
                                                ]);
                                            if ($b['plan']) {
                                                $bTitle .= ' — ' . __('قسط :n من :total', ['n' => $b['plan']['paid'], 'total' => $b['plan']['total']]);
                                            }
                                            if ($b['estimated_total']) {
                                                // The money was typed into a free-text line, so the
                                                // agreed total is not on any invoice; the product's
                                                // price for this member is the best figure there is.
                                                $bTitle .= ' — ' . __('الإجمالي مقدَّر من سعر المنتج (سُجّل الدفع كبند يدوي)');
                                            }
                                        @endphp
                                        <div class="min-w-[92px]" title="{{ $bTitle }}">
                                            <div class="h-1.5 w-full bg-gray-200 rounded-full overflow-hidden">
                                                <div class="h-full rounded-full {{ $b['fully_paid'] ? 'bg-green-500' : ($b['paid'] > 0 ? 'bg-amber-500' : 'bg-red-400') }}"
                                                     style="width: {{ max($b['percent'], $b['paid'] > 0 ? 4 : 0) }}%"></div>
                                            </div>
                                            <div class="mt-1 text-[11px] flex items-center gap-1" dir="ltr">
                                                <span class="font-bold {{ $b['fully_paid'] ? 'text-green-700' : ($b['paid'] > 0 ? 'text-amber-700' : 'text-red-700') }}">
                                                    {{ number_format($b['paid'] / 100, 0) }}
                                                </span>
                                                <span class="text-gray-400">/</span>
                                                <span class="text-gray-500">{{ number_format($b['billed'] / 100, 0) }}</span>
                                                @if($b['estimated_total'])
                                                    <span class="text-gray-400" aria-hidden="true">≈</span>
                                                @endif
                                                <span class="text-gray-400">({{ $b['percent'] }}%)</span>
                                            </div>
                                            {{-- Colour is never the only carrier of meaning (WCAG 1.4.1). --}}
                                            <div class="text-[10px] leading-tight {{ $b['fully_paid'] ? 'text-green-700' : ($b['paid'] > 0 ? 'text-amber-700' : 'text-red-700') }}">
                                                {{ $bLabel }}@if($b['plan']) <span class="text-gray-500" dir="ltr">{{ $b['plan']['paid'] }}/{{ $b['plan']['total'] }}</span>@endif
                                            </div>
                                            <span class="sr-only">{{ $bTitle }}</span>
                                        </div>
                                    @endif
                                </td>
                                @endforeach
                                <td class="px-4 py-3 text-center">
                                    <span class="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded-full">
                                        {{ __('نشط') }}
                                    </span>
                                </td>
                                <td class="px-4 py-3 text-center">
                                    @php
                                        $pRate = $participantAttendanceRates[$enrollment->participant_id] ?? null;
                                    @endphp
                                    @if($pRate !== null)
                                    <span class="text-sm font-medium {{ $pRate >= 75 ? 'text-green-600' : ($pRate >= 50 ? 'text-amber-600' : 'text-red-600') }}">
                                        {{ $pRate }}%
                                    </span>
                                    @else
                                    <span class="text-gray-400">—</span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="px-4 py-12 text-center">
                    <svg class="w-10 h-10 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
                    <p class="text-gray-500 text-sm">{{ __('لا يوجد مشتركون نشطون في هذه المجموعة') }}</p>
                </div>
                @endif
            </div>
        </div>

        {{-- Schedule Tab --}}
        <div x-show="activeTab === 'schedule'" x-cloak>
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-base font-semibold text-gray-800">{{ __('الجدول الأسبوعي') }}</h3>
                    @can('groups.list')
                    <a href="{{ route('groups.print', $group) }}" target="_blank"
                       class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">
                        <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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                        </svg>
                        {{ __('طباعة') }}
                    </a>
                    @endcan
                </div>

                @if($group->schedules->isNotEmpty())
                @php
                    $dayNames = [0 => 'الأحد', 1 => 'الاثنين', 2 => 'الثلاثاء', 3 => 'الأربعاء', 4 => 'الخميس', 5 => 'الجمعة', 6 => 'السبت'];
                    $schedulesByDay = $group->schedules->groupBy('day_of_week');
                @endphp
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-7 gap-2">
                    @foreach($dayNames as $dayNum => $dayName)
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="bg-gray-50 px-3 py-2 border-b border-gray-200">
                            <p class="text-xs font-semibold text-gray-700 text-center">{{ $dayName }}</p>
                        </div>
                        <div class="p-2 min-h-[60px]">
                            @if(isset($schedulesByDay[$dayNum]))
                                @foreach($schedulesByDay[$dayNum] as $schedule)
                                <div class="p-2 bg-blue-50 rounded text-center mb-1 last:mb-0">
                                    <p class="text-xs font-medium text-blue-800" dir="ltr">
                                        {{ \Carbon\Carbon::parse($schedule->start_time)->format('H:i') }}
                                    </p>
                                    <p class="text-xs text-blue-600" dir="ltr">
                                        {{ \Carbon\Carbon::parse($schedule->end_time)->format('H:i') }}
                                    </p>
                                    @if($schedule->facility)
                                    <p class="text-[10px] text-blue-500 mt-0.5 truncate">{{ $schedule->facility->name_ar ?? $schedule->facility->name }}</p>
                                    @endif
                                </div>
                                @endforeach
                            @else
                                <div class="flex items-center justify-center h-full min-h-[40px]">
                                    <span class="text-xs text-gray-300">—</span>
                                </div>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>

                {{-- Schedule Details Table --}}
                <div class="mt-6 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 font-medium text-gray-600">{{ __('اليوم') }}</th>
                                <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('الوقت') }}</th>
                                <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('المنشأة') }}</th>
                                <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('المدرب') }}</th>
                                <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('فعّال') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @foreach($group->schedules->sortBy('day_of_week') as $schedule)
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-3 font-medium text-gray-800">{{ $dayNames[$schedule->day_of_week] ?? '' }}</td>
                                <td class="px-4 py-3 text-gray-600" dir="ltr">
                                    {{ \Carbon\Carbon::parse($schedule->start_time)->format('H:i') }} - {{ \Carbon\Carbon::parse($schedule->end_time)->format('H:i') }}
                                </td>
                                <td class="px-4 py-3 text-gray-600">{{ $schedule->facility?->name_ar ?? $schedule->facility?->name ?? '—' }}</td>
                                <td class="px-4 py-3 text-gray-600">{{ $schedule->trainer?->name ?? '—' }}</td>
                                <td class="px-4 py-3 text-center">
                                    @if($schedule->is_active)
                                    <span class="inline-block w-2 h-2 rounded-full bg-green-500"></span>
                                    @else
                                    <span class="inline-block w-2 h-2 rounded-full bg-gray-300"></span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="text-center py-12">
                    <svg class="w-10 h-10 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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="text-gray-500 text-sm">{{ __('لم يتم تحديد جدول بعد') }}</p>
                </div>
                @endif
            </div>
        </div>

        {{-- Sessions Tab --}}
        <div x-show="activeTab === 'sessions'" x-cloak>
            <div class="space-y-6">
                {{-- Upcoming Sessions --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="p-4 border-b border-gray-100">
                        <h3 class="text-base font-semibold text-gray-800">{{ __('الحصص القادمة') }}</h3>
                    </div>

                    @if($upcomingSessions->isNotEmpty())
                    <div class="divide-y divide-gray-100">
                        @foreach($upcomingSessions as $session)
                        <div class="p-4 hover:bg-gray-50 transition">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center flex-shrink-0">
                                        <span class="text-xs font-bold text-blue-700" dir="ltr">
                                            {{ $session->session_date?->format('d') }}
                                        </span>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-gray-800" dir="ltr">
                                            {{ $session->session_date?->format('Y-m-d') }}
                                            @if($session->session_date)
                                            @php
                                                $sessionDayNames = [0 => 'الأحد', 1 => 'الاثنين', 2 => 'الثلاثاء', 3 => 'الأربعاء', 4 => 'الخميس', 5 => 'الجمعة', 6 => 'السبت'];
                                            @endphp
                                            <span class="text-gray-500 text-xs me-2">({{ $sessionDayNames[$session->session_date->dayOfWeek] ?? '' }})</span>
                                            @endif
                                        </p>
                                        <p class="text-xs text-gray-500" dir="ltr">
                                            {{ $session->start_time ? \Carbon\Carbon::parse($session->start_time)->format('H:i') : '' }}
                                            @if($session->end_time)
                                            - {{ \Carbon\Carbon::parse($session->end_time)->format('H:i') }}
                                            @endif
                                        </p>
                                    </div>
                                </div>
                                <div class="flex items-center gap-3">
                                    @if($session->topic)
                                    <span class="text-xs text-gray-500 hidden sm:inline">{{ Str::limit($session->topic, 30) }}</span>
                                    @endif
                                    @php
                                        $sStatusValue = $session->status->value ?? $session->status;
                                        $sStatusColors = [
                                            'scheduled' => 'blue',
                                            'in_progress' => 'amber',
                                            'completed' => 'green',
                                            'cancelled' => 'red',
                                            'rescheduled' => 'purple',
                                        ];
                                        $sStatusLabels = [
                                            'scheduled' => 'مجدولة',
                                            'in_progress' => 'جارية',
                                            'completed' => 'مكتملة',
                                            'cancelled' => 'ملغاة',
                                            'rescheduled' => 'مؤجلة',
                                        ];
                                        $sColor = $sStatusColors[$sStatusValue] ?? 'gray';
                                    @endphp
                                    <span class="px-2 py-0.5 text-xs bg-{{ $sColor }}-100 text-{{ $sColor }}-700 rounded-full">
                                        {{ __($sStatusLabels[$sStatusValue] ?? $sStatusValue) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @else
                    <div class="px-4 py-8 text-center">
                        <svg class="w-10 h-10 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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="text-gray-500 text-sm">{{ __('لا توجد حصص قادمة') }}</p>
                    </div>
                    @endif
                </div>

                {{-- Recent Sessions --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="p-4 border-b border-gray-100">
                        <h3 class="text-base font-semibold text-gray-800">{{ __('الحصص الأخيرة') }}</h3>
                    </div>

                    @if($recentSessions->isNotEmpty())
                    <div class="divide-y divide-gray-100">
                        @foreach($recentSessions as $session)
                        <div class="p-4 hover:bg-gray-50 transition">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
                                        <span class="text-xs font-bold text-gray-600" dir="ltr">
                                            {{ $session->session_date?->format('d') }}
                                        </span>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-gray-800" dir="ltr">
                                            {{ $session->session_date?->format('Y-m-d') }}
                                            @if($session->session_date)
                                            @php
                                                $sessionDayNames2 = [0 => 'الأحد', 1 => 'الاثنين', 2 => 'الثلاثاء', 3 => 'الأربعاء', 4 => 'الخميس', 5 => 'الجمعة', 6 => 'السبت'];
                                            @endphp
                                            <span class="text-gray-500 text-xs me-2">({{ $sessionDayNames2[$session->session_date->dayOfWeek] ?? '' }})</span>
                                            @endif
                                        </p>
                                        <div class="flex items-center gap-2 text-xs text-gray-500">
                                            <span dir="ltr">
                                                {{ $session->start_time ? \Carbon\Carbon::parse($session->start_time)->format('H:i') : '' }}
                                                @if($session->end_time)
                                                - {{ \Carbon\Carbon::parse($session->end_time)->format('H:i') }}
                                                @endif
                                            </span>
                                            @if($session->actual_participants !== null)
                                            <span class="text-gray-300">|</span>
                                            <span>{{ __('حضور') }}: {{ $session->actual_participants }}</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="flex items-center gap-3">
                                    @if($session->topic)
                                    <span class="text-xs text-gray-500 hidden sm:inline">{{ Str::limit($session->topic, 30) }}</span>
                                    @endif
                                    @php
                                        $sStatusValue2 = $session->status->value ?? $session->status;
                                        $sColor2 = $sStatusColors[$sStatusValue2] ?? 'gray';
                                    @endphp
                                    <span class="px-2 py-0.5 text-xs bg-{{ $sColor2 }}-100 text-{{ $sColor2 }}-700 rounded-full">
                                        {{ __($sStatusLabels[$sStatusValue2] ?? $sStatusValue2) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @else
                    <div class="px-4 py-8 text-center">
                        <svg class="w-10 h-10 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <p class="text-gray-500 text-sm">{{ __('لا توجد حصص سابقة') }}</p>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Attendance Tab --}}
        <div x-show="activeTab === 'attendance'" x-cloak>
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
                <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('ملخص حضور المجموعة') }}</h3>

                @if($totalAttendanceRecords > 0)
                {{-- Attendance Rate Bar --}}
                <div class="mb-6">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm text-gray-600">{{ __('نسبة الحضور الإجمالية') }}</span>
                        <span class="text-sm font-bold {{ $attendanceRate >= 75 ? 'text-green-600' : ($attendanceRate >= 50 ? 'text-amber-600' : 'text-red-600') }}">{{ $attendanceRate }}%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-3">
                        <div class="h-3 rounded-full transition-all duration-500 {{ $attendanceRate >= 75 ? 'bg-green-500' : ($attendanceRate >= 50 ? 'bg-amber-500' : 'bg-red-500') }}"
                             style="width: {{ min($attendanceRate, 100) }}%"></div>
                    </div>
                </div>

                {{-- Stats Grid --}}
                <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
                    <div class="text-center p-3 bg-green-50 rounded-lg">
                        <p class="text-2xl font-bold text-green-700">{{ $presentCount }}</p>
                        <p class="text-xs text-green-600 mt-1">{{ __('حاضر') }}</p>
                    </div>
                    <div class="text-center p-3 bg-amber-50 rounded-lg">
                        <p class="text-2xl font-bold text-amber-700">{{ $lateCount }}</p>
                        <p class="text-xs text-amber-600 mt-1">{{ __('متأخر') }}</p>
                    </div>
                    <div class="text-center p-3 bg-red-50 rounded-lg">
                        <p class="text-2xl font-bold text-red-700">{{ $absentCount }}</p>
                        <p class="text-xs text-red-600 mt-1">{{ __('غائب') }}</p>
                    </div>
                    <div class="text-center p-3 bg-yellow-50 rounded-lg">
                        <p class="text-2xl font-bold text-yellow-700">{{ $partialCount }}</p>
                        <p class="text-xs text-yellow-600 mt-1">{{ __('حضور جزئي') }}</p>
                    </div>
                    <div class="text-center p-3 bg-blue-50 rounded-lg">
                        <p class="text-2xl font-bold text-blue-700">{{ $excusedCount }}</p>
                        <p class="text-xs text-blue-600 mt-1">{{ __('معذور') }}</p>
                    </div>
                </div>

                <div class="mt-4 pt-4 border-t border-gray-100 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
                    <p class="text-sm text-gray-500">
                        {{ __('إجمالي سجلات الحضور') }}: <span class="font-medium text-gray-700">{{ $totalAttendanceRecords }}</span>
                    </p>
                    <p class="text-sm text-gray-500">
                        {{ __('الحصص المكتملة') }}: <span class="font-medium text-gray-700">{{ $completedSessions }}</span> {{ __('من') }} <span class="font-medium text-gray-700">{{ $totalSessions }}</span>
                    </p>
                </div>
                @else
                <div class="text-center py-8">
                    <svg class="w-10 h-10 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <p class="text-gray-500 text-sm">{{ __('لا توجد سجلات حضور بعد') }}</p>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
