;(function($) {
	$.ajax({
		url: '/ajax/data/ajax_brands_list.php',
		method: 'GET',
		cache: false,
		async: false,
		dataType: 'json',
	}).done(function(res) {
		// ==========================================================
		// 	字母分類項次輸出
		// ==========================================================
		const alphaList = res.reduce((prev, item) => {
			const alphaType = (item.data.length === 0)? 'in-disable': '';
			prev += `
					<li class="alphabet-list-item ${alphaType}">
						<a class="alphabet-list-link" href="#${item.label}" title="">${item.name}</a>
					</li>

			`

			return prev
		}, '')
		$('.alphabet-list').prepend(alphaList)





		// ==========================================================
		// 	品牌列表輸出
		// ==========================================================
		const brandGroup = res.reduce((prev, item) => {
			// 個別群組中的品牌列表
			const  brandList = item.data.reduce((bPrev, brands) => {
				const brandType = (brands.type === "false")? 'in-disable': '';

				bPrev += `
				<li class="brands-list-item ${brandType}">
					<a class="brands-list-link" href="${brands.link}" title="${brands.name}">
						${brands.name}
					</a>
				</li>

				`
				return bPrev
			}, '')

			// 品牌群組列表
			if(item.data.length !== 0) {
				prev += `
					<div class="brands-group">
						<div class="brands-title" id="${item.label}">
							${item.name}
						</div>
						<ul class="brands-list">
							${brandList}
						</ul>
					</div>

				`
			}

			return prev
		}, '')

		function brandsOutput() {
			$('.brands-wrapper').empty().prepend(brandGroup)
            $('.aside-sex').find('.in-choice').removeClass('in-choice');
		}
		brandsOutput()

		// 所有品牌資料
		const allBrands = res.reduce((prev, item) => {
			return prev.concat(item.data)
		}, [])

		// ==========================================================
		// 	手機版快速搜尋功能
		// ==========================================================
		$('.quick-filter > input').on('keyup', function(e) {
			const resultValue = $(this).val().trim()

			if(resultValue) {
				const resultList = allBrands.filter(item => {
					const regex = new RegExp(resultValue, 'gi')

					return item.name.match(regex)
				})

				const resultString = resultList.reduce((prev, item) => {
					const brandType = (item.type === "false")? 'in-disable': '';

					return prev += `
					<li class="brands-list-item ${brandType}">
						<a class="brands-list-link" href="${item.link}" title="${item.name}">
							${item.name}
						</a>
					</li>

					`
				}, '')

				if($('.filter-wrapper .brands-group').length === 0) {
					$(this).parents('.filter-wrapper').append(`
						<div class="brands-group">
							<div class="brands-title"></div>
							<ul class="brands-list"></ul>
						</div>
					`)
				}
				$(this).parents('.filter-wrapper').find('.brands-title').text(`含「${resultValue}」關鍵字品牌 (${resultList.length}件)`)

				if(resultList.length !== 0) {
					$('.filter-wrapper .brands-list').empty().prepend(resultString)
				} else {
					$('.filter-wrapper .brands-list').empty().prepend(`<li class="no-result">找不到與搜尋條件相符的品牌</li>`)
				}
			} else {
				$('.filter-wrapper .brands-group').remove()
			}
		})


		// ==========================================================
		// 	電腦版搜尋功能
		// ==========================================================
		$('.aside-search-form').on('submit', function(e) {
			e.preventDefault()

			const resultValue = $(this).find('input').val().trim()
			const targetWrap = $(this).parents('#Main_Content').find('.brands-wrapper')

			if(resultValue) {
				const resultList = allBrands.filter(item => {
					const regex = new RegExp(resultValue, 'gi')

					return item.name.match(regex)
				})

				const resultString = resultList.reduce((prev, item) => {
					const brandType = (item.type === "false")? 'in-disable': '';

					return prev += `
					<li class="brands-list-item ${brandType}">
						<a class="brands-list-link" href="${item.link}" title="${item.name}">
							${item.name}
						</a>
					</li>

					`
				}, '')
				targetWrap.empty().append(`
					<div class="brands-group">
						<div class="brands-title"></div>
						<ul class="brands-list"></ul>
					</div>
				`)


				if(resultList.length !== 0) {
					targetWrap.find('.brands-title').text(`含「${resultValue}」關鍵字品牌 (${resultList.length}件)`)
					targetWrap.find('.brands-list').empty().prepend(resultString)
					targetWrap.append(`<button class="brands-return">清除搜尋</button>`)
				} else {
					targetWrap.find('.brands-list').remove()
					targetWrap.append(`
						<p class="no-result">找不到您所指定的品牌。</p>
						<button class="brands-return">回上一頁</button>
					`)
				}
			} else {
				brandsOutput()
			}

			$(this).find('input').val('')
		})


        // ==========================================================
        //  電腦版性別搜尋
        // ==========================================================
        $('.aside-sex').on('click','.switch-list-item', function(e) {
            e.preventDefault()

            $('.aside-sex').find('.in-choice').removeClass('in-choice');
            $(this).addClass('in-choice');

            const resultValue = $(this).attr('sid');
            const targetWrap = $(this).parents('#Main_Content').find('.brands-wrapper')
            if(resultValue) {
                const resultList = allBrands.filter(item => {
                    console.log(item);
                    return (item.gender.indexOf(resultValue) != '-1')
                })
                console.log(resultList);
                const resultString = resultList.reduce((prev, item) => {
                    const brandType = (item.type === "false")? 'in-disable': '';

                    return prev += `
                    <li class="brands-list-item ${brandType}">
                        <a class="brands-list-link" href="${item.link}" title="${item.name}">
                            ${item.name}
                        </a>
                    </li>

                    `
                }, '')
                targetWrap.empty().append(`
                    <div class="brands-group">
                        <div class="brands-title"></div>
                        <ul class="brands-list"></ul>
                    </div>
                `)

                var resultName;
                if(resultValue == 1){
                    resultName = 'MEN';
                }else if(resultValue == 2){
                    resultName = 'WOMEN';
                }

                if(resultList.length !== 0) {
                    targetWrap.find('.brands-title').text(`含「${resultName}」關鍵字品牌 (${resultList.length}件)`)
                    targetWrap.find('.brands-list').empty().prepend(resultString)
                    targetWrap.append(`<button class="brands-return">清除搜尋</button>`)
                } else {
                    targetWrap.find('.brands-list').remove()
                    targetWrap.append(`
                        <p class="no-result">找不到您所指定的品牌。</p>
                        <button class="brands-return">回上一頁</button>
                    `)
                }
            } else {
                brandsOutput()
            }

            $(this).find('input').val('')
        })


		// ==========================================================
		// 	返回品牌總表
		// ==========================================================
		$('body').on('click', '.brands-return', function(e) {
			brandsOutput()
		})





		// ==========================================================
		// 	響應式切換
		// ==========================================================
		let deviceSearch = ''

		$(window).on('resize', function(e) {
			const winWidth = $(window).width()

			if (deviceSearch !== 'mobile' && winWidth <= 1024) {
				deviceSearch = 'mobile'

				$(this).find('input').val('')
				brandsOutput()
			} else if (deviceSearch !== 'desktop' && winWidth > 1024) {
				deviceSearch = 'desktop'

				$('.quick-filter > input').val('')
				$('.filter-wrapper .brands-group').remove()
			}
		})
	}).fail(function(err, textStatus, errorThrown) {
		console.log(err)
        console.log('textStatus: ' + textStatus)
	})





	// ==========================================================
	// 	錨點定位
	// ==========================================================
	$('body').on('click', '.alphabet-list-link', function(e) {
		e.preventDefault()

		const target = $(this).attr('href')
		const scrollTop = $(target).offset().top - $('.header-01').outerHeight()

		$('body, html').animate(
			{
				scrollTop
			},
			750
		);
	})





})($)






;(function($) {



	// ==========================================================
	// 	字母項次列表開關
	// ==========================================================
	let alphaStep = 1

	$('#Main_Content').on('click', '.alphabet-toggle', function(e) {
		alphaStep = (alphaStep + 1) % 2

		toggleCheck(alphaStep, '.alphabet-list', 'in-open')
	})

	toggleCheck(alphaStep, '.alphabet-list', 'in-open')
})($)






// ==========================================================
//  filter group 開關
// ==========================================================
;(function($) {
  $('#Main_Content').on('click', '.filter-title', function(e) {
    $(this).parents('.filter-group:not(.checked-group)').toggleClass('in-open');
  })
})($)






// ==========================================================
//  篩選器挑選功能
// ==========================================================
;(function($) {
  let deviceType = ''
  const filterArray = []

  function filterCount(array, selector) {
    const arrayAmount = array.length
    $(selector).text(arrayAmount)
  }

  function filterTags(array, wrapper, className) {
    $(wrapper).empty()

    array.forEach((item, i) => {
      const itemEle = `<li class="${className}"><span></span>${item}</li>`

      $(wrapper).append(itemEle)
    })
  }

  function tagCheck(array, value, jqElement, className) {
    const tagIndex = array.indexOf(value)

    if(tagIndex !== -1) {
      array.splice(tagIndex, 1)
      jqElement.removeClass(className)
    } else {
      array.push(value)
      jqElement.addClass(className)
    }
  }

  function checkedBox(array, selector) {
    const arrayAmount = array.length

    if(arrayAmount) {
      $(selector).slideDown(500)
    } else {
      $(selector).slideUp(500)
    }
  }

  $(window).on('resize', function(e) {
    if ($(this).outerWidth(true) > 1024 && deviceType !== 'desktop') {
      deviceType = 'desktop'
      $('.checked-group').removeAttr('style')
    } else if ($(this).outerWidth(true) <= 1024 && deviceType !== 'mobile') {
      deviceType = 'mobile'
      if (filterArray.length) {
        $('.checked-group').css({
          display: 'block',
        })
      }
    }
  })

  $('#Main_Content').on('click', '.filter-group:not(.checked-group) .filter-list-item', function(e) {
    const targetValue = $(this).data('value')

    tagCheck(filterArray, targetValue, $(`[data-value="${targetValue}"]`), 'in-check')
    filterCount(filterArray, '.filter-box span')
    filterTags(filterArray, '.checked-group .filter-list', 'filter-list-item')
    if (deviceType === 'mobile') {
      checkedBox(filterArray, '.checked-group')
    }
  })

  $('#Main_Content').on('click', '.checked-group span', function(e) {
    const targetValue = $.trim($(this).parents('.filter-list-item').text())

    tagCheck(filterArray, targetValue, $(`[data-value="${targetValue}"]`), 'in-check')
    filterCount(filterArray, '.filter-box span')
    filterTags(filterArray, '.checked-group .filter-list', 'filter-list-item')
    if (deviceType === 'mobile') {
      checkedBox(filterArray, '.checked-group')
    }
  })

  $('#Main_Content').on('click', '.filter-clearall', function(e) {
    filterArray.length = 0

    $('.filter-list-item').removeClass('in-check')
    filterCount(filterArray, '.filter-box span')
    filterTags(filterArray, '.checked-group .filter-list', 'filter-list-item')
    if (deviceType === 'mobile') {
      checkedBox(filterArray, '.checked-group')
    }
  })

})($)






// ==========================================================
//  條件搜尋按鈕
// ==========================================================
;(function($) {
  function log(obj) {
    console.log(obj)
  }

  $(window).on('scroll', function(e) {
    const $offsetStart = $('#Main_Content').offset().top + $('#topTitle').outerHeight() - $('.header-fixe').outerHeight()
    const $offsetEnd = $('footer').offset().top - $(window).outerHeight(true) + $('.headerBottom').outerHeight()
    const $winWidth = $(window).outerWidth(true)

    if($winWidth <= 1024) {
      if ($(window).scrollTop() >= $offsetStart && $(window).scrollTop() <= $offsetEnd) {
        $('.mobile-scroll-button').fadeIn('500')
      } else {
        $('.mobile-scroll-button').fadeOut('150')
      }
    }

  })

  $(window).trigger('scroll')
})($)