        <div class="row">
            <div class="col-md-3">
                <div class="card">
                    <div class="d-flex flex-row">
                        <div class="p-10 bg-danger">
                            <h3 class="text-white box m-b-0"><i class="mdi mdi-cash-multiple"></i></h3>
                        </div>
                        <div class="align-self-center m-l-20">
                            <h3 class="m-b-0">
                                <?= $total_users ?> 
                            </h3>
                            <small>Total Users</small>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="card">
                    <div class="d-flex flex-row">
                        <div class="p-10 bg-info">
                            <h3 class="text-white box m-b-0"><i class="mdi mdi-account-multiple"></i></h3>
                        </div>
                        <div class="align-self-center m-l-20">
                            <h3 class="m-b-0"><?= $logged_in_users ?></h3>
                            <small>Logined in now</small>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="card">
                    <div class="d-flex flex-row">
                        <div class="p-10 bg-info">
                            <h3 class="text-white box m-b-0"><i class="mdi mdi-account-multiple"></i></h3>
                        </div>
                        <div class="align-self-center m-l-20">
                            <h3 class="m-b-0"><?= $active_users_last_30 ?></h3>
                            <small>Active Users (Last 30 Days)</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card card-inverse card-success card-body" style="padding: 15px;"  data-toggle="modal" data-target="#add_user_modal">
                    <div class="box text-center  p-15">
                        <h4 class="font-light m-b-0 text-white  p-15"><i class="mdi mdi-account-multiple"></i> Add User</h4>
                    </div>
                </div>
            </div>
        </div>

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table id="example" class="table display table-bordered table-striped">
                <thead>
                    <tr>
                        <th></th>
                        <th scope="col" data-tablesaw-sortable-col>ID</th>
                        <th scope="col" data-tablesaw-sortable-col>Name</th>
                        <th scope="col" data-tablesaw-sortable-col>Username</th>
                        <th scope="col" data-tablesaw-sortable-col>Email</th>
                        <th scope="col" data-tablesaw-sortable-col>Role</th>
                        <th scope="col" data-tablesaw-sortable-col>Updated At</th>
                        <th scope="col" data-tablesaw-sortable-col>Action</th>
                    </tr>
                </thead>


    <style type="text/css">
.user-initials {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 2px;
    padding: 20px;
    float: right;
}
    </style>
                <tbody>
                    <?php foreach ($users as $row) : ?>
                        <tr>
                            <td class="text-right">
                                <?php if ($row->is_logged_in): ?>
                                            <div class="notify"> <span class="heartbit"></span> <span class="point"></span> </div>
                                <?php endif; ?>

                                <?php
                                    // Extract initials
                                    $name = $row->name;
                                        $initials = '';
                                    $name_parts = explode(' ', trim($name));
                                        if (count($name_parts) >= 2) {
                                    $initials = strtoupper(substr($name_parts[0], 0, 1) . substr($name_parts[1], 0, 1));
                                        } else {
                                    $initials = strtoupper(substr($name, 0, 1));
                                            }
                                ?>
                                <div data-toggle="tooltip"
                                        data-placement="top"
                                        data-html="true"
                                        title="Active in last 30 days<br><?= $row->login_count ?> Times Login<br><?= $row->last_login ? date('d M Y, h:i A', strtotime($row->last_login->login_time)) : '' ?>"class="user-initials text-white
                                        <?php if ($row->active_last_30): ?>
                                    bg-info">
                                        <?php else: ?>
                                    bg-dark">
                                    <?php endif; ?>

                                    <?= $initials ?>
                                </div>

</td>

                   <td><?= $row->id ?></td>
                            <td><?= $row->name ?></td>
                            <td><?= $row->username ?></td>
                            <td><?= $row->email ?></td>
                            <td>
                                <?php
                                    $role = $row->role;
                                    $label = ($role == 'sa') ? 'Super Admin' : (($role == 'a') ? 'Admin' : 'Customer');
                                    $class = ($role == 'sa') ? 'badge bg-success text-white' : (($role == 'a') ? 'badge bg-info text-white' : 'badge bg-warning text-white');
                                ?>
                                <span class="badge-role <?= $class ?>"><?= $label ?></span>
                            </td>
                           <?php
                                $dateObj = new DateTime($row->updated_at);
                                $onlyDate = $dateObj->format('d-m-Y');
                                $onlyTime = $dateObj->format('H:i:s');
                            ?>
                            <td>
                                <span data-toggle="tooltip" data-original-title="<?= $onlyTime ?>">
                                    <?= $onlyDate ?>
                                </span>
                            </td>
<td class="text-right">
<a href="#" class="btn btn-sm btn-warning edit-user-btn"
   data-id="<?= $row->id ?>"
   data-name="<?= htmlspecialchars($row->name, ENT_QUOTES) ?>"
   data-username="<?= htmlspecialchars($row->username, ENT_QUOTES) ?>"
   data-email="<?= htmlspecialchars($row->email, ENT_QUOTES) ?>"
   data-role="<?= trim($row->role) ?>">
   <i class="fa fa-edit"></i>
</a>


    <a href="javascript:void(0);" 
       class="btn btn-sm btn-danger delete-confirmation-modal" 
       data-url="<?= base_url('admin/users/delete/' . $row->id) ?>" 
       title="Delete">
        <i class="fa fa-trash"></i>
    </a>
</td>

                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>


<?php $this->load->view('admin/layout/form-status-notification'); ?> 
<?php $this->load->view('admin/layout/delete-confirmation-modal'); ?>

<?php $this->load->view('admin/users/widgets/add-user-modal'); ?>
<?php $this->load->view('admin/users/widgets/edit-user-modal'); ?>


<script>
$(document).ready(function () {
$('.edit-user-btn').click(function () {
  let userId = $(this).data('id');
  let name = $(this).data('name');
  let username = $(this).data('username');
  let email = $(this).data('email');
  let role = $(this).data('role').toString().trim(); // Trim spaces just in case

  $('#edit-user-id').val(userId);
  $('#edit-user-name').val(name);
  $('#edit-user-username').val(username);
  $('#edit-user-email').val(email);
  $('#edit-user-role').val(role).change(); // Selects correct role

  $('#editUserModal').modal('show');
});
});
</script>
