<div>
    {{-- Header --}}
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('بوابة ولي الأمر') }}</h1>
            <p class="text-sm text-gray-500 mt-1">{{ __('متابعة أبنائك ومعلوماتهم') }}</p>
        </div>
    </div>

    {{-- Summary Stats --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        {{-- Children Count --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center">
                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('الأبناء') }}</p>
                    <p class="text-xl font-bold text-gray-800" dir="ltr">{{ $children->count() }}</p>
                </div>
            </div>
        </div>

        {{-- Active Enrollments --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center">
                    <svg class="w-6 h-6 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-xl font-bold text-gray-800" dir="ltr">{{ $children->sum(fn($c) => $c->activeEnrollments->count()) }}</p>
                </div>
            </div>
        </div>

        {{-- Total Paid --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-xl bg-purple-100 flex items-center justify-center">
                    <svg class="w-6 h-6 text-purple-600" 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>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('إجمالي المدفوع') }}</p>
                    <p class="text-xl font-bold text-gray-800" dir="ltr">{{ number_format($totalPaid / 100, 2) }} {{ __('ج.م') }}</p>
                </div>
            </div>
        </div>

        {{-- Outstanding Balance --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-xl {{ $totalOutstanding > 0 ? 'bg-red-100' : 'bg-gray-100' }} flex items-center justify-center">
                    <svg class="w-6 h-6 {{ $totalOutstanding > 0 ? 'text-red-600' : 'text-gray-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-xl font-bold {{ $totalOutstanding > 0 ? 'text-red-600' : 'text-gray-800' }}" dir="ltr">{{ number_format($totalOutstanding / 100, 2) }} {{ __('ج.م') }}</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Children Cards --}}
    <div class="mb-8">
        <h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('الأبناء') }}</h2>

        @if($children->isEmpty())
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 text-center">
                <svg class="w-12 h-12 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="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-gray-500">{{ __('لا يوجد أبناء مسجلون') }}</p>
            </div>
        @else
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                @foreach($children as $child)
                    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
                        {{-- Child Header --}}
                        <div class="flex items-start justify-between mb-4">
                            <div class="flex items-center gap-3">
                                <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
                                    <span class="text-lg font-bold text-indigo-600">{{ mb_substr($child->person?->name_ar ?? '?', 0, 1) }}</span>
                                </div>
                                <div>
                                    <a href="{{ route('participants.show', $child) }}" wire:navigate class="text-blue-600 hover:text-blue-800 hover:underline font-semibold">{{ $child->person?->name_ar ?? '-' }}</a>
                                    <p class="text-sm text-gray-500">{{ $child->participant_number ?? '' }}</p>
                                </div>
                            </div>
                            @php
                                $statusColors = [
                                    'active' => 'bg-green-100 text-green-700',
                                    'registered' => 'bg-blue-100 text-blue-700',
                                    'frozen' => 'bg-cyan-100 text-cyan-700',
                                    'suspended' => 'bg-red-100 text-red-700',
                                    'inactive' => 'bg-gray-100 text-gray-700',
                                ];
                                $statusLabels = [
                                    'active' => 'نشط',
                                    'registered' => 'مسجل',
                                    'frozen' => 'مجمد',
                                    'suspended' => 'موقوف',
                                    'inactive' => 'غير نشط',
                                    'graduated' => 'متخرج',
                                    'withdrawn' => 'منسحب',
                                    'transferred' => 'محول',
                                    'blacklisted' => 'محظور',
                                ];
                                $childStatus = $child->status?->value ?? 'active';
                            @endphp
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $statusColors[$childStatus] ?? 'bg-gray-100 text-gray-700' }}">
                                {{ $statusLabels[$childStatus] ?? $childStatus }}
                            </span>
                        </div>

                        {{-- Attendance Rate --}}
                        @php $att = $attendanceData[$child->id] ?? ['rate' => null, 'total' => 0, 'positive' => 0]; @endphp
                        <div class="mb-4">
                            <div class="flex items-center justify-between mb-1">
                                <span class="text-sm text-gray-600">{{ __('نسبة الحضور') }}</span>
                                <span class="text-sm font-medium {{ ($att['rate'] ?? 0) >= 75 ? 'text-green-600' : (($att['rate'] ?? 0) >= 50 ? 'text-amber-600' : 'text-red-600') }}" dir="ltr">
                                    {{ $att['rate'] !== null ? $att['rate'] . '%' : __('لا توجد بيانات') }}
                                </span>
                            </div>
                            @if($att['rate'] !== null)
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="h-2 rounded-full {{ $att['rate'] >= 75 ? 'bg-green-500' : ($att['rate'] >= 50 ? 'bg-amber-500' : 'bg-red-500') }}"
                                         style="width: {{ min($att['rate'], 100) }}%"></div>
                                </div>
                                <p class="text-xs text-gray-400 mt-1" dir="ltr">{{ $att['positive'] }} / {{ $att['total'] }} {{ __('حصة') }}</p>
                            @endif
                        </div>

                        {{-- Active Groups --}}
                        @if($child->activeEnrollments->isNotEmpty())
                            <div class="mb-2">
                                <p class="text-sm font-medium text-gray-600 mb-2">{{ __('المجموعات النشطة') }}</p>
                                <div class="flex flex-wrap gap-2">
                                    @foreach($child->activeEnrollments as $enrollment)
                                        @if($enrollment->group)
                                            <a href="{{ route('groups.edit', $enrollment->group) }}" wire:navigate class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium bg-indigo-50 text-indigo-700 border border-indigo-200 hover:underline hover:bg-indigo-100 transition-colors">
                                                {{ $enrollment->group->name_ar ?? '-' }}
                                            </a>
                                        @else
                                            <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium bg-indigo-50 text-indigo-700 border border-indigo-200">
                                                {{ $enrollment->program?->name_ar ?? '-' }}
                                            </span>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        @else
                            <p class="text-sm text-gray-400">{{ __('لا يوجد اشتراكات نشطة') }}</p>
                        @endif
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    {{-- Upcoming Sessions --}}
    <div class="mb-8">
        <h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('الحصص القادمة') }}</h2>

        @if($upcomingSessions->isEmpty())
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 text-center">
                <svg class="w-12 h-12 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="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>
                <p class="text-gray-500">{{ __('لا توجد حصص قادمة') }}</p>
            </div>
        @else
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase tracking-wider">{{ __('التاريخ') }}</th>
                            <th class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase tracking-wider">{{ __('الوقت') }}</th>
                            <th class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase tracking-wider">{{ __('المجموعة') }}</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($upcomingSessions as $session)
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="text-sm text-gray-900">{{ $session->session_date->translatedFormat('D j M') }}</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap" dir="ltr">
                                    <span class="text-sm text-gray-700">
                                        {{ \Carbon\Carbon::parse($session->start_time)->format('H:i') }}
                                        -
                                        {{ \Carbon\Carbon::parse($session->end_time)->format('H:i') }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="text-sm font-medium text-gray-900">{{ $session->group?->name_ar ?? '-' }}</span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

    {{-- Payment History --}}
    <div class="mb-8">
        <h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('سجل الفواتير') }}</h2>

        @if($invoices->isEmpty())
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 text-center">
                <svg class="w-12 h-12 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="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"/>
                </svg>
                <p class="text-gray-500">{{ __('لا توجد فواتير') }}</p>
            </div>
        @else
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase tracking-wider">{{ __('رقم الفاتورة') }}</th>
                            <th class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase tracking-wider">{{ __('التاريخ') }}</th>
                            <th class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase tracking-wider">{{ __('الإجمالي') }}</th>
                            <th class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase tracking-wider">{{ __('المدفوع') }}</th>
                            <th class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase tracking-wider">{{ __('المتبقي') }}</th>
                            <th class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase tracking-wider">{{ __('الحالة') }}</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($invoices as $invoice)
                            @php
                                $invoiceStatusColors = [
                                    'draft' => 'bg-gray-100 text-gray-700',
                                    'sent' => 'bg-blue-100 text-blue-700',
                                    'partially_paid' => 'bg-amber-100 text-amber-700',
                                    'paid' => 'bg-green-100 text-green-700',
                                    'overdue' => 'bg-red-100 text-red-700',
                                    'cancelled' => 'bg-gray-100 text-gray-500',
                                    'refunded' => 'bg-purple-100 text-purple-700',
                                ];
                                $invoiceStatusLabels = [
                                    'draft' => 'مسودة',
                                    'sent' => 'مرسلة',
                                    'partially_paid' => 'مدفوعة جزئياً',
                                    'paid' => 'مدفوعة',
                                    'overdue' => 'متأخرة',
                                    'cancelled' => 'ملغاة',
                                    'refunded' => 'مستردة',
                                ];
                                $invStatus = $invoice->status?->value ?? 'draft';
                            @endphp
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <a href="{{ route('invoices.show', $invoice) }}" wire:navigate class="text-sm font-medium text-blue-600 hover:text-blue-800 hover:underline" dir="ltr">{{ $invoice->number ?? '-' }}</a>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="text-sm text-gray-700">{{ $invoice->issue_date?->format('Y-m-d') ?? '-' }}</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="text-sm text-gray-800 font-medium" dir="ltr">{{ number_format($invoice->total_amount / 100, 2) }} {{ __('ج.م') }}</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="text-sm text-green-700" dir="ltr">{{ number_format($invoice->paid_amount / 100, 2) }} {{ __('ج.م') }}</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="text-sm {{ $invoice->due_amount > 0 ? 'text-red-600 font-medium' : 'text-gray-500' }}" dir="ltr">{{ number_format($invoice->due_amount / 100, 2) }} {{ __('ج.م') }}</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $invoiceStatusColors[$invStatus] ?? 'bg-gray-100 text-gray-700' }}">
                                        {{ $invoiceStatusLabels[$invStatus] ?? $invStatus }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>
