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

    <x-portal.card :title="__('الموافقات')">
        <p class="mb-3 text-[11px] leading-relaxed" style="color: var(--portal-muted);">
            {{ __('كل بند قرار منفصل. يمكنك سحب أي موافقة اختيارية في أي وقت، ويُسجَّل ذلك بتاريخه.') }}
        </p>

        <div class="space-y-4">
            @foreach($types as $type)
                <label class="flex items-start gap-3">
                    <div class="relative mt-0.5 shrink-0" dir="ltr">
                        <input type="checkbox" wire:model="consents.{{ $type->value }}"
                               @disabled($type->isRequired() && ($consents[$type->value] ?? false))
                               class="peer sr-only">
                        <div class="h-6 w-11 rounded-full transition-colors after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full"
                             style="background: {{ ($consents[$type->value] ?? false) ? 'var(--brand-500)' : 'var(--portal-border)' }};"></div>
                    </div>
                    <div 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-muted);">
                                    — {{ __('مطلوب') }}
                                </span>
                            @endif
                        </span>
                        <p class="mt-0.5 text-[11px] leading-relaxed" style="color: var(--portal-muted);">
                            {{ $type->description() }}
                        </p>
                    </div>
                </label>
            @endforeach
        </div>

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

        <button type="button" wire:click="saveConsents"
                class="mt-4 w-full rounded-xl px-4 py-2.5 text-sm font-bold"
                style="background: var(--brand-500); color: var(--brand-fg);">
            {{ __('حفظ التفضيلات') }}
        </button>
    </x-portal.card>

    <x-portal.card :title="__('نسخة من بياناتي')">
        <p class="text-[11px] leading-relaxed" style="color: var(--portal-muted);">
            {{ __('تنزيل كل ما يحتفظ به النظام عن حسابك والأعضاء المرتبطين به: الفواتير، المدفوعات، الموافقات.') }}
        </p>
        <button type="button" wire:click="export"
                class="mt-3 w-full rounded-xl border px-4 py-2.5 text-sm font-bold"
                style="border-color: var(--portal-border); color: var(--portal-link);">
            {{ __('تنزيل بياناتي') }}
        </button>
    </x-portal.card>

    <x-portal.card :title="__('حذف الحساب')">
        @if($deletion)
            <div class="rounded-xl px-3 py-2.5 text-xs"
                 style="background: color-mix(in oklab, var(--brand-warning) 12%, var(--portal-surface)); color: var(--portal-warning-ink);">
                <p class="font-bold">{{ $deletion->statusLabel() }}</p>
                @if($deletion->status === 'pending')
                    <p class="num mt-1">
                        {{ __('سيُنفَّذ بعد') }} {{ $deletion->eligible_at?->diffForHumans(null, true) }}
                    </p>
                @endif
                @foreach(($deletion->blockers ?? []) as $blocker)
                    <p class="mt-1">• {{ $blocker }}</p>
                @endforeach
            </div>
            <button type="button" wire:click="cancelDeletion"
                    class="mt-3 w-full rounded-xl border px-4 py-2.5 text-sm font-bold"
                    style="border-color: var(--portal-border);">
                {{ __('إلغاء طلب الحذف') }}
            </button>
        @elseif(! $confirmingDeletion)
            <p class="text-[11px] leading-relaxed" style="color: var(--portal-muted);">
                {{ __('يُحذف حسابك وبياناتك الشخصية نهائياً. تبقى الفواتير والمدفوعات في سجلات الأكاديمية المحاسبية دون اسمك — فهي دفاتر الأكاديمية وليست بياناتك وحدك.') }}
            </p>
            @if(count($blockers) > 0)
                <div class="mt-3 rounded-xl px-3 py-2.5 text-xs"
                     style="background: color-mix(in oklab, var(--brand-warning) 12%, var(--portal-surface)); color: var(--portal-warning-ink);">
                    <p class="font-bold">{{ __('لا يمكن الحذف حالياً:') }}</p>
                    @foreach($blockers as $blocker)
                        <p class="mt-1">• {{ $blocker }}</p>
                    @endforeach
                </div>
            @endif
            <button type="button" wire:click="$set('confirmingDeletion', true)"
                    class="mt-3 w-full rounded-xl border px-4 py-2.5 text-sm font-bold"
                    style="border-color: color-mix(in oklab, var(--brand-danger) 40%, var(--portal-border)); color: var(--portal-danger-ink);">
                {{ __('طلب حذف الحساب') }}
            </button>
        @else
            <div class="space-y-3">
                <div>
                    <label for="delreason" class="block text-xs font-semibold">
                        {{ __('السبب') }} <span class="font-normal" style="color: var(--portal-muted);">— {{ __('اختياري') }}</span>
                    </label>
                    <textarea id="delreason" rows="2" wire:model="deletionReason"
                              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);"></textarea>
                </div>
                <div>
                    <label for="delpass" class="block text-xs font-semibold">{{ __('أكِّد كلمة المرور') }}</label>
                    <input id="delpass" type="password" wire:model="deletionPassword" autocomplete="current-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);">
                    @error('deletionPassword') <p role="alert" class="mt-1 text-[11px]" style="color: var(--portal-danger-ink);">{{ $message }}</p> @enderror
                </div>
                <div class="flex gap-2">
                    <button type="button" wire:click="requestDeletion"
                            class="flex-1 rounded-xl px-4 py-2.5 text-sm font-bold"
                            style="background: var(--brand-danger); color: var(--brand-danger-fg);">
                        {{ __('تأكيد الطلب') }}
                    </button>
                    <button type="button" wire:click="$set('confirmingDeletion', false)"
                            class="rounded-xl px-4 py-2.5 text-sm font-medium" style="color: var(--portal-muted);">
                        {{ __('إلغاء') }}
                    </button>
                </div>
            </div>
        @endif
    </x-portal.card>
</div>
