<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>콜통계</title>
<%@ include file="/WEB-INF/jsp/adm/include/topLinkTag.jsp"%>
</head>
<body>

	<h1>ICOMSYS ADMIN</h1>
	<h1>대시보드</h1>
	<div class="skip_navigation">
		<ul>
			<li>
				<a href="#Content" class="go_content">본문 바로가기</a>
			</li>
			<li>
				<a href="#Gnb">메뉴 바로가기</a>
			</li>
		</ul>
	</div>

	<header id="header">
		<%@ include file="/WEB-INF/jsp/adm/include/header.jsp"%>
	</header>
	<c:import url="/adm/menu/getLnbMenu.do" />

	<script type="text/javascript" src="<c:url value='/aajs/statisticsCallInfo.js' />"></script>

	<h1>DASH BOARD</h1>

	<section id="Content" class="bot_common">
		<div class="location">
			<ul>
				<li class="home"><a href="#">HOME</a></li>
				<li><a href="#">콜통계</a></li>
				<li><a href="#">콜통계</a></li>
			</ul>
		</div>

		<!-- TODO: 래부터 신규 컨텐츠 마크업 입니다. -->
		<div class="sub_cont">
			<div class="cont_box">
				<div class="box_title">
					<div class="fl">
						<h2 class="mt12">콜 통계</h2>
					</div>
					<div class="btn_wrap fr">
						<a href="javascript:StatisticsCallInfo.getStatisticsCallInfo();" class="btn">조회</a>
					</div>
				</div>
				<div class="tbl">
					<table class="search block">
						<colgroup>
							<col width="140px">
							<col width="20%">
							<col width="140px">
							<col width="auto">
						</colgroup>
						<tbody>
						<tr>
							<th class="tl">시나리오 그룹</th>
							<td>
								<div class="sel_box">
									<select class="wide" id="oprMngCode">

									</select>
								</div>
							</td>
							<th class="tl">통화일자</th>
							<td>
								<div class="input-grid-flex">
									<div class="datetimepicker_box">
										<div class='input-group date datetimepicker_from'>
											<input id="dataFrom" type='text' class="form-control" readonly />
											<span for="dataFrom" class="input-group-addon">
												<span class="glyphicon glyphicon-calendar calender_ico"></span>
											</span>
										</div>
										<span class="form_bridge">~</span>
										<div class='input-group date datetimepicker_to'>
											<input id="dataTo" type='text' class="form-control" readonly />
											<span for="dataTo" class="input-group-addon">
												<span class="glyphicon glyphicon-calendar calender_ico"></span>
											</span>
										</div>
									</div>
									<div class="rdo_box type-toggle">
										<input type="radio" name="radio_ipt" id="rdo02" class="" checked onclick="javascript:StatisticsCallInfo.setCurrentDate();">
										<label for="rdo02">오늘</label>
										<input type="radio" name="radio_ipt" id="rdo01" class="" onclick="javascript:StatisticsCallInfo.setWeekDate();">
										<label for="rdo01">일주일</label>
									</div>
								</div>

							</td>
						</tr>
						</tbody>
					</table>
				</div>
			</div>

			<div class="cont_box mb0">
				<div class="box_title">
					<div class="fl">
						<h2 class="mt12">통계 리스트</h2>
					</div>
					<div class="btn_wrap fr">
						<a href="#" class="btn excel" onclick="javascript:StatisticsCallInfo.excelDownload();">다운로드</a>
					</div>
				</div>
				<div class="tbl like-scroll-sticky" style="height: calc(100vh - 316px);">
					<table id="testTb1" class="click">
						<colgroup>
							<col width="auto">
							<col width="auto">
							<col width="150px">
							<col width="auto">
							<col width="auto">
							<col width="auto">
							<col width="auto">
							<col width="150px">
							<col width="auto">
							<col width="auto">
							<col width="auto">
							<col width="auto">
							<col width="auto">
							<col width="auto">
							<col width="auto">
							<col width="auto">
						</colgroup>
						<thead>
						<tr>
							<th rowspan="2">통화일자</th>
							<th rowspan="2" class="bd-r">전체 콜</th>
							<th colspan="5" class="tl tlBtn" data-code="tableMoreDataA" id="tableDataA">
								호전환<a href="#" class="tableMoreViewA tableMoreViewIco">more</a>
							</th>
							<th colspan="" class="tl tlBtn" data-code="tableMoreDataB" id="tableDataB">
								호종료<a href="#" class="tableMoreViewB tableMoreViewIco">more</a>
							</th>
							<th rowspan="2">평균 발화 건수</th>
						</tr>

						<tr class="subline">
							<th class="tableMoreDataA">사용자 요청</th>
							<th class="tableMoreDataA">시나리오 흐름</th>
							<th class="tableMoreDataA">묵음 폴백</th>
							<th class="tableMoreDataA">발화 폴백</th>
							<th>소계</th>

							<th class="tableMoreDataB">사용자 요청</th>
							<th class="tableMoreDataB">시나리오 흐름</th>
							<th class="tableMoreDataB">묵음 폴백</th>
							<th class="tableMoreDataB">발화 폴백</th>
							<th class="tableMoreDataB">인입 후 끊음</th>
							<th class="tableMoreDataB">고객 끊음</th>
							<th class="tableMoreDataB">시스템</th>
							<th>소계</th>
						</tr>
						</thead>
						<tbody id="dataArea">

						</tbody>
						<tfoot>
						<tr class="subline">
							<th>전체</th>
							<th id="totalTot"></th>

							<th class="tableMoreDataA" id="totalIngUserReq"></th>
							<th class="tableMoreDataA" id="totalIngScenario"></th>
							<th class="tableMoreDataA" id="totalIngSilentFb"></th>
							<th class="tableMoreDataA" id="totalIngSpeakFb"></th>
							<th id="totalIngTot"></th>

							<th class="tableMoreDataB" id="totalEndUserReq"></th>
							<th class="tableMoreDataB" id="totalEndScenario"></th>
							<th class="tableMoreDataB" id="totalEndSilentFb"></th>
							<th class="tableMoreDataB" id="totalEndSpeakFb"></th>
							<th class="tableMoreDataB" id="totalEndInitEnd"></th>
							<th class="tableMoreDataB" id="totalEndUserEnd"></th>
							<th class="tableMoreDataB" id="totalEndSystem"></th>
							<th id="totalEndTot"></th>

							<th id="totalAveTalkCnt"></th>
						</tr>
						<tr>
							<th>평균</th>
							<th id="aveTot"></th>

							<th class="tableMoreDataA" id="aveIngUserReq"></th>
							<th class="tableMoreDataA" id="aveIngScenario"></th>
							<th class="tableMoreDataA" id="aveIngSilentFb"></th>
							<th class="tableMoreDataA" id="aveIngSpeakFb"></th>
							<th id="aveIngTot"></th>

							<th class="tableMoreDataB" id="aveEndUserReq"></th>
							<th class="tableMoreDataB" id="aveEndScenario"></th>
							<th class="tableMoreDataB" id="aveEndSilentFb"></th>
							<th class="tableMoreDataB" id="aveEndSpeakFb"></th>
							<th class="tableMoreDataB" id="aveEndInitEnd"></th>
							<th class="tableMoreDataB" id="aveEndUserEnd"></th>
							<th class="tableMoreDataB" id="aveEndSystem"></th>
							<th id="aveEndTot"></th>

							<th id="aveAveTalkCnt"></th>
						</tr>
						</tfoot>
					</table>
				</div>
			</div>
		</div>

	</section>
</body>
</html>
