<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 balance, first and largest.

         It used to be a third of a three-across statistics row, where a
         four-digit figure with two decimals and a currency wrapped onto two
         lines, and it was repeated verbatim in the action list directly above.
         It is one fact, it is the fact members open the app for, and it gets
         the top of the screen. --}}
    @php
        $dues = money_parts($outstanding);
        // Three values for one tone: the wash behind the card, the text drawn
        // on that wash, and the text drawn on the filled button. They are not
        // interchangeable — see ColorRamp::ink().
        $duesTone = $outstanding === 0 ? 'success' : ($duesOverdue ? 'danger' : 'warning');
        $duesFill = "var(--brand-{$duesTone})";
        $duesInk = "var(--portal-{$duesTone}-ink)";
        $duesOnFill = "var(--brand-{$duesTone}-fg)";

        // Arabic counts singular, dual, 3–10 plural and 11+ singular again.
        // trans_choice with two pipe-separated forms gets three of those four
        // wrong, so the four forms are spelled out.
        $duesCount = match (true) {
            $outstandingCount === 1 => __('فاتورة واحدة'),
            $outstandingCount === 2 => __('فاتورتان'),
            $outstandingCount <= 10 => __(':count فواتير', ['count' => $outstandingCount]),
            default => __(':count فاتورة', ['count' => $outstandingCount]),
        };
    @endphp

    <a href="{{ route('portal.payments') }}" wire:navigate
       class="portal-card flex items-center gap-4 p-4"
       style="background: color-mix(in oklab, {{ $duesFill }} 7%, var(--portal-surface));
              border-color: color-mix(in oklab, {{ $duesFill }} 28%, var(--portal-border));">
        <div class="min-w-0 flex-1">
            <p class="text-xs font-semibold" style="color: {{ $duesInk }};">
                {{ $outstanding === 0 ? __('الحساب') : __('المستحق عليك') }}
            </p>

            @if($outstanding === 0)
                <p class="mt-1.5 text-lg font-extrabold leading-none">{{ __('مسدَّد بالكامل') }}</p>
                <p class="mt-1.5 text-xs" style="color: var(--portal-muted);">
                    {{ __('لا توجد فواتير مفتوحة') }}
                </p>
            @else
                {{-- The figure and its currency are typeset apart so the number
                     carries the weight and the unit stays out of its way. --}}
                <p class="num mt-1.5 flex items-baseline gap-1.5 whitespace-nowrap">
                    <span class="text-[28px] font-extrabold leading-none tracking-tight"
                          style="color: {{ $duesInk }};">{{ $dues['amount'] }}</span>
                    <span class="text-xs font-bold" style="color: {{ $duesInk }}; opacity: .75;">
                        {{ $dues['currency'] }}
                    </span>
                </p>
                <p class="mt-1.5 text-xs" style="color: var(--portal-muted);">
                    {{ $duesOverdue ? __('متأخرة عن موعدها') : __('مستحقة') }}
                    ·
                    {{ $duesCount }}
                </p>
            @endif
        </div>

        {{-- The foreground is computed per tone, not assumed: white on the
             warning amber is about 2:1 and unreadable. --}}
        <span class="tap-target shrink-0 rounded-xl px-3 text-xs font-bold"
              style="background: {{ $outstanding === 0 ? 'transparent' : $duesFill }};
                     color: {{ $outstanding === 0 ? 'var(--portal-muted)' : $duesOnFill }};">
            @if($outstanding === 0)
                <x-portal.icon name="chevron" class="h-4 w-4 rtl:rotate-180" />
            @else
                {{ __('ادفع') }}
            @endif
        </span>
    </a>

    {{-- Everything else that needs doing. A member should not have to open a
         tab to discover that a medical certificate expired last week. --}}
    @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>
                    <x-portal.icon name="chevron" width="2"
                                   class="h-4 w-4 shrink-0 rtl:rotate-180"
                                   style="color: var(--portal-muted);" />
                </a>
            @endforeach
        </div>
    @endif

    <x-portal.card :title="__('الحصة القادمة')" :action="route('portal.training')">
        @if($nextSession)
            <div class="flex items-start gap-3">
                <div class="w-14 shrink-0 rounded-xl px-2 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 mt-0.5 text-xl font-extrabold leading-none">{{ $nextSession->session_date?->format('j') }}</p>
                    <p class="mt-0.5 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>

                    {{-- Time, place and coach are three facts of the same kind,
                         so they line up as three rows with the same icon column
                         rather than three loose grey lines. --}}
                    <dl class="mt-1.5 space-y-1 text-xs" style="color: var(--portal-muted);">
                        <div class="flex items-center gap-1.5">
                            <x-portal.icon name="clock" class="h-3.5 w-3.5 shrink-0" />
                            <dd class="num">
                                {{ \Carbon\Carbon::parse($nextSession->start_time)->format('H:i') }}
                                –
                                {{ \Carbon\Carbon::parse($nextSession->end_time)->format('H:i') }}
                            </dd>
                        </div>

                        @if($nextSession->facility)
                            <div class="flex items-center gap-1.5">
                                <x-portal.icon name="pin" class="h-3.5 w-3.5 shrink-0" />
                                <dd class="truncate">{{ $nextSession->facility->name_ar ?? $nextSession->facility->name }}</dd>
                            </div>
                        @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. --}}
                            <div class="flex items-center gap-1.5" style="color: var(--portal-link);">
                                <x-portal.icon name="whistle" class="h-3.5 w-3.5 shrink-0" />
                                <dd class="truncate font-medium">
                                    {{ $nextSession->trainer->person?->name_ar ?? $nextSession->trainer->person?->name }}
                                </dd>
                            </div>
                        @endif
                    </dl>
                </div>
            </div>
        @else
            <x-portal.empty :title="__('لا توجد حصص قادمة')"
                            :body="__('سيظهر هنا موعد الحصة التالية فور جدولتها')" />
        @endif
    </x-portal.card>

    {{-- Two, not three: the balance left this row for the top of the screen,
         and two tiles across a phone leaves the numbers room to be read. --}}
    <div class="grid grid-cols-2 gap-2">
        <x-portal.stat :label="__('الحضور هذا الشهر')"
                       :value="$attendanceRate === null ? '—' : $attendanceRate . '%'"
                       :sub="$attendanceRate === null ? __('لا سجل بعد') : null"
                       tone="brand" />
        <x-portal.stat :label="__('حصص متتالية')"
                       :value="$streak"
                       :sub="$streak > 0 ? __('استمر') : __('ابدأ سلسلة جديدة')" />
    </div>

    <div class="grid grid-cols-2 gap-2">
        @foreach([
            ['portal.training', 'التدريب', 'training'],
            ['portal.payments', 'المدفوعات', 'payments'],
            ['portal.pass', 'بطاقة الدخول', 'pass'],
            ['portal.academy', 'الأكاديمية', 'academy'],
        ] as [$route, $label, $icon])
            <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-700);">
                    <x-portal.icon :name="$icon" class="h-5 w-5" width="1.7" />
                </span>
                <span class="truncate text-xs font-semibold">{{ __($label) }}</span>
            </a>
        @endforeach
    </div>
</div>
