//基本資料頁
$(document).ready(function(){
	$("#Quest_Info").fromsAuth({type:'NONE'});
})

// 問卷答案蒐集
const questResult = {};
let slideStep = 0
const slideAmount = $('.quest-box').length

function setResult(selector, result) {
	// $(selector).each(function(i, ele) {
		const keyword = $(selector).parents('.quest-box').data('keyword')
		questResult[keyword] = result;
		console.log(questResult);
	// })
}
function deleteResult(selector) {
	const keyword = $(selector).parents('.quest-box').data('keyword')
	delete questResult[keyword]
	// console.log(questResult);
}
function slideShow(selector, index, activeClass) {
	const keyword = data[index].keyword
	$(selector + "[data-keyword=" + keyword + "]")
		.addClass(activeClass)
		.siblings(selector)
		.removeClass(activeClass)
}
function leftArrowCheck(index) {
	if(index === 0) {
		$('.nav-left').addClass('in-disabled')
	} else {
		$('.nav-left').removeClass('in-disabled')
	}
}
function rightArrowCheck(index) {
	const keyword = $('.in-show').data('keyword')
	if(index === slideAmount - 1 || questResult[keyword] === undefined) {
		$('.nav-right').addClass('in-disabled')
	} else {
		$('.nav-right').removeClass('in-disabled')
	}
	// console.log(questResult[keyword])
}
function submitCheck(index) {
	const keyword = $('.in-show').data('keyword')
	if(index === slideAmount - 1 && questResult[keyword] !== undefined) {
		$('.btn-submit-wrapper').removeClass('in-disabled')
	} else {
		$('.btn-submit-wrapper').addClass('in-disabled')
	}
}
function titleWrite(index) {
	$('.quest-detail .title').text(data[index].title).attr('data-number', index + 1)
	$('.quest-detail .string').text(data[index].subTitle)
}
function progressBar(outerSelector, innterSelector) {
	const keyword = $('.in-show').data('keyword')
	const target = $(outerSelector)
	const maxValue = slideAmount
	let stepValue = 0

	if(questResult[keyword] === undefined) {
		stepValue = slideStep
	} else {
		stepValue = (slideStep + 1)
	}
	$('.box-now').text(stepValue)
	$('.box-total').text(maxValue)

	target.children(innterSelector).css({
		width: `${stepValue / maxValue * 100}%`
	})
}
function btnCheck(index) {
	leftArrowCheck(index)
	rightArrowCheck(index)
	submitCheck(index)
	progressBar('.progress-base', '.progress-bar')
}

// =========================================================
//  問卷整體 nav 動作
// =========================================================
;(function($) {
	let dataCheck

	try {
		data
		dataCheck = true
	} catch(e) {
		dataCheck = false
	}

	if(dataCheck) {
		$('.nav-right').on('click', function(e) {
			if(slideStep < (slideAmount - 1)) {
				slideStep += 1
				slideShow('.quest-box', slideStep, 'in-show')
				$(window).trigger('resize')
			} else {
				slideStep = slideAmount - 1
			}
			btnCheck(slideStep)
			titleWrite(slideStep)
		})
		$('.nav-left').on('click', function(e) {
			if(slideStep > 0) {
				slideStep += -1
				slideShow('.quest-box', slideStep, 'in-show')
				$(window).trigger('resize')
			} else {
				slideStep = 0
			}
			btnCheck(slideStep)
			titleWrite(slideStep)
		})

		// 問卷 init
		slideShow('.quest-box', slideStep, 'in-show')
		btnCheck(slideStep)
		titleWrite(slideStep)
	}
})($)

// =========================================================
//  通用多選內容
// =========================================================
function multipleSelect(outerSelector, innerSelector) {
	$(outerSelector).each(function(i, item) {
		const result = [];
		const limit = $(item).data("limit");
		const wrapper = $(item).parents('.quest-box')

		$(item).on("click", innerSelector, function(e) {
			const $this = $(this);
			const thisValue = $this.data("value");
			const searchValue = result.indexOf(thisValue);
			const target = wrapper.find('.be-skip-check')
			// console.log(result)
			target.prop('checked', false)

			// 確認該選項是否已經點選過
			if (searchValue !== -1) {
				$this.removeClass("in-active");
				result.splice(searchValue, 1);
			} else {
				result.push(thisValue);
				$this.addClass("in-active");
			}

			if (result.length > limit) {
				const outValue = result.shift();
				$(item).find(innerSelector + "[data-value=\"" + outValue + "\"]").removeClass("in-active");
			}


			if(result.length === 0) {
				deleteResult(item)
			} else {
				setResult(item, result)
			}
			btnCheck(slideStep)
		});

		wrapper.on('click', '.be-skip-check', function(e) {
			if($(this).prop('checked')) {
				$(item).find(innerSelector).removeClass('in-active')
				result.length = 0
				setResult(item, 'skip')
			} else {
				deleteResult(item)
			}
			btnCheck(slideStep)
		})
	})
}

// 無圖選擇區塊
multipleSelect(".quest-nopic", ".item");

// 長條圖選擇區塊
multipleSelect(".quest-barpic", ".item");

// 小圖選擇區塊
multipleSelect(".quest-smallpic", ".item");

// 大圖選擇區塊
multipleSelect(".quest-bigpic", ".item");






// =============================
//  圓環圖
// =============================
;(function($) {
	function setTime(inputSelector, donutSelector, dataValue) {
		let hourVal = Number($(inputSelector).val());
		const valueStep = Number($(inputSelector).attr('step'))
		const maxVal = Number($(inputSelector).attr('max'))
		const minVal = Number($(inputSelector).attr('min'))
		hourVal = Math.round(hourVal / valueStep) * valueStep;
		if (hourVal > maxVal) {
			hourVal = maxVal;
		} else if (hourVal < minVal) {
			hourVal = minVal;
		}
		$(inputSelector).parents(donutSelector).attr(dataValue, hourVal);
		$(inputSelector).val(hourVal);

		if(hourVal === 0) {
			deleteResult(inputSelector)
		} else {
			setResult(inputSelector, hourVal)
		}
		btnCheck(slideStep)
	}

	$(".donut-value").each(function(i, ele) {
		const donutValue	= $(ele)
		const wrapper		= donutValue.parents('.topic-box')
		const skipTarget	= wrapper.find('.be-skip-check')
		const itemData		= donutValue.attr('data-type')
		const valueStep		= donutValue.attr('step')
		const valueMax		= donutValue.attr('max')
		const valueMin		= donutValue.attr('min')


		donutValue.val($(ele).parents(".donut-pic").attr('data-' + itemData));
		donutValue.on("keyup", function(e) {
			setTime(ele, '.donut-pic', 'data-' + itemData);
		});
		donutValue.on("change", function(e) {
			setTime(ele, '.donut-pic', 'data-' + itemData);
		});
		donutValue.on("focus", function(e) {
			skipTarget.prop('checked', false)
			$(this).select();
		});

		skipTarget.on('click', function(e) {
			if($(this).prop('checked')) {
				donutValue.val(0)
				$('.donut-pic').attr('data-' + itemData, 0);
				setResult(ele, 'skip')
			} else {
				deleteResult(ele)
			}
			btnCheck(slideStep)
		})

		donutValue.siblings('.donut-button').on('click', function(e) {
			e.preventDefault()
			let nowValue = donutValue.val()

			if($(this).hasClass('donut-plus')) {
				nowValue = Number(nowValue) + Number(valueStep)
			} else if($(this).hasClass('donut-minus')) {
				nowValue = Number(nowValue) - Number(valueStep)
			}
			donutValue.val(nowValue)
			setTime(ele, '.donut-pic', 'data-' + itemData);
		})
	})


})($)

// =========================================================
//  progress bar、圖片連動
// =========================================================
;(function($) {

	$('.quest-slide-item').parents('.quest-box').each(function(i, ele) {
		const maxValue = $(ele).find('.quest-slide-item').length
		const slideRange = $(ele).find(".slide-range")
		const wrapper = slideRange.parents('.quest-box')
		const skipTarget = wrapper.find('.be-skip-check')
		let prevHeight = 0

		function rangeValue() {
			const targetIndex = slideRange.val() - 1
			$(ele).find('.quest-slide-item').removeClass('in-active').removeClass('in-step')
			$(ele).find('.quest-slide-item').eq(targetIndex).addClass('in-active')

			if(targetIndex - 1 >= 0) {
				$(ele).find('.quest-slide-item').eq(targetIndex - 1).addClass('in-step')
			}
			if(targetIndex + 1 <= maxValue) {
				$(ele).find('.quest-slide-item').eq(targetIndex + 1).addClass('in-step')
			}
			const finValue = $(ele).find('.range-detail-item').eq(slideRange.val() - 1).data('value')
			// console.log(finValue)
			
			

			setResult($(ele).find('.quest-slide-item')[0], finValue)
		}

		// 滑塊圖片樣式
		$(window).on('resize', function(e) {
			const newHeight = $(ele).find('.quest-slide-item.in-active > img').height()

			if(newHeight === 0) {
				$(ele).find('.quest-slide-item.in-active > img').on('load', function(e) {
					$(ele).find('.quest-slide').css({
						height: $('.quest-slide').height()
					})
				})
			} else if(newHeight !== prevHeight) {
				$(ele).find('.quest-slide').css({
					height: newHeight
				})
				prevHeight = newHeight
			}
		})

		// range 拉條
		$(ele).find('.slide-range').attr('max', maxValue)
		$(ele).find('.slide-range').on('change', function(e) {
			skipTarget.prop('checked', false)
			rangeValue()
			btnCheck(slideStep)
		})

		// range 下方文字資料
		const detailNum = $(ele).find('.range-detail-item').length
		const detailWidth = (100 - 2 * (detailNum - 1)) / (detailNum - 1)
		$(ele).find('.range-detail-item').css({
			width: detailWidth + '%'
		})
		$(ele).find('.range-detail-item:first-child, .range-detail-item:last-child').css({
			width: detailWidth / 2 + '%'
		})

		// skip function
		skipTarget.on('click', function(e) {
			if($(this).prop('checked')) {
				slideRange.val(1)
				$(ele).find('.quest-slide-item').removeClass('in-active').removeClass('in-step')
				$(ele).find('.quest-slide-item').eq(0).addClass('in-active')
				$(ele).find('.quest-slide-item').eq(1).addClass('in-step')

				setResult('.in-show .quest-slide-item', 'skip')
			} else {
				const defaultValue = $(ele).find('.range-detail-item').eq(0).data('value')
				setResult('.in-show .quest-slide-item', defaultValue)
			}
		})

		// function init
		rangeValue()
		$(window).trigger('resize')
		btnCheck(slideStep)		
	})

})($)

$(document).ready(function(){
	$("#Ans_Submit").click(function(){
		var str = [];
		for(var k in questResult){
			str.push(k + "=" + questResult[k]);
		}

		str = str.join('&');
		$("#Ans").val(str);
		console.log(str);
		$("#Ans_Form").submit();
  });
});

// ==========================================================
//  結果頁
// ==========================================================
;(function($) {
	if($('.products-list').children('.item').length > 1) {
		$('.products-list').owlCarousel({
			dots: false,
			nav: true,
			navText: ['', ''],
			loop: true,
			responsive: {
				0: {
					items: 1,
				},
				576: {
					items: 2,
				},
				768: {
					items: 3,
				},
			},
		})
	}


	if($('.blogs-list').children('.item').length > 1) {
		$('.blogs-list').owlCarousel({
			dots: false,
			nav: true,
			navText: ['', ''],
			loop: true,
			margin: 20,
			responsive: {
				0: {
					items: 1,
				},
				576: {
					items: 2,
				},
				768: {
					items: 3,
				},
			},
		})
	}
})($)

// ==========================================================
//  影音專區 影片切換
// ==========================================================
;(function(window, document, $) {
	if($('.swiper-box').length) {
		const videoSlide = new Swiper('.swiper-box', {
			navigation: {
				nextEl: '.swiper-next',
				prevEl: '.swiper-prev',
			},
			breakpoints: {
				0: {
					direction: 'horizontal',
					slidesPerView: 2,
					spaceBetween: 10,
				},
				480: {
					direction: 'horizontal',
					slidesPerView: 3,
					spaceBetween: 10,
				},
				660: {
					direction: 'horizontal',
					slidesPerView: 4,
					spaceBetween: 10,
				},
				992: {
					direction: 'horizontal',
					slidesPerView: 5,
					spaceBetween: 10,
				},
				1200: {
					direction: 'vertical',
					slidesPerView: 2,
					spaceBetween: 0,
				},
			},
		})
	}

	// 影片切換
	$('.video-wrapper').on('click', '.video-link', function(e) {
		e.preventDefault()
		const targetVideo = $(this).attr('href')
		const targetTitle = $(this).find('.title').text()
		const targetPicture = $(this).find('img').attr('src')

		const changeTarget = $(this).parents('.video-wrapper').find('.video-preview')
		changeTarget.find('.title').text(targetTitle)
		changeTarget.find('.responsive-embed-item').attr('src', targetVideo)
	})
})(window, document, $)

// ==========================================================
// 	完成問卷獎勵
// ==========================================================
;(function($, jQuery) {
	function closeRewardPopup(target) {
		$('body').removeClass('rewardOpen')
		$(target).remove()
	}

	function makeRewardPopup(data) {
		let rewardString = '';
		let clipButton = '';
		let clipNumber = '';

		if(data.unit && data.unitFront) {
			rewardString += `<span class="unit">${data.unit}</span>`
		}
		rewardString += `<span class="amount">${data.amount}</span>`
		rewardString += `<span class="type">${data.type}</span>`
		if(data.unit && !data.unitFront) {
			rewardString += `<span class="unit">${data.unit}</span>`
		}

		var clipArr = data.clipNumber.split(',');
		for(k in clipArr){
			clipNumber += `<input type="text" name="rewardNumber" id="rewardNumber" class="number" value="${clipArr[k]}" readonly>`
		}

		if(data.clipNumber) {
			clipButton = `<button class="btn btn-secondary" type="button"  data-clipboard-target="#rewardNumber">複製序號</button>`
		}


		const appendString = `
		<div class="quest-reward">
			<div class="content">
				<div class="coupon-box">
					<div class="ticket">
						<div class="reward">${rewardString}</div>
					</div>
					${clipNumber}
				</div>
				<div class="button-group jc-center">
					${clipButton}
					<a class="btn btn-primary" href="/" title="">前往購物官網</a>
				</div>
				<button class="closer" type="button"></button>
			</div>
		</div>
		`
		return appendString
	}

	let rewardType = ''
	if(location.search) {
		rewardType = location.search.slice(1).split('&').find(ele => ele.match(/^type/))
	}
	// console.log(rewardType)

	jQuery.ajax({
		url: '/quest/ajax/ajax_get_reward.php',
		type: 'POST',
		dataType: 'json',
		data: {reward: rewardType.split('=')[1]},
		async: true,
	})
	.done(function(res) {
		// console.log(res);
		if(res.data === 'NO DATA') {
			return false
		}

		const appendString = makeRewardPopup(res)
		$('body').addClass('rewardOpen').append(appendString)

		// 複製序號
		if($('.btn[data-clipboard-target]').length) {
			const clipboard = new ClipboardJS('.btn[data-clipboard-target]')
			clipboard.on('success', function(e) {
				const targetName = $(e.trigger).parents('.quest-reward').find('.reward .type').text()
				alert(`已複製${targetName}序號`);
			})
			clipboard.on('error', function(e) {
				console.log(e)
			})
		}

		// 時間到關閉跳窗
		setTimeout(function() {
			closeRewardPopup('.quest-reward')
		}, 8000)

	})
	.fail(function(x, y, z) {
		console.log(x, y, z);
	})


	// 手動按關閉跳窗
	$('body').on('click', '.quest-reward', function(e) {
		if(e.target === e.currentTarget || $(e.target).hasClass('closer')) {
			e.preventDefault()
			closeRewardPopup(this)
		}
	})
})($, jQuery)