<?php
   include('session.php');
   include('header1.php');

// start role specific 
$user_role = $_SESSION['role'];



?>


<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
  <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Add User</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
      <div class="btn-group mr-2">
                <a href="usersmanagement.php" class="btn btn-sm btn-outline-secondary" role="button">Back</a>
            </div>
    </div>
  </div>

  <div class="alert alert-danger" role="alert" id = "errorbar" style="display: none;"></div>

  <form method = "POST" action="addUser1.php">


    <p>Username*
      <input type="text" name="username" id="nu_username" required class="form-control"> 
    </p>

    <p>Role*
      <select name="role" id="role" required class="form-control">
        <option value="1">Admin</option>
        <option value="2">Payroll Manager</option>
        <option value="3">Payroll Officer</option>
      </select> 
    </p>

    <p>Password*
      <input type="password" name="password" required class="form-control"> 
    </p>

    <input type="submit" id="butsaveNU" disabled="disabled">

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

    <script type="text/javascript">
    
    $(document).ready(function(){
         $("#nu_username").keyup(function(){
               var username = $(this).val().trim();
            
            if(username != ''){

               $.ajax({
                  url: 'checkUser.php',
                  type: 'post',
                  data: {username: username},
                  success: function(response){
                      //$(\"#button_response\").html(response);
                    if(response == "OK") {
                      document.getElementById("butsaveNU").disabled = false;
                      document.getElementById('errorbar').setAttribute('style','display:none;');
                    } else if (response == "KO"){
                      document.getElementById("butsaveNU").disabled = true;
                      document.getElementById('errorbar').setAttribute('style','');
                      document.getElementById('errorbar').innerHTML = "User Already on System!";
                    }
                   }
               });
            }else{
               
            }

          });

       });
  </script>



  </form>
  <br>
  <br>

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

<?php
   include('footer1.php');
?>