@version(2)
@load('css/shop.css')

<div class="shp">
	<div class="shp-top"><h2 class="shp-title">{{ $lang->shop_checkout }}</h2></div>

	@if ($payment_price > 0 && !$pay_available)
	<p class="shp-warn">{{ $lang->shop_pay_unavailable }}</p>
	@else
	<form action="{{ getUrl('') }}" method="post" class="shp-form">
		<input type="hidden" name="act" value="procCommerceOrder" />
		<input type="hidden" name="mid" value="{{ $mid }}" />

		<div class="shp-2col">
			<div class="shp-2col-main">
				<div class="shp-box">
					<h3>{{ $lang->shop_shipping }}</h3>
					@if ($is_member && count($my_addresses ?? []))
					<div class="shp-row" style="margin-bottom:12px">
						<label>{{ $lang->shop_saved_address ?? '저장된 배송지' }}</label>
						<select id="shpAddrSelect">
							<option value="">{{ $lang->shop_saved_address_new ?? '새 배송지 입력' }}</option>
							@foreach ($my_addresses as $addr)
							<option value="{{ $addr->address_srl }}"
								data-name="{{ $addr->receiver_name }}" data-phone="{{ $addr->receiver_phone }}"
								data-zipcode="{{ $addr->zipcode }}" data-address1="{{ $addr->address1 }}" data-address2="{{ $addr->address2 }}"
								data-country="{{ $addr->country ?? 'KR' }}" data-state="{{ $addr->state ?? '' }}" data-city="{{ $addr->city ?? '' }}" data-phone-cc="{{ $addr->phone_cc ?? '' }}">
								{{ $addr->title !== '' && $addr->title !== null ? $addr->title : $addr->address1 }} ({{ $addr->receiver_name }})
							</option>
							@endforeach
						</select>
					</div>
					@endif
					<div class="shp-form-grid">
						@if ($shop_need_country)
						<div class="shp-row">
							<label>{{ $lang->shop_country }}</label>
							<select name="country" id="shpCountry">
								@foreach ($shop_countries as $zmc_cc => $zmc_cn)
								<option value="{{ $zmc_cc }}" @if ($zmc_cc === $shop_default_country) selected @endif>{{ $zmc_cn }}</option>
								@endforeach
							</select>
						</div>
						@endif
						<div class="shp-row"><label>{{ $lang->shop_receiver }}</label><input type="text" name="receiver_name" placeholder="{{ $lang->shop_same_as_orderer }}" /></div>
						<div class="shp-row">
							<label>{{ $lang->shop_receiver_phone }}</label>
							<div class="shp-phone-row">
								<input type="text" class="shp-intl-only" name="phone_cc" placeholder="{{ $lang->shop_phone_cc ?? '국가번호' }}" />
								<input type="tel" name="receiver_phone" placeholder="{{ $lang->shop_same_as_orderer }}" />
							</div>
						</div>
						<div class="shp-row shp-kr-only">
							<label>{{ $lang->shop_zipcode }}</label>
							<div class="shp-zip-row">
								<input type="text" name="zipcode" readonly />
								<button type="button" class="shp-btn shp-btn-ghost shp-btn-zip" id="shpZipSearch">{{ $lang->shop_search_address ?? '주소 검색' }}</button>
							</div>
						</div>
						<div class="shp-row shp-intl-only"><label>{{ $lang->shop_postal_code ?? '우편번호' }}</label><input type="text" name="zipcode_intl" /></div>
						<div class="shp-row" style="grid-column:1/-1"><label>{{ $lang->shop_address }} *</label><input type="text" name="address1" required /></div>
						<div class="shp-row" style="grid-column:1/-1"><label>{{ $lang->shop_address_detail }}</label><input type="text" name="address2" /></div>
						<div class="shp-row shp-intl-only"><label>{{ $lang->shop_city ?? '도시' }} *</label><input type="text" name="city" /></div>
						<div class="shp-row shp-intl-only"><label>{{ $lang->shop_state ?? '주 · 도' }}</label><input type="text" name="state" /></div>
						<div class="shp-row" style="grid-column:1/-1"><label>{{ $lang->shop_delivery_memo }}</label><input type="text" name="delivery_memo" placeholder="{{ $lang->shop_delivery_memo_ph }}" /></div>
					</div>
					@if ($is_member)
					<label class="shp-save-addr"><input type="checkbox" name="save_address" value="Y" /> {{ $lang->shop_save_address ?? '이 배송지를 주소록에 저장' }}</label>
					@endif
				</div>

				<div class="shp-box">
					<h3>{{ $lang->shop_orderer }}</h3>
					<div class="shp-form-grid">
						<div class="shp-row"><label>{{ $lang->shop_name }} *</label><input type="text" name="orderer_name" required value="{{ $is_member ? ($logged_info->nick_name ?? '') : '' }}" /></div>
						<div class="shp-row">
							<label>{{ $lang->shop_phone }} *</label>
							<input type="tel" name="orderer_phone" required value="{{ $is_member ? ($logged_info->phone_number ?? '') : '' }}" />
							@if ($is_member)
							<label class="shp-save-addr" style="margin-top:6px"><input type="checkbox" name="save_phone" value="Y" @if (empty($logged_info->phone_number)) checked @endif /> {{ $lang->shop_save_phone ?? '이 연락처를 회원 정보에 저장' }}</label>
							@endif
						</div>
						<div class="shp-row"><label>{{ $lang->shop_email }}</label><input type="email" name="orderer_email" value="{{ $is_member ? ($logged_info->email_address ?? '') : '' }}" /></div>
						@if (!$is_member)
						<div class="shp-row"><label>{{ $lang->shop_guest_password }} *</label><input type="password" name="guest_password" minlength="4" required autocomplete="new-password" /><small style="display:block;margin-top:4px;font-size:12px;color:#6b7684">{{ $lang->shop_guest_password_help }}</small></div>
						@endif
					</div>
				</div>

				<div class="shp-box">
					<h3>{{ $lang->shop_item }}</h3>
					@foreach ($cart->items as $entry)
					@if (!$entry->blocked)
					@php $shp_row_thumb = !empty($entry->item->thumb) ? "background-image:url('" . $entry->item->thumb . "');" : ''; @endphp
					<div class="shp-cart-item">
						<span class="shp-cart-thumb" style="{{ $shp_row_thumb }}"></span>
						<div class="shp-cart-info">
							<span class="shp-cart-name">{{ $entry->item->item_name }}</span>
							@if ($entry->option)<div class="shp-cart-option">{{ $entry->option->option_label }}</div>@endif
							<div class="shp-cart-option">{{ $lang->shop_qty }} {{ $entry->qty }}개</div>
						</div>
						<div class="shp-cart-right"><strong class="shp-cart-price">{{ shop_money_in($entry->subtotal, $shp_currency) }}</strong></div>
					</div>
					@endif
					@endforeach
				</div>

				@if ($is_member && $shp_currency === ($shp_base_currency ?? 'KRW'))
				{{-- 쿠폰·적립금 — KRW 원장 전용이라 외화 주문서에서는 숨긴다 --}}
				<div class="shp-box">
					<h3>{{ $lang->shop_coupon }} · {{ $lang->shop_credit }}</h3>
					<div class="shp-form-grid">
						@if (!empty($my_coupons))
						<div class="shp-row">
							<label>{{ $lang->shop_coupon_select }}</label>
							<select name="coupon_issue_srl" id="shpCouponSelect">
								<option value="">{{ $lang->shop_coupon_none }}</option>
								@foreach ($my_coupons as $mc)
								<option value="{{ $mc->issue_srl }}" data-discount="{{ $mc->discount }}">{{ $mc->coupon->title }} (-{{ shop_money_base($mc->discount) }})</option>
								@endforeach
							</select>
						</div>
						@endif
						<div class="shp-row">
							<label>{{ $lang->shop_coupon_code }}</label>
							<input type="text" name="coupon_code" id="shpCouponCode" autocomplete="off" placeholder="{{ $lang->shop_coupon_code_ph }}" />
						</div>
						@if ($credit_balance > 0)
						@php $shp_credit_min = max(0, (int)($shop_config->credit_min_use ?? 0)); @endphp
						<div class="shp-row">
							<label>{{ $lang->shop_credit_use }} ({{ $lang->shop_credit_balance }}: {{ shop_money_base($credit_balance) }})</label>
							<input type="number" name="use_credit" id="shpUseCredit" min="0" max="{{ $credit_balance }}" value="0" data-min-use="{{ $shp_credit_min }}" />
							<small style="display:block;margin-top:4px;font-size:12px;color:#6b7684">@if ($shp_credit_min > 0){{ shop_money_base($shp_credit_min) }} 이상부터 사용할 수 있고, @endif상품 금액(할인 적용 후)까지 1원 단위로 사용할 수 있어요.</small>
						</div>
						@endif
					</div>
					<small style="display:block;margin-top:6px;font-size:12px;color:#6b7684">{{ $lang->shop_coupon_help }}</small>
				</div>
				@endif
			</div>

			<aside class="shp-2col-aside">
				<div class="shp-box shp-paybox" data-item-total="{{ (int)$cart->item_total }}" data-ship-fee="{{ (int)$ship_fee }}" data-currency="{{ $shp_currency }}" data-base="{{ $shp_base_currency ?? 'KRW' }}" data-base-zero="{{ \Zittme\Modules\Commerce\Models\Money::isZeroDecimal() ? 1 : 0 }}" data-rate="{{ $shp_fx_rate }}" data-zero="{{ $shp_fx_zero_decimal ? 1 : 0 }}" data-extra-zones="{{ escape($shop_config->ship_extra_zones ?? '[]') }}">
					<h3>{{ $lang->shop_pay_summary ?? '결제 금액' }}</h3>
					<div class="shp-summary-row"><span>{{ $lang->shop_item_total }}</span><span>{{ shop_money_in($cart->item_total, $shp_currency) }}</span></div>
					<div class="shp-summary-row" id="shpSumDiscount" hidden><span>{{ $lang->shop_discount }}</span><span class="shp-minus">-<em>0</em></span></div>
					<div class="shp-summary-row"><span>{{ $lang->shop_ship_fee }}</span><span>{{ $ship_fee > 0 ? '+' . shop_money_in($ship_fee, $shp_currency) : $lang->shop_ship_free }}</span></div>
					<div class="shp-summary-row is-total"><span>{{ $lang->shop_total }}</span><span id="shpSumTotal">{{ shop_money_in($payment_price, $shp_currency) }}</span></div>

					<label class="shp-check" style="margin-top:14px">
						<input type="checkbox" name="agree_privacy" value="Y" required />
						{{ $lang->shop_agree_privacy }}
					</label>
					@if (!empty($shop_config->privacy_text))
					<div class="shp-privacy">{{ $shop_config->privacy_text }}</div>
					@endif

					<button type="submit" class="shp-btn shp-btn-primary" id="shpPayBtn" style="width:100%;margin-top:12px">
						{{ $payment_price > 0 ? sprintf($lang->shop_pay_amount, shop_money_in($payment_price, $shp_currency)) : $lang->shop_order_free }}
					</button>
				</div>
			</aside>
		</div>
	</form>
	@endif

	<p class="shp-foot-links">
		<a href="{{ getUrl('', 'mid', $mid, 'act', 'dispCommerceCart') }}">{{ $lang->shop_cart }}</a>
	</p>

	<script>
	(function () {
		var addrSel = document.getElementById('shpAddrSelect');
		function setVal(name, value) {
			var el = document.querySelector('input[name="' + name + '"]');
			if (el) el.value = value || '';
		}
		if (addrSel) {
			addrSel.addEventListener('change', function () {
				var opt = addrSel.options[addrSel.selectedIndex];
				if (!opt || !opt.value) return;
				setVal('receiver_name', opt.getAttribute('data-name'));
				setVal('receiver_phone', opt.getAttribute('data-phone'));
				var optCountry = opt.getAttribute('data-country') || 'KR';
				var countrySel = document.getElementById('shpCountry');
				if (countrySel) {
					countrySel.value = optCountry;
					countrySel.dispatchEvent(new Event('change'));
				}
				setVal('state', opt.getAttribute('data-state'));
				setVal('city', opt.getAttribute('data-city'));
				setVal('phone_cc', opt.getAttribute('data-phone-cc'));
				setVal('zipcode', opt.getAttribute('data-zipcode'));
				setVal('zipcode_intl', opt.getAttribute('data-zipcode'));
				setVal('address1', opt.getAttribute('data-address1'));
				setVal('address2', opt.getAttribute('data-address2'));
				// 채워 넣은 값으로 배송비를 다시 계산하게 한다
				var a1 = document.querySelector('[name="address1"]');
				if (a1) a1.dispatchEvent(new Event('change', { bubbles: true }));
			});
		}

		var paybox = document.querySelector('.shp-paybox');
		var couponSel = document.getElementById('shpCouponSelect');
		var creditInput = document.getElementById('shpUseCredit');
		function fmt(n) { return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); }
		// 통화 인지 금액 표기 — 외화 주문서는 금액이 통화 최소단위 정수다
		var shpCur = paybox ? (paybox.getAttribute('data-currency') || 'KRW') : 'KRW';
		var shpBase = paybox ? (paybox.getAttribute('data-base') || 'KRW') : 'KRW';
		var shpZero = paybox ? paybox.getAttribute('data-zero') === '1' : true;
		var shpRate = paybox ? (parseFloat(paybox.getAttribute('data-rate')) || 1) : 1;
		var shpSym = { KRW: '', USD: '$', EUR: '\u20AC', JPY: '\u00A5', GBP: '\u00A3', CNY: '\u00A5', TWD: 'NT$', HKD: 'HK$', AUD: 'A$', CAD: 'C$', SGD: 'S$', MXN: 'MX$', BRL: 'R$', THB: '฿', PHP: '₱', VND: '₫' }[shpCur];
		if (shpSym === undefined) shpSym = shpCur + ' ';
		function money(minor) {
			if (shpCur === 'KRW') return fmt(minor) + '\uC6D0';
			return shpSym + (shpZero ? fmt(minor) : fmt(Math.floor(minor / 100)) + '.' + ('0' + (minor % 100)).slice(-2));
		}
		// 지역 추가 배송비는 기준 통화 최소단위로 정의돼 있어 병행 통화 주문서에서만 교차 환율로 되돌린다
		var shpBaseZero = paybox ? paybox.getAttribute('data-base-zero') === '1' : true;
		function toOrderMinor(fee) {
			if (shpCur === shpBase) return fee;
			return Math.round((fee / (shpBaseZero ? 1 : 100)) / shpRate * (shpZero ? 1 : 100));
		}
		var extraZones = [];
		try { extraZones = JSON.parse(paybox ? paybox.getAttribute('data-extra-zones') : '[]') || []; } catch (e) {}
		// 서버(Cart::extraShipFee)와 같은 순서로 본다: 국가 → 시·도(해외는 주/도·도시) → 우편번호
		var regionAliases = { '충청북도': '충북', '충청남도': '충남', '전라북도': '전북', '전라남도': '전남', '경상북도': '경북', '경상남도': '경남', '강원도': '강원', '제주도': '제주' };
		var regionNames = ['서울', '경기', '인천', '부산', '대구', '광주', '대전', '울산', '세종', '강원', '충북', '충남', '전북', '전남', '경북', '경남', '제주'];
		function normRegion(name) {
			name = String(name || '').trim();
			if (!name) return '';
			if (regionAliases[name]) return regionAliases[name];
			for (var i = 0; i < regionNames.length; i++) {
				if (name.indexOf(regionNames[i]) === 0) return regionNames[i];
			}
			for (var k in regionAliases) {
				if (name.indexOf(k) === 0) return regionAliases[k];
			}
			return name;
		}
		function zipExtra() {
			var zipEl = document.querySelector('input[name="zipcode"]');
			var zip = zipEl ? zipEl.value.replace(/[^0-9]/g, '') : '';
			var addrEl = document.querySelector('input[name="address1"]');
			var region = addrEl ? normRegion(addrEl.value.trim().split(' ')[0]) : '';
			var countryEl = document.querySelector('[name="country"]');
			var country = (countryEl ? countryEl.value : 'KR').toUpperCase() || 'KR';
			var stateEl = document.querySelector('input[name="state"]');
			var cityEl = document.querySelector('input[name="city"]');
			var intlRegions = [];
			if (stateEl && stateEl.value.trim()) intlRegions.push(stateEl.value.trim().toLowerCase());
			if (cityEl && cityEl.value.trim()) intlRegions.push(cityEl.value.trim().toLowerCase());

			for (var i = 0; i < extraZones.length; i++) {
				var fee = parseInt(extraZones[i].fee, 10) || 0;
				if (fee <= 0) continue;

				var zoneCountry = String(extraZones[i].country || '').toUpperCase() || 'KR';
				if (zoneCountry !== country) continue;

				var regions = String(extraZones[i].regions || '').split(',');
				for (var r = 0; r < regions.length; r++) {
					var zoneName = regions[r].trim();
					if (!zoneName) continue;
					if (region && normRegion(zoneName) === region) return fee;
					if (intlRegions.indexOf(zoneName.toLowerCase()) !== -1) return fee;
				}
				if (country !== 'KR' && !String(extraZones[i].regions || '').trim() && !String(extraZones[i].zips || '').trim()) return fee;
				if (!zip) continue;

				var patterns = String(extraZones[i].zips || '').split(',');
				for (var j = 0; j < patterns.length; j++) {
					var p = patterns[j].trim();
					if (!p) continue;
					if (p.indexOf('-') >= 0) {
						var range = p.split('-');
						var from = range[0].trim(), to = range[1] ? range[1].trim() : '';
						var zipNum = parseInt(zip.substring(0, Math.max(from.length, 1)), 10);
						if (from && to && zipNum >= parseInt(from, 10) && zipNum <= parseInt(to, 10)) return fee;
					} else if (zip.indexOf(p) === 0) {
						return fee;
					}
				}
			}
			return 0;
		}
		function recalc() {
			if (!paybox) return;
			var itemTotal = parseInt(paybox.getAttribute('data-item-total'), 10) || 0;
			var shipFee = (parseInt(paybox.getAttribute('data-ship-fee'), 10) || 0) + toOrderMinor(zipExtra());
			var discount = 0;
			if (couponSel && couponSel.selectedIndex >= 0) {
				discount += parseInt(couponSel.options[couponSel.selectedIndex].getAttribute('data-discount') || '0', 10) || 0;
			}
			if (creditInput) {
				var creditMin = parseInt(creditInput.getAttribute('data-min-use') || '0', 10) || 0;
				var creditMax = parseInt(creditInput.getAttribute('max') || '0', 10) || 0;
				var wantCredit = Math.max(0, parseInt(creditInput.value, 10) || 0);
				if (creditMax > 0 && wantCredit > creditMax) wantCredit = creditMax;
				if (wantCredit < creditMin) wantCredit = 0;
				discount += wantCredit;
			}
			if (discount > itemTotal) discount = itemTotal;
			var row = document.getElementById('shpSumDiscount');
			if (row) {
				row.hidden = discount <= 0;
				row.querySelector('em').textContent = money(discount);
			}
			var total = itemTotal - discount + shipFee;
			var totalEl = document.getElementById('shpSumTotal');
			if (totalEl) totalEl.textContent = money(total);
			var btn = document.getElementById('shpPayBtn');
			if (btn) btn.textContent = total > 0 ? money(total) + ' \uACB0\uC81C\uD558\uAE30' : btn.textContent;
		}
		if (couponSel) couponSel.addEventListener('change', recalc);
		if (creditInput) { creditInput.addEventListener('input', recalc); creditInput.addEventListener('change', recalc); }
		['address1', 'zipcode', 'country', 'state', 'city'].forEach(function (name) {
			var el = document.querySelector('[name="' + name + '"]');
			if (!el) return;
			el.addEventListener('input', recalc);
			el.addEventListener('change', recalc);
		});

		var checkoutForm = document.querySelector('form.shp-form');
		if (checkoutForm) {
			checkoutForm.addEventListener('submit', function (e) {
				function val(name) {
					var el = checkoutForm.querySelector('[name="' + name + '"]');
					return el ? { el: el, v: (el.value || '').trim() } : null;
				}
				function fail(field, msg) {
					e.preventDefault();
					if (field && field.el) {
						field.el.style.borderColor = '#e5484d';
						field.el.scrollIntoView({ behavior: 'smooth', block: 'center' });
						setTimeout(function () { try { field.el.focus(); } catch (err) {} }, 350);
						field.el.addEventListener('input', function once() {
							field.el.style.borderColor = '';
							field.el.removeEventListener('input', once);
						});
					}
					alert(msg);
					return false;
				}
				var f;
				f = val('orderer_name');
				if (f && f.v === '') return fail(f, '주문자 이름을 입력해주세요.');
				f = val('orderer_phone');
				if (f && f.v === '') return fail(f, '주문자 연락처를 입력해주세요.');
				f = val('zipcode');
				var addr1 = val('address1');
				if (f && f.v === '' && addr1 && addr1.v === '') return fail(f, '주소 검색 버튼으로 배송지 주소를 입력해주세요.');
				if (addr1 && addr1.v === '') return fail(addr1, '배송지 주소를 입력해주세요.');
				f = val('guest_password');
				if (f && f.v.length < 4) return fail(f, '주문 조회 비밀번호를 4자 이상 입력해주세요.');
				var agree = checkoutForm.querySelector('[name="agree_privacy"]');
				if (agree && !agree.checked) {
					e.preventDefault();
					agree.scrollIntoView({ behavior: 'smooth', block: 'center' });
					alert('개인정보 수집·이용에 동의해주세요.');
					return false;
				}
			});
		}

		var zipBtn = document.getElementById('shpZipSearch');
		if (!zipBtn) return;
		function openPostcode() {
			new daum.Postcode({
				oncomplete: function (data) {
					setVal('zipcode', data.zonecode);
					setVal('address1', data.roadAddress || data.jibunAddress);
					var detail = document.querySelector('input[name="address2"]');
					if (detail) detail.focus();
				}
			}).open();
		}
		zipBtn.addEventListener('click', function () {
			if (window.daum && window.daum.Postcode) {
				openPostcode();
				return;
			}
			var script = document.createElement('script');
			script.src = 'https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js';
			script.onload = openPostcode;
			document.head.appendChild(script);
		});
	})();
	</script>
</div>

<script>
(function () {
	var mode = {!! json_encode($shop_address_mode) !!};
	var form = document.querySelector('form[action*="procCommerce"], form');
	if (!form) return;
	var country = document.getElementById('shpCountry');

	function isOverseas() {
		if (mode === 'intl') return true;
		if (mode === 'kr') return false;
		return country ? country.value.toUpperCase() !== 'KR' : false;
	}

	function apply() {
		var overseas = isOverseas();
		document.querySelectorAll('.shp-kr-only').forEach(function (el) { el.hidden = overseas; });
		document.querySelectorAll('.shp-intl-only').forEach(function (el) { el.hidden = !overseas; });
		var city = document.querySelector('[name="city"]');
		if (city) city.required = overseas;
		var zip = document.querySelector('[name="zipcode"], [name="zipcode_kr"]');
		var zipIntl = document.querySelector('[name="zipcode_intl"]');
		if (zip && zipIntl) {
			if (overseas) { zipIntl.name = 'zipcode'; zip.name = 'zipcode_kr'; }
			else { zip.name = 'zipcode'; zipIntl.name = 'zipcode_intl'; }
		}
	}

	if (country) country.addEventListener('change', apply);
	apply();
})();
</script>