<%@ 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="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<script type="text/javascript" src="<c:out value="/js/googleChart/loader.js"/>"></script>
<script type="text/javascript" src="<c:out value="/js/admin/dashBoard.js"/>"></script>
<script type="text/javascript">
  const dayMapUseDataList = [];
  const areaDataList = [];
</script>
<c:forEach var="data" items="${dayMapUseDataList}">
  <script type="text/javascript">
    dayMapUseDataList.push(['${data.param01}',${data.value01}])
  </script>
</c:forEach>
<c:forEach var="data" items="${areaDataList}">
  <script type="text/javascript">
    areaDataList.push(['${data.param01}',${data.value01}])
  </script>
</c:forEach>
<div class="container">
  <div class="row mt-3">
    <div class="col-lg-12">
      <h4>대시보드</h4>
    </div>
    <div class="col-lg-3">
      <div class="card my-2">
        <div class="card-body row">
          <div class="col-auto">
            <img src="/images/icon/icon_004.png" width="60" height="60" alt="">
          </div>
          <div class="col-auto">
            <a href="/admin/request?status=99" class="text-black-50">지도사용 요청 승인대기</a>
            <h3><c:out value="${statusCnt}"/></h3>
          </div>
        </div>
      </div>
      <div class="card my-2">
        <div class="card-body row">
          <div class="col-auto">
            <img src="/images/icon/icon_21.png" width="60" height="60" alt="">
          </div>
          <div class="col-auto">
            <a href="/admin/userInfo?auth=99" class="text-black-50">회원가입 승인대기</a>
            <h3><c:out value="${standByCount}"/></h3>
          </div>
        </div>
      </div>
      <div class="card my-2">
        <div class="card-body row">
          <div class="col-auto">
            <img src="/images/icon/icon_04.png" width="60" height="60" alt="">
          </div>
          <div class="col-auto">
            <a href="/admin/fieldData?status0=1&status1=1&status2=1&status3=1&status4=0"
               class="mb-0 text-black-50">확인 요청 데이터</a>
            <h3><c:out value="${standFieldData}"/></h3>

          </div>
        </div>
      </div>
      <div class="card my-2">
        <div class="card-body row">
          <div class="col-auto">
            <img src="/images/icon/icon_03.png" width="60" height="60" alt="">
          </div>
          <div class="col-auto">
            <p class="mb-0 text-black-50">오늘 방문자 수</p>
            <h3><c:out value="${dayLoginCount}"/></h3>
          </div>
        </div>
      </div>
      <div class="card my-2">
        <div class="card-body row">
          <div class="col-auto">
            <img src="/images/icon/icon_002.png" width="60" height="60" alt="">
          </div>
          <div class="col-auto">
            <p class="mb-0 text-black-50">최근 한달 방문자 수</p>
            <h3><c:out value="${monthLoginCount}"/></h3>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-9">
      <div class="row">
        <div class="col-12">
          <div class="card my-2">
            <div class="card-body">
              <p class="mb-0 text-black-50">지도사용 이력 추이</p>
              <div id="mapUseFromDayChart"></div>
            </div>
          </div>
        </div>
        <div class="col-5">
          <div class="card my-2">
            <div class="card-body">
              <div class="col-auto">
                <p class="mb-0 text-black-50">지역별 현장수집 데이터 현황</p>
                <div id="areaDonutChart"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-7">
          <div class="card my-2">
            <div class="card-body">
              <div class="col-auto">
                <p class="mb-0 text-black-50">빈자리 메꿀 그래프</p>
                <div id="tempLineChart"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
