<%@ 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 id="layout-navbar" data-doctx="top"
	class="layout-navbar navbar container-xxl navbar-expand-xl navbar-detached align-items-center mt-1 mx-0 flex-nowrap">
  <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-lg"></i>
    </a>
  </div>

  <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">

    <!-- /Search -->
	<div class="ms-1 me-1 min-w-max-c">
      <select id="fastBy--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="fastTerm--top" class="form-control" title="검색어" />
      <button type="button" id="btnFastSearch--top" class="btn btn-outline-dark bg-orange" title="통합조회">
        <i class="bx bx-search"></i>통합조회
      </button>
    </div>
    <div class="me-1 min-w-max-c">
      <div hidden class="form-check-inline custom-option custom-option-basic me-1 border-default bg-top-checkbox">
        <label for="securityMode--top" class="form-check-label custom-option-content d-flex justify-content-center pt-1 pb-1">
          <input type="checkbox" id="securityMode--top" name="securityMode"
          class="form-check-input me-1 align-self-center" value="Y" />
          <span class="text-center">
          	보안모드<br/><kbd>F9</kbd>
          </span>
        </label>
      </div>
      <div hidden class="form-check-inline custom-option custom-option-basic me-1 border-default bg-top-checkbox">
        <label for="photoMask--top" class="form-check-label custom-option-content d-flex justify-content-center pt-1 pb-1">
          <input type="checkbox" id="photoMask--top" name="photoMask"
          class="form-check-input me-1 align-self-center" value="Y" checked />
          <span class="text-center">
          	단속사진 모자이크<br/><kbd>F10</kbd>
          </span>
        </label>
      </div>
      <button hidden type="button" id="btnOpenTempFileUploadWindow" class="btn btn-outline-dark">
        외부자료 파일 처리
      </button>
      <button hidden type="button" id="btnOpenSelectStngDialog" class="btn btn-outline-dark">
        특화설정
      </button>
      <button hidden type="button" id="btnGoToCvlcptDscsn" class="btn btn-outline-dark">
        종합민원관리
      </button>
      <button type="button" id="btnGoToSchdl" class="btn btn-outline-dark">
        일정관리
      </button>
      <button type="button" id="btnGoToNtc" class="btn btn-outline-dark">
        공지사항
      </button>
      <button hidden type="button" id="btnDownloadMenual--top" class="btn btn-primary"
      >사용자 메뉴얼
      </button>
    </div>
	<span class="ms-auto">
		<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-lg"></i>
		        </a>
		      </li>
		      <!--/ Style Switcher -->


		      <!-- User -->
		      <li id="userNav--top" 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/img/user-circle-solid-24.svg"/>" alt
		            class="w-px-40 h-auto rounded-circle" />
		            <div class="d-flex flex-column">
		          		<span class="fw-semibold text-black">${currentUser.name}</span>
		            	<small class="text-black">${currentUser.account}</small>
		            </div>
		          </div>
		        </a>
		        <ul class="dropdown-menu dropdown-menu-end">
		          <li>
		            <a class="dropdown-item" href="#">
		              <div class="d-flex">
		                <div class="flex-shrink-0 me-3">
		                  <div class="avatar avatar-online">
		                    <img src="<c:url value="/resources/img/user-circle-solid-24.svg"/>" 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 onclick="fnOpenMyInfo();">
		            <a class="dropdown-item" href="javascript:void(0);">
		              <i class="bx bx-user me-2"></i>
		              <span class="align-middle">계정 정보 수정</span>
		            </a>
		          </li>
		          <li onclick="fnOpenChangePassword();">
		            <a class="dropdown-item" href="javascript:void(0);">
		              <i class="bx bx-user me-2"></i>
		              <span class="align-middle">비밀번호 변경</span>
		            </a>
		          </li>
		          <li>
		          	<div id="taskSeCd--Top" class="d-flex flex-column align-items-start">
			     	</div>
		          </li>
		          <li>
		            <div class="dropdown-divider"></div>
		          </li>
		          <li>
		            <a class="dropdown-item" href="#" onclick="showHelp();">
		              <i class="bx bx-support me-2"></i>
		              <span class="align-middle">Help</span>
		            </a>
		          </li>
		          <li>
		            <div class="dropdown-divider"></div>
		          </li>
		          <li>
		            <a id="btnCancelAccount--Top" class="dropdown-item" href="#" onclick="fnCancelAccount();">
		              <i class="bx bx-exit me-2"></i>
		              <span class="align-middle">
		              회원탈퇴
		              </span>
		            </a>
		          </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>
	</span>

  </div>

</nav>

<template id="selectStngButtonsTemplate">
	<span class="row g-3 d-flex flex-column">
		<button type="button" class="btn btn-xl btn-primary" onclick="fnOpenEqmCrdnLayoutStngDialog();">수신단속파일(장비) 서식 설정</button>
		<button type="button" class="btn btn-xl btn-primary" onclick="fnOpenOtptStngDialog();">출력물 서식 설정</button>
		<button type="button" class="btn btn-xl btn-primary" onclick="fnOpenOutsourcingStngDialog();">고지서 외주요청파일 서식 설정</button>
		<button type="button" class="btn btn-xl btn-primary" onclick="fnOpenExtrStngDialog();">pdf 고지서 정보 추출 설정</button>
	</span>
</template>

<c:set var="topScript" scope="request">
async function fnOpenTempFileUploadWindow(){

	var resp = await fetch(wctx.url("/resources/html/fileUpload.html"));
	var template = await resp.text();

	dialog.open({
		id : "fileUploadDialog",
		title: "파일 업로드",
		size : "lg",
		content: template,
		init : () => {
			AppSupport.setDialogZindex();
		}
	});

}

/*--------------------- 설정 선택 다이얼로그 표시 ---------------------*/
function fnOpenSelectStngDialog(){
	dialog.open({
		id : "selectStngDialog",
		title : "설정 선택",
		content : document.getElementById("selectStngButtonsTemplate").innerHTML,
		size : "md",
		init : () => {},
		onClose : () => {}
	});
}

/*--------------------- 장비단속레이아웃 설정 메인 화면 표시 ---------------------*/
function fnOpenEqmCrdnLayoutStngDialog(){
	dialog.close("selectStngDialog");

	var url = wctx.url("/crdn/crdn01/010/main.do");

	ajax.post({
		url : url,
		data : {},
		success : (resp) => {
			let dialogName = "eqmCrdnLayoutStngDialog";
			let dialogId = dialogName+"-"+uuid();

			dialog.open({
				id : dialogId,
				title : "장비단속 레이아웃 설정",
				size : "xxl",
				content : resp,
				init : () => {
					$("#"+dialogId).attr("name", dialogName);
					$("#"+dialogId).attr("data-ref-doctx","top");
					let refDlgId = pageObject["top"].refDlgId(dialogName);

					$("#"+refDlgId).find("form[name='frmSearch']").find("[name='sggCd']").val(MY_INFO.info.sggCd);

				},
				onClose : () => { }
			});
		}
	});
}

/*--------------------- 출력물 설정 메인 화면 표시 ---------------------*/
function fnOpenOtptStngDialog(){

	dialog.close("selectStngDialog");

	var url = wctx.url("/stng/stng01/010/main.do");

	ajax.post({
		url : url,
		data : {},
		success : (resp) => {

			let dialogName = "otptStngDialog";
			let dialogId = dialogName+"-"+uuid();

			dialog.open({
				id : dialogId,
				title : "출력설정",
				size : "xxl",
				content : resp,
				init : () => {
					$("#"+dialogId).attr("name", dialogName);
					$("#"+dialogId).attr("data-ref-doctx","top");
					let refDlgId = pageObject["top"].refDlgId(dialogName);

					$("#"+refDlgId).find("form[name='frmSearch']").find("[name='sggCd']").val(MY_INFO.info.sggCd);

				},
				onClose : () => { }
			});
		}
	});

}

/*--------------------- 고지서 외주요청파일 서식 설정 ---------------------*/
function fnOpenOutsourcingStngDialog(){

	dialog.close("selectStngDialog");

	var url = wctx.url("/stng/stng01/030/main.do");


	ajax.post({
		url : url,
		data : {},
		success : (resp) => {

			let dialogName = "outsourcingStngDialog";
			let dialogId = dialogName+"-"+uuid();

			dialog.open({
				id : dialogId,
				title : "외주요청파일 서식 설정",
				size : "xxl",
				content : resp,
				init : () => {

					$("#"+dialogId).attr("name", dialogName);
					$("#"+dialogId).attr("data-ref-doctx","top");
					let refDlgId = pageObject["top"].refDlgId(dialogName);

					$("#"+refDlgId).find("form[name='frmSearch']").find("[name='sggCd']").val(MY_INFO.info.sggCd);

				},
				onClose : () => { }
			});
		}
	});

}


/*--------------------- PDF자료 추출 설정 메인 화면 표시 ---------------------*/
function fnOpenExtrStngDialog(){
	dialog.close("selectStngDialog");

	var url = wctx.url("/stng/stng01/020/main.do");

	ajax.post({
		url : url,
		data : {},
		success : (resp) => {

			let dialogName = "extrStngDialog";
			let dialogId = dialogName+"-"+uuid();

			dialog.open({
				id : dialogId,
				title : "PDF자료 추출 설정",
				size : "xxl",
				content : resp,
				init : () => {
					$("#"+dialogId).attr("name", dialogName);
					$("#"+dialogId).attr("data-ref-doctx","top");
					let refDlgId = pageObject["top"].refDlgId(dialogName);

					$("#"+refDlgId).find("form[name='frmSearch']").find("[name='sggCd']").val(MY_INFO.info.sggCd);

				},
				onClose : () => { }
			});
		}
	});
}


function fnOpenMyInfo(){
	var popupWidth = 950;
	var popupHeight = 500;
	var popupX = (window.screen.width / 2) - (popupWidth / 2);
	var popupY= (window.screen.height / 2) - (popupHeight / 2);

	var popup = window.open(
		wctx.url("/user/openMyInfo.do")
		,"changeMyInfo"
		,"width="+popupWidth+", height="+popupHeight+", left="+popupX+", top="+popupY
    );

    popup.onload = () => {
		popup.addEventListener('beforeunload', function() {
			$.unblockUI();
		});
	};
}

function fnOpenChangePassword(){
	ajax.get({
		url : wctx.url("/user/changePassword.do"),
		data : { },
		success : (resp) => {
			dialog.open({
				id : "changePasswordDialog",
				title : "비밀번호 변경",
				content : resp,
				size : "md",
				init : () => {},
				onClose : () => {}
			});
		}
	});
}

async function fnCancelAccount(){
	let ok = await confirm2("탈퇴하시겠습니까?");
	if(ok){
    	ajax.get({
    		url : wctx.url("/user/cancelAccount.do"),
    		data : { },
    		success : (resp) => {
    			if(resp.saved){
    				alert('탈퇴되었습니다.');
    				var form = $("<form action=\""+wctx.url("/logout.do")+"\", method=\"POST\">");
					$("<input name=\"${_csrf.parameterName}\" value=\"${_csrf.token}\" type=\"hidden\">").appendTo(form);
					form.appendTo("body").submit();
    			}
    		}
    	});
    }
}

function showHelp(){
	dialog.alert({
		content : "문의전화 : 070-4490-74XX"
			+"<br/>"
			+"<button type='button' class='btn btn-primary' onclick='remoteRequest();'>원격지원</button>",
		timeout : 0,
		init : function() {
			AppSupport.setDialogZindex();
			AppSupport.focusClose();
		},
	});
}

function remoteRequest(){
	window.open("https://81.223.kr", '_blank');
}



/*
 * 보안모드 토글 처리
 */
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.replaceAll(/./g, "*");
        document.getElementById("mask-"+originId).value = maskingValue;
    }

    if(flag){ //개인정보 숨김

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

		//그리드
		$("body").addClass("root-privacy-on");

    } else { //개인정보 표시

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

		//그리드
		$("body").removeClass("root-privacy-on");

    }

}

/*
 * 단속사진 마스킹
 */
function fn_photoMask(flag, element){

	var executionArea;
	var isImg = false;
	if(element){
		if(element.tagName == "IMG"){
			isImg = true;
		}
		executionArea = $(element);
	} else {
		executionArea = $(document);
	}

	var targets;
	if(isImg){
		targets = executionArea.filter("[data-crdn-photo-id]");
	} else {
		targets = executionArea.find("[data-crdn-photo-id]");
	}

	for(var i=0; i < targets.length; i++){
		var target = targets[i];
        var dataset = target.dataset;
        var targetId = dataset.crdnPhotoId;

        $("div[data-ref='"+dataset.crdnPhotoId+"']").remove();

        if(dataset.crdnPhotoId != null && dataset.crdnPhotoId != ""
            && dataset.mosaic != null && dataset.mosaic != ""
        	&& flag){

        	var mosaicInfoArr = dataset.mosaic.split("|");

			var zoomX = target.width / target.naturalWidth;
			var zoomY = target.height / target.naturalHeight;

        	for(var j=0; j < mosaicInfoArr.length; j++){
        		var mosaicInfo = mosaicInfoArr[j].split(",");
        		var x2 = mosaicInfo[0] * zoomX
				var y2 = mosaicInfo[1] * zoomY
				var w2 = mosaicInfo[2] * zoomX
				var h2 = mosaicInfo[3] * zoomY

				var mosaic = document.createElement("div");
				mosaic.style["position"] = "absolute";
				mosaic.style["top"] = y2 + "px";
				mosaic.style["left"] = x2 + "px";
				mosaic.style["width"] = w2 + "px";
				mosaic.style["height"] = h2 + "px";
				mosaic.style["background-color"] = "black";
				mosaic.setAttribute("data-ref", targetId);
				$(target).after(mosaic);
        	}
        }
    }

}

/*---------------------  통합조회 버튼 클릭 이벤트 ---------------------*/
$("#btnFastSearch--top").on( "click", function() {
	fnGlobalFastSearch();
});

$("#fastTerm--top").onEnterPress(fnGlobalFastSearch);

function fnGlobalFastSearch(){

	var integrationSearchUrl = wctx.url("/sprt/sprt01/010/main.do");
	if(mainTabs.getDataset().find(i => i.url == integrationSearchUrl) != null){
		mainTabs.close(integrationSearchUrl);
	}


	if($("#fastTerm--top").val() != ""){
		fastSearch = true;
	}
	openMenu(integrationSearchUrl);

}

/*---------------------  종합민원관리 클릭 이벤트 ---------------------*/
FimsSupport.mappingButtonAndMenu("btnGoToCvlcptDscsn","민원상담");
/*---------------------  일정관리 클릭 이벤트 ---------------------*/
FimsSupport.mappingButtonAndMenu("btnGoToNtc","공지사항");
/*---------------------  공지사항 클릭 이벤트 ---------------------*/
FimsSupport.mappingButtonAndMenu("btnGoToSchdl","일정관리");

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

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

/*--------------------- 단속사진 모자이크 체크박스 클릭 이벤트 ---------------------*/
$("#photoMask--top").on( "click", function() {
    if($("#photoMask--top").is(":checked")){
        fn_photoMask(true);
    } else {
        fn_photoMask(false);
    }
});

/*--------------------- 외부자료 파일 처리 ---------------------*/
$("#btnOpenTempFileUploadWindow").on( "click", function() {
	fnOpenTempFileUploadWindow();
});
/*--------------------- 특화 설정 ---------------------*/
$("#btnOpenSelectStngDialog").on( "click", function() {
	fnOpenSelectStngDialog();
});

</c:set>

