<%@ 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" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="ec" uri="/WEB-INF/tld/ecnet_tld.tld"%>
<%@ taglib prefix="fnc" uri="/WEB-INF/tld/functions.tld"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>  
<%@ page import="itn.com.cmm.LoginVO" %>
<% pageContext.setAttribute("newLineChar", "\n"); %>



<style>
/* Tabulator Placeholder 기본 스타일 유지 */
.tabulator-placeholder {
	font-size: 22px !important; /* 기존 폰트 크기 유지 */
	color: #e2d6d6 !important; /* 기존 색상 유지 */
	font-weight: normal !important; /* 기본 폰트 두께 유지 */
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

</style>

<script type="text/javascript">

var currentSearchKeyword = ""; // 검색어 저장
var currentTabFilter = "전체"; // 현재 선택된 탭 (기본값: 전체)

var $tbDtailList = null; //에러 팝업 영역
$(document).ready(function(){

	// 탭별 하위 버튼 활성화
	fn_rowBtnSH('전체');
	// 주소록 그룹 불러오기
	getAddrGroupList();
	
	//Tabulator AJAX Data Loading
	$tbDtailList = new Tabulator("#detailPopup", {
		height: "255px",
		width: "20%",
		// layout: "fitDataStretch", // 데이터가 너비에 맞게 늘어나도록 설정
		layout: "fitColumns", // fitDataStretch 대신 fitColumns 사용
		autoColumns: false,
		headerHozAlign: "center",
		validationMode: "highlight",
		clipboard: false,
		clipboardCopySelector: "table",
		clipboardPasteAction: "insert", // insert, update, replace
		placeholder:"데이터를 불러오고 있습니다...", 
		columns: [
			{
				title: "휴대폰",
				field: "phone",
				hozAlign: "center",
				headerHozAlign: "center",
				widthGrow: 1
			},
			{
				title: "상세결과",
				field: "result",
				hozAlign: "center",
				headerHozAlign: "center",
				widthGrow: 1
			}
		]
	});
	
	fn_getDetailList();
	

	
	$('#goPageBtn').click(function(){
		$("#goList").submit();
	});
	
	
	
	// 탭 버튼 클릭 이벤트
	$(".tabType3 .tab button").on("click", function () {
	
		// 모든 탭의 active 클래스 제거
		$(".tabType3 .tab").removeClass("active");
	
		// 클릭한 버튼의 부모 요소(li)에 active 클래스 추가
		$(this).parent().addClass("active");
	
		// 기존 버튼들의 title 속성 초기화
		$(".tabType3 .tab button").removeAttr("title");
	
		// 선택된 버튼의 title 속성을 "선택됨"으로 변경
		$(this).attr("title", "선택됨");
	
		// 검색어 초기화
		$("#searchInput").val("");
	
		// 필터 적용 (검색 필터 없이 탭 기준으로만 적용)
		fn_applyFilters();
	});
	
	// 검색 버튼 클릭 시 실행
	$("#searchBtn").on("click", function () {
	    fn_search();
	});

	// 실시간 검색 및 Enter 키 이벤트 처리
	$("#searchInput").on("keyup", function (event) {
		let keyword = $(this).val().trim();
	
		if (keyword.length > 2) {
			fn_applyFilters({ field: "phone", type: "like", value: keyword });
		} else {
			fn_applyFilters(null);
		}
	
		// Enter 키 입력 시 검색 실행
		if (event.key === "Enter") {
			fn_search();
		}
	});
	
	
	
	$('.listClose').on("click", function (){
		tooltipInit();
	});
	
	$('.grpClose').on("click", function (){
		$('#grpNm').val('')
	});
	

	$(document).on('change', '#addrGrpIdInfo', function() {
		if ($("#addrGrpIdInfo option:selected").val() != "NEW") {
			$("#grpNm").val(""); //	새그룹명 Clear;
		}
	});
	
});

//검색 실행 함수
function fn_search() {
	let keyword = $("#searchInput").val().trim();
	
	if (keyword.length < 3) {
		alert("검색어를 3자 이상 입력해주세요.");
		return;
	}
	
	fn_applyFilters({ field: "phone", type: "like", value: keyword });
}

/**
 * @Discription : 튤팁 닫을 때 팝업 초기화
 */
function tooltipInit(){

	$tbDtailList.clearFilter();
	$("#searchInput").val('');
	$("#initTab").click();
}

/** 
 * @Discription : 상세결과 팝업 내용 가져오는 로직
 */
function fn_getDetailList(){
	
	var params = {
			"msgGroupId" : $('#msgGroupId').val()
		}
		
		$.ajax({
			type: "POST",
			url: "/web/mjon/msgsent/findByMsgDetailListAjax.do",
			data: params,
			dataType:'json',
			async: true,
			success: function (returnData) {
				console.log('returnData : ', returnData);
				if(returnData.status == 'OK'){
					fn_setData(returnData.object);
					
				}
			},
			error: function (e) { alert("오류가 발생하였습니다."); console.log("ERROR : ", e); }
		});
}


/** 
 * @Description: 데이터 설정
 */
function fn_setData(data){
// 	console.log('data : ', data);
// 	$tbDtailList.clearData();

	const resultData = [];  // 오류 데이터를 저장할 배열

	data.forEach((row, index) => {

		resultData.push({ 
			// addrNm: row.addrNm, // 폰번호
			phone: row.callTo, // 폰번호
			result: row.statusTxt // 결과 메시지 추가
		});
	});


	// 오류 및 중복 데이터를 한 번에 추가
	$tbDtailList.setData(resultData);
	
	
};



/** 
 * @Discription : 필터 적용
 */
function fn_applyFilters(newFilter) {
	// 현재 적용된 모든 필터 가져오기
	let filters = [];
	
	// 현재 선택된 탭 값 가져오기
	let selectedTab = $(".tabType3 .tab.active button").text().trim();
	
	// 탭 필터 적용 (탭이 "전체"가 아닐 경우)
	if (selectedTab !== "전체") {
	    filters.push({ field: "result", type: "like", value: selectedTab });
	}
	
	// 검색어가 입력된 경우 검색 필터 추가
	if (newFilter && newFilter.value) {
	    filters.push(newFilter);
	}
	
	// 필터 적용
	$tbDtailList.setFilter(filters);
	
	// Placeholder 업데이트
	fn_setPlaceholder("검색 결과가 없습니다.");
	
	// 툽팁 하위 버튼 삭제
	fn_rowBtnSH(selectedTab);
}




/**
 * @Description: 타블레이서 설명 수정 
 */
function fn_setPlaceholder(msg){

	// 검색 후 데이터가 있는지 확인 후 placeholder 변경
	setTimeout(() => {
		let filteredRows = $tbDtailList.getRows('active').length; // 필터링된 행 개수 가져오기
		if (filteredRows === 0) {
			// 기존 데이터 유지하면서 빈 데이터 추가하여 placeholder 변경
			$(".tabulator-placeholder").text(msg); // placeholder 메시지 변경
		} 
	}, 300); // 필터 적용 후 반영되도록 약간의 딜레이 추가
}


/**
 * @Description: 필터링된 데이터만 다운로드
 */
 function fn_downloadFilteredExcel() {
		// 현재 날짜 및 시간 가져오기 (YYYYMMDD_HHMMSS 형식)
		let now = new Date();
		let timestamp = now.getFullYear() +
			("0" + (now.getMonth() + 1)).slice(-2) +
			("0" + now.getDate()).slice(-2) + "_" +
			("0" + now.getHours()).slice(-2) +
			("0" + now.getMinutes()).slice(-2) +
			("0" + now.getSeconds()).slice(-2);
		
		// 파일명 생성
		let fileName = "filtered_data_" + timestamp + ".xlsx";

		// 필터링된 데이터 가져오기
		let filteredData = getFilteredDataByTab();

		if (filteredData.length === 0) {
			alert("다운로드할 데이터가 없습니다.");
			return;
		}

// 		console.log("엑셀 다운로드 - 필터링된 데이터:", filteredData);

		
		
		// 컬럼명(타이틀) 설정 (배열 형태로 변환)
		let headers = [["휴대폰", "상세결과"]];

		console.log(filteredData); // 데이터 확인
		console.log(filteredData[0]); // 첫 번째 데이터 확인 (객체 키값 체크)

		
		// 필터링된 데이터 배열로 변환
		let formattedData = filteredData.map(item => [item.phone, item.result]);



		// 타이틀 행 추가
		formattedData.unshift(headers[0]);

		// 엑셀 생성
		let workbook = XLSX.utils.book_new();
		let worksheet = XLSX.utils.aoa_to_sheet(formattedData); // `aoa_to_sheet` 사용

		XLSX.utils.book_append_sheet(workbook, worksheet, "Filtered Data");

		// 엑셀 파일 다운로드
		XLSX.writeFile(workbook, fileName);
	}
	
/**
 * @ 예약 취소
 */
function fnReservCancel(msgGroupId){
	
	var form = document.resCancelForm;
	var loginVO = '${LoginVO}';
	
	form.msgGroupId.value = msgGroupId;
	
	if(loginVO == "" || loginVO == null){
		
		alert("로그인 후 이용이 가능합니다.");
		return false;
		
	}
	console.log('msgGroupId : ', msgGroupId);
	var data = new FormData(form);
	url = "/web/mjon/reservmsg/deleteReservMsgCancelDataAjax.do";
	
	if(confirm("정말 예약을 취소하시겠습니까?")){
		
		$.ajax({
			type: "POST",
			url: url,
			data: data,
			dataType:'json',
			async: true,
			processData: false,
			contentType: false,
			cache: false,
			success: function (returnData, status) {
				if(status == 'success'){ // status 확인 필요한가. 석세스 안뜨면 에러 가지 않나
					if("fail"==returnData.result){
						alert(returnData.message);
						return false;
					}
				
					alert("예약 발송이 정상적으로 취소 되었습니다.");
					
					location.reload(true);
					
				} else if(status== 'fail'){
					alert(returnData.message);
				}
			},
	        error: function (e) { 
	        	alert("예약 취소에 실패하였습니다."); console.log("ERROR : ", e); 
	        },
			beforeSend : function(xmlHttpRequest) {
	        	//로딩창 show
	        	$('.loading_layer').addClass('active');				
			},	        	        
	        complete : function(xhr, textStatus) {
	        	//로딩창 hide
	        	$('.loading_layer').removeClass('active');
			}
	    });
		
	}
	
}

/**
 * @문자 재전송
 */
function fnMjMsgReSendAll(msgGroupId) {
	// 치환 여부 체크
	var replaceYn = fn_getReplaceChk();
	// 문자 종류 (일반:N, 광고:A, 선거:C, 관리자:S)
	var msgKind = $('#msgKind').val();
	
	var form = document.reSendAllForm;
	form.msgResendAllFlag.value = "Y";
	form.msgResendAllGroupId.value = msgGroupId;

	// 치환문자 포함 여부에 따른 분기
	var msg = "";
	if (replaceYn) {
		msg = "문자발송 화면으로 이동합니다.\n특정문구는 변환되지 않은 상태([*이름*],[*1*] 등)로 표기됩니다.\n문자내용, 받는 사람 목록 확인 후 발송해 주세요";
// 		form.msgResendAllReplaceYn.value = "Y";
	} else {
		var title = (msgKind == 'C') ? "선거문자발송" : "문자발송";
		msg = title + " 화면으로 이동합니다.\n문자내용, 받는 사람 목록 확인 후 발송해주세요.";
	}
	
	if (!confirm(msg)) {
		return;
	}

	// msgKind에 따른 action 설정
	form.action = getMsgActionUrl(msgKind);
	if (msgKind === 'A') {
		form.msgResendAllAdvertiseYn.value = "Y"; // 광고문자 설정
	}
	
	form.submit();
}

function fn_getReplaceChk(){
	// 체크할 패턴 목록
	var patterns = [/\[\*이름\*\]/, /\[\*1\*\]/, /\[\*2\*\]/, /\[\*3\*\]/, /\[\*4\*\]/];

	// 대상 요소의 텍스트 가져오기
	var text = $("#smsTxt").text();

	// 패턴이 포함되어 있는지 확인
	var found = patterns.some(function(pattern) {
		return pattern.test(text);
	});
	
	return found;
}

/**
 * msgKind 값에 따른 action URL 반환
 */
function getMsgActionUrl(msgKind) {
	switch (msgKind) {
		case 'C':
			return "/web/mjon/msgcampain/selectMsgDataView.do";
		case 'A':
			return "/web/mjon/msgdata/excel/selectMsgExcelDataView.do";
		default:
			return "/web/mjon/msgdata/selectMsgDataView.do";
	}
}

function fn_rowBtnSH(tabText){
	var $addReg = $('#addReg');
	var $addRemove = $('#addRemove');
	// addReg 주소록 등록
	// addRemove 주소록 삭제
	if(tabText == '전체'
		|| tabText == '성공'){
		$addReg.show();
		$addRemove.hide();
	}else if(tabText == '대기'){
		$addReg.hide();
		$addRemove.hide();
	}else if(tabText == '실패' ){
		$addReg.hide();
		$addRemove.show();
	}
}


function fnAddAddrNo(){
	
	
	let url = "/web/mjon/addr/insertByAddrGrpDataAndAddrDataAjax.do";
	

	console.log($("#addrGrpIdInfo option:selected").val());
	console.log($("#grpNm").val());
	if ($("#addrGrpIdInfo option:selected").val() == "NEW" 
				&& $("#grpNm").val() == "") {
		alert("저장할 그룹을 선택하거나 새 그룹명을 입력해주세요.");
		return false;		
	}

    // 필터링된 데이터 가져오기 (탭 필터 적용)
    let filteredData = getFilteredDataByTab();

	console.log('filteredData : ', filteredData)
	
    // phone 필드 데이터만 추출
    let addrPhones = filteredData.map(row => row.phone);
// 	console.log('addrPhones : ', addrPhones)

	if(addrPhones.length < 1){
		alert('해당 탭에 데이터가 없습니다.');
		return false;
	}
	
	// 주소록 그룹명 가져오기
	let addrGrpNm = $('#grpNm').val();
	let addrGrpId = $("#addrGrpIdInfo option:selected").val();
	
	// 데이터 객체 생성
	let data = {
		addrPhones : addrPhones
		, addrGrpNm : addrGrpNm
		, addrGrpId : addrGrpId
	};

	if(!confirm("연락처 정보를 주소록에 등록 하시겠습니까?")){
		return false;
	}
	

	$.ajax({
		type: "POST",
		url: url,
		data: JSON.stringify(data),
		dataType: "json",
		contentType: "application/json",
		async: false,
		processData: false,
		success: function(data) {
			
			if(data.status == 'BAD_REQUEST'){
				alert(data.message);
				return false;
			}
			

			// 성공 메세지
			alert(data.message);
			// 그룹등록 팝업 닫기
			$('.grpClose').click();
			
		},
		error: function(error) {
			alert("오류가 발생하였습니다.")
			console.error("에러 발생:", error);
		}
	});
}

function fnDelAddrNo(){
	
	
	let url = "/web/mjon/addr/deleteAddrNoDataAjax.do";
	

    // 필터링된 데이터 가져오기 (탭 필터 적용)
    let filteredData = getFilteredDataByTab();

    // phone 필드 데이터만 추출
    let addrPhones = filteredData.map(row => row.phone);
	console.log('addrPhones : ', addrPhones)

	if(addrPhones.length < 1){
		alert('주소록에 살제할 연락처가 없습니다.');
		return false;
	}
	
	// 데이터 객체 생성
	let data = {
		addrPhones: addrPhones
	};
	
	let selectedTab = $(".tabType3 .tab.active button").text().trim();
	if(!confirm("발송"+selectedTab+" 번호를 주소록에서 삭제하시겠습니까?\n(모든 주소록 그룹에서 삭제)")){
		return false;
	}
	
	$.ajax({
		type: "POST",
		url: url,
		data: JSON.stringify(data),
		dataType: "json",
		contentType: "application/json",
		async: false,
		processData: false,
		success: function(data) {
			
			if(data.status == 'BAD_REQUEST'){
				alert(data.message);
				return false;
			}
			

			// 성공 메세지
			alert(data.message);
			
		},
		error: function(error) {
			alert("오류가 발생하였습니다.")
			console.error("에러 발생:", error);
		}
	});
}
/**
 * @description 현재 선택된 탭(`result` 필터) 기준으로 데이터를 필터링
 * @returns {Array} 필터링된 데이터 리스트
 */
function getFilteredDataByTab() {
	// 현재 적용된 모든 필터 가져오기
	let filters = $tbDtailList.getFilters();
	
	// 현재 모든 데이터 가져오기 (전체 데이터에서 필터 적용)
	let allData = $tbDtailList.getData();
	
	// 현재 적용된 필터에서 "result" 필터만 찾기
	let tabFilter = filters.find(filter => filter.field === "result");
	
	// 탭 필터 적용하여 데이터 필터링 (수신번호 필터는 무시)
	return allData.filter(row => tabFilter ? row.result.includes(tabFilter.value) : true);
}
 

 

//주소록 그룹정보 불러오기
function getAddrGroupList() {
  $.ajax({
      type : "POST",
      async : false,
      url : "/web/mjon/addr/addrGroupListAjax.do",
      data : {},
      dataType:'json',
      success : function(data) {
			//alert(JSON.stringify(data.addrGroupList));

			// Show Html
			getAddrGroupListShow(data.addrGroupList);
      },
      error : function(xhr, status, error) {
          alert(error);
          return false;
      }
  });	    	
}
	
//Show Html
function getAddrGroupListShow(jsonList) {
	var sHtml = "";
	sHtml += "<option value='NEW'>그룹추가</option>";
	sHtml += "<option value='0'>그룹미지정</option>";
	sHtml += "<option value='bookmark'>자주보내는 번호</option>";
	for (var j = 0; j < jsonList.length; j++) {
		sHtml += "	<option value='" + $.trim(jsonList[j].addrGrpId) + "' />" + $.trim(jsonList[j].addrGrpNm) + "</option>";
	}
	    	
	$("#addrGrpIdInfo").html(sHtml);
}
 
</script>
<div class="inner">
	<!-- js 참고용 hidden -->
	<input id="msgGroupId" type="hidden" value="${result.msgGroupId}"/>
	<input id="msgKind" type="hidden" value="${result.msgKind}"/> <!-- 문자종류(일반:N, 광고:A, 선거:C, 관리자:S) -->
	
	<!-- send top -->
	<div class="send_top">
		<!-- 결제관리 - 요금 사용내역 -->
		<div class="rev_admin_cont serv_content current">
			<div class="heading">
				<h2>발송결과 상세</h2>						
				<button type="button" class="button junk" data-tooltip="popupJunk" style="right:0;">통신사 스팸규격안내</button>
			</div>

			<!-- 발송결과 상세 및 미리보기-->
			<div class="send_general">
				<!-- 발송결과 상세 정보 -->
				<div class="resultcont_left">
							<!--발송정보-->
							<div class="res_info">
								<div class="res_info_in">
									<div class="res_info_top clearfix">
										<p>발송정보</p>
										<p><button type="button" class="btnType btnType3"onClick="javascript:fnMjMsgReSendAll('${result.msgGroupId}'); return false;">재전송</button></p>
									</div>
									<div class="res_info_btm">
										<dl>
											<dt>발송일시</dt>
											<dd>
												${result.reqDate}
											</dd>
										</dl>
										<c:if test="${result.reserveYn eq 'Y' }">
										<dl><!-- 예약 시 -->
											<dt>등록일시</dt>
											<dd>${result.regDate }</dd>
										</dl>
										</c:if>
										<c:if test="${result.subjectChkYn eq 'Y'}">
											<dl>
												<dt>제목</dt>
												<dd>${result.subject }</dd>
											</dl>
										</c:if>
										<dl>
											<dt>형태</dt>
											<dd>
												${result.msgType == '4' 
														? '단문' 
														: (result.fileCnt == '0' 
																	? '장문' 
																	: '그림')}
											</dd>
										</dl>
										<dl>
											<dt>발송건수</dt>
											<dd><span class="c_222"><fmt:formatNumber value="${result.msgGroupCnt}" type="number" groupingUsed="true" /></span>건</dd>
										</dl>
										<dl>
											<dt>발신번호</dt>
<%-- 											<dd>${result.callFrom }</dd> --%>
											<dd>${fnc:formatPhone(result.callFrom) }</dd>
										</dl>
										<dl>
											<dt>진행상황
											<!--  예약인 경우 --> 
											<c:if test="${result.reserveYn eq 'Y'}">
													<div class="icon_wrap">
														<div class="re">예약</div>
													<!-- 예약일때만 분할이 있음 -->
													<c:if test="${result.divideYN eq 'Y'}">
														<div class="di_info">
															<button class="di">분할</button>
															<div class="di_hover_layer">
																<strong>${result.divideText }</strong>
<!-- 																<strong>100,000건</strong>씩 <strong>35분</strong> 간격 -->
															</div>
														</div>
													</c:if>
													</div>
											</c:if>
											<!--//  예약인 경우 --> 
											</dt>
											<dd>
											
											<c:choose>
												<c:when test="${result.statusCd eq '04' }">
													예약취소(<c:out value="${result.canceldate }" />)
												</c:when>
												<c:when test="${result.statusCd ne '03' }">
													<ec:code codeId="ITN057" code="${result.statusCd }" />
												</c:when>
												<c:otherwise>
													<p><button class="btnType btnType20" onClick="javascript:fnReservCancel('${result.msgGroupId}'); return false;">예약취소</button></p>
												</c:otherwise>
											</c:choose>
							
								<!--  -->
<!-- 												<button class="btnType btnType20">예약취소</button> -->
											</dd>
											<!--<dd>예약취소 2024-07-16 15:07</dd>--><!-- 예역취소 후 버튼 대신 취소 일시 노출 -->											
										</dl>
									</div>
									<div class="res_info_btm">
										<dl>
											<dt class="btm_charge">발송요금</dt>
											<dd>
												<span class="stcharge">
												<c:choose>
													<c:when test="${result.totPrice eq '-' }">
														0
													</c:when>
													<c:otherwise>
														<fmt:formatNumber value="${result.totPrice }" type="number" groupingUsed="true" minFractionDigits="0" maxFractionDigits="1" />
													</c:otherwise>
												</c:choose>
												</span>원
											</dd>											
											<!--<dd><span class="stcharge">-</span>원</dd>--><!-- 예역취소 후 금액은 하이픈 처리--> 
										</dl>
									</div>
								</div>                                
							</div>
							 <!--// 발송정보-->
							<!--상세결과-->
							<div class="res_info">
								<div class="res_info_in">
									<div class="res_info_top clearfix" style="padding:0 0 10px 0;">
										<p>상세결과</p>
										<p></p>
									</div>
									<div class="res_num">
										<div class="res_info_btm1">
											<dl>
												<dt>전체건수</dt>
												<dd><a href="#" data-tooltip="rev_popup04"><span class="c_222_g"><fmt:formatNumber value="${result.msgGroupCnt}" type="number" groupingUsed="true" /></span>건</a></dd>
											</dl>
										</div>
										<div class="res_info_btm1">
											<dl>
												<dt>성공건수</dt>
												<dd><span class="c_002c9a_g"><fmt:formatNumber value="${result.resultSValue}" type="number" groupingUsed="true" /></span>건(${result.successPct})</dd>
											</dl>
										</div>
									</div>
									<div class="res_num">	
										<div class="res_info_btm1">
											<dl>
												<dt>대기건수</dt>
												<dd><span class="c_666_g"><fmt:formatNumber value="${result.resultWValue}" type="number" groupingUsed="true" /></span>건(${result.waitingPct})</dd>
											</dl>
										</div>
										<div class="res_info_btm1">
											<dl>
												<dt>실패건수</dt>
												<dd><span class="c_e40000_g"><fmt:formatNumber value="${result.resultFValue}" type="number" groupingUsed="true" /></span>건(${result.failedPct})</dd>
											</dl>
										</div>
									</div>
									<p class="table_bottom_txt">* 전체건수를 클릭하면 받는 사람 상세정보를 확인하실 수 있습니다.</p>
								</div>                                
							</div>
							 <!--// 발송결과-->	

				</div>
				<!--// 발송결과 상세 정보 -->

				<!-- 발송결과 미리보기 -->
				<div class="resultcont_right">
					<div class="phone">
						<div class="phoneIn">
							<div>
								<p class="prev_p"><img src="/publish/images/search.png">문자내용</p>
								<div class="text_length2 clearfix" style="display:none;">
									<span class="msg_com msg_short">단문</span>
									<div>
										<span>글자크기</span>
										<button type="button"><img src="/publish/images/content/font_plus.png"></button>
										<button type="button"><img src="/publish/images/content/font_minus.png"></button>
									</div>
								</div>
								<div class="text_length2 clearfix" style="display:none;">
									<span class="msg_com msg_long">장문</span>
									<div>
										<span>글자크기</span>
										<button type="button"><img src="/publish/images/content/font_plus.png"></button>
										<button type="button"><img src="/publish/images/content/font_minus.png"></button>
									</div>
								</div>
								<div class="text_length2 clearfix">
									<span class="msg_com ${result.msgType == '4' 
																? 'msg_short' 
																: (result.fileCnt == '0' 
																		? 'msg_long' 
																		: 'msg_photo')}">
										${result.msgType == '4' 
												? 'SMS' 
												: (result.fileCnt == '0' 
															? 'LMS' 
															: 'MMS')}
									</span>
								
<!-- 									<span class="msg_com msg_photo">포토</span> -->
									<!-- <ul class="photo_msg_num">
										<li onclick="imgClick(0);"><a href="#none">1</a></ li>
										<li onclick="imgClick(1);"><a href="#none">2</a></ li>
										<li onclick="imgClick(2);"><a href="#none">3</a></ li>
									</ul> -->
									<!-- <div>
										<span>글자크기</span>
										<button type="button"><img src="/publish/images/content/font_plus.png"></button>
										<button type="button"><img src="/publish/images/content/font_minus.png"></button>
									</div> -->
								</div>
								<!-- 텍스트 미리보기 -->
								<div class="text_preview">
									<div class="preiew_img">
										<c:forEach var="fileInfo" items="${result.fileInfos}">
											<div class="img_box">
													<img src="<c:url value='/cmm/fms/getImage2.do'/>?atchFileId=<c:out value="${fileInfo.atchFileId}"/>&fileSn=<c:out value="${fileInfo.fileSn}"/>" alt="발송된 그림문자 미리보기" style="width: 100%">
											</div>
										</c:forEach>
									</div>
									<div class="preview_auto">
										<c:if test="${result.msgKind eq 'A' }" >
											<p class="ad_tit">(광고)</p>
										</c:if>
										<p class="realtime" id="smsTxt">
											${fn:replace(result.smsTxt, newLineChar, "<br/>")}
										</p>
										<c:if test="${result.msgKind eq 'A' }" >
											<p class="deny_receipt">무료 거부 0808800858</p>
										</c:if>
									</div>
								</div>
								<!-- //텍스트 미리보기 -->
							</div>
						</div>
						<p class="addText">※ 단말기 설정에 따라 다르게 보일 수 있습니다<p>
					</div>
				</div>
				<!--// 발송결과 미리보기 -->
			</div>			
			<!--// 발송결과 상세 및 미리보기-->
			<!-- 목록-->
			<div class="btn_list_type1">
				<button class="btnType btnType17" id="goPageBtn">목록</button>
			</div>
			<!--// 목록-->

		</div>
	</div>
	<!--// send top -->
</div>



	<!-- 발송대상리스트 팝업 -->
	<div class="tooltip-wrap">
		<div class="popup-com ad_layer rev_popup04" tabindex="0" data-tooltip-con="rev_popup04" data-focus="rev_popup04" data-focus-prev="rev_popup04-close" style="width:530px;">
			<div class="popup_heading">
				<p>발송대상 리스트</p>
				<button type="button" class="tooltip-close listClose" data-focus="rev_popup04-close"><img src="/publish/images/content/layerPopup_close.png" alt="팝업 닫기"></button>
			</div>
			<div class="layer_in">

<!-- 				<div class="gorup_join_cont" style="margin:-15px 0 0 0;"> -->
<!-- 					<div class="group_input"> -->
<!-- 						<div class="input_left">발신번호</div> -->
<%-- 						<div class="input_right type1"><c:out value="${result.callFrom }" /></div> --%>
<!-- 					</div> -->
<!-- 				</div> -->

				<div class="popup_search_type2">							
					<label for="" class="label">검색종류 선택</label>
					<div class="title">수신번호</div>
					<label for="" class="label">검색어입력</label>
					<input type="text" class="send_text" id="searchInput" placeholder="3자 이상 입력하세요." onfocus="this.placeholder=''" onblur="this.placeholder='3자 이상 입력하세요.'">
					<button type="button" id="searchBtn" class="btnType btnType2" style="width:63px; margin:0;">검색</button>
				</div>

				<div class="list_tab_wrap2 type4">
					<ul class="tabType3" id="tabType" name="tabType">
						<li class="tab active"><button type="button" id="initTab" title="선택됨">전체</button></li>
						<li class="tab"><button type="button">대기</button></li>
						<li class="tab"><button type="button">성공</button></li>
						<li class="tab"><button type="button">실패</button></li>
					</ul>
				</div>	
				
				<div class="tb_wrap" id="detailPopup" style="min-height:200px;">
						<!-- 타블레이터 영역 -->
				</div>	
				
				<div class="table_btn clearfix">
					<div class="table_btn_left">
						<button type="button" onclick="fn_downloadFilteredExcel()" class="excel_btn btnType"><i class="downroad"></i>엑셀 다운로드</button>
						<button type="button" id="addReg" data-tooltip="rev_popup02" class="btnType btnType14"><i class="add_img"></i>주소록 등록</button>
						<button type="button" onclick="fnDelAddrNo()" id="addRemove" class="btnType btnType15"><i class="remove_img"></i>주소록에서 번호 삭제</button>
					</div>
				</div>
			</div>
			<div class="popup_btn_wrap2" style="margin: -40px auto 30px auto;">
				<button type="button" class="tooltip-close listClose" data-focus="adr_popup01-close"  data-focus-next="popup02">닫기</button>                      
			</div>

		</div>
	</div>
	<!-- //발송대상 리스트 안내 팝업 -->
	
	<!-- 주소록에 등록 팝업 -->
	<div class="tooltip-wrap">
		<div class="popup-com adr_layer rev_popup02" tabindex="0" data-tooltip-con="rev_popup02" data-focus="rev_popup02" data-focus-prev="rev_popup02-close" style="width: 510px;">
			<div class="popup_heading">
				<p>주소록에 등록</p>
				<button type="button" class="tooltip-close grpClose" data-focus="rev_popup02-close"><img src="/publish/images/content/layerPopup_close.png" alt="팝업 닫기"></button>
			</div>
			<div class="layer_in">				
				<table class="layer_tType1 style1">
					<caption>주소록 그룹선택 표</caption>
					<colgroup>
						<col style="width: 80px">
						<col style="width: auto">
					</colgroup>
					<tbody>
						<tr>
							<th>그룹 선택</th>
							<td>
								<label for="" class="label">그룹 선택</label>
								<select id="addrGrpIdInfo" name="addrGrpIdInfo">
								</select>
								<label for="" class="label">그룹명 입력</label>
								<input type="text" id="grpNm" placeholder="새 그룹명을 입력해주세요." maxlength="24" onfocus="this.placeholder=''" onblur="this.placeholder='새 그룹명을 입력해주세요.'" class="inputLight">
							</td>
						</tr>
					</tbody>
				</table>
				<div class="popup_btn_wrap2">
					<button type="button" onclick="fnAddAddrNo()">등록</button>
					<button type="button" class="tooltip-close grpClose" data-focus="rev_popup02-close" data-focus-next="rev_popup02">닫기</button>
				</div>				
			</div>
		</div>
	</div>
	<!--// 주소록에 등록 팝업 -->
	
	<!-- 이전 리스트 상태(검색조건, 페이징) 그대로 가기 위한 form -->
	<form id="goList" name="goList" method="post" action="/web/mjon/msgsent/selectMsgSentView.do">
		<input type="hidden" name="pageIndex" value="<c:out value="${searchVO.pageIndex}" />" />
		<input type="hidden" name="searchSortCnd" value="<c:out value='${searchVO.searchSortCnd }' />" />
		<input type="hidden" name="searchSortOrd" value="<c:out value='${searchVO.searchSortOrd }' />" />
		<input type="hidden" name="searchCondition01" value="<c:out value='${searchVO.searchCondition01 }' />" />
		<input type="hidden" name="searchCondition02" value="<c:out value='${searchVO.searchCondition02 }' />" />
		<input type="hidden" name="searchStartDate" value="<c:out value='${searchVO.searchStartDate }' />" />
		<input type="hidden" name="searchEndDate" value="<c:out value='${searchVO.searchEndDate }' />" />
		<input type="hidden" name="searchCondition" value="<c:out value='${searchVO.searchCondition }' />" />
		<input type="hidden" name="searchKeyword" value="<c:out value='${searchVO.searchKeyword }' />" />
		<input type="hidden" name="pageUnit" value="<c:out value='${searchVO.pageUnit }' />" />
	</form>
	
	<!-- 예약 취소 -->
	<form id="resCancelForm" name="resCancelForm" method="post">
		<input type="hidden" id="msgGroupId" name="msgGroupId" value=""/>
	</form>	

	<!-- 재발송 form -->
	<form name="reSendAllForm" method="post">
		<input type="hidden" name="msgResendAllFlag" value="N"/>
		<input type="hidden" name="msgResendAllGroupId" value=""/>
		<input type="hidden" name="msgResendAllAdvertiseYn" value="N"/>
		<input type="hidden" name="msgResendAllReplaceYn" value="N"/>		
	</form>

