@extends('common.layout')

<link rel="stylesheet" type="text/css" href="{{asset('css/list.css') }}">
<script defer type="text/javascript" src="{{asset('cmm/calender.js') }}"></script>
<script defer type="text/javascript" src="{{asset('js/chart@2.8.0.min.js') }}"></script>
<script defer type="text/javascript" src="{{asset('js/moment.min.js') }}"></script>

@section('content')
<div class="container">
  <section id="sec01" class="sec01">
    <div class="contWrap">
      <div class="listWrap">
        <div class="titleWrap">
          <h2 class="title txt23_700">페이지별 접속 통계</h2>
        </div>

        <div class="dateWrap">
          <div class="dateBox">
            <div class="dateButtonBox">
                <button type="button" data-day="0" class="calendarOneDay">1일</button>
                <button type="button" data-day="7" class="calendarOneWeek">1주일</button>
                <button type="button" data-months="1" class="calendarOneMonth" >1개월</button>
                <button type="button" data-months="3" class="calendarThreeMonth">3개월</button>
            </div>
            <div class="datepickerBox">
              <input class="startDate" readonly/>
              <input class="endDate" readonly/>
            </div>
            <button id="searchBtn" class="btn01 btnBlue" type="button" onclick="nSearch()">조회</button>
          </div>
          <div class="downloadBox">
            <button id="exelDownBtn" class="btn01" onclick="nDownExcel()">
              <span class="txt14_600">엑셀 파일 내려받기</span>
              <img src="{{asset('images/download_small.svg') }}" alt="다운로드 아이콘" />
            </button>
          </div>
        </div>

        <div class="chartWrap">
          <!-- 전체보기 - bar형태 chart-->
          <!-- 상세보기 - line형태 chart -->
          <canvas id="myChart" width="1460" height="496"></canvas>
        </div>

        <div class="tableWrap">
          <table>
            <thead class="theadWrap">
            </thead>
            <tbody class="tbodyWrap textLeft">
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>
</div>
<script>
  clsUrlSearchParam.init(location.search);
  clsTmsClass.setSearchParam(clsUrlSearchParam);
  clsListClass.setSearchParamClass(clsUrlSearchParam);
  var mode= "pg";
  var startDate = "";
  var endDate = "";
  var itemCate = "";
  var exelType = ""; // 빈값이 기본, 다운로드인 경우 excel

  function getInitData(){
      var qSdate      = clsUrlSearchParam.get("startDate");
      var qEdate      = clsUrlSearchParam.get("endDate");
      var qSelMonth   = clsUrlSearchParam.get("btnSelMonth");
      if ( typeof qSdate !='undefined' && parseInt(qSdate,10) > 100 )document.querySelector('.startDate').value = qSdate;
      if ( typeof qEdate !='undefined' && parseInt(qEdate,10) > 100 )document.querySelector('.endDate').value = qEdate;
      if ( typeof qSelMonth !='undefined' && parseInt(qSelMonth,10) > -1 ){
          qSelMonth = parseInt(qSelMonth,10);
          for (var i = 0; i < dateButtons.length; i++) {
              dateButtons[i].classList.remove("active");
          }
      }
      startDate   = document.querySelector('.startDate').value;
      endDate     = document.querySelector('.endDate').value;
      asMonthsV1();
      getListData();
  }

  window.onload=function(){
    getInitData();
  }

  function getListData() {
    var data = {
      "mode" :  mode,
      "sdate" : startDate,
      "edate" : endDate,
      "item" : itemCate,
      "type" : exelType
    }

    var fetchData = clsTmsClass.setDataInformation("/mda/api/ds/st", "GET", data , setCallBackFnc);
  }

  function setCallBackFnc(data) {
    var obj   = JSON.parse(data);
    createChart(obj.data.chart , 'bar', '페이지별 접속통계', "", "", "");
    createTable(data);
  }
  // 대시보드 table그리기
  function createTable(data) {

    document.querySelector(".theadWrap").innerHTML = "";
    document.querySelector(".tbodyWrap").innerHTML = "";

    var tableHead =document.createElement("tr");
    tableHead.innerHTML =
      '<th style="width:108px;"><p class="txt13_400">번호</p></th>' +
      '<th><p class="txt13_400">제목</p></th>' +
      '<th style="width:128px;"><p class="txt13_400">페이지뷰</p></th>' +
      '<th style="width:100px;"><p class="txt13_400" style="width:100px;"">비고</p></th>';

    document.querySelector(".theadWrap").appendChild(tableHead);
    var tableData = JSON.parse(data).data.table;
    if(Object.keys(tableData).length === 0) {
      tableData = [
          {
            "pgnm": "intro",
            "view": "0"
          },
          {
            "pgnm": "Correction",
            "view": "0"
          },
          {
            "pgnm": "Guideline",
            "view": "0"
          },
          {
            "pgnm": "Dictionary",
            "view": "0"
          },
          {
            "pgnm": "Feed",
            "view": "0"
          },
          {
            "pgnm": "Mypage",
            "view": "0"
          },
          {
            "pgnm": "Notice",
            "view": "0"
          },
          {
            "pgnm": "Faq",
            "view": "0"
          },
          {
            "pgnm": "Search",
            "view": "0"
          }
        ]
    }

    var nSelMonth = setCmmParam();
    var cmmparam  =  "&startDate=" + startDate + "&endDate=" + endDate + "&btnSelMonth=" + nSelMonth;
    for(var i=0;i < tableData.length;i++){
      var item      = tableData[i];
      var tableBody = document.createElement("tr");
      var rowHTML   = ''; // 빈 문자열로 초기화
      rowHTML += '<td><p class="txt14_400">' + (i+1) + '</p></td>';
      rowHTML += '<td><p class="txt14_400">' + item.AccessPageNameKor + '</p></td>';
      rowHTML += '<td><p class="txt14_400">' + item.cnt + '</p></td>';
      rowHTML += '<td><button id="detailBtn' + (i+1) + '" type="button" class="btn03 detailBtn btnGray" onclick="javascript:location.href=\'vw?pgnm=' + item.pgnm + cmmparam + '\'">일별 보기</button></td>';

      tableBody.innerHTML = rowHTML;
      document.querySelector(".tbodyWrap").appendChild(tableBody);
    }
  }

  function setCmmParam(){
      startDate           = document.querySelector('.startDate').value;
      endDate             = document.querySelector('.endDate').value;
      var nSelMonth       = window.btnSelMonth;
      var activeButton    = document.querySelector(".dateButtonBox button.active");
      if (activeButton){
          if ( activeButton.classList.contains("calendarOneDay")){
              nSelMonth = 0;
          } else if ( activeButton.classList.contains("calendarOneWeek")){
              nSelMonth = 7;
          } else if ( activeButton.classList.contains("calendarOneMonth")){
              nSelMonth = 1;
          } else if ( activeButton.classList.contains("calendarThreeMonth")){
              nSelMonth = 3;
          }
      }
      return nSelMonth;
  }

  function nSearch(){
    var nSelMonth = setCmmParam();
    document.location.href="/mda/ds/pg/lt?page=1&startDate=" + startDate + "&endDate="+endDate + "&btnSelMonth=" + nSelMonth;
  }

  function nDownExcel(){
    var prefix = (location.href.indexOf("mda") >-1) ? "/mda" : "";
    location.href = prefix+"/api/excel?sdate=" + startDate + "&edate=" + endDate;
  }

</script>
@endsection