<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-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-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-lg">
                    <span class="text-xl font-bold text-white">
                        {{ mb_substr($person?->name_ar ?? '', 0, 1) }}
                    </span>
                </div>
                <div>
                    <h1 class="text-xl font-bold text-gray-800">{{ $person?->name_ar ?? '—' }}</h1>
                    @if($person?->name)
                    <p class="text-sm text-gray-500" dir="ltr">{{ $person->name }}</p>
                    @endif
                    <div class="flex items-center gap-3 mt-1.5">
                        <span class="text-xs text-gray-500 font-mono" dir="ltr">{{ $trainer->trainer_number }}</span>
                        @php
                            $statusColors = [
                                'active' => 'green', 'inactive' => 'gray',
                                'on_leave' => 'yellow', 'suspended' => 'red',
                            ];
                            $statusLabels = [
                                'active' => 'نشط', 'inactive' => 'غير نشط',
                                'on_leave' => 'إجازة', 'suspended' => 'موقوف',
                            ];
                            $sv = $trainer->status->value ?? $trainer->status;
                            $sc = $statusColors[$sv] ?? 'gray';
                        @endphp
                        <span class="px-2 py-0.5 text-xs bg-{{ $sc }}-100 text-{{ $sc }}-700 rounded-full font-medium">
                            {{ __($statusLabels[$sv] ?? $sv) }}
                        </span>
                        <span class="px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded-full font-medium">
                            {{ $trainer->compensation_model->label() }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="flex items-center gap-2 self-start sm:self-auto">
                @can('trainers.update')
                <a href="{{ route('trainers.edit', $trainer) }}" wire:navigate
                   class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium transition">
                    {{ __('تعديل') }}
                </a>
                @endcan
                @can('payroll.manage')
                <a href="{{ route('payroll.trainer-compensations', $trainer) }}" wire:navigate
                   class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium transition">
                    {{ __('المستحقات') }}
                </a>
                @endcan
                @can('trainers.delete')
                <button wire:click="openDeleteModal"
                   class="px-3 py-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 text-sm font-medium transition border border-red-200">
                    {{ __('حذف') }}
                </button>
                @endcan
                <a href="{{ route('trainers.list') }}" wire:navigate
                   class="px-4 py-2 text-gray-600 hover:text-gray-800 text-sm">
                    {{ __('رجوع') }}
                </a>
            </div>
        </div>
    </div>

    {{-- KPI Cards --}}
    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3 mb-6">
        {{-- 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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('المجموعات') }}</p>
                    <p class="text-lg font-bold text-gray-800">{{ $groups->count() }}</p>
                </div>
            </div>
        </div>

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

        {{-- Capacity --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-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">{{ $capacityRate }}%</p>
                </div>
            </div>
        </div>

        {{-- Attendance --}}
        <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-cyan-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-cyan-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">{{ $trainer->total_sessions_conducted }}</p>
                </div>
            </div>
        </div>

        {{-- Monthly Earnings --}}
        <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($monthlyEarnings / 100, 0) }} {{ __('ج.م') }}</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 = 'schedule'" :class="activeTab === 'schedule' ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'" class="pb-3 border-b-2 text-sm font-medium transition whitespace-nowrap">{{ __('الجدول') }}</button>
                <button @click="activeTab = '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 = 'financial'" :class="activeTab === 'financial' ? '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 = 'qualifications'" :class="activeTab === 'qualifications' ? '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">
                {{-- Personal Info --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 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" dir="ltr">{{ $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">{{ $person?->email ?? '—' }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('الفرع') }}</dt>
                            <dd class="text-sm text-gray-800">{{ $trainer->employee?->branch?->name_ar ?? '—' }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('تاريخ البدء') }}</dt>
                            <dd class="text-sm text-gray-800" dir="ltr">{{ $trainer->employee?->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">{{ $trainer->employee?->department ?? '—' }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('التقييم') }}</dt>
                            <dd class="text-sm text-gray-800">
                                @if($trainer->rating)
                                <span class="flex items-center gap-1">
                                    <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    {{ number_format($trainer->rating, 1) }} / 5
                                </span>
                                @else
                                    —
                                @endif
                            </dd>
                        </div>
                    </dl>
                </div>

                {{-- Compensation Details --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 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">{{ $trainer->compensation_model->label() }}</dd>
                        </div>
                        @if($trainer->hourly_rate)
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('سعر الساعة') }}</dt>
                            <dd class="text-sm text-gray-800" dir="ltr">{{ number_format($trainer->hourly_rate / 100, 2) }} {{ __('ج.م') }}</dd>
                        </div>
                        @endif
                        @if($trainer->session_rate)
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('سعر الحصة') }}</dt>
                            <dd class="text-sm text-gray-800" dir="ltr">{{ number_format($trainer->session_rate / 100, 2) }} {{ __('ج.م') }}</dd>
                        </div>
                        @endif
                        @if($trainer->group_rate)
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('سعر المجموعة') }}</dt>
                            <dd class="text-sm text-gray-800" dir="ltr">{{ number_format($trainer->group_rate / 100, 2) }} {{ __('ج.م') }}</dd>
                        </div>
                        @endif
                        @if($trainer->player_rate)
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('سعر اللاعب') }}</dt>
                            <dd class="text-sm text-gray-800" dir="ltr">{{ number_format($trainer->player_rate / 100, 2) }} {{ __('ج.م') }}</dd>
                        </div>
                        @endif
                        @if($trainer->revenue_share_percent)
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('نسبة المشاركة') }}</dt>
                            <dd class="text-sm text-gray-800">{{ $trainer->revenue_share_percent }}%</dd>
                        </div>
                        @endif
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('الحد الأقصى يومياً') }}</dt>
                            <dd class="text-sm text-gray-800">{{ $trainer->max_daily_sessions ?? '—' }} {{ __('حصة') }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">{{ __('سلف معلقة') }}</dt>
                            <dd class="text-sm font-medium {{ $pendingAdvances > 0 ? 'text-red-600' : 'text-gray-800' }}" dir="ltr">
                                {{ number_format($pendingAdvances / 100, 2) }} {{ __('ج.م') }}
                            </dd>
                        </div>
                    </dl>
                </div>

                {{-- Bio --}}
                @if($trainer->bio_ar || $trainer->bio)
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 lg:col-span-2">
                    <h3 class="text-base font-semibold text-gray-800 mb-3">{{ __('نبذة') }}</h3>
                    <p class="text-sm text-gray-600 whitespace-pre-line">{{ $trainer->bio_ar ?? $trainer->bio }}</p>
                </div>
                @endif

                {{-- Specializations --}}
                @if(!empty($trainer->specializations))
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                    <h3 class="text-base font-semibold text-gray-800 mb-3">{{ __('التخصصات') }}</h3>
                    <div class="flex flex-wrap gap-2">
                        @foreach($trainer->specializations as $spec)
                        <span class="px-3 py-1 text-xs font-medium bg-blue-50 text-blue-700 rounded-full border border-blue-200">{{ $spec }}</span>
                        @endforeach
                    </div>
                </div>
                @endif
            </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">
                @if($groups->isNotEmpty())
                <div class="divide-y divide-gray-100">
                    @foreach($groups as $group)
                    <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">
                                    <a href="{{ route('groups.edit', $group) }}" wire:navigate
                                       class="text-sm font-semibold text-blue-600 hover:text-blue-800 hover:underline">
                                        {{ $group->name_ar ?? $group->name }}
                                    </a>
                                    @php
                                        $gStatusColors = ['active' => 'green', 'forming' => 'blue', 'full' => 'amber', 'on_hold' => 'yellow', 'completed' => 'gray', 'cancelled' => 'red'];
                                        $gStatusLabels = ['active' => 'نشط', 'forming' => 'قيد التكوين', 'full' => 'مكتمل', 'on_hold' => 'معلق', 'completed' => 'منتهي', 'cancelled' => 'ملغي'];
                                        $gSv = $group->status->value ?? $group->status;
                                        $gSc = $gStatusColors[$gSv] ?? 'gray';
                                    @endphp
                                    <span class="px-2 py-0.5 text-xs bg-{{ $gSc }}-100 text-{{ $gSc }}-700 rounded-full">{{ __($gStatusLabels[$gSv] ?? $gSv) }}</span>
                                </div>

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

                                @if($group->branch)
                                <p class="text-xs text-gray-500">
                                    <span class="text-gray-400">{{ __('الفرع') }}:</span>
                                    {{ $group->branch->name_ar }}
                                </p>
                                @endif

                                @if($group->schedules->isNotEmpty())
                                <div class="flex flex-wrap gap-2 mt-2">
                                    @php
                                        $dayNames = [0 => 'الأحد', 1 => 'الإثنين', 2 => 'الثلاثاء', 3 => 'الأربعاء', 4 => 'الخميس', 5 => 'الجمعة', 6 => 'السبت'];
                                    @endphp
                                    @foreach($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="flex items-center gap-3">
                                <div class="text-end">
                                    <div class="flex items-center gap-1 text-sm">
                                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/></svg>
                                        <span class="font-medium text-gray-700">{{ $group->active_enrollments_count }}</span>
                                        <span class="text-gray-400">/</span>
                                        <span class="text-gray-500">{{ $group->max_capacity }}</span>
                                    </div>
                                    @php $fillRate = $group->max_capacity > 0 ? round($group->active_enrollments_count / $group->max_capacity * 100) : 0; @endphp
                                    <div class="w-20 bg-gray-200 rounded-full h-1.5 mt-2">
                                        <div class="h-1.5 rounded-full {{ $fillRate >= 90 ? 'bg-red-500' : ($fillRate >= 70 ? 'bg-amber-500' : 'bg-green-500') }}" style="width: {{ min($fillRate, 100) }}%"></div>
                                    </div>
                                </div>
                                @if(isset($trainerAssignments[$group->id]))
                                @can('trainers.update')
                                <button wire:click="removeGroupAssignment({{ $trainerAssignments[$group->id]->id }})"
                                        wire:confirm="{{ __('إلغاء تعيين هذه المجموعة؟') }}"
                                        class="text-red-400 hover:text-red-600 p-1" title="{{ __('إلغاء التعيين') }}">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                </button>
                                @endcan
                                @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="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>

            {{-- Assign new group --}}
            @can('trainers.update')
            <div class="mt-4 bg-white rounded-xl shadow-sm border border-gray-200 p-4">
                <h4 class="text-sm font-semibold text-gray-700 mb-3">{{ __('تعيين مجموعة جديدة') }}</h4>
                <div class="flex items-center gap-2">
                    <select wire:model="assignGroupId" class="flex-1 text-sm border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                        <option value="">{{ __('اختر مجموعة...') }}</option>
                        @foreach($availableGroups as $availGroup)
                        <option value="{{ $availGroup->id }}">{{ $availGroup->name_ar ?? $availGroup->name }} — {{ $availGroup->program?->name_ar }}</option>
                        @endforeach
                    </select>
                    <button wire:click="assignGroup"
                            wire:loading.attr="disabled"
                            class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-sm font-medium whitespace-nowrap">
                        {{ __('تعيين') }}
                    </button>
                </div>
            </div>
            @endcan
        </div>

        {{-- Schedule Tab --}}
        <div x-show="activeTab === 'schedule'" 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">{{ __('الحصص القادمة (7 أيام)') }}</h3>
                </div>
                @if($upcomingSessions->isNotEmpty())
                <div class="divide-y divide-gray-100">
                    @php $currentDate = null; @endphp
                    @foreach($upcomingSessions as $session)
                        @if($currentDate !== $session->session_date->format('Y-m-d'))
                            @php $currentDate = $session->session_date->format('Y-m-d'); @endphp
                            <div class="px-4 py-2 bg-gray-50">
                                <p class="text-xs font-semibold text-gray-600">
                                    {{ $session->session_date->translatedFormat('l j F') }}
                                    @if($session->session_date->isToday())
                                    <span class="px-1.5 py-0.5 text-xs bg-blue-100 text-blue-700 rounded ms-2">{{ __('اليوم') }}</span>
                                    @endif
                                </p>
                            </div>
                        @endif
                        <div class="px-4 py-3 hover:bg-gray-50 transition flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                <div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center">
                                    <svg class="w-4 h-4 text-blue-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-sm font-medium text-gray-800">{{ $session->group?->name_ar ?? '—' }}</p>
                                    <p class="text-xs text-gray-500" dir="ltr">{{ \Carbon\Carbon::parse($session->start_time)->format('H:i') }} - {{ \Carbon\Carbon::parse($session->end_time)->format('H:i') }}</p>
                                </div>
                            </div>
                            @php
                                $sessStatusColors = ['scheduled' => 'blue', 'in_progress' => 'green', 'completed' => 'gray', 'cancelled' => 'red', 'rescheduled' => 'amber'];
                                $sessStatusLabels = ['scheduled' => 'مجدول', 'in_progress' => 'جاري', 'completed' => 'مكتمل', 'cancelled' => 'ملغي', 'rescheduled' => 'مُعاد جدولته'];
                                $sessSv = $session->status->value ?? $session->status;
                                $sessSc = $sessStatusColors[$sessSv] ?? 'gray';
                            @endphp
                            <span class="px-2 py-0.5 text-xs bg-{{ $sessSc }}-100 text-{{ $sessSc }}-700 rounded-full">{{ __($sessStatusLabels[$sessSv] ?? $sessSv) }}</span>
                        </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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    <p class="text-gray-500 text-sm">{{ __('لا توجد حصص مجدولة') }}</p>
                </div>
                @endif
            </div>

            {{-- Weekly availability --}}
            @if($trainer->availabilities->isNotEmpty())
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mt-6">
                <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('ساعات التوفر') }}</h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                    @php $dayNames = [0 => 'الأحد', 1 => 'الإثنين', 2 => 'الثلاثاء', 3 => 'الأربعاء', 4 => 'الخميس', 5 => 'الجمعة', 6 => 'السبت']; @endphp
                    @foreach($trainer->availabilities->sortBy('day_of_week') as $avail)
                    <div class="p-3 bg-gray-50 rounded-lg border border-gray-100">
                        <p class="text-xs font-semibold text-gray-700 mb-1">{{ $dayNames[$avail->day_of_week] ?? $avail->day_of_week }}</p>
                        <p class="text-sm text-gray-600" dir="ltr">{{ \Carbon\Carbon::parse($avail->start_time)->format('H:i') }} - {{ \Carbon\Carbon::parse($avail->end_time)->format('H:i') }}</p>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>

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

                @if($totalSessionsAttended > 0)
                <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 >= 90 ? 'text-green-600' : ($attendanceRate >= 75 ? '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 {{ $attendanceRate >= 90 ? 'bg-green-500' : ($attendanceRate >= 75 ? 'bg-amber-500' : 'bg-red-500') }}" style="width: {{ min($attendanceRate, 100) }}%"></div>
                    </div>
                </div>

                <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-blue-50 rounded-lg">
                        <p class="text-2xl font-bold text-blue-700">{{ $totalSessionsAttended }}</p>
                        <p class="text-xs text-blue-600 mt-1">{{ __('إجمالي') }}</p>
                    </div>
                </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>

        {{-- Financial Tab --}}
        <div x-show="activeTab === 'financial'" x-cloak>
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
                    <p class="text-xs text-gray-500 mb-1">{{ __('مستحقات الشهر الحالي') }}</p>
                    <p class="text-2xl font-bold text-gray-800" dir="ltr">{{ number_format($monthlyEarnings / 100, 2) }} {{ __('ج.م') }}</p>
                </div>
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
                    <p class="text-xs text-gray-500 mb-1">{{ __('سلف معلقة') }}</p>
                    <p class="text-2xl font-bold {{ $pendingAdvances > 0 ? 'text-red-600' : 'text-gray-800' }}" dir="ltr">{{ number_format($pendingAdvances / 100, 2) }} {{ __('ج.م') }}</p>
                </div>
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
                    <p class="text-xs text-gray-500 mb-1">{{ __('صافي المستحق') }}</p>
                    <p class="text-2xl font-bold text-emerald-600" dir="ltr">{{ number_format(($monthlyEarnings - $pendingAdvances) / 100, 2) }} {{ __('ج.م') }}</p>
                </div>
            </div>

            <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($recentCompensations->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-start font-medium text-gray-600">{{ __('الحالة') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @foreach($recentCompensations as $comp)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 text-gray-800" dir="ltr">{{ $comp->date?->format('Y-m-d') }}</td>
                            <td class="px-4 py-3 text-gray-600">{{ $comp->quantity ?? '—' }}</td>
                            <td class="px-4 py-3 font-medium text-gray-800" dir="ltr">{{ number_format($comp->amount / 100, 2) }} {{ __('ج.م') }}</td>
                            <td class="px-4 py-3">
                                @php
                                    $compStatusColors = ['calculated' => 'blue', 'approved' => 'green', 'paid' => 'emerald', 'cancelled' => 'red'];
                                    $compStatusLabels = ['calculated' => 'محسوب', 'approved' => 'معتمد', 'paid' => 'مدفوع', 'cancelled' => 'ملغي'];
                                    $compSv = $comp->status ?? 'calculated';
                                @endphp
                                <span class="px-2 py-0.5 text-xs bg-{{ $compStatusColors[$compSv] ?? 'gray' }}-100 text-{{ $compStatusColors[$compSv] ?? 'gray' }}-700 rounded-full">
                                    {{ __($compStatusLabels[$compSv] ?? $compSv) }}
                                </span>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @else
                <div class="px-4 py-12 text-center">
                    <p class="text-gray-500 text-sm">{{ __('لا توجد مستحقات مسجلة') }}</p>
                </div>
                @endif
            </div>
        </div>

        {{-- Qualifications Tab --}}
        <div x-show="activeTab === 'qualifications'" 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($trainer->qualifications->isNotEmpty())
                <div class="divide-y divide-gray-100">
                    @foreach($trainer->qualifications as $qual)
                    <div class="p-4 hover:bg-gray-50 transition">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-800">{{ $qual->title ?? $qual->name ?? '—' }}</p>
                                @if($qual->issuing_authority)
                                <p class="text-xs text-gray-500 mt-0.5">{{ $qual->issuing_authority }}</p>
                                @endif
                                @if($qual->description)
                                <p class="text-xs text-gray-400 mt-1">{{ $qual->description }}</p>
                                @endif
                            </div>
                            <div class="text-end">
                                @if($qual->issue_date)
                                <p class="text-xs text-gray-500" dir="ltr">{{ $qual->issue_date instanceof \Carbon\Carbon ? $qual->issue_date->format('Y-m-d') : $qual->issue_date }}</p>
                                @endif
                                @if($qual->expiry_date)
                                <p class="text-xs {{ now()->greaterThan($qual->expiry_date) ? 'text-red-500' : 'text-gray-400' }}" dir="ltr">
                                    {{ __('ينتهي') }}: {{ $qual->expiry_date instanceof \Carbon\Carbon ? $qual->expiry_date->format('Y-m-d') : $qual->expiry_date }}
                                </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="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg>
                    <p class="text-gray-500 text-sm">{{ __('لا توجد مؤهلات مسجلة') }}</p>
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Delete Confirmation Modal --}}
    @if($showDeleteModal)
    <div class="fixed inset-0 z-50 flex items-center justify-center p-4" x-data x-trap.noscroll="true">
        <div class="fixed inset-0 bg-black/50" wire:click="closeDeleteModal"></div>
        <div class="relative bg-white rounded-xl shadow-xl w-full max-w-md p-6">
            <div class="text-center mb-4">
                <div class="w-14 h-14 rounded-full bg-red-100 mx-auto flex items-center justify-center mb-3">
                    <svg class="w-7 h-7 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                </div>
                <h3 class="text-lg font-bold text-gray-800">{{ __('حذف المدرب نهائياً') }}</h3>
                <p class="text-sm text-gray-600 mt-2">{{ __('سيتم حذف المدرب وإلغاء جميع التعيينات والمستحقات المعلقة. هذا الإجراء لا يمكن التراجع عنه.') }}</p>
            </div>

            <div class="bg-red-50 border border-red-200 rounded-lg p-3 mb-4">
                <p class="text-xs text-red-700 font-medium mb-1">{{ __('سيتم تنفيذ الإجراءات التالية:') }}</p>
                <ul class="text-xs text-red-600 space-y-1 list-disc list-inside">
                    <li>{{ __('إلغاء المستحقات والسلف المعلقة') }}</li>
                    <li>{{ __('إلغاء تعيينات المجموعات') }}</li>
                    <li>{{ __('حذف سجلات الحضور المستقبلية') }}</li>
                    <li>{{ __('تعطيل حساب المستخدم') }}</li>
                    <li>{{ __('أرشفة بيانات الموظف وتحرير الرقم القومي') }}</li>
                </ul>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    {{ __('للتأكيد، اكتب اسم المدرب:') }}
                    <span class="font-bold text-red-600">{{ $person?->name_ar }}</span>
                </label>
                <input type="text" wire:model="deleteConfirmation"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-red-500 focus:border-red-500"
                       placeholder="{{ $person?->name_ar }}">
                @error('deleteConfirmation')
                <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="flex gap-3">
                <button wire:click="confirmDelete" wire:loading.attr="disabled"
                        class="flex-1 px-4 py-2.5 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium transition disabled:opacity-50">
                    <span wire:loading.remove wire:target="confirmDelete">{{ __('تأكيد الحذف') }}</span>
                    <span wire:loading wire:target="confirmDelete">{{ __('جارٍ الحذف...') }}</span>
                </button>
                <button wire:click="closeDeleteModal"
                        class="flex-1 px-4 py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium transition">
                    {{ __('إلغاء') }}
                </button>
            </div>
        </div>
    </div>
    @endif
</div>
