<?php 

function sfm_download_fees_cb() {
	$current_term = get_option("current_academic_term");
	?>
	<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-template-btn {
			cursor: pointer;
		}
		.download-template-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-7">
			<h2>DOWNLOAD RECORDING/REPORT SHEET</h2><hr>
			<div class="row">
				<?php 
					// do_action("eedu_portal_class_filter", [
					// 	"ele-class" => "col-md-6",
					// 	"id" => "offline-class-category",
					// 	"label" => "Select Class"
					// ]); 
					do_action("eedu_portal_term_filter", [
						"ele-class" => "col-md-6",
						"id" => "offline-term",
						"label" => "Select Term"
					]);
				?>
			</div>
			<div class="download-template mt-4 text-center offline-gradebook-tab download-template-btn" id="download-template-btn">
				<img src="contents/plugins/school_fees_manager/images/download-icon.png">
				<p class="info">Click here to download zipped pack. <br>Remember to unzip the downloaded file before you can access the contents</p>
				
			</div>
			<hr>
			<h2>UPLOAD</h2>
			<?php 
				do_action("drag_n_drop_uploader", [
					"ref" => "sfm_upload_fees",
					"max_files" => 1,
					"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/school_fees_manager/images/upload-icon.png'><p>Click or drop files here to upload</p>"
				])
			 ?>
		</div>
	</div>
	<?php
	global $post_meta;
	add_page_javascript('app/assets/js/page-scripts/js-functions.js');
	add_page_javascript('contents/plugins/school_fees_manager/js/download-fees.js');
}