<div class="stagger-in space-y-4">

    <header>
        <p class="text-xs" style="color: var(--portal-muted);">{{ $greeting }}</p>
        <h1 class="text-xl font-extrabold leading-tight">
            {{ $activeChild?->person?->name_ar ?? $activeChild?->person?->name ?? __('عضو') }}
        </h1>
    </header>

    {{-- The action list first. A member opens this to find out whether anything
         needs doing; burying that under statistics is the whole failure of the
         screen it replaces. --}}
    @if(count($actions) > 0)
        <div class="space-y-2">
            @foreach($actions as $action)
                @php
                    $tone = match($action['tone']) {
                        'danger' => 'var(--brand-danger)',
                        'warning' => 'var(--brand-warning)',
                        default => 'var(--brand-500)',
                    };
                @endphp
                <a href="{{ $action['route'] }}" wire:navigate
                   class="portal-card flex items-center gap-3 px-4 py-3"
                   style="border-color: color-mix(in oklab, {{ $tone }} 40%, var(--portal-border));">
                    <span class="h-9 w-1.5 shrink-0 rounded-full" style="background: {{ $tone }};" aria-hidden="true"></span>
                    <span class="min-w-0 flex-1">
                        <span class="block text-sm font-bold">{{ $action['label'] }}</span>
                        <span class="num block text-xs" style="color: var(--portal-muted);">{{ $action['detail'] }}</span>
                    </span>
                    <svg class="h-4 w-4 shrink-0 rtl:rotate-180" fill="none" stroke="currentColor" stroke-width="2"
                         viewBox="0 0 24 24" aria-hidden="true" style="color: var(--portal-muted);">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
                    </svg>
                </a>
            @endforeach
        </div>
    @endif

    <x-portal.card :title="__('الحصة القادمة')" :action="route('portal.training')">
        @if($nextSession)
            <div class="flex items-start gap-3">
                <div class="shrink-0 rounded-xl px-3 py-2 text-center"
                     style="background: var(--brand-50); color: var(--brand-700);">
                    <p class="text-[10px] font-semibold">{{ $nextSession->session_date?->translatedFormat('D') }}</p>
                    <p class="num text-xl font-extrabold leading-none">{{ $nextSession->session_date?->format('j') }}</p>
                    <p class="text-[10px]">{{ $nextSession->session_date?->translatedFormat('M') }}</p>
                </div>
                <div class="min-w-0 flex-1">
                    <p class="truncate text-sm font-bold">
                        {{ $nextSession->group?->name_ar ?? $nextSession->group?->program?->name_ar ?? __('حصة تدريب') }}
                    </p>
                    <p class="num mt-0.5 text-xs" style="color: var(--portal-muted);">
                        {{ \Carbon\Carbon::parse($nextSession->start_time)->format('H:i') }}
                        –
                        {{ \Carbon\Carbon::parse($nextSession->end_time)->format('H:i') }}
                    </p>
                    @if($nextSession->facility)
                        <p class="mt-0.5 truncate text-xs" style="color: var(--portal-muted);">
                            {{ $nextSession->facility->name_ar ?? $nextSession->facility->name }}
                        </p>
                    @endif
                    @if($nextSession->trainer)
                        {{-- The coach's name was always one join away and never
                             loaded. A parent wants to know who is taking it. --}}
                        <p class="mt-1 text-xs font-medium" style="color: var(--brand-600);">
                            {{ __('المدرب') }}: {{ $nextSession->trainer->person?->name_ar ?? $nextSession->trainer->person?->name }}
                        </p>
                    @endif
                </div>
            </div>
        @else
            <x-portal.empty :title="__('لا توجد حصص قادمة')"
                            :body="__('سيظهر هنا موعد الحصة التالية فور جدولتها')" />
        @endif
    </x-portal.card>

    <div class="grid grid-cols-3 gap-2">
        <x-portal.stat :label="__('المستحق')"
                       :value="format_money($outstanding)"
                       :tone="$outstanding > 0 ? 'danger' : 'success'" />
        <x-portal.stat :label="__('الحضور هذا الشهر')"
                       :value="$attendanceRate === null ? '—' : $attendanceRate . '%'"
                       tone="brand" />
        <x-portal.stat :label="__('حصص متتالية')"
                       :value="$streak"
                       :sub="$streak > 0 ? __('استمر') : null" />
    </div>

    <div class="grid grid-cols-2 gap-2">
        @foreach([
            ['portal.training', 'التدريب', 'M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25'],
            ['portal.payments', 'المدفوعات', 'M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12'],
            ['portal.pass', 'بطاقة الدخول', 'M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5z'],
            ['portal.academy', 'الأكاديمية', 'M12 21v-8.25M3 9l9-6 9 6'],
        ] as [$route, $label, $path])
            <a href="{{ route($route) }}" wire:navigate
               class="portal-card flex items-center gap-2.5 px-3 py-3">
                <span class="grid h-9 w-9 shrink-0 place-items-center rounded-xl"
                      style="background: var(--brand-50); color: var(--brand-600);">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.7" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="{{ $path }}"/>
                    </svg>
                </span>
                <span class="truncate text-xs font-semibold">{{ __($label) }}</span>
            </a>
        @endforeach
    </div>
</div>
