<?php
include_once('header.php');

$getClassQuery = "SELECT c.class_id, c.class_name, c.status FROM `wp_psy_ability_class` as c order by c.class_id";
$getClassData = $wpdb->get_results($getClassQuery);

?>

<style>
.modal-backdrop {
    z-index: 999!important;
}
table.dataTable.nowrap th, table.dataTable.nowrap td {
    white-space: nowrap !important;
}
.page-title{
	float: left;
    width: 100%;
}

</style>
<div class="page-inner">
    <div class="page-title">
		<div class="col-md-4">
			<h3>Psychometric Aptitude Test</h3>
			<div class="page-breadcrumb">
				<ol class="breadcrumb">
					<li><a href="dashboard">Home</a></li>
					<li class="active">Class List</li>
				</ol>
			</div>
		</div>
		<div class="col-md-8">
			<div class="navbar-right">
				<ul class="navul">
					<li><a href="apt-class">Class List</a></li>
					<li><a href="apt-ability">Ability List</a></li>
					<li><a href="apt-sten-desc">Ability STEN Scores</a></li>
					<li><a href="apt-sten-raw-score">Ability Raw/STEN Scores</a></li>
				</ul>	
			</div>
		</div>
    </div>
	
    <div id="main-wrapper">

        <div class="col-md-12" style="padding:0;">
            <div class="panel panel-info">
                <div class="panel-heading clearfix">
                    <h4 class="panel-title">Class List</h4>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
						<table class="display responsive nowrap" id="userList" style="font-size: 13px;">
							<thead>
								<tr>
									<th>Id</th>
									<th>Class Id</th>
									<th>Class Name</th>
									<th>Status</th>
								</tr>
							</thead>
							<tbody>
							<?php 
							$i=1;
							foreach($getClassData as $cls){ 
							?>
								<tr>
									<td><?php echo $i; ?></td>
									<td><?php echo $cls->class_id; ?></td>
									<td><?php echo $cls->class_name; ?></td>
									<td><?php echo $cls->status; ?></td>
								</tr>
							<?php $i++; } ?>
							</tbody>
						</table>
					</div>
				</div>
			</div>
        </div>        
    </div><!-- Main Wrapper -->
	

    <div class="page-footer">
        <p class="no-s">shinemetrics.com</p>
    </div>
</div><!-- Page Inner -->


<script type="text/javascript" charset="utf-8">
	jQuery.noConflict();
	
    jQuery(function($) {
        $('#userList').dataTable({
            "bPaginate": true,
            "iDisplayLength": 50,
            "lengthMenu": [[10,20, 50, 100, 500, 1000 ], [10,20, 50, 100, 500, 1000]]
        });
	});
</script>
<link href="assets/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="assets/css/responsive.dataTables.min.css" rel="stylesheet">
<script src="assets/js/jquery.dataTables.min.js"></script>
<script src="assets/js/dataTables.responsive.min.js"></script>

<?php
include_once('footer.php');
?>