<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>등급제 관리</title>
	
	<script type="text/javascript">
	//숫자 천단위 콤마 찍어주기
	function numberWithCommas(x) { 
		return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
	}
	
	// 등급제 설정변경
	function setMberGrdSettingEdit() {
		
		if ($("input[name='grdNoti']:checked").val() == "") {
			alert("등급제 적용 온/오프를 선택해주세요.");
			return false;			
		}
		
		// 누적결제 적용일자
		if ($("#ntceBgndeYYYMMDD").val() == "") {
			alert("누적결제 적용일자를 선택해주세요.");
			return false;
		}		
		
		if(confirm("저장 하시겠습니까?")) {
			$("#grdDate").val($("#ntceBgndeYYYMMDD").val());
			
			$.ajax({
		        type: "POST",
		        url: "/sym/grd/mberGrdSettingUpdateAjax.do",
		        data: $("#listForm").serialize(),
		        dataType:'json',
		        async: false,
		        success: function (data) {
					if (data.isSuccess) { 
						location.reload();
					} 
					else {
						alert("Msg : " + data.msg);
					}
				},
		        error: function (e) { 
		        	alert("ERROR : " + JSON.stringify(e)); 
		        }
		    });	
				
		}
	}		
	
	// 등급제 일괄변경
	function setMberGrdSettingMassEdit() {
		
		if ($("input[name='grdNoti']:checked").val() == "") {
			alert("등급제 적용 온/오프를 선택해주세요.");
			return false;			
		}
		
		// 누적결제 적용일자
		if ($("#ntceBgndeYYYMMDD").val() == "") {
			alert("누적결제 적용일자를 선택해주세요.");
			return false;
		}		
		
		if(confirm("수정사항 저장 시 모든 고객의 단가가 변경될 수 있습니다.\n수정하시겠습니까?")) {
			$("#grdDate").val($("#ntceBgndeYYYMMDD").val());
			
			// 콤마 제거
			$('input[name=stdAmts]').each(function(index,item){
				$(this).val($(this).val().replace(/,/gi, ""));
			});
			
			$.ajax({
		        type: "POST",
		        url: "/sym/grd/mberGrdSettingMassUpdateAjax.do",
		        data: $("#listForm").serialize(),
		        dataType:'json',
		        async: false,
		        success: function (data) {
					if (data.isSuccess) { 
						alert(numberWithCommas(data.updateMberCnt) + "명 등급 업데이트 완료했습니다.");
						location.reload();
					} 
					else {
						alert("Msg : " + data.msg);
					}
				},
		        error: function (e) { 
		        	alert("ERROR : " + JSON.stringify(e)); 
		        }
		    });	
				
		}
	}	
	
	// 회원별 등급 초기화
	function setMberGrdResetMassEdit() {
		if(confirm("모든 고객 등급을 초기화하시겠습니까?")) {
			$.ajax({
		        type: "POST",
		        url: "/sym/grd/mberGrdResetMassUpdateAjax.do",
		        data: {},
		        dataType:'json',
		        async: false,
		        success: function (data) {
					if (data.isSuccess) { 
						alert(numberWithCommas(data.updateMberCnt) + "명 업데이트 완료했습니다.");
						location.reload();
					} 
					else {
						alert("Msg : " + data.msg);
					}
				},
		        error: function (e) { 
		        	alert("ERROR : " + JSON.stringify(e)); 
		        }
		    });				
		}
	}		
	
	// 오늘날짜 Get
	function getToday() {
		// new Date를 통해서 날짜 객체를 생성. 여기서 년, 월, 일 정보만 필요.
		 const nowDate = new Date();

		var year = nowDate.getFullYear(); // 년
		var month = ('0' + (nowDate.getMonth() + 1)).slice(-2); // 월
		var day = ('0' + nowDate.getDate()).slice(-2); // 일

		// yyyy-mm-dd 형식으로 todate에 담기.
		var todate = year + '-' + month + '-' + day;
		
		return todate;
	}
	
	// 오늘날짜 Set
	function setToday() {
		var toDay = getToday();
		
		$('#ntceBgndeYYYMMDD').val(toDay);
	}
	
	</script>
</head>
<body>
	<div class="contWrap">
		<div class="pageTitle">
			<div class="pageIcon"><img src="/pb/img/pageTitIcon4.png" alt=""></div>
			<h2 class="titType1 c_222222 fwBold">등급제 관리</h2>
			<p class="tType6 c_999999">등급제 관리 페이지 입니다.</p>
		</div>
		<div class="pageCont">
			<form id="listForm" name="listForm" method="post">
			<input type="hidden" name="grdDate" id="grdDate" />
			
			<div class="tableWrap">
				<table class="tbType2">
					<colgroup>
						<col width="20%">
						<col width="30%">
						<col width="20%">
						<col width="*">
					</colgroup>
					<tbody>
						<tr>
							<th>등급제 적용</th>
							<td colspan="3">
							<input type="radio" name="grdNoti" id="grdNoti1" value="Y" <c:if test="${grdNoti eq 'Y'}">checked="checked"</c:if> /> ON
							&nbsp;&nbsp;&nbsp;
							<input type="radio" name="grdNoti" id="grdNoti2" value="N" <c:if test="${grdNoti eq 'N'}">checked="checked"</c:if> /> OFF
							</td>
							
						</tr>					
						<tr>
							<th>누적결제 시작일자</th>
							<td>
								<input type="hidden" name="cal_url" id="cal_url" value="/sym/cmm/EgovNormalCalPopup.do">
							    <a href="#" onclick="javascript:fn_egov_NormalCalendar(document.forms.listForm, document.forms.listForm.ntceBgndeYYYMMDD);">
			
							    <input style="width:auto;min-width: 100px;" type="text" class="date_format" name="ntceBgndeYYYMMDD" id="ntceBgndeYYYMMDD" size="4" maxlength="4" readonly=""
							    value="<c:out value="${grdDate}" />" >
							   	 	<input type="button" class="calBtn">
						    	</a>
						    	
						    	&nbsp;&nbsp;&nbsp;
						    	<input type="button" style="cursor: pointer; height: 33px;" onclick="setToday();" value="오늘">
							</td>
							<th>누적결제 계산기간</th>
							<td>
								<input type="text" name="grdPeriod" value="<c:out value="${grdPeriod}" />" style="height: 20px; width: 150px; padding: 5px 5px 5px 5px;" />
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			
			<br />
			<div class="btnWrap">
				<input type="button" class="btnType1" value="저장" onclick="javascript:setMberGrdSettingEdit(); return false;">
			</div>
			
			<br /><br /><br />
						
			<div class="tableWrap">
				<table class="tbType1">
					<colgroup>
						<col width="10%">
						<col width="*">
						<col width="13%">
						<col width="13%">
						<col width="13%">
						<col width="13%">
						<col width="13%">
					</colgroup>
					<thead>
						<tr>
							<th>등급</th>
							<th>누적결제액</th>
							<th>단문</th>
							<th>장문</th>
							<th>그림(1장)</th>
							<th>그림(2장)</th>
							<th>그림(3장)</th>
						</tr>
					</thead>					
					<tbody>
    				<c:forEach var="result" items="${mberGrdSettingList}" varStatus="status">
    					<input type="hidden" name="grdSetNos" value="${result.grdSetNo}"/>
						<tr>
							<td><c:out value="${result.grdSetNm}"/></td>
							<td><input type="text" name="stdAmts" value="<c:out value="${result.stdAmtComma}"/>" style="height: 20px; width: 150px; padding: 5px 5px 5px 5px;" /></td>
							<td><input type="text" name="shortPrices" value="<c:out value="${result.shortPrice}"/>" style="height: 20px; width: 100px; padding: 5px 5px 5px 5px;" /></td>
							<td><input type="text" name="longPrices" value="<c:out value="${result.longPrice}"/>" style="height: 20px; width: 100px; padding: 5px 5px 5px 5px;" /></td>
							<td><input type="text" name="picturePrices" value="<c:out value="${result.picturePrice}"/>" style="height: 20px; width: 100px; padding: 5px 5px 5px 5px;" /></td>
							<td><input type="text" name="picture2Prices" value="<c:out value="${result.picture2Price}"/>" style="height: 20px; width: 100px; padding: 5px 5px 5px 5px;" /></td>
							<td><input type="text" name="picture3Prices" value="<c:out value="${result.picture3Price}"/>" style="height: 20px; width: 100px; padding: 5px 5px 5px 5px;" /></td>
						</tr>
					</c:forEach>					
					</tbody>
				</table>
			</div>
			</form>
			
			<br />
			<div class="btnWrap">
				<input type="button" class="btnType2" value="모든 고객 등급 초기화" onclick="javascript:setMberGrdResetMassEdit(); return false;">
				<%--<input type="button" class="btnType1" value="취소" onclick="javascript:location.reload(); return false;">--%>
				<input type="button" class="btnType1" value="저장" onclick="javascript:setMberGrdSettingMassEdit(); return false;">
			</div>
		</div>
	</div>
</body>
</html>