<?php 

function bulk_user_upload_cb() {
	?>
	<style type="text/css">
		.offline-gradebook-tab {
			border: 1px solid #000;
			padding: 50px 10px 70px 10px;
			min-height: 265px;
			position: relative;
		}
		.offline-gradebook-tab img {
			max-width: 100px;
		}
		.download-students-btn {
			cursor: pointer;
		}
		.download-students-btn:hover {
	        background: #f9f9f9;
	    }
	    .offline-gradebook-tab p {
			max-width: 380px;
			margin: auto;
			line-height: 18px;
		}
		.loading {
		    position: absolute;
		    left: 0;
		    right: 0;
		    top: 60%;
		    width: 100px;
		    color: #FFF;
		    margin: auto;
		    -webkit-transform: translateY(-50%);
		    -moz-transform: translateY(-50%);
		    -o-transform: translateY(-50%);
		    transform: translateY(-50%);
		}
		.loading span {
			position: absolute;
			height: 10px;
			width: 84px;
			top: 50px;
			overflow: hidden;
			left: 10px;
		}
		.loading span > i {
		    position: absolute;
		    height: 8px;
		    width: 8px;
		    border-radius: 50%;
		    -webkit-animation: wait 4s infinite;
		    -moz-animation: wait 4s infinite;
		    -o-animation: wait 4s infinite;
		    animation: wait 4s infinite;
		}
		.loading span > i:nth-of-type(1) {
			left: -28px;
			background: #ff00a7;
		}
		.loading span > i:nth-of-type(2) {
			left: -21px;
			-webkit-animation-delay: 0.8s;
			animation-delay: 0.8s;
			background: #18aa18;
		}

		@-webkit-keyframes wait {
		    0%   { left: -7px  }
		    30%  { left: 52px  }
		    60%  { left: 22px  }
		    100% { left: 100px }
		}
		@-moz-keyframes wait {
		    0%   { left: -7px  }
		    30%  { left: 52px  }
		    60%  { left: 22px  }
		    100% { left: 100px }
		}
		@-o-keyframes wait {
		    0%   { left: -7px  }
		    30%  { left: 52px  }
		    60%  { left: 22px  }
		    100% { left: 100px }
		}
		@keyframes wait {
		    0%   { left: -7px  }
		    30%  { left: 52px  }
		    60%  { left: 22px  }
		    100% { left: 100px }
		}
	</style>
	<div class="row">
		<div class="col-md-12">
			<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
			  	<li class="nav-item">
			    	<a class="nav-link active" id="bulk-student-tab" data-toggle="pill" href="#bulk-student" role="tab" aria-controls="bulk-student" aria-selected="true">Student</a>
			  	</li>
			  	<li class="nav-item">
			    	<a class="nav-link" id="bulk-staff-tab" data-toggle="pill" href="#bulk-staff" role="tab" aria-controls="bulk-staff" aria-selected="false">Staff</a>
			  	</li>
			</ul>
			<div class="tab-content" id="pills-tabContent">
			  	<div class="tab-pane fade show active" id="bulk-student" role="tabpanel" aria-labelledby="bulk-student-tab">
			  		<div class="download-students mt-4 text-center offline-gradebook-tab download-students-btn" id="download-students-btn">
						<img src="contents/plugins/excel_result_compilation/images/download-icon.png">
						<p class="info">Click here to download excel formated records of existing student from which you can make required edits.</p>
						
					</div>
					<hr>
					<h2>UPLOAD <small>FOR ANY TERM</small></h2>
					<?php 
						do_action("drag_n_drop_uploader", [
							"ref" => "eedu_upload_students",
							"max_files" => 3,
							"accepts" => 'application/msexcel,application/x-msexcel,application/xls,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel',
							"msg" => "<img width='50px' src='contents/plugins/excel_result_compilation/images/upload-icon.png'><p>Click or drop files here to upload</p>"
						])
					 ?>
			  	</div>
			  	<div class="tab-pane fade" id="bulk-staff" role="tabpanel" aria-labelledby="bulk-staff-tab">
			  		<?php //render_page_content("add-user", ["role" => "staff"]) ?>
			  	</div>
			</div>
		</div>
	</div>
	<?php
	add_page_javascript('app/assets/js/page-scripts/js-functions.js');
	add_page_javascript('contents/plugins/excel_result_compilation/js/upload-bulk-stud.js');
}