<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : OrderGiftInfoMob.html
 * @desc    : 선물받기정보 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.13   jsh77b     최초 작성
 *******************************************************************************
 -->
<div class="gift_tab">
	<div class="foldGroup">
		<ul>
			<li class="fold_mbinfo">
				<!-- 주문고객정보 -->
				<div class="fold_head">
					<a href="javascript:void(0)">
						<div>
							<div class="fold_tit">
								<span>선물 받으실 분</span>
							</div>
						</div>
					</a>
				</div>
				
				<div class="fold_cont" style="display: none;">
					<!-- 210419_ : 모바일웹에서만 .inner 사용 -->
					<th:block th:unless="${frontGb} == 'A'">
						<div class="inner">
							<div class="form_field">
								<div class="input_wrap">
									<input type="text" name="recipNm" class="form_control" value="" maxlength="10" placeholder="받는 분" style="ime-mode:active">
								</div>
								<div class="input_wrap">
									<input type="number" pattern="\d*" name="recipPhnno" class="form_control" value="" placeholder="받는 분 휴대폰번호" data-valid-type="numeric">
									<p class="desc_txt">선물이 타인에게 전송될수 있으니 받으실분 연락처를 정확하게 입력해주세요.</p> <!-- 210421_삭제 : 전화번호를 텍스트 삭제 -->
								</div>
								<div class="textarea_wrap">
									<textarea class="doc_review" name="review" id="giftMsg" placeholder="선물 메시지 입력&#13;&#10;(미 입력시 ‘감사합니다’로 발송됩니다.)"></textarea>
									<p class="txt_cnt"><span id="review_cnt" class="c_primary">0</span>/200</p>
								</div>
							</div>
						</div>
					</th:block>
					
					<!-- 210419_ : APP 전용 : 탭 전체/ '연락처불러오기'는 모바일웹에서 사용하지않음. -->
					<th:block th:if="${frontGb} == 'A'">
						<div class="tabWrap">
							<ul class="tabIndex">
								<li class="" value="Call"><a href="javascript:void(0);"><span>연락처 불러오기</span></a></li>
								<li class="active" value="Direct"><a href="javascript:void(0);"><span>직접입력</span></a></li>
							</ul>
							
							<div class="tabContents">
								<div class="form_field">
									<div class="tab_cont active">
										<div class="input_wrap">
											<input type="text" name="recipNm" class="form_control" value="" maxlength="10" placeholder="받는 분" style="ime-mode:active">
										</div>
										<div class="form_field">
											<div class="input_wrap">
												<input type="number" pattern="\d*" name="recipPhnno" class="form_control" value="" placeholder="받으실분 휴대폰번호" data-valid-type="numeric">
												<p class="desc_txt">선물이 타인에게 전송될수 있으니 전화번호를 받으실분 연락처를 정확하게 입력해주세요.</p>
											</div>
											<div class="textarea_wrap">
												<textarea class="doc_review" name="review" id="giftMsg" placeholder="선물 메시지 입력&#13;&#10;(미 입력시 ‘감사합니다’로 발송됩니다.)" style="ime-mode:active"></textarea>
												<p class="txt_cnt"><span id="review_cnt" class="c_primary">0</span>/200</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</th:block>
				</div>
				<!-- //주문고객정보 -->
			</li>
		</ul>
	</div>
</div>
<!-- //배송지정보 -->

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

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

//컨텐츠 호출
$(document).ready( function() {
	//alert(frontGb);
	//var userAgent=navigator.userAgent.toLowerCase();
	//alert("userAgent ::: " + userAgent);
});

//하이픈처리
var fnPhnnoSet = function(str) {
	var rtnStr = str.replace(/[^0-9]/g, "").replace(/(^02|^0505|^1[0-9]{3}|^0[0-9]{2})([0-9]+)?([0-9]{4})$/,"$1-$2-$3").replace("--", "-");
	return rtnStr;
}

//length 체크
$("#orderGiftInfo input[name=recipPhnno]").on("keyup", function(){
	var str = $(this).val();
	if (str.length > 12) {
		str = str.slice(0,13);
	}
	$(this).val(str);
});

//2021.04.09 하이픈처리
//$(document).on("keyup", "#orderGiftInfo input[name=recipPhnno]", function() { 
//	$(this).val($(this).val().replace(/[^0-9]/g, "").replace(/(^02|^0505|^1[0-9]{3}|^0[0-9]{2})([0-9]+)?([0-9]{4})$/,"$1-$2-$3").replace("--", "-") ); 
//});

//선물 받으실 분 직접입력 글자 제한
$('.doc_review').keyup(function (e){
	var content = $(this).val();
	$('#review_cnt').html(content.length);
	if (content.length > 200){
		mcxDialog.alert("최대 200자까지 입력 가능합니다."); //210420_수정 : 시스템 alert -> dialog 변경.
		$(this).val(content.substring(0, 200));
		$('#review_cnt').html("200");
	}
});
</script>
</html>