// ==========================================================
// 	商品展示區塊輪播、商品圖預覽功能、手機版放大功能、購物跳窗
// ==========================================================
;(function($) {
	let previewStep = ''
	$(window).on('resize', function(e) {
		if($(this).width() >= 675 && previewStep !== 'desktop') {
			previewStep = 'desktop'

			// 輪播
			if($('.preview-side .productImg').data('owl.carousel')) {
				$('.preview-side .productImg').data('owl.carousel').destroy()
			}

			if($('.moreview').children('.picitem').length > 0) {
				$('.moreview').owlCarousel({
					dots: false,
					nav: true,
					navText: ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
					margin: 10,
					responsive:{
						0 : {
							items: 4
						},
						1200 : {
							items: 3,
							mouseDrag: false,
							touchDrag: false,
						}
					}
				})
			}
			

			// 預覽圖 hover 事件
			$('.moreview').on('mouseenter', '.picitem', function(e) {
				e.preventDefault()
				let targetIndex = null

				if($(this).parent().hasClass('moreview')) {
					targetIndex = $(this).index()
				} else {
					targetIndex = $(this).parent('.owl-item').index()
				}
				
				$('.preview-side .productImg').find('.item-box').eq(targetIndex).addClass('in-hover')
								.siblings('.item-box').removeClass('in-hover')
			}).on('mouseleave', function(e) {
				e.preventDefault()

				$('.preview-side .productImg').find('.item-box').removeClass('in-hover')
			})

			// 預覽圖 click 事件
			$('.moreview').on('click', '.picitem', function(e) {
				e.preventDefault()
				let targetIndex = null

				if($(this).parent().hasClass('moreview')) {
					targetIndex = $(this).index()
				} else {
					targetIndex = $(this).parent('.owl-item').index()
				}
				$(this).parents('.moreview').find('.picitem').removeClass('now')
					   .end().end().addClass('now')
				$('.preview-side .productImg').find('.item-box').eq(targetIndex).addClass('now')
								.siblings('.item-box').removeClass('now')
			})

			// 手機版放大圖
			$('.preview-side .productImg').off('click', '.item-box > a')
			$('body').off('click', '.zoomIn-wrapper')
			$('.zoomIn-wrapper').remove()
			$('body').removeClass('overflow-hidden')

			//購買跳窗
	        $(".selectPopupBox").removeClass('is-show');
			$('body').off('click', '.selectbox-button');
		} else if($(this).width() < 675 && previewStep !== 'mobile') {
			previewStep = 'mobile'

			// 輪播
			if($('.preview-side .productImg').children().length > 1) {
				$('.preview-side .productImg').owlCarousel({
					items: 1,
					dots: false,
					nav: true,
					navText: ['', ''],
					loop: true,
				})
			}

			if($('.moreview').data('owl.carousel')) {
				$('.moreview').data('owl.carousel').destroy()
			}

			// 預覽圖 hover 事件
			$('.moreview').off('mouseenter', '.picitem')
						  .off('mouseleave')

			// 預覽圖 click 事件
			$('.moreview').off('click', '.picitem')

			// 手機版放大圖
			$('.preview-side .productImg').on('click', '.item-box > a', function(e) {
				e.preventDefault()
				const zoomTarget = $(this).attr('href')
				const zoomInDom = `
					<div class="zoomIn-wrapper">
						<button class="zoomIn-closer" type="button">close</button>
						<div class="zoomIn-content">
							<img src="${zoomTarget}">
						</div>
					</div>`
				$('body').append(zoomInDom).addClass('overflow-hidden')
			})

			$('body').on('click', '.zoomIn-wrapper', function(e) {
				if(e.target === e.currentTarget || $(e.target).hasClass('zoomIn-closer')) {
					e.preventDefault()
					$('.zoomIn-wrapper').fadeOut('400').remove()
					$('body').removeClass('overflow-hidden')
				}
			})

			//開啟購買跳窗
			$('body').on('click', '.selectbox-button', function(e){
				e.preventDefault();
				$('body').addClass('overflow-hidden')
				$('.selectPopupBox').addClass('is-show');
			});
		}
	})
})($)



// ==========================================================
// 	您可能也會喜歡&歷史紀錄
// ==========================================================
$(function(){
	function panelCarousel(){
		$(".panel-content").each(function(){
			let panelCarouselObj = $(this)
			if($(window).width() > 1199){
				if(panelCarouselObj.children().length > 0){
					panelCarouselObj.owlCarousel({
						nav: true,
						dots: false,
						navText:  ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
						margin: 15,
						responsive: {
							0: {
								items: 2
							},
							992: {
								items: 3
							},
							1200 : {
								items: 4
							},
							1380 : {
								items: 5
							},
						},
					})
				}
			}else{
				if(panelCarouselObj.data('owl.carousel')){
					panelCarouselObj.data('owl.carousel').destroy()
					panelCarouselObj.trigger("destroy.owl.carousel")
				}
			}
		})
	}
	panelCarousel()
	$(window).on("resize", panelCarousel)
})

// ==========================================================
// 	規格與成份輪播
// ==========================================================
$(function(){
	let ingredientCarouselObj = $(".ingredient-box")
	if(ingredientCarouselObj.children().length > 1){
		ingredientCarouselObj.owlCarousel({
			nav: true,
			navText:  ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
			items: 1,
			responsive: {
				0: {
					dots: false,
				},
				1200: {
					dots: true,
				},
			},
		})
	}
})


// ==========================================================
// faq折疊
// ==========================================================
$(function(){
	$(document).on("click", ".faq-header", function(){
		let _this = $(this),
		item = _this.parents(".faq-item")


		if(item.hasClass("in-open")){
			item.find(".faq-answer").slideUp()
			item.removeClass("in-open")
		}else{
			$(".faq-item.in-open").find(".faq-answer").slideUp()
			$(".faq-item").removeClass("in-open")
			item.find(".faq-answer").slideDown()
			item.addClass("in-open")
		}
	})
})


// ==========================================================
// 	trigger function
// ==========================================================
;(function($, jQuery, window, document) {
    $(window).trigger('resize')
})($, jQuery, window, document)



// ==========================================================
//  複製連結
// ==========================================================
$(function(){
	$(document).on("click", ".copy-btn", function(e){
		window.navigator.clipboard.writeText($(this).data("link"))
		alert("複製連結成功")
	})
})