<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : MailTemplateDetailForm.html
 * @desc    : 메일템플릿 상세 팝업
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.02.05   csh9191     최초 작성
 * 1.1  2021.05.11   gagamel     전반적 수정
 *******************************************************************************
 -->
<div class="modalPopup" data-width="1200" id="popupMailTemplateDetail">
	<div class="panelStyle" style="max-height:700px; overflow-y:scroll;">
		<!-- Title -->
		<div class="panelTitle">
			<strong th:text="${'메일템플릿 ' + (mode == 'N' ? '등록' : '상세')}">메일템플릿 등록</strong>
			<button type="button" class="close" onclick="uifnPopupClose('popupMailTemplateDetail');"><em class="fa fa-times"></em></button>
		</div>
		<!-- //Title -->
		
		<!-- Content -->
		<div class="panelContent">
			<form id="mailTemplateDetailForm" name="mailTemplateDetailForm" action="#" th:action="@{'/marketing/mailtemplate/save'}" th:method="post">
				<input type="hidden" name="mode" th:value="${mode}"/>
				
				<!-- 메일템플릿 -->
				<table class="frmStyle" aria-describedby="등록/상세폼">
					<colgroup>
						<col style="width:10%;"/>
						<col/>
					</colgroup>
					<tbody>
						<tr>
							<th>메일템플릿번호<em class="required" title="필수"></em></th>
							<td>
								<input type="text" name="mailtSq" maxlength="20" placeholder="자동생성" readonly="readonly" th:value="${mtInfo?.mailtSq}"/>
							</td>
						</tr>
						<tr>
							<th>메일템플릿구분<em class="required" title="필수"></em></th>
							<td>
								<label class="rdoBtn"><input type="radio" name="mailtGb" value="A" th:checked="${mtInfo?.mailtGb == null or mtInfo?.mailtGb == 'A'}" th:readonly="${mode == 'U'}"/>자동메일</label>
								<label class="rdoBtn"><input type="radio" name="mailtGb" value="M" th:checked="${mtInfo?.mailtGb == 'M'}" th:readonly="${mode == 'U'}"/>마케팅메일</label>
							</td>
						</tr>
						<tr>
							<th>메일헤더<em class="required" title="필수"></em></th>
							<td>
								<select name="mailhSq" required="required" data-valid-name="메일헤더">
									<option value="">[선택]</option>
									<option th:if="${mhList}" th:each="oneData, status : ${mhList}" th:value="|${oneData.cd}|" th:text="|${oneData.cdNm}|" th:selected="${#strings.toString(mtInfo?.mailhSq) == oneData.cd}"></option>
								</select>
							</td>
						</tr>
						<tr>
							<th>메일푸터<em class="required" title="필수"></em></th>
							<td>
								<select name="mailfSq" required="required" data-valid-name="메일푸터">
									<option value="">[선택]</option>
									<option th:if="${mfList}" th:each="oneData, status : ${mfList}" th:value="|${oneData.cd}|" th:text="|${oneData.cdNm}|" th:selected="${#strings.toString(mtInfo?.mailfSq) == oneData.cd}"></option>
								</select>
							</td>
						</tr>
						<tr>
							<th>메일템플릿명<em class="required" title="필수"></em></th>
							<td><input type="text" name="mailtNm" maxlength="100" required="required" data-valid-name="메일템플릿명" th:value="${mtInfo?.mailtNm}"/></td>
						</tr>
						<tr>
							<th>메일내용<em class="required" title="필수"></em></th>
							<td>
								<textarea class="textareaR4" id="mailContent" name="mailContent" data-valid-name="내용" th:text="${mtInfo?.mailContent}"></textarea>
							</td>
						</tr>
					</tbody>
				</table>
				<!-- //메일템플릿 -->
			</form>
		
			<!-- 상품전시코너 -->
			<div class="panelStyle" style="margin: unset; display: none;" id="mtcorner">
				<h4>상품 전시 설정</h4>
				
				<div class="inner-panelContent">
					<div class="panelContent">
						<ul class="panelBar">
							<li class="left">
								<p><span class="infoTxt cBlue"><i class="fa fa-info-circle" aria-hidden="true"></i>상품전시코너는 최대 5개까지 추가할 수 있습니다.</span></p>
								<p><span class="infoTxt cBlue"><i class="fa fa-info-circle" aria-hidden="true"></i>상품은 전시코너당 최대 40개 까지만 등록할 수 있습니다.</span></p>
							</li>
							<li class="right">
								<button type="button" class="btn btnRight btn-success btn-lg" id="btnAddCorner">상품전시코너 추가</button>
							</li>
						</ul>
						
						<!-- 코너1 -->
						<div class="inner-panelContent" style="display: none;" id="mtcorner1">
							<input type="hidden" name="mailtcSq1">
							
							<div class="panelContent">
								<table class="frmStyle">
									<colgroup>
										<col width="10%"/>
										<col width="90%"/>
									</colgroup>
									<tr>
										<th>전시코너1<br/><button type="button" class="btn btn-danger btn-lg" id="btnDeleteCorner1">코너 삭제</button></th>
										<td>
											<div class="">
												<table  class="frmStyle">
													<tr>
														<th class="w100">코너명<em class="required" title="필수"></em></th>
														<td>
															<input type="text" name="mailtcNm1" maxlength="50"/>
														</td>
													</tr>
													<tr>
														<th>링크</th>
														<td>
															<input type="text" name="mailtcLink1" maxlength="100" value="#"/>
														</td>
													</tr>
													<tr>
														<th>상품노출기준
															<div class="iconTooltip">
																<i class="fa fa-info" aria-hidden="true"></i>
																<span class="left aL" style="width:230px;">
																	<em>1열에 노출될 상품 개수를 뜻합니다.</em>
																</span>
															</div>
														</th>
														<td>
															<label class="rdoBtn"><input type="radio" name="goodsCpr1" value="1"/>1개</label>
															<label class="rdoBtn"><input type="radio" name="goodsCpr1" value="2"/>2개</label>
															<label class="rdoBtn"><input type="radio" name="goodsCpr1" value="3" checked="checked"/>3개</label>
															<label class="rdoBtn"><input type="radio" name="goodsCpr1" value="4"/>4개</label>
														</td>
													</tr>
												</table>
												
												<ul class="panelBar">
													<li>
														<button type="button" class="btn btn-info btn-lg" onclick="fnOpenGoodsPopup('mtcgGridOptions1');">상품추가</button>
														<button type="button" class="btn btn-danger btn-lg" onclick="fnDeleteCornerGoods('mtcgGridOptions1');">상품삭제</button>
													</li>
												</ul>
												
												<div id="mtcgGridList1" style="width:100%; height: 300px;" class="ag-theme-balham"></div>
											</div>
										</td>
									</tr>
								</table>
							</div>
						</div>
						<!-- //코너1 -->
						
						<!-- 코너2 -->
						<div class="inner-panelContent" style="display: none;" id="mtcorner2">
							<input type="hidden" name="mailtcSq2">
							
							<div class="panelContent">
								<table class="frmStyle">
									<colgroup>
										<col width="10%"/>
										<col width="90%"/>
									</colgroup>
									<tr>
										<th>전시코너2<br/><button type="button" class="btn btn-danger btn-lg" id="btnDeleteCorner2">코너 삭제</button></th>
										<td>
											<div class="">
												<table  class="frmStyle">
													<tr>
														<th class="w100">코너명<em class="required" title="필수"></em></th>
														<td>
															<input type="text" name="mailtcNm2" maxlength="50"/>
														</td>
													</tr>
													<tr>
														<th>링크</th>
														<td>
															<input type="text" name="mailtcLink2" maxlength="100" value="#"/>
														</td>
													</tr>
													<tr>
														<th>상품노출기준
															<div class="iconTooltip">
																<i class="fa fa-info" aria-hidden="true"></i>
																<span class="left aL" style="width:230px;">
																	<em>1열에 노출될 상품 개수를 뜻합니다.</em>
																</span>
															</div>
														</th>
														<td>
															<label class="rdoBtn"><input type="radio" name="goodsCpr2" value="1"/>1개</label>
															<label class="rdoBtn"><input type="radio" name="goodsCpr2" value="2"/>2개</label>
															<label class="rdoBtn"><input type="radio" name="goodsCpr2" value="3" checked="checked"/>3개</label>
															<label class="rdoBtn"><input type="radio" name="goodsCpr2" value="4"/>4개</label>
														</td>
													</tr>
												</table>
												
												<ul class="panelBar">
													<li>
														<button type="button" class="btn btn-info btn-lg" onclick="fnOpenGoodsPopup('mtcgGridOptions2');">상품추가</button>
														<button type="button" class="btn btn-danger btn-lg" onclick="fnDeleteCornerGoods('mtcgGridOptions2');">상품삭제</button>
													</li>
												</ul>
												
												<div id="mtcgGridList2" style="width:100%; height: 300px;" class="ag-theme-balham"></div>
											</div>
										</td>
									</tr>
								</table>
							</div>
						</div>
						<!-- //코너2 -->
						
						<!-- 코너3 -->
						<div class="inner-panelContent" style="display: none;" id="mtcorner3">
							<input type="hidden" name="mailtcSq3">
							
							<div class="panelContent">
								<table class="frmStyle">
									<colgroup>
										<col width="10%"/>
										<col width="90%"/>
									</colgroup>
									<tr>
										<th>전시코너3<br/><button type="button" class="btn btn-danger btn-lg" id="btnDeleteCorner3">코너 삭제</button></th>
										<td>
											<div class="">
												<table  class="frmStyle">
													<tr>
														<th class="w100">코너명<em class="required" title="필수"></em></th>
														<td>
															<input type="text" name="mailtcNm3" maxlength="50"/>
														</td>
													</tr>
													<tr>
														<th>링크</th>
														<td>
															<input type="text" name="mailtcLink3" maxlength="100" value="#"/>
														</td>
													</tr>
													<tr>
														<th>상품노출기준
															<div class="iconTooltip">
																<i class="fa fa-info" aria-hidden="true"></i>
																<span class="left aL" style="width:230px;">
																	<em>1열에 노출될 상품 개수를 뜻합니다.</em>
																</span>
															</div>
														</th>
														<td>
															<label class="rdoBtn"><input type="radio" name="goodsCpr3" value="1"/>1개</label>
															<label class="rdoBtn"><input type="radio" name="goodsCpr3" value="2"/>2개</label>
															<label class="rdoBtn"><input type="radio" name="goodsCpr3" value="3" checked="checked"/>3개</label>
															<label class="rdoBtn"><input type="radio" name="goodsCpr3" value="4"/>4개</label>
														</td>
													</tr>
												</table>
												
												<ul class="panelBar">
													<li>
														<button type="button" class="btn btn-info btn-lg" onclick="fnOpenGoodsPopup('mtcgGridOptions3');">상품추가</button>
														<button type="button" class="btn btn-danger btn-lg" onclick="fnDeleteCornerGoods('mtcgGridOptions3');">상품삭제</button>
													</li>
												</ul>
												
												<div id="mtcgGridList3" style="width:100%; height: 300px;" class="ag-theme-balham"></div>
											</div>
										</td>
									</tr>
								</table>
							</div>
						</div>
						<!-- //코너3 -->
						
						<!-- 코너4 -->
						<div class="inner-panelContent" style="display: none;" id="mtcorner4">
							<input type="hidden" name="mailtcSq4">
							
							<div class="panelContent">
								<table class="frmStyle">
									<colgroup>
										<col width="10%"/>
										<col width="90%"/>
									</colgroup>
									<tr>
										<th>전시코너4<br/><button type="button" class="btn btn-danger btn-lg" id="btnDeleteCorner4">코너 삭제</button></th>
										<td>
											<div class="">
												<table  class="frmStyle">
													<tr>
														<th class="w100">코너명<em class="required" title="필수"></em></th>
														<td>
															<input type="text" name="mailtcNm4" maxlength="50"/>
														</td>
													</tr>
													<tr>
														<th>링크</th>
														<td>
															<input type="text" name="mailtcLink4" maxlength="100" value="#"/>
														</td>
													</tr>
													<tr>
														<th>상품노출기준
															<div class="iconTooltip">
																<i class="fa fa-info" aria-hidden="true"></i>
																<span class="left aL" style="width:230px;">
																	<em>1열에 노출될 상품 개수를 뜻합니다.</em>
																</span>
															</div>
														</th>
														<td>
															<label class="rdoBtn"><input type="radio" name="goodsCpr4" value="1"/>1개</label>
															<label class="rdoBtn"><input type="radio" name="goodsCpr4" value="2"/>2개</label>
															<label class="rdoBtn"><input type="radio" name="goodsCpr4" value="3" checked="checked"/>3개</label>
															<label class="rdoBtn"><input type="radio" name="goodsCpr4" value="4"/>4개</label>
														</td>
													</tr>
												</table>
												
												<ul class="panelBar">
													<li>
														<button type="button" class="btn btn-info btn-lg" onclick="fnOpenGoodsPopup('mtcgGridOptions4');">상품추가</button>
														<button type="button" class="btn btn-danger btn-lg" onclick="fnDeleteCornerGoods('mtcgGridOptions4');">상품삭제</button>
													</li>
												</ul>
												
												<div id="mtcgGridList4" style="width:100%; height: 300px;" class="ag-theme-balham"></div>
											</div>
										</td>
									</tr>
								</table>
							</div>
						</div>
						<!-- //코너4 -->
						
						<!-- 코너5 -->
						<div class="inner-panelContent" style="display: none;" id="mtcorner5">
							<input type="hidden" name="mailtcSq5">
							
							<div class="panelContent">
								<table class="frmStyle">
									<colgroup>
										<col width="10%"/>
										<col width="90%"/>
									</colgroup>
									<tr>
										<th>전시코너5<br/><button type="button" class="btn btn-danger btn-lg" id="btnDeleteCorner5">코너 삭제</button></th>
										<td>
											<div class="">
												<table  class="frmStyle">
													<tr>
														<th class="w100">코너명<em class="required" title="필수"></em></th>
														<td>
															<input type="text" name="mailtcNm5" maxlength="50"/>
														</td>
													</tr>
													<tr>
														<th>링크</th>
														<td>
															<input type="text" name="mailtcLink5" maxlength="100" value="#"/>
														</td>
													</tr>
													<tr>
														<th>상품노출기준
															<div class="iconTooltip">
																<i class="fa fa-info" aria-hidden="true"></i>
																<span class="left aL" style="width:230px;">
																	<em>1열에 노출될 상품 개수를 뜻합니다.</em>
																</span>
															</div>
														</th>
														<td>
															<label class="rdoBtn"><input type="radio" name="goodsCpr5" value="1"/>1개</label>
															<label class="rdoBtn"><input type="radio" name="goodsCpr5" value="2"/>2개</label>
															<label class="rdoBtn"><input type="radio" name="goodsCpr5" value="3" checked="checked"/>3개</label>
															<label class="rdoBtn"><input type="radio" name="goodsCpr5" value="4"/>4개</label>
														</td>
													</tr>
												</table>
												
												<ul class="panelBar">
													<li>
														<button type="button" class="btn btn-info btn-lg" onclick="fnOpenGoodsPopup('mtcgGridOptions5');">상품추가</button>
														<button type="button" class="btn btn-danger btn-lg" onclick="fnDeleteCornerGoods('mtcgGridOptions5');">상품삭제</button>
													</li>
												</ul>
												
												<div id="mtcgGridList5" style="width:100%; height: 300px;" class="ag-theme-balham"></div>
											</div>
										</td>
									</tr>
								</table>
							</div>
						</div>
						<!-- //코너5 -->
					</div> <!-- panelContent -->
				</div> <!-- end of inner-panelContent -->
			</div>
			<!-- //상품전시코너 -->
			
			<!-- 버튼 배치 영역 -->
			<ul class="panelBar">
				<li class="right">
					<button type="button" class="btn btn-info btn-lg" id="btnSaveMailTemplate">저장</button>
					<button th:if="${mode == 'U'}" type="button" class="btn btn-danger btn-lg" id="btnDeleteMailTemplate">삭제</button>
				</li>
			</ul>
			<!-- //버튼 배치 영역 -->
		</div>
	</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[*/
	var goodsStatList = gagajf.convertToArray([[${goodsStatList}]]);
	var mtcgGridOptions;
	var mode = $('#mailTemplateDetailForm input[name=mode]').val();
	
	var columnDefs = [
		{width: 40, minWidth: 40, cellClass: 'text-center', headerCheckboxSelection: true, checkboxSelection: true, filter: false},
		{headerName: "상품코드", field: "goodsCd", width: 120, cellClass: 'text-center'},
		{headerName: "브랜드명", field: "brandNm", width: 150, cellClass: 'text-center'},
		{headerName: "상품명", field: "goodsNm", width: 200},
		{
			headerName: "판매상태", field: "goodsStat", width: 100, cellClass: 'text-center',
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(goodsStatList, params.value); }
		},
		{headerName: "정상가", field: "listPrice", width: 120, cellClass: 'text-center'},
		{headerName: "판매가", field: "currPrice", width: 120, cellClass: 'text-center'},
		{headerName: "노출순서", field: "dispOrd", width: 100, cellClass: 'text-center', cellEditor: 'numericCellEditor', editable: true}
	];
	
	var mtcgGridOptions1 = gagaAgGrid.getGridOptions(columnDefs);
	var mtcgGridOptions2 = gagaAgGrid.getGridOptions(columnDefs);
	var mtcgGridOptions3 = gagaAgGrid.getGridOptions(columnDefs);
	var mtcgGridOptions4 = gagaAgGrid.getGridOptions(columnDefs);
	var mtcgGridOptions5 = gagaAgGrid.getGridOptions(columnDefs);

	// 중복선택
	mtcgGridOptions1.rowSelection = 'multiple';
	mtcgGridOptions2.rowSelection = 'multiple';
	mtcgGridOptions3.rowSelection = 'multiple';
	mtcgGridOptions4.rowSelection = 'multiple';
	mtcgGridOptions5.rowSelection = 'multiple';

	// 메일템플릿구분 클릭
	$('#mailTemplateDetailForm input[name=mailtGb]').on('click', function() {
		// 등록
		if (mode == 'N') {
			if ($(this).val() == 'A') { // 자동메일
				$('#mtcorner').hide();
			} else { // 마케팅메일
				$('#mtcorner').show();
			}
		}
	});
	
	// 상품전시코너 추가
	var cornerIdx = 1;
	$('#btnAddCorner').on('click', function() {
		$('#mtcorner' + cornerIdx).show();
		cornerIdx++;
		
		if (cornerIdx > 5) {
			$('#btnAddCorner').attr('disabled', true);
		}
	});
	
	// 상품전시코너 삭제
	$('#btnDeleteCorner1').on('click', function() { fnDeleteCorner($('input[name=mailtcSq1]').val(), 1); });
	$('#btnDeleteCorner2').on('click', function() { fnDeleteCorner($('input[name=mailtcSq2]').val(), 2); });
	$('#btnDeleteCorner3').on('click', function() { fnDeleteCorner($('input[name=mailtcSq3]').val(), 3); });
	$('#btnDeleteCorner4').on('click', function() { fnDeleteCorner($('input[name=mailtcSq4]').val(), 4); });
	$('#btnDeleteCorner5').on('click', function() { fnDeleteCorner($('input[name=mailtcSq5]').val(), 5); });
	var fnDeleteCorner = function(mailtcSq, idx) {
		mcxDialog.confirm("전시코너" + idx + "을(를) 삭제하시겠습니까?<br/>삭제한 내용은 복원할 수 없습니다.", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				switch (idx) {
					case 1:
						mtcgGridOptions = mtcgGridOptions1;
						break;
					case 2:
						mtcgGridOptions = mtcgGridOptions2;
						break;
					case 3:
						mtcgGridOptions = mtcgGridOptions3;
						break;
					case 4:
						mtcgGridOptions = mtcgGridOptions4;
						break;
					case 5:
						mtcgGridOptions = mtcgGridOptions5;
						break;
				}
				
				if (mode == 'N') { // 등록
					$('input[name=mailtcNm' + idx + ']').val('');
					$('input[name=mailtcLink' + idx + ']').val('');
					mtcgGridOptions.api.setRowData({});
				} else { // 상세
					gagajf.ajaxJsonSubmit('/marketing/mailtemplate/corner/delete/' + mailtcSq, null, function() {
						$('input[name=mailtcNm' + idx + ']').val('');
						$('input[name=mailtcLink' + idx + ']').val('');
						mtcgGridOptions.api.setRowData({});
					});
				}
				
				$('#mtcorner' + idx).hide();
			}
		});
	}
	
	// 상품추가 팝업
	var fnOpenGoodsPopup = function(gridOption) {
		switch (gridOption) {
			case 'mtcgGridOptions1': 
				mtcgGridOptions = mtcgGridOptions1;
				break;
			case 'mtcgGridOptions2' : 
				mtcgGridOptions = mtcgGridOptions2;
				break;
			case 'mtcgGridOptions3' : 
				mtcgGridOptions = mtcgGridOptions3;
				break;
			case 'mtcgGridOptions4' : 
				mtcgGridOptions = mtcgGridOptions4;
				break;
			case 'mtcgGridOptions5' : 
				mtcgGridOptions = mtcgGridOptions5;
				break;
		}
		
		cfnOpenGoodsPopup('fnSetMailTemplateCornerGoods');
	}
	
	// 상품추가 팝업에서 호출되는 콜백함수
	var fnSetMailTemplateCornerGoods = function(goodsData) {
		if (goodsData.length < 1) return;
		
		// 기존상품건수
		var totCnt = gagaAgGrid.getTotalCount(mtcgGridOptions);
		
		// 상품개수 제한
		if (totCnt > 40) {
			mcxDialog.alert('등록된 상품이 40개로서 더 이상 추가할 수 없습니다.');
			return false;
		}
		
		$.each(goodsData, function(idx, item) {
			var isExist = false;
			
			mtcgGridOptions.api.forEachNode(function(rowNode, index) {
				// 중복상품 여부 확인
				if (item.goodsCd == rowNode.data.goodsCd) {
					isExist = true;
					return false;
				}
			});
			
			// 중복되지 않았으면
			if (!isExist) {
				totCnt = gagaAgGrid.getTotalCount(mtcgGridOptions);
				
				// 상품개수 제한에 걸리지 않았으면
				if (totCnt <= 40) {
					var data = {
						goodsCd : item.goodsCd,
						brandNm : item.brandEnm,
						goodsNm : item.goodsNm,
						goodsStat : item.goodsStat,
						listPrice : item.listPrice,
						currPrice : item.currPrice,
						dispOrd : totCnt + 1
					};
					
					// 그리드 마지막에 추가
					mtcgGridOptions.api.updateRowData({add: [data], addIndex: idx});
					mtcgGridOptions.api.refreshCells();
				}
			}
		});
	}
	
	// 코너상품 삭제
	var fnDeleteCornerGoods = function(gridOption) {
		switch (gridOption) {
			case 'mtcgGridOptions1': 
				mtcgGridOptions = mtcgGridOptions1;
				break;
			case 'mtcgGridOptions2' : 
				mtcgGridOptions = mtcgGridOptions2;
				break;
			case 'mtcgGridOptions3' : 
				mtcgGridOptions = mtcgGridOptions3;
				break;
			case 'mtcgGridOptions4' : 
				mtcgGridOptions = mtcgGridOptions4;
				break;
			case 'mtcgGridOptions5' : 
				mtcgGridOptions = mtcgGridOptions5;
				break;
		}
		
		var selectedData = gagaAgGrid.selectedRowData(mtcgGridOptions);
		if (selectedData.length == 0) {
			mcxDialog.alert('선택된 행이 없습니다.');
			return false;
		}
		
		mcxDialog.confirm('선택된 상품을 삭제하시겠습니까?', {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				// 화면에서 삭제
				var removedData = gagaAgGrid.removeRowData(mtcgGridOptions, false);
				
				if (mode == 'U') { // 수정모드
					var jsonData = JSON.stringify(removedData);
	 				gagajf.ajaxJsonSubmit('/marketing/mailtemplate/goods/list/delete', jsonData);
				}
			}
		});
	}

	// 메일템플릿 저장
	$('#btnSaveMailTemplate').on('click', function() {
		// 입력 값 체크
		if (!gagajf.validation('#mailTemplateDetailForm')) {
			return false;
		}
		
		if ($('#mailTemplateDetailForm input[name=mailtNm]').val().length < 2) {
			mcxDialog.alert('메일템플릿명은 2자 이상 50자 미만으로 입력해 주세요.');
			return false;
		}
		
		if (gagajf.isNull($('#mailContent').val())) {
			mcxDialog.alert('메일내용을 입력해 주세요.');
			return false;
		}
		
		var mailtcList = [];
		
		// 마케팅메일 체크
		if ($('#mailTemplateDetailForm input:radio[name=mailtGb]:checked').val() == 'M') {
			if ($('#mtcorner1').is(':visible')) {
				if (!fnCheckCornerGoods(mtcgGridOptions1, 1)) {
					return false;
				}
				
				var mailtc = {
					mailtcSq : $('input[name=mailtcSq1]').val(),
					mailtSq : $('#mailTemplateDetailForm input[name=mailtSq]').val(),
					mailtcNm : $('input[name=mailtcNm1]').val(),
					mailtcLink : $('input[name=mailtcLink1]').val(),
					goodsCpr : $('input:radio[name=goodsCpr1]:checked').val(),
					mailtcGoodsList : gagaAgGrid.getAllRowData(mtcgGridOptions1)
				};
				mailtcList.push(mailtc);
			}
			
			if ($('#mtcorner2').is(':visible')) {
				if (!fnCheckCornerGoods(mtcgGridOptions2, 2)) {
					return false;
				}
				
				var mailtc = {
					mailtcSq : $('input[name=mailtcSq2]').val(),
					mailtSq : $('#mailTemplateDetailForm input[name=mailtSq]').val(),
					mailtcNm : $('input[name=mailtcNm2]').val(),
					mailtcLink : $('input[name=mailtcLink2]').val(),
					goodsCpr : $('input:radio[name=goodsCpr2]:checked').val(),
					mailtcGoodsList : gagaAgGrid.getAllRowData(mtcgGridOptions2)
				};
				mailtcList.push(mailtc);
			}
			
			if ($('#mtcorner3').is(':visible')) {
				if (!fnCheckCornerGoods(mtcgGridOptions3, 3)) {
					return false;
				}
				
				var mailtc = {
					mailtcSq : $('input[name=mailtcSq3]').val(),
					mailtSq : $('#mailTemplateDetailForm input[name=mailtSq]').val(),
					mailtcNm : $('input[name=mailtcNm3]').val(),
					mailtcLink : $('input[name=mailtcLink3]').val(),
					goodsCpr : $('input:radio[name=goodsCpr3]:checked').val(),
					mailtcGoodsList : gagaAgGrid.getAllRowData(mtcgGridOptions3)
				};
				mailtcList.push(mailtc);
			}
			
			if ($('#mtcorner4').is(':visible')) {
				if (!fnCheckCornerGoods(mtcgGridOptions4, 4)) {
					return false;
				}
				
				var mailtc = {
					mailtcSq : $('input[name=mailtcSq4]').val(),
					mailtSq : $('#mailTemplateDetailForm input[name=mailtSq]').val(),
					mailtcNm : $('input[name=mailtcNm4]').val(),
					mailtcLink : $('input[name=mailtcLink4]').val(),
					goodsCpr : $('input:radio[name=goodsCpr4]:checked').val(),
					mailtcGoodsList : gagaAgGrid.getAllRowData(mtcgGridOptions4)
				};
				mailtcList.push(mailtc);
			}
			
			if ($('#mtcorner5').is(':visible')) {
				if (!fnCheckCornerGoods(mtcgGridOptions5, 5)) {
					return false;
				}
				
				var mailtc = {
					mailtcSq : $('input[name=mailtcSq5]').val(),
					mailtSq : $('#mailTemplateDetailForm input[name=mailtSq]').val(),
					mailtcNm : $('input[name=mailtcNm5]').val(),
					mailtcLink : $('input[name=mailtcLink5]').val(),
					goodsCpr : $('input:radio[name=goodsCpr5]:checked').val(),
					mailtcGoodsList : gagaAgGrid.getAllRowData(mtcgGridOptions5)
				};
				mailtcList.push(mailtc);
			}
		}
		
		mcxDialog.confirm("메일템플릿을 저장하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				var mailt = {};
				
				mailt.mailtSq = $('#mailTemplateDetailForm input[name=mailtSq]').val();
				mailt.mailtGb = $('#mailTemplateDetailForm input:radio[name=mailtGb]:checked').val();
				mailt.mailhSq = $('#mailTemplateDetailForm select[name=mailhSq]').val();
				mailt.mailfSq = $('#mailTemplateDetailForm select[name=mailfSq]').val();
				mailt.mailtNm = $('#mailTemplateDetailForm input[name=mailtNm]').val();
				mailt.mailContent = $('#mailTemplateDetailForm textarea[name=mailContent]').val();
				mailt.mailtcList = mailtcList;
				
				var jsonData = JSON.stringify(mailt);
				gagajf.ajaxJsonSubmit($('#mailTemplateDetailForm').prop('action'), jsonData, function() {
					uifnPopupClose('popupMailTemplateDetail');
					$('#btnSearch').trigger('click');
				});
			}
		});
	});
	
	// 전시코너상품 체크
	var fnCheckCornerGoods = function(gridOptions, idx) {
		if (gagajf.isNull($('input[name=mailtcNm' + idx + ']').val())) {
			mcxDialog.alert('코너명을 입력해 주세요.');
			return false;
		}
		
		var totCnt = gagaAgGrid.getTotalCount(gridOptions);
		
		if (totCnt == 0) {
			mcxDialog.alert('[상품추가] 버튼을 클릭해 전시코너의 상품을 등록해 주세요.');
			return false;
		}
		
		return true;
	}
	
	// 메일템플릿 삭제
	$('#btnDeleteMailTemplate').on('click', function() {
		mcxDialog.confirm("정말 메일템플릿을 삭제하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				var actionUrl = '/marketing/mailtemplate/delete/' + $('input[name=mailtSq]').val();
				gagajf.ajaxJsonSubmit(actionUrl, null, function() {
					uifnPopupClose('popupMailTemplateDetail');
					$('#btnSearch').trigger('click');
				});
			}
		});
	});
	
	// 상품전시코너 조회
	var fnGetMailTemplateCorner = function() {
		$.getJSON('/marketing/mailtemplate/corner/list/' + $('#mailTemplateDetailForm input[name=mailtSq]').val()
			, function(result) {
				// 데이터 개수
				var dataCnt = result.length;
				
				if (dataCnt > 0) {
					$.each(result, function(idx, item) {
						$('input[name=mailtcSq' + (idx+1) + ']').val(item.mailtcSq);
						$('input[name=mailtcNm' + (idx+1) + ']').val(item.mailtcNm);
						$('input[name=mailtcLink' + (idx+1) + ']').val(item.mailtcLink);
						$('input:radio[name=goodsCpr' + (idx+1) + ']:radio[value="' + item.goodsCpr + '"]').prop('checked', true);
						$('#mtcorner' + (idx+1)).show();
						
						switch (idx) {
							case 0:
								mtcgGridOptions1.api.setRowData(item.mailtcGoodsList);
								break;
							case 1:
								mtcgGridOptions2.api.setRowData(item.mailtcGoodsList);
								break;
							case 2:
								mtcgGridOptions3.api.setRowData(item.mailtcGoodsList);
								break;
							case 3:
								mtcgGridOptions4.api.setRowData(item.mailtcGoodsList);
								break;
							case 4:
								mtcgGridOptions5.api.setRowData(item.mailtcGoodsList);
								break;
						}
					});
				}
			});
	}
	
	$(document).ready(function() {
		// Create a summernote
		let snOptions = gagaSn.getToolbarOptions('media');
		gagaSn.createSummernote(snOptions, '#mailContent');
		
		gagaAgGrid.createGrid("mtcgGridList1", mtcgGridOptions1);
		gagaAgGrid.createGrid("mtcgGridList2", mtcgGridOptions2);
		gagaAgGrid.createGrid("mtcgGridList3", mtcgGridOptions3);
		gagaAgGrid.createGrid("mtcgGridList4", mtcgGridOptions4);
		gagaAgGrid.createGrid("mtcgGridList5", mtcgGridOptions5);
		
		// Hide status bar
		gagaAgGrid.hideStatusBar('mtcgGridList1');
		gagaAgGrid.hideStatusBar('mtcgGridList2');
		gagaAgGrid.hideStatusBar('mtcgGridList3');
		gagaAgGrid.hideStatusBar('mtcgGridList4');
		gagaAgGrid.hideStatusBar('mtcgGridList5');
		
		// 수정모드이고 마케팅메일일 때 
		if (mode == 'U' && $('#mailTemplateDetailForm input:radio[name=mailtGb]:checked').val() == 'M') {
			$('#mtcorner').show(); // 상품전시코너 영역 노출
			fnGetMailTemplateCorner(); // 상품전시코너 조회
		}
	});
/*]]>*/
</script>

</html>
