<!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/DefaultLayoutWeb">
<!--
 *******************************************************************************
 * @source  : AllBrandFormWeb.html
 * @desc    : 전체브랜드 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.12   bin2107     최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">
<div id="container" class="container br">
	<div class="breadcrumb">
		<ul>
			<li class="bread_home"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
			<li class="bread_2depth">전체 브랜드</li>
		</ul>
	</div>
	<div class="wrap">
		<div class="content br_sch_result"> <!-- 페이지특정 클래스 = br_sch_result -->
			<div class="cont_head">
				<h2 class="displayH t_c">전체 브랜드</h2>
				<div class="brand_banner_list" th:if="${mainBrandList != null}" th:with="imgUrl=${@environment.getProperty('upload.image.view')}">
					<ul>
						<li th:each="item, status : ${mainBrandList}">
							<a href="javascript:void(0);" th:onClick="cfnGoToBrandMain([[${item.brandGroupNo}]]);" th:style="${'background-image:url('+imgUrl+ item.logoFileNm+');'}">
								<span><em th:text="${item.brandGroupNm}">BUCKAROO</em></span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="cont_body">
				<div class="area_input">
					<form id="searchBrandForm" name="searchBrandForm" onsubmit="return false;">
						<fieldset>
							<legend>브랜드명 검색</legend>
							<input type="text" id="search" name="search" value="" placeholder="브랜드명 입력" class="search_input" title="검색어 입력" maxlength="100" onkeypress="if( window.event.keyCode==13 ){$('#btnSearch').trigger('click');}">
							<button type="button" class="sch_btn" id="btnSearch"><span>브랜드 검색</span></button>
						</fieldset>
					</form>
				</div>
				<div class="area_result">
					<!-- 브랜드 검색어 입력 전 -->
					<div class="default_box">
						<h3 class="sr-only">브랜드 전체 리스트</h3>
						<div class="brand_list" id="idBrandList">
							<!--<div class="list_blk">
								<span class="title_abbr">ㄱ</span>
								<ul>
									<li>
										<a id="#" href="#none">
											<span class="name_large">가르맨디</span>
											<span class="name_small">GARMENDI</span>
										</a>
									</li>
									<li>
										<a id="" href="#none">
											<span class="name_large">공동구매북</span>
											<span class="name_small">GONGDONGGUMAEBOOK</span>
										</a>
									</li>
								</ul>
							</div>-->
						</div>
					</div>
					<!-- //브랜드 검색어 입력 전 -->
					
					<!-- 브랜드 검색 결과 없을 시 노출 -->
					<div class="empty_box" id="idNodata" style="display:none;">
						<div class="nodata">
							<div class="txt_box">
								<p>
									브랜드 검색 결과가 없습니다.
								</p>
							</div>
							<div class="btn_box">
								<button class="btn btn_default" onclick="cfnGoToPage(_PAGE_ALL_BRAND);"><span>브랜드 전체보기</span></button>
							</div>
						</div>
					</div>
					<!-- //브랜드 검색 결과 없을 시 노출 -->
				</div>
			</div>
		</div>
	</div>
</div>

<script th:inline="javascript">
/*<![CDATA[*/
	$(document).ready(function() {
		fnCreateAllBrandList();
	});

	$('#btnSearch').on('click', function() {
		var searchBrand = $("#searchBrandForm").find("input[name=search]").val();
		fnCreateAllBrandList(searchBrand);
	});

	let fnCreateAllBrandList = function (brandGroupNm){
		let actionUrl = '/display/all/brand/list'
		if(!gagajf.isNull(brandGroupNm)){
			actionUrl += '?brandGroupNm='+brandGroupNm;
		}
		$("#idNodata").hide();
		$.getJSON(actionUrl
			, function(result, status){
					if(result.length>0){
						$("#idBrandList").html('');
						let tag = '';
						let prevNav = '';
						$.each(result, function (idx, item){
							if(prevNav != item.brandInitial){
								if(idx>0){
									tag += '	</ul>\n';
									tag += '</div>\n';
								}
								tag += '<div class="list_blk">\n';
								tag += '	<span class="title_abbr">'+item.brandInitial+'</span>\n';
								tag += '		<ul>\n';
								tag += '			<li>\n';
								tag += '				<a href="javascript:void(0);" onclick="cfnGoToBrandMain('+item.brandGroupNo+');">\n';
								tag += '					<span class="name_large">'+item.brandGroupNm+'</span>\n';
								if(item.dispNmLang=='KR'){
									tag += '					<span class="name_small">'+item.brandGroupEnm+'</span>\n';
								}else{
									tag += '					<span class="name_small">'+item.brandGroupKnm+'</span>\n';
								}
								tag += '				</a>\n'
								tag += '			</li>\n';
							}else{
								tag += '			<li>\n';
								tag += '				<a href="javascript:void(0);" onclick="cfnGoToBrandMain('+item.brandGroupNo+');">\n';
								tag += '					<span class="name_large">'+item.brandGroupNm+'</span>\n';
								if(item.dispNmLang=='KR'){
									tag += '					<span class="name_small">'+item.brandGroupEnm+'</span>\n';
								}else{
									tag += '					<span class="name_small">'+item.brandGroupKnm+'</span>\n';
								}
								tag += '				</a>\n'
								tag += '			</li>\n';
							}
							prevNav = item.brandInitial;
						});
						tag += '	</ul>\n';
						tag += '</div>\n';
						$("#idBrandList").html(tag);
					}else{
						$("#idBrandList").html('');
						$("#idNodata").show();
					}
			});
	}
/*]]>*/
</script>

</th:block>
</body>
</html>
