<div class="space-y-4">
    <form wire:submit="submit" class="portal-card space-y-4 px-4 py-4">
        <div>
            <label for="type" class="block text-xs font-semibold">{{ __('نوع الطلب') }}</label>
            <select id="type" wire:model.live="type"
                    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="excuse">{{ __('عذر عن حصة') }}</option>
                <option value="freeze">{{ __('تجميد الاشتراك') }}</option>
                <option value="unfreeze">{{ __('إعادة تفعيل الاشتراك') }}</option>
                <option value="transfer">{{ __('نقل إلى فرع آخر') }}</option>
                <option value="renewal">{{ __('تجديد الاشتراك') }}</option>
                <option value="cancellation">{{ __('إلغاء الاشتراك') }}</option>
                <option value="other">{{ __('طلب آخر') }}</option>
            </select>
        </div>

        @if($type === 'excuse')
            <div>
                <label for="session" class="block text-xs font-semibold">{{ __('الحصة') }}</label>
                <select id="session" wire:model="sessionId"
                        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($sessions as $session)
                        <option value="{{ $session->id }}">
                            {{ $session->session_date?->translatedFormat('j M') }} —
                            {{ $session->group?->name_ar ?? __('حصة') }}
                            ({{ \Carbon\Carbon::parse($session->start_time)->format('H:i') }})
                        </option>
                    @endforeach
                </select>
                @error('sessionId') <p role="alert" class="mt-1 text-[11px]" style="color: var(--brand-danger);">{{ $message }}</p> @enderror
                <p class="mt-1 text-[11px]" style="color: var(--portal-muted);">
                    {{ __('تُقبل الأعذار حتى ٧ أيام بعد الحصة.') }}
                </p>
            </div>
        @endif

        @if($type === 'transfer')
            <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

        <div>
            <label for="reason" class="block text-xs font-semibold">{{ __('السبب') }}</label>
            <textarea id="reason" rows="3" wire:model="reason"
                      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>
            @error('reason') <p role="alert" class="mt-1 text-[11px]" style="color: var(--brand-danger);">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="attachment" class="block text-xs font-semibold">
                {{ __('مرفق') }} <span class="font-normal" style="color: var(--portal-muted);">— {{ __('اختياري') }}</span>
            </label>
            <input id="attachment" type="file" wire:model="attachment" accept="image/*,application/pdf"
                   class="mt-1 block w-full text-xs">
            <p class="mt-1 text-[11px]" style="color: var(--portal-muted);">
                {{ __('مثال: تقرير طبي. يُحفظ بشكل خاص ولا يظهر إلا للإدارة.') }}
            </p>
            <div wire:loading wire:target="attachment" class="mt-1 text-[11px]" style="color: var(--portal-muted);">
                {{ __('جارٍ الرفع...') }}
            </div>
            @error('attachment') <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="submit,attachment"
                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="submit">{{ __('إرسال الطلب') }}</span>
            <span wire:loading wire:target="submit">{{ __('جارٍ الإرسال...') }}</span>
        </button>
    </form>

    @if($open > 0)
        <x-portal.card>
            <p class="text-xs" style="color: var(--portal-muted);">
                {{ __('لديك') }} {{ $open }} {{ __('طلب قيد المراجعة.') }}
                <a href="{{ route('portal.account', ['tab' => 'requests']) }}" wire:navigate
                   class="font-semibold" style="color: var(--brand-600);">{{ __('عرض طلباتي') }}</a>
            </p>
        </x-portal.card>
    @endif
</div>
