<!-- Add User Modal-->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Create User</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">

        <form id="addForm">
          <div class="row">
            <label class="col-3 col-form-label text-right">Username: <span class="text-danger">*</span></label>
            <div class="col-7">
              <div class="form-group">
                <input type="text" id="usernameInput" class="form-control" required="required" placeholder="" name="username">
              </div>
            </div>
            <div class="col-1">
              <i class="far fa-sm fa-question-circle" title='(Required) - Enter in a username for the user.'></i>
            </div>
          </div>

          <div class="row">
            <label class="col-3 col-form-label text-right">Password: <span class="text-danger">*</span></label>
            <div class="col-7">
              <div class="form-group">
                <input type="password" id="passwordInput" class="form-control" required="required" placeholder="" name="password">
              </div>
            </div>
            <div class="col-1">
              <i class="far fa-sm fa-question-circle" title='(Required) - Enter in a password for the user.'></i>
            </div>
          </div>

          <div class="row">
            <label class="col-3 col-form-label text-right">First Name: </label>
            <div class="col-7">
              <div class="form-group">
                <input type="text" id="firstNameInput" class="form-control" placeholder="" name="first_name">
              </div>
            </div>
            <div class="col-1">
              <i class="far fa-sm fa-question-circle" title='Enter in the firstname of the user.'></i>
            </div>
          </div>

          <div class="row">
            <label class="col-3 col-form-label text-right">Last Name: </label>
            <div class="col-7">
              <div class="form-group">
                <input type="text" id="lastNameInput" class="form-control" placeholder="" name="last_name">
              </div>
            </div>
            <div class="col-1">
              <i class="far fa-sm fa-question-circle" title='Enter in the lastname of the user.'></i>
            </div>
          </div>

          <div class="row">
            <label class="col-3 col-form-label text-right">Email: </label>
            <div class="col-7">
              <div class="form-group">
                <input type="text" id="emailInput" class="form-control" required="required" placeholder="" name="email">
              </div>
            </div>
            <div class="col-1">
              <i class="far fa-sm fa-question-circle" title='Enter in the email address of the user.'></i>
            </div>
          </div>

          <div class="row">
            <label class="col-3 col-form-label text-right">Group: </label>
            <div class="col-7">
              <div class="form-group">
                <select id="groupInput" class="form-control" required="required"  name="group_id">
                  <option value="4">Auditor</option>
                </select>
              </div>
            </div>
            <div class="col-1">
              <i class="far fa-sm fa-question-circle" title='Select a group the user.'></i>
            </div>
          </div>

        </form>

      </div> <!-- End Modal Body-->
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
        <a class="btn btn-primary" href="#" onclick="addUser()" data-dismiss="modal">Submit</a>
      </div>
    </div>
  </div>
</div>

<!-- Edit User Modal-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Edit User</h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="user-tab" data-toggle="tab" href="#user-profile" role="tab" aria-controls="user-profile" aria-selected="true">Profile</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="group-tab" data-toggle="tab" href="#user-group" role="tab" aria-controls="user-group" aria-selected="false">Groups</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="password-tab" data-toggle="tab" href="#user-password" role="tab" aria-controls="user-password" aria-selected="false">Password</a>
            </li>
          </ul>
          <div class="tab-content" id="myTabContent">

            <div class="tab-pane fade show active" id="user-profile" role="tabpanel" aria-labelledby="user-tab">
              <br />
              <form id="editForm">

                <div class="row">
                  <label class="col-3 col-form-label text-right">Username: </label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="usernameEditInput" class="form-control" required="required" placeholder="" name="username" disabled>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in a username for the user.'></i>
                  </div>
                </div>
      
                <div class="row">
                  <label class="col-3 col-form-label text-right">First Name: </label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="firstNameEditInput" class="form-control" placeholder="" name="first_name">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the firstname of the user.'></i>
                  </div>
                </div>
      
                <div class="row">
                  <label class="col-3 col-form-label text-right">Last Name: </label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="lastNameEditInput" class="form-control" placeholder="" name="last_name">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the lastname of the user.'></i>
                  </div>
                </div>
      
                <div class="row">
                  <label class="col-3 col-form-label text-right">Email: </label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="emailEditInput" class="form-control" required="required" placeholder="" name="email">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the email address of the user.'></i>
                  </div>
                </div>

                <input type="hidden" id="idEditInput" name="id">
              </form>
              <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                <a class="btn btn-primary" href="#" onclick="updateUser()" data-dismiss="modal">Update Profile</a>
              </div>
            </div>

            <div class="tab-pane fade" id="user-group" role="tabpanel" aria-labelledby="group-tab">
              <br />

              <form id="editUserGroupsForm">
                <div class="row">
                  <label class="col-3 col-form-label text-right">Action: </label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="actionEditInput" onchange="changeActionInput()" class="form-control" required="required"  name="action">
                        <option value="add">Add</option>
                        <option value="remove">Remove</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Select to add or remove a group.'></i>
                  </div>
                </div>
  
                <div class="row" id="addGroupEditInputRow">
                  <label class="col-3 col-form-label text-right">Group: </label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="addGroupEditInput" class="form-control" required="required"  name="add_group">
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Select a group to add to the user.'></i>
                  </div>
                </div>
  
                <div class="row" id="removeGroupEditInputRow" style="display: none">
                  <label class="col-3 col-form-label text-right">Group: </label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="removeGroupEditInput" class="form-control" required="required"  name="remove_group">
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Select a group to remove from the user.'></i>
                  </div>
                </div>
  
                <input type="hidden" id="idUserGroupsEditInput" name="id">
              </form>

              <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                <a class="btn btn-primary" href="#" onclick="updateUserGroup()" data-dismiss="modal">Update Group</a>
              </div>
            </div>

            <div class="tab-pane fade" id="user-password" role="tabpanel" aria-labelledby="password-tab">
              <br />
              <form id="editUserPasswordForm">
                <div class="row">
                  <label class="col-4 col-form-label text-right">Password: </label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="password" id="passwordEditInput" class="form-control" name="password">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in a password for the user.'></i>
                  </div>
                </div>
      
                <div class="row">
                  <label class="col-4 col-form-label text-right">Confirm Password: </label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="password" id="confirmPasswordEditInput" class="form-control" name="confirm_password">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the password again for the user.'></i>
                  </div>
                </div>             
  
                <input type="hidden" id="idUserPasswordEditInput" name="id">
              </form>

              <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                <a class="btn btn-primary" href="#" onclick="updateUserPassword()" data-dismiss="modal">Update Password</a>
              </div>
            </div>

          </div>
        </div>
    </div>
  </div>
</div>

