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>';
		console.log(dataInstrument[i].clips.length)
		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.length1
				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+1;j<3;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>'				
		}
		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)]
							console.log(instrument)
							console.log('-------------xxxx-------------')
							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[idImage].clips[idImg].photo);
								}
							}
							console.log(idImage)
							var dataUriSort = dataUri
							idloopImage = loopImage
							if(loopImage==0){
								loopImage = 1
								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
							}
							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 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()