	<?php 
		require_once('Connections/conn_ama.php');

		$colname = -1;
		if(isset($_POST['oid'])){
			$colname = $_POST['oid'];
			//echo $colname;
		}

		//Retrieve Officer details
		$query_rsOfficer = "SELECT * FROM deptofficers  WHERE officerID = ".$colname;
		$rsOfficer = mysqli_query($conn_ama, $query_rsOfficer ) or die(mysqli_error($conn_ama));
		$row_rsOfficer = mysqli_fetch_assoc($rsOfficer);
		$totalRows_rsOfficer = mysqli_num_rows($rsOfficer);


		define('MAX_FILE_SIZE',10121200); 
	?>
<!-- <div class="col-md-9 data-area"> -->
	<div class="data-area-wrap">
		<div class="form-wrapper">
			<form id="update-new-dept-officer" enctype="multipart/form-data">
			  	<fieldset>
																					
					<div class="form-row">
						<div class="form-group col-4">
							<label for="fname">First Name</label>
							<input type="text" name="fname" class="form-control" id="fname" value="<?php echo $row_rsOfficer['fname']?>">
						</div>
						
						<div class="form-group col-4">
							<label for="mname">Middle Name</label>
							<input type="text" name="mname" class="form-control" id="mname" value="<?php echo $row_rsOfficer['mname']?>" >
						</div>
						
						<div class="form-group col-4">
							<label for="lname">Last Name</label>
							<input type="text" name="lname" class="form-control" id="lname" value="<?php echo $row_rsOfficer['lname']?>" >
						</div>
					</div>
				  	
					<div class="form-row">
						<div class="form-group col-2">
							<label for="title">Title </label>
							<select name="title" id="title" class="form-control">
								<option value="<?php echo $row_rsOfficer['title'];?>"><?php echo ucwords($row_rsOfficer['title']); ?></option>
								<?php $titles = array("mr","mrs","dr","prof","hon"); foreach($titles as $title){ ?>
									<option value="<?php echo $title; ?>"><?php echo ucwords($title); ?></option>
								<?php } ?>
							</select>
						</div>

						<div class="form-group col-10">
							<label for="position">Designation</label>
							<input type="text" name="position" class="form-control" id="position" value="<?php echo $row_rsOfficer['position'];?>" >
						</div>
					</div>
					<div class="form-row">
						<div class="form-group col-4">
							<select name="officerrank" class="form-control">
								<option value="<?php echo $row_rsOfficer['officerrank'];?>"><?php echo $row_rsOfficer['officerrank'];?></option>
								<option value="1">1</option>
								<option value="2" >2</option>
								<option value="3" >3</option>
							</select>
						</div>
					</div>
										  	
				</fieldset>
				  <hr>
				<fieldset> 
					<legend>Images</legend>
						<div class="form-row">
							<div class="col-4">
								<div class="imag-display">
									<h4>Current portrait Image</h4>
									<div class="curimgwrap">
										<img class="img-fluid" src="_/components/php/manage-departments/deptofficers/thumbs/<?php echo $row_rsOfficer['thumbnail']; ?>" alt="">
									</div>									
									
								</div>
							</div>
							<div class="col-4">
								<div class="form-group">
									<label for="fileUpload">Upload replacement image</label>
									<input type="file" id="fileUpload" class="form-control" name="image">
								</div>
							</div>
							<div class="col-4">
								<div class="img-display">
									<h4>Replacement Image</h4>
									<div id="image-holder"></div>
								</div>
							</div>
						</div>
				</fieldset>						


				<hr> <input type="hidden" name="MM_update" value="update-dept-officer" >
			  	<button type="submit" name="update_new_dept_officer" id="update-dept-officer" class="btn btn-primary">Submit</button>  
				<input type="hidden" name="MM_officerID" value="<?php echo $row_rsOfficer['officerID']; ?>">
			</form>
			<br>
			 <div class="error_msg"></div>
		</div><!-- End .form-wrapper-->
	</div><!-- End .data-area-wrap-->	
<!-- </div> -->


<script>
	/* $(document).on('click','.delete-btn',function(e){
		e.preventDefault();
				
		//alert("form");
		$(this).parent('div').fadeOut();
				
	}); */

	$("#fileUpload").on('change', function () {
		//alert("askfljsd");
		//Get count of selected files
		var countFiles = $(this)[0].files.length;

		var imgPath = $(this)[0].value;
		var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
		var image_holder = $("#image-holder");
		image_holder.empty();

		if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
			if (typeof (FileReader) != "undefined") {

				//loop for each file selected for uploaded.
				for (var i = 0; i < countFiles; i++) {

					var reader = new FileReader();
					reader.onload = function (e) {
						$("<img />", {
							"src": e.target.result,
								"class": "thumb-image img-fluid"
						}).appendTo(image_holder);
					}

					image_holder.show();
					reader.readAsDataURL($(this)[0].files[i]);
				}

			} else {
				alert("This browser does not support FileReader.");
			}
		} else {
			alert("Pls select only images");
		}
	});	

	$("#fullimgpreview").on('change', function () {
		//alert("askfljsd");
		//Get count of selected files
		var countFiles = $(this)[0].files.length;

		var imgPath = $(this)[0].value;
		var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
		var image_holder = $("#fullimage-holder");
		image_holder.empty();

		if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
			if (typeof (FileReader) != "undefined") {

				//loop for each file selected for uploaded.
				for (var i = 0; i < countFiles; i++) {

					var reader = new FileReader();
					reader.onload = function (e) {
						$("<img />", {
							"src": e.target.result,
								"class": "thumb-image img-fluid"
						}).appendTo(image_holder);
					}

					image_holder.show();
					reader.readAsDataURL($(this)[0].files[i]);
				}

			} else {
				alert("This browser does not support FileReader.");
			}
		} else {
			alert("Pls select only images");
		}
	});	
</script> 
