<div>
    @can('participants.delete')
    <livewire:participants.delete-participant />
    @endcan

    {{-- 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 --}}
    <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-blue-100 flex items-center justify-center">
                    <span class="text-xl font-bold text-blue-700">
                        {{ mb_substr($participant->person?->name_ar ?? '', 0, 1) }}
                    </span>
                </div>
                <div>
                    <div class="flex items-center gap-3">
                        <h1 class="text-xl font-bold text-gray-800">
                            {{ $participant->person?->name_ar }}
                        </h1>
                        @if($participant->is_free) <x-ui.free-player-badge /> @endif
                    </div>
                    @if($participant->person?->name)
                    <p class="text-sm text-gray-500" dir="ltr">
                        {{ $participant->person->name }}
                    </p>
                    @endif
                    <div class="flex items-center gap-3 mt-1">
                        <span class="text-sm text-gray-500 font-mono" dir="ltr">{{ $participant->participant_number }}</span>
                        @php
                            $statusValue = $participant->status->value ?? $participant->status;
                            $statusColors = [
                                'registered' => 'blue',
                                'active' => 'green',
                                'frozen' => 'cyan',
                                'suspended' => 'red',
                                'inactive' => 'gray',
                                'graduated' => 'purple',
                                'transferred' => 'amber',
                                'withdrawn' => 'orange',
                                'blacklisted' => 'rose',
                            ];
                            $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>
                    </div>
                </div>
            </div>
            <div class="flex items-center gap-2 self-start sm:self-auto flex-wrap">
                @can('participants.update')
                <button
                    x-data
                    x-on:click="if(confirm('{{ $participant->is_free ? __('هل تريد إلغاء صفة اللاعب المجاني؟ سيتم محاسبته من التجديد القادم.') : __('هل تريد تحويل هذا اللاعب إلى لاعب مجاني؟ لن يتم محاسبته بعد الآن.') }}')) $wire.toggleFreeStatus()"
                    class="px-3 py-2 rounded-lg text-xs font-medium transition-colors {{ $participant->is_free ? 'bg-amber-100 text-amber-700 hover:bg-amber-200' : 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200' }}">
                    @if($participant->is_free)
                        {{ __('إلغاء المجانية') }}
                    @else
                        {{ __('تحويل لمجاني') }}
                    @endif
                </button>
                @endcan
                @can('participants.delete')
                <button wire:click="$dispatch('open-delete-participant', { id: {{ $participant->id }} })"
                        class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium transition-colors">
                    {{ __('حذف المشترك') }}
                </button>
                @endcan
                @can('participants.update')
                <a href="{{ route('participants.edit', $participant) }}" 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('participants.list') }}" wire:navigate
                   class="px-4 py-2 text-gray-600 hover:text-gray-800 text-sm">
                    {{ __('رجوع') }}
                </a>
            </div>
        </div>
    </div>

    {{-- Quick Stats Bar --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4 mb-4 sm:mb-6">
        {{-- 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-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">{{ $attendanceRate }}%</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-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="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>

        {{-- 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-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 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>
                    <p class="text-xs text-gray-500">{{ __('التسجيلات النشطة') }}</p>
                    <p class="text-lg font-bold text-gray-800">{{ $activeEnrollments->count() }}</p>
                </div>
            </div>
        </div>

        {{-- Wallet Balance --}}
        <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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('رصيد المحفظة') }}</p>
                    <p class="text-lg font-bold text-gray-800" dir="ltr">
                        @if($wallet)
                            {{ number_format($wallet->balance / 100, 2) }} {{ __('ج.م') }}
                        @else
                            {{ __('لا توجد محفظة') }}
                        @endif
                    </p>
                </div>
            </div>
        </div>
    </div>

    {{-- Quick Action Buttons --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4 mb-4 sm:mb-6">
        <div class="flex flex-wrap items-center gap-3">
            <span class="text-sm font-medium text-gray-600 me-2">{{ __('إجراءات سريعة') }}:</span>

            @php
                $currentStatusVal = $participant->status->value ?? $participant->status;
            @endphp

            @can('participants.update')
                @if($currentStatusVal === 'active')
                <button wire:click="openStatusModal('frozen')"
                        class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-cyan-50 text-cyan-700 border border-cyan-200 rounded-lg hover:bg-cyan-100 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="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707"/>
                    </svg>
                    {{ __('تجميد') }}
                </button>
                @elseif($currentStatusVal === 'frozen')
                <button wire:click="openStatusModal('active')"
                        class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-green-50 text-green-700 border border-green-200 rounded-lg hover:bg-green-100 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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                    </svg>
                    {{ __('إلغاء التجميد') }}
                </button>
                @endif
            @endcan

            @can('payments.create')
            <a href="{{ route('receptionist.collect-payment', ['participant' => $participant->uuid]) }}" wire:navigate
               class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-lg hover:bg-emerald-100 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 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
                {{ __('تسجيل دفعة') }}
            </a>
            @endcan

            @can('participants.update')
            <a href="{{ route('participants.edit', $participant) }}" wire:navigate
               class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-blue-50 text-blue-700 border border-blue-200 rounded-lg hover:bg-blue-100 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                </svg>
                {{ __('تعديل البيانات') }}
            </a>
            @endcan
        </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 = 'info'"
                        :class="activeTab === 'info' ? '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 = 'guardians'"
                        :class="activeTab === 'guardians' ? '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>
                <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 = 'payments'"
                        :class="activeTab === 'payments' ? '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 = 'status'"
                        :class="activeTab === 'status' ? '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>

        {{-- Info Tab --}}
        <div x-show="activeTab === 'info'" x-cloak>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {{-- Personal 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">{{ match($participant->person?->gender) { 'male' => __('ذكر'), 'female' => __('أنثى'), default => '—' } }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('تاريخ الميلاد') }}</dt>
                            <dd class="text-sm text-gray-800" dir="ltr">{{ $participant->person?->date_of_birth?->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">{{ $participant->age ? $participant->age . ' ' . __('سنة') : '—' }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('الهاتف') }}</dt>
                            <dd class="text-sm text-gray-800" dir="ltr">{{ $participant->person?->phone ?? '—' }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('البريد الإلكتروني') }}</dt>
                            <dd class="text-sm text-gray-800" dir="ltr">{{ $participant->person?->email ?? '—' }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('الرقم القومي') }}</dt>
                            <dd class="text-sm text-gray-800 font-mono" dir="ltr">{{ $participant->person?->national_id ?? '—' }}</dd>
                        </div>
                    </dl>
                </div>

                {{-- Participant 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">{{ $participant->primaryActivity?->name_ar ?? '—' }}</dd>
                        </div>
                        <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' => 'محترف'];
                                    $skillValue = $participant->skill_level?->value ?? $participant->skill_level;
                                @endphp
                                {{ __($skillLabels[$skillValue] ?? '—') }}
                            </dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('نوع العضوية') }}</dt>
                            <dd class="text-sm text-gray-800">
                                @php
                                    $memberLabels = ['basic' => 'أساسي', 'silver' => 'فضي', 'gold' => 'ذهبي', 'platinum' => 'بلاتيني', 'custom' => 'مخصص'];
                                    $memberValue = $participant->membership_type?->value ?? $participant->membership_type;
                                @endphp
                                {{ __($memberLabels[$memberValue] ?? '—') }}
                            </dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('تاريخ التسجيل') }}</dt>
                            <dd class="text-sm text-gray-800" dir="ltr">{{ $participant->registration_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">
                                @php
                                    $sourceLabels = ['walk_in' => 'حضور مباشر', 'online' => 'عبر الإنترنت', 'referral' => 'إحالة', 'social_media' => 'وسائل التواصل', 'event' => 'فعالية', 'transfer' => 'تحويل', 'other' => 'أخرى'];
                                    $sourceValue = $participant->registration_source?->value ?? $participant->registration_source;
                                @endphp
                                {{ __($sourceLabels[$sourceValue] ?? '—') }}
                            </dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('موافقة طبية') }}</dt>
                            <dd class="text-sm text-gray-800">
                                @if($participant->medical_clearance)
                                <span class="text-green-600">{{ __('نعم') }}</span>
                                @if($participant->medical_clearance_expires)
                                <span class="text-xs text-gray-500 ms-1" dir="ltr">({{ __('حتى') }} {{ $participant->medical_clearance_expires->format('Y-m-d') }})</span>
                                @endif
                                @else
                                <span class="text-red-600">{{ __('لا') }}</span>
                                @endif
                            </dd>
                        </div>
                    </dl>
                </div>

                {{-- Physical Attributes 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">{{ $participant->height_cm ? $participant->height_cm . ' ' . __('سم') : '—' }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('الوزن') }}</dt>
                            <dd class="text-sm text-gray-800">{{ $participant->weight_kg ? $participant->weight_kg . ' ' . __('كجم') : '—' }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('رقم القميص') }}</dt>
                            <dd class="text-sm text-gray-800">{{ $participant->jersey_number ?? '—' }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('مقاس القميص') }}</dt>
                            <dd class="text-sm text-gray-800">{{ $participant->jersey_size ?? '—' }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('مقاس الحذاء') }}</dt>
                            <dd class="text-sm text-gray-800">{{ $participant->shoe_size ?? '—' }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('اليد المسيطرة') }}</dt>
                            <dd class="text-sm text-gray-800">
                                @php $handLabels = ['right' => 'يمنى', 'left' => 'يسرى', 'both' => 'كلتاهما']; @endphp
                                {{ __($handLabels[$participant->dominant_hand] ?? '—') }}
                            </dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('القدم المسيطرة') }}</dt>
                            <dd class="text-sm text-gray-800">
                                @php $footLabels = ['right' => 'يمنى', 'left' => 'يسرى', 'both' => 'كلتاهما']; @endphp
                                {{ __($footLabels[$participant->dominant_foot] ?? '—') }}
                            </dd>
                        </div>
                    </dl>
                </div>

                {{-- Notes Card --}}
                @if($participant->notes)
                <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>
                    <p class="text-sm text-gray-600 whitespace-pre-line">{{ $participant->notes }}</p>
                </div>
                @endif
            </div>
        </div>

        {{-- Guardians Tab --}}
        <div x-show="activeTab === 'guardians'" x-cloak>
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden overflow-x-auto">
                @if($participant->guardians->isNotEmpty())
                <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-center 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($participant->guardians as $guardian)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3">
                                <span class="font-medium text-gray-800">{{ $guardian->name_ar }}</span>
                                @if($guardian->phone)
                                <p class="text-xs text-gray-500" dir="ltr">{{ $guardian->phone }}</p>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-gray-600">
                                @php
                                    $relLabels = ['father' => 'أب', 'mother' => 'أم', 'brother' => 'أخ', 'sister' => 'أخت', 'uncle' => 'عم/خال', 'aunt' => 'عمة/خالة', 'grandfather' => 'جد', 'grandmother' => 'جدة', 'other' => 'أخرى'];
                                @endphp
                                {{ __($relLabels[$guardian->pivot->relationship_type] ?? $guardian->pivot->relationship_type ?? '—') }}
                            </td>
                            <td class="px-4 py-3 text-gray-600">
                                @if($guardian->occupation)
                                <span class="font-medium text-gray-700">{{ $guardian->occupation }}</span>
                                @endif
                                @if($guardian->workplace)
                                <p class="text-xs text-gray-500">{{ $guardian->workplace }}</p>
                                @endif
                                @if(!$guardian->occupation && !$guardian->workplace)
                                <span class="text-gray-400">—</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-center">
                                @if($guardian->pivot->is_primary)
                                <span class="text-green-600">{{ __('نعم') }}</span>
                                @else
                                <span class="text-gray-400">—</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-center">
                                @if($guardian->pivot->is_emergency_contact)
                                <span class="text-green-600">{{ __('نعم') }}</span>
                                @else
                                <span class="text-gray-400">—</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-center">
                                @if($guardian->pivot->can_pickup)
                                <span class="text-green-600">{{ __('نعم') }}</span>
                                @else
                                <span class="text-gray-400">—</span>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @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>

        {{-- 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($totalSessions > 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-4 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>

                <div class="mt-4 pt-4 border-t border-gray-100">
                    <p class="text-sm text-gray-500">
                        {{ __('إجمالي الحصص المسجلة') }}: <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>

        {{-- 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($activeEnrollments->isNotEmpty())
                <div class="divide-y divide-gray-100">
                    @foreach($activeEnrollments as $enrollment)
                    <div class="p-4 hover:bg-gray-50 transition">
                        <div class="flex items-start justify-between">
                            <div class="flex-1">
                                <div class="flex items-center gap-2 mb-1">
                                    @if($enrollment->group)
                                    <a href="{{ route('groups.edit', $enrollment->group) }}" wire:navigate
                                       class="text-sm font-semibold text-blue-600 hover:text-blue-800 hover:underline">
                                        {{ $enrollment->group->name_ar ?? $enrollment->group->name ?? '—' }}
                                    </a>
                                    @else
                                    <span class="text-sm font-semibold text-gray-800">—</span>
                                    @endif
                                    <span class="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded-full">{{ __('نشط') }}</span>
                                </div>

                                @if($enrollment->program)
                                <p class="text-sm text-gray-600 mb-1">
                                    <span class="text-gray-400">{{ __('البرنامج') }}:</span>
                                    <a href="{{ route('programs.edit', $enrollment->program) }}" wire:navigate
                                       class="text-blue-600 hover:text-blue-800 hover:underline">
                                        {{ $enrollment->program->name_ar ?? $enrollment->program->name }}
                                    </a>
                                </p>
                                @endif

                                @if($enrollment->group?->headTrainer)
                                <p class="text-sm text-gray-600 mb-1">
                                    <span class="text-gray-400">{{ __('المدرب') }}:</span>
                                    {{ $enrollment->group->headTrainer->name }}
                                </p>
                                @endif

                                @if($enrollment->group?->schedules->isNotEmpty())
                                <div class="flex flex-wrap gap-2 mt-2">
                                    @php
                                        $dayNames = [0 => 'الأحد', 1 => 'الإثنين', 2 => 'الثلاثاء', 3 => 'الأربعاء', 4 => 'الخميس', 5 => 'الجمعة', 6 => 'السبت'];
                                    @endphp
                                    @foreach($enrollment->group->schedules as $schedule)
                                    <span class="inline-flex items-center gap-1 px-2 py-1 text-xs bg-blue-50 text-blue-700 rounded">
                                        <svg class="w-3 h-3" 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>
                                        {{ $dayNames[$schedule->day_of_week] ?? $schedule->day_of_week }}
                                        <span dir="ltr">{{ \Carbon\Carbon::parse($schedule->start_time)->format('H:i') }} - {{ \Carbon\Carbon::parse($schedule->end_time)->format('H:i') }}</span>
                                    </span>
                                    @endforeach
                                </div>
                                @endif
                            </div>

                            <div class="text-end text-xs text-gray-500">
                                @if($enrollment->start_date)
                                <p dir="ltr">{{ $enrollment->start_date->format('Y-m-d') }}</p>
                                <p class="text-gray-400">{{ __('تاريخ البدء') }}</p>
                                @endif
                            </div>
                        </div>
                    </div>
                    @endforeach
                </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>

        {{-- Payments Tab --}}
        <div x-show="activeTab === 'payments'" x-cloak>
            @php
                $canRefund = auth()->user()?->is_super_admin || auth()->user()?->hasPermission('payments.refund');
                $methodColors = ['cash'=>'green','card'=>'blue','bank_transfer'=>'purple','wallet'=>'amber','online'=>'cyan','cheque'=>'gray','other'=>'gray'];
                $pStatusColors = ['confirmed'=>'green','pending'=>'amber','failed'=>'red','refunded'=>'purple','partially_refunded'=>'orange'];
                $pStatusLabels = ['confirmed'=>'مؤكد','pending'=>'معلق','failed'=>'فشل','refunded'=>'مسترد','partially_refunded'=>'مسترد جزئياً'];
            @endphp

            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                {{-- Header --}}
                <div class="p-4 border-b border-gray-100 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
                    <div class="flex items-center gap-3">
                        <h3 class="text-base font-semibold text-gray-800">{{ __('سجل المدفوعات') }}</h3>
                        @if(count($selectedPaymentUuids) > 0)
                        <span class="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">
                            {{ count($selectedPaymentUuids) }} {{ __('محددة') }}
                        </span>
                        @endif
                    </div>
                    <div class="flex items-center gap-2">
                        @if($wallet)
                        <div class="flex items-center gap-2 px-3 py-1.5 bg-amber-50 rounded-lg">
                            <svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                            <span class="text-sm font-medium text-amber-700">{{ __('الرصيد') }}:</span>
                            <span class="text-sm font-bold text-amber-800" dir="ltr">{{ number_format($wallet->balance / 100, 2) }} {{ __('ج.م') }}</span>
                        </div>
                        @endif
                        @if($canRefund && count($selectedPaymentUuids) > 0)
                        <button type="button" wire:click="openRefundModal"
                                wire:loading.attr="disabled" wire:target="openRefundModal"
                                class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-red-50 text-red-700 border border-red-200 rounded-lg hover:bg-red-100 disabled:opacity-50 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="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
                            {{ __('استرداد المحدد') }} ({{ count($selectedPaymentUuids) }})
                        </button>
                        <button type="button" wire:click="$set('selectedPaymentUuids', [])"
                                class="text-xs text-gray-500 hover:text-gray-700 transition">
                            {{ __('إلغاء التحديد') }}
                        </button>
                        @endif
                    </div>
                </div>

                @error('refund')
                <div class="mx-4 mt-3 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">{{ $message }}</div>
                @enderror

                @if($recentPayments->isNotEmpty())
                <div class="divide-y divide-gray-100">
                    @foreach($recentPayments as $payment)
                    @php
                        $methodValue = $payment->method->value ?? $payment->method;
                        $mColor = $methodColors[$methodValue] ?? 'gray';
                        $statusValue = $payment->status->value ?? $payment->status;
                        $pColor = $pStatusColors[$statusValue] ?? 'gray';
                        $isSelected = in_array($payment->uuid, $selectedPaymentUuids);
                        $isConfirmed = $statusValue === 'confirmed' && $payment->direction === 'inbound';
                        $isRefunded = in_array($statusValue, ['refunded', 'partially_refunded']);
                    @endphp
                    <div class="p-4 transition {{ $isSelected ? 'bg-red-50 border-s-4 border-red-400' : 'hover:bg-gray-50' }}">
                        <div class="flex items-center gap-3">

                            {{-- Checkbox (only for confirmed inbound, not already refunded) --}}
                            @if($canRefund && $isConfirmed && !$isRefunded)
                            <button type="button" wire:click="togglePaymentSelection('{{ $payment->uuid }}')"
                                    class="flex-shrink-0 w-5 h-5 rounded border-2 transition
                                           {{ $isSelected ? 'bg-red-500 border-red-500' : 'border-gray-300 hover:border-red-400' }}
                                           flex items-center justify-center">
                                @if($isSelected)
                                <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                                @endif
                            </button>
                            @else
                            <div class="flex-shrink-0 w-5 h-5"></div>
                            @endif

                            {{-- Icon --}}
                            <div class="w-8 h-8 rounded-full bg-{{ $mColor }}-100 flex items-center justify-center flex-shrink-0">
                                <svg class="w-4 h-4 text-{{ $mColor }}-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>

                            {{-- Details --}}
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-800" dir="ltr">
                                    @if($payment->invoice_id)
                                    <a href="{{ route('invoices.show', $payment->invoice) }}" wire:navigate
                                       class="text-blue-600 hover:text-blue-800 hover:underline">
                                        {{ number_format($payment->amount / 100, 2) }} {{ __('ج.م') }}
                                    </a>
                                    @else
                                    {{ number_format($payment->amount / 100, 2) }} {{ __('ج.م') }}
                                    @endif
                                    @if($payment->direction === 'outbound')
                                    <span class="text-xs text-purple-600 me-1">({{ __('استرداد') }})</span>
                                    @endif
                                </p>
                                <p class="text-xs text-gray-500 truncate">
                                    {{ $payment->method->label() }}
                                    @if($payment->reference)
                                    <span class="text-gray-400 mx-1">|</span>
                                    <span class="font-mono" dir="ltr">{{ $payment->reference }}</span>
                                    @endif
                                </p>
                            </div>

                            {{-- Right side: date + status --}}
                            <div class="text-end flex-shrink-0">
                                <p class="text-xs text-gray-500" dir="ltr">{{ $payment->payment_date?->format('Y-m-d') }}</p>
                                <span class="px-1.5 py-0.5 text-xs bg-{{ $pColor }}-100 text-{{ $pColor }}-700 rounded">
                                    {{ __($pStatusLabels[$statusValue] ?? $statusValue) }}
                                </span>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </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 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>
                    <p class="text-gray-500 text-sm">{{ __('لا توجد مدفوعات مسجلة') }}</p>
                </div>
                @endif
            </div>

            {{-- Refund Confirmation Modal --}}
            @if($showRefundModal)
            <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
                 wire:click.self="closeRefundModal">
                <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md" @click.stop>

                    {{-- Modal header --}}
                    <div class="flex items-center justify-between p-5 border-b border-gray-100">
                        <div class="flex items-center gap-2">
                            <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center">
                                <svg class="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
                            </div>
                            <h3 class="text-base font-bold text-gray-800">{{ __('تأكيد الاسترداد') }}</h3>
                        </div>
                        <button type="button" wire:click="closeRefundModal"
                                class="text-gray-400 hover:text-gray-600 transition">
                            <svg class="w-5 h-5" 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>
                    </div>

                    {{-- Preview list --}}
                    <div class="p-5 space-y-3">
                        @foreach($refundPreview as $item)
                        <div class="rounded-lg border {{ $item['enrollment_name'] ? 'border-orange-200 bg-orange-50' : 'border-gray-200 bg-gray-50' }} p-3">
                            <div class="flex items-center justify-between mb-1">
                                <span class="text-sm font-semibold text-gray-700" dir="ltr">
                                    {{ number_format($item['amount'] / 100, 2) }} {{ __('ج.م') }}
                                </span>
                                <span class="text-xs text-gray-500 font-mono" dir="ltr">{{ $item['reference'] }}</span>
                            </div>
                            <p class="text-xs text-gray-500">{{ $item['method_label'] }}</p>
                            @if($item['enrollment_name'])
                            <div class="mt-2 flex items-start gap-1.5">
                                <svg class="w-3.5 h-3.5 text-orange-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                                <p class="text-xs text-orange-700 font-medium">
                                    {{ __('سيتم إلغاء تسجيل اللاعب من برنامج') }}: {{ $item['enrollment_name'] }}
                                </p>
                            </div>
                            @endif
                        </div>
                        @endforeach

                        {{-- Reason input --}}
                        <div class="pt-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                {{ __('سبب الاسترداد') }} <span class="text-red-500">*</span>
                            </label>
                            <textarea wire:model="refundReason" rows="2"
                                      class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-red-400 focus:border-red-400"
                                      placeholder="{{ __('اكتب سبب الاسترداد...') }}"></textarea>
                            @error('refundReason') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    {{-- Actions --}}
                    <div class="flex items-center gap-3 px-5 pb-5">
                        <button type="button" wire:click="confirmRefund"
                                wire:loading.attr="disabled" wire:target="confirmRefund"
                                class="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 bg-red-600 text-white rounded-lg hover:bg-red-700 active:scale-[0.97] font-medium text-sm disabled:opacity-50 transition-all">
                            <span wire:loading.remove wire:target="confirmRefund">{{ __('تأكيد الاسترداد') }}</span>
                            <span wire:loading wire:target="confirmRefund">
                                <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                            </span>
                            <span wire:loading wire:target="confirmRefund">{{ __('جارٍ الاسترداد...') }}</span>
                        </button>
                        <button type="button" wire:click="closeRefundModal"
                                class="px-4 py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 font-medium text-sm transition">
                            {{ __('إلغاء') }}
                        </button>
                    </div>
                </div>
            </div>
            @endif
        </div>

        {{-- Status Tab --}}
        <div x-show="activeTab === 'status'" 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>

                <div class="mb-4">
                    <p class="text-sm text-gray-600 mb-1">{{ __('الحالة الحالية') }}:
                        <span class="font-medium px-2 py-0.5 text-xs bg-{{ $color }}-100 text-{{ $color }}-700 rounded-full">
                            {{ __($statusLabels[$statusValue] ?? $statusValue) }}
                        </span>
                    </p>
                    @if($participant->status_reason)
                    <p class="text-sm text-gray-500 mt-1">{{ __('السبب') }}: {{ $participant->status_reason }}</p>
                    @endif
                    @if($participant->status_changed_at)
                    <p class="text-xs text-gray-400 mt-1" dir="ltr">{{ $participant->status_changed_at->format('Y-m-d H:i') }}</p>
                    @endif
                </div>

                @if(count($validTransitions) > 0)
                <div class="border-t border-gray-100 pt-4">
                    <p class="text-sm text-gray-600 mb-3">{{ __('الإجراءات المتاحة') }}:</p>
                    <div class="flex flex-wrap gap-2">
                        @foreach($validTransitions as $transition)
                        @php
                            $transColor = $statusColors[$transition] ?? 'gray';
                        @endphp
                        <button wire:click="openStatusModal('{{ $transition }}')"
                                class="px-3 py-1.5 text-xs font-medium bg-{{ $transColor }}-50 text-{{ $transColor }}-700 border border-{{ $transColor }}-200 rounded-lg hover:bg-{{ $transColor }}-100 transition">
                            {{ __($statusLabels[$transition] ?? $transition) }}
                        </button>
                        @endforeach
                    </div>
                </div>
                @else
                <p class="text-sm text-gray-500">{{ __('لا يمكن تغيير الحالة الحالية') }}</p>
                @endif
            </div>
        </div>
    </div>

    {{-- Status Change Modal --}}
    @if($showStatusModal)
    <div class="fixed inset-0 z-50 flex items-center justify-center" x-data>
        <div class="fixed inset-0 bg-black/50" wire:click="closeStatusModal"></div>
        <div class="relative bg-white rounded-xl shadow-xl w-full max-w-md mx-4 p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-bold text-gray-800">
                    {{ __('تغيير الحالة إلى') }}: {{ __($statusLabels[$newStatus] ?? $newStatus) }}
                </h3>
                <button wire:click="closeStatusModal" class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="إغلاق">
                    <svg class="w-5 h-5" 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>
            </div>

            <form wire:submit="changeStatus">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('سبب التغيير') }} <span class="text-red-500">*</span></label>
                    <textarea wire:model="statusReason" rows="3"
                              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('statusReason') border-red-500 @enderror"
                              placeholder="{{ __('أدخل سبب تغيير الحالة...') }}"></textarea>
                    @error('statusReason') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="flex items-center justify-end gap-3">
                    <button type="button" wire:click="closeStatusModal"
                            class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 active:bg-gray-200 text-sm">
                        {{ __('إلغاء') }}
                    </button>
                    <button type="submit"
                            wire:loading.attr="disabled"
                            wire:target="changeStatus"
                            class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 active:bg-blue-800 disabled:opacity-50 text-sm font-medium">
                        <span wire:loading.remove wire:target="changeStatus">{{ __('تأكيد') }}</span>
                        <span wire:loading wire:target="changeStatus">{{ __('جارٍ التنفيذ...') }}</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
    @endif
</div>
