<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : FaqDetailForm.html
 * @desc    : FAQ 상세 팝업 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.10.29   gagamel     최초 작성
 *******************************************************************************
 -->
<div class="modalPopup" data-width="1200" id="popupFaq">
	<div class="panelStyle">
		<!-- TITLE -->
		<div class="panelTitle">
			<strong th:text="${'FAQ ' + (mode == 'N' ? '등록' : '상세')}">FAQ 상세</strong>
			<button type="button" class="close" onclick="uifnPopupClose('popupFaq');"><em class="fa fa-times"></em></button>
		</div>
		<!-- //TITLE -->
		
		<!-- CONTENT -->
		<div class="panelContent" th:if="${mode == 'N'}">
			<form id="faqDetailForm" name="faqDetailForm" action="#" th:action="@{'/board/faq/save'}" th:method="post">
				<input type="hidden" name="mode" th:value="${mode}"/>
				
				<table class="frmStyle" aria-describedby="등록폼">
					<colgroup>
						<col style="width:10%;"/>
						<col style="width:23%;"/>
						<col style="width:10%;"/>
						<col style="width:23%;"/>
						<col style="width:10%;"/>
						<col/>
					</colgroup>
					<tbody>
						<tr>
							<th>FAQ번호</th>
							<td>
								<input type="text" name="faqSq" 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>
							<th>FAQ유형<em class="required" title="필수"></em></th>
							<td>
								<select name="faqType" required="required">
									<option th:if="${faqTypeList}" th:each="oneData, status : ${faqTypeList}" th:value="${oneData.cd}" th:text="|[${oneData.cd}] ${oneData.cdNm}|"></option>
								</select>
							</td>
						</tr>
						<tr>
							<th>표시순서<i class="required" title="필수" aria-hidden="true"></i></th>
							<td>
								<input type="text" class="w100 text-right" name="dispOrd" placeholder="" maxlength="5" required="required" data-valid-type="numeric" data-valid-name="표시순서" />
								<span class="infoTxt cBlue marL10"><i class="fa fa-info-circle" aria-hidden="true"></i>TOP 10 노출 순서</span>
							</td>
							<th>사용여부<em class="required" title="필수"></em></th>
							<td colspan="3">
								<label class="rdoBtn"><input type="radio" name="useYn" value="Y" checked="checked"/>Yes</label>
								<label class="rdoBtn"><input type="radio" name="useYn" value="N"/>No</label>
							</td>
						</tr>
						<tr>
							<th>질문<em class="required" title="필수"></em></th>
							<td colspan="5">
								<input type="text" name="question" maxlength="200" required="required" data-valid-name="질문"/>
							</td>
						</tr>
						<tr>
							<th>답변<em class="required" title="필수"></em></th>
							<td colspan="5">
								<textarea class="textareaR4" id="answer" name="answer" data-valid-name="답변"></textarea>
							</td>
						</tr>
					</tbody>
				</table>
			</form>
		</div>
		
		<div class="panelContent" th:if="${mode == 'U'}">
			<form id="faqDetailForm" name="faqDetailForm" action="#" th:action="@{'/board/faq/save'}" th:method="post" th:object="${faqInfo}">
				<input type="hidden" name="mode" th:value="${mode}"/>
				
				<table class="frmStyle" aria-describedby="상세폼">
					<colgroup>
						<col style="width:10%;"/>
						<col style="width:23%;"/>
						<col style="width:10%;"/>
						<col style="width:23%;"/>
						<col style="width:10%;"/>
						<col/>
					</colgroup>
					<tbody>
						<tr>
							<th>FAQ번호</th>
							<td>
								<input type="text" name="faqSq" maxlength="20" placeholder="자동생성" readonly="readonly" th:field="*{faqSq}"/>
							</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>
							<th>FAQ유형<em class="required" title="필수"></em></th>
							<td>
								<select name="faqType" required="required" th:field="*{faqType}">
									<option th:if="${faqTypeList}" th:each="oneData, status : ${faqTypeList}" th:value="${oneData.cd}" th:text="|[${oneData.cd}] ${oneData.cdNm}|" th:selected="${faqType == oneData.cd}"></option>
								</select>
							</td>
						</tr>
						<tr>
							<th>사용여부<em class="required" title="필수"></em></th>
							<td>
								<label class="rdoBtn"><input type="radio" name="useYn" value="Y" th:field="*{useYn}"/>Yes</label>
								<label class="rdoBtn"><input type="radio" name="useYn" value="N" th:field="*{useYn}"/>No</label>
							</td>
							<th>표시순서<i class="required" title="필수" aria-hidden="true"></i></th>
							<td>
								<input type="text" class="w100 text-right" name="dispOrd" placeholder="" maxlength="5" required="required" data-valid-type="numeric" data-valid-name="표시순서" th:field="*{dispOrd}"/>
								<span class="infoTxt cBlue marL10"><i class="fa fa-info-circle" aria-hidden="true"></i>TOP 10 노출 순서</span>
							</td>
							<th>조회수</th>
							<td>
								<input type="text" name="readCnt" class="w100 aR" readonly="readonly" th:field="*{readCnt}"/>
							</td>
						</tr>
						<tr>
							<th>질문<em class="required" title="필수"></em></th>
							<td colspan="5">
								<input type="text" name="question" placeholder="" maxlength="200" required="required" data-valid-name="질문" th:field="*{question}"/>
							</td>
						</tr>
						<tr>
							<th>답변<em class="required" title="필수"></em></th>
							<td colspan="5">
								<textarea class="textareaR4" id="answer" name="answer" data-valid-name="답변" th:field="*{answer}"></textarea>
							</td>
						</tr>
					</tbody>
				</table>
			</form>
		</div>
		<!-- //CONTENT -->

		<!-- 버튼 배치 영역 -->
		<ul class="panelBar">
			<li class="right">
				<button type="button" class="btn btn-info btn-lg" id="btnSaveFaq">저장</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=2021053101"></script> -->
<script th:inline="javascript">
/*<![CDATA[*/
	// 저장
	$('#btnSaveFaq').on('click', function() {
		// 입력 값 체크
		if (!gagajf.validation('#faqDetailForm'))
			return false;
		
		if (gagajf.isNull($('#answer').val())) {
			mcxDialog.alert('답변을 입력해 주세요.');
			return false;
		}
		
		mcxDialog.confirm("저장하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				gagajf.ajaxFormSubmit($('#faqDetailForm').prop('action'), '#faqDetailForm', function() {
					uifnPopupClose('popupFaq');
					$('#btnSearch').trigger('click');
				});
			}
		});
	});
	
	$(document).ready(function() {
		// Create a summernote
		//let snOptions = gagaSn.getToolbarOptions();
		//gagaSn.createSummernote(snOptions, '#answer');
	});
/*]]>*/
</script>

</html>
