<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : ClauseDetailForm.html
 * @desc    : 약관 상세 팝업 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.10.29   gagamel     최초 작성
 *******************************************************************************
 -->
<div class="modalPopup" data-width="900" id="popupClause">
	<div class="panelStyle">
		<!-- TITLE -->
		<div class="panelTitle">
			<strong th:text="${'약관 ' + (mode == 'N' ? '등록' : '상세')}">약관 상세</strong>
			<button type="button" class="close" onclick="uifnPopupClose('popupClause');"><em class="fa fa-times"></em></button>
		</div>
		<!-- //TITLE -->
		
		<!-- CONTENT -->
		<div class="panelContent" th:if="${mode == 'N'}">
			<form id="clauseDetailForm" name="clauseDetailForm" action="#" th:action="@{'/envset/clause/save'}" th:method="post">
				<input type="hidden" name="mode" th:value="${mode}"/>
				
				<table class="frmStyle" aria-describedby="등록폼">
					<colgroup>
						<col style="width:15%;"/>
						<col style="width:25%;"/>
						<col style="width:15%;"/>
						<col style="width:45%;"/>
					</colgroup>
					<tbody>
						<tr>
							<th>약관번호</th>
							<td>
								<input type="text" name="clauseSq" maxlength="20" placeholder="자동생성" readonly="readonly"/>
							</td>
							<th>사이트<em class="required" title="필수"></em></th>
							<td>
								<select name="siteCd" required="required">
									<option th:if="${siteList}" th:each="oneData, status : ${siteList}" th:value="${oneData.cd}" th:text="|[${oneData.cd}] ${oneData.cdNm}|"></option>
								</select>
							</td>
						</tr>
						<tr>
							<th>약관유형<em class="required" title="필수"></em></th>
							<td>
								<select name="clauseType" required="required">
									<option th:if="${clauseTypeList}" th:each="oneData, status : ${clauseTypeList}" th:value="${oneData.cd}" th:text="|[${oneData.cd}] ${oneData.cdNm}|"></option>
								</select>
							</td>
							<th>시행일자<em class="required" title="필수"></em></th>
							<td>
								<input type="text" class="schDate w80" name="effectDt" maxlength="10" th:value="${#calendars.format(#calendars.createNow(), 'yyyy-MM-dd')}" required="required" data-valid-type="calendar" data-valid-name="시행일자"/>
							</td>
						</tr>
						<tr>
							<th>노출여부</th>
							<td colspan="3">
								<input type="hidden" name="dispYn" value="Y"/>
								<label class="chkBox"><input type="checkbox" name="chkDispYn" value="Y" checked="checked"/>노출</label>
								<span class="cBlue"><i class="fa fa-info-circle" aria-hidden="true"></i> 노출여부를 체크할 경우, 현재 약관으로 노출됩니다.</span>
							</td>
						</tr>
						<tr>
							<th>약관 제목<em class="required" title="필수"></em></th>
							<td colspan="3">
								<input type="text" name="clauseTitle" placeholder="" maxlength="100" data-valid-name="약관 제목"/>
							</td>
						</tr>
						<tr>
							<th>약관 내용<em class="required" title="필수"></em></th>
							<td colspan="3">
								<textarea class="textareaR4" id="clauseContent" name="clauseContent" data-valid-name="약관 내용"></textarea>
							</td>
						</tr>
					</tbody>
				</table>
			</form>
		</div>
		
		<div class="panelContent" th:if="${mode == 'U'}">
			<form id="clauseDetailForm" name="clauseDetailForm" action="#" th:action="@{'/envset/clause/save'}" th:method="post" th:object="${clauseInfo}">
				<input type="hidden" name="mode" th:value="${mode}"/>
				
				<table class="frmStyle" aria-describedby="상세폼">
					<colgroup>
						<col style="width:15%;"/>
						<col style="width:25%;"/>
						<col style="width:15%;"/>
						<col style="width:45%;"/>
					</colgroup>
					<tbody>
						<tr>
							<th>약관번호</th>
							<td>
								<input type="text" name="clauseSq" maxlength="20" placeholder="자동생성" readonly="readonly" th:field="*{clauseSq}"/>
							</td>
							<th>사이트<em class="required" title="필수"></em></th>
							<td>
								<select name="siteCd" required="required" th:field="*{siteCd}">
									<option th:if="${siteList}" th:each="oneData, status : ${siteList}" th:value="${oneData.cd}" th:text="|[${oneData.cd}] ${oneData.cdNm}|" th:selected="${siteCd == oneData.cd}"></option>
								</select>
							</td>
						</tr>
						<tr>
							<th>약관유형<em class="required" title="필수"></em></th>
							<td>
								<select name="clauseType" required="required" th:field="*{clauseType}">
									<option th:if="${clauseTypeList}" th:each="oneData, status : ${clauseTypeList}" th:value="${oneData.cd}" th:text="|[${oneData.cd}] ${oneData.cdNm}|" th:selected="${clauseType == oneData.cd}"></option>
								</select>
							</td>
							<th>시행일자<em class="required" title="필수"></em></th>
							<td>
								<input type="text" class="schDate w80" name="effectDt" maxlength="10" required="required" data-valid-type="calendar" data-valid-name="시행일자" th:field="*{effectDt}"/>
							</td>
						</tr>
						<tr>
							<th>노출여부</th>
							<td colspan="3">
								<input type="hidden" name="dispYn" value="Y" th:value="${clauseInfo.dispYn}"/>
								<label class="chkBox"><input type="checkbox" name="chkDispYn" value="Y" th:checked="${clauseInfo.dispYn == 'Y'}"/>노출</label>
								<span class="cBlue"><i class="fa fa-info-circle" aria-hidden="true"></i> 노출여부를 체크할 경우, 현재 약관으로 노출됩니다.</span>
							</td>
						</tr>
						<tr>
							<th>약관 제목<em class="required" title="필수"></em></th>
							<td colspan="3">
								<input type="text" name="clauseTitle" placeholder="" maxlength="100" data-valid-name="약관 제목" th:field="*{clauseTitle}"/>
							</td>
						</tr>
						<tr>
							<th>약관 내용<em class="required" title="필수"></em></th>
							<td colspan="3">
								<textarea class="textareaR4" id="clauseContent" name="clauseContent" data-valid-name="약관 내용" th:field="*{clauseContent}"></textarea>
							</td>
						</tr>
					</tbody>
				</table>
			</form>
		</div>
		<!-- //CONTENT -->

		<!-- 버튼 배치 영역 -->
		<ul class="panelBar">
			<li class="right">
				<button type="button" class="btn btn-info btn-lg" id="btnSaveClause">저장</button>
			</li>
		</ul>
		<!-- //버튼 배치 영역 -->
	</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=2020103001"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	// 저장
	$('#btnSaveClause').on('click', function() {
		// 입력 값 체크
		if (!gagajf.validation('#clauseDetailForm'))
			return false;
		
		mcxDialog.confirm("저장하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				$('#clauseDetailForm input[name=dispYn]').val($('#clauseDetailForm input:checkbox[name=chkDispYn]').is(':checked') ? 'Y' : 'N');
				
				gagajf.ajaxFormSubmit($('#clauseDetailForm').prop('action'), '#clauseDetailForm', function() {
					uifnPopupClose('popupClause');
					$('#btnSearch').trigger('click');
				});
			}
		});
	});
	
	$(document).ready(function() {
		// Create a summernote
		let snOptions = gagaSn.getToolbarOptions();
		gagaSn.createSummernote(snOptions, '#clauseContent');
	});
/*]]>*/
</script>

</html>
