<!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/MypageLayoutWeb">
<!--
 *******************************************************************************
 * @source  : MypagePointForm.html
 * @desc    : 마이페이지 > 쿠폰 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.03.16   sowon     최초 작성
 *******************************************************************************
 -->
<body>
	<th:block layout:fragment="content">
		<!--  container -->
		<!-- CONT-BODY -->
		<div class="content myCoupon">
			<!-- 페이지특정 클래스 = myCoupon -->
			<div class="cont_body">
				<div class="lnb">
					<div class="lnb_tit">
					<h2>마이페이지</h2>
					</div>
					<div class="lnb_list">
						<ul id="mypageLnbList"></ul>
					</div>
				</div>
				<div class="cont my_cont">
					<div class="sec_head">
						<h3 class="subH1">쿠폰</h3>
					</div>
					<div class="sec_body">
						<div class="highlight_area">
							<div class="have_amount">
								<div class="total_amount">
									나의 보유 쿠폰&nbsp;<span><em
										th:text="${#numbers.formatInteger(couponInfo.allCouponCnt,0,'COMMA')}"></em>장</span>
								</div>
								<dl>
									<div>
										<dt>
											<span class="tag primary_line">D-<em>7</em></span>7일 이내 소멸 예정
										</dt>
										<dd>
											<em
												th:text="${#numbers.formatInteger(couponInfo.expireCouponCnt,0,'COMMA')}"></em>장
										</dd>
									</div>
								</dl>
							</div>
						</div>
						<div class="content_area">
							<!-- 데이터 있을 시 -->
							<div class="list_box">
								<div class="coupon_list">
									<ul>
										<th:block th:if="${couponList != null and !couponList.empty}"
											th:each="CouponData, CouponStat : ${couponList}">
											<li>
												<!-- 쿠폰사용 기한 -->
												<div
													th:class="${CouponData.expireYn == 'N' ? 'coupon' : 'coupon disable'}">
													<div>
														<p class="cp_name" th:text="${CouponData.cpnNm}"></p>
														<p class="cp_cont">
															<th:block th:if="${CouponData.dcWay == '%'}">
																<span><em th:text="${CouponData.dcVal}"></em>%</span>
															</th:block>
															<th:block th:unless="${CouponData.dcWay == '%'}">
																<span><em
																	th:text="${#numbers.formatInteger(CouponData.dcVal,0,'COMMA')}"></em>원</span>
															</th:block>

														</p>
														<p class="cp_condition">
															<!-- [[${#numbers.formatInteger(CouponData.buyLimitAmt,0,'COMMA')}]]원
															이상 구매 시 최대
															[[${#numbers.formatInteger(CouponData.maxDcAmt,0,'COMMA')}]]원
															할인  -->
															[[${CouponData.useCondition}]]
															<span><em class="tag primary_line"
																th:text="${CouponData.cpnCnt}+' 장 보유'"></em></span>
														</p>
													</div>
													<th:block th:if="${CouponData.expireYn == 'N'}">
														<p class="cp_date">
															<span th:text="${CouponData.availStdt}"></span>&nbsp;~&nbsp;<span
																th:text="${CouponData.availEddt}"></span>
														</p>
													</th:block>
													<th:block th:unless="${CouponData.expireYn == 'N'}">
														<p class="cp_date">사용완료</p>
													</th:block>

												</div> <!-- 쿠폰사용 기한-->
												<button type="button" id="btn_couponInfo_pop" class="btn_underline"	th:onclick="useInfoCoupon([[${CouponData.cpnId}]])">
													<span>사용안내</span>
												</button>
											</li>
									</ul>
								</div>
							</div>
							<!-- //데이터 있을 시 -->
							<!-- 데이터 없을 시 -->
							<div class="nodata" style="display: none;">
								<div class="txt_box">
									<p>
										보유한 쿠폰이 없습니다.<br>
									</p>
								</div>
								<!-- 버튼 필요시 -->
								<!-- <div class="btn_box">
										<button class="btn btn_default"><span>행동하기</span></button>
									</div> -->
								<!-- //버튼 필요시 -->
							</div>
							<!-- 데이터 없을 시 -->
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- // CONT-BODY -->
		<!-- 쿠폰 사용 내역 팝업 -->
		<div class="modal fade couponInfo_pop" id="couponInfoPop" tabindex="-1" role="dialog" aria-labelledby="couponInfoLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
                <!-- 쿠폰사용안내 팝업 내용 -->      
			</div>
		</div>
		<a href="#close-modal" rel="modal:close" id="couponInfoPop_close" class="close-modal">Close</a>
		</div>

		<!-- // container -->
		<script th:inline="javascript">

let couponList = ([[${couponList}]]);	

// 사용안내 모달
var useInfoCoupon = function (id) {
	var data = {cpnId : id};
	var jsonData = JSON.stringify(data);
	
	 $.ajax( {
		type		: "POST",
		url 		: '/mypage/coupon/detailPop',
		data		: jsonData,
		contentType: 'application/json',
		dataType 	: 'html',
		success 	: function(result) {
			if (result != null) {
				$("#couponInfoPop").html(result);
				$("#couponInfoPop").modal("show");
			}
		}
	});
	
	return false; 
}

if(couponList.length>0){
	$(".nodata").hide();
}else{
	$(".nodata").show();
}




$(document).ready(function() {
	
	if(couponList.length>0){
		$(".nodata").hide();
	}else{
		$(".nodata").show();
	}
	
	// 마이페이지 LNB 설정
	fnSetMypageLnbList(4);
	
	// 마이페이지 location 설정
	fnSetMypageLocation('쿠폰', '_PAGE_MYPAGE_COUPON');
	

});
</script>
	</th:block>

</body>
</html>
