<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="web/common/layout/CallcenterLayoutWeb">
<!--
 *******************************************************************************
 * @source  : OneToOneQnaRegisterFormWeb.html
 * @desc    : 1:1문의 등록 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.02.19   gagamel     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
	<div id="container" class="container cs"> 
		<div class="breadcrumb"> 
			<ul>
				<li class="bread_home"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
				<li class="bread_2depth"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_FAQ);">고객센터</a></li>
				<li class="bread_3depth">1:1문의</li>
			</ul> 
		</div>
		<div class="wrap">
			<div class="content contactUs_my">
				<div class="cont_body">
					<!-- CONT-BODY -->
					<div class="lnb" id="callcenterLnb">
					</div>
					<div class="cont">
						<div>
							<div class="sec_head">
								<h3>1:1 문의</h3>
							</div>
							<div class="sec_body">
								<div class="t_info blt_dot mb15 light">문의를 남겨 주시면 24시간 이내(토/일/공휴일 제외)에 답변 드릴 수 있도록 최선을 다 하겠습니다.</div>
								
								<form class="form_wrap" role="form" name="qnaForm" id="qnaForm" th:action="@{'/callcenter/onetoone/qna/create'}" method="post">
<!-- 									<div class="form_field"> -->
<!-- 										<label class="ui_col_2 input_label">문의 유형</label> -->
<!-- 										<div class="ui_col_10 form_full"> -->
<!-- 											<div class="input_wrap"> -->
<!-- 												<select name="counselClsf" required="required" data-valid-name="문의유형"> -->
<!-- 													<option value="">유형을 선택해 주세요</option> -->
<!-- 													<option th:if="${counselClsfList}" th:each="oneData, status : ${counselClsfList}" th:value="${oneData.cd}" th:text="${oneData.cdNm}"></option> -->
<!-- 												</select> -->
<!-- 											</div> -->
<!-- 										</div> -->
<!-- 									</div> -->
									<div class="form_field">
										<label class="ui_col_2 input_label">문의 유형</label>
										<div class="ui_col_4 form_full"><!-- 210415 변경 : 필드 클래스 (ui_col_10 → ui_col_4) 변경  -->
											<div class="select_custom">
												<div class="combo"><!-- 210415 추가 : 텍스트 '필수' -->
													<input type="hidden" name="counselClsf" id="counselClsf"/>
													<div class="select">유형을 선택해 주세요 (필수)</div>
													<ul class="list" id="ulCounselClsf">
													</ul>
												</div>
											</div>
										</div>
									</div>
									<div class="form_field">
										<label class="ui_col_2 input_label">제목</label>
										<div class="ui_col_10 form_full">
											<div class="input_wrap">
												<span class="input_group_addon"><span class="ico"></span></span>
												<input type="text" class="form_control" placeholder="30자 내외로 작성해주세요" maxlength="30" name="questTitle" required="required" data-valid-name="제목"/>
											</div> 
											<!-- 숫자, 특수문자, 불완성형 한글 제외하여 입력 -->
										</div>
									</div>
									<div class="form_field">
										<label class="ui_col_2 input_label">내용</label>
										<div class="ui_col_10 form_full">
											<div class="input_wrap">
												<textarea class="doc_contactus" name="questContent" id="questContent" cols="30" rows="10" style="resize: none;" required="required" data-valid-name="내용"></textarea>
												<p class="txt_cnt">
													<span id="contactus_cnt" class="contactus_cnt">(<em class="c_primary">0</em>/500자)</span>
												</p>
											</div> 
											<!-- 특수문자 : \ / : < >  사용 불가 > 입력 시, “특수문자 \ / : < > 는 사용할 수 없습니다.” 얼럿 호출 스크립트 입력 불가능 -->
										</div>
									</div>
									<div class="form_field">
										<label class="ui_col_2 input_label">첨부이미지</label>
										<div class="ui_col_10 form_full">
											<div class="input_wrap">
												<!-- 이미지첨부 -->
												<div class="form_field">
													<div class="imgUpload">
														<label for="fileAdd" class="fileAdd">첫번째업로드</label>
														<input type="file" id="fileAdd" name="file1"/>
														<input type="hidden" name="orgFileNmArr" id="file1OrgFileNm"/>
														<input type="hidden" name="sysFileNmArr" id="file1SysFileNm"/>
													</div>
													<div class="imgUpload">
														<label for="fileAdds" class="fileAdd">두번째업로드</label>
														<input type="file" id="fileAdds" name="file2"/>
														<input type="hidden" name="orgFileNmArr" id="file2OrgFileNm"/>
														<input type="hidden" name="sysFileNmArr" id="file2SysFileNm"/>
													</div>
												</div>
												<!-- //이미지첨부 -->
												<div class="info_addfile">
													<ul>
														<li>- 사진은 최대 20MB 이하의 JPG,PNG,GIF <span>파일2장까지 첨부 가능</span>합니다.</li>
														<li>- 첨부된 사진은 문의 외의 목적으로는 사용되지 않습니다.</li>
													</ul>
												</div>
											</div> 
										</div>
									</div>
									<div class="form_field">
										<label class="ui_col_2 input_label">알림톡 수신 여부</label>
										<div class="ui_col_10 push_agree">
											<div>
												<input type="radio" name="smsReqYn" id="smsReqYn1" value="Y" checked="checked"><label for="smsReqYn1"><span>수신</span></label>
											</div>
											<div>
												<input type="radio" name="smsReqYn" id="smsReqYn2" value="N"><label for="smsReqYn2"><span>미수신</span></label>
											</div>
										</div>
									</div>
								</form>
							</div>
							<div class="sec_foot t_c">
								<button type="button" class="btn btn_default btn_md" onclick="history.back(-1);"><span>취소</span></button>
								<button type="button" class="btn btn_dark btn_md" id="btnSaveQna"><span>확인</span></button>
							</div>
						</div>
					</div>
					<!-- // CONT-BODY -->
				</div>
			</div>
		</div>
	</div>
	<!-- // container -->
	
<script th:inline="javascript">
/*<![CDATA[*/
	$(document).ready(function() {
		// 고객센터 LNB 설정
		fnSetCallcenterLnb(2);
		
		var counselClsfList = [[${counselClsfList}]];
		var tag = '';
		$.each(counselClsfList, function(idx, item) {
			tag += '<li onclick="fnChangeCounselClsf(\'' + item.cd + '\');">' + item.cdNm + '</li>\n';
		});
		$('#ulCounselClsf').html(tag);
	
		// 문의유형
		var cs_selecter01 = new sCombo('.cs .contactUs_my .select_custom');
	});
	
	// 문의유형 선택 시
	var fnChangeCounselClsf = function(counselClsf) {
		// 선택 문의유형 설정
		$('#counselClsf').val(counselClsf);
		var actionUrl = '/callcenter/onetoone/qna/answer/template/' + counselClsf;
		$.get(actionUrl
			, function(data) {
				if (!gagajf.isNull(data)) {
					$('textarea[name=questContent]').val(data);
					$('.doc_contactus').trigger('keyup');
				} else {
					// 초기화
					$('textarea[name=questContent]').val('');
					$('.doc_contactus').trigger('keyup');
				}
			});
	}
	
	// text_area
	$('.doc_contactus').keyup(function (e) {
		var content = $(this).val();
		$('#contactus_cnt').html("(<em class='c_primary'>" + content.length + "</em>/500자)");
		if (content.length > 500) {
			alert("최대 500자까지 입력 가능합니다.");
			$(this).val(content.substring(0, 500));
			$('#contactus_cnt').html("(<em class='c_primary'>500</em>/500자)");
		}
	});
	
	// 파일첨부 선택 시
	$('#fileAdd').on('change', function() { fnChooseFile(this); });
	$('#fileAdds').on('change', function() { fnChooseFile(this); });
	
	var fnChooseFile = function(obj) {
		// multiple 속성이 있으면 files에는 다수의 객체가 할당됨
		var file = obj.files[0];
		
		if (!gagajf.isNull(file.name)) {
			var extension = "\.(jpg|jpeg|png)$";
			if (!(new RegExp(extension, "i")).test(file.name)) {
				mcxDialog.alertC('이미지는 [jpg, jpeg, png] 파일만 가능합니다.', {
					sureBtnText: "확인",
					sureBtnClick: function() {
						$(obj).parent('.imgUpload').find('.removes').trigger('click');
					}
				});
				return false;
			}
		}
		
		if (!gagajf.isNull(file.size) && Number(file.size) > 20 * 1000000) {
			mcxDialog.alertC('이미지는 최대 20MB 이하 파일만 가능합니다.', {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$(obj).parent('.imgUpload').find('.removes').trigger('click');
				}
			});
			return false;
		}
		
		// 파일 업로드
		gagajf.ajaxFileUpload('/common/file/upload?subDir=/counsel'
				, file
				, function(result) {
					// 업로드한 파일명 설정
					$('input[id=' + obj.name + 'OrgFileNm]').val(result.oldFileName);
					$('input[id=' + obj.name + 'SysFileNm]').val(result.newFileName);
				}
		);
	}
	
	// 저장
	$('#btnSaveQna').on('click', function() {
		// 입력 값 체크
		if (!gagajf.validation('#qnaForm'))
			return false;

		if ($('#questContent').val().length<20){
			mcxDialog.alert("문의내용을 20자 이상 입력해주세요.");
			return;
		}

		if (gagajf.isNull($('#counselClsf').val())) {
			mcxDialog.alert("문의유형은 필수 항목입니다.");
			return;
		}
		mcxDialog.confirm("저장하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				gagajf.ajaxFormSubmit($('#qnaForm').prop('action')
						, '#qnaForm'
						, function() {
							cfnGoToPage(_PAGE_ONETOONE_QNA);
						}
				);
			}
		});
	});
/*]]>*/
</script>

</th:block>

</body>
</html>
