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

<th:block layout:fragment="content">
	<!-- 모달영역 -->
	<div>
		<!-- 모달1 -->
		<div class="modal pop_full fade" id="myQuestion" tabindex="-1" role="dialog" aria-labelledby="exampleFullLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">1:1문의</h5>
					</div>
					<div class="modal-body">
						<div class="pop_cont">
							<div class="content cs_contactUs_my">
								<form class="form_wrap" role="form" name="qnaForm" id="qnaForm" th:action="@{'/callcenter/onetoone/qna/create'}" method="post">
									<div class="form_field">
										<div class="ui_col_12 form_full">
											<div class="input_wrap">
												<div class="select">
													<select class="select_hidden" 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 class="select_dress">(필수) 문의 유형을 선택해 주세요<span></span></div> -->
													<ul class="select_options">
														<li rel="">(필수) 유형을 선택해 주세요</li>
														<li th:if="${counselClsfList}" th:each="oneData, status : ${counselClsfList}" th:rel="${oneData.cd}" th:text="${oneData.cdNm}"></li>
													</ul>
												</div>
											</div>
										</div>
									</div>
									<div class="form_field">
										<div class="ui_col_12 form_full">
											<div class="input_wrap test">
												<span class="input_group_addon"><span class="ico"></span></span>
												<input type="text" class="form_control" placeholder="(필수) 문의 제목을 입력해 주세요" maxlength="30" name="questTitle" required="required" data-valid-name="제목"/>
											</div>
											<!-- 숫자, 특수문자, 불완성형 한글 제외하여 입력 -->
										</div>
									</div>
									<div class="form_field">
										<div class="ui_col_12 form_full">
											<div class="input_wrap">
												<textarea class="doc_contactus" id="questContent" name="questContent" cols="30" rows="10" style="resize: none;" placeholder="내용을 입력해 주세요. (500자 이내)" 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">
										<div class="ui_col_12 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="file1OrgFileNm"/>
														<input type="hidden" name="file1SysFileNm"/>
													</div>
													<div class="imgUpload">
														<label for="fileAdds" class="fileAdd">두번째업로드</label>
														<input type="file" id="fileAdds" name="file2"/>
														<input type="hidden" name="file2OrgFileNm"/>
														<input type="hidden" name="file2SysFileNm"/>
													</div>
												</div>
												<!-- //이미지첨부 -->
												<div class="info_addfile">
													<ul>
														<li>사진은 이미지당 10MB 이하의 JPEG, JPG, PNG 파일 2장까지 첨부 가능합니다.</li>
														<li>첨부된 사진은 문의 외의 목적으로는 사용되지 않습니다.</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
									<div class="form_field">
										<div class="form_field">
											<div class="ui_col_12 cellphone">
												<div class="input_wrap">
													<span class="tt">알림톡 수신 여부</span>
													<!-- 알림 신청 체크박스(선택 _ 기본값) -->
													<div>
														<div class="ck_box">
															<input type="radio" name="smsReqYn" id="smsReqYn1" value="Y" checked="checked"/>
															<label for="smsReqYn1"><span>수신</span></label>
														</div>
														<div class="ck_box">
															<input type="radio" name="smsReqYn" id="smsReqYn2" value="N">
															<label for="smsReqYn2"><span>미수신</span></label>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
				<div class="cs_contactUs_my_footer">
					<a href="#none" class="myQuestion" id="btnSaveQna"><p>등록</p></a>
				</div>
			</div>
		</div>
		<!-- //모달1 -->
	</div>
	<!-- //모달끝 -->
	
<script th:inline="javascript">
/*<![CDATA[*/
	$(document).ready(function() {
		
	});
	
	// 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[name=' + obj.name + 'OrgFileNm]').val(result.oldFileName);
					$('input[name=' + 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;
		}

		mcxDialog.confirm("저장하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				gagajf.ajaxFormSubmit($('#qnaForm').prop('action')
						, '#qnaForm'
						, function() {
							cfnGoToPage(_PAGE_ONETOONE_QNA);
						}
				);
			}
		});
	});
/*]]>*/
</script>

</th:block>

</body>
</html>
