<!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/MypageLayoutMob">
<!--
 *******************************************************************************
 * @source  : MypageCouponFormMob.html
 * @desc    : 마이페이지 > 쿠폰 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.15   sowon     최초 작성
 *******************************************************************************
 -->
<body>
	<th:block layout:fragment="content">
			<main role="" id="" class="container my">
			<section class="content my_coupon">
				<div class="inner">
					<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>
						</div>
					</div>
					<div class="have_amount">
						<dl>
							<div>
								<dt>7일 이내 소멸 예정<span class="tag primary_line">D-<em>7</em></span></dt>
								<dd><em th:text="${#numbers.formatInteger(couponInfo.expireCouponCnt,0,'COMMA')}"></em>장</dd>
							</div>
						</dl>
					</div>
				</div>

				<div class="inner">
					<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">
													[[${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" class="btn_underline" id="btn_cpinfo_pop" 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>
						<!-- 데이터 없을 시 -->	
					</div>
				</div>

			</section>
		</main>
		<!-- 쿠폰사용안내 팝업 -->
	<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>
	<!-- //쿠폰사용안내 팝업 -->
	
	<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() {
    	$('#htopTitle').text('쿠폰');
		if(couponList.length>0){
			$(".nodata").hide();
		}else{
			$(".nodata").show();
		}		
	});
	</script>
	</th:block>
</body>
</html>
