<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>

        {{-- Capacity % --}}
        <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-{{ $capacityPercent >= 90 ? 'red' : ($capacityPercent >= 70 ? 'amber' : 'green') }}-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-{{ $capacityPercent >= 90 ? 'red' : ($capacityPercent >= 70 ? 'amber' : 'green') }}-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('نسبة الامتلاء') }}</p>
                    <p class="text-lg font-bold text-gray-800">{{ $capacityPercent }}%</p>
                </div>
            </div>
        </div>

        {{-- Total Sessions --}}
        <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-purple-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('إجمالي الحصص') }}</p>
                    <p class="text-lg font-bold text-gray-800">{{ $totalSessions }}</p>
                </div>
            </div>
        </div>

        {{-- Completed Sessions --}}
        <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-gray-800">{{ $completedSessions }}</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>

    {{-- 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>

                {{-- 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>
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="p-4 border-b border-gray-100 flex items-center justify-between">
                    <h3 class="text-base font-semibold text-gray-800">{{ __('المشتركون النشطون') }} ({{ $activeEnrollments->count() }})</h3>
                </div>

                @if($activeEnrollments->isNotEmpty())
                <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">{{ __('المشترك') }}</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>
                                <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)
                            <tr class="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>
                                            @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?->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-gray-600" dir="ltr">
                                    {{ $enrollment->enrollment_date?->format('Y-m-d') ?? '—' }}
                                </td>
                                <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>
