<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : CardInterestPopupForm.html
 * @desc    : 카드무이자할부 팝업 화면
 *============================================================================
 * STYLE24
 * Copyright(C) 2019 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.02.01   eskim       최초 작성
 *******************************************************************************
 -->	
	<div class="modalPopup" data-width="1000"> <!-- data-width="850"  -->
		<div class="panelStyle">
			<div class="panelTitle">
				<h2>프로모션<th:block th:text="${cardPrmtSq > 0 }?'상세':'등록'"></th:block> </h2>
				<button type="button" class="close" onclick="uifnPopupClose('popupCardInterest')"><i class="fa fa-times"></i></button>
			</div>
			<form id="cardInterestForm" name="cardInterestForm" >
			<input type="hidden" name="prmtGb"  value="B"/> <!-- 무이자 -->
			<input type="hidden" name="delCardPrmtCdtSq" /> <!-- 삭제할 프로모션조건 -->
			
			<div class="panelContent">
				<table class="frmStyle">
					<colgroup>
						<col style="width:10%;"/>
						<col style="width:50%;"/>
						<col style="width:10%;"/>
						<col/>
					</colgroup>
					<tr>
						<th>프로모션명<em class="required" title="필수"></em></th>
						<td><input type="text" class="w500" id="prmtNm" name="prmtNm"  maxlength="30" required="required" data-valid-name="프로모션명"  th:value="${cardPrmt.prmtNm}"/></td>
						<th>프로모션ID</th>
						<td><input type="text" class="w100 formControl" id="cardPrmtSq" name="cardPrmtSq"  readonly th:value="${cardPrmt.cardPrmtSq}"/></td>
					</tr>
					<tr>
						<th>행사기간<em class="required" title="필수"></em></th>
						<td >
							<input name="prmtStd" id="prmtStd" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="행사시작일" th:value="${cardPrmt.prmtStd}"/>
							~
							<input name="prmtEdd" id="prmtEdd" type="text" class="w80 schDate" maxlength="10" required="required" data-valid-name="행사종료일" th:value="${cardPrmt.prmtEdd}"/>
						</td>
						<th>노출여부<em class="required" title="필수"></em></th>
						<td >
							<label class="rdoBtn"><input type="radio" name="dispYn" value="Y" th:checked="${cardPrmt.dispYn =='Y' or #strings.isEmpty(cardPrmt.dispYn)}"/>Y</label>
							<label class="rdoBtn"><input type="radio" name="dispYn" value="N" th:checked="${cardPrmt.dispYn =='N'}"/>N</label>
							<input type="hidden" id="dispYnOrg" name="dispYnOrg" th:value="${cardPrmt.dispYn}"/>
						</td>
					</tr>
					<tr>
						<th>행사조건<em class="required" title="필수"></em><br/>
							<button type="button" class="btn btn-base btn-sm" id="btnCardContionAdd"><i class="fa fa-plus"></i></button>
						</th>
						<td colspan="3" >
							<div  style="overflow-y:scroll; height:230px;">
							<table  class="frmStyle">
								<colgroup>
									<col style="width:7%;"/>
									<col/>
								</colgroup>
								<tbody id="cardContionList">
								
								<tr th:if="${#lists.isEmpty(cardPrmt.cardPrmtCdtList)}" >
									<td style="height:100px;"></td>
									<td><p>무이자개월 <input type="text" class="w100 aR"  name="arrMinNoItrt" data-valid-type="numeric" required="required" data-valid-name="무이자개월" maxlength="3" />개월 ~
										<input type="text" class="w100 aR"  name="arrMaxNoItrt" data-valid-type="numeric" required="required" data-valid-name="무이자개월"  maxlength="3" />개월</p>
										<p>구매금액기준 <input type="text" class="w100 aR"  name="arrMinPayAmt" data-valid-type="numeric" required="required" data-valid-name="구매금액기준"  maxlength="10" />원 이상 구매시</p>
										<p>대상카드 <button type="button" class="btn btn-base btn-sm" onClick="fnCardAdd(1);">선택</button><br/>
										<span id="arrCardNm1" class="cRed"></span></p>
										<input type="hidden" name="arrCardCd"/>
										<input type="hidden" name="cardPrmtCdtSq" />
										<input type="hidden" name="cardIdx" id="cardIdx"/>
									</td>
								</tr>
								<tr th:if="${cardPrmt.cardPrmtCdtList}" th:each="cardPrmtCdt, sizeStatus : ${cardPrmt.cardPrmtCdtList}">
									<td style="height:100px;" th:if="${sizeStatus.first}"></td>
									<td style="height:100px;" th:unless="${sizeStatus.first}"><button type="button" class="btn icn"><i class="fa fa-times" aria-hidden="true" th:onclick="fnDeleteCardPrmtCdt([[${cardPrmtCdt.cardPrmtCdtSq}]]);$(this).parent().parent().parent().remove();return false;"></i></button></td>
									<td>
										<p>무이자개월 <input type="text" class="w100 aR"  name="arrMinNoItrt" data-valid-type="numeric" required="required" data-valid-name="무이자개월" th:value="${cardPrmtCdt.minNoItrt}"  maxlength="3" />개월 ~
										<input type="text" class="w100 aR"  name="arrMaxNoItrt" data-valid-type="numeric" required="required" data-valid-name="무이자개월" th:value="${cardPrmtCdt.maxNoItrt}" maxlength="3" />개월</p>
										<p>구매금액기준 <input type="text" class="w100 aR"  name="arrMinPayAmt" data-valid-type="numeric" required="required" data-valid-name="구매금액기준" th:value="${cardPrmtCdt.minPayAmt}"  maxlength="10"/>원 이상 구매시</p>
										<p>대상카드 <button type="button" class="btn btn-base btn-sm" th:onClick="fnCardAdd([[${sizeStatus.count}]]);">선택</button><br/>
										<span th:id="${'arrCardNm'+ sizeStatus.count}" class="cRed"  th:text="${cardPrmtCdt.arrCardNm}"></span>
										</p>
										<input type="hidden" name="arrCardCd" th:value="${cardPrmtCdt.arrCardCd}"/>
										<input type="hidden" name="cardPrmtCdtSq" th:value="${cardPrmtCdt.cardPrmtCdtSq}"/>
										<input type="hidden" name="cardIdx" id="cardIdx" th:if="${sizeStatus.first}"/>
									</td>
								</tr>
								</tbody>
							</table>
							</div>
						</td>
					</tr>
					<tr>
						<th>부분무이자안내</th>
						<td  colspan="3">
						<textarea class="textareaR2" name="note" id="note" th:field="${cardPrmt.note}"></textarea>
						</td>
					</tr>
				</table>
			</div>
			<ul class="panelBar">
				<li class="left">
					<button type="button" class="btn btn-danger btn-lg" id="btnCardInterestDelete" th:if="${cardPrmtSq}">삭제</button>
				</li>	
				<li class="right">
					<button type="button" class="btnRight btn btn-success btn-lg" id="btnCardInterestSave">적용</button>
				</li>
			</ul>
			</form>	
		</div>
	</div>
<script type="text/javascript" src="/ux/plugins/summernote/summernote.js?v=2020103001"></script>
<script type="text/javascript" src="/ux/plugins/gaga/gaga.summernote.js?v=2021053101"></script>	
<script th:inline="javascript">
/*<![CDATA[*/
	
	//카드행사조건 추가
	$('#btnCardContionAdd').on('click', function() {
		var len =  $('#cardInterestForm').find('#cardContionList tr').length;
		
		if(len >= 3) {
			mcxDialog.alert("최대 3개까지 가능합니다.");
			return false;
		}
		
		var cardHtml = "";
		cardHtml +='<tr>';
		cardHtml +='	<td style="height:100px;"><button type="button" class="btn icn"><i class="fa fa-times" aria-hidden="true" onclick="$(this).parent().parent().parent().remove();return false;"></i></button></td>';
		cardHtml +='	<td><p>무이자개월 <input type="text" class="w100 aR"  name="arrMinNoItrt" data-valid-type="numeric" required="required" data-valid-name="무이자개월" maxlength="3" />개월 ~';
		cardHtml +='	<input type="text" class="w100 aR"  name="arrMaxNoItrt" data-valid-type="numeric" required="required" data-valid-name="무이자개월" maxlength="3" />개월</p>';
		cardHtml +='	<p>구매금액기준 <input type="text" class="w100 aR"  name="arrMinPayAmt" data-valid-type="numeric" required="required" data-valid-name="구매금액기준"  maxlength="10"/>원 이상 구매시</p>';
		cardHtml +='	<p>대상카드 <button type="button" class="btn btn-base btn-sm" onClick="fnCardAdd('+ (len+1) +');">선택</button><br/><span id="arrCardNm'+(len+1)+'" class="cRed"></span></p>';
		cardHtml +='	<input type="hidden" name="arrCardCd"/>';
		cardHtml +='	<input type="hidden" name="cardPrmtCdtSq" />';
		cardHtml +='	</td>';
		cardHtml +='</tr>';
		
		$('#cardInterestForm').find('#cardContionList').append(cardHtml);
		
	});
	
	//카드조회팝업
	var fnCardAdd = function(idx){
		$('#cardInterestForm').find('#cardIdx').val(idx);
		var arrCardCd = $('#cardInterestForm').find("input[name=arrCardCd]").eq(idx-1).val();
		cfnOpenCardListPopup('fnCardAddCallBakup', arrCardCd);	// /로 구분
	}
	
	// 카드추가/삭제
	var fnCardAddCallBakup = function(arrCardCd, arrCardNm) {
		var index = $('#cardInterestForm').find('#cardIdx').val();
		$('#cardInterestForm').find("#arrCardNm" + (index)).html(arrCardNm);
		$('#cardInterestForm input[name=arrCardCd]').eq(index-1).val(arrCardCd);
	}
	
	// 카드프로모션 조건 삭제항목 설정
	var fnDeleteCardPrmtCdt = function(cardPrmtCdtSq){
		var delCardPrmtCdtSq = $('#cardInterestForm input[name=delCardPrmtCdtSq]').val();
		delCardPrmtCdtSq += "/" + cardPrmtCdtSq; 
		$('#cardInterestForm input[name=delCardPrmtCdtSq]').val(delCardPrmtCdtSq);
	}
	
	//카드 프로모션 삭제
	$('#btnCardInterestDelete').click(function(e) {
		var arrCardPrmtSq = [];
		
		var toDateStr = new Date().format("YYYYMMDD");
		var prmtEdd = $('#cardInterestForm input[name=prmtEdd]').val();
		if (toDateStr > prmtEdd.replace(/-/gi,'') ){
			chkFlag = true;
			mcxDialog.alertC("종료된 무이자할부정보는 삭제할 수 없습니다.", {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$('#cardInterestForm input[name=prmtEdd]').focus();
				}
			});
			return false;
		}
	
		arrCardPrmtSq.push($('#cardInterestForm input[name=cardPrmtSq]').val());
		
		mcxDialog.confirm('삭제하시겠습니까? <br/> 삭제한 프로모션은 복구할수 없습니다.',  {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function(){
				var data = {arrCardPrmtSq : arrCardPrmtSq};
				var jsonData = JSON.stringify(data);
				gagajf.ajaxJsonSubmit('/marketing/card/promotion/delete', jsonData, fnSaveCardInterestCallBack);
			}
		});
	});
	
	
	// 저장 클릭 시
	$('#btnCardInterestSave').on('click', function() {
		
		var optCheck = false;
		// 입력 값 체크
		if (!gagajf.validation('#cardInterestForm'))
			return false;
		
		if (gagajf.isNull($("#cardInterestForm input[name=prmtStd]").val()) || gagajf.isNull($("#cardInterestForm input[name=prmtEdd]").val())){
			mcxDialog.alertC("행사기간의 시작일자와 종료일자를 바르게 입력하세요.", {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$('#cardInterestForm input[name=prmtStd]').focus();
				}
			});
			return false;
		}
		
	
		var fromDate = $("#cardInterestForm input[name=prmtStd]").val().replaceAll('-', '');
		var toDate = $("#cardInterestForm input[name=prmtEdd]").val().replaceAll('-', '');

		if (fromDate > toDate) {
			mcxDialog.alertC("전시기간의 시작일시는 종료일시 보다 클 수 없습니다.", {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$('#cardInterestForm input[name=prmtStd]').focus();
				}
			});
			return false;
		}
		
		var idx = 0;
		$('#cardInterestForm').find('#cardContionList tr').each(function() {
			var minNoItrt = $(this).find("input[name=arrMinNoItrt]").val();
			var maxNoItrt = $(this).find("input[name=arrMaxNoItrt]").val();
			var minPayAmt = $(this).find("input[name=arrMinPayAmt]").val();
			var arrCardCd = $(this).find("input[name=arrCardCd]").val();
			
			if (Number(minNoItrt) > Number(maxNoItrt)){
				optCheck = true;
				mcxDialog.alertC("무이자개월수를 확인해주세요", {
					sureBtnText: "확인",
					sureBtnClick: function() {
						$('#cardInterestForm').find('#cardContionList tr').find("input[name=arrMaxNoItrt]").eq(idx).focus();
					}
				});
				return false;
			}
			
			if (Number(minPayAmt) < 10000){
				optCheck = true;
				mcxDialog.alertC("구매기준금액을 확인해주세요", {
					sureBtnText: "확인",
					sureBtnClick: function() {
						$('#cardInterestForm').find('#cardContionList tr').find("input[name=arrMinPayAmt]").eq(idx).focus();
					}
				});
				return false;
			}
			
			if (gagajf.isNull(arrCardCd)){
				optCheck = true;
				mcxDialog.alert((idx+1)+"번째 행사조건의 대상카드를 선택해주세요")
				return false;
			}
			
			idx++;
		});
		
		if (optCheck){
			return false;
		}
		
		mcxDialog.confirm('저장하시겠습니까?',  {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function(){

				gagajf.ajaxFormSubmit("/marketing/card/interest/save", "#cardInterestForm", fnSaveCardInterestCallBack); 

			}
		});
	});

	
	//창종료
	var fnSaveCardInterestCallBack = function(){
		fnCardPromotionListSearch(); 	//본창 호출
		uifnPopupClose('popupCardInterest');
		
	}

	$(document).ready(function() {

		// Create a summernote
		var snOptions = gagaSn.getToolbarOptions('media');
		gagaSn.createSummernote(snOptions, '#note');
		
		var date = new Date();
		$('#cardInterestForm  input[name=prmtStd]').val(date.format("YYYY-MM-DD"));
		$('#cardInterestForm  input[name=prmtEdd]').val(date.format("YYYY-MM-DD"));
	});

/*]]>*/
</script>
</html>