<!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  : PlanningEventMainFormWeb.html
 * @desc    : 이벤트 Page
 *============================================================================
 * Pastelmall
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.3.8  	 sowon     최초 작성
 *******************************************************************************
 -->
 <body>
<th:block layout:fragment="content">
<!--  container -->
	<div id="container" class="container ev">
		<div class="breadcrumb">
			<ul>
				<li class="bread_home"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li> 
				<li class="bread_2depth">이벤트/혜택</li>
			</ul>
		</div>
		<div class="wrap">
			<div class="content ev_list"> <!-- 페이지특정 클래스 = ev_list -->
				<div class="cont_head">
                    <h2 class="displayH t_c">이벤트/혜택</h2>
				</div>
				<div class="cont_body">
					<div class="ev_mem_rank">
						<div class="txt">
							<strong>STYLE24 BENEFIT</strong>
							<p>STYLE24 회원등급에 따라<br>제공되는 혜택 정보를 확인해 보세요.</p>
							<a href="javascript:void(0);" class="btn btn_dark" onclick="cfnGoToPage(_PAGE_CUSTOMER_GRADE_BENEFIT);">회원등급 혜택 보기</a>
						</div>
						<div class="mem_rank_list">
							<ul class="clear">
								<li>
									<div class="icon vip"><span>V</span></div>
									<span>VIP</span>
								</li>
								<li>
									<div class="icon gold"><span>G</span></div>
									<span>GOLD</span>
								</li>
								<li>
									<div class="icon silver"><span>S</span></div>
									<span>SILVER</span>
								</li>
								<li>
									<div class="icon bronze"><span>B</span></div>
									<span>BRONZE</span>
								</li>
								<li>
									<div class="icon welcome"><span>W</span></div>
									<span>WELCOME</span>
								</li>
							</ul>
						</div>
					</div>
					<div class="area_top_list_info">
						<div class="total_count" id="eventTotCnt">
							<span ></span>개의 이벤트
						</div>
						<div class="ui_right">
							<button class="btn btn_default" th:onclick="cfnGoToPage(_PAGE_NOTICE)"><span>당첨자 발표</span></button>
						</div>
					</div>
					<div class="area_thumb_list" id="divEventList" style="display:none;">
					
					</div>
						<!-- 등록된 이벤트가 없을 때 노출 -->
						<div class="nodata" id="divEventNoData" style="display:none;">
							<div class="txt_box">
								<p>
									등록된 이벤트가 없습니다.
								</p>
							</div>
							<div class="btn_box">
								<button class="btn btn_default" th:onclick="cfnGoToPage(_PAGE_MAIN);"><span>홈으로 가기</span></button>
							</div>
						</div>	
						<!-- //등록된 이벤트가 없을 때 노출 -->
			    </div>
		    </div>
        </div>	
	</div>
	<!-- // container -->	
	<!-- // container -->	

<script th:inline="javascript">
/*<![CDATA[*/
let fnGetEventList = function() {
	let actionUrl = '/planning/event/main/list';
	
	$.getJSON(actionUrl
		, function(result, status) {
			if (status == 'success') {
				if (result.length > 0) {
					$('#eventTotCnt').html('<span>' + result.length.addComma() + '</span>개의 이벤트');
					
					$("#divEventList").html('');
					let tag = '';
					tag += '<div  class="thumb_list">';
					tag += '	<ul>';
					$.each(result, function(idx, item) {
						tag += '		<li>';
						tag += '			<a onclick="cfnGoToPlanDetail(\'' + item.planSq + '\')">';
						if (item.newYn == 'Y') {
							tag += '				<div class="rank ranker"><span>NEW</span></div>\n';
						}
						tag += '				<div class="thumb">\n';
						tag += '					<img src="' + _uploadImageUrl + item.mainImg + '" alt="">\n';
						tag += '				</div>\n';
						tag += '				<div class="txt">\n';
						tag += '					<p class="title">'+item.planNm+'</p>\n';
						tag += '					<p class="date">\n';
						tag += '						<span>'+item.dispStdt+'</span> - <span>'+item.dispEddt+'</span>\n';
						tag += '					</p>\n';
						tag += '				</div>\n';
						tag += '			</a>\n';
						tag += '		</li>\n';
					});
					tag += '	</ul>\n	';
					tag += '</div>\n';
					
					$('#divEventList').html(tag);
					
					$('#divEventNoData').hide();
					$('#divEventList').show();
				} else {
					$('#eventTotCnt').html('<span>0</span>개의 이벤트');
					$('#divEventNoData').show();
					$('#divEventList').hide();
				}
			}
		});
}

$(document).ready(function() {
	fnGetEventList();
});
/*]]>*/
</script>

</th:block>

</body>
</html>