<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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                    </svg>
                </div>
                <div>
                    <h1 class="text-xl font-bold text-gray-800">
                        {{ $program->name_ar }}
                    </h1>
                    @if($program->name)
                    <p class="text-sm text-gray-500" dir="ltr">
                        {{ $program->name }}
                    </p>
                    @endif
                    <div class="flex flex-wrap items-center gap-2 mt-2">
                        {{-- Status Badge --}}
                        @php
                            $statusValue = $program->status->value ?? $program->status;
                            $statusColors = [
                                'draft' => 'gray',
                                'active' => 'green',
                                'full' => 'amber',
                                'closed' => 'red',
                                'archived' => 'slate',
                            ];
                            $statusLabels = [
                                'draft' => 'مسودة',
                                'active' => 'نشط',
                                'full' => 'مكتمل',
                                'closed' => 'مغلق',
                                'archived' => 'مؤرشف',
                            ];
                            $sColor = $statusColors[$statusValue] ?? 'gray';
                        @endphp
                        <span class="px-2 py-0.5 text-xs bg-{{ $sColor }}-100 text-{{ $sColor }}-700 rounded-full font-medium">
                            {{ __($statusLabels[$statusValue] ?? $statusValue) }}
                        </span>

                        {{-- Activity Badge --}}
                        @if($program->activity)
                        <span class="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full font-medium">
                            {{ $program->activity->name_ar ?? $program->activity->name }}
                        </span>
                        @endif

                        {{-- Registration Status --}}
                        @if($program->registration_open)
                        <span class="px-2 py-0.5 text-xs bg-emerald-100 text-emerald-700 rounded-full font-medium">
                            {{ __('التسجيل مفتوح') }}
                        </span>
                        @else
                        <span class="px-2 py-0.5 text-xs bg-red-100 text-red-700 rounded-full font-medium">
                            {{ __('التسجيل مغلق') }}
                        </span>
                        @endif
                    </div>
                </div>
            </div>
            <div class="flex items-center gap-2 self-start sm:self-auto">
                @can('programs.update')
                <a href="{{ route('programs.edit', $program) }}" 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('programs.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">
        {{-- Total Groups --}}
        <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-indigo-50 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('المجموعات') }}</p>
                    <p class="text-lg font-bold text-gray-800">{{ $totalGroups }}</p>
                </div>
            </div>
        </div>

        {{-- Active Enrollments --}}
        <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">{{ $activeEnrollments }}</p>
                </div>
            </div>
        </div>

        {{-- Total 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-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.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('السعة الإجمالية') }}</p>
                    <p class="text-lg font-bold text-gray-800">{{ $totalCapacity }}</p>
                </div>
            </div>
        </div>

        {{-- Fill 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-amber-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-amber-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">{{ $fillRate }}%</p>
                </div>
            </div>
        </div>

        {{-- Total Revenue --}}
        <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 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-gray-800" dir="ltr">{{ number_format($totalRevenue / 100, 2) }}</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-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="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">{{ $waitlistTotal }}</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 = 'groups'"
                        :class="activeTab === 'groups' ? '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 = 'settings'"
                        :class="activeTab === 'settings' ? '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">
                {{-- Program Details 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">
                        @if($program->description_ar)
                        <div>
                            <dt class="text-sm text-gray-500 mb-1">{{ __('الوصف') }}</dt>
                            <dd class="text-sm text-gray-800 whitespace-pre-line">{{ $program->description_ar }}</dd>
                        </div>
                        @endif

                        @if($program->objectives && count($program->objectives) > 0)
                        <div>
                            <dt class="text-sm text-gray-500 mb-1">{{ __('الأهداف') }}</dt>
                            <dd>
                                <ul class="list-disc list-inside space-y-1">
                                    @foreach($program->objectives as $objective)
                                    <li class="text-sm text-gray-800">{{ $objective }}</li>
                                    @endforeach
                                </ul>
                            </dd>
                        </div>
                        @endif

                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('المستوى') }}</dt>
                            <dd class="text-sm text-gray-800">
                                @php
                                    $skillLabels = ['beginner' => 'مبتدئ', 'intermediate' => 'متوسط', 'advanced' => 'متقدم', 'professional' => 'محترف', 'all' => 'جميع المستويات'];
                                @endphp
                                {{ __($skillLabels[$program->skill_level] ?? $program->skill_level ?? '—') }}
                            </dd>
                        </div>

                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('الفئة العمرية') }}</dt>
                            <dd class="text-sm text-gray-800">
                                @if($program->age_min && $program->age_max)
                                    {{ $program->age_min }} - {{ $program->age_max }} {{ __('سنة') }}
                                @elseif($program->age_min)
                                    {{ __('من') }} {{ $program->age_min }} {{ __('سنة') }}
                                @elseif($program->age_max)
                                    {{ __('حتى') }} {{ $program->age_max }} {{ __('سنة') }}
                                @else
                                    {{ __('غير محدد') }}
                                @endif
                            </dd>
                        </div>

                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('الجنس') }}</dt>
                            <dd class="text-sm text-gray-800">
                                @php
                                    $genderLabels = ['male' => 'ذكور', 'female' => 'إناث', 'mixed' => 'مختلط'];
                                @endphp
                                {{ __($genderLabels[$program->gender] ?? '—') }}
                            </dd>
                        </div>

                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('مدة البرنامج') }}</dt>
                            <dd class="text-sm text-gray-800">
                                @if($program->program_duration_weeks)
                                    {{ $program->program_duration_weeks }} {{ __('أسبوع') }}
                                @else
                                    {{ __('غير محدد') }}
                                @endif
                            </dd>
                        </div>

                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('الحصص في الأسبوع') }}</dt>
                            <dd class="text-sm text-gray-800">
                                {{ $program->sessions_per_week ?? '—' }}
                            </dd>
                        </div>

                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('مدة الحصة') }}</dt>
                            <dd class="text-sm text-gray-800">
                                @if($program->session_duration_minutes)
                                    {{ $program->session_duration_minutes }} {{ __('دقيقة') }}
                                @else
                                    —
                                @endif
                            </dd>
                        </div>

                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('إجمالي الحصص') }}</dt>
                            <dd class="text-sm text-gray-800">
                                {{ $program->total_sessions ?? '—' }}
                            </dd>
                        </div>

                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('الحد الأدنى للمشتركين') }}</dt>
                            <dd class="text-sm text-gray-800">{{ $program->min_participants ?? '—' }}</dd>
                        </div>

                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('الحد الأقصى للمشتركين') }}</dt>
                            <dd class="text-sm text-gray-800">{{ $program->max_participants ?? '—' }}</dd>
                        </div>

                        @if($program->defaultTrainer)
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('المدرب الافتراضي') }}</dt>
                            <dd class="text-sm text-gray-800">{{ $program->defaultTrainer->name }}</dd>
                        </div>
                        @endif

                        @if($program->branch)
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('الفرع') }}</dt>
                            <dd class="text-sm text-gray-800">{{ $program->branch->name_ar ?? $program->branch->name }}</dd>
                        </div>
                        @endif
                    </dl>
                </div>

                {{-- Requirements 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-4">
                        {{-- Prerequisites --}}
                        <div>
                            <dt class="text-sm text-gray-500 mb-1">{{ __('المتطلبات المسبقة') }}</dt>
                            <dd>
                                @if($program->prerequisites && count($program->prerequisites) > 0)
                                <ul class="list-disc list-inside space-y-1">
                                    @foreach($program->prerequisites as $prerequisite)
                                    <li class="text-sm text-gray-800">{{ $prerequisite }}</li>
                                    @endforeach
                                </ul>
                                @else
                                <p class="text-sm text-gray-400">{{ __('لا توجد متطلبات مسبقة') }}</p>
                                @endif
                            </dd>
                        </div>

                        {{-- Equipment --}}
                        <div>
                            <dt class="text-sm text-gray-500 mb-1">{{ __('المعدات المطلوبة') }}</dt>
                            <dd>
                                @if($program->equipment_required && count($program->equipment_required) > 0)
                                <div class="flex flex-wrap gap-2">
                                    @foreach($program->equipment_required as $equipment)
                                    <span class="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded-lg">{{ $equipment }}</span>
                                    @endforeach
                                </div>
                                @else
                                <p class="text-sm text-gray-400">{{ __('لا توجد معدات مطلوبة') }}</p>
                                @endif
                            </dd>
                        </div>

                        {{-- Attendance Requirement --}}
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('الحد الأدنى للحضور') }}</dt>
                            <dd class="text-sm text-gray-800">
                                @if($program->attendance_requirement_percent)
                                    {{ $program->attendance_requirement_percent }}%
                                @else
                                    {{ __('غير محدد') }}
                                @endif
                            </dd>
                        </div>

                        {{-- Assessment Required --}}
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('تقييم مطلوب') }}</dt>
                            <dd class="text-sm text-gray-800">
                                @if($program->assessment_required)
                                <span class="text-green-600">{{ __('نعم') }}</span>
                                @else
                                <span class="text-gray-500">{{ __('لا') }}</span>
                                @endif
                            </dd>
                        </div>

                        {{-- Facility Type --}}
                        @if($program->facility_type)
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('نوع المنشأة') }}</dt>
                            <dd class="text-sm text-gray-800">{{ $program->facility_type }}</dd>
                        </div>
                        @endif

                        {{-- Allow Waitlist --}}
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('قائمة انتظار') }}</dt>
                            <dd class="text-sm text-gray-800">
                                @if($program->allow_waitlist)
                                <span class="text-green-600">{{ __('مفعّلة') }}</span>
                                @else
                                <span class="text-gray-500">{{ __('معطّلة') }}</span>
                                @endif
                            </dd>
                        </div>

                        {{-- Program Dates --}}
                        @if($program->program_start_date || $program->program_end_date)
                        <div class="border-t border-gray-100 pt-3">
                            <dt class="text-sm text-gray-500 mb-2">{{ __('فترة البرنامج') }}</dt>
                            <dd class="flex items-center gap-2 text-sm text-gray-800" dir="ltr">
                                <span>{{ $program->program_start_date?->format('Y-m-d') ?? '—' }}</span>
                                <span class="text-gray-400">&rarr;</span>
                                <span>{{ $program->program_end_date?->format('Y-m-d') ?? '—' }}</span>
                            </dd>
                        </div>
                        @endif
                    </dl>
                </div>
            </div>
        </div>

        {{-- Groups Tab --}}
        <div x-show="activeTab === 'groups'" 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">{{ __('المجموعات') }}</h3>
                    @can('groups.create')
                    <a href="{{ route('groups.create') }}" wire:navigate
                       class="px-3 py-1.5 text-xs font-medium bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                        {{ __('إضافة مجموعة') }}
                    </a>
                    @endcan
                </div>

                @if($groups->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-center 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-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($groups as $group)
                            @php
                                $gStatusValue = $group->status->value ?? $group->status;
                                $gStatusColors = [
                                    'forming' => 'blue',
                                    'active' => 'green',
                                    'full' => 'amber',
                                    'on_hold' => 'orange',
                                    'completed' => 'purple',
                                    'cancelled' => 'red',
                                ];
                                $gStatusLabels = [
                                    'forming' => 'قيد التشكيل',
                                    'active' => 'نشط',
                                    'full' => 'مكتمل',
                                    'on_hold' => 'معلق',
                                    'completed' => 'مكتمل',
                                    'cancelled' => 'ملغي',
                                ];
                                $gColor = $gStatusColors[$gStatusValue] ?? 'gray';
                            @endphp
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-3">
                                    @can('groups.update')
                                    <a href="{{ route('groups.edit', $group) }}" wire:navigate
                                       class="font-medium text-blue-600 hover:text-blue-800 hover:underline">
                                        {{ $group->name_ar ?? $group->name }}
                                    </a>
                                    @else
                                    <span class="font-medium text-gray-800">{{ $group->name_ar ?? $group->name }}</span>
                                    @endcan
                                    @if($group->code)
                                    <p class="text-xs text-gray-400 font-mono" dir="ltr">{{ $group->code }}</p>
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <span class="px-2 py-0.5 text-xs bg-{{ $gColor }}-100 text-{{ $gColor }}-700 rounded-full font-medium">
                                        {{ __($gStatusLabels[$gStatusValue] ?? $gStatusValue) }}
                                    </span>
                                </td>
                                <td class="px-4 py-3 text-gray-600">
                                    {{ $group->headTrainer?->name ?? '—' }}
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <span class="font-medium {{ $group->current_count >= $group->max_capacity ? 'text-red-600' : 'text-gray-800' }}">
                                        {{ $group->current_count }}/{{ $group->max_capacity }}
                                    </span>
                                </td>
                                <td class="px-4 py-3">
                                    @if($group->schedules->isNotEmpty())
                                    @php
                                        $dayNames = [0 => 'أحد', 1 => 'إثنين', 2 => 'ثلاثاء', 3 => 'أربعاء', 4 => 'خميس', 5 => 'جمعة', 6 => 'سبت'];
                                    @endphp
                                    <div class="flex flex-wrap gap-1">
                                        @foreach($group->schedules->take(3) as $schedule)
                                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-700 rounded">
                                            {{ $dayNames[$schedule->day_of_week] ?? $schedule->day_of_week }}
                                            <span dir="ltr">{{ \Carbon\Carbon::parse($schedule->start_time)->format('H:i') }}</span>
                                        </span>
                                        @endforeach
                                        @if($group->schedules->count() > 3)
                                        <span class="text-xs text-gray-400">+{{ $group->schedules->count() - 3 }}</span>
                                        @endif
                                    </div>
                                    @else
                                    <span class="text-xs text-gray-400">{{ __('لا يوجد جدول') }}</span>
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-center text-xs text-gray-500" dir="ltr">
                                    @if($group->start_date)
                                    {{ $group->start_date->format('Y-m-d') }}
                                    @else
                                    —
                                    @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>

        {{-- 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">
                    <h3 class="text-base font-semibold text-gray-800">{{ __('التسجيلات الأخيرة') }}</h3>
                </div>

                @if($recentEnrollments->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($recentEnrollments as $enrollment)
                            @php
                                $eStatusValue = $enrollment->status->value ?? $enrollment->status;
                                $eStatusColors = [
                                    'pending' => 'amber',
                                    'active' => 'green',
                                    'completed' => 'purple',
                                    'cancelled' => 'red',
                                    'expired' => 'gray',
                                    'waitlisted' => 'blue',
                                ];
                                $eStatusLabels = [
                                    'pending' => 'معلق',
                                    'active' => 'نشط',
                                    'completed' => 'مكتمل',
                                    'cancelled' => 'ملغي',
                                    'expired' => 'منتهي',
                                    'waitlisted' => 'قائمة انتظار',
                                ];
                                $eColor = $eStatusColors[$eStatusValue] ?? 'gray';
                            @endphp
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-3">
                                    @if($enrollment->participant)
                                    @can('participants.list')
                                    <a href="{{ route('participants.show', $enrollment->participant) }}" wire:navigate
                                       class="font-medium text-blue-600 hover:text-blue-800 hover:underline">
                                        {{ $enrollment->participant->person?->name_ar ?? '—' }}
                                    </a>
                                    @else
                                    <span class="font-medium text-gray-800">{{ $enrollment->participant->person?->name_ar ?? '—' }}</span>
                                    @endcan
                                    @else
                                    <span class="text-gray-400">—</span>
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-gray-600">
                                    {{ $enrollment->group?->name_ar ?? $enrollment->group?->name ?? '—' }}
                                </td>
                                <td class="px-4 py-3 text-center text-xs text-gray-500" 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-{{ $eColor }}-100 text-{{ $eColor }}-700 rounded-full font-medium">
                                        {{ __($eStatusLabels[$eStatusValue] ?? $eStatusValue) }}
                                    </span>
                                </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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                    </svg>
                    <p class="text-gray-500 text-sm">{{ __('لا توجد تسجيلات لهذا البرنامج') }}</p>
                </div>
                @endif
            </div>
        </div>

        {{-- Settings Tab --}}
        <div x-show="activeTab === 'settings'" x-cloak>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {{-- Billing Details --}}
                <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">
                                @php
                                    $renewalLabels = [
                                        'auto_renew' => 'تجديد تلقائي',
                                        'manual' => 'يدوي',
                                        'none' => 'بدون تجديد',
                                        'notify_before_expiry' => 'إشعار قبل الانتهاء',
                                    ];
                                    $renewalValue = $program->renewal_policy?->value ?? $program->renewal_policy;
                                @endphp
                                {{ __($renewalLabels[$renewalValue] ?? $renewalValue ?? '—') }}
                            </dd>
                        </div>

                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('دورة الفوترة') }}</dt>
                            <dd class="text-sm text-gray-800">
                                @php
                                    $billingLabels = [
                                        'monthly' => 'شهري',
                                        'quarterly' => 'ربع سنوي',
                                        'semi_annual' => 'نصف سنوي',
                                        'annual' => 'سنوي',
                                        'one_time' => 'مرة واحدة',
                                        'per_session' => 'لكل حصة',
                                    ];
                                @endphp
                                {{ __($billingLabels[$program->billing_cycle] ?? $program->billing_cycle ?? '—') }}
                            </dd>
                        </div>

                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('يوم الفوترة') }}</dt>
                            <dd class="text-sm text-gray-800">
                                {{ $program->billing_day ? __('يوم') . ' ' . $program->billing_day : '—' }}
                            </dd>
                        </div>

                        @if($program->cancellation_policy)
                        <div>
                            <dt class="text-sm text-gray-500 mb-1">{{ __('سياسة الإلغاء') }}</dt>
                            <dd class="text-sm text-gray-800 whitespace-pre-line">{{ $program->cancellation_policy }}</dd>
                        </div>
                        @endif

                        @if($program->refund_policy)
                        <div>
                            <dt class="text-sm text-gray-500 mb-1">{{ __('سياسة الاسترداد') }}</dt>
                            <dd class="text-sm text-gray-800 whitespace-pre-line">{{ $program->refund_policy }}</dd>
                        </div>
                        @endif
                    </dl>
                </div>

                {{-- Registration Settings --}}
                <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">
                                @if($program->registration_open)
                                <span class="text-green-600 font-medium">{{ __('نعم') }}</span>
                                @else
                                <span class="text-red-600 font-medium">{{ __('لا') }}</span>
                                @endif
                            </dd>
                        </div>

                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('آخر موعد للتسجيل') }}</dt>
                            <dd class="text-sm text-gray-800" dir="ltr">
                                {{ $program->registration_deadline?->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">
                                {{ $program->program_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">
                                {{ $program->program_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">
                                @if($program->featured)
                                <span class="text-amber-600 font-medium">{{ __('نعم') }}</span>
                                @else
                                <span class="text-gray-500">{{ __('لا') }}</span>
                                @endif
                            </dd>
                        </div>

                        @if($program->creator)
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('أنشئ بواسطة') }}</dt>
                            <dd class="text-sm text-gray-800">{{ $program->creator->name }}</dd>
                        </div>
                        @endif

                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('تاريخ الإنشاء') }}</dt>
                            <dd class="text-sm text-gray-800" dir="ltr">{{ $program->created_at?->format('Y-m-d H:i') }}</dd>
                        </div>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>
