// smooth scroll 
const links = document.querySelectorAll("a[href^='#section']");
for (const link of links) {
  link.addEventListener("click", clickHandler);
}
function clickHandler(e) {
  e.preventDefault();
  const href = this.getAttribute("href");
  const offsetTop = document.querySelector(href).offsetTop;
  $("html, body").animate({ scrollTop: offsetTop}, 600); 
  return false; 
}

// 計算nav高度
function section_margin() {
	var navheight = $('nav').height();
	var windowwidth = $(window).innerWidth();
	$('#section1').css('margin-top',navheight);
	if(windowwidth < 992) {
		$('nav ul').css('top', navheight);
	}
	
}
section_margin();
$(window).resize(function(){
	section_margin();
});

// 漢堡選單toggle
$('.navbar-toggler a, nav a').on('click', function(){
	$('nav').toggleClass('open');
});

// 心得超過30字縮略
$(document).ready(function () {
	shrink_string();
});


function shrink_string(){
	for (var i = 0; i < $('.truncate-overflow').length; i++) {
		var string = $('.truncate-overflow').eq(i).text();
		var item = string.length;
		if (item > 30) {
			var show = string.substr(0, 30);
			$('.truncate-overflow').eq(i).text(show + ' ...')
		}
	}
}

// 表單驗證
////限制中文字
$('.chinese').on('blur', function(){
	var value = $(this).val().replace(/[^\u4E00-\u9FA5]/g,'')
	var newvalue = value
	$(this).val(newvalue);
});

$('#section3 input').on('blur', function(){
	if($(this).val()!=="") {
		$(this).removeClass('error');
	} else {
		$(this).addClass('error');
	}
});

$('#section3 textarea').on('blur', function(){
	var vlength = $(this).val().length
	if($(this).val()!=="" && vlength >=50 ) {
		$(this).removeClass('error');
	} else {
		$(this).addClass('error');
	}
});

// 判斷radio change

// modal content show
$('.send').on('click', function () {
	var rlength = $('#section3 input[type="radio"]:checked').length
		if( rlength == '5' 
		&& !$('textarea').hasClass('error')
		&& !$('textarea').val()=="" 
		&& !$('input').hasClass('error') 
		&& !$($('#section3 .form-control')[0]).val()=="" 
		&& !$($('#section3 .form-control')[1]).val()=="" 
		&& !$($('#section3 .form-control')[2]).val()==""
		&& !$($('#section3 .form-control')[3]).val()=="" 
		&& !$('#section3 [type="file"]').val()==""
		// && $('[name="question_toggle"]').prop('checked')== true
		) {
			var img=$('.imgpreview').attr('src');//圖片base64格式
			var form_data=$('#myForm').serializeArray();
			//console.log(form_data);
			//console.log(img);
			
			$.ajax({
                url:'_ajax.php',
                type:'post',
                async:false,
                dataType:'json',
                data:{'action':'send_data','form_data':form_data,'img':img},
                success:function(data){ 
                    console.log(data);
                    if(data.status==200){
                        $('#success').modal('show');
                    }else{
						alert('填寫資料失敗，請您重新再試一次，造成不便請見諒！');
						location.reload();
					}
                },
                error:function(e){
                }
            });
		} else {
			for(var i = 0 ; i< $('#section3 .form-control').length ; i++) {
				if($($('#section3 .form-control')[i]).val()==""){
					$($('#section3 .form-control')[i]).addClass('error');
				}
			}
			if($('input[name="sex"]:checked').val()==undefined){
				$('input[name="sex"] ~ span').addClass('error');
			} if($('input[name="q1"]:checked').val()==undefined) {
				$('input[name="q1"] ~ span').addClass('error');
			} if($('input[name="q2"]:checked').val()==undefined) {
				$('input[name="q2"] ~ span').addClass('error');
			} if($('input[name="q3"]:checked').val()==undefined) {
				$('input[name="q3"] ~ span').addClass('error');
			} if($('input[name="q4"]:checked').val()==undefined) {
				$('input[name="q4"] ~ span').addClass('error');
			} if($('input[type="file"]').val()=="") {
				$('input[type="file"]').parents('.uploaddefault').addClass('error');
			} 
			// if(!$('[name="question_toggle"]').prop('checked')== true) {
			// 	$('.question_toggle').addClass('error');
			// }
			$('#alert').modal('show');
		}			
});

$('input[type="radio"]').on('change', function(){
	var name = $(this).attr('name');
	$('[name="'+ name +'"] ~ span').removeClass('error');
});

// $('input[type="checkbox"]').on('change', function(){
// 	if($(this).prop('checked')==true) {
// 		$(this).parent().removeClass('error');
// 	} else {
// 		$(this).parent().addClass('error');
// 	}
// });


// 手機號碼判斷
$(".mobile").blur(function(){
	var MobileReg = /^(09)[0-9]{8}$/;
	var mobile=$.trim($(".mobile").val());
	var result = MobileReg.test(mobile);
	if(MobileReg.test(mobile)=== true) {
		$(this).removeClass('error');

	} else {
		$(this).addClass('error').val();
	}
});

// 預覽照片
function readURL(input) {
	if (input.files && input.files[0]) {
		var reader = new FileReader();

		reader.onload = function (e) {
			$('.imgpreview').attr('src', e.target.result);
			$('.uploaddefault').addClass('d-none');
			$('.uploaddefault').removeClass('error');
		};

		reader.readAsDataURL(input.files[0]);
	}
}

//問卷control
$('.question_toggle').on('change', function(){
	$('.question_content').removeClass('d-none');
});

function on_pagination(page){
	$.ajax({
		url:'_ajax.php',
		type:'post',
		async:false,
		dataType:'json',
		data:{'action':'change_pagination','page':page},
		success:function(data){ 
			//console.log(data);
			if(data.status==200){
				$('.pagination').html(data.pagination);//置換分頁
				$('.page_content').html(data.page_content);//置換分頁內容
				shrink_string(); 
				pagination_count();
			}
		},
		error:function(e){
		}
	});
}

function pagination_count(){
	var thought = $('.thought')
	var messange = $('.thought .messange')
	//console.log(messange.length)
	if(messange.length < 3 ) {
		thought.addClass('justify-content-center');
	} else {
		thought.removeClass('justify-content-center');
	} 
}

// 按讚
var pressLike = (like) => {
	var times = like.find('span');
	var timesVal = parseInt(times.text());
	var timesRecord = like.find('input');
	var likeAnimation = like.find('img');
	timesVal += 1;
	times.text(timesVal);
	timesRecord.val(timesVal);
	likeAnimation.addClass('zoom');
	setTimeout(()=>{likeAnimation.removeClass('zoom')},300);
}

$('body').on('click', '.presslike', function(){
	var like = $(this);
	pressLike(like);
});