<!-- Extend area where template is defined -->
<?= $this->extend('templates/adminlte/generalcontent') ?>
<!-- .Extend -->

<!-- Title of the page -->
<?= $this->section('title') ?>User Maintenance<?= $this->endSection() ?>
<!-- .Title -->

<!-- CSS of the page -->
<?= $this->section('css') ?>

<!-- Toastr -->
<link rel="stylesheet" href="adminlte/plugins/toastr/toastr.min.css">

<?= $this->endSection() ?>
<!-- .CSS -->

<!-- body attribute - class definition -->
<?= $this->section('bodyclass') ?>sidebar-mini<?= $this->endSection() ?>
<!-- .body attribute -->

<!-- Container title -->
<?= $this->section('containertitle') ?>User Maintenance<?= $this->endSection() ?>
<!-- .Container title -->

<!-- Active breadcrumb -->
<?= $this->section('breadcrumbs') ?>
<li class="breadcrumb-item active">User Maintenance</li>
<?= $this->endSection() ?>
<!-- .Active breadcrumb -->

<!-- Main content -->
<?= $this->section('main') ?>


<!-- Modal View User -->
<div class="modal fade" id="mdlViewUser">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header bg-primary">
        <h4 class="modal-title" >Information of <span id="lblViewUserTitle"></span></h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-12">
            <p class="lead">Detailed User Information</p>
            <div class="row">
              <div class="col-xs-12 col-md-1">
                <p><strong>User ID</strong></p>
                <p id="lblViewUserUserID"></p>
              </div>
              <div class="col-xs-12 col-md-3">
                <p><strong>Username</strong></p>
                <p id="lblViewUserUsername"></p>
              </div>
              <div class="col-xs-12 col-md-4">
                <p><strong>Display Name</strong></p>
                <p id="lblViewDisplayName"></p>
              </div>
              <div class="col-xs-12 col-md-4">
                <p><strong>Employee ID</strong></p>
                <p id="lblViewUserEmployeeID"></p>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12 col-md-6">
            <h5>Groups</h5>
            <ul id="lstViewUserUserGroups"></ul>
          </div>
          <div class="col-xs-12 col-md-6">
            <h5>Permissions</h5>
            <div class="card">
              <div class="card-body p-0">
                <table class="table table-hover">
                  <tbody id="tblViewUserPermissions">
                    <tr data-widget="expandable-table" aria-expanded="false">
                      <td>
                        <i class="expandable-table-caret fas fa-caret-right fa-fw"></i>
                        219-1
                      </td>
                    </tr>
                    <tr class="expandable-body">
                      <td>
                        <div class="p-0">
                          <table class="table table-hover">
                            <tbody>
                              <tr>
                                <td>219-1-1</td>
                              </tr>
                              <tr>
                                <td>219-1-2</td>
                              </tr>
                              <tr>
                                <td>219-1-3</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal Edit User -->
<div class="modal fade" id="mdlEditUser">
  <div class="modal-dialog">
    <div class="modal-content">
      <form action="<?= url_to('adminuser/updateuser') ?>" method="post">
        <div class="modal-header bg-warning">
          <h4 class="modal-title" >Information of <span id="lblEditUserTitle"></span></h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-12">
              <p class="lead">Detailed User Information</p>
              <div class="row">
                <div class="col-4">
                  <p><strong>User ID</strong></p>
                  <p id="lblEditUserUserID"></p>
                  <input type="hidden" id="txtEditUserUserID" name="id">
                </div>
                <div class="col-8">
                  <p><strong>Username</strong></p>
                  <p id="lblEditUserUsername"></p>
                </div>
              </div>
              <div class="row">
                <div class="col-12">
                  <div class="form-group">
                    <label for="txtEditUserEmail">Email Address</label>
                    <input class="form-control" type="email" id="txtEditUserEmail" name="email">
                  </div>
                  <div class="form-group">
                    <label for="txtEditUserEmployeeID">Employee ID</label>
                    <input class="form-control" type="text" id="txtEditUserEmployeeID" name="employee_id">
                  </div>
                  <div class="form-group">
                    <label for="txtEditUserDisplayName">Display Name</label>
                    <input class="form-control" type="text" id="txtEditUserDisplayName" name="display_name">
                  </div>
                  <div class="form-group">
                    <div class="custom-control custom-switch">
                      <input type="checkbox" class="custom-control-input" id="chkActiveStatus" name="active">
                      <label class="custom-control-label" for="chkActiveStatus">User Active Status</label>
                    </div>
                  </div>
                  <div class="form-group" id="divEditUserUserGroups">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="mdlUpdateUserPass">
  <div class="modal-dialog">
    <div class="modal-content">
      <form action="<?= url_to('adminuser/updateuserpass') ?>" method="post">
        <div class="modal-header bg-warning">
          <h4 class="modal-title" >Information of <span id="lblUpdatePassUserTitle"></span></h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-12">
              <p class="lead">Detailed User Information</p>
              <div class="row">
                <div class="col-4">
                  <p><strong>User ID</strong></p>
                  <p id="lblUpdatePassUserID"></p>
                  <input type="hidden" id="hdnUpdatePassUserID" name="id">
                </div>
                <div class="col-8">
                  <p><strong>Username</strong></p>
                  <p id="lblUpdatePassUserUsername"></p>
                </div>
              </div>
              <div class="row">
                <div class="col-12">
                  <div class="form-group">
                    <label for="txtEditPassword">Password</label>
                    <input class="form-control" type="password" id="txtEditPassword" name="password">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">List of Users</h3>

        <div class="card-tools">
          <div class="input-group input-group-sm" style="width: 150px;">
            <input type="text" name="table_search" class="form-control float-right" placeholder="Search">

            <div class="input-group-append">
              <button type="submit" class="btn btn-default">
                <i class="fas fa-search"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="card-body table-responsive p-0">
        <?= $tblUsers ?>
      </div>
      <div class="card-footer">
        <!-- <a href="/adminuser/newuser" class="btn btn-primary">New User</a> -->
        <a href="/adminuser/fromemplist" class="btn btn-primary">New From Employee List</a>
      </div>
    </div>
  </div>
</div>

<?= $this->endSection() ?>
<!-- .Main content -->

<!-- Javascript -->

<?= $this->section('externaljs') ?>

<!-- Toastr -->
<script src="adminlte/plugins/toastr/toastr.min.js"></script>

<?= $this->endSection() ?>



<?= $this->section('js') ?>

<script>
$(document).ready(function() {
  
});

function GetUserByIdForView(id) 
{
  $.get( "/adminuser/getuserbyid/" + id, function( data ) 
  {
      console.log(data);
      var user = data.user;
      var groups = data.groups;
      var permissions = data.permissions;

      $("#lstViewUserUserGroups").empty();
      for(var i=0; i<groups.length; i++)
      {
          $("#lstViewUserUserGroups").append("<li>" + groups[i] + "</li>");
      }

      $("#tblViewUserPermissions").empty();

      var permissionsTableContent = "";

      $.each(permissions, function( key, value ) {
          permissionsTableContent += '<tr data-widget="expandable-table" aria-expanded="false"><td><i class="expandable-table-caret fas fa-caret-right fa-fw"></i>' + value.group + '</td></tr>';
          permissionsTableContent += '<tr class="expandable-body d-none"><td><div class="p-0"><table class="table table-hover"><tbody>';
          
          for(var i=0; i<value.permissions.length; i++)
          {
              permissionsTableContent += '<tr><td>' + value.permissions[i].description + '</td></tr>';
          }
          
          permissionsTableContent += '</tbody></table></div></td></tr>';
      });

      $("#tblViewUserPermissions").html(permissionsTableContent);
      
      $("#lblViewUserTitle").text(user.email);

      $("#lblViewUserUserID").text(user.id);
      $("#lblViewUserUsername").text(user.username);
      $("#lblViewDisplayName").text(user.display_name);
      $("#lblViewUserEmployeeID").text(user.employee_id);

      $('#mdlViewUser').modal('show');
  });
}

function GetUserByIdForEdit(user) 
{
  $("#lblEditUserTitle").text($(user).data('displayname'));
  $("#lblEditUserUserID").text($(user).data('id'));
  $("#lblEditUserUsername").text($(user).data('username'));

  $("#txtEditUserUserID").val($(user).data('id'));
  $("#txtEditUserEmail").val($(user).data('email'));
  $("#txtEditUserEmployeeID").val($(user).data('employeeid'));
  $("#txtEditUserDisplayName").val($(user).data('displayname'));
  
  if($(user).data('active'))
  {
    $("#chkActiveStatus").prop('checked', true);
  }
  else
  {
    $("#chkActiveStatus").prop('checked', false);
  }

  $("#divEditUserUserGroups").html('<a href="adminuser/editusergroup/' + $(user).data('id') + '">Change user Group for ' + $(user).data('username') + '</a>');

  $('#mdlEditUser').modal('show');
}

function GetUserByIdForPassEdit(user) 
{
  $("#lblUpdatePassUserTitle").text($(user).data('displayname'));
  $("#lblUpdatePassUserID").text($(user).data('id'));

  $("#lblUpdatePassUserUsername").text($(user).data('username'));
  $("#hdnUpdatePassUserID").val($(user).data('id'));
  
  $('#mdlUpdateUserPass').modal('show');
}

function DeleteUserByID()
{
  return confirm("Are you sure you want to delete this user?");
}

</script>

<?= $this->endSection() ?>

<!-- .Javascript -->