<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<!-- Navbar -->
<nav class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
     id="layout-navbar" style="min-width:1500px;flex-wrap:nowrap;margin-top:0px;height:4.5rem"
>
  <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
    <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
      <i class="bx bx-menu bx-sm"></i>
    </a>
  </div>

  <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
    <!-- Search -->
    <div class="navbar-nav align-items-center">
      <div class="nav-item navbar-search-wrapper mb-0">
        <a class="nav-item nav-link search-toggler px-0" href="javascript:void(0);">
          <span id="pageTitle--top" class="fw-bold" style="font-size:x-large;"></span>
        </a>
      </div>
    </div>
    <!-- /Search -->
	<div class="ms-1 me-1" style="min-width: max-content;">
      <select id="by--top" class="form-select" title="검색구분">
        <option value="vhrno">차량번호</option>
        <option value="rtpyrNm">납부자명</option>
        <option value="rtpyrNo">납부자번호</option>
        <option value="cvlcptAplcntNm">신고인명</option>
      </select>
      <input type="text" id="term--top" class="form-control" title="검색어" />
      <button type="button" id="fastSearch--top" class="btn btn-outline-dark bg-orange" title="통합조회">
        <i class="bx bx-search"></i>통합조회
      </button>
    </div>
    <div class="me-1" style="min-width: max-content;">
      <div class="form-check-inline custom-option custom-option-basic" style="background-color: #d9dee3">
        <label for="securityMode--top" class="form-check-label custom-option-content">
          <input type="checkbox" id="securityMode--top" name="securityMode" class="form-check-input" value="Y" />
          보안모드
        </label>
      </div>
      <button type="button" class="btn btn-outline-dark">
        종합민원관리
      </button>
      <button type="button" class="btn btn-outline-dark">
        일정관리
      </button>
      <button type="button" class="btn btn-outline-dark">
        공지사항
      </button>
      <button type="button" id="btnDownloadMenual--top" class="btn btn-primary"
      >사용자 메뉴얼
      </button>
    </div>

    <ul class="navbar-nav flex-row align-items-center">

      <!-- Style Switcher -->
      <li class="nav-item me-2 me-xl-0">
        <a class="nav-link style-switcher-toggle hide-arrow" href="javascript:void(0);">
          <i class="bx bx-sm"></i>
        </a>
      </li>
      <!--/ Style Switcher -->


      <!-- User -->
      <li class="nav-item navbar-dropdown dropdown-user dropdown">
        <a href="javascript:void(0);" data-bs-toggle="dropdown"
        class="d-flex align-items-center nav-link dropdown-toggle hide-arrow">
          <div class="avatar d-flex">
            <img src="<c:url value="/resources/image/user-circle-solid-24.png"/>" alt 
            class="w-px-40 h-auto rounded-circle" />
            <div class="d-flex" style="flex-flow:column">
          		<span class="fw-semibold">${currentUser.name}</span>
            	<small class="text-muted">${currentUser.account}</small>
            </div>
          </div>
        </a>
        <ul class="dropdown-menu dropdown-menu-end">
          <li>
            <a class="dropdown-item" href="pages-account-settings-account.html">
              <div class="d-flex">
                <div class="flex-shrink-0 me-3">
                  <div class="avatar avatar-online">
                    <img src="<c:url value="/resources/image/user-circle-solid-24.png"/>" alt class="w-px-40 h-auto rounded-circle" />
                  </div>
                </div>
                <div class="flex-grow-1">
                  <span class="fw-semibold d-block">${currentUser.name}</span>
                  <small class="text-muted">${currentUser.account}</small>
                </div>
              </div>
            </a>
          </li>
          <li>
            <div class="dropdown-divider"></div>
          </li>
          <li>
            <a class="dropdown-item" href="pages-profile-user.html">
              <i class="bx bx-user me-2"></i>
              <span class="align-middle">프로필</span>
            </a>
          </li>
          <li>
            <a class="dropdown-item" href="pages-account-settings-account.html">
              <i class="bx bx-cog me-2"></i>
              <span class="align-middle">
              설정
              </span>
            </a>
          </li>
          <li>
          	<div class="d-flex align-items-center" style="flex-flow:column">
          		<span>
	            	<input type='radio' id='taskSeCd1--top' name='taskSeCd' value='PVS' title="주정차" />
		     		<label for="taskSeCd1--top">주정차</label>
		     	</span>
		     	<sapn>
		     		<input type='radio' id='taskSeCd2--top' name='taskSeCd' value='BPV' title="전용차로" />
		     		<label for="taskSeCd2--top">전용차로</label>
		     	</sapn>
		     	<sapn>
		     		<input type='radio' id='taskSeCd3--top' name='taskSeCd' value='DPV' title="장애인" />
		     		<label for="taskSeCd3--top">장애인</label>
		     	</sapn>
		     	<sapn>
		     		<input type='radio' id='taskSeCd4--top' name='taskSeCd' value='ECA' title="전기차" />
		     		<label for="taskSeCd4--top">전기차</label>
		     	</sapn>
		     	<sapn>
		     		<input type='radio' id='taskSeCd5--top' name='taskSeCd' value='TPV' title="밤샘주차" />
		     		<label for="taskSeCd5--top">밤샘주차</label>
		     	</sapn>
		     	<sapn>
		     		<input type='radio' id='taskSeCd6--top' name='taskSeCd' value='AAA' title="미세먼지" />
		     		<label for="taskSeCd6--top">미세먼지</label>
		     	</sapn>
	     	</div>
          </li>
          <li>
            <div class="dropdown-divider"></div>
          </li>
          <li>
            <a class="dropdown-item" href="pages-help-center-landing.html">
              <i class="bx bx-support me-2"></i>
              <span class="align-middle">Help</span>
            </a>
          </li>
          <li>
            <div class="dropdown-divider"></div>
          </li>
          <li onclick="logout();">
            <a class="dropdown-item">
              <i class="bx bx-power-off me-2"></i>
              <span class="align-middle">로그아웃</span>
            </a>
          </li>
        </ul>
      </li>
      <!--/ User -->
    </ul>
  </div>

</nav>

<c:set var="topScript" scope="request">
/*
 * 보안모드 토글 처리
 */
function fn_securityModeToggle(flag, elementId){
	
	var executionArea;
	if(elementId){
		executionArea = $("#"+elementId);
	} else {
		executionArea = $(document);
	}

	var targets = executionArea.find("input.privacy");
	for(let i=0; i< targets.length; i++){
        let originId = targets[i].id;
        let originValue= targets[i].value;
        let maskingValue = originValue.replace(/[0-9a-zA-Z]/g, "*");
        document.getElementById("mask-"+originId).value = maskingValue;
    }
	
    if(flag){ //개인정보 숨김

        //입력상자
        $("input.privacy").attr("hidden","hidden");
        $("input.privacy-mask").removeAttr("hidden");

		//그리드
		$("th.privacy").attr("hidden","hidden");
		$("td.privacy").attr("hidden","hidden");
		$("th.privacy-mask").removeAttr("hidden");
        $("td.privacy-mask").removeAttr("hidden");

    } else { //개인정보 표시

        //입력상자
        $("input.privacy").removeAttr("hidden");
        $("input.privacy-mask").attr("hidden","hidden");

		$("th.privacy").removeAttr("hidden");
		$("td.privacy").removeAttr("hidden");
		$("th.privacy-mask").attr("hidden","hidden");
        $("td.privacy-mask").attr("hidden","hidden");

    }

}

/*---------------------  사용자 메뉴얼 클릭 이벤트 ---------------------*/
$("#btnDownloadMenual--top").on( "click", function() {

	ajax.get({
		url : wctx.url("/file/downloadMenual.do"),
		data : { },
		xhrFields:{ responseType: 'blob' },
		success : (resp) => {
			var fileName = "메뉴얼.pptx";
			
			var URL = window.URL || window.webkitURL;
			var downloadUrl = URL.createObjectURL(resp);
			
			var a = document.createElement("a");
			a.href = downloadUrl;
            a.download = fileName;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
		}
	});
	
});

/*---------------------  보안모드 체크박스 클릭 이벤트 ---------------------*/
$("#securityMode--top").on( "click", function() {
    if($("#securityMode--top").is(":checked")){
        fn_securityModeToggle(true);
    } else {
        fn_securityModeToggle(false);
    }
});
</c:set>

