<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : MailHeaderFooterDetailForm.html
 * @desc    : MailHeaderFooter 등록/수정 상세 팝업화면
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021. 02. 02   csh9191     최초 작성
 *******************************************************************************
 -->
<div class="modalPopup" data-width="1200" id="popupMailHF">
	<div class="panelStyle">
		<!-- TITLE -->
		<div class="panelTitle">
			<strong th:text="${'메일 헤더/푸터 ' + (mode == 'N' ? '등록' : '상세')}">메일 헤더/푸터</strong>
			<button type="button" class="close" onclick="uifnPopupClose('popupMailHF');"><em class="fa fa-times"></em></button>
		</div>
		<!-- //TITLE -->
		
		<!-- CONTENT -->
		<div class="panelContent">
			<form id="mailHFForm" name="mailHFForm" 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>번호</th>
							<td>
								<input type="text" name="mailhfSq" maxlength="20" placeholder="자동생성" readonly="readonly"/>								
							</td>							
						</tr>
						<tr>
							<th>구분<em class="required" title="필수"></em></th>
							<td>
								<label class="rdoBtn"><input type="radio" name="mailhfGb" value="H" checked="checked"/>헤더</label>
								<label class="rdoBtn"><input type="radio" name="mailhfGb" value="F"/>푸터</label>
							</td>
						</tr>
						<tr>
							<th>타이틀<em class="required" title="필수"></em></th>
							<td>
								<input type="text" name="mailhfNm" maxlength="50" required="required" data-valid-name="타이틀"/>
							</td>
						</tr>
						<tr>
							<th>내용<em class="required" title="필수"></em></th>
							<td>
								<textarea class="textareaR4" id="mailhfContent" name="mailhfContent" data-valid-name="내용"></textarea>
							</td>
						</tr>
					</tbody>
				</table>
			</form>
		</div>
		<!-- //CONTENT -->

		<!-- 버튼 배치 영역 -->
		<ul class="panelBar">
			<li class="left"  th:if="${mode  == 'N' }">
				<button type="button" class="btn btn-danger btn-lg" id="btndeleteMailHF">삭제</button>
			</li>
			<li class="right">
				<button type="button" class="btn btn-info btn-lg" id="btnSaveMailHF">저장</button>
			</li>
		</ul>
		<!-- //버튼 배치 영역 -->
	</div>
</div>

<script type="text/javascript" src="/ux/plugins/summernote/summernote.js?v=2020102902"></script>
<script type="text/javascript" src="/ux/plugins/gaga/gaga.summernote.js?v=20201030"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	let mailhfInfo = [[${mailhfInfo}]];
	let mode = [[${mode}]]; 

	//팝업창 삭제버튼
	$('#btndeleteMailHF').on('click', function() {
		mcxDialog.confirm("등록하신 내용을 삭제하시겠습니까?<br>삭제한 내용은 복원하실 수 없습니다.", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				uifnPopupClose('popupMailHF'); //팝업 창 닫기
			}
		});
	});
	
	// 저장
	$('#btnSaveMailHF').on('click', function() {
		// 입력 값 체크
		if (!gagajf.validation('#mailHFForm'))
			return false;
		
		if (gagajf.isNull($('#mailhfContent').val())) {
			mcxDialog.alert('내용을 입력해 주세요.');
			return false;
		}
		
		//타이틀 길이 제한 2자 이상 50자 미만
		var check = $('#mailHFForm input[name=mailhfNm]').val();

		if(check.length < 2){
			mcxDialog.alert('타이틀은 2자 이상 50자 미만으로 입력하세요.');
			return false;
		}
		
		mcxDialog.confirm("내용을 등록 하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				gagajf.ajaxFormSubmit($('#mailHFForm').prop('action'), '#mailHFForm', function() {
					uifnPopupClose('popupMailHF');
					$('#btnSearch').trigger('click');
				});
			}
		});
	});
	
	

	$(document).ready(function() {
		if (mode == 'U') {
			$('#mailHFForm input[name=mailhfSq]').val(mailhfInfo.mailhfSq);
			$('#mailHFForm input[name=mailhfNm]').val(mailhfInfo.mailhfNm);
			$('#mailHFForm textarea[name=mailhfContent]').val(mailhfInfo.mailhfContent);
			
			if (mailhfInfo.mailhfGb == 'F') {
				$('#mailHFForm input:radio[name="mailhfGb"]:radio[value="F"]').prop('checked', true);
			}
		}
		
		// Create a summernote
		let snOptions = gagaSn.getToolbarOptions();
		gagaSn.createSummernote(snOptions, '#mailhfContent');
	});
/*]]>*/
</script>

</html>
