$(function(){
	$('.user-orderBox').on('click','.delete',function(){
		const del = $(this).parents('.orderProduct')
		const n = del.attr('data-group')
		const bg = `
			<p>${String.fromCharCode(parseInt(n)+65)+_jsLang.組}</p>
			<p>${_jsLang.商品尚未選購}</p>
		`
		const classStr = `pic-bg num_${n}`

		del.find('.title').remove();
		del.find('img').animate(
			{
				opacity:0
			},
			300,
			function(){
				del.html(bg).removeAttr('class style').addClass(classStr)
			}
		);
	});

	$('.combosOuter .combosBox').each(function(i, ele) {
		$(ele).owlCarousel({
			dots: false,
			margin: 20,
			responsive: {
					0:{
						items : 2
					},
					576:{
						items : 3
					},
					768:{
						items : 4
					},
					992:{
						items : 5
					},
					1400:{
						items : 6
					},
				},
			nav: true,
			navText: ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
		});
	})
});


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

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

			// 預覽圖 hover 事件
			$(document).on('mouseenter', '.moreview .picitem', function(e) {
				e.preventDefault()
				const hoverTarget = $(this).attr('data-target')
				const funcWrap = $(this).parents('.preview-side')

				funcWrap.find(hoverTarget).addClass('in-hover')
						.siblings('.item-box').removeClass('in-hover')
			}).on('mouseleave', '.moreview', function(e) {
				e.preventDefault()

				const funcWrap = $(this).parents('.preview-side')
				funcWrap.find('.item-box').removeClass('in-hover')
			}).on('click', '.moreview .picitem', function(e) {
				e.preventDefault()
				const hoverTarget = $(this).attr('data-target')
				const funcWrap = $(this).parents('.preview-side')

				$(this).parents('.moreview')
					   .find('.picitem').removeClass('now')
					   .end()
					   .end().addClass('now')

				funcWrap.find(hoverTarget).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() < 992 && previewStep !== 'mobile') {
			previewStep = 'mobile'

			// 輪播
			if($('.preview-side .productImg').children().length > 1) {
				$('.preview-side .productImg').addClass('with-dots').owlCarousel({
					items: 1,
					dots: true,
					nav: true,
					navText: ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
					loop: true,
				})
			}

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

			// 預覽圖 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');
			});
		}
	})

	// moreview 輪播
	const gapRatio = 0.021
    if($('.moreview').find('.picitem').length > 4) {
    	$('.moreview').wrapInner('<div class="swiper-wrapper"></div>')
    				  .append(`
	    				  	<button class="swiper-button-prev" type="button">
	    				  		<i class="icon icon-angle-up" aria-label="prev"></i>
	    				  	</button>
	    				  	<button class="swiper-button-next" type="button">
	    				  		<i class="icon icon-angle-down" aria-label="next"></i>
	    				  	</button>
    				  	`)
    				  .find('.picitem').wrap('<div class="swiper-slide"></div>')
    	const swiper = new Swiper('.moreview', {
    		direction: "vertical",
    		slidesPerView: 4,
    		navigation: {
    			nextEl: '.swiper-button-next',
    			prevEl: '.swiper-button-prev',
    		},
    		breakpoints: {
    			992: {
		    		spaceBetween: $('.preview-side').width() * gapRatio,
    			},
    			1200: {
		    		spaceBetween: $('.preview-side').width() * gapRatio,
    			},
    			1400: {
    				spaceBetween: $('.preview-side').width() * gapRatio,
    			},
    			1600: {
    				spaceBetween: $('.preview-side').width() * gapRatio,
    			},
    		},
    	})
    }
})($)








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