<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/>
	<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>

	<script>
	// START CODE FOR BASIC DATA TABLE 
	$(document).ready(function() {
		$('#example1').DataTable();
	} );
	// END CODE FOR BASIC DATA TABLE 
	
	
	// START CODE FOR Child rows (show extra / detailed information) DATA TABLE 
	function format ( d ) {
		// `d` is the original data object for the row
		return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
			'<tr>'+
				'<td>Full name:</td>'+
				'<td>'+d.name+'</td>'+
			'</tr>'+
			'<tr>'+
				'<td>level:</td>'+
				'<td>'+d.extn+'</td>'+
			'</tr>'+
			'<tr>'+
				'<td>Extra info:</td>'+
				'<td>And any further details here (images etc)...</td>'+
			'</tr>'+
		'</table>';
	}
 
		$(document).ready(function() {
			var table = $('#example2').DataTable( {
				"ajax": "assets/data/dataTablesObjects.txt",
				"columns": [
					{
						"className":      'details-control',
						"orderable":      false,
						"data":           null,
						"defaultContent": ''
					},
					{ "data": "name" },
					{ "data": "position" },
					{ "data": "office" },
					{ "data": "salary" }
				],
				"order": [[1, 'asc']]
			} );
			 
			// Add event listener for opening and closing details
			$('#example2 tbody').on('click', 'td.details-control', function () {
				var tr = $(this).closest('tr');
				var row = table.row( tr );
		 
				if ( row.child.isShown() ) {
					// This row is already open - close it
					row.child.hide();
					tr.removeClass('shown');
				}
				else {
					// Open this row
					row.child( format(row.data()) ).show();
					tr.addClass('shown');
				}
			} );
		} );
		// END CODE FOR Child rows (show extra / detailed information) DATA TABLE 		
		
				
		
		// START CODE Show / hide columns dynamically DATA TABLE 		
		$(document).ready(function() {
			var table = $('#example3').DataTable( {
				"scrollY": "350px",
				"paging": false
			} );
		 
			$('a.toggle-vis').on( 'click', function (e) {
				e.preventDefault();
		 
				// Get the column API object
				var column = table.column( $(this).attr('data-column') );
		 
				// Toggle the visibility
				column.visible( ! column.visible() );
			} );
		} );
		// END CODE Show / hide columns dynamically DATA TABLE 	
		
		
		// START CODE Individual column searching (text inputs) DATA TABLE 		
		$(document).ready(function() {
			// Setup - add a text input to each footer cell
			$('#example4 thead th').each( function () {
				var title = $(this).text();
				$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
			} );
		 
			// DataTable
			var table = $('#example4').DataTable();
		 
			// Apply the search
			table.columns().every( function () {				
				var that = this;
		 
				$( 'input', this.header() ).on( 'keyup change', function () {
					if ( that.search() !== this.value ) {
						that
							.search( this.value )
							.draw();
					}
				} );
			} );
		} );
		// END CODE Individual column searching (text inputs) DATA TABLE 	 	
	</script>
	
	<style>	
	td.details-control {
    background: url('assets/plugins/datatables/img/details_open.png') no-repeat center center;
    cursor: pointer;
	}
	tr.shown td.details-control {
    background: url('assets/plugins/datatables/img/details_close.png') no-repeat center center;
	}
	</style>

<?php
$numb_users = $conn->query("SELECT count(1) FROM ".DB_PREFIX."users")->fetchColumn();
?>

<div class="row">
	<div class="col-xl-12">
		<div class="breadcrumb-holder">
			<h1 class="main-title float-left">Users</h1>
            <ol class="breadcrumb float-right">
			<li class="breadcrumb-item">Home</li>
			<li class="breadcrumb-item active">Users</li>
            </ol>
            <div class="clearfix"></div>
        </div>
	</div>
</div>
<!-- end row -->

 <!--           
	<?php // if(DEMO_MODE!=0) { ?>				
	<div class="alert alert-danger" role="alert">
	<h4 class="alert-heading">Important!</h4>
	<p>This section is available in Pike Admin PRO version.</p>
	<p><b>Save over 50 hours of development with our Pro Framework: Registration / Login / Users Management, CMS, Front-End Template (who will load contend added in admin area and saved in MySQL database), Contact Messages Management, manage Website Settings and many more, at an incredible price!</b></p>
	<p>Read more about all PRO features here: <a target="_blank" href="#"><b>Pike Admin PRO features</b></a></p>
	</div>
	<?php //} ?>
-->
			
	<?php		
		if ($msg =='error_name')
				echo '<div class="alert alert-danger" role="alert">Error! Input full name</div>';	
		if ($msg =='error_username')
				echo '<div class="alert alert-danger" role="alert">Error! Input valid username</div>';	
		if ($msg =='error_duplicate_username')
				echo '<div class="alert alert-danger" role="alert">Error! There is another user with this username address</div>';	
		if ($msg =='edit_ok')
				echo '<div class="alert alert-success" role="alert">User updated</div>';	
		if ($msg =='add_ok')
				echo '<div class="alert alert-success" role="alert">User added</div>';	
		if ($msg =='delete_ok')
				echo '<div class="alert alert-success" role="alert">User deleted</div>';	
		if ($msg =='error_delete_protected')
				echo '<div class="alert alert-danger" role="alert">Error! This user can not be deleted</div>';	
	?>
			
<div class="row">
				<?php if($role_id=="1") {?>
	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">						
				
		<div class="card mb-3">
		
			<div class="card-header">
			<span class="pull-right"><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modal_add_user"><i class="fa fa-user-plus" aria-hidden="true"></i> Add new user</button></span>
			<?php include ("modals/modal_add_user.php");?> 
			<h3><i class="fa fa-user"></i> ผู้ใช้งานทั้งหมด (<?php echo $numb_users;?> คน)</h3>								
			</div>
			<!-- end card-header -->	
						
			<div class="card-body">
								<div class="table-responsive">
								<table id="example1" class="table table-bordered table-hover display" cellspacing="0" width="100%">
									<thead>
									<tr>
										<th width="50">ID</th>
										<th>ชื่อ-นามสกุล </th>
										<th width="150">สถานะ</th>
										<th width="120">Articles</th>
										<th width="120">จัดการ</th>
									</tr>
									</thead>
									<tbody>
<?php
						$stmt_users = $conn->prepare ("SELECT user_id, username, name, avatar, role_id, active, email_verified FROM ".DB_PREFIX."users ORDER BY user_id DESC ");
						$stmt_users->execute();	
					while ($row = $stmt_users->fetch(PDO::FETCH_ASSOC))
					{
						$user_id = $row['user_id'];
						$username = $row['username'];						
						$role_id = $row['role_id'];
						$name = stripslashes($row['name']);
						$active = $row['active'];
						$email_verified = $row['email_verified'];
						$avatar = $row['avatar'];
						
						$skype = getUsersExtraUnique ($user_id, 'skype');
						
						$stmt = $conn->prepare ("SELECT role, title FROM ".DB_PREFIX."users_roles WHERE role_id = ? LIMIT 1");
						$stmt->execute([$role_id]);
						$row = $stmt->fetch(PDO::FETCH_ASSOC);
						$role = stripslashes($row['role']);
						$role_title = stripslashes($row['title']);
						
						$numb_articles = $conn->query("SELECT count(1) FROM ".DB_PREFIX."articles WHERE user_id = '$user_id'")->fetchColumn();
						?>
						<tr <?php if($active==0) echo 'class="table-warning"';?>>
							<th>
							<?php echo $user_id;?>
							</th>
							
							<td>
							<?php
							if($avatar)
								{
								?>
								<span style="float: left; margin-right:10px;"><img style="max-width:40px; height:auto;" src="<?php echo ADMIN_URL;?>/uploads/avatars/<?php echo $avatar;?>" /></span>
								<?php					
								}else{ ?>								
								<span style="float: left; margin-right:10px;"><img style="max-width:40px; height:auto;" src="<?php echo ADMIN_URL;?>/uploads/avatars/no_avatar.png" /></span>	
								<?php }
							echo "<strong>".$name."</strong>";?>
							<br />
							<small><?php echo $username;?></small>
							</td>
							
							<td><?php echo $role_title;?></td>
							
							
							<td><?php echo $numb_articles;?></td>
							
							<td>
								<a href="account.php?page=pro-profile-user&user_id=<?php echo $user_id;?>" class="btn btn-info btn-sm" data-placement="top" data-toggle="tooltip" data-title="view"><i class="fa fa-eye" aria-hidden="true"></i></a>
								<a href="#" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modal_edit_user_<?php echo $user_id;?>"><i class="fa fa-pencil" aria-hidden="true"></i></a>
								<?php include ("modals/modal_edit_user.php");?> 							
								<a href="#" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#modal_delete_user_<?php echo $user_id;?>"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
								<?php include ("modals/modal_delete_user.php");?> 
							</td>
						</tr>
                    <?php 
					} // end while
					?>
									</tbody>
								</table>
								</div>								

								
			</div>	
			<!-- end card-body -->								
				
		</div>
		<!-- end card -->					

	</div>
	<!-- end col -->	
				<?php }else{} ?>										
</div>
<!-- end row -->