<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GoodsSizeInfoFormWeb.html
 * @desc	: 사이즈 안내 팝업
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE		 AUTHOR	  DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.03.08   eskim		최초 작성
 *******************************************************************************
 -->
 <div class="modal-dialog" role="document">
	<div class="modal-content">
		<div class="modal-header">
			<h5 class="modal-title" id="infoSizeLabel">사이즈정보</h5>
		</div>
		<div class="modal-body">
			<div class="pop_cont">
				<div class="tab_nav">
					<ul>
						<li th:if="${measurementList != null and !measurementList.empty}" th:class="${(measurementList != null and !measurementList.empty) ? 'active': ''}"><a href="javascript:void(0);" >실측 사이즈</a></li>
						<li th:if="${(commonSizeInfoList != null and !commonSizeInfoList.empty) or (brandSizeInfoList != null and !brandSizeInfoList.empty)}" th:class="${(measurementList == null or measurementList.empty) ? 'active': ''}"><a href="javascript:void(0);" >표준 사이즈</a></li>
						<li th:if="${measurementSizeInfoList != null and !measurementSizeInfoList.empty}"><a href="javascript:void(0);" >측정 가이드</a></li>
					</ul>
				</div>
				<div class="tab_cont_wrap">
					<div class="tab_cont" th:if="${measurementList != null and !measurementList.empty}">
						<!-- 실측 사이즈 -->
						<div class="size_head">
							<span class="tit_sub" th:text="${goodsInfo.brandGroupNm}">TBJ</span>
							<span class="tit_header" th:text="${goodsInfo.goodsNm}">남성 테이퍼드 핏 겨울 기모면 스판 올 밴딩 팬츠</span>
						</div>
						<div class="size_cont">
							<div class="size_tbl_box">
								<p class="size_unit">단위 : cm</p>
								<div class="tbl type2 scroll_tbl">
									<div class="head_t">
										<table>
											<colgroup>
												<col width="20%">
											</colgroup>
											<thead>
												<tr>
													<th>&nbsp;</th>
												</tr>
											</thead>
											<tbody>
												<th:block th:each="measurement, status : ${measurementList}" th:if="${status.first}">
												<th:block th:if="${measurement.typecd == '상의'}">
												<tr>
													<td scope="col">가슴둘레</td>
												</tr>
												<tr>
													<td scope="col">어깨너비</td>
												</tr>
												<tr>
													<td scope="col">팔길이</td>
												</tr>
												<tr>
													<td scope="col">총길이</td>
												</tr>
												</th:block>
												<th:block th:unless="${measurement.typecd == '상의'}">
												<tr>
													<td scope="col">허리둘레</td>
												</tr>
												<tr>
													<td scope="col">밑위</td>
												</tr>
												<tr>
													<td scope="col">엉덩이둘레</td>
												</tr>
												<tr>
													<td scope="col">허벅지둘레</td>
												</tr>
												<tr>
													<td scope="col">총길이</td>
												</tr>
												</th:block>
												</th:block>
											</tbody>
										</table>
									</div>
									<div class="body_t">
										<table>
											<colgroup th:each="measurement, status : ${measurementList}" th:if="${status.first}">
												<col th:if="${measurement.size1}" width="20%">
												<col th:if="${measurement.size2}" width="20%">
												<col th:if="${measurement.size3}" width="20%">
												<col th:if="${measurement.size4}" width="20%">
												<col th:if="${measurement.size5}" width="20%">
												<col th:if="${measurement.size6}" width="20%">
												<col th:if="${measurement.size7}" width="20%">
												<col th:if="${measurement.size8}" width="20%">
												<col th:if="${measurement.size9}" width="20%">
												<col th:if="${measurement.size10}" width="20%">
												<col th:if="${measurement.size11}" width="20%">
												<col th:if="${measurement.size12}" width="20%">
											</colgroup>
											<thead>
												<tr th:each="measurement, status : ${measurementList}" th:if="${status.first}" >
													<th scope="col" th:if="${measurement.size1}" th:text="${measurement.size1}">M</th>
													<th scope="col" th:if="${measurement.size2}" th:text="${measurement.size2}">M</th>
													<th scope="col" th:if="${measurement.size3}" th:text="${measurement.size3}">M</th>
													<th scope="col" th:if="${measurement.size4}" th:text="${measurement.size4}">M</th>
													<th scope="col" th:if="${measurement.size5}" th:text="${measurement.size5}">M</th>
													<th scope="col" th:if="${measurement.size6}" th:text="${measurement.size6}">M</th>
													<th scope="col" th:if="${measurement.size7}" th:text="${measurement.size7}">M</th>
													<th scope="col" th:if="${measurement.size8}" th:text="${measurement.size8}">M</th>
													<th scope="col" th:if="${measurement.size9}" th:text="${measurement.size9}">M</th>
													<th scope="col" th:if="${measurement.size10}" th:text="${measurement.size10}">M</th>
													<th scope="col" th:if="${measurement.size11}" th:text="${measurement.size11}">M</th>
													<th scope="col" th:if="${measurement.size12}" th:text="${measurement.size12}">M</th>
												</tr>
											</thead>
											<tbody>
												<th:block th:each="measurement, status : ${measurementList}" th:with="count=${(measurement.typecd =='상의')? 4: 5}">
												<tr th:if="${not status.first and status.index <= count}">
													<td th:if="${measurement.size1}" th:text="${measurement.size1}">95</td>
													<td th:if="${measurement.size2}" th:text="${measurement.size2}">95</td>
													<td th:if="${measurement.size3}" th:text="${measurement.size3}">95</td>
													<td th:if="${measurement.size4}" th:text="${measurement.size4}">95</td>
													<td th:if="${measurement.size5}" th:text="${measurement.size5}">95</td>
													<td th:if="${measurement.size6}" th:text="${measurement.size6}">95</td>
													<td th:if="${measurement.size7}" th:text="${measurement.size7}">95</td>
													<td th:if="${measurement.size8}" th:text="${measurement.size8}">95</td>
													<td th:if="${measurement.size9}" th:text="${measurement.size9}">95</td>
													<td th:if="${measurement.size10}" th:text="${measurement.size10}">95</td>
													<td th:if="${measurement.size11}" th:text="${measurement.size11}">95</td>
													<td th:if="${measurement.size12}" th:text="${measurement.size12}">95</td>
												</tr>
												</th:block>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- //실측 사이즈 -->
					<div class="tab_cont" th:if="${(commonSizeInfoList != null and !commonSizeInfoList.empty) or (brandSizeInfoList != null and !brandSizeInfoList.empty)}">
						<!-- 표준 사이즈 카테고리 구분일때 -->
						<th:block th:if="${(commonSizeInfoList != null and !commonSizeInfoList.empty) and (brandSizeInfoList == null or brandSizeInfoList.empty)}">
						<div class="size_head">
							<!-- 표준 사이즈 > 카테고리 선택 -->
							<div class="sub_tab_nav">
								<ul>
									<li th:each="commonSizeInfo, status : ${commonSizeInfoList}"  th:class="${status.first}? 'active' : ''" ><a href="javascript:void(0)" th:text="${commonSizeInfo.sizeCate2Nm}">여성</a></li>
								</ul>
							</div>
							<!-- //표준 사이즈 > 카테고리 선택 -->
						</div>
						<div class="size_cont">
							<div class="sub_tab_cont_wrap">
								<th:block th:each="commonSizeInfo, status : ${commonSizeInfoList}" th:utext="${#strings.unescapeJava(#strings.escapeJava(commonSizeInfo.sizeInfo))}"></th:block>
							</div>
						</div>
						</th:block>
						<th:block th:if="${brandSizeInfoList != null and !brandSizeInfoList.empty}">
						<!-- 표준 사이즈 브랜드별 구분일때 -->
						<!-- <div class="size_head">
							<span class="tit_sub" th:text="${goodsInfo.brandGroupNm}">페르지노몬티 FERGINO MONTI</span>
							<div class="sub_tab_nav">
								<ul>
									<li th:each="brandSizeInfo, status : ${brandSizeInfoList}"  th:class="${status.first}? 'active' : ''" ><a href="javascript:void(0)" th:text="${brandSizeInfo.sizeCate2Nm}">여성</a></li>
								</ul>
							</div>
						</div> -->
						<div class="size_cont">
							<div class="sub_tab_cont_wrap">
								<th:block th:each="brandSizeInfo, status : ${brandSizeInfoList}" th:utext="${#strings.unescapeJava(#strings.escapeJava(brandSizeInfo.sizeInfo))}"></th:block>
							</div>
						</div>
						</th:block>
						<div class="size_footer">
							<div class="info_txt">
								<ul>
									<li>본 사이즈 조견표는 표준 가이드로, 각 제품마다 다소간의 차이는 있을 수 있습니다.</li>
									<li>보다 자세한 사이즈는 각 상품 별 상품설명을 참조해주시기 바랍니다.</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="tab_cont" th:if="${measurementSizeInfoList != null and !measurementSizeInfoList.empty}">
						<!-- 측정 사이즈 -->
						<div class="size_head">
							<!-- 측정 사이즈 > 카테고리 선택 -->
							<div class="sub_tab_nav">
								<ul>
									<li th:each="measurementSizeInfo, status : ${measurementSizeInfoList}"  th:class="${status.first}? 'active' : ''" ><a href="javascript:void(0)" th:text="${measurementSizeInfo.sizeCate2Nm}">여성</a></li>
								</ul>
							</div>
							<!-- //측정 사이즈 > 카테고리 선택 -->
						</div>
						<div class="size_cont">
							<div class="sub_tab_cont_wrap">
								<th:block th:each="measurementSizeInfo, status : ${measurementSizeInfoList}" th:utext="${#strings.unescapeJava(#strings.escapeJava(measurementSizeInfo.sizeInfo))}"></th:block>
							</div>
						</div>
						<!-- //측정 사이즈 -->
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<a href="javascript:void(0);" rel="modal:close" onclick="cfCloseLayer('layer_size_info')" class="close-modal">Close</a>
<script th:inline="javascript">
/*<![CDATA[*/
	$(document).ready( function() {
		//팝업 - 사이즈정보 > 탭
		$(document).on('click','.info_size_pop .tab_nav ul li',function(e){
			$(this).addClass('active').siblings().removeClass('active');
			$('.info_size_pop .tab_cont_wrap .tab_cont').hide();		
			$('.info_size_pop .tab_cont_wrap .tab_cont').eq($(this).index()).show();
			return false;
		});

		//팝업 - 사이즈정보 > 서브탭
		$(document).on('click','.info_size_pop .sub_tab_nav ul li',function(e){
			$(this).addClass('active').siblings().removeClass('active');
			$(this).parents('.tab_cont').find('.sub_tab_cont').hide();
			$(this).parents('.tab_cont').find('.sub_tab_cont').eq($(this).index()).show();
			return false;
		});
	
	});
	
	var scrTbl,scrTblLeft,scrTblDown;
    $(".tbl.scroll_tbl .body_t").on('click', function() {
        $(this).on({
            "mousedown": function(e) {
                e.preventDefault();
                scrTblDown = true;
                scrTbl = e.pageX;
                scrTblLeft = $(this).scrollLeft();
            },
            "mousemove": function(e) {
                if(scrTblDown){
                    var newX = e.pageX;
                    $(this).scrollLeft(scrTblLeft - newX + scrTbl);
                }
            },
            "mouseup": function(e) {
                scrTblDown = false;
            },
        });
    });
	/*]]>*/
</script>
</html>