<div>
    {{-- Parent Info Card --}}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 mb-6">
        <div class="flex items-center gap-4">
            <div class="w-16 h-16 rounded-full bg-[#2563EB]/10 flex items-center justify-center">
                <span class="text-2xl font-bold text-[#2563EB]">{{ mb_substr($parentName ?? '?', 0, 1) }}</span>
            </div>
            <div class="flex-1">
                <h1 class="text-lg font-bold text-[#0F172A]">{{ $parentName ?? '' }}</h1>
                @if($phone ?? null)
                    <p class="text-sm text-[#64748B] mt-0.5" dir="ltr">{{ $phone }}</p>
                @endif
                @if($email ?? null)
                    <p class="text-sm text-[#64748B] mt-0.5" dir="ltr">{{ $email }}</p>
                @endif
            </div>
        </div>
    </div>

    {{-- Children Section --}}
    <div class="mb-6">
        <h2 class="text-base font-semibold text-[#0F172A] mb-3">{{ __('الأبناء') }}</h2>

        @if(empty($children) || (is_countable($children) && count($children) === 0))
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 text-center">
                <svg class="w-10 h-10 text-gray-200 mx-auto mb-2" 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.197"/>
                </svg>
                <p class="text-sm text-[#64748B]">{{ __('لا يوجد أبناء مسجلون') }}</p>
            </div>
        @else
            <div class="space-y-3">
                @php
                    $childStatusConfig = [
                        'active' => ['label' => 'نشط', 'bg' => 'bg-green-100', 'text' => 'text-green-700'],
                        'registered' => ['label' => 'مسجل', 'bg' => 'bg-blue-100', 'text' => 'text-blue-700'],
                        'frozen' => ['label' => 'مجمد', 'bg' => 'bg-cyan-100', 'text' => 'text-cyan-700'],
                        'suspended' => ['label' => 'موقوف', 'bg' => 'bg-red-100', 'text' => 'text-red-700'],
                        'inactive' => ['label' => 'غير نشط', 'bg' => 'bg-gray-100', 'text' => 'text-gray-700'],
                        'graduated' => ['label' => 'متخرج', 'bg' => 'bg-purple-100', 'text' => 'text-purple-700'],
                        'withdrawn' => ['label' => 'منسحب', 'bg' => 'bg-gray-100', 'text' => 'text-gray-600'],
                    ];
                @endphp

                @foreach($children as $child)
                    @php $childConf = $childStatusConfig[$child['status'] ?? ''] ?? ['label' => $child['status'] ?? '', 'bg' => 'bg-gray-100', 'text' => 'text-gray-700']; @endphp
                    <a href="{{ route('parent.child-detail', ['child' => $child['id'] ?? '']) }}" wire:navigate
                       class="block bg-white rounded-2xl shadow-sm border border-gray-100 p-4 hover:shadow-md transition-shadow">
                        <div class="flex items-center gap-3">
                            <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center shrink-0">
                                <span class="text-lg font-bold text-indigo-600">{{ mb_substr($child['name'] ?? '?', 0, 1) }}</span>
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-2">
                                    <p class="text-sm font-semibold text-[#0F172A] truncate">{{ $child['name'] ?? '' }}</p>
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium {{ $childConf['bg'] }} {{ $childConf['text'] }} shrink-0">
                                        {{ __($childConf['label']) }}
                                    </span>
                                </div>
                                @if(!empty($child['programs']))
                                    <div class="flex flex-wrap gap-1 mt-1">
                                        @foreach($child['programs'] as $program)
                                            <span class="text-[10px] text-[#64748B] bg-gray-50 px-2 py-0.5 rounded-full">{{ $program }}</span>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                            <svg class="w-4 h-4 text-[#64748B] shrink-0 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                            </svg>
                        </div>
                    </a>
                @endforeach
            </div>
        @endif
    </div>

    {{-- Settings Section --}}
    <div class="mb-6">
        <h2 class="text-base font-semibold text-[#0F172A] mb-3">{{ __('الإعدادات') }}</h2>

        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden divide-y divide-gray-50">
            {{-- Notification Preferences --}}
            <a href="{{ route('parent.notifications') }}" wire:navigate
               class="flex items-center justify-between p-4 hover:bg-gray-50 transition-colors min-h-[44px]">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-lg bg-blue-50 flex items-center justify-center">
                        <svg class="w-4.5 h-4.5 text-[#2563EB]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                        </svg>
                    </div>
                    <span class="text-sm text-[#0F172A]">{{ __('الإشعارات') }}</span>
                </div>
                <svg class="w-4 h-4 text-[#64748B] rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </a>

            {{-- Language --}}
            <div class="flex items-center justify-between p-4 min-h-[44px]">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-lg bg-purple-50 flex items-center justify-center">
                        <svg class="w-4.5 h-4.5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/>
                        </svg>
                    </div>
                    <span class="text-sm text-[#0F172A]">{{ __('اللغة') }}</span>
                </div>
                <span class="text-sm text-[#64748B]">{{ __('العربية') }}</span>
            </div>

            {{-- Contact Academy --}}
            <a href="{{ route('parent.notifications') }}" wire:navigate
               class="flex items-center justify-between p-4 hover:bg-gray-50 transition-colors min-h-[44px]">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-lg bg-green-50 flex items-center justify-center">
                        <svg class="w-4.5 h-4.5 text-[#059669]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                        </svg>
                    </div>
                    <span class="text-sm text-[#0F172A]">{{ __('تواصل مع الأكاديمية') }}</span>
                </div>
                <svg class="w-4 h-4 text-[#64748B] rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </a>
        </div>
    </div>

    {{-- Logout Button --}}
    <div class="mt-8">
        <button
            wire:click="logout"
            wire:loading.attr="disabled"
            wire:target="logout"
            wire:confirm="{{ __('هل أنت متأكد من تسجيل الخروج؟') }}"
            class="w-full bg-red-50 text-[#DC2626] font-medium py-3.5 px-6 rounded-2xl border border-red-100 hover:bg-red-100 transition-colors min-h-[44px]"
        >
            <span wire:loading.remove wire:target="logout">{{ __('تسجيل الخروج') }}</span>
            <span wire:loading wire:target="logout">{{ __('جارٍ الخروج...') }}</span>
        </button>
    </div>
</div>
