<!-- ! Main -->
<main class="main users job-role-page" id="">
  <div class="container">
    <!-- <h2 class="main-title">Job Role</h2> -->
    <div class="row mrg15B justify-content-between">
      <div class="col-auto">
        <h2 class="app-page-title mb-0">Add New User</h2>
      </div>
      <div class="col-auto">
        <div class="page-utilities">
          <div class="row">

            <div class="col-auto">
              <a class="btn app-btn-primary" href="<?= base_url('admin/user') ?>">
                VIEW ALL USER
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">

        <div class="white-block">
          <form class="row" id="add-user-form" method="post" action="<?= base_url("admin/user/submitUser") ?>" enctype="multipart/form-data" autocomplete="off">
            <div class="col-lg-4 col-md-6 ">
              <div class="form-group">
                <label for="" class="">User Role<span class="asterisk"> *</span></label>
                <select name="role_id" id="role_id" class="form-select">
                  <option value="" selected disabled>Select User Role</option>
                  <?php foreach ($roles as $row) {
                  ?>
                    <option value="<?= $row['role_id'] ?>"><?= $row['role_name'] ?></option>
                  <?php } ?>
                </select>
              </div>
            </div>
            <div class="col-lg-8 col-md-6 ">
              <div class="form-group">
                <label for="" class="">Full Name<span class="asterisk"> *</span></label>
                <input type="text" class="form-control" id="full_name" name="full_name" value="" required="required" onkeyup="this.value=this.value.replace(/[^A-z]/g/s,'');" placeholder="Full Name">
              </div>
            </div>
            <div class="col-lg-4 col-md-6 ">
              <div class="form-group">
                <label for="" class="">User ID (Email)<span class="asterisk"> *</span></label>
                <input type="text" class="form-control" id="email" name="email" value="" required="required" placeholder="User ID (Email)">
                <span class="asterisk"><?php echo form_error('email'); ?></span>
              </div>
            </div>
            <div class="col-lg-4 col-md-6 ">
              <div class="form-group">
                <label for="" class="">Mobile No. <span class="asterisk"> *</span></label>
                <input type="text" class="form-control" maxlength="10" minlength="10" id="mobile_no" name="mobile_no" value="" required="required" placeholder="Mobile No. ">
              </div>
            </div>
            <div class="col-lg-4 col-md-12 ">
              <div class="form-group">
                <label for="" class="">Gender<span class="asterisk"> *</span></label>
                <select id="gender" name="gender" class="form-select" required="">
                    <option value="">Select Gender</option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                    <option value="Other">Other</option>
                </select>
              </div>
            </div>
            <div class="col-lg-12 col-md-12 mb-3">
              <div class="form-group">
                <label for="" class="form-label">Full Address <span class="asterisk">* </span></label>
                <textarea name="address" id="address" cols="" rows="3" class="form-control" placeholder="Enter Your Full Adress Here" required></textarea>
              </div>
            </div>
            <div class="col-lg-6 col-sm-12 col-md-6 mb-3">
              <div class="form-group">
                <label for="" class="form-label">ABN <span class="asterisk"> </span></label>
                <input type="text" class="form-control" id="abn" name="abn" placeholder="ABN">
              </div>
            </div>
            <div class="col-lg-6 col-sm-12 col-md-6 mb-3">
              <div class="form-group">
                <label for="" class="form-label">TFN <span class="asterisk"> </span></label>
                <input type="text" class="form-control" id="tfn" name="tfn" placeholder="TFN">
              </div>

            </div>
            <div class="col-lg-6 col-md-12 ">
              <div class="form-group">
                <label for="" class="">Password <span class="asterisk"> *</span></label>
                <input type="password" class="form-control" id="password" name="password" value="" required="required" placeholder="**********">
                <span class="asterisk"><?php echo form_error('password'); ?></span>
              </div>
            </div>
            <div class="col-lg-6 col-md-12 ">
              <div class="form-group">
                <label for="" class="">Confirm Password <span class="asterisk"> *</span></label>
                <input type="password" class="form-control" id="confirm_password" name="confirm_password" value="" required="required" placeholder="**********">
                <span class="asterisk"><?php echo form_error('confirm_password'); ?></span>
              </div>
            </div>
            
            <div class="col-lg-6 col-md-12" style="margin-top:20px;">
              <div class="form-group">
                <label for="" class="mrg20R">Status</label>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="status" id="inlineRadio1" value="0" checked>
                  <label class="form-check-label" for="inlineRadio1">Active</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="status" id="inlineRadio2" value="1">
                  <label class="form-check-label" for="inlineRadio2">Inactive</label>
                </div>
              </div>
            </div>

            <div class="col-lg-6 col-sm-12">
                      <label for="" class="form-label">Profile Photo </label>
                      <input type="file" class="form-control" name="user_image">
                    </div>
            <div class="col-md-12">
              <div class="form-group">
                <button type="submit" class="btn btn-primary mrg15R" id="btn-form-submit">SUBMIT</button>
                <a class="btn btn-danger" href="<?= base_url('admin/user') ?>">CANCEL</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</main>
<script>
  $(document).ready(function(){
      $('#mobile_no').keypress(function (event) {
      var keycode = event.which;
      if (!(event.shiftKey == false && (keycode == 46 || keycode == 8 || keycode == 37 || keycode == 39 || (keycode >= 48 && keycode <= 57)))) {
          event.preventDefault();
      }
    });

  })
</script>
<!-- <script type='text/javascript'>
    $('#btn-form-submit').click(function(e){
                e.preventDefault();
                $('#btn-form-submit').prop('disabled', true);
                $.ajax({
                    url:'<?= base_url("admin/user/submitUser") ?>',
                    method: 'POST',
                    data: $(this).serialize(),
                    dataType: 'json',
                    success: function(response){
                        $('#btn-form-submit').prop('disabled', false);
                        if(response.success){
                            window.location.href = "<?= base_url('admin/user') ?>";
                        }else{
                            $('#btn-form-submit').before('<p class="result-msg text-danger">'+response.message+'</p>');
                        }
                    },
                    complete: function(){
                        setTimeout(function(){
                            $('.result-msg').remove();
                        }, 5000);
                    },
                    error: function(er){
                        $('#btn-form-submit').before('<p class="result-msg text-danger">'+response.message+'</p>');
                    }
                });
            })
  </script> -->