<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : OrderEntryInfoMob.html
 * @desc    : 개인통관부호 정보 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.05   jsh77b     최초 작성
 *******************************************************************************
 -->
 
 <!-- 개인통관부호 정보 -->
<div class="foldGroup">
	<ul>
		<li class="fold_overseas">
			<div class="fold_head">
				<a href="javascript:void(0)">
					<div>
						<div class="fold_tit"><span>개인통관고유부호</span></div>
						<div class="data"><span class="entryNo" th:text="${entryNo}"></span></div>
					</div>
				</a>
			</div>
			<div class="fold_cont">
				<div class="area_overseas">
					<div class="info_txt">
						<ul><li>물품가액이 $150 초과할 경우 관/부가세가 발생 할 수 있으며, 물품 종류와 해외공급자 관계없이 같은 날 입항하게 되면 합산과세 대상이 됩니다.</li></ul>
					</div>
					<div class="form_field">
						<div>
							<input type="radio" name="rdi-overseas" id="rdi-overs1" value="Y" checked> 
							<label for="rdi-overs1"><span>받는사람 개인통관고유부호</span></label>
						</div>
						<div>
							<input type="radio" name="rdi-overseas" id="rdi-overs2" value="N"> 
							<label for="rdi-overs2"><span>입력 안 함</span></label>
						</div>
						<div class="info_box overs1">
							<div class="input_wrap">
								<input type="text" name="entryNo" class="form_control" maxlength="13" placeholder="P로 시작하는 13자리" th:value="${entryNo}">
								<!-- 유효하지 않은 개인통관고유부호 일때 class명 'err' 추가 -->
							</div>
							<div class="t_err" style="display:none;">개인통관고유부호가 유효하지 않습니다.</div>
							<!-- 유효하지 않은 개인통관고유부호 일때 노출 -->
							<div class="agree_overs">
								<input id="chk-overs-agr" type="checkbox">
								<label for="chk-overs-agr">
									<span>위 정보는 원활한 통관을 위해 수집 및 판매자에게 제공하며,계속 사용하도록 안전하게 STYLE24에서 저장 / 관리 합니다.&nbsp;&nbsp;<em class="tmark_required">(필수)</em></span>
								</label>
							</div>
							<div class="btn_group btn_group_flex">
								<div><button type="button" class="btn btn_dark btn_entryNo">입력완료</button></div>
							</div>
						</div>
						<div class="info_box overs2" style="display: none;">
							<div class="info_txt type2">
								<ul>
									<li>개인통관고유부호를 입력하지 않아도 관세사무소에서 개인정보 확인을 위해 별도 연락을 드릴 예정입니다.</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</li>
	</ul>
</div>
<!-- //개인통관부호 정보 -->

<script th:inline="javascript">
var dispYn = [[${order.dispYn}]]; // 노출여부

// 화면노출
var entryInfoDispYn = function(temp) {
	if (temp == "Y") {
		$("#entryInfo .fold_head").addClass("on");
		$("#entryInfo .fold_cont").show();
	} else {
		$("#entryInfo .fold_head").removeClass("on");
		$("#entryInfo .fold_cont").hide();
	}
}

//컨텐츠 호출
$(document).ready( function() {
	// 화면펼침
	entryInfoDispYn(dispYn);
});

// 개인통관부호 유효성체크
$("#orderForm input[name=entryNo]").on("change", function(){
	if ($(this).val().length > 0 && $(this).val().length < 13) {
		$(this).parent().parent().find(".t_err").show();
		$(this).addClass("err");
	} else {
		$(this).parent().parent().find(".t_err").hide();
		$(this).removeClass("err");
	}
});
</script>
</html>

