<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="_csrf" content="${_csrf.token}"/>
<meta name="_csrf_header" content="${_csrf.headerName}"/>
<title>statistics</title>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<link rel="stylesheet" href="/css/header.css">
<link rel="stylesheet" href="/css/statistics.css">
<script type="text/javascript" src="/js/header.js"></script>
<script type="text/javascript" src="/js/statistics.js"></script>
</head>
<body>
	<div class="menu">
		<div></div>
		<div class="unselect-dashboard"></div>
		<div class="unselect-record"></div>
		<div class="select-statistics"></div>
		<div class="unselect-system-manager"></div>
		<sec:authorize access="isAuthenticated()"><div>Log-Out</div></sec:authorize>
	</div>
	<br>
	<div class="container">
		<div class="search-box">
			<div class="search-header">&nbsp;&nbsp;검색 조건</div>
			<div class="search-flex-container">
				<div class="search-select-title">통계 조회 항목 :</div>
				<div>
					<select name="serachCategory" class="search-select">
						<option value="">조회할 이력을 선택 해주세요</option>
						<option value="apiInvoke">API 호출 / API Token 인증</option>
						<option value="systemResuource">시스템 리소스 정보</option>
						<option value="signalStatusGather">신호상태 정보 수집</option>
						<option value="signalStatusSend">신호상태 정보 발송</option>
					</select>
				</div>
				<div class="search-during">조회 조건 :</div>
						<select class="search-condition">
							<option value="">조회 조건을 선택해 주세요</option>
							<option value="monthly">월별 통계 조회</option>
							<option value="daily">일별 통계 조회</option>
						</select>
						<div class="search-month-select">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;월별 기간 선택 : 
							<input type="month" class="beginMonth"> 
							~ 
							<input type="month" class="endMonth">
						</div>
						<div class="search-date-select">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 일별 기간 선택 : 
							<input type="date" class="beginDate"> 
							~ 
							<input type="date" class="endDate">
						</div>
						<div class="select-button"></div>
				</div>
			</div>
		<div class="result-box">
			<div>&nbsp;&nbsp;검색 결과</div>
			
			<div>
				<div class="table-box">
					<div>
						<table class="search-table"></table>
					</div>
				</div>
				<div class="chart-box">
					<div id="monthlyChart"></div>
					<div id="dailyChart"></div>
			    </div>
			</div>
			
		</div>
	</div>

</body>
</html>