<link rel="stylesheet" type="text/css" href="/css/admin.css">
<div class="adminDashboard">
	<h1 style="margin-top: 32px;">Dashboard</h1>
	<p> Welcome <%= user.Username %>. <a href="/admin/logout">Logout</a></p>

	<%- include ('./partials/messages') %>
	
	<br>
	<h2>Videos:</h2>
	<div class="videosDiv" style="margin-top: 32px;">
		<h3>Upload new video or image:</h3>
		<form action="/admin/fileUpload" method="POST" enctype="multipart/form-data">
			<input type="file" name="filetoupload" style="background: #222222; color: white; margin-bottom: 12px; padding: 0;">
			<br>
			<input type="submit" value="Upload">
		</form>
		
		<h3>Delete video:</h3>
		<form action="/admin/fileDelete" method="POST">
			<div id="deleteVideoDropdownDiv">
				
			</div>
			<br>
			<input type="submit" value="Delete" onclick="return confirm('Delete the file '+document.getElementById('deleteVideo').selectedOptions[0].value+'?')">
		</form>
		<h3>Delete image:</h3>
		<form action="/admin/fileDelete2" method="POST">
			<div id="deleteVideoDropdownDiv2">
				
			</div>
			<br>
			<input type="submit" value="Delete" onclick="return confirm('Delete the file '+document.getElementById('deleteImage').selectedOptions[0].value+'?')">
		</form>
		
	</div>

	<br>

	<div style="margin-bottom: 60px;">
		<h2>Slides:</h2>
		
		<form id="editSlidesForm" action="/admin/updateSlides" method="POST">
			<div id="editSlidesDiv">
				
			</div>
			<button type="button" onclick="addSlide()">Add Slide</button>
			<button type="button" onclick="removeSlide()">Remove Last Slide</button>
			<br>
			<br>
			<input type="submit" value="Save Changes">
			
		</form>
		
	</div>
</div>


<script>

        

	var videoFiles = [<% for(var j=0; j<videos.length; j++) {%> "<%=videos[j]%>", <%} %>];
	var slidesNum = 0;
	var imageFiles = [<% for(var j=0; j<images.length; j++) {%> "<%=images[j]%>", <%} %>];
	document.addEventListener("DOMContentLoaded", function(){
	    document.body.style.overflow = document.documentElement.style.overflow = "scroll"
		<% for(var i=0; i<slides.length; i++) { %>
			addSlide(<%=i%>, '<%=slides[i].ShortVid%>', '<%=slides[i].FullVid%>', '<%=slides[i].Text%>', <%=slides[i].ShowButton%>);
		<% } %>
		addDeleteDropdown();	
	});
	
	function addDeleteDropdown(){
		var container = document.getElementById('deleteVideoDropdownDiv');
		var newEl = createElementFromHTML(
	
			getVideoSelectElement(false, "deleteVideo")
		);
		container.insertBefore(newEl, null);
			var container2 = document.getElementById('deleteVideoDropdownDiv2');
		var newEl2 = createElementFromHTML(
	
			getImageSelectElement(false, "deleteImage")
		);
		container2.insertBefore(newEl2, null);
	}
	
	function addSlide(i=slidesNum, shortVid="", fullVid="", txt="", showButton=false){
		var slidesForm = document.getElementById('editSlidesDiv');
		var newEl = createElementFromHTML(
			'<div class="slideDiv" id="slideDiv'+i+'">' +
				'<h3>Slide '+(i+1)+'</h3>' +
				'<label for="previewVideo'+i+'">Cover image: </label>' +
				getImageSelectElement(false, "shortVid"+i) +
				'<br>' +
				'<label for="fullVideo'+i+'">Full Video: </label>' +
				getVideoSelectElement(true, "fullVid"+i) +
				'<label for="text'+i+'">Offset (0 is the middle): </label>' +
				'<input type="text" name="text'+i+'" id="text'+i+'" value="'+txt+'"/>' +
				'<br>' +
				'<label for="showButton'+i+'">Play Button:</label>' +
				'<input style="width: auto; margin-right: 190px;" type="checkbox" name="showButton'+i+'" id="showButton'+i+'" value="show" '+(showButton ? 'checked':'')+'/>' +
				'<br><br>' +
			'</div>');
		slidesForm.insertBefore(newEl, null);
		slidesNum++;
		
		if(shortVid.length > 0)
			document.getElementById("shortVid"+i).value = shortVid;
		document.getElementById("fullVid"+i).value = fullVid;
	}
	
	function getVideoSelectElement(hasNone, elementName){
		ret = '<select name="'+elementName+'" id="'+elementName+'">';
		if(hasNone) {
			ret += '<option value="">None</option>';
		}
		for(var j=0; j<videoFiles.length; j++) {
			ret += '<option value="'+videoFiles[j]+'">'+videoFiles[j]+'</option>';
		}
		ret += '</select>';
		return ret;
	}
	
		function getImageSelectElement(hasNone, elementName){
		ret = '<select name="'+elementName+'" id="'+elementName+'">';
		if(hasNone) {
			ret += '<option value="">None</option>';
		}
		for(var j=0; j<imageFiles.length; j++) {
			ret += '<option value="'+imageFiles[j]+'">'+imageFiles[j]+'</option>';
		}
		ret += '</select>';
		return ret;
	}
	
	function createElementFromHTML(htmlString) {
		var div = document.createElement('div');
		div.innerHTML = htmlString.trim();

		// Change this to div.childNodes to support multiple top-level nodes.
		return div.firstChild;
	}
	
	function removeSlide(){
		var esd = document.getElementById("editSlidesDiv");
		var ele = document.getElementsByClassName("slideDiv");
		esd.removeChild(ele[ele.length-1]);
		slidesNum--;
	}
	
</script>
