<?php

$pageTitle = "User Management";

require_once '../includes/auth.php';

require_login();

$user = current_user();

$successMessage = '';
$errorMessage = '';

/*
|--------------------------------------------------------------------------
| FLASH MESSAGE
|--------------------------------------------------------------------------
*/

if (!empty($_SESSION['success_message'])) {

    $successMessage = $_SESSION['success_message'];

    unset($_SESSION['success_message']);
}

if (!empty($_SESSION['error_message'])) {

    $errorMessage = $_SESSION['error_message'];

    unset($_SESSION['error_message']);
}

/*
|--------------------------------------------------------------------------
| PROCESS FORM
|--------------------------------------------------------------------------
*/

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

    $action = $_POST['action'] ?? '';

    try {

        /*
        |--------------------------------------------------------------------------
        | ADD USER
        |--------------------------------------------------------------------------
        */

        if ($action == "add") {

            $roleId = (int)$_POST['role_id'];

            $firstname = trim($_POST['firstname']);

            $lastname = trim($_POST['lastname']);

            $othername = trim($_POST['othername']);

            $email = trim($_POST['email']);

            $phone = trim($_POST['phone']);

            $gender = $_POST['gender'];

            $status = $_POST['status'];

            $password = password_hash(

                $_POST['password'],

                PASSWORD_DEFAULT

            );

            if (

                empty($firstname) ||

                empty($lastname) ||

                empty($email) ||

                empty($phone)

            ) {

                throw new Exception(

                    "Please complete all required fields."

                );

            }

            $check = $db->prepare("

                SELECT id

                FROM users

                WHERE email=?

                OR phone=?

                LIMIT 1

            ");

            $check->execute([

                $email,

                $phone

            ]);

            if ($check->fetch()) {

                throw new Exception(

                    "Email or Phone Number already exists."

                );

            }

            $stmt = $db->prepare("

                INSERT INTO users

                (

                    role_id,

                    firstname,

                    lastname,

                    othername,

                    email,

                    phone,

                    password,

                    gender,

                    status

                )

                VALUES

                (?,?,?,?,?,?,?,?,?)

            ");

            $stmt->execute([

                $roleId,

                $firstname,

                $lastname,

                $othername,

                $email,

                $phone,

                $password,

                $gender,

                $status

            ]);

            $_SESSION['success_message'] =

                "User created successfully.";

            header("Location:user-management.php");

            exit;

        }

                /*
        |--------------------------------------------------------------------------
        | EDIT USER
        |--------------------------------------------------------------------------
        */

        if ($action == "edit") {

            $userId = (int)$_POST['user_id'];

            $roleId = (int)$_POST['role_id'];

            $firstname = trim($_POST['firstname']);

            $lastname = trim($_POST['lastname']);

            $othername = trim($_POST['othername']);

            $email = trim($_POST['email']);

            $phone = trim($_POST['phone']);

            $gender = $_POST['gender'];

            $status = $_POST['status'];

            $check = $db->prepare("

                SELECT id

                FROM users

                WHERE

                (email=? OR phone=?)

                AND id!=?

            ");

            $check->execute([

                $email,

                $phone,

                $userId

            ]);

            if ($check->fetch()) {

                throw new Exception(

                    "Email or Phone already exists."

                );

            }

            $stmt = $db->prepare("

                UPDATE users

                SET

                role_id=?,

                firstname=?,

                lastname=?,

                othername=?,

                email=?,

                phone=?,

                gender=?,

                status=?

                WHERE id=?

            ");

            $stmt->execute([

                $roleId,

                $firstname,

                $lastname,

                $othername,

                $email,

                $phone,

                $gender,

                $status,

                $userId

            ]);

            $_SESSION['success_message'] =

                "User updated successfully.";

            header("Location:user-management.php");

            exit;

        }

                /*
        |--------------------------------------------------------------------------
        | DELETE USER
        |--------------------------------------------------------------------------
        */

        if ($action == "delete") {

            $userId = (int)$_POST['user_id'];

            // Prevent deleting yourself
            if ($userId == $user['id']) {

                throw new Exception(

                    "You cannot delete your own account."

                );

            }

            $stmt = $db->prepare("

                DELETE

                FROM users

                WHERE id=?

            ");

            $stmt->execute([

                $userId

            ]);

            $_SESSION['success_message'] =

                "User deleted successfully.";

            header("Location:user-management.php");

            exit;

        }

        /*
        |--------------------------------------------------------------------------
        | RESET PASSWORD
        |--------------------------------------------------------------------------
        */

        if ($action == "reset_password") {

            $userId = (int)$_POST['user_id'];

            $password = password_hash(

                "Password@123",

                PASSWORD_DEFAULT

            );

            $stmt = $db->prepare("

                UPDATE users

                SET password=?

                WHERE id=?

            ");

            $stmt->execute([

                $password,

                $userId

            ]);

            $_SESSION['success_message'] =

                "Password reset successfully.

Default Password: Password@123";

            header("Location:user-management.php");

            exit;

        }

    }

    catch(Throwable $e){

        $_SESSION['error_message']=$e->getMessage();

        header("Location:user-management.php");

        exit;

    }

}

/*
|--------------------------------------------------------------------------
| FETCH ROLES
|--------------------------------------------------------------------------
*/

$rolesStmt = $db->query("

SELECT

id,

role_name

FROM roles

ORDER BY role_name

");

$roles = $rolesStmt->fetchAll(PDO::FETCH_ASSOC);

/*
|--------------------------------------------------------------------------
| FETCH USERS
|--------------------------------------------------------------------------
*/

$usersStmt = $db->query("

SELECT

u.*,

r.role_name

FROM users u

INNER JOIN roles r

ON r.id=u.role_id

ORDER BY u.firstname

");

$users = $usersStmt->fetchAll(PDO::FETCH_ASSOC);

/*
|--------------------------------------------------------------------------
| DASHBOARD CARDS
|--------------------------------------------------------------------------
*/

$totalUsers = $db->query("

SELECT COUNT(*)

FROM users

")->fetchColumn();

$activeUsers = $db->query("

SELECT COUNT(*)

FROM users

WHERE status='active'

")->fetchColumn();

$inactiveUsers = $db->query("

SELECT COUNT(*)

FROM users

WHERE status='inactive'

")->fetchColumn();

$suspendedUsers = $db->query("

SELECT COUNT(*)

FROM users

WHERE status='suspended'

")->fetchColumn();

require_once '../includes/header.php';

require_once '../includes/sidebar.php';

?>

<style>
.my-sidebar,
.edit-sidebar {

    position: fixed;

    top: 0;

    right: -520px;

    width: 500px;

    height: 100vh;

    background: #fff;

    z-index: 9999;

    transition: .35s;

    overflow-y: auto;

    box-shadow: -3px 0 20px rgba(0, 0, 0, .15);

}

.my-sidebar.active,
.edit-sidebar.active {

    right: 0;

}

.overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, .45);

    display: none;

    z-index: 9998;

}

.overlay.active {

    display: block;

}
</style>

<div class="overlay"></div>

<main class="dashboard-main">

    <?php require_once '../includes/topbar.php'; ?>

    <div class="dashboard-main-body">

        <div class="breadcrumb d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">

            <div>

                <h6 class="fw-semibold mb-0">

                    <?= $pageTitle ?>

                </h6>

                <p class="text-neutral-500">

                    <?= APP_SHORT_NAME ?>

                    >

                    Settings

                    >

                    User Management

                </p>

            </div>

            <button class="btn btn-primary-600 my-sidebar-btn">

                <i class="ri-user-add-line"></i>

                Add User

            </button>

        </div>

        <?php if($successMessage): ?>

        <div class="alert alert-success">

            <?= $successMessage ?>

        </div>

        <?php endif; ?>

        <?php if($errorMessage): ?>

        <div class="alert alert-danger">

            <?= $errorMessage ?>

        </div>

        <?php endif; ?>

        <div class="row gy-4 mb-24">

            <div class="col-lg-3">

                <div class="card">

                    <div class="card-body text-center">

                        <h6>Total Users</h6>

                        <h2><?= $totalUsers ?></h2>

                    </div>

                </div>

            </div>

            <div class="col-lg-3">

                <div class="card">

                    <div class="card-body text-center">

                        <h6>Active</h6>

                        <h2 class="text-success">

                            <?= $activeUsers ?>

                        </h2>

                    </div>

                </div>

            </div>

            <div class="col-lg-3">

                <div class="card">

                    <div class="card-body text-center">

                        <h6>Inactive</h6>

                        <h2 class="text-warning">

                            <?= $inactiveUsers ?>

                        </h2>

                    </div>

                </div>

            </div>

            <div class="col-lg-3">

                <div class="card">

                    <div class="card-body text-center">

                        <h6>Suspended</h6>

                        <h2 class="text-danger">

                            <?= $suspendedUsers ?>

                        </h2>

                    </div>

                </div>

            </div>

        </div>

        <div class="card">

            <div class="card-body">

                <table class="table bordered-table data-table" id="dataTable">

                    <thead>

                        <tr>

                            <th>#</th>

                            <th>Avatar</th>

                            <th>Name</th>

                            <th>Email</th>

                            <th>Phone</th>

                            <th>Role</th>

                            <th>Status</th>

                            <th>Last Login</th>

                            <th>Action</th>

                        </tr>

                    </thead>

                    <tbody>

                        <?php

                $count=1;

                foreach($users as $row):

                ?>

                        <tr>

                            <td>

                                <?= $count++ ?>

                            </td>

                            <td width="70">

                                <?php if(!empty($row['avatar'])): ?>

                                <img src="../uploads/avatars/<?= htmlspecialchars($row['avatar']) ?>"
                                    class="rounded-circle" width="45" height="45">

                                <?php else: ?>

                                <img src="../assets/images/avatar.png" class="rounded-circle" width="45" height="45">

                                <?php endif; ?>

                            </td>

                            <td>

                                <strong>

                                    <?= htmlspecialchars(

                                $row['firstname']." ".$row['lastname']

                            ) ?>

                                </strong>

                                <br>

                                <small>

                                    <?= htmlspecialchars($row['othername']) ?>

                                </small>

                            </td>

                            <td>

                                <?= htmlspecialchars($row['email']) ?>

                            </td>

                            <td>

                                <?= htmlspecialchars($row['phone']) ?>

                            </td>

                            <td>

                                <?= htmlspecialchars($row['role_name']) ?>

                            </td>

                            <td>

                                <?php

                        switch($row['status']){

                            case 'active':

                                echo '<span class="badge bg-success">Active</span>';

                            break;

                            case 'inactive':

                                echo '<span class="badge bg-warning">Inactive</span>';

                            break;

                            default:

                                echo '<span class="badge bg-danger">Suspended</span>';

                        }

                        ?>

                            </td>

                            <td>

                                <?= $row['last_login'] ?: '-' ?>

                            </td>

                            <td>

                                <div class="dropdown">

                                    <button class="btn btn-light" data-bs-toggle="dropdown">

                                        <i class="ri-more-2-fill"></i>

                                    </button>

                                    <ul class="dropdown-menu">

                                        <li>

                                            <button class="dropdown-item view-user-btn" data-id="<?= $row['id'] ?>"
                                                data-firstname="<?= htmlspecialchars($row['firstname']) ?>"
                                                data-lastname="<?= htmlspecialchars($row['lastname']) ?>"
                                                data-othername="<?= htmlspecialchars($row['othername']) ?>"
                                                data-email="<?= htmlspecialchars($row['email']) ?>"
                                                data-phone="<?= htmlspecialchars($row['phone']) ?>"
                                                data-role="<?= htmlspecialchars($row['role_name']) ?>"
                                                data-status="<?= $row['status'] ?>" data-gender="<?= $row['gender'] ?>"
                                                data-login="<?= $row['last_login'] ?>" data-bs-toggle="modal"
                                                data-bs-target="#viewUserModal">

                                                <i class="ri-eye-line"></i>

                                                View

                                            </button>

                                        </li>

                                        <li>

                                            <button class="dropdown-item edit-sidebar-btn" data-id="<?= $row['id'] ?>"
                                                data-roleid="<?= $row['role_id'] ?>"
                                                data-firstname="<?= htmlspecialchars($row['firstname']) ?>"
                                                data-lastname="<?= htmlspecialchars($row['lastname']) ?>"
                                                data-othername="<?= htmlspecialchars($row['othername']) ?>"
                                                data-email="<?= htmlspecialchars($row['email']) ?>"
                                                data-phone="<?= htmlspecialchars($row['phone']) ?>"
                                                data-gender="<?= $row['gender'] ?>" data-status="<?= $row['status'] ?>">

                                                <i class="ri-edit-line"></i>

                                                Edit

                                            </button>

                                        </li>

                                        <li>

                                            <button class="dropdown-item reset-password-btn" data-id="<?= $row['id'] ?>"
                                                data-name="<?= htmlspecialchars($row['firstname'].' '.$row['lastname']) ?>"
                                                data-bs-toggle="modal" data-bs-target="#resetPasswordModal">

                                                <i class="ri-lock-password-line"></i>

                                                Reset Password

                                            </button>

                                        </li>

                                        <li>

                                            <button class="dropdown-item delete-user-btn" data-id="<?= $row['id'] ?>"
                                                data-name="<?= htmlspecialchars($row['firstname'].' '.$row['lastname']) ?>"
                                                data-bs-toggle="modal" data-bs-target="#deleteUserModal">

                                                <i class="ri-delete-bin-line"></i>

                                                Delete

                                            </button>

                                        </li>

                                    </ul>

                                </div>

                            </td>

                        </tr>

                        <?php endforeach; ?>

                    </tbody>

                </table>

            </div>

        </div>

        <!-- ========================================================= -->
        <!-- ADD USER SIDEBAR -->
        <!-- ========================================================= -->

        <div class="my-sidebar">

            <div class="p-24 border-bottom d-flex justify-content-between align-items-center">

                <h5 class="mb-0">

                    Add User

                </h5>

                <button type="button" class="btn btn-light close-my-sidebar">

                    <i class="ri-close-line"></i>

                </button>

            </div>

            <form method="POST">

                <input type="hidden" name="action" value="add">

                <div class="p-24">

                    <div class="mb-20">

                        <label class="form-label">

                            Role

                        </label>

                        <select name="role_id" class="form-select" required>

                            <?php foreach($roles as $role): ?>

                            <option value="<?= $role['id'] ?>">

                                <?= htmlspecialchars($role['role_name']) ?>

                            </option>

                            <?php endforeach; ?>

                        </select>

                    </div>

                    <div class="row">

                        <div class="col-md-6 mb-20">

                            <label class="form-label">

                                First Name

                            </label>

                            <input type="text" name="firstname" class="form-control" required>

                        </div>

                        <div class="col-md-6 mb-20">

                            <label class="form-label">

                                Last Name

                            </label>

                            <input type="text" name="lastname" class="form-control" required>

                        </div>

                    </div>

                    <div class="mb-20">

                        <label class="form-label">

                            Other Name

                        </label>

                        <input type="text" name="othername" class="form-control">

                    </div>

                    <div class="mb-20">

                        <label class="form-label">

                            Email

                        </label>

                        <input type="email" name="email" class="form-control" required>

                    </div>

                    <div class="mb-20">

                        <label class="form-label">

                            Phone Number

                        </label>

                        <input type="text" name="phone" class="form-control" required>

                    </div>

                    <div class="row">

                        <div class="col-md-6 mb-20">

                            <label class="form-label">

                                Gender

                            </label>

                            <select name="gender" class="form-select">

                                <option value="Male">

                                    Male

                                </option>

                                <option value="Female">

                                    Female

                                </option>

                            </select>

                        </div>

                        <div class="col-md-6 mb-20">

                            <label class="form-label">

                                Status

                            </label>

                            <select name="status" class="form-select">

                                <option value="active">

                                    Active

                                </option>

                                <option value="inactive">

                                    Inactive

                                </option>

                                <option value="suspended">

                                    Suspended

                                </option>

                            </select>

                        </div>

                    </div>

                    <div class="mb-20">

                        <label class="form-label">

                            Password

                        </label>

                        <input type="password" name="password" class="form-control" required>

                        <small class="text-muted">

                            Password will be encrypted automatically.

                        </small>

                    </div>

                </div>

                <div class="p-24 border-top">

                    <button class="btn btn-primary w-100">

                        Save User

                    </button>

                </div>

            </form>

        </div>

        <!-- ========================================================= -->
        <!-- EDIT USER SIDEBAR -->
        <!-- ========================================================= -->

        <div class="edit-sidebar">

            <div class="p-24 border-bottom d-flex justify-content-between align-items-center">

                <h5 class="mb-0">

                    Edit User

                </h5>

                <button type="button" class="btn btn-light close-edit-sidebar">

                    <i class="ri-close-line"></i>

                </button>

            </div>

            <form method="POST">

                <input type="hidden" name="action" value="edit">

                <input type="hidden" id="editUserId" name="user_id">

                <div class="p-24">

                    <div class="mb-20">

                        <label class="form-label">

                            Role

                        </label>

                        <select id="editRole" name="role_id" class="form-select" required>

                            <?php foreach($roles as $role): ?>

                            <option value="<?= $role['id'] ?>">

                                <?= htmlspecialchars($role['role_name']) ?>

                            </option>

                            <?php endforeach; ?>

                        </select>

                    </div>

                    <div class="row">

                        <div class="col-md-6 mb-20">

                            <label class="form-label">

                                First Name

                            </label>

                            <input type="text" id="editFirstname" name="firstname" class="form-control" required>

                        </div>

                        <div class="col-md-6 mb-20">

                            <label class="form-label">

                                Last Name

                            </label>

                            <input type="text" id="editLastname" name="lastname" class="form-control" required>

                        </div>

                    </div>

                    <div class="mb-20">

                        <label class="form-label">

                            Other Name

                        </label>

                        <input type="text" id="editOthername" name="othername" class="form-control">

                    </div>

                    <div class="mb-20">

                        <label class="form-label">

                            Email

                        </label>

                        <input type="email" id="editEmail" name="email" class="form-control" required>

                    </div>

                    <div class="mb-20">

                        <label class="form-label">

                            Phone Number

                        </label>

                        <input type="text" id="editPhone" name="phone" class="form-control" required>

                    </div>

                    <div class="row">

                        <div class="col-md-6 mb-20">

                            <label class="form-label">

                                Gender

                            </label>

                            <select id="editGender" name="gender" class="form-select">

                                <option value="Male">

                                    Male

                                </option>

                                <option value="Female">

                                    Female

                                </option>

                            </select>

                        </div>

                        <div class="col-md-6 mb-20">

                            <label class="form-label">

                                Status

                            </label>

                            <select id="editStatus" name="status" class="form-select">

                                <option value="active">

                                    Active

                                </option>

                                <option value="inactive">

                                    Inactive

                                </option>

                                <option value="suspended">

                                    Suspended

                                </option>

                            </select>

                        </div>

                    </div>

                </div>

                <div class="p-24 border-top">

                    <button class="btn btn-success w-100">

                        Update User

                    </button>

                </div>

            </form>

        </div>

        <!-- ========================================================= -->
        <!-- VIEW USER MODAL -->
        <!-- ========================================================= -->

        <div class="modal fade" id="viewUserModal" tabindex="-1">

            <div class="modal-dialog modal-lg">

                <div class="modal-content">

                    <div class="modal-header">

                        <h5 class="modal-title">

                            User Details

                        </h5>

                        <button class="btn-close" data-bs-dismiss="modal">

                        </button>

                    </div>

                    <div class="modal-body">

                        <table class="table table-bordered">

                            <tr>

                                <th width="35%">

                                    Full Name

                                </th>

                                <td id="viewFullName"></td>

                            </tr>

                            <tr>

                                <th>

                                    Email

                                </th>

                                <td id="viewEmail"></td>

                            </tr>

                            <tr>

                                <th>

                                    Phone Number

                                </th>

                                <td id="viewPhone"></td>

                            </tr>

                            <tr>

                                <th>

                                    Role

                                </th>

                                <td id="viewRole"></td>

                            </tr>

                            <tr>

                                <th>

                                    Gender

                                </th>

                                <td id="viewGender"></td>

                            </tr>

                            <tr>

                                <th>

                                    Status

                                </th>

                                <td id="viewStatus"></td>

                            </tr>

                            <tr>

                                <th>

                                    Last Login

                                </th>

                                <td id="viewLastLogin"></td>

                            </tr>

                        </table>

                    </div>

                </div>

            </div>

        </div>

        <!-- ========================================================= -->
        <!-- DELETE USER -->
        <!-- ========================================================= -->

        <div class="modal fade" id="deleteUserModal" tabindex="-1">

            <div class="modal-dialog">

                <div class="modal-content">

                    <form method="POST">

                        <input type="hidden" name="action" value="delete">

                        <input type="hidden" id="deleteUserId" name="user_id">

                        <div class="modal-header">

                            <h5>

                                Delete User

                            </h5>

                            <button class="btn-close" data-bs-dismiss="modal">

                            </button>

                        </div>

                        <div class="modal-body text-center">

                            <i class="ri-delete-bin-6-line text-danger" style="font-size:70px;">

                            </i>

                            <h5 class="mt-3">

                                Delete User?

                            </h5>

                            <p>

                                Are you sure you want to delete

                                <strong id="deleteUserName"></strong>

                                ?

                            </p>

                        </div>

                        <div class="modal-footer">

                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">

                                Cancel

                            </button>

                            <button class="btn btn-danger">

                                Delete User

                            </button>

                        </div>

                    </form>

                </div>

            </div>

        </div>

        <!-- ========================================================= -->
        <!-- RESET PASSWORD -->
        <!-- ========================================================= -->

        <div class="modal fade" id="resetPasswordModal" tabindex="-1">

            <div class="modal-dialog">

                <div class="modal-content">

                    <form method="POST">

                        <input type="hidden" name="action" value="reset_password">

                        <input type="hidden" id="resetUserId" name="user_id">

                        <div class="modal-header">

                            <h5>

                                Reset Password

                            </h5>

                            <button class="btn-close" data-bs-dismiss="modal">

                            </button>

                        </div>

                        <div class="modal-body text-center">

                            <i class="ri-lock-password-line text-warning" style="font-size:70px;">

                            </i>

                            <h5 class="mt-3">

                                Reset Password?

                            </h5>

                            <p>

                                Reset password for

                                <strong id="resetUserName"></strong>

                                ?

                            </p>

                            <div class="alert alert-warning">

                                Default password will become

                                <strong>

                                    Password@123

                                </strong>

                            </div>

                        </div>

                        <div class="modal-footer">

                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">

                                Cancel

                            </button>

                            <button class="btn btn-warning">

                                Reset Password

                            </button>

                        </div>

                    </form>

                </div>

            </div>

        </div>

        <?php require_once "../includes/footer.php"; ?>

        <script>
        /*
|--------------------------------------------------------------------------
| OPEN ADD SIDEBAR
|--------------------------------------------------------------------------
*/

        $('.my-sidebar-btn').click(function() {

            $('.my-sidebar').addClass('active');

            $('.overlay').addClass('active');

        });

        /*
        |--------------------------------------------------------------------------
        | CLOSE ADD SIDEBAR
        |--------------------------------------------------------------------------
        */

        $('.close-my-sidebar').click(function() {

            $('.my-sidebar').removeClass('active');

            $('.overlay').removeClass('active');

        });

        /*
        |--------------------------------------------------------------------------
        | OPEN EDIT SIDEBAR
        |--------------------------------------------------------------------------
        */

        $(document).on(

            'click',

            '.edit-sidebar-btn',

            function() {

                $('#editUserId').val($(this).data('id'));

                $('#editRole').val($(this).data('roleid'));

                $('#editFirstname').val($(this).data('firstname'));

                $('#editLastname').val($(this).data('lastname'));

                $('#editOthername').val($(this).data('othername'));

                $('#editEmail').val($(this).data('email'));

                $('#editPhone').val($(this).data('phone'));

                $('#editGender').val($(this).data('gender'));

                $('#editStatus').val($(this).data('status'));

                $('.edit-sidebar').addClass('active');

                $('.overlay').addClass('active');

            });

        /*
        |--------------------------------------------------------------------------
        | CLOSE EDIT SIDEBAR
        |--------------------------------------------------------------------------
        */

        $('.close-edit-sidebar').click(function() {

            $('.edit-sidebar').removeClass('active');

            $('.overlay').removeClass('active');

        });

        /*
        |--------------------------------------------------------------------------
        | VIEW USER
        |--------------------------------------------------------------------------
        */

        $(document).on(

            'click',

            '.view-user-btn',

            function() {

                $('#viewFullName').text(

                    $(this).data('firstname') +

                    ' ' +

                    $(this).data('lastname') +

                    ' ' +

                    $(this).data('othername')

                );

                $('#viewEmail').text(

                    $(this).data('email')

                );

                $('#viewPhone').text(

                    $(this).data('phone')

                );

                $('#viewRole').text(

                    $(this).data('role')

                );

                $('#viewGender').text(

                    $(this).data('gender')

                );

                $('#viewLastLogin').text(

                    $(this).data('login') || '-'

                );

                let status = $(this).data('status');

                let badge = '';

                switch (status) {

                    case 'active':

                        badge = '<span class="badge bg-success">Active</span>';

                        break;

                    case 'inactive':

                        badge = '<span class="badge bg-warning">Inactive</span>';

                        break;

                    default:

                        badge = '<span class="badge bg-danger">Suspended</span>';

                }

                $('#viewStatus').html(badge);

            });

        /*
        |--------------------------------------------------------------------------
        | DELETE USER
        |--------------------------------------------------------------------------
        */

        $(document).on(

            'click',

            '.delete-user-btn',

            function() {

                $('#deleteUserId').val(

                    $(this).data('id')

                );

                $('#deleteUserName').text(

                    $(this).data('name')

                );

            });

        /*
        |--------------------------------------------------------------------------
        | RESET PASSWORD
        |--------------------------------------------------------------------------
        */

        $(document).on(

            'click',

            '.reset-password-btn',

            function() {

                $('#resetUserId').val(

                    $(this).data('id')

                );

                $('#resetUserName').text(

                    $(this).data('name')

                );

            });

        /*
        |--------------------------------------------------------------------------
        | OVERLAY
        |--------------------------------------------------------------------------
        */

        $('.overlay').click(function() {

            $('.my-sidebar').removeClass('active');

            $('.edit-sidebar').removeClass('active');

            $('.overlay').removeClass('active');

        });
        </script>