<div class="space-y-4">
    <form wire:submit="upload" class="portal-card space-y-4 px-4 py-4">
        <div>
            <h2 class="text-sm font-bold">{{ __('رفع مستند') }}</h2>
            @if($activeName)
                <p class="mt-0.5 text-[11px]" style="color: var(--portal-muted);">{{ __('لـ') }} {{ $activeName }}</p>
            @endif
        </div>

        <div>
            <label for="doctype" class="block text-xs font-semibold">{{ __('نوع المستند') }}</label>
            <select id="doctype" wire:model="documentType"
                    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);">
                @foreach($types as $t)
                    <option value="{{ $t->value }}">{{ $t->label() }}</option>
                @endforeach
            </select>
        </div>

        <div>
            <label for="expires" class="block text-xs font-semibold">
                {{ __('تاريخ الانتهاء') }}
                <span class="font-normal" style="color: var(--portal-muted);">— {{ __('للشهادة الطبية') }}</span>
            </label>
            <input id="expires" type="date" dir="ltr" wire:model="expiresAt"
                   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('expiresAt') <p role="alert" class="mt-1 text-[11px]" style="color: var(--brand-danger);">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="docfile" class="block text-xs font-semibold">{{ __('الملف') }}</label>
            <input id="docfile" type="file" wire:model="file" accept="image/*,application/pdf"
                   class="mt-1 block w-full text-xs">
            <div wire:loading wire:target="file" class="mt-1 text-[11px]" style="color: var(--portal-muted);">
                {{ __('جارٍ الرفع...') }}
            </div>
            @error('file') <p role="alert" class="mt-1 text-[11px]" style="color: var(--brand-danger);">{{ $message }}</p> @enderror
        </div>

        <button type="submit" wire:loading.attr="disabled" wire:target="upload,file"
                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 wire:target="upload">{{ __('رفع المستند') }}</span>
            <span wire:loading wire:target="upload">{{ __('جارٍ الرفع...') }}</span>
        </button>
    </form>

    @forelse($documents as $document)
        @php
            $expired = $document->expires_at?->isPast();
            $soon = ! $expired && $document->expires_at && $document->expires_at->lte(now()->addDays(30));
            $tone = $expired ? 'var(--brand-danger)' : ($soon ? 'var(--brand-warning)' : 'var(--brand-success)');
        @endphp
        <article class="portal-card px-4 py-3">
            <div class="flex items-start justify-between gap-2">
                <div class="min-w-0">
                    <p class="truncate text-sm font-bold">{{ $document->document_type->label() }}</p>
                    <p class="truncate text-[11px]" style="color: var(--portal-muted);">
                        {{ $document->documentable?->person?->name_ar }}
                    </p>
                </div>
                <span class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-bold"
                      style="background: color-mix(in oklab, {{ $tone }} 14%, var(--portal-surface)); color: {{ $tone }};">
                    {{ $document->status->label() }}
                </span>
            </div>
            @if($document->expires_at)
                <p class="num mt-1 text-[11px]" style="color: {{ $tone }};">
                    {{ $expired ? __('انتهت في') : __('تنتهي في') }} {{ $document->expires_at->translatedFormat('j M Y') }}
                </p>
            @endif
            @if($document->rejection_reason)
                <p class="mt-2 rounded-lg px-2 py-1 text-[11px]"
                   style="background: color-mix(in oklab, var(--brand-danger) 10%, var(--portal-surface)); color: var(--brand-danger);">
                    {{ $document->rejection_reason }}
                </p>
            @endif
        </article>
    @empty
        <x-portal.card>
            <x-portal.empty :title="__('لا توجد مستندات بعد')"
                            :body="__('ارفع الشهادة الطبية وشهادة الميلاد ليكتمل ملف العضو')" />
        </x-portal.card>
    @endforelse
</div>
