<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="ec" uri="/WEB-INF/tld/ecnet_tld.tld"%>
<%   
	response.setHeader("Cache-Control","no-store");   
	response.setHeader("Pragma","no-cache");   
	response.setDateHeader("Expires",0);   
	if (request.getProtocol().equals("HTTP/1.1")) response.setHeader("Cache-Control", "no-cache"); 
%> 
<!DOCTYPE html>
<html lang="ko">
<head>
<title>배너클릭통계</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="<c:url value='/js/EgovMultiFile.js'/>"></script>
<script type="text/javascript" src="<c:url value='/js/EgovCalPopup.js'/>"></script>
<script type="text/javaScript" language="javascript">
$(document).ready(function(){
	var date = new Date();
	var year = date.getFullYear();
	
	var startY = Number(year);
	var endY = 2021;
	for(var y = startY; y>= endY; y-- ){
		$('#searchYear').append("<option value='"+y+"'>" + y+"년"+"</option>")
	}
		
	$('#searchYear').find('option[value="${searchVO.searchYear}"]').attr("selected",true);
	
	fnCalChange("<c:out value='${searchVO.searchDateType}' />");	
	$('#ntceBgndeYYYMMDD').val($('#ntceBgnde').val()) ;
	$('#ntceEnddeYYYMMDD').val($('#ntceEndde').val()) ;
 	
	if( $('#ntceBgndeYYYMMDD').val() == '' || $('#ntceEnddeYYYMMDD').val() == '' ){
		 fnSetCalMonth("1") ;		
	}
	
	console.log("메뉴코드============"+ "${searchVO.menuCode}") ;	
	console.log("배너코드============"+ "${searchVO.bannerCode}") ;	
	
	$('#menuCode').find('option[value="${searchVO.menuCode}"]').attr("selected",true);	
	$('#bannerCode').find('option[value="${searchVO.bannerCode}"]').attr("selected",true);	
	
	$("#bannerCode2").hide();	// 배너코드 참조용 - 메뉴코드 변경이벤트시 보여지는 배너코드 내역을 수정하여 배너코드의 원본코드 내역 필요함.  

	if( "${searchVO.menuCode}" == ''  ){
		fnMenuCodeChange("01") ;		
	} else 
	{
		fnMenuCodeChange("${searchVO.menuCode}") ;		
	}
	
	
});

//메뉴코드 변경시 이벤트
function fnMenuCodeChange(menuCode)
{
	console.log( "fnMenuCodeChange bannerCode2 값 갯수:  " + $("#bannerCode2  option").length ) ;	
	if(menuCode == '01') { // 메인 화면일때 전체 팝업 내역 
		$('#bannerCode').empty() ;
		varSelectCount = $("#bannerCode2  option").length ; 
		for(var y = 0; y< varSelectCount ; y++ ){

			varVal = $("#bannerCode2 option:eq(" + y + ")").val() ; 
			varText = $("#bannerCode2 option:eq(" + y + ")").text();	
			
			$('#bannerCode').append("<option value='"+varVal+"'>" + varText +"</option>")

		}
		$('#bannerCode').find('option[value="${searchVO.bannerCode}"]').attr("selected",true);
	} else if(menuCode == '02') { // 로그인 화면일때 전체 팝업 내역 : 원키퍼, 간판다움 
		$("#bannerCode option:eq(3)").remove();
	    $("#bannerCode option:eq(2)").remove();		
	}
}

// 일별/월별/연별 셀렉트박스 변경시 이벤트
function fnCalChange(type) {
	
	if(type == 'D') {
		$("#calMonth").show();		
		$(".calendar_box").show();
		$(".line").show();		
		$("#searchYear").hide();
	} else if(type == 'M') {
		$("#calMonth").hide();		
		$(".calendar_box").hide();
		$(".line").hide();		
		$("#searchYear").show();
		document.getElementById("tbDateType").value = "월" ;
		console.log("월 선택============") ;
		
	} else if(type == 'Y') {
		$("#calMonth").hide();		
		$(".calendar_box").hide();
		$(".line").hide();		
		$("#searchYear").show();
	}
}



function fn_search(){
	linkPage(1);
}

function linkPage(pageNo){
	var listForm = document.listForm ;
	listForm.pageIndex.value = pageNo ;
	
	if( $('#ntceBgndeYYYMMDD').val() != '' && $('#ntceEnddeYYYMMDD').val() != '' ){
		var iChkBeginDe = Number($('#ntceBgndeYYYMMDD').val().replaceAll("-", ""));
		var iChkEndDe =  Number($('#ntceEnddeYYYMMDD').val().replaceAll("-", ""));
		if(iChkBeginDe > iChkEndDe || iChkEndDe < iChkBeginDe ){
			alert("검색 시작 일자는 종료 일자 보다 클 수 없습니다.");
			return;
		}
	}
	
	$('#ntceBgnde').val($('#ntceBgndeYYYMMDD').val()) ;
	$('#ntceEndde').val($('#ntceEnddeYYYMMDD').val()) ;
	
	listForm.submit();
}

/* 날짜 초기화  */
function init_date(){
	$('#ntceBgndeYYYMMDD').val('');
	$('#ntceEnddeYYYMMDD').val('');
	$('#ntceBgnde').val('');
	$('#ntceEndde').val('');
}

//기간선택 select
function fnSetCalMonth(val) {
	if(val == 0) {
		init_date();
		return;
	}
	
	var form = document.listForm;
	var today = new Date();

	var year = today.getFullYear();
	var month = ("0"+(today.getMonth()+1)).slice(-2);
	var date = ("0"+today.getDate()).slice(-2);

	var sDate = new Date(today.setMonth(today.getMonth() - val));

	var sYear = sDate.getFullYear();
	var sMonth = ("0"+(sDate.getMonth()+1)).slice(-2);
	var sDate = ("0"+sDate.getDate()).slice(-2);
	
	form.ntceBgndeYYYMMDD.value = sYear + "-" + sMonth + "-" + sDate;
	form.ntceEnddeYYYMMDD.value = year + "-" + month + "-" + date;
	
}
</script>
<style>
.calBtn {
    border: none;
    background-color: transparent !important;
    background-image: url(/pb/img/common/calendarIcon.png);
    background-repeat: no-repeat;
    width: 25px;
    height: 25px !important;
    vertical-align: middle;
    margin-left: -38px !important;
    margin-top: -2px !important;
    cursor: pointer;
}
</style>
</head>
<body>

<compress:html>


<form name="listForm" action="<c:url value='/sym/log/clg/bannerClickStat.do'/>" method="post">
	<input name="pageIndex" type="hidden" 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="ntceBgnde" id="ntceBgnde"  value="<c:out value="${searchVO.ntceBgnde}" />">
	<input type="hidden" name="ntceEndde" id="ntceEndde"  value="<c:out value="${searchVO.ntceEndde}" />">
	
	<div class="contWrap">
		<div class="pageTitle">
			<div class="pageIcon"><img src="/pb/img/pageTitIcon4.png" alt=""></div>
			<h2 class="titType1 c_222222 fwBold">배너 클릭 통계</h2>
			<p class="tType6 c_999999">문제온에서 제공하는 제휴업체 일별/월별/연별 배너 클릭수를 확인할 수 있습니다.</p>
		</div>
		
		<div class="pageCont">
			<div class="listSerch">
				<div class="calendar_wrap">
				
				<!-- 메뉴코드를 공통코드 ITN055로 대체 --> 
				<!-- 
					<select name="menuCode2" id="menuCode2" onchange="fnMenuCodeChange(this.value);">
						<option value="01"  <c:if test="${searchVO.menuCode == '01'}">selected</c:if> >메인</option>
						<option value="02"  <c:if test="${searchVO.menuCode == '02'}">selected</c:if> >로그인</option>
					</select>
				 -->
				 
				<!-- 기본 공통코드 내역 숨김   -->				 
				<ec:select codeId="ITN054" name="bannerCode2" id="bannerCode2" css="class='select'"  />				
				
				<ec:select codeId="ITN055" name="menuCode" id="menuCode" css="class='select'" selectedValue="${searchVO.menuCode}" script="onchange='fnMenuCodeChange(this.value);'"   />
				<ec:select codeId="ITN054" name="bannerCode" id="bannerCode" css="class='select'" selectedValue="${searchVO.bannerCode}" />

				  
				<!--
				<select name="searchBannerCode" id="searchBannerCode">
					<option value="001_01"  <c:if test="${searchVO.searchBannerCode == '001_01'}">selected</c:if> >원키퍼(메인)</option>
					<option value="001_02"  <c:if test="${searchVO.searchBannerCode == '001_02'}">selected</c:if> >원키퍼(로그인)</option>
					<option value="002_01"  <c:if test="${searchVO.searchBannerCode == '002_01'}">selected</c:if> >간판다음(메인)</option>
					<option value="002_02"  <c:if test="${searchVO.searchBannerCode == '002_02'}">selected</c:if> >간판다음(로그인)</option>					
					<option value="003_01"  <c:if test="${searchVO.searchBannerCode == '003_01'}">selected</c:if> >NORDIC TOOLS(메인)</option>
					<option value="004_01"  <c:if test="${searchVO.searchBannerCode == '004_01'}">selected</c:if> >폰더하기(메인)</option>					
				</select>
				 
				 -->
			    <select name="searchDateType" id="searchDateType" class="select" title="검색조건선택"  onchange="fnCalChange(this.value);">
				   	<option value='D' <c:if test="${searchVO.searchDateType == 'D'}">selected</c:if>>일별</option>
				   	<option value='M' <c:if test="${searchVO.searchDateType == 'M'}">selected</c:if>>월별</option>
				   	<option value='Y' <c:if test="${searchVO.searchDateType == 'Y'}">selected</c:if>>연별</option>
			    </select>
				<select name="calMonth" id="calMonth"  onchange="fnSetCalMonth(this.value)">
					<option value="1" <c:if test="${searchVO.calMonth == '1'}">selected</c:if> >1개월</option>
					<option value="3" <c:if test="${searchVO.calMonth == '3'}">selected</c:if> >3개월</option>
					<option value="6" <c:if test="${searchVO.calMonth == '6'}">selected</c:if> >6개월</option>
				</select>
				<select name="searchYear" id="searchYear" style="display:none;">
				</select>
									
				<input type="hidden" name="cal_url" id="cal_url" value="/sym/cmm/EgovNormalCalPopup.do">
				<div class="calendar_box" onclick="javascript:fn_egov_NormalCalendar(document.forms.listForm, document.forms.listForm.ntceBgndeYYYMMDD);">				
			    <input style="width:auto;min-width: 83px;" type="text" class="date_format" name="ntceBgndeYYYMMDD" id="ntceBgndeYYYMMDD" size="4" maxlength="4" readonly=""
			    value="<c:out value="${searchVO.ntceBgnde}" />" >
			   	 	<input type="button" class="calBtn">
     			</div>
				<span class="line">&nbsp;~</span>
				<div class="calendar_box" onclick="javascript:fn_egov_NormalCalendar(document.forms.listForm, document.forms.listForm.ntceEnddeYYYMMDD);">				
					<input style="width:auto;min-width: 83px;" type="text" class="date_format" name="ntceEnddeYYYMMDD" id="ntceEnddeYYYMMDD" size="4" maxlength="4" readonly=""
			    	value="<c:out value="${searchVO.ntceEndde}" />"
			    	>
				   	 	<input type="button" class="calBtn">
					</div>
				</div> 				
				<input type="button" class="btnType1" style="margin-left:10px;" value="검색" onclick="fn_search(); return false;">
				
			</div>
			<div class="listTop">
				<p class="tType5">총 <span class="tType4 c_456ded fwBold"><fmt:formatNumber value="${paginationInfo.totalRecordCount}" pattern="#,###" /></span>건</p>
				<div class="rightWrap">
					<!-- <input type="button" class="printBtn"> -->
					<select name="pageUnit" id="pageUnit" class="select" title="검색조건선택" onchange="linkPage(1);">
						<option value='10' <c:if test="${searchVO.pageUnit == '10' or searchVO.pageUnit == ''}">selected</c:if>>10줄</option>
						<option value='20' <c:if test="${searchVO.pageUnit == '20'}">selected</c:if>>20줄</option>
						<option value='30' <c:if test="${searchVO.pageUnit == '30'}">selected</c:if>>30줄</option>
					</select>
				</div>
			</div>
			<div class="tableWrap">
				<table class="tbType1">
					<colgroup>
						<col style="width: auto;">
						<col style="width: 25%">
						<col style="width: 25%">
						<col style="width: 25%">
					</colgroup>
					<thead>
						<tr>
							<th name="tbDateType" id="tbDateType">
								<c:if test="${searchVO.searchDateType == ''}">일자</c:if>							
								<c:if test="${searchVO.searchDateType == 'D'}">일자</c:if>							
								<c:if test="${searchVO.searchDateType == 'M'}">월</c:if>
								<c:if test="${searchVO.searchDateType == 'Y'}">연도</c:if>								
							</th>
							<th>배너위치 페이지 접속 수</th>
							<th>클릭 수</th>
							<th>클릭률</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach var="result" items="${resultList}" varStatus="status">
						<tr>
							<td><c:out value="${result.statDate}"/></td>
							<td><fmt:formatNumber value="${result.menuClickCnt}" pattern="#,###" /></td>
							<td><fmt:formatNumber value="${result.bannerClickCnt}" pattern="#,###" /></td>
							<td><fmt:formatNumber value="${result.bannerClickRate}" pattern="#,###.##" />%</td>							
						</tr>
						</c:forEach>
						<c:if test="${empty resultList}">
		         			<tr><td colspan="4"><spring:message code="common.nodata.msg" /></td></tr>
		         		</c:if>    
					</tbody>
				</table>
			</div>
			<div class="btnWrap">
			</div>
			<!-- 페이지 네비게이션 시작 -->
			<c:if test="${!empty resultList}">
		 		<div class="page">
		    		<ul class="inline">
		    			<ui:pagination paginationInfo = "${paginationInfo}"  type="image" jsFunction="linkPage" />
		    		</ul>	
		    	</div>  
		  	</c:if>                      
		    <!-- //페이지 네비게이션 끝 --> 
		</div>
	</div>
</form>
</compress:html>
</body>
</html>
