<html lang="ko"
	  xmlns:th="http://www.thymeleaf.org">
<!-- 다다익선 할인 상품 보기 -->
<div class="modal-dialog tmtbSalesPopup" role="document" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">
	<div class="modal-content"><div class="modal-header">
		<h5 class="modal-title" id="moresaleLabel">다다익선 상품</h5>
	</div>
		<div class="modal-body">
			<div class="pop_cont">
				<div class="area_benefit">
					<span class="tag primary">SALE</span>
					<p>
						<span th:each="desc, index : ${tmtbDcDescList}" th:text="${desc}"></span>
					</p>
				</div>
				<!-- -->
				<div class="area_slider">
					<div class="swiper-container swiper-container-initialized swiper-container-horizontal swiper-tmtb-container">
						<div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
							<div th:each="goods, status : ${goodsList}" class="swiper-slide swiper-slide-active" style="width: 150px; margin-right: 20px;">
								<div class="item_prod">
									<div class="item_state">
										<a th:href="|javascript:fnGoToGoodsDetail('${goods.goodsCd}')|" class="itemLink">
											<div class="itemPic">
												<img class="vLHTC pd_img" th:src="${imgGoodsUrl} + '/' + ${goods.sysImgNm} + '?RS=150'" src="/" width="100%" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"  th:alt="${goods.sysImgNm}" alt="">
											</div>
											<p class="itemBrand" th:text="${goods.brandGroupNm}"></p>
											<div class="itemName" th:text="${goods.goodsFullNm}"></div>
											<p class="itemPrice">
												<span th:text="${#numbers.formatInteger(goods.currPrice, 1, 'COMMA')}"></span>
												<th:block th:if="${goods.listPrice != goods.currPrice}">
													<span class="itemPrice_original" th:text="${#numbers.formatInteger(goods.listPrice, 1, 'COMMA')}"></span>
													<span class="itemPercent" th:text="${#numbers.formatInteger(goods.dcRate, 0, 'COMMA') + '%'}"></span>
												</th:block>
											</p>
										</a>
										<button type="button" class="btn btn_default btn_sm" th:onclick="fnAddCartTmtbSalesGoods([[${goods.goodsCd}]])"><span>쇼핑백 담기</span></button>
									</div>
								</div>
							</div>
						</div>
						<!-- Add Scrollbar -->
						<div class="swiper-scrollbar" th:if="${goodsList.size() > 5}" style="opacity: 0; transition-duration: 400ms;"><div class="swiper-scrollbar-drag" style="width: 514.104px; transform: translate3d(0px, 0px, 0px);"></div></div>
						<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
					</div>
				</div>
				<!-- -->
			</div>
		</div>

		<script>
			//팝업 - 다다익선 상품보기 > 슬라이드
			var moreSaleSwiper = new Swiper('#moresalePop .swiper-tmtb-container', {
				observer:true,
				observeParents: true,
				slidesPerView: 5,
				spaceBetween: 20,
				scrollbar: {
					el: '#moresalePop .swiper-scrollbar',
					hide: true,
				},
			});
		</script>
	</div>
</div>
<a href="#close-modal" rel="modal:close" id="moresalePop_close" class="close-modal">Close</a>

<script th:inline="javascript">
	$(document).ready(function() {
		var goodsListCnt = [[${goodsList.size()}]];
		if(goodsListCnt < 1) {
			mcxDialog.alert("다다익선 적용 가능한 다른 상품이 없습니다.");
			$("#moresalePop_close").trigger("click");
		} else {
			$("#moresalePop").modal("show");
		}
	});

	function fnAddCartTmtbSalesGoods(goodsCd) {
		let data = JSON.stringify({goodsCd : goodsCd});
		$.ajax( {
			type		: "POST",
			url 		: '/cart/tmtb/sales/goods/optcd',
			data		: data,
			dataType 	: 'json',
			beforeSend : function(xhr, settings) {
				xhr.setRequestHeader("AJAX"			, "true");
				xhr.setRequestHeader('Accept'		, 'application/json');
				xhr.setRequestHeader('Content-Type'	, 'application/json');
			},
			success 	: function(result) {
				let compsList = [];
				let temp 			= new Object;
				temp.goodsCd 		= goodsCd;
				temp.optCd 			= result.optCd;
				temp.goodsQty 		= 1;
				temp.goodsType 		= "G056_N";
				temp.cartGb 		= "C";
				temp.popupYn		= "Y";
				compsList.push(temp);

				cfnAddCart(compsList);
			}
		});
	};
</script>
</html>