<%
/**
 * <pre>
 * @Class Name : getDetailedSearchFormPopup.jsp
 * 
 * @Description : 상세검색 팝업 
 * 
 * 
 * @프로젝트명: 지방문화원 통합자료관리시스템 구축사업 (2021)
 *
 * </pre>
 *
 * @ ------------    --------    ---------------------------
 * @ 수정일                     수정자             수정내용
 * @ ------------    --------    ---------------------------
 * @ 2021. 10. 19.    JSYOO       최초 생성
 *
 * 
 * @author 이씨플라자 * DIGITALSHIP JSYOO
 * @since 2021. 10. 19.
 * @version 1.0
 *
 */
 %>
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %>
<c:set var="pageTitle">상세 검색</c:set>
<script>
$(document).ready(function() {
    // $('.pop-advanced-search').fadeIn();
    // $('html,body').addClass('no-scroll');
	// 상세검색 팝업 - 문화원정보 선택영역 초기작업 메서드 분리
	var depth2H = 0;
		$(".pop-advanced-search .depth1-check input").each(function () {
	        if ($(this).is(":checked")) {
	            // 활성화 line에 높이 잡아주기
	            $(".depth1").removeClass("on");
	            $(this).parents(".depth1").addClass("on");
	            depth2H = $(this).parents(".depth1-check").next(".depth2").outerHeight();
	            $(this).parents(".line").siblings(".line").attr("style", "");
	            $(this).parents(".line").height(130);
	            //.height(depth2H + 50);
	        }
	
	        var tabLabel = $(this).next().text();
	        $(this)
	            .parent(".depth1-check")
	            //.append('<button type="button" class="tab-name">' + tabLabel + "</button>");
	        var windowWidth = $(window).width();
	        $(this)
	            .siblings(".tab-name")
	            .on("click", function () {
	                $(".depth1").removeClass("on");
	                $(this).parents(".depth1").addClass("on");
	                depth2H = $(this).parents(".depth1-check").next(".depth2").outerHeight();
	                $(".line").attr("style", "");
	                $(this).parents(".line").height(130);
	                $(".depth1").height(50);
	                if (windowWidth < 480) {
	                    var elHeight = $(this).parents().next(".depth2").outerHeight();
	                    $(this)
	                        .parents(".depth1")
	                        .height(elHeight + 50);
	                    $(".line").css("margin-bottom", "30px");
	                    $(this).parents(".line").css("margin-bottom", "130px");
	                } else {
	                    $(".line").css("margin-bottom", "30px");
	                }
	            });
	
	        if (windowWidth < 480) {
	            var clickEle = $(".depth1");
	            var depth2Ele = $(".pop-advanced-search .conditions-wrap .depth1 .depth2");
	            clickEle.click(function () {
	                var indexNo = $(this).index();
	                if (indexNo <= 2) {
	                    depth2Ele.css("top", "50px");
	                } else if (3 <= indexNo && indexNo < 6) {
	                    depth2Ele.css("top", "100px");
	                } else {
	                    depth2Ele.css("top", "152px");
	                }
	                // $(".right-div span").eq(indexNo).toggleClass("hide");
	            });
	        }
	    });
        

        $('.pop-advanced-search .depth2 input').change(function() {
            var html = "";
            var depth1 = "";
            var depth2 = "";
            if ($(this).is(':checked')) {
                depth1 = $(this).parents('.depth2').siblings('.depth1-check').find('label').text();
                depth2 = $("label[for='"+$(this).attr('id')+"']").text();
                
                html = "<li><button type=\"button\" onclick=\"function('');\" title=\"삭제\" name=\""+ $(this).attr('id') +"\">" + depth1 + "<span class=\"sign\"> > </span>"+ depth2 +"</button></li>" 
                    
                $(this).parents('.depth2').siblings('.depth1-check').find('input').prop('checked', true);
                $(this).parents('.conditions-box').siblings('.selected-conditions').find('.conditions').append(html);
                
            } else {
                $("button[name="+$(this).attr('id')+"]").remove();
                if ($(this).parents('.depth2').find('input:checked').length <= 0) {
                    $(this).parents('.depth2').siblings('.depth1-check').find('input').prop('checked', false);
                }
            }
            //filter_mylist clk array 
            var filter_mylist = "";
            var filter_mylist_clk = "";
            filter_mylist = $('#d_filter_mylist').val();  
            
            
            if($(this).attr('name') == 'second_class'){
                filter_mylist_clk  = 'class_'+$(this).val() +',';
            }else if($(this).attr('name') == 'second_category'){
                filter_mylist_clk  = 'category_'+$(this).val() +',';
            }
            
            if($(this).is(":checked")){ 
                filter_mylist  += filter_mylist_clk;
                
            }else{  
                filter_mylist = filter_mylist.replace(filter_mylist_clk,'');
            }
            $('#d_filter_mylist').val(filter_mylist);
            
          //depth-1      
            var on_classArr = document.querySelectorAll("div.depth1.on");
            var filter_class = "" ;
            var filter_category = "" ;
            for(var i=0; i<on_classArr.length; i++){
                if($(on_classArr[i]).find('input').attr('name')  == 'first_class') {
                    filter_class = $(on_classArr[i]).find('input').val();
                }else{
                    filter_category = $(on_classArr[i]).find('input').val();
                }
            }  
            
            var listForm = document.forms["d_referencelistForm"];
            listForm.filter_class.value = filter_class;
            listForm.filter_category.value = filter_category;
            
        });

        // 상세검색 선택조건 초기화
        $('.pop-advanced-search .btn-reset-conditions').on('click', function() {
            $("input[id^='"+$(this).attr('name')+"-chk']").each(function() {
            	if($(this).is(':checked'))
           		{
            		$(this).trigger('click');
           		}
            });
            $(this).parents('.title').siblings('.conditions').find('*').remove();
        });
        
        // depth-1 열고 닫기
        $('.filter-tit .btn-toggle').on('click', function() {
            if($(this).text() == '닫기') {
                $(this).text('열기');
                $(this).parent('.filter-tit').siblings('.filter-list').stop().slideUp();
                $('.filter .btn-toggle-more').css('display','none');
            } else {
                $(this).text('닫기');
                $(this).parent('.filter-tit').siblings('.filter-list').stop().slideDown();
                $('.filter .btn-toggle-more').css('display','block');
            }
        });

        // depth-2 열고 닫기
        $('.filter .depth-1 .btn-toggle').on('click', function () {
            var _this = $(this).parents('li').index();
            if ($(this).text() == '닫기') {
                $(this).text('열기');
                $(this).siblings('.check').find('.tab-name').trigger("click");
            } else {
                $(this).text('닫기');
                $(this).siblings('.check').find('.tab-name').trigger("click");
            }
        });

        $('.filter-wrap .tab-name').on('click', function() {
            if ($('body').hasClass('pop-filter')) {
                $(this).parents('.depth-1').removeClass('on');
            }
        });
        
	$('#d_referencelistForm input[id^=times-chk]').change(function () {
		var id = $(this).attr('id');
		if(id == "times-chk1")
		{
			$("input[id^='times-chk']").each(function() {
				if($(this).attr('id') != id)
  	             $(this).prop('checked', false);
	        });
		}else{
			$("#times-chk1").prop('checked',false);
		}
	});
	
	$('#d_referencelistForm input[id^=class-chk]').change(function () {
        var id = $(this).attr('id');
        if(id == "class-chk1")
        {
            $("input[id^='class']").each(function() {
                if($(this).attr('id') != id)
                 $(this).prop('checked', false);
            });
        }else{
            $("#class-chk1").prop('checked',false);
        }
    });
	
	if(document.getElementById("referencelistForm")){
    //상세검색 세팅
     detailSearchSetting();
    } 
});
<%//상세검색 ALL 초기화%>
function allReset(){

    $("#d_query").val("");
    $("#d_bookIndex").val("");
    $("#d_mngtNo").val("");
    $("#d_creatYyyyStart").val("");
    $("#d_creatYyyyEnd").val("");
    $("#d_createStartDate").val("");
    $("#d_createEndDate").val("");
    
    $('#d_referencelistForm input[name=ageCode]').each(function() {
    	$(this).prop("checked",false);
    });
    $("#times-chk1").prop("checked",true);
    
    $('#d_referencelistForm input[name=collectionList]').each(function() {
    	$(this).prop("checked",false);
    });
    $("#class-chk1").prop("checked",true);
    
     $('.pop-advanced-search .btn-reset-conditions').each(function(){
         $(this).trigger('click');
     });
}
function d_search(){
	var colCount=0;
	var ageCount=0;
	var filter_myList = $("#d_filter_mylist").val();
	var collection ="";
	if($("#d_creatYyyyStart").val() != "" && $("#d_creatYyyyEnd").val() != "")
	{
		$("#d_filter_creatYyyy").val("date");
		filter_myList+= "creat_date,";
	}else{
		$("#d_filter_creatYyyy").val("all");
	}
/* 	if($("#d_query").val() != "")
    {
		filter_myList+= "search_query,";
    }
 */	if($("#d_bookIndex").val() != "")
    {
		filter_myList+= "search_bookIndex,";
    }
	if($("#d_mngtNo").val() != "")
    {
		filter_myList+= "search_mngtNo,";
    }
	if($("#d_createStartDate").val() != "" && $("#d_createEndDate").val() != "")
    {
		filter_myList+= "search_era,";
    }
	$("input[name='ageCode']").each(function() {
		if($(this).is(":checked"))
		{
			ageCount += 1;
		}
     });
	if(ageCount > 0)
	{
		filter_myList+= "search_ageCode,";
	}
	
	$("input[name='collectionList']").each(function() {
        if($(this).is(":checked"))
        {
            colCount += 1;
            collection = $(this).val();
            return false;
        }
     });
	if(colCount > 0)
    {
		$("#d_referencelistForm").append("<input type=\"hidden\" name=\"collection\" value=\"" + collection + "\">");
		filter_myList+= "search_collectionList,";
    }
	$("#d_filter_mylist").val(filter_myList);
	document.d_referencelistForm.submit();
}


//소장자료페이지 로드시 상세검색 세팅
function detailSearchSetting(){
    $("#d_query").val($("#query").val());
    $("#d_bookIndex").val($("#bookIndex").val());
    $("#d_mngtNo").val($("#mngtNo").val());
    $("#d_creatYyyyStart").val($("#creatYyyyStart").val());
    $("#d_creatYyyyEnd").val($("#creatYyyyEnd").val());
    $("#d_createStartDate").val($("#createStartDate").val());
    $("#d_createEndDate").val($("#createEndDate").val());
    
    var mylist_arr = $("#referencelistForm [name=filter_mylist]").val().split(",");
    var chk_value = "";
    for(var i=0; i<mylist_arr.length; i++){
    	chk_value = mylist_arr[i].substring((mylist_arr[i].indexOf("_")+1));
        if(mylist_arr[i].indexOf("class")>=0)
        {
            $("#d_referencelistForm [name=second_class]").each(function (index, item) {
                if($(this).val() == chk_value)
               	{
                    $(this).trigger("click");
               	}
            });  
        }else if(mylist_arr[i].indexOf("category")>=0)  
       	{
        	$("#d_referencelistForm [name=second_category]").each(function (index, item) {
                if($(this).val() == chk_value)
                {
                    $(this).trigger("click");
                }
            });  
       	}else if(mylist_arr[i].indexOf("search_ageCode")>=0)  
        {
       		var ageCode_arr = $("#ageCode").val().split(",");
            $("#d_referencelistForm [name=ageCode]").each(function (index, item) {
            	for(var i=0; i < ageCode_arr.length ; i++)
           		{
            		if($(this).val() == ageCode_arr[i])
          			{
            			$(this).trigger("click");		
           			}
           		}
            });  
        }else if(mylist_arr[i].indexOf("search_collectionList")>=0)  
        {
        	var collection_arr = $("#collectionList").val().split(",");
            $("#d_referencelistForm [name=collectionList]").each(function (index, item) {
            	for(var i=0; i < collection_arr.length ; i++)
                {
                    if($(this).val() == collection_arr[i])
                    {
                        $(this).trigger("click");       
                    }
                }
            });  
        }
    }
}; 
</script>

        <div class="pop-wrap">
            <div class="Title">
                <span>상세 검색</span>
                <span>검색어와, 검색조건들을 통해서 더 정확한 정보를 찾아보세요.</span>
                <span><a href="javascript:;" class="btn-close-pop" onclick="fn_closeLayerPopup();"><img src="/images/btn/btn-pop-close.png" alt="닫기 아이콘"></a></span>
            </div>
            <form action="/search/searchList.do" method="POST" id="d_referencelistForm" name="d_referencelistForm" class="mCustomScrollbar" data-mcs-theme="dark-2">
                <input type="hidden" id="d_filter_class" name="filter_class">
                <input type="hidden" id="d_filter_category" name="filter_category">
                <input type="hidden" id="d_filter_mylist" name="filter_mylist">
                <input type="hidden" id="d_filter_creatYyyy" name="filter_creatYyyy" value="">
                <div class="scroll-wrap">
                    <fieldset>
                        <legend>상세검색 입력폼</legend>
                        <ul class="advanced-form-table">
                            <li class="row-keyword fw">
                                <p class="tit"><label for="d_query">검 색</label></p>
                                <div class="input-area">
                                    <input type="text" placeholder="검색어를 입력하세요."  id="d_query" name="query" value="" />
                                </div>
                            </li>
                            <li class="row-keyword-detail">
                                <p class="tit"><label for="d_bookIndex">목차검색</label></p>
                                <div class="input-area">
                                    <input type="text" placeholder="검색어를 입력하세요." id="d_bookIndex" name="bookIndex" value="" />
                                </div>
                            </li>
                            <li class="row-control-num">
                                <p class="tit"><label for="d_mngtNo">관리번호</label></p>
                                <div class="input-area">
                                    <input type="text" placeholder="예) KCCF201808030000234" id="d_mngtNo" name="mngtNo" value="" />
                                </div>
                            </li>
                            <li class="row-issued-year">
                                <p class="tit"><label for="d_creatYyyyStart">생산년도</label></p>
                                <div class="input-area">
                                    <input type="text" placeholder="예) 2018" id="d_creatYyyyStart" name="creatYyyyStart" value="" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');" maxlength='4'/>
                                    <span class="tilde">~</span>
                                    <input type="text" placeholder="예) 2019" id="d_creatYyyyEnd" name="creatYyyyEnd" value="" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');" maxlength='4'/><label for="d_creatYyyyEnd" class="blind">생산년도 끝</label>
                                </div>
                            </li>
                            <li class="row-age">
                                <p class="tit"><label for="d_createStartDate">연 대</label></p>
                                <div class="input-area">
                                    <input type="text" placeholder="예) 2017" id="d_createStartDate" name="createStartDate" value="" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');" maxlength='4'/>
                                    <span class="tilde">~</span>
                                    <input type="text" placeholder="예) 2018" id="d_createEndDate" name="createEndDate" value="" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');" maxlength='4'/><label for="d_createEndDate" class="blind">연대 끝</label>
                                </div>
                            </li>
                            <li class="row-times fw">
                                <p class="tit"><label for="">시 대</label></p>
                                <div class="input-area">
                                    <div class="check"><input type="checkbox" id="times-chk1" name="" checked><label for="times-chk1">전체</label></div>
                                    <div class="check"><input type="checkbox" value="03" id="times-chk2" name="ageCode"><label for="times-chk2">선사</label></div>
                                    <div class="check"><input type="checkbox" value="04|05|06" id="times-chk3" name="ageCode"><label for="times-chk3">고대</label></div>
                                    <div class="check"><input type="checkbox" value="07" id="times-chk4" name="ageCode"><label for="times-chk4">고려</label></div>
                                    <div class="check"><input type="checkbox" value="08" id="times-chk5" name="ageCode"><label for="times-chk5">조선</label></div>
                                    <div class="check"><input type="checkbox" value="11|12" id="times-chk6" name="ageCode"><label for="times-chk6">근대</label></div>
                                    <div class="check"><input type="checkbox" value="13|14" id="times-chk7" name="ageCode"><label for="times-chk7">현대</label></div>
                                    <div class="check"><input type="checkbox" value="02" id="times-chk8" name="ageCode"><label for="times-chk8">시대미상</label></div>
                                </div>
                            </li>
                            <li class="row-class fw">
                                <p class="tit"><label for="">이용구분</label></p>
                                <div class="input-area">
                                    <div class="check"><input type="checkbox" id="class-chk1" name="" checked><label for="class-chk1">전체</label></div>
                                    <div class="check"><input type="checkbox" value="lib_offline" id="class-chk2" name="collectionList"><label for="class-chk2">열람</label></div>
                                    <div class="check"><input type="checkbox" value="lib_loan" id="class-chk3" name="collectionList"><label for="class-chk3">대출</label></div>
                                    <div class="check"><input type="checkbox" value="lib_online" id="class-chk4" name="collectionList"><label for="class-chk4">온라인 열람</label></div>
                                    <div class="check"><input type="checkbox" value="lib_etc" id="class-chk5" name="collectionList"><label for="class-chk5">기타</label></div>
                                </div>
                            </li>
                        </ul>
                    </fieldset>
                    
                    <fieldset class="conditions-wrap conditions-subject">
                    	<h3>주제분야</h3>
                        <legend class="conditions-title">주제분야</legend>
                        <div class="selected-conditions">
                            <div class="title">
                                <p>선택조건</p>
                                <button type="button" class="btn-reset-conditions" name="subject">초기화</button>
                            </div>
                            <ul class="conditions">
                            </ul>
                        </div>
                        <div class="conditions-box">
                            <div class="line line1">
                                <c:set var="count" value="0" />
			                    <c:forEach var="firstCategoryInfo" items="${firstCategoryList}" varStatus="status">
			                        <c:if test="${firstCategoryInfo.upClsfId eq '2' }">
		                                <div class="depth1">
		                                    <div class="depth1-check check tab"><input type="checkbox" value="${firstCategoryInfo.clsfId}"  id="subject-chk${count+1}" name="first_category"/><label for="subject-chk${count+1}">${firstCategoryInfo.clsfNm}</label>
		                                    <button type="button" class="tab-name">${firstCategoryInfo.clsfNm}</button>
		                                    </div>
			                                <ul class="depth2">
			                                    <c:forEach var="secondCategoryInfo" items="${secondCategoryList}" varStatus="seStatus">
			                                        <c:if test="${firstCategoryInfo.clsfId eq secondCategoryInfo.upClsfId }">
			                                            <li><div class="check"><input type="checkbox" value="${secondCategoryInfo.clsfId}" id="subject-chk${count+1}-${seStatus.index+1}" name="second_category" /><label for="subject-chk${count+1}-${seStatus.index+1}">${secondCategoryInfo.clsfNm}</label></div></li>
			                                        </c:if>
			                                    </c:forEach>
			                                </ul>
			                              </div>
			                              <c:set var="count" value="${count+1 }" />
			                        </c:if>
			                    </c:forEach>
                            </div><!-- //line-1 -->
                        </div>
                    </fieldset>
                    
                    <fieldset class="conditions-wrap conditions-datype">
                    	<h3>자료유형</h3>
                        <legend class="conditions-title">자료유형</legend>
                        <div class="selected-conditions">
                            <div class="title">
                                <p>선택조건</p>
                                <button type="button" class="btn-reset-conditions" name="datype">초기화</button>
                            </div>
                            <ul class="conditions">
                            </ul>
                        </div>
                        <div class="conditions-box">
                            <div class="line line1">
                                <c:forEach var="firstClassList" items="${firstClassList}" varStatus="fcStatus">
			                            <div class="depth1">
			                                <div class="depth1-check check tab">
			                                    <input type="checkbox" value="${firstClassList.column1}" name="first_class" id="datype-chk${fcStatus.index+1}" />
			                                    <label for="data-type-chk${fcStatus.index+1}">${firstClassList.sCodeNm}</label>
			                                    <button type="button" class="tab-name">${firstClassList.sCodeNm}</button>
			                                </div>
				                            <ul class="depth2">
				                                <c:forEach var="secondClassList" items="${secondClassList}" varStatus="seStatus">
				                                    <c:if test="${firstClassList.column1 eq secondClassList.column2 }">
				                                        <li>
				                                            <div class="check">
				                                                <input type="checkbox" value="${secondClassList.sCodeId}" name="second_class" id="datype-chk${fcStatus.index+1}-${seStatus.index+1}" />
				                                                <label for="datype-chk${fcStatus.index+1}-${seStatus.index+1}">${secondClassList.sCodeNm}</label>
				                                            </div>
				                                        </li>
				                                    </c:if>
				                                </c:forEach>
				                            </ul>
			                            </div>
			                    </c:forEach>
                            </div><!-- //line-1 -->
                        </div>
                    </fieldset>
                    
                </div><!-- //scroll-wrap -->
                <div class="btn-wrap">
                    <button type="button" class="btn btn-white"  id="cmm_popudp_del" onclick="allReset();">초기화</button>
                    <button type="button" onclick="d_search();" class="btn btn-color"  id="cmm_popudp_submit">검색</button>
                    <button type="button" class="btn btn-gray btn-close-pop" onclick="fn_closeLayerPopup();">닫기</button>
                </div>
            </form>
        </div>
