<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<?=base_url("assets/css/users.css")?>">
    <!-- Global css  -->
    <link rel="stylesheet" href="<?=base_url("assets/css/global.css")?>">
    <!----------- Font Awesome icons  ------>
    <link rel="stylesheet" href="<?=base_url("assets/css/all.min.css")?>">
        <!-- Google Font Roboto  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <title>Seat Management - Users List</title>
</head>
<body>
    <div class="landing-page" >
        <!------------------------ sidebar ------------------->
        <?php echo $this->include('parts/side_menu.php'); ?>
        <!------------------------ sidebar ------------------->
            <div class="content">
                <header>
                        <img src="<?=base_url('logo.png')?>" style="width: 250px;" alt="">
                </header>
                <div class="container">
                    <div class="title">
                        <h2>Users</h2>
                        <form action="">
                            <button onclick="location.href='<?=base_url('add-user')?>'" type="button" id="filter-btn" ><i class="fas fa-plus"></i>Add User</button>
                            <input type="search" placeholder="Search" id="search_text">
                            <button type="button"><img src="<?=base_url("assets/images/search.png")?>" alt="search"></button>
                        </form>
                    </div>
                    <div class="users-section">
                        <div class="users">
                            <?php foreach($users_list as $user): ?>
                            <div class="user">
                                <div class="info">
                                    <img src="<?=base_url("assets/images/profile-avatar.png")?>" alt="profile">
                                    <h4><?=$user['username']?></h4>
                                </div>
                                <div class="remove"><a href="<?=base_url('remove-user/' . $user['id'])?>">Remove</a></div>
                            </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
            </div>
    </div>


    <script src="<?=base_url("assets/Js/main.js")?>"></script>
    <script>
    $(document).ready(function() {
        $("#search_text").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $(".users div").filter(function() {
                $(this).toggle($(this).text()
                .toLowerCase().indexOf(value) > -1);
            });
        });
    });
    </script>
</body>
</html>