<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="mob/common/layout/SubLayoutMob">
<!--
 *******************************************************************************
 * @source  : OrderNoMemberMob.html
 * @desc    : 비회원 주문/결제 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.04   jsh77b     최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">

<!-- 회원 -->
<th:block th:if="${isLogin}">
	<form class="form_wrap form_col_c form_full" id="nomemberForm" th:action="@{'/order/form'}" th:method="post">
		<input type="hidden" name="shotDelvUseYn" th:value="${order.shotDelvUseYn}" />
		<th:block th:each="cartSq , index : ${order.cartSqArr}">
			<input type="hidden" name="cartSqArr" th:value="${cartSq}" />
		</th:block>
		<script>$("#nomemberForm").submit();</script>
	</form>
</th:block>
<!-- //회원 -->

<!-- 비회원 -->
<th:block th:if="${!isLogin}">
	<main role="" id="" class="container od">
		<section class="content nonMBorder">
			<div class="inner">
				<div class="nonMBorder_tit">
					<div class="text_box">
						<p>비회원 주문을 위한 주문자 정보 입력 및<br>개인정보 수집/이용 동의에 체크하신 후 주문을<br>완료하실 수 있습니다.</p>
					</div>
				</div>
				
				<form class="form_wrap form_full" id="orderForm" th:action="@{'/order/form'}" th:method="post">
					<input type="hidden" name="shotDelvUseYn" th:value="${order.shotDelvUseYn}" />
					<input type="hidden" name="sexGb" />
					<input type="hidden" name="birthYmd" />
					<th:block th:each="cartSq , index : ${order.cartSqArr}">
						<input type="hidden" name="cartSqArr" th:value="${cartSq}" />
					</th:block>
						
					<div class="form_field">
						<label class="input_label sr-only">이름(주문자명)</label>
						<div class="input_wrap"> 
							<input type="text" class="form_control" name="custNm" placeholder="이름(주문자명)" readonly>
						</div>
					</div>
					
					<!-- 휴대폰 인증 입력 전 -->
					<div class="form_field">
						<label class="input_label sr-only">휴대폰 번호</label>
						<div class="input_wrap"> 
							<input type="text" class="form_control" name="cellPhnno" placeholder="휴대폰 인증을 해주세요" readonly>
							<button type="button" class="btn btn_dark btn_hp_certi beforeAuth" id="btnCellPhoneCertify">
								<span>본인인증</span>
							</button>
							<button type="button" class="btn btn_dark btn_hp_certi afterAuth" style="display:none;">
								<span>인증완료</span>
							</button>
						</div>
					</div>
					<!-- //휴대폰 인증 입력 전 -->
					
					<div class="form_field">
						<label class="input_label sr-only">이메일주소</label>
						<div class="input_wrap"> 
							<input type="text" class="form_control" name="email" placeholder="이메일주소">
						</div>
					</div>	
					<div class="form_field">
						<label class="input_label sr-only">배송주소</label>
						<div class="input_wrap">
							<input type="hidden" class="form_control" name="recipZipcode" placeholder="우편번호" readonly="readonly" value="">
							<input type="hidden" class="form_control" name="recipBaseAddr" placeholder="기본주소" readonly="readonly" value="">
							<input type="text" class="form_control" name="recipAddr" placeholder="배송주소" readonly="readonly">
							<button type="button" class="btn btn_addr_sch" onclick="fnOpenDaumAddr();">
								<span class="sr-only">우편번호 찾기</span>
							</button>
						</div>
					</div>
					<div class="form_field">
						<label class="input_label sr-only">상세주소</label>
						<div class="input_wrap"> 
							<input type="text" class="form_control" name="recipDtlAddr" placeholder="상세주소">
						</div>
					</div>
					<div class="form_field">
						<div class="agree_nomb_txt_box">
							<div class="agree_nombPrivacy">
								<input id="chk-nombPrivacy-agr" type="checkbox">
								<label for="chk-nombPrivacy-agr"><span>비회원 개인정보 수집&#47;이용 동의&nbsp;&nbsp;<em class="tmark_required">(필수)</em></span></label>
							</div>
							<div>
								(1) "STYLE24"는 비회원 주문의 경우에도 배송, 대금결제, 주문내역 조회 및 구매확인, 실명여부 확인을 위하여 필요한 개인정보만을 요청하고 있으며, 이 경우 그 정보는 대금결제 및 상품의 배송에 관련된 용도 이외에는 다른 어떠한 용도로도 사용되지 않습니다.<br>
								(2) 비회원의 개인정보 수집/이용 목적 및 항목<br>
								① 성명<br>
								② 원활한 구매/판매 진행, 본인의사의 확인, 불만 및 분쟁처리, 고지 및 정보 안내 등 : 전화번호, 이동전화번호, e-mail<br>
								③ 대금결제서비스의 제공 등 : 은행계좌정보, 신용카드정보<br>
								④ 상품, 경품배송 : 주소, 전화번호, e-mail<br>
								⑤ 부정 이용방지, 전자금융거래기록보관 : IP address, 방문일시<br>
								(3) 비회원 서비스 이용의 경우에는 회원 서비스 내용을 제외한 "STYLE24" 개인정보 처리방침의 모든 내용이 동일하게 적용됩니다.<br>
								(4) "STYLE24"는 회원의 개인정보와 동일한 수준으로 비회원의 개인정보를 보호합니다.
							</div>
						</div>
					</div>
					<div class="btn_group btn_group_flex">
						<div><button type="button" class="btn btn_default btn_block" id="btn_cancel"><span>취소</span></button></div>
						<div><button type="button" class="btn btn_dark btn_block" id="btn_order"><span>주문하기</span></button></div>
					</div>
				</form>
			</div>
			<div class="inner wide bg_beige">
				<div class="join_txt">
					<p>
						<span>STYLE24에 회원가입</span>을 하시면<br>더 많은 혜택을 받으실 수 있습니다.
					</p>
					<a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);" class="btn_underline">회원가입</a>
				</div>
			</div>
		</section>
	</main>
</th:block>
<!-- 비회원 -->


<script th:inline="javascript">
var cartSqArr 		= [[${order.cartSqArr}]];
const sEncData 		= [[${sEncData}]];   //인증 후 해당 페이지로 리다이렉트함
const authMethod 	= [[${authMethod}]]; //인증 후 해당 페이지로 리다이렉트함

// 컨텐츠 호출
$(document).ready( function() {
	// 1. 타이틀설정
	$("#htopTitle").text("비회원 주문하기");
	
	if (!gagajf.isNull(sEncData)) {
		fnNiceCallBack(sEncData, authMethod);
	}
});

// 취소버튼
$("#btn_cancel").on("click", function() {
	window.history.back();
});
	
// 주문하기버튼
$("#btn_order").on("click", function() {	
	if (gagajf.isNull($("#orderForm input[name=cellPhnno]").val())) {
		mcxDialog.alert("본인인증을 진행해 주세요.");
		$('#orderForm input[name=cellPhnno]').focus();
		return false;
	}
	
	if (gagajf.isNull($("#orderForm input[name=email]").val())) {
		mcxDialog.alert("이메일을 입력해주세요.");
		$('#orderForm input[name=email]').focus();
		return false;
	}
	
	if (gagajf.isNull($("#orderForm input[name=email]").val())) {
		mcxDialog.alert("이메일 주소를 다시 확인해주세요.");
		$('#orderForm input[name=email]').focus();
		return false;
	}
	
	if (!fnCheckValidationEmail($("#orderForm input[name=email]").val())) {
		mcxDialog.alert('이메일 형식에 맞게 입력해주세요.');
		return;
	}
	
	if (gagajf.isNull($("#orderForm input[name=recipZipcode]").val())) {
		mcxDialog.alert("배송주소를 입력해주세요.");
		$('#orderForm input[name=recipAddr]').focus();
		return false;
	}
	
	if (gagajf.isNull($("#orderForm input[name=recipBaseAddr]").val())) {
		mcxDialog.alert("배송주소를 입력해주세요.");
		$('#orderForm input[name=recipAddr]').focus();
		return false;
	}
	
	if (gagajf.isNull($("#orderForm input[name=recipDtlAddr]").val())) {
		mcxDialog.alert("상세주소를 입력해주세요.");
		$('#orderForm input[name=recipDtlAddr]').focus();
		return false;
	}
	
	if (!$("#chk-nombPrivacy-agr").is(":checked")) {
		mcxDialog.alert("비회원 개인정보 수집 이용에 동의해주세요.");
		return false;
	}
	
	// 주문서전송
	$("#orderForm").submit();
});

// 휴대폰 인증
$('#btnCellPhoneCertify').on('click', function () {
	cfnOpenCellphoneCertify("/order/noMember?cartSqArr="+cartSqArr);
});

// 나이스 본인인증 후 콜백
var fnNiceCallBack = function(encData, authMethod) {
	if (!gagajf.isNull(encData)) {
		let custInfo 		= {};
		custInfo.encData 	= encData;
		let jsonData 		= JSON.stringify(custInfo);
		gagajf.ajaxJsonSubmit('/order/customer/auth', jsonData, fnUpdateAuthInfoCallback);
	}
};
	
// 고객정보 데이터
var fnUpdateAuthInfoCallback = function (result) {
	// 인정후처리
	$("#orderForm .beforeAuth").hide();
	$("#orderForm .afterAuth").show();
	
	$('#orderForm input[name=custNm]').val(result.sName);
	$('#orderForm input[name=cellPhnno]').val(result.sMobileNo);
	$('#orderForm input[name=sexGb]').val(result.sGender);
	$('#orderForm input[name=birthYmd]').val(result.sBirthDate);
}

// 우편번호 DAUM을 이용한 우편번호 팝업 레이어
var fnOpenDaumAddr = function() {
	
	$("body").css("overflow", "hidden");
	
	let daumZip = new daum.Postcode({
		oncomplete: function(data) {
			$("#orderForm input[name=recipAddr]").val(data.zonecode + '    ' + cfnGetDaumRoadAddr(data));
			$('#orderForm input[name=recipZipcode]').val(data.zonecode);
			$('#orderForm input[name=recipBaseAddr]').val(cfnGetDaumRoadAddr(data));
			$('#orderForm input[name=recipDtlAddr]').focus();
			
			cfnCloseDaumAddr();
			
			// 2021.04.12 이태영 지원 닫기버튼 기능
			$(".jquery-modal.blocker.current").hide();
			$("body").css("overflow", "");
		},
		width: '100%'
	});
	cfnOpenDaumAddr(daumZip);
}

/**
 * 이메일 유효성 체크
 * @param email - 이메일
 * @return boolean - 통과(true)/실패(false)
 * @author jsshin
 * @since 2021. 02. 15
 */
var fnCheckValidationEmail = function (email) {
	const regexp = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/;
	let result = true;
	if (!regexp.test(email)) {
		result = false;
	}
	return result;
};
</script>

</th:block>
</body>
</html>