<!DOCTYPE html>
<html lang="ko"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="web/common/layout/DefaultLayoutWeb">

<!--
 *******************************************************************************
 * @source  : cartListFormWeb
 * @desc    : 장바구니
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.02.02   xodud1202   최초 작성
 *******************************************************************************
 -->
<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="//wcs.naver.net/wcslog.js"></script>
	<form id="nPayForm" name="nPayForm"></form>

	<!--  container -->
	<div id="container" class="container od">
		<div class="wrap">
			<div class="content shopping_bag"> <!-- 페이지특정 클래스 = shop_bag -->
				<div class="cont_head">
					<h2>쇼핑백</h2>
					<div class="oder_steps">
						<ul>
							<li class="on">01 쇼핑백</li>
							<li>02 주문/결제</li>
							<li>03 주문완료</li>
						</ul>
					</div>
				</div>
				<div class="cont_body">
					<div id="cartAjaxList" class="od_cont">
						<!-- 장바구니 내용 -->
					</div>
					<div class="od_side" style="display:none">
						<div class="area_order">
							<div class="tit_box">
								<h3>결제 정보</h3>
								<span><em class="number checkSelectCartListCnt"></em>개의 상품</span>
							</div>
							<div class="od_amount_box">
								<dl>
									<div>
										<dt>상품금액</dt>
										<dd><em class="sumListPrice"></em>원</dd>
									</div>
									<div>
										<dt>배송비</dt>
										<dd><em class="totDelvFee"></em> 원</dd>
									</div>
									<div>
										<dt>할인금액</dt>
										<dd><span class="disc_amount"><em class="totDcAmt" id="totDcAmt"></em> 원</span></dd>
									</div>
								</dl>
							</div>
							<div class="totalprice_box">
								<dl>
									<dt>총 결제 예정 금액</dt>
									<dd><span class="sumRealPayAmt" id="sumRealPayAmt"></span> 원</dd>
								</dl>
							</div>
							<div class="btn_box">
								<button class="btn btn_primary btn_block btn_md" onclick="fnSubmitNoMember('all'); return false;"><span>구매하기</span></button>
							</div>
						</div>
						<div class="area_salecoupon">
							<h4>할인코드 입력</h4>
							<div class="form_field">
								<div class="input_wrap form_full">
									<label class="input_label sr-only">할인코드입력</label>
									<input type="text" id="serialCpnNm" class="form_control" placeholder="할인코드를 입력해주세요.">
								</div>
								<button type="button" class="btn btn_dark btn_sm" onclick="serialCpnApply()"><span>적용</span></button>
							</div>
							<div class="coupon_box">
								<div class="coupon">
									<div>
										<p class="cp_name"></p>
										<p class="cp_cont">
											<!--<span><em>12,399,900</em>원</span>
											<span><em>40</em>%</span>-->
											<span class="cp_dc_val"></span>
										</p>
										<p class="cp_condition">
											<!--500,000원 이상 구매 시 최대 50,000원 할인
											<span><em class="tag primary_line">99장 보유</em></span>-->
										</p>
									</div>
									<p class="cp_date">
										<span class="availStdt"></span>&nbsp;~&nbsp;<span class="availEddt"></span>
									</p>
								</div>
								<button type="button" class="btn_underline" id="btn_cartCouponInfo_pop">
									<span>사용안내</span>
								</button>
							</div>
						</div>
						<th:block th:if="${sessionInfo != null and (sessionInfo.custId == 'xodud1202' or sessionInfo.custId == 'jsh77b' or sessionInfo.custId == 'card007')}">
							<div style="margin-top:35px;">
								<th:block th:with="buttonKey=${@environment.getProperty('naverPay.button.key')}">
									<script type="text/javascript" th:src="${@environment.getProperty('naverPay.button.pc.js.url')}" src="" charset="UTF-8"></script>
	
									<script th:inline="javascript">
										if(!wcs_add) var wcs_add = {};
										wcs_add["wa"] = "[[${@environment.getProperty('naverPay.common.certification.key')}]]";
										wcs.inflow("style24.com");
										wcs_do();
									</script>
	
									<script type="text/javascript">
										/*버튼설정*/
										naver.NaverPayButton.apply({
											BUTTON_KEY              : "[[${buttonKey}]]",       // 네이버페이에서 제공받은 버튼 인증 키 입력
											TYPE                    : "C",                      // 버튼 모음 종류 설정
											COLOR                   : 1,                        // 버튼 모음의 색 설정
											COUNT                   : 1,                        // 버튼 개수 설정. 구매하기 버튼만 있으면(장바구니 페이지) 1, 찜하기 버튼도 있으면(상품 상세 페이지) 2를 입력.
											ENABLE                  : "Y",                      // 품절 등의 이유로 버튼 모음을 비활성화할 때에는 "N" 입력
											BUY_BUTTON_HANDLER      : buy_nc,                   // 구매하기 버튼 이벤트 Handler 함수 등록, 품절인 경우 not_buy_nc 함수 사용
											"":""
										});
										
										/*네이버구매하기*/
										function buy_nc() {
											let cartSqArr = []
											$("#cartListForm input[name=cartSqArr]:checked").each(function() {
												cartSqArr.push($(this).val());
											});
											
											buy_nc_req(cartSqArr);
										}
										
										function buy_nc_req(cartSqArr) {
											let data = {  cartSqArr : cartSqArr
												, backUrl : location.href
												, goodsUrl : _PAGE_GOODS_DETAIL
											};
											let jsonData = JSON.stringify(data);
											
											$.ajax( {
												type		: "POST",
												url 		: "/pg/nPayReq",
												dataType 	: 'json',
												data		: jsonData,
												beforeSend : function(xhr, settings) {
													xhr.setRequestHeader("AJAX"			, "true");
													xhr.setRequestHeader('Accept'		, 'application/json');
													xhr.setRequestHeader('Content-Type'	, 'application/json');
												},
												error: function(xhr, status, error) {
													mcxDialog.alert(status + '; ' + error);
												},
												success : function(result) {
													if (result.state == "sucess") {
														enp('create', 'conversion', 'is24', { device: 'W', paySys: 'naverPay' });	// 모비온 네이버주문형 클릭시
														window.open('about:blank', 'popupView');
														document.nPayForm.target = 'popupView';
														document.nPayForm.action = result.npayOrderUrl + "/" + result.orderKey + "/" + result.resultNo;
														document.nPayForm.submit();
													} else {
														mcxDialog.alert(result.message);
													}
												}
											});
										}
										
										<!-- 구매불가 -->
										function not_buy_nc() {
											mcxDialog.alert("죄송합니다. 네이버페이로 구매가 불가한 상품입니다.");
											return false;
										}
										//]]>
									</script>
								</th:block>
							</div>
						</th:block>
					</div>
				</div>
			</div>

			<th:block th:if="${cartSize>0}">
				<div class="content od_recommend" style="display:none;">
					<div class="cont_head">
						<h4 class="subH1 t_c mb40">추천상품</h4>
					</div>
					<div class="cont_body">
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<th:block th:each="cart, status : ${recomGoodsList}">
									<div class="swiper-slide">
										<div class="item_prod">
											<div class="item_state">
												<button type="button" class="itemLike" onclick="cfnPutWishList(this);" th:attr="goodsCd=${cart.product.itemId}, goodsNm=${cart.product.itemName}, ithrCd='IN18_01', contentsLoc='', planDtlSq=''">관심상품 추가</button>
												<a th:href="${cart.product.itemUrl}" class="itemLink">
													<div class="itemPic">
														<img alt="BLACK-a" class=" vLHTC pd_img" th:src="${cart.product.itemImage}" src="">
													</div>
													<p class="itemBrand" th:text="${cart.product.brandName}"></p>
													<div class=" itemName" th:text="${cart.product.itemName}"></div>
													<p class="itemPrice">
														<span th:text="${#numbers.formatInteger(cart.product.salePrice, 1, 'COMMA')}"></span>
														<th:block th:if="${cart.product.salePrice < cart.product.originalPrice}">
															<span class="itemPrice_original" th:text="${#numbers.formatInteger(cart.product.originalPrice, 1, 'COMMA')}"></span>
															<span class="itemPercent" th:text="${#numbers.formatInteger(100 - ((cart.product.salePrice / cart.product.originalPrice) * 100), 1, 'COMMA') + '%'}"></span>
														</th:block>
													</p>
												</a>
											</div>
										</div>
									</div>
								</th:block>
							</div>
							<!-- Add Pagination -->
							<div class="swiper-pagination"></div>
						</div>
						<!-- Add Arrows -->
						<div class="swiper-button-next"></div>
						<div class="swiper-button-prev"></div>
					</div>
				</div>
			</th:block>

			<th:block th:if="${cartSize == null or cartSize == 0}">
				<div class="content od_recommend od_realtime" style="display:none;">
					<div class="cont_head">
						<h4 class="subH1 t_c mb40">지금 많이 보고 있어요</h4>
					</div>
					<div class="cont_body">
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<th:block th:each="cart, status : ${recomGoodsList}">
								<div class="swiper-slide">
									<div class="item_prod">
										<div class="item_state">
											<button type="button" class="itemLike" th:classappend="${cart.wishCnt > 0} ? 'likeit active'" onclick="cfnPutWishList(this);" th:attr="goodsCd=${cart.itemId}, goodsNm=${cart.itemName}, ithrCd='IN18_01', contentsLoc='', planDtlSq=''">관심상품 추가</button>
											<a th:href="${cart.itemUrl}" class="itemLink">
												<div class="itemPic">
													<img alt="BLACK-a" class=" vLHTC pd_img" th:src="${cart.imageUrl}" src="">
												</div>
												<p class="itemBrand" th:text="${cart.brandName}"></p>
												<div class=" itemName" th:text="${cart.itemName}"></div>
												<p class="itemPrice">
													<span th:text="${#numbers.formatInteger(cart.salePrice, 1, 'COMMA')}"></span>
													<th:block th:if="${cart.salePrice < cart.originalPrice}">
														<span class="itemPrice_original" th:text="${#numbers.formatInteger(cart.originalPrice, 1, 'COMMA')}"></span>
														<span class="itemPercent" th:text="${#numbers.formatInteger(100 - ((cart.salePrice / cart.originalPrice) * 100), 1, 'COMMA') + '%'}"></span>
													</th:block>
												</p>
												<div class="itemViewCount">
													<span th:text="${cart.count < 10 ? '10명 미만' : cart.count + '명 보는중'}"></span>
												</div>
											</a>
										</div>
									</div>
								</div>
								</th:block>
							</div>
							<!-- Add Pagination -->
							<div class="swiper-pagination"></div>
						</div>
						<!-- Add Arrows -->
						<div class="swiper-button-next"></div>
						<div class="swiper-button-prev"></div>
					</div>
				</div>
			</th:block>
		</div>
	</div>
	<!-- // container -->

	<!-- 장바구니 배송비 SAVE 상품보기 팝업 -->
	<div class="modal fade dlvrSave_pop" id="dlvrSavePop" tabindex="-1" role="dialog" aria-labelledby="dlvrSaveLabel" aria-hidden="true" style="display:none;"></div>

	<div class="modal fade moresale_pop" id="moresalePop" tabindex="-1" role="dialog" aria-labelledby="moresaleLabel" aria-hidden="true" style="display:none;"></div>

<script src="/ux/pc/js/swiper.min.js"></script>
<link rel="stylesheet" type="text/css" href="/ux/pc/css/swiper.min.css" />

<script th:inline="javascript">
    $(document).ready(function() {
        // 장바구니 상품 정보 select
        getCartList();

        // 장바구니 수량이 존재하는경우
		if("[[${cartSize}]]" != "" && [[${cartSize}]] > 0) {
			if(cfCheckLogin()) {
				// 장바구니 보유 상품 있을 경우 추천솔루션 > "추천 상품" 영역
				let targetT = $('#container .od_recommend').find('.item_state').find('button');
				targetT.each(function(){
					let goodsCd = $(this).attr('goodscd');
					var $this = $(this);
					let url = "/mypage/wish/list/check/"+goodsCd;
					var result = '';
					$.ajax({
						type: 'get'
						, async: false
						, url: url
						, success: function (data) {
							//likeit active
							if ("Y" == data){
								$this.addClass('likeit').addClass('active');
							}
						}
					});
				});
			}
		}
	});

	function getCartList(parameter) {
		// 장바구니 정보 조회
		$.ajax( {
			type: "POST",
			url : '/cart/goods/list',
			data : parameter,
			dataType : 'html',
			success : function(result) {
				if (result != null) {
					$("#cartListForm").remove();
					$("#cartAjaxList").html(result);
				}
			}
		});
	}

	//상품옵션변경 팝업 > 컬러선택 표기
	$(document).on('change','input[name=shotDelvUseYn]',function(e){
		let data = {shotDelvUseYn : $("input[name=shotDelvUseYn]:checked").val()};
		getCartList(data);
	});

	//팝업 - 쿠폰사용안내
	$(document).on('click','#btn_cartCouponInfo_pop',function(e){
		$(".cartCpnInfoModal").modal("show");
		return false;
	});
	$("#couponInfoPop_close").click(function() {
		$(".cartCpnInfoModal").modal("hide");
	});

	//팝업 - 다다익선 상품보기
	function fnGetTmtbSalesGoods(obj) {
		// 파라미터
		let tmtbSqList = new Array();
		let param = new Object();

		// 다다익선 정보
		let qtyTmtbSq = $(obj).parent().parent().parent().parent().parent().parent().find("input[name=qtyTmtbSq]").val();
		let amtTmtbSq = $(obj).parent().parent().parent().parent().parent().parent().find("input[name=amtTmtbSq]").val();
		let qtyTmtbYn = $(obj).parent().parent().parent().parent().parent().parent().find("input[name=applyQtySectionYn]").val();
		let amtTmtbYn = $(obj).parent().parent().parent().parent().parent().parent().find("input[name=applyAmtSectionYn]").val();
		let goodsCd = $(obj).parent().parent().parent().parent().parent().parent().find("input[name=goodsCd]").val();

		if(qtyTmtbYn == "N") {tmtbSqList.push(Number(qtyTmtbSq));}
		if(amtTmtbYn == "N") {tmtbSqList.push(Number(amtTmtbSq));}
		if(tmtbSqList.length < 1) {mcxDialog.alert("적용가능한 다다익선이 없습니다."); return false;}

		let tmtb = JSON.stringify({goodsCd : goodsCd, arrTmtbSq : tmtbSqList});

		$.ajax( {
			type		: "POST",
			url 		: '/cart/tmtb/sales/goods/list',
			data		: tmtb,
			dataType 	: 'html',
			beforeSend : function(xhr, settings) {
				xhr.setRequestHeader("AJAX"			, "true");
				xhr.setRequestHeader('Accept'		, 'application/json');
				xhr.setRequestHeader('Content-Type'	, 'application/json');
			},
			success 	: function(result) {
				$("#moresalePop").html(result);
			}
		});
	}
	$("#moresalePop_close").click(function() {
		$("#moresalePop").modal("hide");
	});

	//팝업 - 배송비 SAVE 상품보기
	function fnGetDelvFeeSaveGoods(delvFeeCd, delvFeeSaveGoodsAmt) {
		let param = new Object();
		param.delvFeeCd = delvFeeCd;
		param.delvFeeSaveGoodsAmt = delvFeeSaveGoodsAmt;

		gagajf.ajaxSubmit("/cart/delv/fee/save/goods/list", "html", "dlvrSavePop", param);
	};
	$("#dlvrSavePop_close").click(function() {
		$("#dlvrSavePop").modal("hide");
	});

	//수량조절 이벤트
	$(document).on('click','.optModify_pop .number_count .minus',function(e){
		var $input = $(this).parent().find('input');
		var count = parseInt($input.val()) - 1;
		var minOrdQty = $(this).parent().parent().find(".minOrdQty").val();

		count = count < minOrdQty ? minOrdQty : count;
		$input.val(count);
		$input.change();
		//수량1개 이하 감소버튼 비활성화
		if ($input.val() == minOrdQty) {
			$('.optModify_pop .number_count .minus').addClass('min_val');
		}

		$('.optModify_pop .number_count .plus').removeClass('min_val');

		return false;
	}).on('click','.optModify_pop .number_count .plus',function(e){
		var $input = $(this).parent().find('input');
		var count = parseInt($input.val()) + 1;
		var maxOrdQty = $(this).parent().parent().find(".maxOrdQty").val();

		count = count > maxOrdQty ? maxOrdQty : count;
		$input.val(count);
		$input.change();

		//주문 최대 수량 이상 증가버튼 비활성화
		if ($input.val() == maxOrdQty) {
			$('.optModify_pop .number_count .plus').addClass('min_val');
		}

		$('.optModify_pop .number_count .minus').removeClass('min_val');
		return false;
	}).on('keyup','.optModify_pop .number_count input[type=text]',function(e){
		$(this).val($(this).val().replace(/[^0-9]/g,""));
	});

    //상품옵션변경 팝업 > 컬러선택 표기
    $(document).on('click','.optModify_pop .opt_color ul li a',function(e){
        $(this).parents('.opt_color').find('li a').removeClass('on');
        $(this).addClass('on');
        var optColor = $(this).find("img").attr('alt');
        $(this).parent().parent().parent().find(".color").text(optColor);
        return false;
    });
</script>
<!--네이버페이 전환스크립트를 이용하여 전환값 설정-->
<script th:inline="javascript">
	var _nasa={};
	if (window.wcs) _nasa["cnv"] = wcs.cnv("3", [[${loginCustNo}]]);
</script>
<!--위 스크립트를 통해 설정된 전환값과 본 페이지의 로그를 서버에 전송-->
<script th:inline="javascript">
	if (!wcs_add) var wcs_add = {};
	wcs_add["wa"] = "[[${@environment.getProperty('naverPay.common.certification.key')}]]";
	if (!_nasa) var _nasa = {};
	if (window.wcs) {
		wcs.inflow("style24.com");
		wcs_do(_nasa); //서버로 로그 전송
	}
</script>
</th:block>
</body>
</html>