<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="ec" uri="/WEB-INF/tld/ecnet_tld.tld"%>

<%-- 토스 클라이언트키(공개키)는 환경별 globals_*.properties 에서 주입 --%>
<spring:eval expression="@globalSettings['Globals.pay.toss.clientKey']" var="tossClientKey"/>

<style>
	/*.charg_cont .area_tab li{ width: calc((100% - 80px)/5);}*/
</style>
	
<!-- KG 모빌리언스 -->
<script src="https://mup.mobilians.co.kr/js/ext/ext_inc_comm.js"></script>
<script type="text/javascript" src="<c:url value='/js/MJUtill.js'/>"></script>
<script src="https://js.tosspayments.com/v1/payment-widget"></script>

<script>

	let paymentWidget;
	let paymentMethodWidget;

	$(document).ready(function(){

		// 서버에서 보낸 payErrorMsg가 있는지 확인
		var errorMsg = "${payErrorMsg}";

		if (errorMsg && errorMsg !== "") {
			// 사용자에게 익숙한 alert 띄우기
			alert("결제에 실패하였습니다.\n사유: " + errorMsg);
		}

		// 토스페이먼츠 위젯 초기화 세팅 (clientKey는 서버 globals_*.properties 에서 주입)
		const clientKey = '${tossClientKey}';
		const customerKey = 'test_customer_1234'; // 테스트용 가상 고객 ID (실제 연동 시에는 로그인한 유저의 고유 ID를 넣으세요)
		paymentWidget = PaymentWidget(clientKey, customerKey);

		// 초기 충전금액(입력값 기준, 공급가액)
		var initSupply = parseInt(($("#price").val() || '0').replace(/[^0-9]/g, ''), 10) || 0;
		var initAmount = initSupply + Math.round(initSupply * 0.1);

		// 결제수단 및 약관 위젯 화면에 렌더링
		paymentMethodWidget = paymentWidget.renderPaymentMethods('#payment-method', { value: initAmount });
		paymentWidget.renderAgreement('#agreement');

		// 선택한 결제수단 → 아래 신용카드 타이틀 텍스트 동기화
		try {
			if (paymentMethodWidget && typeof paymentMethodWidget.on === 'function') {
				// 위젯 렌더 완료 후 초기 반영 + 선택 변경 감지(폴링: v1은 select 이벤트 미보장)
				paymentMethodWidget.on('ready', function () {
					updatePayMethodTitle();
					setInterval(updatePayMethodTitle, 100);
				});
				// select 이벤트가 지원되면 즉시 반영
				paymentMethodWidget.on('paymentMethodSelect', updatePayMethodTitle);
			}
		} catch (e) { /* 이벤트 미지원 환경 무시 */ }

		// 초기 금액 표시 갱신
		updatePrice(initSupply);

		// 금액 추가 버튼 클릭
		$('.add_money .btn').on('click', function () {
			var addAmount = Number($(this).data('price'));
			var currentValue = $("#price").val().replace(/[^0-9]/g, '');
			currentValue = currentValue ? Number(currentValue) : 0;
			var total = currentValue + addAmount;
			$("#price").val(numberWithCommas(total));
			updatePrice(total);
		});

		// 직접 입력
		$("#price").on('input', function () {
			var value = $(this).val().replace(/[^0-9]/g, '');
			value = value ? Number(value) : 0;
			$(this).val(numberWithCommas(value));
			updatePrice(value);
		});
	});

	// 금액 업데이트 (price = 공급가액)
	function updatePrice(price) {
		var $message = $('.input_message');

		var supplyPrice = price;
		var vatPrice = Math.round(supplyPrice * 0.1);
		var lastPrice = supplyPrice + vatPrice;

		// 화면 표시
		$('#supplyPriceStr').text(numberWithCommas(supplyPrice));
		$('#vatPriceStr').text(numberWithCommas(vatPrice));
		$('#lastPriceStr').text(numberWithCommas(lastPrice));

		// 토스 결제 금액 변경
		if (typeof paymentMethodWidget !== 'undefined') {
			paymentMethodWidget.updateAmount(lastPrice);
		}

		// 충전금액 제한 체크
		if (price > 150000 || price < 5000) {
			$(".money_input").addClass('error');
			$message.addClass('active');
			if (price < 5001) {
				$message.find(".msg").text("최소 충전금액 5천원 이상 입력해주세요.");
			} else {
				$message.find(".msg").text("휴대폰 결제는 최대 150,000원까지 입력 가능합니다.");
			}
		} else {
			$(".money_input").removeClass('error');
			$message.removeClass('active');
		}
	}

	// 선택된 결제수단명을 신용카드 타이틀에 반영
	function updatePayMethodTitle() {
		try {
			var sel = paymentMethodWidget.getSelectedPaymentMethod();
			if (!sel || !sel.method) return;

			var method = sel.method; // 카드 / 가상계좌 / 계좌이체 / 휴대폰 / 간편결제 ...
			var label = (method === '카드') ? '신용·체크카드' : method;

			var $t = $('#payMethodTitle');
			if ($t.length && $t.text() !== label) {
				$t.text(label);
			}
		} catch (e) { /* 위젯 준비 전 호출 무시 */ }
	}

	// 후불제여부 체크
	function getMjUserAfterPayCheck() {
		var isAfterPay = false;

		$.ajax({
			type: "POST",
			url: "/web/main/selectUserAfterPayAjax.do",
			data: {},
			dataType:'json',
			async: false,
			success: function (data) {
				if (data.isSuccess) {
					if (data.isAfterPay == true) {
						isAfterPay = true;
					}
				}
			},
			error: function (e) {

			}
		});

		return isAfterPay;
	}

	function pgOpenerPopup(){
		// 후불제여부 체크 (기존 로직 유지)
		if (getMjUserAfterPayCheck() == true) {
			alert("후불제 고객은 해당 서비스를 이용할수 없습니다.");
			return false;
		}

		// 충전금액(공급가액) 추출
		var chargePrice = parseInt(($("#price").val() || '0').replace(/[^0-9]/g, ''), 10);
		if (isNaN(chargePrice) || chargePrice < 5000) {
			alert("최소 충전금액 5천원 이상 입력해주세요.");
			return false;
		}

		// 최종 결제금액(부가세 포함)
		var lastPrice = chargePrice + Math.round(chargePrice * 0.1);

		// 토스페이먼츠 결제창 바로 호출
		paymentWidget.requestPayment({
			orderId: 'ORDER_' + new Date().getTime(), // 고유한 상점 주문번호 생성
			orderName: '문자온 충전 ' + lastPrice + '원',
			successUrl: window.location.origin + '/web/member/pay/tossSuccess.do', // 결제 성공 시 이동할 URL
			failUrl: window.location.origin + '/web/member/pay/tossFail.do',       // 결제 실패 시 이동할 URL
			customerEmail: $('#mberEmailAdres').val(), // 로그인한 사용자의 이메일 매핑
			customerName: $('#mberNm').val(),   // 로그인한 사용자의 이름 매핑
			customerMobilePhone: $('#moblphonNo').val()
		}).catch(function (error) {
			if (error.code === 'USER_CANCEL') {
				alert('결제를 취소하셨습니다.');
			} else {
				alert(error.message);
			}
		});
	}


/* 윈도우팝업 열기 */
function infoPop(pageUrl){
	document.infoPopForm.pageType.value = pageUrl;
	document.infoPopForm.action = "/web/pop/infoPop.do";
	document.infoPopForm.method = "post"; 
	window.open("about:blank", 'infoPop', 'width=790, height=220, top=100, left=100, fullscreen=no, menubar=no, status=no, toolbar=no, titlebar=yes, location=no, scrollbars=1');
	document.infoPopForm.target = "infoPop";
	document.infoPopForm.submit();
}


/* 사용내역서 클릭 시 내역서 새창 팝업 오픈  */
function fnShowVaViewPrintPopup() { 
	//만들려는 팝업의 크기
	var popup_wid = '840';
	var popup_ht = '800';

	var popup_left = (window.screen.width / 2) - (popup_wid / 2);
	var popup_top =(window.screen.height / 2) - (popup_ht / 2);

	$("#pgForm").attr("target","payVaPrint");
	
	window.open('', 'payVaPrint', 'width='+ popup_wid +', height='+ popup_ht +', left=' + popup_left + ', top='+ popup_top +',scrollbars=1');
	$("#pgForm").attr({"action":"/web/member/pay/selectVaViewPrintPopupAjax.do", "method":"post"}).submit();
	
}

</script>

<!-- </head>
<body> -->


	<form id="payTypeForm" name="payTypeForm" method="post"> 
		<input type="hidden" name="payTypeCode" />
	</form>
	<form id="pgForm" name="pgForm" action="/web/member/pay/PayActionAjax.do" method="post">
	<input type="hidden" id="payMethod" name="payMethod" />
	<input type="hidden" id="accMsg" name="accMsg" />
	<input type="hidden" id="sendCnt" name="sendCnt" value="<c:out value='${resultMsgInfo.sendCnt}'/>" />
	<input type="hidden" id="mberEmailAdres" value="<c:out value='${mberManageVO.mberEmailAdres}'/>" />
	<input type="hidden" id="moblphonNo" value="<c:out value='${mberManageVO.moblphonNo}'/>" />
	<input type="hidden" id="mberNm" value="<c:out value='${mberManageVO.mberNm}'/>" />
     <!-- content 영역 -->
        <div class="inner">
            <!-- send top -->
            <div class="send_top">
                <!-- tab button -->
                <ul class="tabType4">
                    <li class="tab"><button type="button" onclick="location.href='/web/pay/PayGuide.do'">요금안내/견적내기</button></li>
                    <li class="tab active"><button type="button">결제하기</button></li>
                    <li class="tab"><button type="button" onclick="location.href='/web/member/pay/PayList.do'">요금 결제내역</button></li>
                    <li class="tab"><button type="button" onclick="location.href='/web/member/pay/payUserSWList.do'">요금 사용내역</button></li>
					<!-- 현금영수증 자동발행 주석 -->
					<!-- <li class="tab"><button type="button" onclick="location.href='/web/member/pay/BillPub.do'">계산서/현금영수증 발행 등록</button></li> -->
					<li class="tab"><button type="button" onclick="location.href='/web/member/pay/BillPub.do'">세금계산서 발행 등록</button></li>
                </ul><!--// tab button -->
				<!-- 결제관리 - 결제하기 -->
                <div class="serv_content charg_cont current" id="tab5_2">
                    <div class="heading">
                        <h2>결제하기</h2>
                        <button type="button" class="button info" onclick="infoPop('PayView');">사용안내</button>
                    </div>
                    <%--<div class="titBox">
						<p>- 서비스 이용을 위해 충전이 필수 입니다.</p>
						<p>- 충전 자체로 매출 인식이 되지 않는 서비스 특성상, 부가세 신고는 전자 세금계산서로만 가능합니다.</p>
						<p>- 모든 요금은 VAT별도 금액입니다.</p>
					</div>--%>
					<div>
						<!-- 토스페이먼츠 결제수단 위젯 영역 -->
						<div id="payment-method" class="toss_wrap"></div>

						<!-- 토스페이먼츠 이용약관 영역 -->
						<div id="agreement" class="toss_wrap"></div>

						<!-- 신용카드 -->
						<div class="area_tabcont on" id="tab2_1">
							<p class="tType1_title"><img src="/publish/images/credit_small.png" alt="신용카드"> <span id="payMethodTitle">신용·체크카드</span></p>
							<table class="tType1">
								<colgroup>
									<col style="width: 100px;">
									<col style="width: auto;">
								</colgroup>
								<tbody>
									<tr class="charge_content">
										<th scope="row">충전금액</th>
										<td class="flex">
											<div class="money_form_wrap form_wrap">
												<input type="text" name="price" id="price" class="input money_input" placeholder="5,000원 이상 입력해주세요." value="50,000" />
												<p class="input_in">원</p>
												<p class="input_message error">
													<i class="icon error">!</i> <span class="msg">휴대폰 결제는 최대 150,000원까지 입력 가능합니다.</span>
												</p>
											</div>

											<div class="btn_wrap add_money w100per">
												<button type="button" class="btn" data-price="10000">+ 1만원</button>
												<button type="button" class="btn" data-price="50000">+ 5만원</button>
												<button type="button" class="btn" data-price="100000">+ 10만원</button>
												<button type="button" class="btn" data-price="1000000">+ 100만원</button>
											</div>
										</td>
									</tr>

									<tr>
										<td colspan="2">
											<div class="amount_wrap">
												<dl>
													<dt>최종 결제금액 :</dt>
													<dd>
														<ul>
															<li><strong id="supplyPriceStr">50,000</strong>원(공급가액)</li>
															<li><span class="plus"></span><strong id="vatPriceStr">5,000</strong>원(부가세)</li>
															<li class="total"><span class="equal"></span><strong class="c_e40000" id="lastPriceStr">55,000</strong>원(최종금액)</li>
														</ul>
													</dd>
												</dl>
												<button type="button" class="btn btnType fill primary btn_pay" onclick="pgOpenerPopup(); return false;">충전하기</button>
											</div>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>

					<!--누적결제액별 등급 및 단가 추가 시작-->
					<div class="accrue_price" id="grdShowArea" style="display: none;">
					</div>
					<div class="accrue_level" id="mberGrdSettingArea" style="display: none;">
						<p class="tType1_title level"><img src="/publish/images/level/accrue.png" alt="누적결제액별 등급 및 단가 아이콘"> 누적결제액별 등급 및 단가
						</p>
						<table class="tType2 tType2_level">
							<caption></caption>
							<colgroup>
								<col style="width: 13%;">
								<col style="width: auto;">
								<col style="width: 11%;">
								<col style="width: 11%;">
								<col style="width: 11%;">
								<col style="width: 11%;">
								<col style="width: 11%;">
							</colgroup>
							<thead>
								<tr>
									<th>등급</th>
									<th class="th_second">누적결제액<span id="levelSubTitle"></span></th>
									<th>단문</th>
									<th>장문</th>
									<th>그림(1장)</th>
									<th>그림(2장)</th>
									<th>그림(3장)</th>
								</tr>
							</thead>
							<tbody>
			    				<c:forEach var="result" items="${mberGrdSettingList}" varStatus="status">
								<tr>
									<th><c:out value="${result.grdSetNm}"/></th>
									<td class="level_price"><c:out value="${result.stdAmtComma}"/></td>
									<td><c:out value="${result.shortPrice}"/></td>
									<td><c:out value="${result.longPrice}"/></td>
									<td><c:out value="${result.picturePrice}"/></td>
									<td><c:out value="${result.picture2Price}"/></td>
									<td><c:out value="${result.picture3Price}"/></td>
								</tr>
								</c:forEach>																				
							</tbody>
						</table>
						<span class="reqTxt4">
							* 등급별 요금제는 당사의 정책 및 운영의 필요상 수정, 중단 또는 변경될 수 있습니다. <br>
							* 누적결제액은 등급별 요금제 적용일로부터 적립된 결제금액을 말하며, 누적결제액에 따라 등급은 자동으로 적용됩니다. <br>
							* "첫결제 이벤트" 등 이벤트 결제금액은 등급별 요금제 누적결제액에서 제외됩니다. <br>
						</span>
						<p class="reqTxt4 reqTxt4_last">
							* 문자피싱, 스미싱, 주식, 도박, 로또, 스팸, 사기, 협박, 범죄, 유사투자, 유사수신 등을 목적으로 하거나 교사 또는 방조하는 내용의 정보, 발신번호 조작
							등으로 인지되는 문자에 대해서는
							사전 또는 즉시 발송을 차단하고
							이용을 정지시킬 수 있으며, 이에 대한 어떠한 환불이나 보상을 실시하지 않습니다. 또한, 상기 문자를 발송한 회원에 대해서는 그 즉시 등급별 요금제 혜택을
							취소합니다.
						</p>
					</div>            
					<!--문자_등급별 요금 안내 추가 끝-->    


				</div><!-- 결제관리 - 결제하기 -->
            </div><!--// send top -->
        </div>
    </form>

<form name="infoPopForm" id="infoPopForm" method="post">
	<input type="hidden" name="pageType" id="pageType" value=""/> 
</form>


<!-- KG 모빌리언스 CARD -->
<form name="payCardForm" accept-charset="euc-kr">
<input type="hidden" name="CASH_GB">
<input type="hidden" name="CN_SVCID">
<input type="hidden" name="PAY_MODE">
<input type="hidden" name="VER">
<input type="hidden" name="Prdtprice">
<input type="hidden" name="Prdtnm">
<input type="hidden" name="Tradeid">
<input type="hidden" name="Siteurl">
<input type="hidden" name="Okurl">
<input type="hidden" name="Notiurl">
<input type="hidden" name="CALL_TYPE">
<input type="hidden" name="Failurl">
<input type="hidden" name="Userid">
<input type="hidden" name="Username">
<input type="hidden" name="MSTR">
<input type="hidden" name="Payeremail">
<input type="hidden" name="Cryptyn">
<input type="hidden" name="Cryptstring">
<input type="hidden" name="Closeurl">
<input type="hidden" name="CN_BILLTYPE">
<input type="hidden" name="CN_TAX">
<input type="hidden" name="CN_TAXFREE">
<input type="hidden" name="CN_FREEINTEREST">
<input type="hidden" name="CN_POINT">
<input type="hidden" name="Termregno">
<input type="hidden" name="APP_SCHEME">
<input type="hidden" name="CN_FIXCARDCD">
<input type="hidden" name="CN_DIRECT">
<input type="hidden" name="CN_INSTALL">
<input type="hidden" name="Deposit">
</form>

<!-- KG 모빌리언스 MOBILE -->
<form name="payMobileForm" accept-charset="euc-kr">
<input type="hidden" name="CASH_GB">
<input type="hidden" name="Okurl">
<input type="hidden" name="MC_SVCID">
<input type="hidden" name="Prdtnm">
<input type="hidden" name="Prdtprice">
<input type="hidden" name="Siteurl">
<input type="hidden" name="PAY_MODE">
<input type="hidden" name="Tradeid">
<input type="hidden" name="LOGO_YN">
<input type="hidden" name="CALL_TYPE">
<input type="hidden" name="MC_AUTHPAY">
<input type="hidden" name="Notiurl">
<input type="hidden" name="MC_AUTOPAY">
<input type="hidden" name="Closeurl">
<input type="hidden" name="MC_PARTPAY">
<input type="hidden" name="Failurl">
<input type="hidden" name="MC_No">
<input type="hidden" name="MC_FIXNO">
<input type="hidden" name="MC_Cpcode">
<input type="hidden" name="Userid">
<input type="hidden" name="Item">
<input type="hidden" name="Prdtcd">
<input type="hidden" name="Payeremail">
<input type="hidden" name="MC_DEFAULTCOMMID">
<input type="hidden" name="MC_FIXCOMMID">
<input type="hidden" name="MSTR">
<input type="hidden" name="Sellernm">
<input type="hidden" name="Sellertel">
<input type="hidden" name="Notiemail">
<input type="hidden" name="IFRAME_NAME">
<input type="hidden" name="INFOAREA_YN">
<input type="hidden" name="FOOTER_YN">
<input type="hidden" name="HEIGHT">
<input type="hidden" name="PRDT_HIDDEN">
<input type="hidden" name="EMAIL_HIDDEN">
<input type="hidden" name="CONTRACT_HIDDEN">
<input type="hidden" name="Cryptyn">
<input type="hidden" name="Cryptstring">
<input type="hidden" name="MC_EZ_YN">
<input type="hidden" name="MC_EZ_KEY">
<input type="hidden" name="MC_PUSH_KEY">
</form>

<!-- KG 모빌리언스 BANK -->
<form name="payBankForm" accept-charset="euc-kr">
<input type="hidden" name="CASH_GB">
<input type="hidden" name="Okurl">
<input type="hidden" name="RA_SVCID">
<input type="hidden" name="Prdtnm">
<input type="hidden" name="Prdtprice">
<input type="hidden" name="Siteurl">
<input type="hidden" name="PAY_MODE">
<input type="hidden" name="Tradeid">
<input type="hidden" name="LOGO_YN">
<input type="hidden" name="CALL_TYPE">
<input type="hidden" name="Notiurl">
<input type="hidden" name="Closeurl">
<input type="hidden" name="Failurl">
<input type="hidden" name="Userid">
<input type="hidden" name="Item">
<input type="hidden" name="Prdtcd">
<input type="hidden" name="Payeremail">
<input type="hidden" name="MSTR">
<input type="hidden" name="Notiemail">
<input type="hidden" name="IFRAME_NAME">
<input type="hidden" name="INFOAREA_YN">
<input type="hidden" name="FOOTER_YN">
<input type="hidden" name="HEIGHT">
<input type="hidden" name="PRDT_HIDDEN">
<input type="hidden" name="EMAIL_HIDDEN">
<input type="hidden" name="CONTRACT_HIDDEN">
<input type="hidden" name="Cryptyn">
<input type="hidden" name="Cryptstring">
<input type="hidden" name="Deposit">
<input type="hidden" name="Billyn">
</form>
