<?= $this->extend("layout/base"); ?>

<?= $this->section("content"); ?>
                  <?php $page_session = \Config\Services::session(); ?>
                  <?php

                  if($page_session->getTempdata('profile')):       
                  ?>
                  <div class = "alert alert-danger">
                       <?= $page_session->getTempdata('profile'); ?>
                  </div>
                  <?php 
                  endif;
                  ?>
				   <?php

                  if($page_session->getTempdata('applicationStatus')):       
                  ?>
                  <div class = "alert alert-danger">
                       <?= $page_session->getTempdata('applicationStatus'); ?>
                  </div>
                  <?php 
                  endif;
                  ?>
                  <?php
                  if($page_session->getTempdata('uploadSuccess')):       
                  ?>
                  <div class = "alert alert-success">
                       <?= $page_session->getTempdata('uploadSuccess'); ?>
                  </div>
                  <?php 
                  endif;
                  ?>
                  <?php
                  if($page_session->getTempdata('uploadError')):       
                  ?>
                  <div class = "alert alert-danger">
                       <?= $page_session->getTempdata('uploadError'); ?>
                  </div>
                  <?php 
                  endif;
                  ?>
          <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
           </div>
           <!-- DataTales Example -->
          <div class="card shadow mb-4">
            <div class="card-header py-3">
            
              <h6 class="m-0 font-weight-bold text-primary">Dashboard</h6>
            </div>
            <div class="row justify-content-center">
            
      <div class="col-xl-10 col-lg-12 col-md-9">
      <form role="form" id="upload" enctype="multipart/form-data" method="post" action="<?= base_url('staff/upload_picture') ?>" autocomplete="off">
                  
            <div class="box-body">
            
            <div class="box-body pad table-responsive">
                              	<table class="table table-borderless">
                                        <tbody><tr>
                                            <td width="20%">
                                        <?php


                                        use App\Models\StudentModel;

                                        $session = \Config\Services::session();
		                              $student_model = new StudentModel(); 
                                        
                                        $app_no = $session->get('logged_user');
                                        $image = $image['image'];
                                        $student = $student_model->personal_update('P2013/0383');
                                       ?>
			                                   <?php if(!empty($image)): ?>
                                         
                                          
													 <img id = 'img_holder' src="<?= base_url()?>/<?=$image; ?>" style='height: 160px; width: 140px;' alt='image'>
                             
                              <?php else: ?>
                              <img id = 'img_holder' src="../assets/img/avatar.png" style='height: 180px; width: 140px;' alt='image'>
                              <?php endif ?>
                    						</td>
                                            <td width="80%">
                                           
                                            	<div class="form-group">
                                                       
                                              
                              <label for="exampleInputEmail1"> </label><br>            
											        <label  >Full Name: <strong><?= $staff['name']; ?></strong> </label><br>
													    <label for="exampleInputPassword1">Department: <strong><?= $session->get('department'); ?></strong></label><br>
		                          <label for="exampleInputPassword1">Programme: <strong><?= $staff['staff_no']; ?></strong></label><br>              
                                    <label for="exampleInputPassword1">Level: <strong><?= $staff['staff_no']; ?></strong></label><br>   
                                    <label for="exampleInputPassword1">Session: <strong><?= $staff['staff_no']; ?></strong></label><br>             
                                    					            
		                                        </div>
                                            </td>
                                        </tr>
                                        <tr>
                                        	<td colspan="2">
                                        		<input name="_token" value="lqFEbHlwMJ3jZXRYFGIghTB9Pf4r9ji6AxnXgZVG" type="hidden">
                                        		<input id="image" name="image" type="file" accept=".jpg,.jpeg,.png" required>
                                        		<p style="font-weight: bold; font-size: 14px; ">NOTICE: Please use a white colored background passport photograph</p>
                                        	</td>
                                        </tr>
                                        </tbody></table>
                                </div>
                                
            </div>
            <div class="box-footer">		
                  <button type="submit" class="btn btn-primary" name = "upload_photo">Upload Photo</button>                  
              </div>
            </form>
          
          </div>
                    
        </div>
        
        </div>
        
	<script>
		
			var uploadFile = document.getElementById('image');
			var output = document.getElementById('img_holder');
			uploadFile.onchange = function(){
				 if(this.files[0].size > 250000){
					alert('Image File size must be less than 250kb');
					this.value = "";
				}else{
					output.src=URL.createObjectURL(event.target.files[0]);
				}
			};
		
	</script>
<?= $this->endSection(); ?>