<!DOCTYPE html>
<html lang="ko"
	  xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : CellphoneChangePopupForm.html
 * @desc    : 휴대폰번호변경팝업 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.01.25   jsshin     최초 작성
 *******************************************************************************
 -->
<div class="modelessPopup" data-width="800">
	<div class="panelStyle">
		<!-- TITLE -->
		<div class="panelTitle">
			<strong >휴대전화 번호 변경팝업</strong>
			<button type="button" class="close" onclick="uifnPopupClose('popupCellphoneForm')"><em class="fa fa-times"></em></button>
		</div>
		<!-- //TITLE -->
		<!-- CONTENT -->
		<div class="panelContent">
			<form id="cellPhoneForm" name="cellPhoneForm">
				<input type="hidden" id="custNo" name="custNo">
				<table class="frmStyle">
					<colgroup>
						<col style="width:1%"/>
						<col style="width:40%"/>
					</colgroup>
					<tbody>
					<tr>
						<span class="infoTxt cBlue"><i class="fa fa-info-circle"></i>인증번호 확인 후 번호변경가능 </span>
						<span class="infoTxt cBlue"><i class="fa fa-info-circle"></i>변경 할 휴대폰번호 입력 후 전송</span> <br/>
						<span class="infoTxt cBlue"><i class="fa fa-info-circle"></i>인증번호는 6자리 입니다.</span><br/>
						<th>기존휴대전화번호<em class="star"></em></th>
						<td>
							<input type="text" class="w150" name="orgCellPhone" maxlength="13" readonly="readonly"/>
						</td>
						<th>변경할휴대전화번호<em class="star"></em></th>
						<td>
							<input type="text" class="w150" name="cellPhnno" required="required" maxlength="13" data-valid-name="휴대전화번호" />
						</td>
					</tr>
					<tr id="trCertNo" style="display: none">
						<th>인증번호</th>
						<td>
							<input type="text" class="w200" name="certNo" placeholder="인증번호 입력" style="display:none;">
						</td>
					</tr>
					</tbody>
				</table>
			</form>
		</div>
		<ul class="panelBar">
			<li class="right">
				<button type="button" id="btnSendCustCrtfdNo" class="btn btn-success btn-lg" >인증번호발송</button>
				<button type="button" id="btnCustCertNo" class="btn btn-success btn-lg" style="display: none">확인(번호변경)</button>
			</li>
		</ul>
		<!-- //CONTENT -->
	</div>
</div>
<script th:inline="javascript">
	/*<![CDATA[*/
	const elementCellPhnno = [[${elementCellPhnno}]];
	const elementCustNo = [[${elementCustNo}]];

	// 인증번호 전송
	$('#btnSendCustCrtfdNo').on('click', function () {
		//휴대폰번호
		if (!gagajf.validation('#cellPhoneForm'))
			return false;

		mcxDialog.confirm("인증번호를 전송 하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function () {
				let jsonData = JSON.stringify($('#cellPhoneForm').serializeObject());
				gagajf.ajaxJsonSubmit('/customer/certno/send', jsonData, function () {
					$('#cellPhoneForm input[name=certNo]').val('');
					$('#cellPhoneForm input[name=certNo]').show();
					$('#trCertNo').show();
					$('#btnCustCertNo').show();
				});
			}
		});
	});

	// 인증확인버튼
	$('#btnCustCertNo').on('click', function () {
		let jsonData = JSON.stringify($('#cellPhoneForm').serializeObject());
		gagajf.ajaxJsonSubmit('/customer/certno/confirm', jsonData, fnCertificationResult);
	});

	// 인증확인 콜백
	var fnCertificationResult = function (data) {
		if (data.crtfdNoYn === 'Y') {
			mcxDialog.confirm("휴대전화 번호가 정상적으로 변경 되었습니다.", {
				cancelBtnText: "취소",
				sureBtnText: "확인",
				sureBtnClick: function () {
					uifnPopupClose('popupCellphoneForm');
					fnSearchCustInfo();
				}
			});
		} else {
			mcxDialog.alert("인증번호가 일치하지 않습니다.\n확인 후 다시 입력해 주세요.");
		}
	};

	// 데이터 셋팅
	var fnInitDataSet = function () {
		$('#cellPhoneForm input[name=orgCellPhone]').val($(elementCellPhnno).val());
		$('#cellPhoneForm input[name=custNo]').val($(elementCustNo).val());
	}

	// 휴대폰 자동 하이픈
	$('#cellPhoneForm input[name=cellPhnno]').on('input keyup keydown paste change', function () {
		cfnCellPhonnHypen(this);
	});

	$(document).ready(function() {
		fnInitDataSet();
	});

	/*]]>*/
</script>
</html>
