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

    {{-- Four steps because the phone must be proven before anything is
         written; a member who abandons at step two leaves nothing behind. --}}
    <ol class="flex items-center gap-1" aria-label="{{ __('خطوات التسجيل') }}">
        @foreach([1 => __('بياناتك'), 2 => __('التحقق'), 3 => term('member_definite'), 4 => __('الموافقات')] as $n => $label)
            <li class="flex-1">
                <div class="h-1 rounded-full"
                     style="background: {{ $step >= $n ? 'var(--brand-500)' : 'var(--portal-border)' }};"></div>
                <p class="mt-1 text-center text-[10px]"
                   style="color: {{ $step >= $n ? 'var(--portal-link)' : 'var(--portal-muted)' }};">{{ __($label) }}</p>
            </li>
        @endforeach
    </ol>

    @if($step === 1)
        <form wire:submit="sendCode" class="portal-card space-y-3 px-4 py-4">
            <h2 class="text-sm font-bold">{{ __('بيانات ولي الأمر') }}</h2>

            @foreach([
                ['guardianName', 'الاسم بالكامل', 'text', null],
                ['phone', 'رقم الهاتف', 'tel', 'ltr'],
                ['email', 'البريد الإلكتروني (اختياري)', 'email', 'ltr'],
            ] as [$field, $label, $type, $inputDir])
                <div>
                    <label for="{{ $field }}" class="block text-xs font-semibold">{{ __($label) }}</label>
                    <input id="{{ $field }}" type="{{ $type }}" wire:model="{{ $field }}"
                           @if($inputDir) dir="{{ $inputDir }}" @endif
                           class="mt-1 w-full rounded-xl border px-3 py-2.5 text-sm"
                           style="border-color: var(--portal-border); background: var(--portal-surface);">
                    @error($field) <p role="alert" class="mt-1 text-[11px]" style="color: var(--portal-danger-ink);">{{ $message }}</p> @enderror
                </div>
            @endforeach

            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label for="password" class="block text-xs font-semibold">{{ __('كلمة المرور') }}</label>
                    <input id="password" type="password" wire:model="password" autocomplete="new-password"
                           class="mt-1 w-full rounded-xl border px-3 py-2.5 text-sm"
                           style="border-color: var(--portal-border); background: var(--portal-surface);">
                </div>
                <div>
                    <label for="pwc" class="block text-xs font-semibold">{{ __('تأكيدها') }}</label>
                    <input id="pwc" type="password" wire:model="passwordConfirmation" autocomplete="new-password"
                           class="mt-1 w-full rounded-xl border px-3 py-2.5 text-sm"
                           style="border-color: var(--portal-border); background: var(--portal-surface);">
                </div>
            </div>
            @error('password') <p role="alert" class="text-[11px]" style="color: var(--portal-danger-ink);">{{ $message }}</p> @enderror

            <button type="submit" wire:loading.attr="disabled"
                    class="w-full rounded-xl px-4 py-3 text-sm font-bold disabled:opacity-60"
                    style="background: var(--brand-500); color: var(--brand-fg);">
                <span wire:loading.remove>{{ __('إرسال رمز التحقق') }}</span>
                <span wire:loading>{{ __('جارٍ الإرسال...') }}</span>
            </button>
        </form>

    @elseif($step === 2)
        <form wire:submit="verifyCode" class="portal-card space-y-3 px-4 py-4">
            <h2 class="text-sm font-bold">{{ __('التحقق من رقم الهاتف') }}</h2>
            <p class="text-[11px]" style="color: var(--portal-muted);">
                {{ __('أرسلنا رمزاً من ٦ أرقام عبر واتساب إلى') }}
                <span class="num font-semibold">{{ $phone }}</span>
            </p>
            <div>
                <label for="code" class="block text-xs font-semibold">{{ __('رمز التحقق') }}</label>
                <input id="code" type="text" inputmode="numeric" maxlength="6" dir="ltr" wire:model="code"
                       autocomplete="one-time-code"
                       class="num mt-1 w-full rounded-xl border px-3 py-2.5 text-center text-lg tracking-[0.4em]"
                       style="border-color: var(--portal-border); background: var(--portal-surface);">
                @error('code') <p role="alert" class="mt-1 text-[11px]" style="color: var(--portal-danger-ink);">{{ $message }}</p> @enderror
            </div>
            <button type="submit" class="w-full rounded-xl px-4 py-3 text-sm font-bold"
                    style="background: var(--brand-500); color: var(--brand-fg);">
                {{ __('تحقق') }}
            </button>
        </form>

    @elseif($step === 3)
        <form wire:submit="goToConsents" class="portal-card space-y-3 px-4 py-4">
            <h2 class="text-sm font-bold">{{ __('بيانات') }} {{ term('member_definite') }}</h2>

            <div>
                <label for="childName" class="block text-xs font-semibold">{{ __('اسم') }} {{ term('member_definite') }}</label>
                <input id="childName" type="text" wire:model="childName"
                       class="mt-1 w-full rounded-xl border px-3 py-2.5 text-sm"
                       style="border-color: var(--portal-border); background: var(--portal-surface);">
                @error('childName') <p role="alert" class="mt-1 text-[11px]" style="color: var(--portal-danger-ink);">{{ $message }}</p> @enderror
            </div>

            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label for="dob" class="block text-xs font-semibold">{{ __('تاريخ الميلاد') }}</label>
                    <input id="dob" type="date" dir="ltr" wire:model="childDateOfBirth"
                           class="num mt-1 w-full rounded-xl border px-3 py-2.5 text-sm"
                           style="border-color: var(--portal-border); background: var(--portal-surface);">
                    @error('childDateOfBirth') <p role="alert" class="mt-1 text-[11px]" style="color: var(--portal-danger-ink);">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label for="gender" class="block text-xs font-semibold">{{ __('النوع') }}</label>
                    <select id="gender" wire:model="childGender"
                            class="mt-1 w-full rounded-xl border px-3 py-2.5 text-sm"
                            style="border-color: var(--portal-border); background: var(--portal-surface);">
                        <option value="">{{ __('اختر') }}</option>
                        <option value="male">{{ __('ذكر') }}</option>
                        <option value="female">{{ __('أنثى') }}</option>
                    </select>
                    @error('childGender') <p role="alert" class="mt-1 text-[11px]" style="color: var(--portal-danger-ink);">{{ $message }}</p> @enderror
                </div>
            </div>

            @if($branches->count() > 1)
                <div>
                    <label for="branch" class="block text-xs font-semibold">{{ __('الفرع') }}</label>
                    <select id="branch" wire:model="branchId"
                            class="mt-1 w-full rounded-xl border px-3 py-2.5 text-sm"
                            style="border-color: var(--portal-border); background: var(--portal-surface);">
                        <option value="">{{ __('اختر الفرع') }}</option>
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}">{{ $branch->name_ar ?? $branch->name }}</option>
                        @endforeach
                    </select>
                </div>
            @endif

            <button type="submit" class="w-full rounded-xl px-4 py-3 text-sm font-bold"
                    style="background: var(--brand-500); color: var(--brand-fg);">
                {{ __('التالي') }}
            </button>
        </form>

    @else
        <form wire:submit="submit" class="portal-card space-y-3 px-4 py-4">
            <h2 class="text-sm font-bold">{{ __('الموافقات') }}</h2>

            @foreach($consentTypes as $type)
                <label class="flex items-start gap-3">
                    <input type="checkbox" wire:model="consents.{{ $type->value }}"
                           class="mt-1 h-4 w-4 shrink-0 rounded" style="accent-color: var(--brand-500);">
                    <span class="min-w-0">
                        <span class="text-sm font-semibold">
                            {{ $type->label() }}
                            @if($type->isRequired())
                                <span class="text-[10px] font-normal" style="color: var(--portal-danger-ink);">— {{ __('مطلوب') }}</span>
                            @endif
                        </span>
                        <span class="mt-0.5 block text-[11px] leading-relaxed" style="color: var(--portal-muted);">
                            {{ $type->description() }}
                        </span>
                    </span>
                </label>
            @endforeach

            @error('consents') <p role="alert" class="text-[11px]" style="color: var(--portal-danger-ink);">{{ $message }}</p> @enderror
            @error('phone') <p role="alert" class="text-[11px]" style="color: var(--portal-danger-ink);">{{ $message }}</p> @enderror

            <p class="rounded-xl px-3 py-2 text-[11px] leading-relaxed"
               style="background: color-mix(in oklab, var(--brand-500) 8%, var(--portal-surface)); color: var(--portal-muted);">
                {{ __('يُنشأ حسابك فوراً، ويظل تسجيل :member قيد مراجعة الأكاديمية قبل تفعيله.', ['member' => term('member_definite')]) }}
            </p>

            <button type="submit" wire:loading.attr="disabled"
                    class="w-full rounded-xl px-4 py-3 text-sm font-bold disabled:opacity-60"
                    style="background: var(--brand-500); color: var(--brand-fg);">
                <span wire:loading.remove>{{ __('إنشاء الحساب') }}</span>
                <span wire:loading>{{ __('جارٍ الإنشاء...') }}</span>
            </button>
        </form>
    @endif
</div>
