<style>
	.padding-5 {
		padding: 5px !important;
	}

</style>
<div class="row">
    <div class="col-md-6 col-lg-3 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-md-center">
                    <i class="icon-user-following icon-lg text-success"></i>
                    <div class="ml-3">
                        <p class="mb-0">Online Users</p>
                        <h6 id="online_user">12569</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-3 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-md-center">
                    <i class=" icon-user-unfollow icon-lg" style="color:red"></i>
                    <div class="ml-3">
                        <p class="mb-0">Offline Users</p>
                        <h6 id="offline_user">12569</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row grid-margin">
	<div class="col-md-12">
		<div class="card">
			<div class="card-body">
				<table id="table_id" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
					<thead>
						<tr>
							<th>No</th>
							<th>UUID</th>
							<th>Name</th>
							<th>Email</th>
							<th>Group</th>
							<th>level</th>
							<th style="width:50px;">Status</th>
						</tr>
					</thead>
					<tbody>
						<?php 
                            $level = array("", "Admin", "Super User", "User");
                            $i = 1;
                            $online_user = 0;
                            $offline_user = 0;
                            foreach ($users as $user) {?>
                                <tr>
                                    <td>
                                        <?php echo $i ?>
                                    </td>
                                    <td>
                                        <?php echo $user['uuid'] ?>
                                    </td>
                                    <td>
                                        <?=$user['user_name']?>
                                    </td>
                                    <td>
                                        <?=$user['user_email']?>
                                    </td>
                                    <td>
                                        <?php if(isset($groups[$user['group_id']])) echo $groups[$user['group_id']];?>
                                    </td>
                                    <td>
                                        <?php if(isset($level[$user['level']])) echo $level[$user['level']];?>
                                    </td>
                                    <td>
                                        <?php
                                            if(isset($user["created_date"]) && $user["created_date"]!=""){
                                                $now  = time();
                                                $date = strtotime($user["created_date"]);
                                                $duration = ($now - $date)/(60 * 60);
                                                if($duration > 1){
                                                    echo "<p style='background-color:red;border-radius: 10px; width:20px; height:20px'>&nbsp;</p>";
                                                    $offline_user++;
                                                }else{
                                                    $online_user++;
                                                    echo "<p style='background-color:green;border-radius: 10px; width:20px; height:20px'>&nbsp;</p>";
                                                }
                                            }else{
                                                $offline_user++;
                                                echo "<p style='background-color:red;border-radius: 10px; width:20px; height:20px'>&nbsp;</p>";
                                            }
                                        ?>
                                    </td>
                                </tr>
						<?php $i++;}?>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
<script>
	$(function () {
		$('#table_id').DataTable();

        $("#online_user").html('<?=$online_user?>');
        $("#offline_user").html('<?=$offline_user?>');
	});
</script>
