<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script>
$(document).ready(function(){
	//첫 메뉴 이동 시 > controller에서 키워드 조회해오게 수정, 탭 이동 시 해당 탭에 기존의 키워드가 없으면
	//키워드 on 처리 안하며 문자 샘플은 조회하도록 수정 22.11.09
	/*  if(${searchVO.bestSearchKeyword == null || searchVO.bestSearchKeyword == ''}){
		$(".keyword_box").children('li').eq(0).addClass('active');
	}else{
		var keyword = "${searchVO.bestSearchKeyword}";
		var sameKeyword = "N"
		$('.keyword_tab').each(function(){
		    if($(this).children('a').children('button').text().replace('문자', '') == keyword){
		    	$(this).addClass("active");
		    	sameKeyword = "Y"
		    }
		});
		if(sameKeyword == "N"){
 			$(".keyword_box").children('li').eq(0).addClass('active');
		} 
	}  */
	
	var urlParams = new URL(location.href).searchParams;

	var bestTagType = urlParams.get('bestTagType');
	var bestSearchKeyword = urlParams.get('bestSearchKeyword');
	var bestTagTypeTxt = "";
	
	if(bestTagType == 'S'){
		bestTagTypeTxt = "단문";
	}else if(bestTagType == "L"){
		bestTagTypeTxt = "장문";
	}else{
		bestTagTypeTxt = "그림";
	}
	
	if(bestTagType != null && bestSearchKeyword != null){
		$( 'h2' ).html("베스트 "+bestTagTypeTxt+" 단체문자샘플 - "+bestSearchKeyword);
	}
	
	 var keyword = "${searchVO.bestSearchKeyword}";
		$('.keyword_tab').each(function(){
		    if($(this).children('a').children('button').text().replace('문자', '') == keyword){
		    	$(this).addClass("active");
		    }
		});
		
	if(${searchVO.bestTagType == 'P'}){
		fnPhotoListAjax(1);
	}else{
		fnLetterListAjax(1);	
	}
	
});

//뒤로가기 시 브라우저 페이지 캐싱 문제로 active 가 빠지는 현상으로 인해 추가한 script
window.addEventListener('pageshow', (event) => {
	  $(".tabType4").children('li').eq(0).removeClass("active");
	  $(".tabType4").children('li').eq(1).removeClass("active");		  
	  $(".tabType4").children('li').eq(2).addClass("active");
});

	function fnTagTypeChange(tagType){
	
		var form = document.tagTypeForm;
		form.bestTagType.value = tagType;
		
		form.method = "get";
		form.action = "<c:url value='/web/mjon/msgdata/selectBestMsgDataView.do'/>" 
		form.submit();
	
	}
	
	function fnKeywordChange(keyword){
	
		var form = document.tagTypeForm;
		form.bestSearchKeyword.value = keyword.replace('문자', '');
		form.method = "get";
		form.action = "<c:url value='/web/mjon/msgdata/selectBestMsgDataView.do'/>" 
		form.submit();
	
	}
	
	function fnLetterListAjax(index){
		
 		document.letterForm.pageIndex.value = index;
 		document.letterForm.letterType.value = document.tagTypeForm.bestTagType.value;
 		
 		/* var bestSearchKeyword = $('.keyword_box').find('.active').text().replace("문자","");
 		document.letterForm.bestSearchKeyword.value = bestSearchKeyword; */
		var sendData = $(document.letterForm).serializeArray();
		//문자샘플
		$("#letterLoad").load("/web/mjon/msgdata/selectBestMsgDataListAjax.do", sendData ,function(response, status, xhr){
		}); 
		
	}	
	
	//그림문자 샘플 로드
	function fnPhotoListAjax(index) {
 		document.letterForm.pageIndex.value = index;
 		document.letterForm.letterType.value = "P";
 		/* var bestSearchKeyword = $('.keyword_box').find('.active').text().replace("문자","");
 		document.letterForm.bestSearchKeyword.value = bestSearchKeyword; */ 		
		var sendData = $(document.letterForm).serializeArray();
		$("#letterLoad").load("/web/mjon/msgdata/selectBestPhotoMsgDataListAjax.do", sendData, function(response, status, xhr) {
			
		});
	}
	
	function fnMainLetterSendMsg(letterId){
		
		var form = document.mainImgSendForm;
		form.letterId.value = letterId;
		form.mainLetterFlag.value = "Y";
		
		form.action = "<c:url value='/web/mjon/msgdata/selectMsgDataView.do'/>";
		form.submit();
		
		
	}	

	function fnMainImgSendMsg(atchFileId, fileSn, strImgPath){
		
		console.log(" // " + atchFileId + " // " + fileSn + " // " + strImgPath);
		
		var form = document.mainImgSendForm;
		
		form.atchFileId1.value = atchFileId;
		form.fileSn.value = fileSn;
		form.strImgPath.value = strImgPath;
		form.mainImgFlag.value = "Y";
		
		form.action = "<c:url value='/web/mjon/msgdata/selectMsgDataView.do'/>";
		form.submit();
		
	}
</script>
        <div class="inner">
            <!-- send top -->
            <div class="send_top">
                
                <ul class="tabType4">
                    <li class="tab"><button type="button" onclick="TabType5(this,'1');location.href='/web/info/mjonInfo.do'">서비스소개</button></li>
                    <li class="tab"><button type="button" onclick="TabType5(this,'2');location.href='/web/info/mjonFunc.do'">주요기능</button></li>
                    <li class="tab active"><button type="button" onclick="TabType5(this,'3');location.href='/web/mjon/msgdata/selectBestMsgDataView.do'">베스트 문자샘플</button></li>
                </ul>

                <div class="serv_content current" id="tab5_1">
                    <div class="heading">
                        <h2>베스트 문자샘플</h2>
                    </div>

                    <div class="intro_cont">
                        <div class="intro_link_wrap">
                            <div class="title">문자온 소개</div>
                            <ul class="link_box">
                            	<c:forEach var="mainTagList" items="${mainTagList}" varStatus="status">
                            		<li><a href="${mainTagList.url}">${mainTagList.tagNm}</a></li>	
                            	</c:forEach>
                            </ul>
                        </div>
                        
                        <div class="intro_keyword_wrap">
                            <div class="title">문자샘플키워드
                                <ul class="tab_wrap"> 
                                    <li class="tab <c:if test='${searchVO.bestTagType eq "S"}'>active</c:if>"><a href='/web/mjon/msgdata/selectBestMsgDataView.do?bestTagType=S<c:if test="${searchVO.bestSearchKeyword ne null && searchVO.bestSearchKeyword ne '' }">&bestSearchKeyword=${searchVO.bestSearchKeyword}</c:if>'><button type="button" >단문문자</button></a></li>
                                    <li class="tab <c:if test='${searchVO.bestTagType eq "L"}'>active</c:if>"><a href='/web/mjon/msgdata/selectBestMsgDataView.do?bestTagType=L<c:if test="${searchVO.bestSearchKeyword ne null && searchVO.bestSearchKeyword ne ''}">&bestSearchKeyword=${searchVO.bestSearchKeyword}</c:if>'><button type="button">장문문자</button></a></li>
                                    <li class="tab <c:if test='${searchVO.bestTagType eq "P"}'>active</c:if>"><a href='/web/mjon/msgdata/selectBestMsgDataView.do?bestTagType=P<c:if test="${searchVO.bestSearchKeyword ne null && searchVO.bestSearchKeyword ne ''}">&bestSearchKeyword=${searchVO.bestSearchKeyword}</c:if>'><button type="button">그림문자</button></a></li>
                                    <!-- 검색엔진을 위한 function이 아닌 링크처리 -->
<%--                                     <li class="tab <c:if test='${searchVO.bestTagType eq "S"}'>active</c:if>"><button type="button" onclick="javascript:fnTagTypeChange('S');">단문문자</button></li>
                                    <li class="tab <c:if test='${searchVO.bestTagType eq "L"}'>active</c:if>"><button type="button" onclick="javascript:fnTagTypeChange('L');">장문문자</button></li>
                                    <li class="tab <c:if test='${searchVO.bestTagType eq "P"}'>active</c:if>"><button type="button" onclick="javascript:fnTagTypeChange('P');">그림문자</button></li> --%>
                                </ul>
                            </div>

                            <ul class="keyword_box">
                            	<c:forEach var="bestMsgDataList" items="${bestMsgDataList}" varStatus="status">
                            		<li class="tab keyword_tab" ><a href='/web/mjon/msgdata/selectBestMsgDataView.do?bestTagType=${searchVO.bestTagType}&bestSearchKeyword=${fn:replace(bestMsgDataList.tagNm, '문자', '')}'><button type="button">${bestMsgDataList.tagNm}</button></a></li>
                            		<!-- 검색엔진을 위한 function이 아닌 링크처리 -->	
<%--                             		<li class="tab keyword_tab" ><button type="button" onclick="javascript:fnKeywordChange('<c:out value="${bestMsgDataList.tagNm}"/>');">${bestMsgDataList.tagNm}</button></li>	 --%>
                            	</c:forEach>
                            </ul>
                            <form id="letterForm" name="letterForm" method="get">
                            	<input type="hidden" name="pageIndex" value="">
                            	<input type="hidden" name="pageUnit" value="10">
                            	<input type="hidden" name="letterType" value="">
                            	<input type="hidden" name="bestSearchKeyword" value="<c:out value='${searchVO.bestSearchKeyword }'/>">
	                            
                            	<div id="letterLoad">
	                            </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div><!-- 고객센터 - 상세페이지 -->

        </div>
		<form id="tagTypeForm" name="tagTypeForm" method="get">
			<input type="hidden" name="bestTagType" value="${searchVO.bestTagType}"/>
			<input type="hidden" name="bestSearchKeyword" value="${searchVO.bestSearchKeyword}"/>
		</form>
	<form id="mainImgSendForm" name="mainImgSendForm" method="post">
		<input type="hidden" id="atchFileId1" name="atchFileId1" value=""/>
		<input type="hidden" id="fileSn" name="fileSn" value=""/>
		<input type="hidden" id="strImgPath" name="strImgPath" value=""/>
		<input type="hidden" id="letterId" name="letterId" value=""/>
		<input type="hidden" id="mainImgFlag" name="mainImgFlag" value="N"/>
		<input type="hidden" id="mainMoreSamFlag" name="mainMoreSamFlag" value="N"/>
		<input type="hidden" id="mainLetterFlag" name="mainLetterFlag" value="N"/>
	
	</form>		