<!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  : OrderAddPaymentMob.html
 * @desc    : 추가결제화면 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.05.10   jsh77b     최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">

<!-- payment.js -->
<script type="text/javascript" th:src="${@environment.getProperty('pg.kcp.js.url')}" src=""></script>
<script type="text/javascript" src="/biz/payment.js"></script>
<script type="text/javascript" src="/ux/plugins/approval_key.js" charset='euc-kr'></script>

<!-- 주문정보form -->
<form id="order_info" name="order_info" method="post" action="/order/addPay/result/response" style="display:none"></form>
<!-- //주문정보form -->

<form class="form_wrap" name="addPayForm" id="addPayForm">
	<input type="hidden" name="refundAmt" 		th:value="${refundAmt}">
	<input type="hidden" name="ordNo" 			th:value="${ordNo}">
	<input type="hidden" name="addPayCost" 		th:value="${addPayCost}">
	<input type="hidden" name="ordChgSq" 		th:value="${ordChgSq}">
	
	<input type="hidden" name="chgGb" 			th:value="${chgGb}">
	<input type="hidden" name="chgerPhnno" 		th:value="${chgerPhnno}">
	<input type="hidden" name="chgerNm" 		th:value="${chgerNm}">
	<input type="hidden" name="goodsNm" 		th:value="${goodsNm}">

	<main class="container od">
		<section class="content od_extra">
			<form action="" class="form_wrap">
				<!-- 주문내역 -->
				<div class="inner wide">
					<div class="foldGroup">
						<ul>
							<li class="fold_order">
								<div class="fold_head">
									<a href="javascript:void(0)">
										<div>
											<div class="fold_tit">
												<span pan>교환/환불 상품</span>
											</div>
										</div>
									</a>
								</div>
								
								
								<div class="fold_cont" style="display: none;">
									<div class="od_item_box">
										<div class="part_goods">
											<th:block th:each="goods, i : ${orderAddPayGoodsList}" th:with="imageUrl=${@environment.getProperty('upload.goods.view')}">
												<div class="goods_section">
													<div class="goods_detail">
														<a href="">
															<div class="thumb_box">
																<img th:src="${imageUrl + '/' + goods.sysImgNm}" src="/" width="100%" alt="">
															</div>
															<div class="info_box">
																<div class="od_name">
																	<div class="brand">
																		<span th:text="${goods.brandGroupNm}"></span>
																	</div>
																	<div class="name" th:text="${goods.goodsNm}"></div>
																</div>
																<div class="od_opt">
																	<div class="option" th:each="colorNm, index : ${goods.colorNmArr}">
																		<em th:text="${colorNm}"></em><em th:text="${goods.optCd2Arr[index.index]}"></em>
																	</div>
																</div>
															</div>
														</a>
													</div>
													<div class="od_calc">
														<p class="count">수량 <em th:text="${goods.chgQty}"></em>개</p>
														<p class="price">
															<span class="selling_price"><em th:text="${#numbers.formatInteger((goods.currPrice + goods.optAddPrice) * goods.chgQty, 1, 'COMMA')}"></em>원</span>
														</p>
													</div>
												</div>
											</th:block>
										</div>
									</div>
									<div class="od_amount_box">
										<dl>
											<div>
												<dt>환불상품금액</dt>
												<dd th:text="|${#numbers.formatInteger(refundAmt, 1, 'COMMA')}원|"></dd>
											</div>
											<div>
												<dt>반품/교환배송비</dt>
												<dd th:text="|${#numbers.formatInteger(addPayCost, 1, 'COMMA')}원|"></dd>
											</div>
										</dl>
									</div>
									<div class="totalprice_box">
										<dl>
											<dt>총 결제 예정 금액</dt>
											<dd data-weight="price" data-font="lato"><span th:text="|${#numbers.formatInteger(addPayCost, 1, 'COMMA')}|"></span>원</dd>
										</dl>
									</div>
									<div class="announce_txt">
										<div class="announce_list">
											<ul>
												<li>환불할 상품금액이 반품/교환 배송비보다 적을 경우 배송비를 결제하신 후 남은 상품금액이 환불처리 됩니다.</li>
											</ul>
										</div>
									</div>
								</div>
								<!-- //주문고객정보 -->
							</li>
						</ul>
					</div>
				</div>
				<!-- //주문내역 -->
				
				<!-- 결제 정보 -->
				<div class="inner">
					<div class="tbl_wrap">
						<div class="tbl_tit"> 
							<h3>결제수단 선택</h3>
						</div>
						<div class="tbl tbl_radio">
							<table>
								<colgroup>
									<col width="*">
								</colgroup>   
								<tbody>
									<tr>
										<th class="sr-only">신용카드</th>
										<td>
											<div class="form_field">
												<input id="chk-1" type="radio" name="rdi-paynormal" value="KCP|G014_30" checked="checked">
												<label for="chk-1"><span>신용카드</span></label>
											</div>
										</td>
									</tr>
									<tr>
										<th class="sr-only">휴대폰결제</th>
										<td>
											<div class="form_field">
												<input id="chk-2" type="radio" name="rdi-paynormal" value="KCP|G014_60">
												<label for="chk-2"><span>휴대폰 결제</span></label>
											</div>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					
					<div class="area_paymentinfo">
						<!-- @자사만,무통장,실시간있으면 미노출 -->
						<!-- @입점이있으면  -->
						<!-- 입점업체가 있을때 노출 -->
						<th:block th:if="${delvCnt} > 0">
							<div class="paymentinfo">
								<div class="payinfo_blk_wrap">
									<a href="javascript:void(0);">구매조건 확인 및 결제대행 서비스 약관 동의<span>보기</span></a>
									<div class="payinfo_blk_parent">
										<div class="payinfo_blk">
											<a href="javascript:void(0);">개인정보 제공에 대한 동의<span>보기</span></a>
											<div class="infotxt">
												STYLE24는 다음과 같이 회원님의 개인정보를 제3자에게 제공합니다.
													<table class="paymentinfo agree2">
														<colgroup>
															<col width="30%">
															<col width="*">
														</colgroup>
														<tbody>
															<tr>
																<th>제공받는 자</th>
																<td>
																	<th:block th:each="delvFeeCd, i : ${delvFeeCdList}">
																		<th:block th:unless="${delvFeeCd.delvFeeCd} == 'WMS'">
																			<th:block th:if="${i.count == #lists.size(delvFeeCdList)}">
																				<th:block th:text="|${delvFeeCd.supplyCompNm}|"></th:block>
																			</th:block>
																			<th:block th:if="${i.count < #lists.size(delvFeeCdList)}">
																				<th:block th:text="|${delvFeeCd.supplyCompNm},|"></th:block>
																			</th:block>
																		</th:block>
																	</th:block>
																</td>
															</tr>
															<tr>
																<th>제공하는 항목</th>
																<td>성명, 주소, 연락처</td>
															</tr>
															<tr>
																<th>제공 목적</th>
																<td>주문상품의 배송, 고객상담 및 불만처리</td>
															</tr>
															<tr>
																<th>보유 및 이용기간</th>
																<td>이용목적 달성 시 까지</td>
															</tr>
														</tbody>
													</table>
											</div>
										</div>
									</div>
								</div>
							</div>
						</th:block>
						
						<div class="agree_payment">
							위 주문내역을 확인 하였으며, 회원 본인은 결제에 동의합니다. (전자상거래법 제 8조 제2항)
						</div>
					</div>
					
				</div>
	
				<!-- //결제 정보 -->
				<div class="inner wide">
					<div class="area_paybtn">
						<div class="btn_group btn_group_flex">
							<div>
								<button type="button" class="btn btn_primary" id="btn_payment">동의 후 <span class="total_price" th:text="|${#numbers.formatInteger(addPayCost, 1, 'COMMA')}|"></span>원 결제하기</button>
							</div>
						</div>
					</div>
				</div>
			</form>
		</section>
	</main>
</form>

<script th:inline="javascript">
//결제하기
$("#btn_payment").on("click", function(){
	var paynormal			= $("input[name='rdi-paynormal']:checked").val();
	var paynormalArr		= paynormal.split("|");
	var pgGb				= paynormalArr[0];
	var payMeans			= paynormalArr[1];
	console.log(paynormal);
	// 주문데이타 생성
	var orderData = {
		"pgGb"					: pgGb
		,"payMeans"				: payMeans // 네이버페이, 카카오페이
		,"ordNo"				: $("#addPayForm input[name=ordNo]").val()
		,"addPayCost"			: $("#addPayForm input[name=addPayCost]").val()
		,"ordChgSq"				: $("#addPayForm input[name=ordChgSq]").val()
		,"chgGb"				: $("#addPayForm input[name=chgGb]").val()
		,"chgerPhnno"			: $("#addPayForm input[name=chgerPhnno]").val()
		,"chgerNm"				: $("#addPayForm input[name=chgerNm]").val()
		,"goodsNm"				: $("#addPayForm input[name=goodsNm]").val()
	};
	
	$.ajax( {
		type		: "POST",
		url 		: '/order/addPayment',
		data		: JSON.stringify(orderData),
		dataType 	: 'html',
		beforeSend : function(xhr, settings) {
			xhr.setRequestHeader("AJAX"			, "true");
			xhr.setRequestHeader('Accept'		, 'application/json');
			xhr.setRequestHeader('Content-Type'	, 'application/json');
		},
		success 	: function(result) {
			// 결재정보로드
			$("#order_info").html(result);
			
			var pgGb = $("#order_info input[name=pgGb]").val();
			
			if (pgGb == "NAVER") {
				fnNaverPaymentReady();
			} else if (pgGb == "KAKAO") {
				fnKakaoPaymentReady();
			} else if (pgGb == "KCP" || pgGb == "PAYCO") {
				// 2021.06.02 태팔요청
				var protocol = location.protocol;
				$("#order_info input[name=Ret_URL]").val(protocol + _frontUrl + "/order/addPay/result/response");
				kcp_AJAX();
			}
		}
	});
});
</script>
<script type="text/javascript">

//구매조건 확인 및 결제대행 서비스 약관 동의 클릭시
$(document).on('click','.area_paymentinfo .payinfo_blk_wrap a',function(e){
	e.preventDefault();
	//$(this).parent('.payinfo_blk_wrap').toggleClass('on');
	$(this).siblings('.payinfo_blk_parent').toggle();
	$(this).parents('.payinfo_blk').siblings('.payinfo_blk').removeClass('on'); //210428_수정 : 아코디언 추가.
	var privacyToggle = $(this).find('span');
	$(privacyToggle).text($(privacyToggle).text() == '보기' ? '닫기' : '보기');
	return false;
});

//개인정보동의 열고닫기
$(document).on('click','.area_paymentinfo .payinfo_blk a',function(e){
	e.preventDefault();
	$(this).parents('.payinfo_blk').toggleClass('on');
	var privacyToggle = $(this).find('span');
	$(privacyToggle).text($(privacyToggle).text() == '보기' ? '닫기' : '보기');
	return false;
});

$(document).ready( function() {
	// 1. 타이틀설정
	$("#htopTitle").text("추가결제");
	
	//TabWrap, TabIndex
	$(document).on('click', '.tabIndex li a', function() {
		var $this = $(this),
		$tabList = $this.parents('ul'),
		_idx = $this.closest('li').index();
	
		$tabList.children().eq(_idx).addClass('active').siblings().removeClass('active');
		$tabList.next().children().eq(_idx).addClass('active').siblings().removeClass('active');
	});
});
</script>
</th:block>
</body>
</html>
