FloatBackOfffice/application/views/admin/view_user_management.php

<div class="row justify-content-md-center">
  <div class="col col-lg-3">
    <div class="card" style="width: 100%; background-color: lemonchiffon; padding: 5px;">
      <div class="card-body" id="card_form">
        <font id="message" color=red><?= $message ?> </font>
        <form id="editform" name="editform" method="post" action="?" autocomplete="off">
          <div class="form-group">
            <label for="pid">PID</label>
            <select class="form-control" id="pid" name="pid">
              <?php foreach($platform as $value) { ?>
                <option 
                  <?php echo (!empty($pid) && $pid == $value['pid']) ? 'selected' : '' ?>
                  value="<?php echo $value['pid']; ?>"
                >
                  <?php echo $value['name']; ?>
                </option>
              <?php } ?>
            </select>
          </div>
          <div class="form-group">
            <label for="firstname">First Name</label>
            <input type="text" class="form-control" id="firstname" name="firstname" maxlength="50" placeholder="First Name" value="<?= $firstname ?>" />
          </div>
          <div class="form-group">
            <label for="lastname">Last Name</label>
            <input type="text" class="form-control" id="lastname" name="lastname" maxlength="50" placeholder="Last Name" value="<?= $lastname ?>" />
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="text" class="form-control" id="email" name="email" maxlength="150" placeholder="Email"" value="<?= $email ?>" />
          </div>
          <div class="form-group">
            <label for="username">Username</label>
            <input type="text" autocomplete="off" class="form-control" id="username" name="username" maxlength="25" placeholder="Username" value="<?= $username ?>" />
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" autocomplete="off" class="form-control" id="password" name="password" maxlength="125" placeholder="Password" value="<?= $password ?>" />
          </div>
          <div class="form-group">
            <label for="confirm_password">Confirm Password</label>
            <input type="password" class="form-control" id="confirm_password" name="confirm_password" maxlength="125" placeholder="Confirm Password" value="<?= $confirm_password ?>" />
          </div>
          <div class="form-group">
            <label for="plevel">Permission</label>
            <select class="form-control" id="permission" name="permission">
              <?php foreach($permission as $value) { ?>
                <option 
                  <?php echo (!empty($plevel) && $plevel == $value['plevel']) ? 'selected' : '' ?>
                  value="<?php echo $value['plevel'] . ',' . $value['status']; ?>">
                  <?php echo $value['name']; ?>
                </option>
              <?php } ?>
            </select>
          </div>
          <div class="form-group">
            <label for="last_login">Last Login</label>
            <input type="text" class="form-control" id="last_login" name="last_login" maxlength="200" placeholder="Last Login" value="<?= $last_login ?>" />
          </div>
          <div class="form-group">
            <label for="loc">Loc</label>
            <input type="text" class="form-control" id="loc" name="loc" maxlength="200" placeholder="Loc"" value="<?= $loc ?>" />
          </div>
          <div class="form-group">
            <button type="submit" onclick="submitForm()" name="gobtn" id="gotbtn" class="btn btn-info btn-block btn-sm"><?= $form_button ?></button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="col col-lg-9">
    <div class="row">
      <!-- Media library -->
      <div class="panel panel-white">
        <div class="panel-heading">
          <h6 class="panel-title text-semibold">User Managerment</h6>
        </div>
        <div class="panel-body">
          <div class="row">
            <form method="GET" action="/bkoadmin/usermanagerment">
              <div class="row">
                <div class="col-xs-4 col-md-3">
                  <label for="pid">PID</label>
                  <select class="form-control" id="pid" name="pid">
                    <option value="">All</option>
                    <?php foreach($platform as $value) { ?>
                      <option
                        <?php echo (!empty($filterData['pid']) && $filterData['pid'] == $value['pid']) ? 'selected' : '' ?>
                        value="<?php echo $value['pid']; ?>">
                        <?php echo $value['name']; ?>
                      </option>
                    <?php } ?>
                  </select>
                </div>

                <div class="col-xs-4 col-md-3">
                  <label for="">First name</label>
                  <input type="text" class="form-control" name="first_name" value="<?php echo $filterData['first_name'] ?? '';?>">
                </div>

                <div class="col-xs-4 col-md-3">
                  <label for="">Last name</label>
                  <input type="text" class="form-control" name="last_name" value="<?php echo $filterData['last_name'] ?? '';?>">
                </div>

                <div class="col-xs-4 col-md-3">
                  <label for="">Email</label>
                  <input type="text" class="form-control" name="email" value="<?php echo $filterData['email'] ?? '';?>">
                </div>

                <div class="col-xs-4 col-md-3">
                  <label for="">Username</label>
                  <input type="text" class="form-control" name="username" value="<?php echo $filterData['username'] ?? '';?>">
                </div>

                <div class="col-xs-4 col-md-3">
                  <label for="">Plevel</label>
                  <select class="form-control" name="plevel">
                    <option value="">All</option>
                    <?php foreach($permission as $value) { ?>
                      <option 
                        <?php echo (!empty($filterData['plevel']) && $filterData['plevel'] == $value['plevel']) ? 'selected' : '' ?>
                        value="<?php echo $value['plevel']; ?>">
                        <?php echo $value['name']; ?>
                      </option>
                    <?php } ?>
                  </select>
                </div>

                <div class="col-xs-4 col-md-3">
                  <label for="">Last login</label>
                  <input type="text"
                    class="form-control" 
                    name="last_login" 
                    value="<?php echo $filterData['last_login'] ?? (date('Y-m-d', strtotime('-30 days')).' - '.date('Y-m-d')) ?>"
                    readonly>
                </div>
                
                <div class="col-xs-3 col-sm-2">
                  <div class="form-group">
                    <label for=""></label>
                    <div style="margin-top: 7px">
                      <button type="submit" class=" btn btn-primary btn-sm">Search</button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="row">
            <div class="m-y-sm"><?= $links ?: '' ?></div> 
          </div>
          <div class="row">
            <table class="table-bordered table-condensed table-hover table-striped table-condensed" style="padding:0px; background-color:lightgreen;">
              <thead class="bg-indigo">
                <th>ID</th>
                <th>PID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>Username</th>
                <th>Plevel</th>
                <th>Status</th>
                <th>Added</th>
                <th>Last Login</th>
                <th>Loc</th>
                <th></th>
              </thead>
              <?php if(isset($user_management_table)) ?>
              <?php foreach($user_management_table as  $key => $user) { ?>
                <tr id="<?=$user["id"]?>" style="cursor: pointer;">
                  <td><?php echo $page + $key + 1;?></td>
                  <td><?php echo $user['pid'] ;?></td>
                  <td><?php echo $user['firstname'] ;?></td>
                  <td><?php echo $user['lastname'] ;?></td>
                  <td><?php echo $user['email'] ;?></td>
                  <td><?php echo $user['username'] ;?></td>
                  <td><?php echo $user['plevel'] ;?></td>
                  <td><?php echo $user['status'] ;?></td>
                  <td><?php echo $user['added'] ;?></td>
                  <td><?php echo $user['last_login'] ;?></td>
                  <td><?php echo $user['loc'] ;?></td>
                  <td>
                    <button type="button" class="btn btn-danger" onclick="return deleteUserManagement('<?=$user["id"]?>');">X</button>
                  </td>
                </tr>
              <?php } ?>
            </table>
          </div>
        </div>
      </div>
      <!-- </div> -->
    </div>
  </div>

</div>

<script>
  $( document ).ready(function() {
    /** date range picker */
    let datepickerOptions = {
        autoUpdateInput: false,
        locale: {
            format: 'YYYY-MM-DD',
            cancelLabel: 'Clear'
        }
    };

    let fromToElement = $('input[name="last_login"]');
    const fromToVal = fromToElement.val();
    if (fromToVal == '') {
        datepickerOptions.startDate = moment().subtract(7, 'days').format('YYYY-MM-DD');
        datepickerOptions.endDate = moment().format('YYYY-MM-DD');
    }
    fromToElement.daterangepicker(datepickerOptions);

    fromToElement.on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
    });

    fromToElement.on('cancel.daterangepicker', function(ev, picker) {
        fromToElement.val('');
    });
  });

  function deleteRow(rowid)  
  {   
      var row = document.getElementById(rowid);
      row.parentNode.removeChild(row);
  }

  var table = document.getElementsByTagName("table")[0];
  var tbody = table.getElementsByTagName("tbody")[0];
  tbody.onclick = function (e) {
      e = e || window.event;
      var data = [];
      var target = e.srcElement || e.target;
      while (target && target.nodeName !== "TR") {
          target = target.parentNode;
      }
      if (target) {
          var cells = target.getElementsByTagName("td");
          document.getElementsByName('pid')[0].value        = cells[1].innerHTML;
          document.getElementsByName('firstname')[0].value  = cells[2].innerHTML;
          document.getElementsByName('lastname')[0].value   = cells[3].innerHTML;
          document.getElementsByName('email')[0].value      = cells[4].innerHTML;
          document.getElementsByName('username')[0].value   = cells[5].innerHTML;
          document.getElementsByName('permission')[0].value = cells[6].innerHTML + "," + cells[7].innerHTML;
          document.getElementsByName('last_login')[0].value = cells[9].innerHTML;
          document.getElementsByName('loc')[0].value        = cells[10].innerHTML;

          document.getElementsByName('gobtn')[0].innerText  = "Update";

          var element = document.getElementById("underline-email");
          if (element !== null) {
            element.removeAttribute('id');
          }
          cells[4].id="underline-email";
      }
  };

  function submitForm() {
    // Get the first form with the name
    // Usually the form name is not repeated
    // but duplicate names are possible in HTML
    // Therefore to work around the issue, enforce the correct index
    var frm = document.getElementsByName('editform')[0];
    frm.submit(); // Submit the form
    // frm.reset();  // Reset all form data
    return false; // Prevent page refresh
  }

  function deleteUserManagement(id) {
      if (!confirm('Are you sure you want to delete?')) return false;
      var xhr = new XMLHttpRequest();
      xhr.open('GET', '/bkoadmin/userManagementDelete?id='+id, true);
      xhr.responseType = 'json';
      xhr.onload = function() {
        var status = xhr.status;
        if (status === 200) {
          if (xhr.response.state === "successful") {
            deleteRow(xhr.response.user_id);
          }
          $('#message').html(xhr.response.message);
        }
      };
      xhr.send();
  }
</script>

<style>
#underline-email {text-decoration: underline;}
</style>