@version(2)

{{-- 결제 화면. 무엇을 얼마에 결제하는지 보이고 결제수단을 고르게 한다 --}}
{{-- id 와 name 은 pay.js 가 잡는 자리다. 이름을 바꾸면 결제 버튼이 잠긴 채로 남는다 --}}

@php
$zp_src = Context::get('source_order_code');
$zp_bank = $gateways['banktransfer'] ?? null;
@endphp

<div class="zpay" id="zpay-checkout" data-state="{{ $pay_state }}" data-order-code="{{ $order->order_code }}">

	<header class="zpay-head">
		<span class="zpay-label"><i></i>PAYMENT</span>
		<h1 class="zpay-title">{{ $lang->zpay_checkout_title }}</h1>
		<p class="zpay-code">
			@if (!empty($zp_src))
			<em>{{ $lang->zpay_order_code }}</em> <span>{{ $zp_src }}</span>
			@else
			<em>{{ $lang->zpay_order_code }}</em> <span>{{ $order->order_code }}</span>
			@endif
		</p>
	</header>

	<div class="zpay-cols">
		<div class="zpay-main">
			<section class="zpay-block">
				<h2 class="zpay-block-title">{{ $lang->zpay_select_method }}</h2>

				<div class="zpay-methods">
					@foreach ($gateways as $zp_name => $zp_gateway)
					<label class="zpay-method" for="zpay-method-{{ $zp_name }}">
						<input type="radio" name="zpay_gateway" id="zpay-method-{{ $zp_name }}" value="{{ $zp_name }}"
							data-requires-client="{{ $zp_gateway['requires_client'] ? 1 : 0 }}" />
						<span class="zpay-method-mark" aria-hidden="true"></span>
						<span class="zpay-method-label">{{ $zp_gateway['title'] }}</span>
					</label>
					@endforeach
				</div>

				@if ($zp_bank)
				{{-- 무통장입금을 고르면 계좌와 입금자명을 받는다 --}}
				<div class="zpay-bank" id="zpay-bank" hidden>
					<h3 class="zpay-sub-title">{{ $lang->zpay_bank_accounts }}</h3>

					<ul class="zpay-bank-list">
						@foreach ($zp_bank['request']['accounts'] as $zp_i => $zp_account)
						<li>
							<label class="zpay-bank-item">
								<input type="radio" name="zpay_bank_index" value="{{ $zp_i }}" @if($zp_i === 0) checked @endif />
								<span class="zpay-bank-mark" aria-hidden="true"></span>
								<span class="zpay-bank-text">
									<b>{{ $zp_account['bank'] }}</b>
									<em>{{ $zp_account['account'] }}</em>
									@if ($zp_account['holder'])<span>{{ $zp_account['holder'] }}</span>@endif
									@foreach ($zp_account['extra'] ?? [] as $zp_ex)
									<span>{{ $zp_ex['label'] }} {{ $zp_ex['value'] }}</span>
									@endforeach
								</span>
							</label>
						</li>
						@endforeach
					</ul>

					<div class="zpay-field">
						<label for="zpay-depositor">{{ $lang->zpay_depositor_name }}</label>
						<input type="text" id="zpay-depositor" name="depositor_name" value="{{ $order->payer_name }}" maxlength="80" />
					</div>

					<p class="zpay-notice">{{ sprintf($lang->zpay_bank_due_notice, $zp_bank['request']['due_days']) }}</p>
				</div>
				@endif
			</section>

			<p class="zpay-error" id="zpay-error" hidden></p>

			<div class="zpay-actions">
				<button type="button" class="zpay-btn" id="zpay-submit" disabled>
					<span>{{ sprintf($lang->zpay_pay_button, $amount_text) }}</span>
					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
				</button>
			</div>
		</div>

		<aside class="zpay-side">
			<section class="zpay-summary">
				<h2 class="zpay-block-title">{{ $lang->zpay_order_summary }}</h2>
				<dl>
					<dt>{{ $lang->zpay_product }}</dt>
					<dd>{{ Context::replaceUserLang((string)$order->title) }}</dd>

					@if ($order->payer_name)
					<dt>{{ $lang->zpay_payer }}</dt>
					<dd>{{ $order->payer_name }}</dd>
					@endif

					<dt>{{ $lang->zpay_amount }}</dt>
					<dd class="zpay-amount">{{ $amount_text }}</dd>
				</dl>
			</section>

			@if ($pay_config->biz_notice)
			<p class="zpay-biz">{!! nl2br(escape($pay_config->biz_notice)) !!}</p>
			@endif
		</aside>
	</div>
</div>

<script>
	window.ZPAY_BOOT = {!! $pay_boot_json !!};
</script>