{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: form.blade.php
------------------------------------------------------
Use: The user credit-request wizard, ported one-to-one
     from the approved design: collateral -> documents ->
     amount + plan (slider, month chips, per-plan
     monthly) -> confirm with the fee card and the terms
     gate. Client-side eligibility mirrors the server.
=====================================================
--}}

@extends('layouts.user')

@section('title', __('front.credit.title'))

@section('breadcrumb')
    <x-ui.breadcrumb :items="[
        ['label' => __('admin.breadcrumb.home'), 'url' => route('account.credit.form')],
        ['label' => __('front.credit.breadcrumb')],
    ]" />
@endsection

@section('page')
    <div class="mb-6 flex flex-wrap items-end justify-between gap-4">
        <div>
            <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ __('front.credit.title') }}</h1>
            <p class="text-sm text-ink-muted">{{ __('front.credit.subtitle') }}</p>
        </div>
        <div class="inline-flex gap-1 rounded-xl bg-[#eeedf3] p-1">
            <span class="rounded-lg bg-white px-4 py-2 text-[13px] font-bold text-primary-600 shadow-sm">{{ __('front.credit.tab_new') }}</span>
            <a href="{{ route('account.credit.history') }}" class="rounded-lg px-4 py-2 text-[13px] font-bold text-ink-muted transition hover:text-primary-600">{{ __('front.credit.tab_history') }}</a>
        </div>
    </div>

    @if ($blocked)
        {{-- Clean white card so it never clashes with the panel background. --}}
        <div class="mx-auto max-w-2xl rounded-2xl border border-line bg-white p-8 text-center shadow-sm">
            <div class="mx-auto mb-4 flex size-16 items-center justify-center rounded-2xl bg-amber-50 text-amber-500">
                <svg class="size-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v5"/><circle cx="12" cy="16" r="0.4"/></svg>
            </div>
            <h2 class="mb-2 text-lg font-bold">{{ __('front.credit.blocked_title') }}</h2>
            <p class="mx-auto max-w-md text-sm leading-7 text-ink-muted">{{ __('front.credit.blocked_body') }}</p>
            <a href="{{ route('account.installments') }}" class="mt-5 inline-flex rounded-xl bg-primary-600 px-6 py-2.5 text-sm font-bold text-white transition hover:bg-primary-700">
                {{ __('front.credit.blocked_cta') }}
            </a>
        </div>
    @elseif (! empty($standingBlocked))
        {{-- Good-standing gate: the user has not yet earned the level the site
             requires to open a request. Show where they stand and how to grow. --}}
        <div class="mx-auto max-w-2xl rounded-2xl border border-line bg-white p-8 shadow-sm">
            <div class="mb-5 text-center">
                <div class="mx-auto mb-4 flex size-16 items-center justify-center rounded-2xl bg-amber-50 text-amber-500">
                    <svg class="size-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
                </div>
                <h2 class="mb-2 text-lg font-bold">{{ __('front.credit.standing_gate_title') }}</h2>
                <p class="mx-auto max-w-md text-sm leading-7 text-ink-muted">
                    {{ __('front.credit.standing_gate_body', [
                        'required' => \App\Support\GoodStanding::label($requiredLevel),
                        'current' => \App\Support\GoodStanding::label($standing['level']),
                    ]) }}
                </p>
            </div>

            <div class="rounded-2xl border border-line bg-[#faf9fd] p-5">
                <x-standing.bar :score="$standing['score']" :level="$standing['level']" />
            </div>

            <div class="mt-5 flex flex-wrap items-center justify-center gap-3">
                <x-standing.explainer :breakdown="$standing" />
                <a href="{{ route('account.installments') }}" class="inline-flex rounded-xl bg-[#f2f0fa] px-6 py-2.5 text-sm font-bold text-primary-600 transition hover:bg-[#e8e3f8]">
                    {{ __('front.standing.view_installments') }}
                </a>
            </div>
        </div>
    @else
        @php
            $collateralIcons = [
                'cheque' => '<rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 12h6M16 12h2"/>',
                'gold' => '<path d="M6 3h12l3 5-9 13L3 8z"/><path d="M3 8h18M9 3l-2 5 5 13 5-13-2-5"/>',
                'salary' => '<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>',
                'promissory' => '<path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5M9 13h6M9 17h4"/>',
            ];
        @endphp

        <div x-data="creditRequestWizard({
            plans: @js($plans->map(fn ($p) => [
                'id' => $p->id,
                'name' => $p->name,
                'months' => $p->months,
                'feePercent' => \App\Support\Format::percentFromBp($p->fee_percent),
                'feeBp' => $p->fee_percent,
                'penalty' => \App\Support\Format::percentFromBp($p->penalty_percent),
                'graceDays' => $p->grace_days,
                'min' => $p->min_amount,
                'max' => $p->max_amount,
                'collaterals' => $p->collaterals,
                'selectable' => $p->isSelectable(),
                'statusLabel' => __('admin.plans.statuses.'.$p->status),
                'standingLocked' => ! $p->availableForStanding($userLevel),
                'minStandingLabel' => \App\Support\GoodStanding::label($p->min_standing_level),
                'minStandingPercent' => \App\Support\GoodStanding::percent(\App\Support\GoodStanding::threshold((int) $p->min_standing_level)),
            ])->values()),
            collateralConfigs: @js($collateralConfigs),
            strings: @js([
                'all' => __('front.credit.js_all'),
                'million' => __('front.credit.js_million'),
                'monthsWord' => __('front.credit.js_months_word'),
                'daysWord' => __('front.credit.js_days_word'),
                'megabyte' => __('front.credit.js_megabyte'),
                'monthlyInstalments' => __('front.credit.js_monthly_instalments'),
                'feePrefix' => __('front.credit.js_fee_prefix'),
                'graceLabel' => __('front.credit.js_grace_label'),
                'noGrace' => __('front.credit.js_no_grace'),
                'noFee' => __('front.credit.plan_no_fee'),
                'noPlanForAmount' => __('front.credit.plan_none_amount'),
                'noPlanForAmountMonths' => __('front.credit.plan_none_amount_months'),
                'incomplete' => __('front.credit.incomplete'),
                'confirmSubmit' => __('front.credit.confirm_submit'),
                'badType' => __('front.verification.file_bad_type'),
                'tooBig' => __('front.credit.upload_hint'),
                'uploadFailed' => __('front.verification.upload_failed'),
            ]),
            userLevel: {{ (int) $userLevel }},
        })">
            {{-- Stepper --}}
            <div class="mb-7 flex flex-wrap items-center justify-center gap-0">
                @foreach (['collateral', 'documents', 'plan', 'confirm'] as $i => $stepKey)
                    <div class="flex flex-col items-center gap-1.5">
                        <span class="flex size-[34px] items-center justify-center rounded-full text-sm font-bold transition"
                              x-bind:class="step >= {{ $i + 1 }} ? 'bg-primary-600 text-white' : 'bg-[#eeedf3] text-[#9491a6]'">@fa($i + 1)</span>
                        <span class="text-[11.5px] font-bold transition max-[520px]:hidden" x-bind:class="step >= {{ $i + 1 }} ? 'text-primary-600' : 'text-[#b4b1c4]'">
                            {{ __("front.credit.step_{$stepKey}") }}
                        </span>
                    </div>
                    @if ($i < 3)
                        <div class="mx-1 mb-5 h-0.5 w-[46px] transition" x-bind:class="step > {{ $i + 1 }} ? 'bg-primary-600' : 'bg-[#e6e4ee]'"></div>
                    @endif
                @endforeach
            </div>

            <form method="POST" action="{{ route('account.credit.store') }}" enctype="multipart/form-data" x-ref="form"
                  class="mx-auto max-w-[860px] rounded-[18px] border border-line bg-white p-7">
                @csrf
                <input type="hidden" name="collateral_type" x-bind:value="collateral">
                <input type="hidden" name="plan_id" x-bind:value="planId">
                <input type="hidden" name="amount" x-bind:value="amount">

                {{-- ===== STEP 1: collateral ===== --}}
                <div x-show="step === 1">
                    <div class="mb-1 text-[17px] font-bold">{{ __('front.credit.collateral_title') }}</div>
                    <p class="mb-5 text-[13.5px] text-ink-faint">{{ __('front.credit.collateral_hint') }}</p>
                    <div class="grid gap-3.5 sm:grid-cols-2">
                        @foreach (\App\Models\Plan::COLLATERALS as $type)
                            @php
                                $cfg = $collateralConfigs[$type];
                                $max = $cfg['max'];
                                $maxLabel = $cfg['available']
                                    ? __('front.credit.collateral_up_to', ['amount' =>
                                        ($max >= 1000000 && $max % 1000000 === 0
                                            ? \App\Support\Format::persianDigits((string) intdiv($max, 1000000)).' '.__('front.credit.js_million')
                                            : \App\Support\Format::persianDigits(\App\Support\Format::tomanFa($max))
                                        ).' '.__('front.credit.toman')])
                                    : __('front.credit.collateral_unavailable');
                            @endphp
                            <button type="button"
                                    @disabled(! $cfg['available'])
                                    class="flex items-center gap-3 rounded-[14px] border-[1.5px] p-4 text-right transition disabled:opacity-55"
                                    x-bind:class="collateral === @js($type) ? 'border-primary-600 bg-[#f4f1fc]' : 'border-[#e3e1ec] bg-[#fbfbfd] hover:border-primary-600/40'"
                                    x-on:click="pickCollateral(@js($type))">
                                <span class="flex size-[46px] shrink-0 items-center justify-center rounded-[13px] bg-[#efeafb] text-primary-600">
                                    <svg class="size-[23px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">{!! $collateralIcons[$type] !!}</svg>
                                </span>
                                <span>
                                    <span class="block text-[14.5px] font-bold">{{ __("front.credit.collaterals.{$type}") }}</span>
                                    <span class="block text-[12px] text-ink-faint">{{ $maxLabel }}</span>
                                </span>
                            </button>
                        @endforeach
                    </div>
                </div>

                {{-- ===== STEP 2: documents (+ organization if salary) ===== --}}
                <div x-show="step === 2" x-cloak>
                    <div class="mb-1 text-[17px] font-bold">{{ __('front.credit.documents_title') }}</div>
                    <p class="mb-5 text-[13.5px] text-ink-faint">{{ __('front.credit.documents_hint') }}</p>

                    <div x-show="isSalary" class="mb-[18px]">
                        <label class="mb-[7px] block text-[13px] font-bold">{{ __('front.credit.organization_label') }}</label>
                        <div class="relative">
                            <select name="organization_id" x-model="organizationId"
                                    class="w-full appearance-none rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-sm outline-none transition focus:border-primary-600 focus:bg-white">
                                <option value="">{{ __('front.credit.organization_placeholder') }}</option>
                                @foreach ($organizations as $organization)
                                    <option value="{{ $organization->id }}">{{ $organization->name }}</option>
                                @endforeach
                            </select>
                            <svg class="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-ink-faint" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                        </div>
                        <p class="mt-1.5 text-xs text-ink-faint">{{ __('front.credit.organization_hint') }}</p>
                    </div>

                    <input type="file" name="documents[]" x-ref="docs" accept="image/jpeg,image/png" multiple class="hidden" x-on:change="onDocs($event)">
                    <button type="button" x-on:click="$refs.docs.click()"
                            class="w-full rounded-2xl border-[1.5px] border-dashed border-[#cfc9e6] bg-[#faf9fd] p-9 text-center transition hover:border-primary-600 hover:bg-[#f4f1fc]">
                        <span class="mx-auto mb-3.5 flex size-[58px] items-center justify-center rounded-2xl bg-[#efeafb] text-primary-600">
                            <svg class="size-[27px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16V4M8 8l4-4 4 4"/><path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"/></svg>
                        </span>
                        <span class="block text-[14.5px] font-bold">{{ __('front.credit.upload_cta') }}</span>
                        <span class="mt-1 block text-[12.5px] text-ink-faint">{{ __('front.credit.upload_hint') }}</span>
                    </button>

                    <template x-for="(name, i) in docNames" :key="i">
                        <div class="mt-3.5 flex items-center gap-3 rounded-xl border border-line bg-[#faf9fd] px-4 py-3">
                            <span class="flex size-[38px] shrink-0 items-center justify-center rounded-[10px] bg-[#e7f7ee] text-green-600">
                                <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                            </span>
                            <div class="min-w-0 flex-1">
                                <div class="truncate text-[13.5px] font-bold" x-text="name"></div>
                                <div class="text-[11.5px] text-ink-faint"><span x-text="docSizes[i]"></span> — {{ __('front.credit.uploaded') }}</div>
                            </div>
                            <button type="button" class="text-secondary-500 transition hover:text-secondary-600" x-on:click="removeDocs()" aria-label="{{ __('front.credit.chosen') }}">
                                <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M9 7V5h6v2M6 7l1 13h10l1-13"/></svg>
                            </button>
                        </div>
                    </template>
                </div>

                {{-- ===== STEP 3: amount + plan ===== --}}
                <div x-show="step === 3" x-cloak>
                    <div class="mb-1 text-[17px] font-bold">{{ __('front.credit.plan_title') }}</div>
                    <p class="mb-5 text-[13.5px] text-ink-faint">{{ __('front.credit.plan_hint') }}</p>

                    {{-- filters: amount slider + month chips --}}
                    <div class="mb-5 rounded-[16px] border border-line bg-[#faf9fd] p-5">
                        <div class="grid items-center gap-6 md:grid-cols-[1.4fr_1fr]">
                            <div>
                                <div class="mb-3 flex items-center justify-between">
                                    <label class="text-[13px] font-bold">{{ __('front.credit.amount_label') }}</label>
                                    <span class="text-[15px] font-bold text-primary-600">
                                        <span x-text="grp(amount)"></span> <span class="text-[11px] text-ink-faint">{{ __('front.credit.toman') }}</span>
                                    </span>
                                </div>
                                <input type="range" class="range-brand" step="5000000"
                                       x-bind:min="sliderMin" x-bind:max="sliderMax" x-bind:value="amount" x-on:input="onAmount($event)">
                                <div class="mt-2 flex items-center justify-between text-[11.5px] text-ink-faint">
                                    <span x-text="money(sliderMin)"></span>
                                    <span x-text="money(sliderMax)"></span>
                                </div>
                            </div>
                            <div>
                                <label class="mb-3 block text-[13px] font-bold">{{ __('front.credit.months_label') }}</label>
                                <div class="flex flex-wrap gap-2">
                                    <template x-for="chip in monthChips" :key="chip.value">
                                        <button type="button" x-text="chip.label"
                                                class="rounded-[10px] px-3.5 py-2 text-[12.5px] font-bold transition"
                                                x-bind:class="monthFilter === chip.value ? 'bg-primary-600 text-white shadow-md shadow-primary-600/25' : 'bg-white text-ink-soft shadow-sm'"
                                                x-on:click="monthFilter = chip.value"></button>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- plan list --}}
                    <div class="flex flex-col gap-3">
                        <template x-for="p in visiblePlans" :key="p.id">
                            <button type="button"
                                    x-bind:disabled="! p.selectable && ! p.standingLocked"
                                    class="flex items-center justify-between gap-4 rounded-[13px] border-[1.5px] px-[18px] py-3.5 text-right transition"
                                    x-bind:class="[
                                        planId === p.id ? 'border-primary-600 bg-[#f4f1fc]' : 'border-[#e3e1ec] bg-[#fbfbfd]',
                                        (p.selectable && ! p.standingLocked) ? 'hover:border-primary-600/40' : 'opacity-60',
                                    ]"
                                    x-on:click="pickPlan(p)">
                                <span class="flex items-center gap-3.5">
                                    <span class="inline-block size-5 shrink-0 rounded-full bg-white transition"
                                          x-bind:class="planId === p.id ? 'border-[6px] border-primary-600' : 'border-2 border-[#cfc9e6]'"></span>
                                    <span>
                                        <span class="block text-[15px] font-bold" x-text="p.title"></span>
                                        <span class="mt-0.5 block text-[12px] text-ink-faint" x-text="p.meta"></span>
                                    </span>
                                </span>
                                <span class="text-left">
                                    <template x-if="p.standingLocked">
                                        <span class="inline-flex items-center gap-1.5 rounded-[10px] bg-[#fff5e6] px-2.5 py-1 text-[11px] font-bold text-amber-600">
                                            <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
                                            <span x-text="p.minStandingLabel"></span>
                                        </span>
                                    </template>
                                    <template x-if="! p.standingLocked && p.selectable">
                                        <span class="block">
                                            <span class="block text-[15px] font-bold" x-text="p.monthlyFa"></span>
                                            <span class="block text-[11.5px] text-ink-faint">{{ __('front.credit.per_month') }}</span>
                                        </span>
                                    </template>
                                    <template x-if="! p.standingLocked && ! p.selectable">
                                        <span class="rounded-[10px] bg-[#f1f0f5] px-2.5 py-1 text-[11px] font-bold text-ink-muted" x-text="p.statusLabel"></span>
                                    </template>
                                </span>
                            </button>
                        </template>
                        <p x-show="visiblePlans.length === 0" x-text="noPlanMessage" class="rounded-xl border border-dashed border-[#d9d6e6] px-4 py-6 text-center text-sm text-ink-muted"></p>
                    </div>

                    {{-- Reminds the user the list is scoped to the collateral they
                         picked, and how to widen it (go back and change it). --}}
                    <div class="mt-4 flex items-start gap-2.5 rounded-xl border border-primary-100 bg-primary-50 px-3.5 py-2.5">
                        <svg class="mt-0.5 size-4 shrink-0 text-primary-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                        <p class="text-[11.5px] leading-6 text-primary-900">{{ __('front.credit.plan_collateral_note') }}</p>
                    </div>
                </div>

                {{-- ===== STEP 4: confirm + fee + terms ===== --}}
                <div x-show="step === 4" x-cloak>
                    <div class="mb-1 text-[17px] font-bold">{{ __('front.credit.confirm_title') }}</div>
                    <p class="mb-5 text-[13.5px] text-ink-faint">{{ __('front.credit.confirm_hint') }}</p>

                    <div class="mb-[18px] grid gap-3.5 md:grid-cols-2">
                        {{-- request details --}}
                        <div class="flex flex-col gap-3 rounded-[14px] border border-line bg-[#faf9fd] p-[18px]">
                            <div class="flex items-center justify-between">
                                <span class="text-[13px] text-ink-faint">{{ __('front.credit.summary_collateral') }}</span>
                                <span class="text-[13.5px] font-bold" x-text="colCfg.label"></span>
                            </div>
                            <div class="flex items-center justify-between border-t border-[#f0eff5] pt-3">
                                <span class="text-[13px] text-ink-faint">{{ __('front.credit.summary_amount') }}</span>
                                <span class="text-[13.5px] font-bold"><span x-text="grp(amount)"></span> {{ __('front.credit.toman') }}</span>
                            </div>
                            <div class="flex items-center justify-between border-t border-[#f0eff5] pt-3">
                                <span class="text-[13px] text-ink-faint">{{ __('front.credit.summary_plan') }}</span>
                                <span class="text-[13.5px] font-bold"><span x-text="selectedPlan ? faDigits(selectedPlan.months) : ''"></span> {{ __('front.credit.js_monthly_instalments') }}</span>
                            </div>
                            <div class="flex items-center justify-between border-t border-[#f0eff5] pt-3">
                                <span class="text-[13px] text-ink-faint">{{ __('front.credit.summary_grace') }}</span>
                                <span class="text-[13.5px] font-bold">
                                    <template x-if="selectedPlan && selectedPlan.graceDays > 0"><span><span x-text="faDigits(selectedPlan.graceDays)"></span> {{ __('front.credit.js_days_word') }}</span></template>
                                    <template x-if="selectedPlan && selectedPlan.graceDays === 0"><span>{{ __('front.credit.grace_none') }}</span></template>
                                </span>
                            </div>
                            <div class="flex items-center justify-between border-t border-[#f0eff5] pt-3">
                                <span class="text-[13px] text-ink-faint">{{ __('front.credit.summary_penalty') }}</span>
                                <span class="text-[13.5px] font-bold text-secondary-500"><span x-text="selectedPlan ? faDigits(selectedPlan.penalty) : ''"></span>{{ __('front.credit.js_percent_monthly') }}</span>
                            </div>
                        </div>

                        {{-- fee card --}}
                        <div class="flex flex-col gap-3 rounded-[14px] bg-gradient-to-bl from-[#5e42be] to-[#3f2a8f] p-[18px] text-white">
                            <div class="flex items-center justify-between">
                                <span class="text-[13px] opacity-85">{{ __('front.credit.summary_monthly') }}</span>
                                <span class="text-[13.5px] font-bold"><span x-text="grp(monthly)"></span> {{ __('front.credit.toman') }}</span>
                            </div>
                            <div class="flex items-center justify-between border-t border-white/15 pt-3">
                                <span class="text-[13px] opacity-85">{{ __('front.credit.summary_fee_percent') }}</span>
                                <span class="text-[13.5px] font-bold"><span x-text="selectedPlan ? faDigits(selectedPlan.feePercent) : ''"></span>{{ __('front.credit.js_percent') }}</span>
                            </div>
                            <div class="flex items-center justify-between border-t border-white/15 pt-3">
                                <span class="text-sm font-bold">{{ __('front.credit.fee_payable') }}</span>
                                <span class="text-[17px] font-bold"><span x-text="grp(feeAmount)"></span> {{ __('front.credit.toman') }}</span>
                            </div>
                            <p class="text-[11px] leading-7 opacity-75">{{ __('front.credit.fee_card_note') }}</p>
                        </div>
                    </div>

                    {{-- terms gate --}}
                    <label class="flex cursor-pointer items-start gap-2.5 text-[13.5px] leading-7 text-ink-soft" x-on:click.prevent="onTermsClick()">
                        <span class="mt-px flex size-5 shrink-0 items-center justify-center rounded-md transition"
                              x-bind:class="terms ? 'bg-primary-600 border-[1.5px] border-primary-600' : 'bg-white border-[1.5px] border-[#d3d1de]'">
                            <svg x-show="terms" class="size-3" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                        </span>
                        <span>{{ __('front.credit.terms_agree_prefix') }} <span class="font-bold text-primary-600">{{ __('front.credit.terms_agree_link') }}</span> {{ __('front.credit.terms_agree_suffix') }}</span>
                    </label>
                </div>

                {{-- Collateral upload progress: the documents can be up to 10MB
                     each, so the percentage climbs while they upload. --}}
                <div x-cloak x-show="busy" class="mt-6">
                    <div class="mb-2 flex items-center justify-between text-[12.5px] font-bold">
                        <span class="text-ink-soft">{{ __('front.credit.uploading') }}</span>
                        <span class="text-primary-600" dir="ltr"><span x-text="faDigits(String(progress))"></span>٪</span>
                    </div>
                    <div class="h-2.5 overflow-hidden rounded-full bg-[#eceaf4]">
                        <div class="h-full rounded-full bg-primary-600 transition-[width] duration-200" x-bind:style="`width: ${progress}%`"></div>
                    </div>
                </div>

                {{-- Nav --}}
                <div class="mt-[26px] flex items-center justify-between gap-3 border-t border-[#f0eff5] pt-[22px]">
                    <button type="button" x-bind:disabled="step === 1" x-on:click="back()"
                            class="rounded-xl px-6 py-3 text-sm font-bold transition"
                            x-bind:class="step === 1 ? 'bg-[#f7f6fa] text-[#c8c5d6]' : 'bg-[#f2f0fa] text-ink-soft hover:bg-[#e8e3f8]'">
                        {{ __('front.credit.back') }}
                    </button>
                    <button type="button" x-show="step < 4" x-on:click="next()"
                            class="rounded-xl bg-primary-600 px-7 py-3 text-sm font-bold text-white shadow-lg shadow-primary-600/25 transition hover:bg-primary-700">
                        {{ __('front.credit.next') }}
                    </button>
                    <button type="button" x-show="step === 4" x-on:click="submit()" x-bind:disabled="busy"
                            class="inline-flex items-center gap-2 rounded-xl bg-primary-600 px-7 py-3 text-sm font-bold text-white shadow-lg shadow-primary-600/25 transition hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-70">
                        <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" aria-hidden="true"></span>
                        <span x-text="busy ? @js(__('front.credit.submitting')) : @js(__('front.credit.submit'))"></span>
                    </button>
                </div>
            </form>

            {{-- ===== TERMS MODAL ===== --}}
            <template x-teleport="body">
                <div x-show="termsOpen" x-cloak x-transition.opacity
                     class="fixed inset-0 z-modal flex items-center justify-center bg-ink/45 p-5"
                     x-on:click.self="closeTerms()" x-on:keydown.escape.window="closeTerms()">
                    <div class="flex max-h-[82vh] w-full max-w-[520px] flex-col overflow-hidden rounded-[22px] bg-white shadow-2xl" x-show="termsOpen" x-transition.scale.origin.center>
                        <div class="flex items-center gap-3 border-b border-line px-7 pb-4 pt-6">
                            <span class="flex size-11 shrink-0 items-center justify-center rounded-[13px] bg-[#efeafb] text-primary-600">
                                <svg class="size-[22px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5M8 13h8M8 17h5"/></svg>
                            </span>
                            <div>
                                <h3 class="text-[18px] font-bold">{{ __('front.credit.terms_title') }}</h3>
                                <p class="mt-0.5 text-[12.5px] text-ink-faint">{{ __('front.credit.terms_subtitle') }}</p>
                            </div>
                        </div>
                        <div class="space-y-3.5 overflow-y-auto px-7 py-5 text-[13.5px] leading-8 text-ink-soft [&_b]:text-ink">
                            {!! __('front.credit.terms_body') !!}
                        </div>
                        <div class="border-t border-line px-7 pb-6 pt-4">
                            <button type="button" x-on:click="acceptTerms()" x-bind:disabled="termsCountdown > 0"
                                    class="w-full rounded-[13px] py-3.5 text-[15px] font-bold transition"
                                    x-bind:class="termsCountdown > 0 ? 'bg-[#eeedf3] text-[#b4b1c4]' : 'bg-primary-600 text-white shadow-lg shadow-primary-600/25'">
                                <span x-show="termsCountdown > 0">{{ __('front.credit.terms_read') }} (<span x-text="faDigits(termsCountdown)"></span>)</span>
                                <span x-show="termsCountdown === 0">{{ __('front.credit.terms_read') }}</span>
                            </button>
                        </div>
                    </div>
                </div>
            </template>

            {{-- ===== STANDING LOCK MODAL ===== --}}
            <template x-teleport="body">
                <div x-show="standingModalOpen" x-cloak x-transition.opacity
                     class="fixed inset-0 z-modal flex items-center justify-center bg-ink/45 p-5"
                     x-on:click.self="standingModalOpen = false" x-on:keydown.escape.window="standingModalOpen = false">
                    <div class="w-full max-w-[460px] overflow-hidden rounded-[22px] bg-white shadow-2xl" x-show="standingModalOpen" x-transition.scale.origin.center>
                        <div class="flex items-center gap-3 border-b border-line px-6 pb-4 pt-5">
                            <span class="flex size-11 shrink-0 items-center justify-center rounded-[13px] bg-[#fff5e6] text-amber-500">
                                <svg class="size-[22px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
                            </span>
                            <h3 class="text-[17px] font-bold">{{ __('front.credit.standing_locked_title') }}</h3>
                        </div>
                        <div class="px-6 py-5">
                            <p class="mb-4 text-[13.5px] leading-7 text-ink-soft">
                                {{ __('front.credit.standing_locked_body_prefix') }}
                                «<span class="font-bold text-amber-600" x-text="standingLockedLabel"></span>»
                                {{ __('front.credit.standing_locked_body_suffix') }}
                            </p>
                            <div class="rounded-2xl border border-line bg-[#faf9fd] p-4">
                                <x-standing.bar :score="$standing['score']" :level="$standing['level']" required-percent-var="standingRequiredPercent" />

                                {{-- Legend: the two markers on the meter. --}}
                                <div class="mt-3 flex flex-wrap items-center justify-center gap-x-4 gap-y-1.5 text-[11px] text-ink-muted">
                                    <span class="inline-flex items-center gap-1.5">
                                        <span class="size-3 rounded-full border-2 border-white shadow" style="background: {{ \App\Support\GoodStanding::color($standing['level']) }}"></span>
                                        {{ __('front.credit.standing_marker_you') }}
                                    </span>
                                    <span class="inline-flex items-center gap-1.5">
                                        <svg class="size-3 text-ink" viewBox="0 0 12 12" fill="currentColor"><path d="M6 11 1 3.5h10z"/></svg>
                                        {{ __('front.credit.standing_marker_required') }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="flex gap-2.5 border-t border-line px-6 py-4">
                            <button type="button" x-on:click="standingModalOpen = false" class="flex-1 rounded-xl bg-[#f2f0fa] py-3 text-sm font-bold text-ink-soft transition hover:bg-[#e8e3f8]">
                                {{ __('front.actions.understood') }}
                            </button>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    @endif
@endsection