<%@ 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="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page import="itn.com.cmm.LoginVO" %>

<!-- <script src="/publish/js/content.js"></script> -->

<script type="text/javascript">

var loginVO = '${loginVO}';
var msgResendAllAdvertiseYn = "${msgResendAllAdvertiseYn}";
var msgResendAllFlag = "${msgResendAllFlag}";
var msgResendAllGroupId = "${msgResendAllGroupId}";
var msgResendAllReplaceYn = "${msgResendAllReplaceYn}";

//맞춤제작 내보관함 이미지 선택시 처리
var customImgFlag = '${customImgVO.customImgFlag}';
var customAtchFileId = '${customImgVO.atchFileId1}';
var customFileSn = '${customImgVO.fileSn}';
var customStrImgPath = '${customImgVO.strImgPath}';

//메인화면 그림문자 이미지 선택시 처리
var mainImgFlag = '${mainImgVO.mainImgFlag}';
var mainAtchFileId = '${mainImgVO.atchFileId1}';
var mainFileSn = '${mainImgVO.fileSn}';
var mainStrImgPath = '${mainImgVO.strImgPath}';

//메인화면 인기문자 메세지 선택시 처리
var mainLetterFlag = '${mainLetterVO.mainLetterFlag}';
var mainSmsTxt = '${mainLetterVO.smsTxt}';

//공통 설정
var cateNo = "${cateCodeVO.cateNo}";
var mainLetterTypeFlag = '${searchVO.mainLetterTypeFlag}';
var moreSamFlag = '${moreSampleYn}';

//문자 재전송 처리
var msgResendFlag = '${reSendMsgVO.msgResendFlag}';
var msgSeqList = [];
msgSeqList = '${reSendMsgVO.msgSeqList}';

//주소록에서 주소를 전송한 경우 처리
var moveAddrFlag = '${addrVO.moveAddrFlag}';
var addrIdList = [];
addrIdList = '${addrVO.addrIdList}';


$(document).ready(function(){
	console.log('loginVO : ', loginVO);
	// 내보관함 리스트 로그인이 완료된 경우에만 로드되도록
	if(loginVO != "" && loginVO != null){
		//최 하단 내문자함 탭 리스트 내용 불러오기
		fnMyMsgListAjax(1);
	}	
});

</script>


<script type="text/javascript" src="<c:url value='/js/web/msgdata/msgDataView.js?date=20241218'/>"></script>
<script type="text/javascript" src="<c:url value='/js/web/msgdata/init.js?date=20241218'/>"></script>



    <div class="progress_bar_wrap">
        <div class="progress_box">
            <p class="time_text">0%</p>
            <div class="bar">
                <span class="change_bar"></span>
            </div>
        </div>
        <div class="btn_wrap">
        </div>

    </div>

	<div class="tooltip-wrap">
		<!-- 문자발송 성공 레이어팝업 -->
		<div class="popup-com pop_msg_success">
			<div class="popup_heading">
				<p>문자 전송 결과</p>
				<button type="button" class="tooltip-close" onclick="msgSuccessClose(this);"><img src="/publish/images/content/layerPopup_close.png" alt="팝업 닫기"></button>
			</div>
			<div class="layer_in">
				<div class="msg_text">발송 성공 : <strong>1</strong> 건,수신거부 : <span>0</span>건의<br>문자가 발송 되었습니다.</div>
			</div>
			<div class="popup_btn">
				<button type="button" onclick="msgResultLink(); return false;">문자 발송결과 바로가기</button>                      
				<button type="button" class="tooltip-close" onclick="msgSuccessClose(this);">확인</button>                      
			</div>
		</div>
	</div>
	<div class="tooltip-wrap">
		<!-- 문자발송 실패 레이어팝업 -->
		<div class="popup-com pop_msg_fails">
			<div class="popup_heading">
				<p>문자 전송 결과</p>
				<button type="button" class="tooltip-close" onclick="msgFailsClose(this);"><img src="/publish/images/content/layerPopup_close.png" alt="팝업 닫기"></button>
			</div>
			<div class="layer_in">
				<div class="msg_text">발송 성공 : <strong>1</strong> 건,수신거부 : <span>0</span>건의<br>문자가 발송 되었습니다.</div>
			</div>
			<div class="popup_btn">
				<button type="button" class="tooltip-close" onclick="msgFailsClose(this);">확인</button>                      
			</div>
		</div>
	</div>
	<div class="tooltip-wrap">
		<!-- 문자발송 스팸 이용정지 레이어팝업 -->
		<div class="popup-com pop_msg_spam">
			<div class="popup_heading">
				<p>문자 전송 결과</p>
				<button type="button" class="tooltip-close" onclick="msgSpamClose(this);"><img src="/publish/images/content/layerPopup_close.png" alt="팝업 닫기"></button>
			</div>
			<div class="layer_in">
				<div class="msg_text"></div>
			</div>
			<div class="popup_btn">
				<button type="button" class="tooltip-close" onclick="msgSpamClose(this);">확인</button>                      
			</div>
		</div>
	</div>
	<div class="inner">
		<!-- send top -->
		<div class="send_top">
			<!-- tab button -->
			<ul class="tabType1">
				<li class="tab ${tabDision eq 'tab01' ? 'active' : ''}">
					<button type="button" onclick="javascript:fnMsgDataView(); return false;">일반문자</button>
				</li>
				<li class="tab ${tabDision eq 'tab02' ? 'active' : ''}">
					<button type="button" onclick="javascript:fnMsgExcelDataView(); return false;">대량문자(광고문자)</button>
				</li>
			</ul><!--// tab button -->
			<!-- tab content1 -->
			<!-- <span id="contentArea"></span> -->
			<div class="top_content  ${tabDision eq 'tab02' ? 'get_excel' : ''} current contentArea" id="tab1_1" style="min-height: 555px;"></div>
			
			<!-- tab content2 -->
			<!-- <span id="contentExcelArea"></span> -->
			<!-- <div class="top_content current get_excel contentExcelArea" id="tab1_2"></div> -->
		</div><!--// send top -->
	<!-- send bottom -->
	<div class="send_bottom">
		<!-- tab button -->
		<ul class="tabType2 selectedTab" id="tabType2" name="tabType2">
			<li class="tab active">
				<button type="button" class="" onclick="TabType2(this,'1');">문자 샘플</button>
			</li>
			<li class="tab">
				<button type="button" onclick="TabType2(this,'2');">그림문자 샘플</button>
			</li>
			<li class="tab">
				<button type="button" onclick="TabType2(this,'3');">지도/약도 추가</button>
			</li>
			<li class="tab">
				<button type="button" onclick="TabType2(this,'4');">내 문자함</button>
			</li>
		</ul>
		<!--// tab button -->
		<!-- tab content1 -->
		<form id="letterForm" name="letterForm" method="post">
			<input type="hidden" id="letterType" name="letterType" value="<c:out value='${letterVO.letterType}'/>"/>
			<input type="hidden" id="memberType" name="memberType" value="<c:out value='${letterVO.memberType}'/>"/>
			<input type="hidden" id="categoryCode" name="categoryCode" value="<c:out value='${letterVO.categoryCode}'/>"/>
			<input type="hidden" id="hashTag" name="hashTag" value="<c:out value='${letterVO.hashTag}'/>"/>
			<input type="hidden" id="pageIndex" name="pageIndex" value="<c:out value='${letterVO.pageIndex}' default='1' /> "/>
			<input type="hidden" id="pageUnit" name="pageUnit" value="<c:out value='${letterVO.pageUnit}'/>"/>
			<input type="hidden" id="upperCateNo" name="upperCateNo" value=""/>
		
			<div class="search_sample">
				<input type="text" id="searchKeyword" name="searchKeyword" value="<c:out value='${letterVO.searchKeyword}'/>" placeholder="문자샘플 검색하기" onfocus="this.placeholder=''" onblur="this.placeholder='문자샘플 검색하기'" maxlength="10">
				<button class="btnSearchF"><img src="/publish/images/search02.png" alt=""></button>
			</div>
			<!-- tab content1 -->
			<div class="bottom_content current" id="tab2_1">
				<div class="area_tabs">
					<div class="top_tab">
						<!-- <div class="tab_depth1 tDep1_mType">
							<a href="#none" class="on" value="">전체</a>
							<a href="#none" value="B">기업</a>
							<a href="#none" value="P">개인</a>
							<div class="on_active">전체</div>
						</div> -->
						<div class="tab_depth2 tDep1_letType">
							<a href="#none" class="on" value="S">단문문자</a>
							<a href="#none" value="L">장문문자</a>
						</div>
						<select name="LPageUnit" id="LPageUnit" class="selType2" onChange="fnLPageUnit(); return false;">
							<option value="10">2줄보기</option>
							<option value="20">4줄보기</option>
							<option value="30">6줄보기</option>
						</select>
						<div class="customReq">
							<%-- 맞춤제작 요청 JSPark => 2023.02.21 추가 --%>
							<%--
							<input type="hidden" id="customPopupOpen" data-tooltip="popup01">
							<button type="button" onclick="openMsgCustomPopup(); return false;"><i></i>맞춤제작 요청</button>					
							--%>		
							<button type="button" onClick="location.href='/web/mjon/custom/selectMsgCustomView.do'"><i></i>맞춤제작 요청</button>
						</div>
					</div>
					<div class="bottom_tab">
						<div class="tab_depth3 tDep1_cateCode">
							<a href="#none" class="on cateAll" value="">All</a>
							<a href="#none" value="best">BEST</a>
							<c:forEach var="cateList" items="${cateCodeList}" varStatus="status">
								<a href="#none" value="<c:out value='${cateList.cateCode}'/>"><c:out value="${cateList.cateNm}"/></a>
							</c:forEach>
						</div>
						<div class="tab_depth4 tDep1_threeCateCode" id="tDep1_depThrCateCode"> <!-- 해쉬태그 삭제 및 하위 카테고리 추가로 인해 class="tDep1_hashTag" 삭제 -->
							<!-- 하위 카테고리(3뎁스)로 대체 -->
							<%-- <a href="#none" class="on hashAll" value="">전체</a>
							<c:forEach var="hashList" items="${hashTagList}" varStatus="status">
								<a href="#none" value="${hashList.hashNm}">#<c:out value="${hashList.hashNm}"/></a>
							</c:forEach> --%>
						</div>
					</div>
				</div>
				<div id="letterLoad">
				</div>
			</div><!--// tab content1 -->
			<!--// tab content2 -->
			<div class="bottom_content" id="tab2_2">
				<div class="area_tabs">
					<div class="top_tab">
						<!-- <div class="tab_depth1 tDep2_mType">
							<a href="#none" class="on" value="">전체</a>
							<a href="#none" value="B">기업</a>
							<a href="#none" class="on" value="P">개인</a>
							<div class="on_active">전체</div>
						</div> -->
						<div class="tab_depth2 tDep2_letType">
							<a href="#none" class="on" value="P">그림문자</a>
						</div>
						<select name="PhPageUnit" id="PhPageUnit" class="selType2" onChange="fnPhPageUnit(); return false;">
							<option value="10">2줄보기</option>
							<option value="20">4줄보기</option>
							<option value="30">6줄보기</option>
						</select>
						<div class="customReq">
							<%-- 맞춤제작 요청 JSPark => 2023.02.21 추가 --%>
							<%--
							<input type="hidden" id="customPopupOpen" data-tooltip="popup01">
							<button type="button" onclick="openMsgCustomPopup(); return false;"><i></i>맞춤제작 요청</button>					
							--%>		
							<button type="button" onClick="location.href='/web/mjon/custom/selectMsgCustomView.do'"><i></i>맞춤제작 요청</button>
						</div>
					</div>
					<div class="bottom_tab">
						<div class="tab_depth3 tDep2_cateCode">
							<a href="#none" class="on cateAll" value="">All</a>
							<a href="#none" value="best">BEST</a>
							<c:forEach var="cateList" items="${cateCodeList}" varStatus="status">
								<a href="#none" value="<c:out value='${cateList.cateCode}'/>"><c:out value="${cateList.cateNm}"/></a>
							</c:forEach>
						</div>
						<div class="tab_depth4 tDep2_threeCateCode" id="tDep2_depThrCateCode"><!-- 해쉬태그 삭제 및 하위 카테고리 추가로 인해 class="tDep2_hashTag" 삭제 -->
							<!-- 하위 카테고리(3뎁스)로 대체 -->
							<%-- <a href="#none" class="on hashAll" value="">전체</a>
							<c:forEach var="hashList" items="${hashTagList}" varStatus="status">
								<a href="#none" value="${hashList.hashNm}">#<c:out value="${hashList.hashNm}"/></a>
							</c:forEach> --%>
						</div>
					</div>
				</div>
				<div id="photoLoad">
			    </div>
				<!-- pagination -->
			</div><!--// tab content2 -->
		</form>
		
		<!--tab content3 -->
		<div class="bottom_content" id="tab2_3">
			<div class="map_search">
				<label for="" class="label"></label>
				<div class="mapWrap">
					<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
					<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=7fc7b80a3e32ac964da92f6aa3d6000d&libraries=services"></script>
					<input type="text" id="sample5_address" placeholder="도로명 또는 지번을 입력해주세요." onfocus="this.placeholder=''" onblur="this.placeholder='도로명 또는 지번을 입력해주세요.'">
					<button type="button" class="btnType map_check" onclick="sample5_execDaumPostcode()">확인</button>
					<button type="button" class="btnType map_add" onclick="insertajax();">약도링크 추가</button>
					<p><span class="vMiddle">*</span> 지도링크는 입력메시지 끝부분에 추가됩니다.</p>
					<div id="map" style="width:100%;height:450px; margin-top: 10px;">&nbsp;</div>
					
					<div class="mapInfo">
					</div>
				</div>
			</div>
			<script>
			    var mapContainer = document.getElementById('map'), // 지도를 표시할 div
			        mapOption = {
			            center: new daum.maps.LatLng(37.613898152040385, 127.15319231152851), // 지도의 중심좌표
			            level: 5 // 지도의 확대 레벨
			        };
			
			    //지도를 미리 생성
			    var map = new daum.maps.Map(mapContainer, mapOption);
			    //주소-좌표 변환 객체를 생성
			    var geocoder = new daum.maps.services.Geocoder();
			    //마커를 미리 생성
			    var marker = new daum.maps.Marker({
			        position: new daum.maps.LatLng(37.613898152040385, 127.15319231152851),
			        map: map
			    });
			    var testcoords = new daum.maps.LatLng(37.613898152040385, 127.15319231152851);
			    setTimeout(function(){ 
			    	map.relayout();
			    	map.setCenter(testcoords);
			    }, 5000);
			    
				//lat 위도 lng 경도
			    var paramLat;
			    var paramLng;
			    
			    function sample5_execDaumPostcode() {
			        new daum.Postcode({
			            oncomplete: function(data) {
			                var addr = data.address; // 최종 주소 변수
			
			                // 주소 정보를 해당 필드에 넣는다.
			                document.getElementById("sample5_address").value = addr;
			                // 주소로 상세 정보를 검색
			                geocoder.addressSearch(data.address, function(results, status) {
			                    // 정상적으로 검색이 완료됐으면
			                    if (status === daum.maps.services.Status.OK) {
			
			                        var result = results[0]; //첫번째 결과의 값을 활용
			
			                        // 해당 주소에 대한 좌표를 받아서
			                        var coords = new daum.maps.LatLng(result.y, result.x);
			                        // 지도를 보여준다.
			                        mapContainer.style.display = "block";
			                        map.relayout();
			                        // 지도 중심을 변경한다.
			                        map.setCenter(coords);
			                        // 마커를 결과값으로 받은 위치로 옮긴다.
			                        marker.setPosition(coords)
			                        paramLat = result.y;
			                        paramLng = result.x;
			                        
			                    }
			                });
			            }
			        }).open({
			        	q: document.getElementById("sample5_address").value
			        });
			    }
			    
			    function insertajax(){
			    	if(typeof paramLat == 'undefined' ||typeof paramLng == 'undifined'){
			    		alert("주소를 검색해 주세요.");
			    		return;
			    	}
			    	var mapInsertConfirm = confirm('약도를 추가하시겠습니까?');
			    	
			    	if(mapInsertConfirm){
				    	$.ajax({
				            cache : false,
				            url : "<c:url value='/MapUrlInsertAjax.do'/>", 
				            type : 'POST', 
				            data : {
				            	"mapLat" : paramLat,
				            	"mapLng" : paramLng
				            },
				            dataType:'json',
				            success : function(returnData, status){
				    			if(status == "success") {
				    				if (returnData.url != 0) {
				    					var smsTxttmp = $('#smsTxtArea').val();
				    					
				    					/* document.getElementById("testarea").value = returnData.url + "/MapUrl.do?seq=" + returnData.seq; */
				    					$('#smsTxtArea').val(smsTxttmp+returnData.url + "/MapUrl.do?seq=" + returnData.seq);
				    					
				    					smsTxttmp = $('#smsTxtArea').val();
				    					
				    					fnByteString(smsTxttmp);
				    				}
				    			}else{ alert("ERROR!");return;} 
				    		},
				    
				            error : function(request , status, error){
				    			alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
				    			
				            }
				        });
			    	}
			    	else{
			    		alert("취소되었습니다.");
			    	}
			    } 
			</script>
		</div><!--// tab content3 -->
		<!-- tab content4 -->
		<form id="myMsgForm" name="myMsgForm" method="post">
			<input name="pageIndex" type="hidden" value="1"/>
			<input name="msgIdList" type="hidden" value=""/>
			<input name="pageUnit" type="hidden" value=""/>
			<input name="searchSortOrd" type="hidden" value="desc"/>
			
			<div class="bottom_content" id="tab2_4">
				<div class="search_wrap clearfix">
		            <div class="btn_left">
		                    <span>· 기간</span>
		                    <div class="calendar_wrap">
								<input type="text" class="startDate inp calendar" title="검색 시작일" id="startDate" name="myMsgStDt" value="" data-datecontrol="true">
								<span class="dateEtc">~</span>
								<input type="text" class="endDate inp calendar" title="검색 종료일" id="endDate" name="myMsgEndDt" value="" data-datecontrol="true">
							</div>
		                    <div class="search">
		                        <label for="searchWord" class="label"></label>
		                        <input type="text" id="searchWord" name="searchKeyword" placeholder="내 문자함 검색" onfocus="this.placeholder=''" onblur="this.placeholder='내보관함 검색'" maxlength="10">
		                    <button type="button" class="btnType btnType2" onclick="javascript:fnMyMsgSearchListAjax(1); return false;">검색</button>
		                </div>
		            </div>
		            <div class="btn_right">
		                <button type="button" id="sortOrd" name="sortOrd" onClick="javascript:fnMyMsgSearchListOrd(); return false;"><span id="sortCnd">최근순</span><i></i></button>
		                <select name="msgType" id="msgType1" class="selType2" onChange="fnMyMsgSearchListAjax(1); return false;">
		                    <option value="">전체보기</option>
		                    <option value="S">단문문자</option>
		                    <option value="L">장문문자</option>
		                    <option value="P">그림문자</option>
		                </select>
		                <select name="msgPageUnit" id="msgPageUnit" class="selType2" onChange="fnMsgPageUnit(); return false;">
		                    <option value="10">2줄보기</option>
		                    <option value="20">4줄보기</option>
		                    <option value="30">6줄보기</option>
		                </select>
		            </div>
		        </div>
				<div id="myMsgLoad">
				</div>
			</div><!--// tab content4 -->
		</form>
	</div><!-- inner close -->
	
	<!-- 맞춤제작 요청 레이어 팝업 -->
	<div class="tooltip-wrap" id="customPopup">
	</div>
	<!--// 맞춤제작 요청 레이어 팝업 -->		
</div>
<form id="msgResendForm" name="msgResendForm" method="post">
	<input name="msgResendFlag" type="hidden" value="N"/>
	<input name="msgSeqList" type="hidden" value=""/>
</form>
<form id="moveAddrForm" name="moveAddrForm" method="post">
	<input name="moveAddrFlag" type="hidden" value="N"/>
	<input name="addrIdList" type="hidden" value=""/>
</form>
<form id="goPageAjax" name="goPageAjax" method="post">
	<input name="tabDision" type="hidden" value="<c:out value='${tabDision }'/>"/>
</form>
