var numAll = ''
var numPhoto = '' 
var token = ''
var userData
var dataInstrument = []
var start = 0
var nextUrl = ''
htmlText = ''
var dataUri = []

function getStartPage(){
	sesToken = sessionStorage.getItem('token');
	if( sesToken === null){
		token = localStorage.getItem("token")
		// console.log(token)
		// console.log('==================')
		if( token != null ){
			$.ajax({
				type: "POST",
				url: 'http://www.serv.stdb.most.go.th/api-token-verify/',
				data: { "token" : token },
				header: {
					Authorization: 'Bearer '+ token,
				},
				success: function(respone){
					sessionStorage.setItem("token",respone.token)
					getStat();
				},
				dataType: 'json'
			});
		}
		else{
			window.location.href = 'login.html'
		}
	}
	else{
		getStat();
	}
}

function LogoutPage(){
	localStorage.removeItem('token');
	sessionStorage.removeItem('token');
	window.location.href = 'index.html'
}

function getStat(){
	token = sessionStorage.getItem("token")
	// console.log(token)
	// console.log('======== 2 ======')
	dataUser = jwt_decode(token)
	userId = dataUser.user_id

	if( token != null ){
		$.ajax({
			type: "GET",
			url: 'http://www.serv.stdb.most.go.th/api/v2/instrument/stats/',
			headers :{
				Authorization: 'Bearer '+ token,
			},
			success: getDataStat,
			dataType: 'json',
		});
	}
}

function getUser(status){
	token = sessionStorage.getItem("token")
	// console.log(token)
	// console.log('======== 2 ======')
	dataUser = jwt_decode(token)
	userId = dataUser.user_id.toString()		
	$.ajax({
		type: "GET",
		url: 'http://www.serv.stdb.most.go.th/api/v2/user/'+userId+'/',
		headers :{
			Authorization: 'Bearer '+ token,
		},
		success: function(respone){
			// console.log(respone)
			userData = respone
			organ = '<div>'+respone.organizations[0].name+'</div>'

			document.getElementById("nameOrgan").innerHTML =  organ
			token = sessionStorage.getItem("token")
			var searchText = ''
			if (status === 'search'){
				// console.log("search")
				dataInstrument = []
				searchText = '&search='+document.getElementById("searchId").value
				start = 0
				$('#modalAll').html('');
				$('#card').html("");
				htmlText = '';
				modalText = '';
				dataInstrument = [];
				// console.log(' >>  end of search button');
				// console.log(dataInstrument)
				// console.log($('#card').html());
			}
			var url = 'http://www.serv.stdb.most.go.th/api/v2/instrument/?organization='+respone.organizations[0].id+searchText;
			// console.log('url = ' + url)
			$.ajax({
				type: "GET",
				url: url, 
				headers :{
					Authorization: 'Bearer '+ token,
					Accept: 'application/json, text/javascript',
					'Accept-Language' : 'en-US,en;q=0.8,th;q=0.6',
				},
				success: getData,
				dataType: 'json',
			});
		},
		dataType: 'json',
	});

}			

function getDataStat(respone){
	getUser('first');
	// console.log(respone)
	document.getElementById("like").innerHTML =  respone.items.completed
	document.getElementById("status").innerHTML = '+'+respone.items.recent_update 
	document.getElementById("accountActive").innerHTML = respone.users.active
	document.getElementById("numAll").innerHTML = respone.items.all
	document.getElementById("numPhoto").innerHTML = respone.items.photos
}

function getData(respone) {
	// console.log(dataInstrument)	
	// console.log(respone)
	// console.log("---------------- Next")
	// console.log(respone.next)	
	// console.log(respone.results)	
	// console.log(dataInstrument)	
	dataInstrument = dataInstrument.concat(respone.results)
	// console.log('*******ฬฬฬฬฬฬฬฬฬ*********')	
	// console.log(respone.results)	
	var htmlText = ''
	var modalText = ''

	for (i=start;i<dataInstrument.length;i++ ){
		// console.log('========='+i+'==========')
		// console.log(dataInstrument[i].name)
		var imageInstrument = ''
		if (dataInstrument[i].clips.length != 0) {
			var cover_img = getCoverImg(dataInstrument[i].clips);
			imageInstrument = '<div class="box-left">'
			+'<img src="'+cover_img+'" class="cover-img">'
		    +'</div>'
		}
		htmlText = htmlText+"<div id='"+i.toString()+"'' class='cardStyle' onclick='modalItem("+i.toString()+")'>"
		// Author :: Apirak
		+ imageInstrument
		// end of left
	    +'<div class="box-right">'
	    +'<h3 style="font-size:26px;margin-left:20px " >'+dataInstrument[i].name+'</h3>'
	    +'<h3 style="color:#9E9E9E;font-size:22px;margin-left:20px " >#'+dataInstrument[i].custom_id+'</h3>'
	    +'<span style="float:right;color:#9E9E9E;font-size:22px;margin-left:20px " >@'+dataInstrument[i].location+'</span>'
	    +'<h3 style="color:#9E9E9E;font-size:22px;margin-left:20px " >☛ '+dataInstrument[i].caretaker+'</h3>'
	    +'</div>'// end of right
	    // End
		+'</div>';
		// console.log(dataInstrument[i].clips.length)
		var backup = dataInstrument[i].clips;
		dataInstrument[i].clips = addNullData(dataInstrument[i].clips);
		if(dataInstrument[i].clips.length === 0){
			// console.log('========= = 0 =========')
			imageTag = '<div class="flexCenter">'
						+'<div class="flexCenter bgImage">'
							+'<div class="flexCenter">'
								+'<img id="myImg0'+i+'" src="" alt=""/>'
								+'<div class="bgImage flexCenter"><h2>ไม่มีรูปภาพ</h2></div>'
							+'</div>'
							+'<div class="column bgMiniImage" style="margin-left:10px">'
								+'<img id="myImg1'+i+'" class="miniImage" src="" alt=""/>'
								+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>'
								+'<img id="myImg2'+i+'" class="miniImage" src="" alt=""/>'
								+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>'
								+'<img id="myImg3'+i+'" class="miniImage" style="margin-top:5px" src="" alt=""/>'
								+'<h6 class="miniImage flexCenter" style="margin-top:5px">ไม่มีรูปภาพ</h6>'
							+'</div>'
						+'</div>'
						+'</div>'
						+'<div class="flexCenter" style="margin-top:5px;">'
							+'<div class="upload flexCenter">'
								+'<a style="font-size:18px">Upload</a></div>'
							+'<input type="file" name="upload" onclick="uploadImage('+i.toString()+')"/>'
						+'</div>'
		}
		else{
			var style4 = ''
			if(dataInstrument[i].clips.length >= 2){
				// console.log('*********** >= 2 ***********')
				var tagMiniImage = ''
				var loopImage = dataInstrument[i].clips.length
				if (loopImage > 4){
					loopImage = 4
				}
				for(j=1;j<loopImage;j++){
					if (j==3){
						style4 = 'margin-top:5px'
					}
					tagMiniImage = tagMiniImage
									+'<img id="myImg'+j+''+i+'" class="miniImage" style="'+style4+'" src="'+dataInstrument[i].clips[j].photo+'" alt=""/>'
									+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>';
				}
				for(j=loopImage;j<4;j++){
					if (j==3){
						style4 = 'margin-top:5px'
					}
					tagMiniImage = tagMiniImage
									+'<img id="myImg'+j+''+i+'" class="miniImage" style="'+style4+'" src="" alt=""/>'
									+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>';
				}		
			}
			else{
				// console.log('*********** < 2 ***********')
				var tagMiniImage = ''
				for(j=1;j<4;j++){
					if (j==3){
						style4 = 'margin-top:5px'
					}
					tagMiniImage = tagMiniImage
									+'<img id="myImg'+j+''+i+'" class="miniImage" style="'+style4+'" src="" alt=""/>'
									+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>';

				}
			}

			imageTag = '<div class="flexCenter">'
									+'<div class="flexCenter bgImage">'
										+'<div class="flexCenter">'
											+'<img id="myImg0'+i+'" src="'+dataInstrument[i].clips[0].photo+'" alt=""/>'
											+'<div class="bgImage flexCenter"><h2>ไม่มีรูปภาพ</h2></div>'
										+'</div>'
										+'<div class="column bgMiniImage" style="margin-left:10px">'
											+tagMiniImage
										+'</div>'
									+'</div>'
									+'</div>'
									+'<div class="flexCenter" style="margin-top:5px;">'
										+'<div class="upload flexCenter">'
											+'<a style="font-size:18px">Upload</a></div>'
										+'<input type="file" name="upload" onclick="uploadImage('+i.toString()+')"/>'
									+'</div>'				
		}
		var youtube_tag = getYoutubeTag(dataInstrument[i].model,i);
		modalText = modalText+'<div id="modal'+i.toString()+'" class="modal" style="max-height: 100%;display: none;padding-top:10px;">'
								+'<div class="modal-content cardStyle" >'
									+imageTag
									    +youtube_tag
										+'<div>'
											+'<div style="font-size:20px;margin-top:20px">ชื่อครุภัณฑ์วิทยาศาสตร์</div>'
											+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="name'+i+'" name="name'+i+'"  placeholder="ชื่อครุภัณฑ์วิทยาศาสตร์" value="'+dataInstrument[i].name+'"></div>'
										+'</div>'
										+'<div>'
											+'<div style="font-size:20px;margin-top:20px">จุดประสงค์และลักษณะการใช้งาน</div>'
											+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="note'+i+'" name="note'+i+'"  placeholder="จุดประสงค์และลักษณะการใช้งาน" value="'+dataInstrument[i].note+'"></div>'
										+'</div>'
										+'<div>'
											+'<div style="font-size:20px;margin-top:20px">เลขครุภัณฑ์</div>'
											+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="id'+i+'" name="id'+i+'"  placeholder="เลขครุภัณฑ์" value="'+dataInstrument[i].custom_id+'"></div>'
										+'</div>'
										+'<div>'
											+'<div style="font-size:20px;margin-top:20px">ผู้ดูแล</div>'
											+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="cr'+i+'" name="cr'+i+'"  placeholder="ผู้ดูแล" value="'+dataInstrument[i].caretaker+'"></div>'
										+'</div>'
										+'<div>'
											+'<div style="font-size:20px;margin-top:20px">สถานที่</div>'
											+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="lc'+i+'" name="lc'+i+'"  placeholder="สถานที่" value="'+dataInstrument[i].location+'"></div>'
										+'</div>'
										+'<div>'
											+'<div style="font-size:20px;margin-top:20px">ยี่ห้อ</div>'
											+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="make'+i+'" name="make'+i+'"  placeholder="ยี่ห้อ" value="'+dataInstrument[i].make+'"></div>'
										+'</div>'
										+'<div>'
											+'<div style="font-size:20px;margin-top:20px">รุ่น</div>'
											+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="model'+i+'" name="model'+i+'"  placeholder="รุ่น" value="'+dataInstrument[i].model+'"></div>'
										+'</div>'
										+'<div>'
											+'<div style="font-size:20px;margin-top:20px">วีดีโอ(youtube)</div>'
											+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="yl'+i+'" name="yl'+i+'"  placeholder="https://www.youtube.com/watch?v=xxxxx" value="'+dataInstrument[i].video+'"></div>'
										+'</div>'
										+'<div class="flexCenterSpace" style="margin-top:20px">'
											+'<input type="button" onclick="updateData('+i+')" class="buttonUpdate" value="Update">'
											+'<input type="button" onclick="deleteData('+i+')" class="buttonDelete "value="Delete">'
											+'<input type="button" onclick="backData('+i+')" class="buttonBack" value="Back">'
										+'</div>'
									+'</div>'
							+'</div>';
		dataInstrument[i].clips = backup;
	}
	if(respone.next != null){
		nextUrl = ''
		moreText = ''
		moreText = "<div class='cardStyle flexCenter' style='margin-bottom:10px;height:60px;background-color: #E0E0E0;' onClick='getNextUrl()'>"
									+"<h4>More</h4>"
								+"</div>";
		nextUrl = respone.next
		document.getElementById("more").innerHTML =  moreText;
	}
	else{
		nextUrl = ''
		moreText = ''
		document.getElementById("more").innerHTML =  moreText;
	}
	start = dataInstrument.length

	document.getElementById("modalAll").innerHTML =  document.getElementById("modalAll").innerHTML+modalText
	document.getElementById("card").innerHTML =  document.getElementById("card").innerHTML+htmlText
    
    /* Apirak */
    $("img[id*='myImg']").each(function(){
    	var id    = $(this).attr('id');
    	var order = id.substring(5,6);
    	var idInstrument = id.substring(6,7);
    	if(idInstrument == 'a'){idInstrument='add';}
    	$("<a id='order"+order+"' class='btn-edit' onclick='uploadWithOrder("+order+",\""+idInstrument+"\")'>Edit</a>").insertAfter( $(this) );
    	$(this).parent().css({"position": "relative"});
    	$(this).css({"margin-top": "0px"});
    });
    $("iframe").each(function(){
    	var index = $(this).attr('id');
    	index = index.replace("youtube-","");
    	$("img#myImg0"+index).addClass("img-with-youtube");
    });
}

function uploadWithOrder(order,idInstrument){
	$("#modal"+idInstrument+" input[name='upload']").attr('order',order);
	$("#modal"+idInstrument+" input[name='upload']").click();
}

function getYoutubeTag(link,index){

	//https://www.youtube.com/watch?v=hYgTVD-bxOY
	//http://www.youtube.com/v/hYgTVD-bxOY
	link = link.replace("https","http");
	link = link.replace("watch?v=","v/");
	var youtube_tag = '';
	if( youtube_tag.indexOf("http") < 0 ){return youtube_tag;}
	if(link != '')
	{
		youtube_tag = '<iframe width="420" height="315" src="'+link+'" frameborder="0" class="youtube" id="youtube-'+index+'" allowfullscreen></iframe>';
		$("iframe").css("margin-left","13%");
		$("iframe").css("margin-top","-13%");
	}
	else{
		youtube_tag="";
	}
	return youtube_tag;
}

function getNextUrl(){
	// console.log('==================')
	token = sessionStorage.getItem('token')
	$.ajax({
		type: "GET",
		url: nextUrl,
		headers :{
			Authorization: 'Bearer '+ token,
			Accept: 'application/json, text/javascript',
			'Accept-Language' : 'en-US,en;q=0.8,th;q=0.6',
		},
		success: getData,
		dataType: 'json',
	});
}

function addNullData(arr){
	var temp_arr = [{content_type:'',id:'',object_id:'',order:'',photo:"",user:''},
					{content_type:'',id:'',object_id:'',order:'',photo:"",user:''},
					{content_type:'',id:'',object_id:'',order:'',photo:"",user:''},
					{content_type:'',id:'',object_id:'',order:'',photo:"",user:''}];
 	$.each(arr,function(index,obj){
 		temp_arr[obj.order] = obj;
 	});
 	return temp_arr;
}

function getCoverImg(arr){
	var link="";
	$.each(arr,function(index,obj){

		if(obj.order == 0)
		{	
			link=obj.photo;
		}
	});
	return link;
}

function modalItem(idCard){
	var modal = document.getElementById('modal'+idCard);
	// console.log(modal)
	var btn = document.getElementById(idCard);
	// console.log(btn)
	modal.style.display = "block";
	window.onclick = function(event) {
			if (event.target == modal) {
					modal.style.display = "none";
					if(idCard != 'search'){
						removeImage(idCard)
					}
					dataUri = []
			}
	}		
}

function uploadImage(idImage) {
		var check = 0
		var order = $("#modal"+idImage+" input[name='upload']").attr('order');
		$(":file").change(function () {
				if (this.files && this.files[0] && check===0) {
						var reader = new FileReader();
						// console.log(reader)
						reader.onload = function(e) {
							instrument = dataInstrument[parseInt(idImage)]
							// console.log(instrument)
							// console.log('-------------xxxx-------------')
							var uriAdd = [{'uri':e.target.result,'order':parseInt(order)}];
							dataUri = dataUri.concat(uriAdd);
							if(idImage == 'add'){
								loopImage = 0
							}
							else{
								var loopImage = instrument.clips.length
								for(idImg=0;idImg<loopImage;idImg++){
										$('#myImg'+idImg+''+idImage).attr('src', dataInstrument[idImage].clips[idImg].photo);
								}
							}
							// console.log(idImage)
							var dataUriSort = dataUri
							idloopImage = loopImage
							if(loopImage==0){
								idloopImage = 0
							}
							var idUri = 0
							// console.log(dataUri)
							// console.log(loopImage-1)
							// console.log(idloopImage+dataUri.length)
							/*for(idImg=loopImage;idImg<idloopImage+dataUri.length;idImg++){
								 $('#myImg'+idImg+''+idImage).attr('src', dataUri[idUri].uri);
								 idUri += 1
							}*/
							$.each(dataUri,function(index,obj){
								$('#myImg'+obj.order+''+idImage).attr('src', obj.uri);
							});
							// console.log('---------------------------')
							// console.log(dataUri)
							check += 1
						};
						reader.readAsDataURL(this.files[0]);       
				}
		});
}

function addData(){

	data = {
		'name':document.getElementById("nameI").value,
		'organization': userData.organizations[0].id,
	}
	if(document.getElementById("CrI").value != ''){
		data.caretaker = document.getElementById("CrI").value
	}
	if(document.getElementById("idI").value != ''){
		data.instrument_id = document.getElementById("idI").value
	}
	if(document.getElementById("noteI").value != ''){
		data.note = document.getElementById("noteI").value
	}
	if(document.getElementById("LcI").value != ''){
		data.location = document.getElementById("LcI").value
	}
	if(document.getElementById("YlI").value != ''){
		data.video = document.getElementById("YlI").value
	}
	if(document.getElementById("makeI").value != ''){
		data.make = document.getElementById("makeI").value
	}
	if(document.getElementById("modelI").value != ''){
		data.model = document.getElementById("modelI").value
	}
	if(dataUri.length != 0){
		data.clips = dataUri
	}
	// console.log(data)
	data = JSON.stringify(data)
	// console.log(data)
	token = sessionStorage.getItem('token')
	$.ajax({
		type: "POST",
		url: 'http://www.serv.stdb.most.go.th/api/v2/instrument/',
		data: data,
		headers: {
			'Accept': 'application/json',
			'Content-Type': 'application/json',
			'Authorization': 'Bearer ' + token,
		},
		success: function(respone){
			// console.log(respone)
			window.location.reload(true);
		},
		dataType: 'json'
	});
}

function updateData(idData){
	// console.log(document.getElementById("name"+idData))
	// console.log(document.getElementById("note"+idData))
	// console.log(document.getElementById("id"+idData))
	// console.log(document.getElementById("cr"+idData))
	dataUpdate = {
		'name':document.getElementById("name"+idData).value,
		'note':document.getElementById("note"+idData).value,
		'caretaker':document.getElementById("cr"+idData).value,
		'location':document.getElementById("lc"+idData).value,
		'instrument_id':document.getElementById("id"+idData).value,
		'make':document.getElementById("make"+idData).value,
		'model':document.getElementById("model"+idData).value,
		'video':document.getElementById("yl"+idData).value,
	}
	if(dataUri.length != 0){
		dataUpdate.clips = dataUri
	}
	idInstrument = dataInstrument[parseInt(idData)].id
	token = sessionStorage.getItem('token')
	$.ajax({
		type: "PATCH",
		url: 'http://www.serv.stdb.most.go.th/api/v2/instrument/'+idInstrument+'/',
		data: JSON.stringify(dataUpdate),
		headers: {
			'Content-Type': 'application/json',
			'Authorization': 'Bearer ' + token,
		},
		success: function(respone){
			// console.log(respone)
			window.location.reload(true);
		},
		dataType: 'json'
	});
}

function deleteData(idData){
	instrument = dataInstrument[parseInt(idData)]
	data = {'hide':true}
	token = sessionStorage.getItem('token')
	$.ajax({
		type: "PATCH",
		url: 'http://www.serv.stdb.most.go.th/api/v2/instrument/'+instrument.id+'/',
		data: JSON.stringify(data),
		headers: {
			'Accept': 'application/json',
			'Content-Type': 'application/json',
			'Authorization': 'Bearer ' + token,
		},
		success: function(respone){
			// console.log(respone)
			window.location.reload(true);
		},
		dataType: 'json'
	});
}

function backData(idData){
	var modal = document.getElementById('modal'+idData);
	modal.style.display = "none";
	removeImage(idData)
	dataUri = []
}

function removeImage(idData){
	var tagMiniImage = ''
	var style4 = ''
	if(idData == 'add'){
		loopImage = 1
	}
	else{
		var time = new Date()
		var loopImage = dataInstrument[idData].clips.length
		// console.log(dataInstrument[idData])
		for(j=0;j<loopImage;j++){
			// console.log('#myImg'+j+''+idData)
			document.getElementById("myImg"+j+''+idData).src = dataInstrument[idData].clips[j].photo+'?'+time;
			// console.log(document.getElementById("myImg"+j+''+idData).src)
			// console.log(document.getElementById("myImg"+j+''+idData))

		}
	}	
	for(j=loopImage;j<4;j++){
		$('#myImg'+j+''+idData).attr('src','');
	}
}
getStartPage()