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 = 'index.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 =  '0'
	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(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)
		htmlText = htmlText+"<div id='"+i.toString()+"'' class='cardStyle' onclick='modalItem("+i.toString()+")'>"
		+'<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>'
		+'<h3 style="color:#9E9E9E;font-size:22px;margin-left:20px " >@'+dataInstrument[i].caretaker+'</h3>'
		+'</div>';

		if(dataInstrument[i].clips.length === 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{
			if(dataInstrument[i].clips.length > 1){
				var tagMiniImage = ''
				var loopImage = dataInstrument[i].clips.length
				var style4 = ''
				for(j=1;j<loopImage-1;j++){
					if (j==3){
						style4 = 'style="margin-top:5px"'
					}
					tagMiniImage = tagMiniImage
											+'<img id="myImg'+j+''+i+'" class="miniImage" '+style4+' src="'+dataInstrument[i].clips[j].photo+'" alt=""/>'
											+'<h6 class="miniImage flexCenter" ></h6>';
				}
				for(j=loopImage-1;j<3;j++){
					if (j==3){
						style4 = 'style="margin-top:5px"'
					}
					tagMiniImage = tagMiniImage
												+'<img id="myImg'+j+''+i+'" class="miniImage" '+style4+' src="" alt=""/>'
												+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>';
				}		
			}
			else{
				for(j=1;j<4;j++){
					if (j==3){
						style4 = 'style="margin-top:5px"'
					}
					tagMiniImage = tagMiniImage
												+'<img id="myImg'+j+''+i+'" class="miniImage" '+style4+' src="" alt=""/>'
												+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>';
				}
			}
			console.log(dataInstrument)
			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>'				
			}
			modalText = modalText+'<div id="modal'+i.toString()+'" class="modal" style="max-height: 100%;display: none;padding-top:10px;">'
									+'<div class="modal-content cardStyle" >'
										+imageTag
											+'<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 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>';
	}
	if(respone.next != null){
		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;
	} 
	start = dataInstrument.length

	document.getElementById("modalAll").innerHTML =  document.getElementById("modalAll").innerHTML+modalText
	document.getElementById("card").innerHTML =  document.getElementById("card").innerHTML+htmlText

}

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 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
		$(":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)]
							var uriAdd = [{'uri':e.target.result}];
							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[idData].clips[idImg].photo);
								}
							}
							console.log(idImage)
							var dataUriSort = dataUri
							idloopImage = loopImage
							if(loopImage==0){
								loopImage = 1
								idloopImage = 0
							}
							var idUri = 0
							console.log(loopImage-1)
							for(idImg=loopImage-1;idImg<idloopImage+dataUri.length;idImg++){
								 $('#myImg'+idImg+''+idImage).attr('src', dataUri[idUri].uri);
								 idUri += 1
							}
							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("noteI").value != ''){
		data.caretaker = document.getElementById("idI").value
	}
	if(document.getElementById("noteI").value != ''){
		data.instrument_id = document.getElementById("CrI").value
	}
	if(document.getElementById("noteI").value != ''){
		data.note = document.getElementById("noteI").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("id"+idData).value,
		'instrument_id':document.getElementById("cr"+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 loopImage = dataInstrument[idData].clips.length
		for(j=0;j<loopImage;j++){
			$('#myImg'+j+''+idData).attr('src', loopImage[j]);		
		}
	}	
	for(j=loopImage-1;j<4;j++){
		$('#myImg'+j+''+idData).attr('src','');
	}
}
getStartPage()