{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: pay.blade.php
------------------------------------------------------
Use: The public payment card, ported from the approved
     design: merchant + amount + 15-minute timer, then
     identify -> code -> pay from credit, wallet and
     online in any combination. One live Alpine flow
     (payFlow): every step advances over fetch, never a
     page reload; only the receipt and the online gateway
     are a real navigation.
=====================================================
--}}

@extends('layouts.gateway')

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

@section('content')
    <div class="w-full max-w-[480px]"
         x-data="payFlow(@js([
             'state' => $state,
             'routes' => [
                 'identify' => route('gateway.identify', $order->token),
                 'otp' => route('gateway.otp', $order->token),
                 'resend' => route('gateway.resend', $order->token),
                 'restart' => route('gateway.restart', $order->token),
                 'source' => route('gateway.source', $order->token),
                 'online' => route('gateway.online', $order->token),
                 'cancel' => route('gateway.cancel', $order->token),
                 'receipt' => route('gateway.receipt', $order->token),
             ],
             'strings' => [
                 'badMobile' => __('front.pay.errors.bad_mobile'),
                 'badCard' => __('front.pay.errors.bad_card'),
                 'generic' => __('front.pay.errors.generic'),
                 'resendIn' => __('front.pay.resend_in'),
                 'payRemainingFrom' => __('front.pay.pay_remaining_from', ['amount' => ':amount']),
                 'upTo' => __('front.pay.up_to', ['amount' => ':amount']),
                 'confirmCredit' => __('front.pay.confirm_credit'),
                 'confirmWallet' => __('front.pay.confirm_wallet'),
                 'confirmOnline' => __('front.pay.confirm_online'),
                 'confirmCancel' => __('front.pay.confirm_cancel'),
             ],
         ]))">

        <div class="overflow-hidden rounded-[24px] border border-[var(--pay-border)] bg-[var(--pay-card)] shadow-[var(--pay-shadow)] transition-colors duration-500">

            {{-- ===== Merchant, amount, timer ===== --}}
            <div class="border-b border-[var(--pay-border)] px-[26px] py-6">
                <div class="mb-5 flex items-center justify-between gap-3">
                    <div class="flex items-center gap-[11px]">
                        <span class="flex size-11 shrink-0 items-center justify-center rounded-xl bg-[var(--pay-chip)]">
                            <svg class="size-[22px]" viewBox="0 0 24 24" fill="none" stroke="#e80e23" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9.5 5.2 4h13.6L20 9.5"/><path d="M5.5 12v8h13v-8"/></svg>
                        </span>
                        <div class="min-w-0">
                            <div class="truncate text-[14.5px] font-bold">{{ $order->shop->name }}</div>
                            <div class="text-xs text-[var(--pay-muted)]">{{ __('front.pay.credit_purchase') }}</div>
                        </div>
                    </div>

                    <div class="inline-flex shrink-0 items-center gap-1.5 rounded-[20px] bg-[var(--pay-chip)] px-3 py-1.5 text-[12.5px] text-secondary-500">
                        <svg class="size-[15px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7.5v5l3 2"/></svg>
                        <span class="font-bold tabular-nums" x-text="timerLabel()">{{ __('front.pay.timer_start') }}</span>
                    </div>
                </div>

                <div class="text-center">
                    <div class="mb-1.5 text-[12.5px] text-[var(--pay-muted)]">{{ __('front.pay.total') }}</div>
                    <div class="text-[30px] font-bold tracking-tight">
                        @toman($order->amount)
                        <span class="text-sm font-normal text-[var(--pay-muted)]">{{ __('front.pay.toman') }}</span>
                    </div>
                    <div class="mt-1 text-[11.5px] text-[var(--pay-muted)]" dir="ltr">{{ $order->code }}</div>
                </div>

                {{-- Covered / remaining --}}
                <div class="mt-4">
                    <div class="flex h-[9px] overflow-hidden rounded-md bg-[var(--pay-track)]">
                        <div class="bg-gradient-to-l from-green-600 to-green-500 transition-[width] duration-500" x-bind:style="`width: ${paidPercent}%`"></div>
                    </div>
                    <div class="mt-2 flex items-center justify-between text-xs">
                        <span class="font-bold text-green-600">{{ __('front.pay.paid') }} <span dir="ltr" x-text="coveredFa"></span></span>
                        <span class="text-[var(--pay-muted)]">{{ __('front.pay.remaining') }} <span class="font-bold text-[var(--pay-text)]" dir="ltr" x-text="remainingFa"></span></span>
                    </div>
                </div>
            </div>

            {{-- ===== Step 1: who is paying ===== --}}
            <div x-show="step === 'method'" x-cloak class="px-[26px] py-5">
                <form x-ref="methodForm" x-on:submit.prevent="identify()">
                    <div class="mb-[18px] flex gap-0.5 rounded-[13px] bg-[var(--pay-tab)] p-1">
                        <button type="button" x-on:click="method = 'mobile'"
                                class="inline-flex flex-1 items-center justify-center gap-[7px] rounded-[10px] p-[11px] text-[13.5px] font-bold transition"
                                x-bind:class="method === 'mobile' ? 'bg-[var(--pay-tab-on)] text-primary-600 shadow-sm' : 'text-[var(--pay-muted)]'">
                            <svg class="size-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="2.5" width="12" height="19" rx="2.5"/><line x1="10.5" y1="18" x2="13.5" y2="18"/></svg>
                            {{ __('front.pay.tab_mobile') }}
                        </button>
                        <button type="button" x-on:click="method = 'card'"
                                class="inline-flex flex-1 items-center justify-center gap-[7px] rounded-[10px] p-[11px] text-[13.5px] font-bold transition"
                                x-bind:class="method === 'card' ? 'bg-[var(--pay-tab-on)] text-primary-600 shadow-sm' : 'text-[var(--pay-muted)]'">
                            <svg class="size-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5.5" width="19" height="13" rx="2.5"/><line x1="2.5" y1="9.5" x2="21.5" y2="9.5"/></svg>
                            {{ __('front.pay.tab_card') }}
                        </button>
                    </div>

                    {{-- Mobile --}}
                    <div x-show="method === 'mobile'">
                        <label class="mb-[7px] block text-[13px] font-bold" for="pay-mobile">{{ __('front.pay.mobile_label') }}</label>
                        <input id="pay-mobile" type="text" inputmode="numeric" autocomplete="tel" x-on:input="onMobile($event)"
                               placeholder="{{ __('front.pay.mobile_placeholder') }}"
                               class="w-full rounded-[13px] border-[1.5px] bg-[var(--pay-input)] px-[15px] py-[13px] text-[15px] font-bold tracking-[1px] outline-none"
                               dir="ltr"
                               x-bind:class="mobile.length > 0 && ! mobileValid ? 'border-secondary-500' : 'border-[var(--pay-border)]'">
                        <p class="mt-1.5 text-xs text-[var(--pay-muted)]">{{ __('front.pay.mobile_hint') }}</p>
                    </div>

                    {{-- Credit card --}}
                    <div x-show="method === 'card'" x-cloak>
                        <label class="mb-[7px] block text-[13px] font-bold" for="pay-card">{{ __('front.pay.card_label') }}</label>
                        <input id="pay-card" type="text" inputmode="numeric" x-on:input="onCard($event)"
                               placeholder="{{ __('front.pay.card_placeholder') }}"
                               class="w-full rounded-[13px] border-[1.5px] bg-[var(--pay-input)] px-[15px] py-[13px] text-[15px] font-bold tracking-[1px] outline-none"
                               dir="ltr"
                               x-bind:class="card.length > 0 && ! cardValid ? 'border-secondary-500' : 'border-[var(--pay-border)]'">

                        <div class="mt-3 grid grid-cols-3 gap-2.5">
                            <div>
                                <label class="mb-[7px] block text-[12.5px] font-bold" for="pay-month">{{ __('front.pay.month') }}</label>
                                <select id="pay-month" x-model="month" class="w-full rounded-[13px] border-[1.5px] border-[var(--pay-border)] bg-[var(--pay-input)] px-3 py-[13px] text-sm font-bold outline-none">
                                    <option value="">{{ __('front.pay.month') }}</option>
                                    @for ($m = 1; $m <= 12; $m++)
                                        <option value="{{ $m }}">@fa(str_pad((string) $m, 2, '0', STR_PAD_LEFT))</option>
                                    @endfor
                                </select>
                            </div>
                            <div>
                                <label class="mb-[7px] block text-[12.5px] font-bold" for="pay-year">{{ __('front.pay.year') }}</label>
                                <select id="pay-year" x-model="year" class="w-full rounded-[13px] border-[1.5px] border-[var(--pay-border)] bg-[var(--pay-input)] px-3 py-[13px] text-sm font-bold outline-none">
                                    <option value="">{{ __('front.pay.year') }}</option>
                                    @foreach ($expiryYears as $expiryYear)
                                        <option value="{{ $expiryYear }}">@fa($expiryYear)</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="mb-[7px] block text-[12.5px] font-bold" for="pay-cvv">{{ __('front.pay.cvv2') }}</label>
                                <input id="pay-cvv" type="text" inputmode="numeric" x-on:input="onCvv($event)"
                                       class="w-full rounded-[13px] border-[1.5px] bg-[var(--pay-input)] px-3 py-[13px] text-center text-sm font-bold outline-none"
                                       dir="ltr"
                                       x-bind:class="cvv2.length > 0 && ! cvvValid ? 'border-secondary-500' : 'border-[var(--pay-border)]'">
                            </div>
                        </div>
                    </div>

                    <div class="mt-[18px] flex gap-2.5">
                        <button type="button" x-on:click="cancel()"
                                class="inline-flex shrink-0 items-center justify-center rounded-[14px] bg-[var(--pay-tab)] px-[22px] py-3.5 text-sm font-bold text-[var(--pay-muted)] transition">
                            {{ __('front.pay.cancel') }}
                        </button>
                        <button type="submit" x-bind:disabled="busy || ! (method === 'mobile' ? mobileValid : (cardValid && cvvValid))"
                                class="inline-flex flex-1 items-center justify-center gap-2 rounded-[14px] bg-primary-600 p-3.5 text-[15px] font-bold text-white shadow-lg shadow-primary-600/30 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"></span>
                            {{ __('front.pay.get_code') }}
                        </button>
                    </div>
                </form>
            </div>

            {{-- ===== Step 2: the SMS code ===== --}}
            <div x-show="step === 'otp'" x-cloak class="px-[26px] py-[22px]">
                <div class="mb-[18px] text-center">
                    <div class="text-[15px] font-bold">{{ __('front.pay.otp_title') }}</div>
                    <div class="mt-1.5 text-[12.5px] text-[var(--pay-muted)]">
                        {{ __('front.pay.otp_sent') }}
                        <span class="font-bold" dir="ltr" x-text="maskedMobile"></span>
                    </div>
                </div>

                {{-- Pre-launch only: the SMS driver is simulated, so the code is shown. --}}
                <div x-show="debugCode" x-cloak class="mb-4 rounded-xl border border-[#f6e6c6] bg-[#fff7ea] px-4 py-3 text-center text-[12.5px] font-bold text-[#996515]">
                    {{ __('front.pay.debug_code') }} <span dir="ltr" x-text="fa(debugCode)"></span>
                </div>

                <form x-on:submit.prevent="verifyOtp()">
                    <div class="mb-[18px] flex justify-center gap-[9px]" dir="ltr">
                        @for ($i = 0; $i < 5; $i++)
                            <input type="text" maxlength="1" inputmode="numeric" placeholder="•"
                                   class="size-[52px] h-[60px] rounded-[13px] border-[1.5px] border-[var(--pay-border)] bg-[var(--pay-input)] text-center text-[22px] font-bold text-primary-600 outline-none"
                                   @if ($i === 0) x-ref="otp0" @endif
                                   x-on:input="onOtpInput({{ $i }}, $event)"
                                   x-on:keydown.backspace="onOtpBackspace({{ $i }}, $event)"
                                   @if ($i === 0) x-on:paste.prevent="onOtpPaste($event)" @endif>
                        @endfor
                    </div>

                    <div class="flex gap-2.5">
                        <button type="button" x-on:click="restart()"
                                class="inline-flex shrink-0 items-center justify-center rounded-[14px] bg-[var(--pay-tab)] px-[22px] py-3.5 text-sm font-bold text-[var(--pay-muted)] transition">
                            {{ __('front.pay.back') }}
                        </button>
                        <button type="submit" x-bind:disabled="busy || otpCode().length !== 5"
                                class="inline-flex flex-1 items-center justify-center gap-2 rounded-[14px] bg-primary-600 p-3.5 text-[15px] font-bold text-white shadow-lg shadow-primary-600/30 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"></span>
                            {{ __('front.pay.verify') }}
                        </button>
                    </div>
                </form>

                <div class="mt-3.5 text-center text-[12.5px]">
                    <span x-show="resendIn > 0" x-text="resendLabel()" class="text-[var(--pay-muted)]"></span>
                    <button type="button" x-show="resendIn === 0" x-cloak x-on:click="resend()" class="font-bold text-primary-600">{{ __('front.pay.resend') }}</button>
                </div>
            </div>

            {{-- ===== Step 3: balances and payment sources ===== --}}
            <div x-show="step === 'wallet'" x-cloak class="px-[26px] py-5">
                <div class="mb-4 grid grid-cols-2 gap-3">
                    <div class="rounded-[14px] border-[1.5px] border-[var(--pay-border)] p-3.5">
                        <div class="mb-2 flex items-center gap-[7px]">
                            <span class="flex size-7 items-center justify-center rounded-lg bg-[var(--pay-purple-soft)]">
                                <svg class="size-[15px]" viewBox="0 0 24 24" fill="none" stroke="#563bb1" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z"/><path d="M9 12l2 2 4-4"/></svg>
                            </span>
                            <span class="text-xs text-[var(--pay-muted)]">{{ __('front.pay.available_credit') }}</span>
                            <button type="button" class="flex size-[17px] shrink-0 items-center justify-center rounded-full bg-[var(--pay-purple-soft)] text-[11px] font-bold text-primary-600"
                                    x-on:click="$dispatch('open-credit-help')" aria-label="{{ __('front.pay.credit_help.title') }}">؟</button>
                        </div>
                        <div class="text-base font-bold"><span dir="ltr" x-text="installmentBalanceFa"></span> <span class="text-[11px] font-normal text-[var(--pay-muted)]">{{ __('front.pay.toman') }}</span></div>
                    </div>
                    <div class="rounded-[14px] border-[1.5px] border-[var(--pay-border)] p-3.5">
                        <div class="mb-2 flex items-center gap-[7px]">
                            <span class="flex size-7 items-center justify-center rounded-lg bg-[var(--pay-green-soft)]">
                                <svg class="size-[15px]" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5A2.5 2.5 0 0 1 5.5 5H18a2 2 0 0 1 2 2v1"/><path d="M3 7.5V17a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3.5H16a2.5 2.5 0 0 1 0-5H21V8"/></svg>
                            </span>
                            <span class="text-xs text-[var(--pay-muted)]">{{ __('front.pay.wallet_balance') }}</span>
                        </div>
                        <div class="text-base font-bold"><span dir="ltr" x-text="cashBalanceFa"></span> <span class="text-[11px] font-normal text-[var(--pay-muted)]">{{ __('front.pay.toman') }}</span></div>
                    </div>
                </div>

                <div class="mb-2.5 text-[13px] font-bold" x-text="remainingLabel()"></div>

                <div class="flex flex-col gap-2.5">
                    {{-- Installment credit --}}
                    <button type="button" x-on:click="chooseSource('credit')" x-bind:disabled="busy || installmentBalance <= 0"
                            class="flex w-full items-center justify-between rounded-[13px] border-[1.5px] border-[var(--pay-border)] bg-[var(--pay-input)] px-3.5 py-3 transition disabled:cursor-not-allowed disabled:opacity-50">
                        <span class="flex items-center gap-2.5">
                            <span class="flex size-[34px] items-center justify-center rounded-[10px]" style="background: var(--pay-purple-soft)">
                                <svg class="size-[17px]" viewBox="0 0 24 24" fill="none" stroke="#563bb1" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z"/></svg>
                            </span>
                            <span class="text-right">
                                <span class="block text-[13.5px] font-bold">{{ __('front.pay.from_credit') }}</span>
                                <span class="block text-[11.5px] text-[var(--pay-muted)]" x-text="upTo(installmentBalanceFa)"></span>
                            </span>
                        </span>
                        <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-primary-600/30 border-t-primary-600"></span>
                        <svg x-show="! busy" class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="#563bb1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
                    </button>

                    {{-- Cash wallet --}}
                    <button type="button" x-on:click="chooseSource('wallet')" x-bind:disabled="busy || cashBalance <= 0"
                            class="flex w-full items-center justify-between rounded-[13px] border-[1.5px] border-[var(--pay-border)] bg-[var(--pay-input)] px-3.5 py-3 transition disabled:cursor-not-allowed disabled:opacity-50">
                        <span class="flex items-center gap-2.5">
                            <span class="flex size-[34px] items-center justify-center rounded-[10px]" style="background: var(--pay-green-soft)">
                                <svg class="size-[17px]" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z"/></svg>
                            </span>
                            <span class="text-right">
                                <span class="block text-[13.5px] font-bold">{{ __('front.pay.from_wallet') }}</span>
                                <span class="block text-[11.5px] text-[var(--pay-muted)]" x-text="upTo(cashBalanceFa)"></span>
                            </span>
                        </span>
                        <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-primary-600/30 border-t-primary-600"></span>
                        <svg x-show="! busy" class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
                    </button>

                    {{-- Online --}}
                    <button type="button" x-on:click="online()" x-bind:disabled="busy"
                            class="inline-flex w-full items-center justify-center gap-2.5 rounded-[14px] bg-primary-600 p-[15px] text-[15px] font-bold text-white shadow-lg shadow-primary-600/30 transition hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-70">
                        <span x-show="busy" x-cloak class="size-[17px] animate-spin rounded-full border-2 border-white/40 border-t-white"></span>
                        <span x-text="busy ? @js(__('front.pay.processing')) : @js(__('front.pay.online'))">{{ __('front.pay.online') }}</span>
                    </button>
                </div>

                {{-- Holds placed so far --}}
                <div x-show="reservations.length" x-cloak class="mt-[18px] border-t border-[var(--pay-border)] pt-4">
                    <div class="mb-2.5 text-[12.5px] font-bold text-[var(--pay-muted)]">{{ __('front.pay.this_payment') }}</div>
                    <div class="flex flex-col gap-2">
                        <template x-for="(reservation, index) in reservations" :key="index">
                            <div class="flex items-center justify-between rounded-[11px] bg-[var(--pay-tx)] px-3.5 py-2.5">
                                <span class="flex items-center gap-2">
                                    <span class="inline-block size-2 rounded-full" x-bind:style="`background: ${reservation.color}`"></span>
                                    <span class="text-[12.5px] font-bold" x-text="reservation.label"></span>
                                </span>
                                <span class="text-[12.5px] font-bold text-green-600">
                                    <span dir="ltr">+<span x-text="reservation.amountFa"></span></span>
                                    {{ __('front.pay.toman') }}
                                </span>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-center gap-[7px] border-t border-[var(--pay-border)] px-[26px] pb-5 pt-3.5 text-[11.5px] text-[var(--pay-muted)]">
                <svg class="size-[13px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>
                {{ __('front.pay.secure') }}
            </div>
        </div>

        {{-- ===== Important notes ===== --}}
        <div class="mt-4 rounded-[16px] border px-[18px] py-4" style="background: var(--pay-notes-bg); border-color: var(--pay-notes-border)">
            <div class="mb-2.5 flex items-center gap-2">
                <svg class="size-[17px]" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="12" y1="11" x2="12" y2="16"/><circle cx="12" cy="7.5" r="0.5"/></svg>
                <span class="text-[13.5px] font-bold">{{ __('front.pay.notes_title') }}</span>
            </div>
            <ul class="list-disc pr-[18px] text-xs leading-8 text-[var(--pay-muted)]">
                @foreach (__('front.pay.notes') as $note)
                    <li>{{ $note }}</li>
                @endforeach
            </ul>
        </div>

        {{-- ===== Register-to-buy dialog (a valid mobile with no account) ===== --}}
        <template x-teleport="body">
            <div x-cloak x-show="showRegister" x-transition.opacity class="fixed inset-0 z-modal flex items-center justify-center bg-ink/45 p-5 backdrop-blur-[2px]"
                 x-on:click.self="showRegister = false" x-on:keydown.escape.window="showRegister = false">
                <div class="w-full max-w-[420px] rounded-[22px] bg-white p-7 text-center shadow-2xl" x-show="showRegister" x-transition.scale.origin.center>
                    <div class="mx-auto mb-4 flex size-[58px] items-center justify-center rounded-2xl bg-[#efeafb]">
                        <svg class="size-7" viewBox="0 0 24 24" fill="none" stroke="#563bb1" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>
                    </div>
                    <h3 class="mb-2 text-lg font-bold text-ink">{{ __('front.pay.register_prompt.title') }}</h3>
                    <p class="mb-6 text-[13.5px] leading-8 text-ink-muted" x-text="registerBody"></p>
                    <div class="flex gap-2.5">
                        <button type="button" x-on:click="registerChangeMobile()"
                                class="flex-1 rounded-xl bg-[#f2f0fa] p-3.5 text-sm font-bold text-ink-soft transition hover:bg-[#e8e3f8]">
                            {{ __('front.pay.register_prompt.change_mobile') }}
                        </button>
                        <a x-bind:href="registerUrl" target="_blank" rel="noopener"
                           class="inline-flex flex-1 items-center justify-center rounded-xl bg-primary-600 p-3.5 text-sm font-bold text-white shadow-lg shadow-primary-600/25 transition hover:bg-primary-700">
                            {{ __('front.pay.register_prompt.register') }}
                        </a>
                    </div>
                </div>
            </div>
        </template>
    </div>

    {{-- ===== What installment credit is ===== --}}
    <div x-data="{ open: false }" x-on:open-credit-help.window="open = true">
        <template x-teleport="body">
            <div x-cloak x-show="open" x-transition.opacity class="fixed inset-0 z-modal flex items-center justify-center bg-ink/45 p-5 backdrop-blur-[2px]"
                 x-on:click.self="open = false" x-on:keydown.escape.window="open = false">
                <div class="w-full max-w-[420px] rounded-[22px] bg-white p-7 text-center shadow-2xl" x-show="open" x-transition.scale.origin.center>
                    <div class="mx-auto mb-4 flex size-[58px] items-center justify-center rounded-2xl bg-[#efeafb]">
                        <svg class="size-7" viewBox="0 0 24 24" fill="none" stroke="#563bb1" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z"/><path d="M9 12l2 2 4-4"/></svg>
                    </div>
                    <h3 class="mb-2 text-lg font-bold text-ink">{{ __('front.pay.credit_help.title') }}</h3>
                    <p class="mb-6 text-[13.5px] leading-8 text-ink-muted">{{ __('front.pay.credit_help.body') }}</p>
                    <div class="flex gap-2.5">
                        <button type="button" class="flex-1 rounded-xl bg-[#f2f0fa] p-3.5 text-sm font-bold text-ink-soft transition hover:bg-[#e8e3f8]" x-on:click="open = false">
                            {{ __('front.actions.understood') }}
                        </button>
                        <a href="{{ route('account.credit.form') }}" target="_blank"
                           class="inline-flex flex-1 items-center justify-center rounded-xl bg-primary-600 p-3.5 text-sm font-bold text-white shadow-lg shadow-primary-600/25 transition hover:bg-primary-700">
                            {{ __('front.pay.credit_help.request') }}
                        </a>
                    </div>
                </div>
            </div>
        </template>
    </div>
@endsection