<div class="row">
    <div class="col-xs-12">		  
		  <div class="box">
			<div class="box-header">
			  <h3 class="box-title"></h3>
			</div>
			<!-- /.box-header -->
			<a href="<?php echo base_url(); ?>admin/home/update_infographic/" type="button" class="btn bg-purple btn-flat margin">Add Infographics</a>
			<div class="box-body">
			  <table id="example1" class="table table-bordered table-striped">
				<thead>
				<tr>
				  <th>#</th>
				  <th>Title</th>
				  <th>Image</th>
				  <th>Video Link</th>
				  <th>Video</th>
				  <th>View  Filename</th>
				  <th>Created Date</th>
				  <th>Status</th>
				  <th>Action</th>
				</tr>
				</thead>
				<tbody>
				<?php  $i=1;
				foreach ($infograph as $row) { ?>
				  <td><?php echo $i;?></td>
				  <td><?php echo $row['title'];?></td>
				  <td>
				  	<?php if($row['image'] !=''){ ?>
				  	<img src="<?php echo base_url().'uploads/infographic/image/'.$row['image']?>" width="100" height="100">
				  	<?php } ?>
				  </td>
				  <td>
				  		<iframe width="100%" src="<?php echo $row['video']?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
				  </td>
				  <td style="text-align: center;">
			  		<?php if($row['video_file'] !=''){ ?>
			  			<div style="background-image: url('<?php echo base_url(); ?>uploads/infographic/video_image/<?php echo $row['video_image'];?>')"  class="videoThumb">
			  				<a href="javascript:void(0);" class="playIcon"></a>
			  			</div>
				  		<video autobuffer autoloop loop controls style="width: 50%;height: 50%;" >
							<source width="50" height="50" src="<?php echo base_url(); ?>uploads/infographic/video/<?php echo $row['video_file'];?>" type="video/mp4">
						</video>
					<?php } ?>
				  </td>

				  <td><?php echo $row['view_filename'];?></td>

				   <td><?php echo $row['created_date'];?></td>
				  <td>
				  	<?php if($row['status']=='0'){?><a href="<?php echo base_url().'admin/home/change_status_infographic/'.$row['id'].'/1';?>">Enable</a><?php }else{ ?><a href="<?php echo base_url().'admin/home/change_status_infographic/'.$row['id'].'/0';?>">Disable</a><?php } ?>
				  </td>
				 
				  <td><a href="<?php echo base_url().'admin/home/update_infographic/'.$row['id']?>"><i class="fa fa-edit"></i></a> &nbsp;&nbsp;&nbsp;<a href="<?php //echo base_url().'admin/banners/delete/'.$row['id']?>"  award-id="<?php echo $row['id'];?>" image-id="<?php echo $row['id'];?>" name="remove_levels" class="remove_levels" data-toggle="modal" data-target="#myModal"><i class="fa fa-trash-o"></i></a></td>
				</tr>
				<?php $i++;} ?>
				</tfoot>
			  </table>
			</div>
			<!-- /.box-body -->
		  </div>
	</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Delete</h4>
      </div>
       <div class="modal-body">
	        <p>You are about to delete.</p>
	        <p>Do you want to proceed?</p>
	    </div>
      <div class="modal-footer">
        <button type="button" id="delete" class="btn btn-primary">Yes</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
      </div>
    </div>
  </div>
</div>  
<script>
$(document).ready(function(){
	$(document).on('click', '.remove_levels', function (e) {
		var info_id = $(this).attr("award-id");
		var base_url = "<?php echo base_url();?>";
		$(document).on('click', '#delete', function (e) {			
			$(location).attr('href', base_url+'admin/home/delete_infographic/'+info_id);
		});
	});
});
</script>