<!DOCTYPE html>
<html lang="ko"
	  xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	  layout:decorator="web/common/layout/BrandLayoutWeb">
<!--
 *******************************************************************************
 * @source  : CategoryGoodsListFormWeb.html
 * @desc    : 카테고리 상품목록 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.02   bin2107     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
	<div id="container" class="container dp">
		<div class="breadcrumb">
			<ul id="navArea">
				<li class="bread_home" id="idHome"><a href="javascript:void(0);" id="navHome">홈</a></li>
				<li class="bread_2depth" id="navNm"></li>
			</ul>
		</div>
		<div class="wrap">
			<div class="content dp_list"> <!-- 페이지특정 클래스 = dp_list -->
				<div class="cont_head">
					<div>
						<h3 id="formTitle"></h3>
					</div>
				</div>
				<div class="lnb">
					<div class="lnb_tit">
						<h3>카테고리</h3>
					</div>
					<div class="lnb_category">
						<ul class="category" id="ulAllCate">

						</ul>
					</div>
				</div>
				<div class="cont">
					<form id="filterForm">
						<div class="cont_body">
							<div class="filter_list">
								<!-- 1depth -->
								<ul>
									<li data-id="tap02" th:if="${filterBrandList != null and !filterBrandList.empty}">
										<a href="javascript:void(0)">브랜드</a>
									</li>
									<li data-id="tap03" th:if="${filterSizeList != null and !filterSizeList.empty}">
										<a href="javascript:void(0)">사이즈</a>
									</li>
									<li data-id="tap04" th:if="${filterPriceList != null and !filterPriceList.empty}">
										<a href="javascript:void(0)">가격</a>
									</li>
									<li data-id="tap05">
										<a href="javascript:void(0)">할인율</a>
									</li>
									<li data-id="tap06" th:if="${filterAgeList != null and !filterAgeList.empty}">
										<a href="javascript:void(0)">연령</a>
									</li>
									<li data-id="tap07" th:if="${filterSeasonList != null and !filterSeasonList.empty}">
										<a href="javascript:void(0)">시즌</a>
									</li>
									<li data-id="tap08" th:if="${filterColorList != null and !filterColorList.empty}">
										<a href="javascript:void(0)">컬러</a>
									</li>
									<li data-id="tap09" th:if="${filterBenefitList != null and !filterBenefitList.empty}">
										<a href="javascript:void(0)">혜택</a>
									</li>
								</ul>
								<div class="form_field">
									<div>
										<input id="sexGb" type="checkbox" onclick="fnFilterOption(this,'on');"><label for="sexGb"> <span>남여 공용만 보기</span> </label>
									</div>
									<div>
										<input id="newProd" type="checkbox" onclick="fnFilterOption(this,'on');"><label for="newProd"> <span>신상품만 보기</span> </label>
									</div>
								</div>
							</div>
							<div class="filter_content">
								<!-- 브랜드 -->
								<div class="sort tap02" th:if="${filterBrandList != null and !filterBrandList.empty}" id="brandFilterDiv">
									<ul>
										<th:block th:each="oneData, status : ${filterBrandList}">
											<li>
												<label class="brand_btn">
													<input type="checkbox" group="filterValue" th:id="${'chkFilterBrand' + status.index}" name="brand" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="filterSel(this,'brand','off');"><span th:text="${oneData.filterNm}"></span>
												</label>
											</li>
										</th:block>
									</ul>
									<a href="javascript:void(0)" class="tap_close">delete-btn</a>
								</div>
								<!-- //브랜드 -->
								<!-- 사이즈 -->
								<div class="sort tap03" th:if="${filterSizeList != null and !filterSizeList.empty}" id="sizeFilterDiv">
									<ul>
										<li id="sizeLi1">
											<strong>상의</strong>
											<th:block th:each="oneData, status : ${filterSizeList}" th:if="${#strings.startsWith(oneData.filterCd,'T')}">
												<label class="size_btn">
													<input type="checkbox" group="filterValue" th:id="${'chkFilterTSize' + status.index}" name="size" th:vale="${oneData.filterNm}" th:data-id="${oneData.filterNm}" onclick="filterSel(this,'size','off','1');"><span th:text="${oneData.filterNm}">80</span>
												</label>
											</th:block>
										</li>
										<li id="sizeLi2">
											<strong>하의</strong>
											<th:block th:each="oneData, status : ${filterSizeList}" th:if="${#strings.startsWith(oneData.filterCd,'B')}">
												<label class="size_btn">
													<input type="checkbox" group="filterValue" th:id="${'chkFilterBSize' + status.index}" name="size" th:vale="${oneData.filterNm}" th:data-id="${oneData.filterNm}" onclick="filterSel(this,'size','off','2');"><span th:text="${oneData.filterNm}">80</span>
												</label>
											</th:block>
										</li>
										<li id="sizeLi3">
											<strong>신발</strong>
											<th:block th:each="oneData, status : ${filterSizeList}" th:if="${#strings.startsWith(oneData.filterCd,'S')}">
												<label class="size_btn">
													<input type="checkbox" group="filterValue" th:id="${'chkFilterSSize' + status.index}" name="size" th:vale="${oneData.filterNm}" th:data-id="${oneData.filterNm}" onclick="filterSel(this,'size','off','3');"><span th:text="${oneData.filterNm}">80</span>
												</label>
											</th:block>
										</li>
									</ul>
									<a href="javascript:void(0)" class="tap_close">delete-btn</a>
								</div>
								<!-- //사이즈 -->
								<!-- 가격 -->
								<div class="sort tap04" id="priceFilterDiv">
									<div class="range">
										<input type="text" class="js-range-slider01" name="" value="" />
										<input type="hidden" id="price_input_from" value="0"/>
										<input type="hidden" id="price_input_to" value="0"/>
									</div>
									<a href="javascript:void(0)" class="tap_close">delete-btn</a>
								</div>
								<!-- //가격 -->
								<!-- 할인율 -->
								<div class="sort tap05" id="dcrateFilterDiv">
									<ul style="display:none;">
										<li><input type="checkbox" id="percent01" name="range" value="0"><label for="percent01"><span></span><span>0%</span></label></li>
										<li><input type="checkbox" id="percent02" name="range" value="10"><label for="percent02"><span></span><span>10%</span></label></li>
										<li><input type="checkbox" id="percent03" name="range" value="20"><label for="percent03"><span></span><span>20%</span></label></li>
										<li><input type="checkbox" id="percent04" name="range" value="30"><label for="percent04"><span></span><span>30%</span></label></li>
										<li><input type="checkbox" id="percent05" name="range" value="40"><label for="percent05"><span></span><span>40%</span></label></li>
										<li><input type="checkbox" id="percent06" name="range" value="50"><label for="percent06"><span></span><span>50%</span></label></li>
										<li><input type="checkbox" id="percent07" name="range" value="60"><label for="percent07"><span></span><span>60%</span></label></li>
										<li><input type="checkbox" id="percent08" name="range" value="70"><label for="percent08"><span></span><span>70%</span></label></li>
										<li><input type="checkbox" id="percent09" name="range" value="80"><label for="percent09"><span></span><span>80%</span></label></li>
										<li><input type="checkbox" id="percent10" name="range" value="100"><label for="percent10"><span></span><span>100%</span></label></li>
									</ul>
									<div class="range">
										<input type="text" class="js-range-slider02" name="" value="" />
										<input type="hidden" id="dcrate_input_from" value="0"/>
										<input type="hidden" id="dcrate_input_to" value="0"/>
									</div>
									<a href="javascript:void(0)" class="tap_close">delete-btn</a>
								</div>
								<!-- //할인율 -->
								<!-- 연령 -->
								<div class="sort tap06" th:if="${filterAgeList != null and !filterAgeList.empty}" id="ageFilterDiv">
									<ul>
										<th:block th:each="oneData, status : ${filterAgeList}">
											<li>
												<label class="Age_btn">
													<input type="checkbox" group="filterValue" th:id="${'chkFilterAge' + status.index}" name="age" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="filterSel(this,'age','off');"><span th:text="${oneData.filterNm}">베이비(0~18개월)</span>
												</label>
											</li>
										</th:block>
									</ul>
									<a href="javascript:void(0)" class="tap_close">delete-btn</a>
								</div>
								<!-- //연령 -->
								<!-- 시즌 -->
								<div class="sort tap07" th:if="${filterSeasonList != null and !filterSeasonList.empty}" id="seasonFilterDiv">
									<ul>
										<th:block th:each="oneData, status : ${filterSeasonList}">
											<li>
												<label class="Season_btn">
													<input type="checkbox" group="filterValue"  th:id="${'chkFilterSeason' + status.index}" name="season" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="filterSel(this,'season','off');"><span th:text="${oneData.filterNm}">봄</span>
												</label>
											</li>
										</th:block>
									</ul>
									<a href="javascript:void(0)" class="tap_close">delete-btn</a>
								</div>
								<!-- //시즌 -->
								<!-- 컬러 -->
								<div class="sort tap08" th:if="${filterColorList != null and !filterColorList.empty}" id="colorFilterDiv">
									<ul>
										<th:block th:each="oneData, status : ${filterColorList}">
											<li>
												<label class="color-check">
													<input type="checkbox" group="filterValue" th:id="${'chkFilterColor' + status.index}" name="color" th:value="${oneData.filterNm}" th:data-id="${oneData.filterNm.replace('#','')}" onclick="filterSel(this,'color','off');">
													<span class="pdColor-color" th:if="${oneData.filterNm=='#FFFFFF'}" th:style="${'background-color:'+oneData.filterNm+';'+' border:1px solid #aaa;'}" th:value="${oneData.filterNm}"></span>
													<span class="pdColor-color" th:if="${oneData.filterNm!='#FFFFFF'}" th:style="${'background-color:'+oneData.filterNm}" th:value="${oneData.filterNm}"></span>
												</label>
											</li>
										</th:block>
									</ul>
									<a href="javascript:void(0)" class="tap_close">delete-btn</a>
								</div>
								<!-- //컬러 -->
								<!-- 혜택 -->
								<div class="sort tap09" th:if="${filterBenefitList != null and !filterBenefitList.empty}" id="benefitFilterDiv">
									<ul>
										<th:block th:each="oneData, status : ${filterBenefitList}">
											<li>
												<label class="Benefits_btn">
													<input type="checkbox" group="filterValue" th:id="${'chkFilterBenefits' + status.index}" name="benefit" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="filterSel(this,'benefit','off');"><span th:text="${oneData.filterNm}"></span>
												</label>
											</li>
										</th:block>
									</ul>
									<a href="javascript:void(0)" class="tap_close">delete-btn</a>
								</div>
								<!-- //혜택 -->
								<!-- 필터 -->
								<div class="fillter">
									<div class="fillter_box" id="filterData">
									</div>
									<button type="button" class="fillter_reset" onclick="fnFilterReset();"><span>전체 초기화</span></button>
								</div>
								<!-- //필터 -->
							</div>
							<div class="list_content"> <!-- 데이터 없을시 클래스 nodata 추가 -->
								<div class="list_defult">
									<div>
										<p>선택하신 조건에 맞는 상품이 없습니다.<br>필터를 변경해 보세요.</p>
									</div>
									<div class="ui_row">
										<button type="button" class="btn btn_default btn_md"><span>선택한 필터 초기화</span></button>
									</div>
								</div>
								<div class="count_wrap">
									<div>
										<p><span id="totCntId"></span>개의 상품</p>
									</div>
									<div>
										<ul id="sortArea">
											<li>
												<a href="javascript:void(0);" class="on" onclick="fnSortList(this,'new');">최신상품순</a>
											</li>
											<li>
												<a href="javascript:void(0);" onclick="fnSortList(this,'best');">인기상품순</a>
											</li>
											<li>
												<a href="javascript:void(0);" onclick="fnSortList(this,'review');">리뷰 많은순</a>
											</li>
										</ul>
									</div>
								</div>

								<div id="infiniteContainer">
									<div id="listBoxOuter" class="itemsGrp">
										<ul class="productlist quarter" >
										</ul>
									</div>
								</div>

								<div class="itemsGrp" id="listBox">

								</div>

							</div>
							<div class="list_content">
								<div class="list_defult" id="endPage">
									<div>
										<p>마지막 페이지 입니다.</p>
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	
<!-- 	<form id="searchGoodsForm" name="searchGoodsForm"> -->
<!-- 		<input type="hidden" name="pageNo" id="pageNo" value ="1"/> -->
<!-- 		<input type="hidden" name="pageSize" value ="30"/> -->
<!-- 		<input type="hidden" name="cateNo" th:value="${cateInfo.cateNo}"/> -->
<!-- 		<input type="hidden" name="cateGb" th:value="${cateInfo.cateGb}"/> -->
<!-- 		<input type="hidden" name="brandGroupNo" th:value="${cateInfo.brandGroupNo}"/> -->
<!-- 		<input type="hidden" name="formalGb" th:value="${cateInfo.formalGb}"/> -->
<!-- 		<input type="hidden" name="cate1No" th:value="${cateInfo.cate1No}"/> -->
<!-- 		<input type="hidden" name="cate2No" th:value="${cateInfo.cate2No}"/> -->
<!-- 		<input type="hidden" name="cate3No" th:value="${cateInfo.cate3No}"/> -->
<!-- 		<input type="hidden" name="cate4No" th:value="${cateInfo.cate4No}"/> -->
<!-- 		<input type="hidden" name="sortGb" value="new"/> -->
<!-- 	</form> -->

	<script src="/ux/plugins/gaga/gaga.infinite.scrollSession.js"></script>
	<script src="/ux/plugins/jquery/jquery.history.min.js"></script>
	<script th:src="@{'/biz/goods.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/goods.js"></script>
	<script th:inline="javascript">
		/*<![CDATA[*/
		/*]]>*/
	</script>

	<script>
		//(진행 중)
		$(document).ready( function() {
			
		});
		
		/* 210427_수정 : err 이미지 스크립트 */
		function noneImg(noneSrc){
			$(noneSrc).parents('.itemPic').css({'background':'url(' + _uximgUrl + '/images/pc/thumb/bg_item_none.png)'});
			$(noneSrc).css({'opacity':'0'});
			//$(noneSrc).attr("src", no_src);
		}
	</script>

</th:block>

</body>
</html>
