<form class="form-inline" action="" id="vdocs_form" method="post" enctype="multipart/form-data">
  <input type="hidden" value="<?php echo $vid;?>" name="vid" />
  <div class="form-group">
    <input type="text" class="form-control" required name="doc_title" placeholder="Document Title">
  </div>
  <div class="form-group">
    <input type="file" name="test11[]" class="form-control" required multiple accept="application/msword,application/pdf, image/*">
  </div>
  <button type="submit" class="btn btn-primary">Add</button>
</form>
<br/>
<table class="table table-condensed table-striped table-bordered">
	<thead><tr bgcolor="#FFCC00"><th>S.No.</th><th>Doc Title</th><th>Preview</th><th>Action</th></tr></thead>
    <tbody>
    	<?php $i=1;foreach($vdocs as $hr){?>
        <tr><td><?php echo $i;?></td>
        	<td><?php echo $hr->doc_title;?></td>
        	<td width="100px"><?php if($hr->doc_type!="application/pdf"){?>
            <img width="100%" class="img img-responsive" src="<?php echo base_url().'assets/images/docs/'.$hr->doc_image;?>" /><?php }else{echo "Pdf";}?></td>
            <td>
    <a href="<?php echo base_url().'assets/images/docs/'.$hr->doc_image;?>" target="_blank" class="btn btn-sm btn-success"><i class="fa fa-eye"></i> View</a>
    <a href="#" id="<?php echo $hr->docid;?>" class="btn btn-sm btn-danger delete_vdoc"><i class="fa fa-trash"></i></a></td></tr>
        <?php $i++;}?>
    </tbody>
</table>
<script>
$(document).ready(function(){
$("#vdocs_form").submit(function(e){e.preventDefault();
		var formdata=$(this).serialize();
		$(".alldocs").html("<h3>Please wait while document uploads..</h3><img class='center-block img img-responsive' src='https://loading.io/spinners/typing/lg.-text-entering-comment-loader.gif'/>");
		$.ajax({
			url: "<?php echo base_url();?>admin/add_vdocs", // Url to which the request is send
			type: "POST",             // Type of request to be send, called as method
			data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
			contentType: false,       // The content type used when sending data to the server.
			cache: false,             // To unable request pages to be cached
			processData:false,        // To send DOMDocument or non processed data file it is set to false
			success: function(data)   // A function to be called if request succeeds
			{
				//alert(data);
				$("#vdocs_form").trigger("reset");
				$(".alldocs").html(data);
				
							//$("#respond").html(data);
			}
		});
	});
	$(".delete_vdoc").click(function(e){e.preventDefault();
		var id=$(this).attr('id');
		$(this).closest("tr").remove();
		$.ajax({
				 type: "POST",
				 url: '<?php echo base_url();?>admin/delete_vdoc',
				 data: {id:id},
				 success: function(res){
					 //alert(res);
					//$(".holidays_rental").html(res);
				 }
			});
	});
	
});
</script>