<div>
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ $person->name_ar }}</h1>
        <div class="flex items-center gap-2 sm:gap-3">
            @can('participants.update')
            <a href="{{ route('people.edit', $person) }}" wire:navigate
               class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium">
                {{ __('تعديل') }}
            </a>
            @endcan
            <a href="{{ route('people.list') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-700">{{ __('← العودة') }}</a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
        <!-- Main Info -->
        <div class="lg:col-span-2 space-y-6">
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
                <h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('المعلومات الأساسية') }}</h2>
                <dl class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                    <div>
                        <dt class="text-sm text-gray-500">{{ __('الاسم بالعربية') }}</dt>
                        <dd class="font-medium text-gray-800">{{ $person->name_ar }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">{{ __('الاسم بالإنجليزية') }}</dt>
                        <dd class="font-medium text-gray-800" dir="ltr">{{ $person->name }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">{{ __('الرقم القومي') }}</dt>
                        <dd class="font-medium text-gray-800 font-mono" dir="ltr">{{ $person->national_id ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">{{ __('تاريخ الميلاد') }}</dt>
                        <dd class="font-medium text-gray-800">
                            @if($person->date_of_birth)
                                {{ $person->date_of_birth->format('Y-m-d') }}
                                <span class="text-sm text-gray-500">({{ $person->age }} {{ __('سنة') }})</span>
                            @else
                                —
                            @endif
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">{{ __('الجنس') }}</dt>
                        <dd class="font-medium text-gray-800">
                            @if($person->gender)
                                {{ $person->gender === 'male' ? __('ذكر') : __('أنثى') }}
                            @else
                                —
                            @endif
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">{{ __('التصنيف') }}</dt>
                        <dd class="font-medium text-gray-800">
                            @php $classLabels = ['regular' => 'عادي', 'vip' => 'VIP', 'scholarship' => 'منحة', 'staff_child' => 'ابن موظف', 'trial' => 'تجريبي']; @endphp
                            {{ __($classLabels[$person->classification] ?? $person->classification ?? '—') }}
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">{{ __('الجنسية') }}</dt>
                        <dd class="font-medium text-gray-800">{{ $person->nationality ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">{{ __('المصدر') }}</dt>
                        <dd class="font-medium text-gray-800">{{ $person->source ?? '—' }}</dd>
                    </div>
                </dl>
            </div>

            <!-- Contact -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
                <h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('الاتصال') }}</h2>
                <dl class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                    <div>
                        <dt class="text-sm text-gray-500">{{ __('الهاتف') }}</dt>
                        <dd class="font-medium text-gray-800" dir="ltr">{{ $person->phone ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">{{ __('هاتف بديل') }}</dt>
                        <dd class="font-medium text-gray-800" dir="ltr">{{ $person->phone_secondary ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">{{ __('البريد الإلكتروني') }}</dt>
                        <dd class="font-medium text-gray-800" dir="ltr">{{ $person->email ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">{{ __('المحافظة') }}</dt>
                        <dd class="font-medium text-gray-800">{{ $person->governorate ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">{{ __('المدينة') }}</dt>
                        <dd class="font-medium text-gray-800">{{ $person->city ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">{{ __('العنوان') }}</dt>
                        <dd class="font-medium text-gray-800">{{ $person->address ?? '—' }}</dd>
                    </div>
                </dl>
            </div>

            <!-- Emergency Contact -->
            @if($person->emergency_contact_name || $person->emergency_contact_phone)
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
                <h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('جهة اتصال الطوارئ') }}</h2>
                <dl class="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4">
                    <div>
                        <dt class="text-sm text-gray-500">{{ __('الاسم') }}</dt>
                        <dd class="font-medium text-gray-800">{{ $person->emergency_contact_name ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">{{ __('الهاتف') }}</dt>
                        <dd class="font-medium text-gray-800" dir="ltr">{{ $person->emergency_contact_phone ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">{{ __('صلة القرابة') }}</dt>
                        <dd class="font-medium text-gray-800">{{ $person->emergency_contact_relation ?? '—' }}</dd>
                    </div>
                </dl>
            </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Guardian Info -->
            @if($person->guardian)
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
                <h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('بيانات ولي الأمر') }}</h2>
                <div class="space-y-2">
                    <p class="text-sm">
                        <span class="text-gray-500">{{ __('صلة القرابة') }}:</span>
                        <span class="font-medium">
                            @php
                                $relLabels = ['father' => 'أب', 'mother' => 'أم', 'grandfather' => 'جد', 'grandmother' => 'جدة', 'uncle' => 'عم/خال', 'aunt' => 'عمة/خالة', 'sibling' => 'أخ/أخت', 'legal_guardian' => 'ولي أمر قانوني', 'other' => 'أخرى'];
                            @endphp
                            {{ __($relLabels[$person->guardian->relationship_type] ?? $person->guardian->relationship_type) }}
                        </span>
                    </p>
                    @if($person->guardian->occupation)
                    <p class="text-sm">
                        <span class="text-gray-500">{{ __('المهنة') }}:</span>
                        <span class="font-medium">{{ $person->guardian->occupation }}</span>
                    </p>
                    @endif
                    @if($person->guardian->workplace)
                    <p class="text-sm">
                        <span class="text-gray-500">{{ __('مكان العمل') }}:</span>
                        <span class="font-medium">{{ $person->guardian->workplace }}</span>
                    </p>
                    @endif
                    <div class="flex flex-wrap gap-2 mt-3">
                        @if($person->guardian->can_pickup)
                        <span class="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded-full">{{ __('مصرح باستلام') }}</span>
                        @endif
                        @if($person->guardian->is_emergency_contact)
                        <span class="px-2 py-0.5 text-xs bg-red-100 text-red-700 rounded-full">{{ __('جهة طوارئ') }}</span>
                        @endif
                        @if($person->guardian->is_financial_responsible)
                        <span class="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">{{ __('مسؤول مالياً') }}</span>
                        @endif
                    </div>
                </div>
            </div>
            @endif

            <!-- Medical -->
            @if($person->blood_type || $person->medical_notes)
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
                <h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('معلومات طبية') }}</h2>
                @if($person->blood_type)
                <p class="text-sm"><span class="text-gray-500">{{ __('فصيلة الدم') }}:</span> <span class="font-medium">{{ $person->blood_type }}</span></p>
                @endif
                @if($person->medical_notes)
                <p class="text-sm text-gray-700 mt-2">{{ $person->medical_notes }}</p>
                @endif
            </div>
            @endif

            <!-- Notes -->
            @if($person->notes)
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
                <h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('ملاحظات') }}</h2>
                <p class="text-sm text-gray-700">{{ $person->notes }}</p>
            </div>
            @endif
        </div>
    </div>
</div>
