<?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");

?>      

 <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">Services</li>
      </ol>
    </section>
		<br>
		<br>
		<div class="callout callout-info col-md-12" style='display:table;width:100%'><h4 class='pull-left'>Services</h4>
		
		<button type="button" id='create-servicebtn' class="btn bg-navy pull-right" style='border-radius:10px'><i class='fa fa-plus'></i> Create Service</button>
     
      </div>
	  <?php
	  foreach(services($connect)as $row){
		  $service_id=$row["id"];
		  $service=$row["service"];
		  $desc=$row["description"];
		  $status=$row["status"];
		  $cover=$row["photo"];
	  if($cover==""){
		  $cover="../../../images/img_avatar5.png";
	  }else{
		  $cover=$cover;
		  
	  }
		  if($status=="1"){
			  $status="<label class='badge  pull-right'>Active</label>";
		  }else{
			    $status="<label class='badge bg-red pull-right'>Inactive</label>";
		  }
		  
	  
	  ?>
	  
		<div class="col-md-4" style='padding:5px'>
          <!-- Widget: user widget style 1 -->
          <div class="box box-widget widget-user-2" >
            <!-- Add the bg color to the header using any of the bg-* classes -->
            <div class="widget-user-header bg-yellow " style='cursor:pointer;padding:5px'>
              <div class="widget-user-image">
                <img class="img-circle" src="<?php echo $cover;?>" alt="User Avatar">
              </div>
              <!-- /.widget-user-image -->
			  
			   <div class="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="#">Archive</a></li>
                    <li class="divider"></li>
                    <li><a href="#">More <span class='fa fa-ellipsis-h pull-right'></span></a></li>
                  </ul>
                </div>
				
			  
              <h3 class="widget-user-username"><?php echo ucwords($service);?></h3>
              <h5 class="widget-user-desc" style='min-height:50px'><?php echo $desc;?></h5>
            </div>
            <div class="box-footer no-padding" >
              <ul class="nav nav-stacked">
                <li ><a href="#"></a></li>
                <li class='hide'><a href="#">Notes <span class="pull-right badge bg-blue">31</span></a></li>
                <li class='hide'><a href="#">Tasks <span class="pull-right badge bg-aqua">5</span></a></li>
                <li class='hide'><a href="#">Completed Projects <span class="pull-right badge bg-green">12</span></a></li>
                <li><a href="javascript:void()">Status<?php echo $status;?></a></li>
              </ul>
            </div>
          </div>
          <!-- /.widget-user -->
        </div>
        <!-- /.col -->
		<?php
	  }
		?>
		
		
				
<div id="services-Modall" class="modal  fade">
  
    	<div class="modal-dialog " style='margin-top:0px'>
    									<br>
<center  style='position:absolute;top:20%;z-index:1;display:none' id='loader'><img src='../../../images/loader.gif' style='margin-left:40%'></center>
    		<form method='POST' id='form-service'  >
    			<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 Service</h4>
    				</div>
    				<div class="modal-body"  style='padding:0px'>

								<!-- /.box-header -->
								<div class="box-body" style='padding:0px'>

													  <!-- other Name -->
								  <div class="form-group col-md-12">
										<label>Service Title</label>
									  <input  class="form-control" type="text" name='stitle' placeholder='Service Title' style='height:50px' required>
									
								  </div>
								  <!-- /.form group -->
								
										
													  <!-- other Name -->
								  <div class="form-group col-md-12">
										<label>Description</label>
									  <textarea  class="form-control"  name='desc' placeholder='Short Description' style='height:180px' required></textarea>
									
								  </div>
								  <!-- /.form group -->

								  
									<center class="col-md-12 hide" ><img id='preview_photo' style='max-width:150px' ></center>
									
									<div class="form-group pull-left col-md-12 ">
										<div class="btn btn-default btn-file">
										  <i class="fa fa-picture-o"></i> Cover Image
										  <input type="file" accept='image/*'name="files" id='file' onchange='preview()' required>
										</div>
										<p class="help-block">Max. 32MB</p>
									  </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-Services' id="btn_action" />
									<button type="submit" class="btn btn-primary" id='submit'><i class="fa fa-paper-plane"></i> Create</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>
 


 <script>
   
  function _(elem){
	return document.getElementById(elem);
}

  $(document).ready(function(){
	   // alert();
	  		$('#create-servicebtn').click(function(){
			
			$('#services-Modall').modal('show');
			$('#form-service')[0].reset();
			// $('#span_product_details').html('');
			// add_product_row();
		});
		
		$(document).on('submit', '#form-service', function(event){
			event.preventDefault();
			// $('#action').attr('disabled', 'disabled');
			/* var photo=_('file').files[0];
			var form_data = $(this).serialize();
			// alert(form_data);
			$.ajax({
				url:"pages/services/services_action.php",
				method:"POST",
				data:form_data,
				success:function(data){
					alert(data);
				}
			});*/
			create_srvice();
		});
		
  })

  function preview(){
		var preview=_("preview_photo");
		var photo= _('file').files[0];
		var type=photo.type;
		 type=type.toLowerCase();
		if(type=="image/jpg" ||type=="image/jpeg" || type=="image/png" ||type=="image/gif"  ){
			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_srvice(){
	  
			var form = document.getElementById("form-service");
			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==="Notes Updated"){
						// form.reset();
						  // $(".select2").select2();
						  // $("#latest-posts").append();
						  // latest();
						  alert(feedback);
						  	$("#loader").hide();
						  	$("#form-service")[0].reset();
						  	$("#submit").attr("disabled",false);
						// }
					
				}
				
			}
			ajax.open("POST","services_action.php",true);
			ajax.send(form_data);
			$("#loader").show();
			$("#submit").attr("disabled",true);
 }
  
</script>
	
	<?php include("../../footer.php");?>