<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="mob/common/layout/BrandLayoutMob">
<!--
 *******************************************************************************
 * @source  : AllBrandFormMob.html
 * @desc    : 전체브랜드 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.05.02   bin2107     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">

	<main role="" id="" class="container br">
		<!-- page nav: CS 고객센터 -->

		<!-- ★ 컨텐츠 시작 -->
		<section class="br_search_wrap">
			<div class="inner wide" th:if="${mainBrandList != null}" th:with="imgUrl=${@environment.getProperty('upload.image.view')}">
				<div class="hmenu">
					<div class="swiper-container brand_si">
						<div class="swiper-wrapper">
							<div class="swiper-slide" th:each="item, status : ${mainBrandList}">
								<div>
									<a href="javascript:void(0);" th:onClick="cfnGoToBrandMain([[${item.brandGroupNo}]]);">
										<span><img th:src="${imgUrl+item.logoFileNm}" alt=""></span>
									</a>
								</div>
							</div>
						</div>
						<!-- Add Pagination -->
						<div class="swiper-pagination"></div>
					</div>
					<div class="line"></div>
				</div>
			</div>
			<div class="inner">
				<form id="searchBrandForm" name="searchBrandForm" onsubmit="return false;">
				<div class="brand_title">
					<input type="text" id="search" name="search" placeholder="브랜드명을 입력해주세요" onkeypress="if( window.event.keyCode==13 ){$('#btnSearch').trigger('click');}">
					<!-- <button class="btn_x">X</button> -->
					<button type="button" id="btnSearch" ><img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/cs_search_btn.png'" alt=""></button>
				</div>
				</form>
			</div>
			<div id="idBrandList"></div>
			<div class="inner" id="idNodata">
				<div class="brand nodata">
					<p>브랜드 검색 결과가 없습니다.</p>
					<button type="button" class="btn" onclick="fnAllBrand();">브랜드 전체보기</button>
				</div>
			</div>


		</section>
		<!-- ★ 컨텐츠 종료 -->

	</main>
	
<script th:inline="javascript">
/*<![CDATA[*/
	$(document).ready(function(){
		$("#htopTitle").html('전체 브랜드');
		$("#idNodata").hide();
		setHtop();
		fnCreateAllBrandList();
	});

	let fnAllBrand = function (){
		$("#searchBrandForm").find("input[name=search]").val('');
		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 += '	</div>\n';
									tag += '</div>\n';
								}
								tag += '<div class="inner">\n';
								tag += '	<div class="result">\n';
								tag += '	<p class="title_abbr">'+item.brandInitial+'</p>\n';
								tag += '	<div class="brand">\n';
								$.each(result, function (idx, item2){
									if(item.brandInitial == item2.brandInitial){
										tag += '		<a href="javascript:void(0);" onclick="cfnGoToBrandMain('+item2.brandGroupNo+');">'+item2.brandGroupNm+'\n';
										if(item.dispNmLang=='KR'){
											tag += '<span>'+item2.brandGroupEnm+'</span>';
										}else{
											tag += '<span>'+item2.brandGroupKnm+'</span>';
										}
										tag += '		</a>';
									}
								});
								tag += '	</div>\n';
							}
							prevNav = item.brandInitial;
						});
						tag += '	</div>\n';
						tag += '</div>\n';
						$("#idBrandList").html(tag);
						$("#idNodata").hide();
					}else{
						$("#idBrandList").html('');
						$("#idNodata").show();
					}
				});
	}

	function setHtop() {
		if($('header').hasClass('main')) {
			$('#htopMain').show();
			$('#htopSub').hide();
		} else {
			$('#htopMain').hide();
			$('#gnb').hide();
			$('#htopSub').show();
		}
	}

	var swiperBrand = new Swiper('.swiper-container.brand_si', {
		slidesPerView: 3,
		slidesPerGroup: 6,
		slidesPerColumn: 2,
		spaceBetween: 0,
		pagination: {
			el: '.swiper-pagination',
			clickable: true,
		},
	});
</script>

</th:block>

</body>
</html>
