<link rel="stylesheet" href="../../../external/w3lib/w3.css">
<link rel="stylesheet" href="../../../external/w3lib/w3-theme-teal.css">
<?php
 include("../../../dbconnection/dbconnection.php");$name='';if(isset($_SESSION["id"])){  $user=strtolower($_SESSION['type']); if($user==="admin"){$id=$_SESSION['id'];include("../../../steam_functions/steam_functions.php");$team=(staff_team($connect));$loggedin=staff_loggedin($id,$connect);$students=few_students($connect);}else if($user=="staff"){header("location:../../../pages/staff_login.php");}else{ header("location:../../../pages/staff_login.php"); }}else{header("location:.../../../pages/staff_login.php");}

 include("../../header.php");?>

       	

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper"  style='min-height:auto'>

	   <section class="content-header">
	
      <ol class="breadcrumb " style='padding:5px'>
        <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
        <li class="active">Gallery</li>
      </ol>
    </section>
		<br>
		<div class="callout callout-info col-md-12" style='display:table;width:100%'><h4 class='pull-left'>Our Gallery</h4>
		
					<button class="btn btn-default pull-right btn-file" style='border-radius:10px'>
						 <i class="fa fa-photo"></i>  Add Gallery
							<input type="file" name="photo" id='file' onchange='preview("file")' required>
					</button>
			 
      </div>
	  <div class="w3-row-padding w3-margin-top " id='gallery' >
	  <?php
	
	  foreach(all_few_gallery($connect)as $row){
		  $g_id=$row["id"];
		  $img=$row["pic"];
		  $desc=$row["details"];
		  $status=$row["status"];
		  
		  
	  
	  ?>
	 
		
			

					<div class="col-md-4 col-lg-3  w3-margin-bottom w3-lightgray" style='padding:5px' >
						<div class="  w3-card-2 w3-white" style=''>
						<center class=''>
						 <div class="  w3-display-topright btn-group pull-right">
						  <label class=' btn  dropdown-toggle' data-toggle="dropdown"><i class='fa fa-ellipsis-v'></i></label>
						  <ul class="dropdown-menu" role="menu" >
							<li><a href="#">Edit</a></li>							
							<li><a href="#">Remove</a></li>
							<li><a href="#">Archive</a></li>
							<li class="divider"></li>
							<li><a href="#">More <span class='fa fa-ellipsis-h pull-right'></span></a></li>
						  </ul>
						</div>
						
						<img src="<?php echo $img;?>" style="width:100%;max-height:250px"></center>
						<hr style='margin-bottom:0px'>
						<div class="w3-container" style=''>
						<h4><?php echo $desc;?></h4>
						</div>
						</div>
						
						
						
						
					</div>
					
				
				

		<?php
	  }
		?>
		</div>

		
<div id="events-Modall" class="modal fade">

	</script>
    	<div class="modal-dialog " style=''>
    		<form method='POST' id='form-events'  >
    			<div class="modal-content " style='padding:0px'>
    				<div class="modal-header ">
    					<button type="button" class=" close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title"><i class="fa fa-plus"></i> Create Event</h4>
    				</div>
    				<div class="modal-body"  style='padding:'>

								<!-- /.box-header -->
								<div class="box-body" style='padding:0px'>
								
									
								  <!-- /.form group -->
								 <center class="" style=''>
										<img id='preview_photo' style='width:100%;max-height:350px' class='w3-card'>

								  </center><br>
													  <!-- other Name -->
								  <div class="form-group col-md-12 no-padding">
									  <textarea  class="form-control"  name='desc' placeholder='Comment something...' style='height:70px' ></textarea>
									
								  </div>
								  <!-- /.form group -->

								  
											
							 </div>
							
						
    				</div>
    				<div class="modal-footer"> 
					<button type="reset" class="btn btn-default pull-left " data-dismiss="modal"><i class="fa fa-times"></i> Discard</button>
							<div class="pull-right">
									<input type="hidden" name="btn_action" value='add-gallery' id="btn_action" />
									<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i>Send</button>
								 </div>
							
    				</div>
    			</div>
    		</form>
    	</div>

    </div>
    </div>

	
<!-- jQuery 2.2.3 -->
<script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../../bootstrap/js/bootstrap.min.js"></script>
	<!-- DataTables -->
<script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../../plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/fastclick/fastclick.js"></script>

<!-- Bootstrap WYSIHTML5 -->
<script src="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>

<script src="../../plugins/select2/select2.full.min.js"></script>




 <script>
   
  function _(elem){
	return document.getElementById(elem);
}
 $(function () {
    //Add text editor
    $("#compose-textarea").wysihtml5();
	//Initialize Select2 Elements
    // $(".select2").select2();
	 
  });
  

  $(document).ready(function(){
	  // alert();
	  		$('#create-eventbtn').click(function(){
			
			$('#events-Modall').modal('show');
			$('#form-events')[0].reset();
			// $('#span_product_details').html('');
			// add_product_row();
		});
		
		$(document).on('submit', '#form-events', function(event){
			event.preventDefault();
			
			create_gallery();
		});
		
  })

  function preview(id){
		var preview=_("preview_photo");
		var photo= _(id).files[0];
		var type=photo.type;
		 type=type.toLowerCase();
		if(type=="image/jpg" ||type=="image/jpeg" || type=="image/png" ||type=="image/gif"  ){
			$('#events-Modall').modal('show');
			var reader=new FileReader();
			reader.onload=function(){
				preview.src=reader.result;
			}
			reader.readAsDataURL(event.target.files[0]);	
		}
		else{
				
				alert("Please select an image file");
			}

}


  function create_gallery(){
	  
			
			var form = document.getElementById("form-events");
			var photo=document.getElementById('file').files[0];
			var form_data =new FormData(form);
				form_data.append("file",photo);

			
			var ajax=new XMLHttpRequest();
			ajax.onreadystatechange=function(){
				if(ajax.status==200 && ajax.readyState==4){
					var feedback=ajax.responseText;
					
					if(feedback==="Gallery Created"){
						form.reset();
						  // $(".select2").select2();
						  // $("#all-events").append();
						  latest_gallery();
						  $('#events-Modall').modal("hide");
						  
						  _('file').value="";
						}
						alert(feedback);
					
				}
				
			}
			ajax.open("POST","gallery_action.php",true);
			ajax.send(form_data);
	  
  }
  
  
    function latest_gallery(){

	  $.ajax({
				url:"last_gallery.php",
				method:"POST",
				success:function(data){
					$("#gallery").prepend(data);
				}
			});
  }
  
  
</script>

	<?php include("../../footer.php");?>