<%@ 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="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>주소 검색</title>
<%
	/**
	 * @파일명 : AdresSearch.jsp
	 * @파일정보 : 주소 검색 팝업화면
	 * @수정이력
	 * @수정자 수정일 수정내용
	 * @------- ------------ ----------------
	 * @박민규 2020.10.05. 최초생성
	 * @------- ------------ ----------------
	 * @수정자 2025.05.13. 팝업API에서 검색API로 변경
	 * @---------------------------------------
	 * @author (주)엑스아이티 개발팀
	 * @since 2020. 2. 2.
	 * @version 1.0 Copyright(c) XIT All rights reserved.
	 */
%>
<%
	/**
	* Encoding Set
	*	-시스템의 인코딩 설정에 따라 주석 해제 후 사용
	*/
	request.setCharacterEncoding("UTF-8"); 
	//request.setCharacterEncoding("EUC-KR");  

	String inputYn = request.getParameter("inputYn");
	String callback = request.getParameter("callback");
%>
</head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script language="javascript">
// 전역 변수 선언
var currentKeyword = ""; // 현재 검색어
var countPerPage = 10; // 페이지당 출력 개수

// 주소 검색 API 호출 함수
function searchAddress(page) {
	var keyword = document.getElementById("keyword").value;
	if(!keyword) {
		alert("검색어를 입력해주세요.");
		return;
	}

	// 페이지 번호가 없으면 1로 설정
	if(!page) {
		page = 1;
		// 새로운 검색어인 경우 현재 검색어 업데이트
		currentKeyword = keyword;
	}

	

	// 검색 결과 초기화
	document.getElementById("resultList").innerHTML = "";

	// 로딩 표시
	document.getElementById("resultList").innerHTML = "<p class='loading'>검색 중입니다...</p>";

    /*
    * 기존소스
    * url: "https://125.60.46.141/addrlink/addrLinkApi.do",
        //url: "http://10.182.60.20/addrlink/addrLinkApi.do",
        type: "post",
        dataType: "json",
        //url: "https://business.juso.go.kr/addrlink/addrLinkApiJsonp.do",
        //url: "http://10.182.60.20/addrlink/addrLinkApiJsonp.do",
        //type: "get",
        //dataType: "jsonp",
        //crossDomain:true,
		data: {
			confmKey: confmKey,
			currentPage: page,
			countPerPage: countPerPage,
			keyword: currentKeyword || keyword,
			resultType: "json"
		},
    * */

	// API 호출 (내부 API 경유)
	$.ajax({
        url: '<c:url value="/common/address/search.ajax" />',
        type: "get",
        data: {
			currentPage: page,
			countPerPage: countPerPage,
			keyword: currentKeyword || keyword
		},
        dataType: "json", // 서버로부터 JSON 응답을 기대
		success: function(data) {
			console.log(data);
            if(data.results.common.errorCode != "0") {
				alert(data.results.common.errorMessage);
				return;
			}

			var html = "";
			if(data.results.juso.length > 0) {
				for(var i=0; i<data.results.juso.length; i++) {
					var juso = data.results.juso[i];
					html += "<div class='address-item' onclick='selectAddress(this)' ";
					html += "data-road-addr='" + juso.roadAddr + "' ";
					html += "data-road-addr-part1='" + juso.roadAddrPart1 + "' ";
					html += "data-road-addr-part2='" + juso.roadAddrPart2 + "' ";
					html += "data-jibun-addr='" + juso.jibunAddr + "' ";
					html += "data-eng-addr='" + juso.engAddr + "' ";
					html += "data-zip-no='" + juso.zipNo + "' ";
					html += "data-adm-cd='" + juso.admCd + "' ";
					html += "data-rn-mgt-sn='" + juso.rnMgtSn + "' ";
					html += "data-bd-mgt-sn='" + juso.bdMgtSn + "' ";
					html += "data-det-bd-nm-list='" + (juso.detBdNmList || "") + "' ";
					html += "data-bd-nm='" + (juso.bdNm || "") + "' ";
					html += "data-bd-kdcd='" + juso.bdKdcd + "' ";
					html += "data-si-nm='" + juso.siNm + "' ";
					html += "data-sgg-nm='" + juso.sggNm + "' ";
					html += "data-emd-nm='" + juso.emdNm + "' ";
					html += "data-li-nm='" + (juso.liNm || "") + "' ";
					html += "data-rn='" + juso.rn + "' ";
					html += "data-udrt-yn='" + juso.udrtYn + "' ";
					html += "data-buld-mnnm='" + juso.buldMnnm + "' ";
					html += "data-buld-slno='" + juso.buldSlno + "' ";
					html += "data-mt-yn='" + juso.mtYn + "' ";
					html += "data-lnbr-mnnm='" + juso.lnbrMnnm + "' ";
					html += "data-lnbr-slno='" + juso.lnbrSlno + "' ";
					html += "data-emd-no='" + juso.emdNo + "' ";
					html += ">";
                    html += "<p><strong>[지번]</strong> " + juso.jibunAddr + "</p>";
                    html += "<p><strong>[도로명]</strong> " + juso.roadAddr + "</p>";
					html += "<p><strong>[우편번호]</strong> " + juso.zipNo + "</p>";
					html += "</div>";
				}
			} else {
				html = "<p>검색 결과가 없습니다.</p>";
			}

			document.getElementById("resultList").innerHTML = html;

			// 페이징 처리
			var common = data.results.common;
			var totalCount = parseInt(common.totalCount);
			var currentPage = parseInt(common.currentPage);
			var totalPage = Math.ceil(totalCount / countPerPage);

			// 페이징 UI 생성
			createPagination(totalCount, currentPage, totalPage);
		},
		error: function(xhr, status, error) {
			alert("주소 검색 중 오류가 발생했습니다.");
			console.log(xhr);
			console.log(status);
			console.log(error);
		}
	});
}

// 페이징 UI 생성 함수
function createPagination(totalCount, currentPage, totalPage) {
	var paginationEl = document.getElementById("pagination");

	// 페이징 HTML 생성
	var html = "";

	// 검색 결과 총 개수 표시
	html += "<div class='total-count'>총 <strong>" + totalCount + "</strong>건</div>";

	// 페이지 네비게이션
	html += "<div class='page-navigation'>";

	// 이전 페이지 버튼
	if(currentPage > 1) {
		html += "<a href='javascript:void(0);' onclick='searchAddress(" + (currentPage - 1) + ")' class='page-btn prev'>이전</a>";
	} else {
		html += "<span class='page-btn prev disabled'>이전</span>";
	}

	// 페이지 번호
	var startPage = Math.max(1, currentPage - 2);
	var endPage = Math.min(totalPage, startPage + 4);

	// 시작 페이지가 1보다 크면 첫 페이지로 이동 버튼 추가
	if(startPage > 1) {
		html += "<a href='javascript:void(0);' onclick='searchAddress(1)' class='page-num'>1</a>";
		if(startPage > 2) {
			html += "<span class='ellipsis'>...</span>";
		}
	}

	// 페이지 번호 표시
	for(var i = startPage; i <= endPage; i++) {
		if(i === currentPage) {
			html += "<span class='page-num current'>" + i + "</span>";
		} else {
			html += "<a href='javascript:void(0);' onclick='searchAddress(" + i + ")' class='page-num'>" + i + "</a>";
		}
	}

	// 마지막 페이지가 총 페이지보다 작으면 마지막 페이지로 이동 버튼 추가
	/*if(endPage < totalPage) {
		if(endPage < totalPage - 1) {
			html += "<span class='ellipsis'>...</span>";
		}
		html += "<a href='javascript:void(0);' onclick='searchAddress(" + totalPage + ")' class='page-num'>" + totalPage + "</a>";
	}*/

	// 다음 페이지 버튼
	if(currentPage < totalPage) {
		html += "<a href='javascript:void(0);' onclick='searchAddress(" + (currentPage + 1) + ")' class='page-btn next'>다음</a>";
	} else {
		html += "<span class='page-btn next disabled'>다음</span>";
	}

	html += "</div>";

	paginationEl.innerHTML = html;
	paginationEl.style.display = (totalCount > 0) ? "block" : "none";
}

// 주소 선택 함수
function selectAddress(element) {
	var obj = new Object();

	obj.inputYn = "Y";
	obj.addrDetail = "";

    obj.roadFullAddr = element.getAttribute("data-road-addr");      // 전체 도로명주소
    obj.roadAddr = element.getAttribute("data-road-addr");          // 도로명주소
    obj.roadAddrPart1 = element.getAttribute("data-road-addr-part1"); // 도로명주소(참고항목 제외)
    obj.roadAddrPart2 = element.getAttribute("data-road-addr-part2"); // 도로명주소 참고항목
    obj.jibunAddr = element.getAttribute("data-jibun-addr");        // 지번주소
    obj.engAddr = element.getAttribute("data-eng-addr");            // 영문 주소
    obj.zipNo = element.getAttribute("data-zip-no");               // 우편번호
    obj.admCd = element.getAttribute("data-adm-cd");               // 행정구역코드
    obj.rnMgtSn = element.getAttribute("data-rn-mgt-sn");          // 도로명코드
    obj.bdMgtSn = element.getAttribute("data-bd-mgt-sn");          // 건물관리번호
    obj.detBdNmList = element.getAttribute("data-det-bd-nm-list");  // 상세건물명
    obj.bdNm = element.getAttribute("data-bd-nm");                 // 건물명
    obj.bdKdcd = element.getAttribute("data-bd-kdcd");             // 공동주택여부(1:공동주택, 0:비공동주택)
    obj.siNm = element.getAttribute("data-si-nm");                 // 시도명
    obj.sggNm = element.getAttribute("data-sgg-nm");               // 시군구명
    obj.emdNm = element.getAttribute("data-emd-nm");               // 읍면동명
    obj.liNm = element.getAttribute("data-li-nm");                 // 법정리명
    obj.rn = element.getAttribute("data-rn");                      // 도로명
    obj.udrtYn = element.getAttribute("data-udrt-yn");             // 지하여부(0:지상, 1:지하)
    obj.buldMnnm = element.getAttribute("data-buld-mnnm");         // 건물본번
    obj.buldSlno = element.getAttribute("data-buld-slno");         // 건물부번
    obj.mtYn = element.getAttribute("data-mt-yn");                 // 산여부(0:대지, 1:산)
    obj.lnbrMnnm = element.getAttribute("data-lnbr-mnnm");         // 지번본번(번지)
    obj.lnbrSlno = element.getAttribute("data-lnbr-slno");         // 지번부번(호)
    obj.emdNo = element.getAttribute("data-emd-no");               // 읍면동일련번호

	var callback = '<%= callback %>';
	if(callback==''||callback==null||callback==undefined)
		opener.jusoCallBack(obj);
	else{
		callback = 'opener.'+callback+'(obj)';
		eval(callback);
	}

	window.close();
}

// 엔터키 이벤트 처리
function handleKeyPress(event) {
	if (event.keyCode === 13) {
		event.preventDefault();
		searchAddress(1); // 새 검색은 항상 1페이지부터 시작
	}
}

// 페이지 로드 시 초기화
function init() {
	var inputYn = "<%= inputYn %>";
	if(inputYn == "Y") {
		window.close();
		return;
	}
	
	// 중요로직: URL에서 keyword 파라미터를 받아서 검색어 필드에 자동 입력
	var urlParams = new URLSearchParams(window.location.search);
	var keyword = urlParams.get('keyword');
	if (keyword) {
		document.getElementById("keyword").value = decodeURIComponent(keyword);
		// 자동으로 검색 실행
		searchAddress(1);
	}
}
</script>
<style>
body {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	margin: 0;
	padding: 20px;
	background-color: #f8f9fa;
	color: #1a202c;
}
.search-container {
	margin-bottom: 20px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	padding-bottom: 20px;
}

/* 타이틀 스타일 */
.title-container {
	background: linear-gradient(135deg, #467bcb 0%, #3a4352 100%);
	padding: 15px 20px;
	border-radius: 8px 8px 0 0;
	margin-bottom: 20px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
}

.title-container::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/></svg>');
	opacity: 0.3;
}

.search-title {
	color: white;
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	position: relative;
	padding-left: 10px;
	border-left: 4px solid #f1ae1b;
}

.search-example {
	color: #718096;
	font-size: 13px;
	margin: 0 20px 0px 20px;
	padding: 8px 12px;
	background-color: #f8f9fa;
	border-radius: 4px;
	border-left: 3px solid #e2e8f0;
}

/* 검색 박스 스타일 개선 */
.search-box {
	display: flex;
	margin-bottom: 15px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	border-radius: 4px;
	overflow: hidden;
}

#keyword {
	flex: 1;
	padding: 12px 15px;
	border: 1px solid #e2e8f0;
	border-right: none;
	border-radius: 4px 0 0 4px;
	font-size: 14px;
	transition: all 0.3s ease;
}

#keyword:focus {
	outline: none;
	border-color: #467bcb;
	box-shadow: 0 0 0 2px rgba(70, 123, 203, 0.1);
}

#searchBtn {
	padding: 12px 20px;
	background-color: #467bcb;
	color: white;
	border: none;
	border-radius: 0 4px 4px 0;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.3s ease;
}

#searchBtn:hover {
	background-color: #3a6cb5;
}

/* 주소 아이템 스타일 개선 */
.address-item {
	border: 1px solid #e2e8f0;
	padding: 15px;
	margin-bottom: 15px;
	cursor: pointer;
	border-radius: 6px;
	transition: all 0.3s ease;
	background-color: white;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.address-item:hover {
	background-color: #f8f9fa;
	border-color: #467bcb;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.address-item p {
	margin: 8px 0;
	line-height: 1.5;
}

.address-item p strong {
	color: #2d3748;
	display: inline-block;
	min-width: 70px;
}

/* 페이징 스타일 */
#pagination {
	margin-top: 30px;
	text-align: center;
}

.total-count {
	margin-bottom: 15px;
	text-align: right;
	font-size: 14px;
	color: #718096;
	padding: 5px 10px;
	background-color: #f8f9fa;
	border-radius: 4px;
	display: inline-block;
	float: right;
}

.page-navigation {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	clear: both;
}

.page-btn, .page-num {
	display: inline-block;
	margin: 0 3px;
	padding: 8px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	background-color: #fff;
	color: #4a5568;
	text-decoration: none;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.2s ease;
}

.page-btn.disabled {
	color: #cbd5e0;
	cursor: not-allowed;
	background-color: #f7fafc;
}

.page-num.current {
	background-color: #467bcb;
	color: white;
	border-color: #467bcb;
	font-weight: bold;
}

.page-btn:hover, .page-num:hover {
	background-color: #edf2f7;
	border-color: #cbd5e0;
}

.page-num.current:hover {
	background-color: #3a6cb5;
	border-color: #3a6cb5;
}

.ellipsis {
	display: inline-block;
	margin: 0 3px;
	padding: 8px;
	color: #718096;
}

.loading {
	text-align: center;
	padding: 30px;
	color: #718096;
	font-style: italic;
}
</style>
<body onload="init();">
	<div class="search-container">
		<div class="title-container">
			<h2 class="search-title">주소 검색</h2>
		</div>
		<div class="search-box">
			<input type="text" id="keyword" placeholder="도로명주소, 지번주소, 건물명으로 검색" onkeypress="handleKeyPress(event)">
			<button id="searchBtn" onclick="searchAddress(1)">검색</button>
		</div>
		<p class="search-example">예시) 도로명(반포대로 58), 지번(삼성동 25), 건물명(독립기념관)</p>
	</div>

	<div id="resultList"></div>
	<div id="pagination"></div>
</body>
</html>
