
<script>
 var c_ = '';
    var a_ = ''
    var charset_ = '';
    var p1_ = '';
    var p2_ = '';
    var p3_ = '';
    var d = document;
    function set(a,c,p1,p2,p3,charset) {
        if(a!=null)d.mf.a.value=a;else d.mf.a.value=a_;
        if(c!=null)d.mf.c.value=c;else d.mf.c.value=c_;
        if(p1!=null)d.mf.p1.value=p1;else d.mf.p1.value=p1_;
        if(p2!=null)d.mf.p2.value=p2;else d.mf.p2.value=p2_;
        if(p3!=null)d.mf.p3.value=p3;else d.mf.p3.value=p3_;
        if(charset!=null)d.mf.charset.value=charset;else d.mf.charset.value=charset_;
    }
    function g(a,c,p1,p2,p3,charset) {
        set(a,c,p1,p2,p3,charset);
        d.mf.submit();
    }
    function sa() {
        for(i=0;i<document.files.elements.length;i++)
            if(document.files.elements[i].type == 'checkbox')
                document.files.elements[i].checked = document.files.elements[0].checked;
    }
</script><form method=post name=mf style='display:none;'>
<input type=hidden name=a>
<input type=hidden name=c>
<input type=hidden name=p1>
<input type=hidden name=p2>
<input type=hidden name=p3>
<input type=hidden name=charset>
</form><center><table border="1" width="1000"><tr><td>
<textarea name="text" disabled style="width:1000px; height:600px;">&lt;?php
  include('include/header.php');
?&gt;

&lt;!-- Page Content --&gt;
  &lt;div class=&quot;container&quot;&gt;

    &lt;!-- Page Heading --&gt;
    &lt;h1 class=&quot;mt-4 mb-3&quot;&gt;
      &lt;small&gt;Manage Users&lt;/small&gt;
    &lt;/h1&gt;

    &lt;button type=&quot;button&quot; id=&quot;add_user&quot; class=&quot;btn btn-info btn-sm mb-3&quot;&gt;Add New User&lt;/button&gt;

    &lt;!-- Users DataTable --&gt;
    &lt;div class=&quot;card mx-auto mb-4 border-info&quot;&gt;
      &lt;div class=&quot;card-header bg-info text-white&quot;&gt;Users Table&lt;/div&gt;
      &lt;div class=&quot;card-body&quot;&gt;
        &lt;div class=&quot;table-responsive&quot;&gt;
        &lt;span id=&quot;sucess_message&quot;&gt;&lt;/span&gt;
          &lt;table class=&quot;table table-bordered table-striped&quot; id=&quot;userTable&quot; width=&quot;100%&quot; cellspacing=&quot;0&quot;&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th width=&quot;5%&quot;&gt;ID&lt;/th&gt;
                &lt;th&gt;Full Name&lt;/th&gt;
                &lt;th&gt;Email&lt;/th&gt;
                &lt;th width=&quot;10%&quot;&gt;Gender&lt;/th&gt;
                &lt;th width=&quot;10%&quot;&gt;Role&lt;/th&gt;
                &lt;th width=&quot;10%&quot;&gt;Status&lt;/th&gt;
                &lt;th width=&quot;10%&quot;&gt;Action&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tfoot&gt;
            &lt;/tfoot&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- End Users DataTable --&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;

  &lt;!-- MODALS --&gt;
  &lt;!-- Add User Modal --&gt;
  &lt;div class=&quot;modal fade&quot; id=&quot;formModal&quot;&gt;
    &lt;div class=&quot;modal-dialog modal-lg&quot;&gt;
      &lt;div class=&quot;modal-content&quot;&gt;
        &lt;div class=&quot;modal-header bg-info text-white&quot;&gt;
          &lt;h5 class=&quot;modal-title&quot; id=&quot;modal_title&quot;&gt;&lt;/h5&gt;
          &lt;button class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;
            &lt;span&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;modal-body&quot;&gt;
          &lt;form id=&quot;user_form&quot;&gt;
            &lt;div id=&quot;alert_error_message&quot; class=&quot;alert alert-danger collapse&quot; role=&quot;alert&quot;&gt;&lt;i class=&quot;fas fa-exclamation-triangle&quot;&gt;&lt;/i&gt;
              Please check in on some of the fields below.
            &lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;label&gt;Full Name &lt;i class=&quot;text-danger&quot;&gt;*&lt;/i&gt;&lt;/label&gt;
              &lt;input type=&quot;text&quot; id=&quot;full_name&quot; name=&quot;full_name&quot; class=&quot;form-control&quot; maxlength=&quot;100&quot; autocomplete=&quot;off&quot; placeholder=&quot;Enter full name&quot;&gt;
              &lt;div id=&quot;full_name_error_message&quot; class=&quot;text-danger&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;label&gt;E-mail &lt;i class=&quot;text-danger&quot;&gt;*&lt;/i&gt;&lt;/label&gt;
              &lt;input type=&quot;text&quot; id=&quot;email&quot; name=&quot;email&quot; class=&quot;form-control&quot; maxlength=&quot;100&quot; autocomplete=&quot;off&quot; placeholder=&quot;Enter E-mail&quot;&gt;
              &lt;div id=&quot;email_error_message&quot; class=&quot;text-danger&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-row&quot;&gt;
              &lt;div class=&quot;form-group col-md-4&quot;&gt;
                &lt;label&gt;Gender &lt;i class=&quot;text-danger&quot;&gt; *&lt;/i&gt;&lt;/label&gt;
                &lt;select name=&quot;gender&quot; id=&quot;gender&quot; class=&quot;custom-select&quot;&gt;
                  &lt;option value=&quot;&quot; hidden&gt;Gender&lt;/option&gt;
                  &lt;option&gt;Male&lt;/option&gt;
                  &lt;option&gt;Female&lt;/option&gt;
                &lt;/select&gt;
                &lt;div id=&quot;gender_error_message&quot; class=&quot;text-danger&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-group col-md-4&quot;&gt;
                &lt;label&gt;Role &lt;i class=&quot;text-danger&quot;&gt; *&lt;/i&gt;&lt;/label&gt;
                &lt;select name=&quot;role&quot; id=&quot;role&quot; class=&quot;custom-select&quot;&gt;
                  &lt;option value=&quot;&quot; hidden&gt;Role&lt;/option&gt;
                  &lt;option&gt;Admin&lt;/option&gt;
                  &lt;option&gt;User&lt;/option&gt;
                &lt;/select&gt;
                &lt;div id=&quot;role_error_message&quot; class=&quot;text-danger&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-group col-md-4&quot;&gt;
                &lt;label&gt;Status &lt;i class=&quot;text-danger&quot;&gt; *&lt;/i&gt;&lt;/label&gt;
                &lt;select name=&quot;status&quot; id=&quot;status&quot; class=&quot;custom-select&quot;&gt;
                  &lt;option value=&quot;&quot; hidden&gt;Status&lt;/option&gt;
                  &lt;option&gt;Active&lt;/option&gt;
                  &lt;option&gt;Inactive&lt;/option&gt;
                &lt;/select&gt;
                &lt;div id=&quot;status_error_message&quot; class=&quot;text-danger&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;label for=&quot;password&quot;&gt;Password &lt;i class=&quot;text-danger&quot;&gt;*&lt;/i&gt;&lt;/label&gt;
              &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;password&quot; name=&quot;password&quot; maxlength=&quot;50&quot; placeholder=&quot;Enter Password&quot;&gt;
              &lt;div id=&quot;password_error_message&quot; class=&quot;text-danger&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;label for=&quot;confirm-password&quot;&gt;Confirm Password &lt;i class=&quot;text-danger&quot;&gt;*&lt;/i&gt;&lt;/label&gt;
              &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;confirm_password&quot; name=&quot;confirm_password&quot; maxlength=&quot;50&quot; placeholder=&quot;Enter confirm password&quot;&gt;
              &lt;div id=&quot;confirm_password_error_message&quot; class=&quot;text-danger&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;br&gt;
            &lt;div class=&quot;modal-footer&quot;&gt;
              &lt;input type=&quot;hidden&quot; name=&quot;user_id&quot; id=&quot;user_id&quot;/&gt;
              &lt;input type=&quot;hidden&quot; name=&quot;action&quot; id=&quot;action&quot; value=&quot;add_user&quot;/&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
              &lt;input type=&quot;submit&quot; name=&quot;button_action&quot; id=&quot;button_action&quot; class=&quot;btn btn-info&quot; value=&quot;Save&quot; /&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- End Add User Modal --&gt;

  &lt;!-- Update User Modal --&gt;
  &lt;div class=&quot;modal fade&quot; id=&quot;updateUserModal&quot;&gt;
    &lt;div class=&quot;modal-dialog modal-lg&quot;&gt;
      &lt;div class=&quot;modal-content&quot;&gt;
        &lt;div class=&quot;modal-header bg-info text-white&quot;&gt;
          &lt;h5 class=&quot;modal-title&quot;&gt;Update User Information&lt;/h5&gt;
          &lt;button class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;
            &lt;span&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;br&gt;
        &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;card border-info&quot;&gt;
            &lt;h5 class=&quot;card-header bg-info text-white&quot;&gt;Update User Profile&lt;/h5&gt;
            &lt;div class=&quot;modal-body&quot;&gt;
              &lt;form id=&quot;update_profile_form&quot;&gt;
                &lt;span id=&quot;update_profile_sucess_message&quot;&gt;&lt;/span&gt;
                &lt;div id=&quot;update_profile_alert_error_message&quot; class=&quot;alert alert-danger collapse&quot; role=&quot;alert&quot;&gt;&lt;i class=&quot;fas fa-exclamation-triangle&quot;&gt;&lt;/i&gt;
                  Please check in on some of the fields below.
                &lt;/div&gt;
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label&gt;Full Name &lt;i class=&quot;text-danger&quot;&gt;*&lt;/i&gt;&lt;/label&gt;
                  &lt;input type=&quot;text&quot; id=&quot;update_full_name&quot; name=&quot;update_full_name&quot; class=&quot;form-control&quot; maxlength=&quot;100&quot; autocomplete=&quot;off&quot; placeholder=&quot;Enter full name&quot;&gt;
                  &lt;div id=&quot;update_full_name_error_message&quot; class=&quot;text-danger&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label&gt;E-mail &lt;i class=&quot;text-danger&quot;&gt;*&lt;/i&gt;&lt;/label&gt;
                  &lt;input type=&quot;text&quot; id=&quot;update_email&quot; name=&quot;update_email&quot; class=&quot;form-control&quot; maxlength=&quot;100&quot; autocomplete=&quot;off&quot; placeholder=&quot;Enter E-mail&quot;&gt;
                  &lt;div id=&quot;update_email_error_message&quot; class=&quot;text-danger&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;form-row&quot;&gt;
                  &lt;div class=&quot;form-group col-md-4&quot;&gt;
                    &lt;label&gt;Gender &lt;i class=&quot;text-danger&quot;&gt; *&lt;/i&gt;&lt;/label&gt;
                    &lt;select name=&quot;update_gender&quot; id=&quot;update_gender&quot; class=&quot;custom-select&quot;&gt;
                      &lt;option value=&quot;&quot; hidden&gt;Gender&lt;/option&gt;
                      &lt;option&gt;Male&lt;/option&gt;
                      &lt;option&gt;Female&lt;/option&gt;
                    &lt;/select&gt;
                    &lt;div id=&quot;update_gender_error_message&quot; class=&quot;text-danger&quot;&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group col-md-4&quot;&gt;
                    &lt;label&gt;Role &lt;i class=&quot;text-danger&quot;&gt; *&lt;/i&gt;&lt;/label&gt;
                    &lt;select name=&quot;update_role&quot; id=&quot;update_role&quot; class=&quot;custom-select&quot;&gt;
                      &lt;option value=&quot;&quot; hidden&gt;Role&lt;/option&gt;
                      &lt;option&gt;Admin&lt;/option&gt;
                      &lt;option&gt;User&lt;/option&gt;
                    &lt;/select&gt;
                    &lt;div id=&quot;update_role_error_message&quot; class=&quot;text-danger&quot;&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group col-md-4&quot;&gt;
                    &lt;label&gt;Status &lt;i class=&quot;text-danger&quot;&gt; *&lt;/i&gt;&lt;/label&gt;
                    &lt;select name=&quot;update_status&quot; id=&quot;update_status&quot; class=&quot;custom-select&quot;&gt;
                      &lt;option value=&quot;&quot; hidden&gt;Status&lt;/option&gt;
                      &lt;option&gt;Active&lt;/option&gt;
                      &lt;option&gt;Inactive&lt;/option&gt;
                    &lt;/select&gt;
                    &lt;div id=&quot;update_status_error_message&quot; class=&quot;text-danger&quot;&gt;&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;modal-footer&quot;&gt;
                  &lt;input type=&quot;hidden&quot; name=&quot;update_profile_id&quot; id=&quot;update_profile_id&quot;/&gt;
                  &lt;input type=&quot;submit&quot; name=&quot;button_update_profile&quot; id=&quot;button_update_profile&quot; class=&quot;btn btn-info&quot; value=&quot;Update&quot; /&gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;br&gt;
        &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;card border-info&quot;&gt;
            &lt;h5 class=&quot;card-header bg-info text-white&quot;&gt;Update User Password&lt;/h5&gt;
            &lt;div class=&quot;modal-body&quot;&gt;
              &lt;form id=&quot;user_password_form&quot;&gt;
                &lt;span id=&quot;update_password_sucess_message&quot;&gt;&lt;/span&gt;
                &lt;div id=&quot;update_password_alert_error_message&quot; class=&quot;alert alert-danger collapse&quot; role=&quot;alert&quot;&gt;&lt;i class=&quot;fas fa-exclamation-triangle&quot;&gt;&lt;/i&gt;
                  Please check in on some of the fields below.
                &lt;/div&gt;
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label for=&quot;password&quot;&gt;Password &lt;i class=&quot;text-danger&quot;&gt;*&lt;/i&gt;&lt;/label&gt;
                  &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;update_password&quot; name=&quot;update_password&quot; maxlength=&quot;50&quot; placeholder=&quot;Enter new password&quot;&gt;
                  &lt;div id=&quot;update_password_error_message&quot; class=&quot;text-danger&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label for=&quot;confirm-password&quot;&gt;Confirm Password &lt;i class=&quot;text-danger&quot;&gt;*&lt;/i&gt;&lt;/label&gt;
                  &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;update_confirm_password&quot; name=&quot;update_confirm_password&quot; maxlength=&quot;50&quot; placeholder=&quot;Enter confirm password&quot;&gt;
                  &lt;div id=&quot;update_confirm_password_error_message&quot; class=&quot;text-danger&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;modal-footer&quot;&gt;
                  &lt;input type=&quot;hidden&quot; name=&quot;update_password_id&quot; id=&quot;update_password_id&quot;/&gt;
                  &lt;input type=&quot;submit&quot; name=&quot;button_action&quot; id=&quot;update_button_action&quot; class=&quot;btn btn-info&quot; value=&quot;Update&quot; /&gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;modal-footer&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- End Update User Modal --&gt;

  &lt;!-- View User Modal--&gt;
  &lt;div class=&quot;modal fade&quot; id=&quot;readModal&quot;&gt;
    &lt;div class=&quot;modal-dialog modal-lg&quot;&gt;
      &lt;div class=&quot;modal-content&quot;&gt;
        &lt;div class=&quot;modal-header bg-info text-white&quot;&gt;
          &lt;h5 class=&quot;modal-title&quot;&gt;User Details&lt;/h5&gt;
          &lt;button class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;
            &lt;span&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;modal-body&quot;&gt;
          &lt;table class=&quot;table table-borderless&quot;&gt;
            &lt;tr&gt;
              &lt;th&gt;ID&lt;/th&gt;
              &lt;td&gt;
                &lt;div id=&quot;view_id&quot;&gt;&lt;/div&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;th&gt;Full Name&lt;/th&gt;
              &lt;td&gt;
                &lt;div id=&quot;view_full_name&quot;&gt;&lt;/div&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;th&gt;E-Mail&lt;/th&gt;
              &lt;td&gt;
                &lt;div id=&quot;view_email&quot;&gt;&lt;/div&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;th&gt;Gender&lt;/th&gt;
              &lt;td&gt;
                &lt;div id=&quot;view_gender&quot;&gt;&lt;/div&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;th&gt;Role&lt;/th&gt;
              &lt;td&gt;
                &lt;div id=&quot;view_role&quot;&gt;&lt;/div&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;th&gt;Status&lt;/th&gt;
              &lt;td&gt;
                &lt;div id=&quot;view_status&quot;&gt;&lt;/div&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;th&gt;Created by&lt;/th&gt;
              &lt;td&gt;
                &lt;div id=&quot;view_created_by&quot;&gt;&lt;/div&gt;
              &lt;/td&gt;
            &lt;/tr&gt;            
            &lt;tr&gt;
              &lt;th&gt;Created&lt;/th&gt;
              &lt;td&gt;
                &lt;div id=&quot;view_created_at&quot;&gt;&lt;/div&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;th&gt;Last updated by&lt;/th&gt;
              &lt;td&gt;
                &lt;div id=&quot;view_last_update_by&quot;&gt;&lt;/div&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;th&gt;Last updated&lt;/th&gt;
              &lt;td&gt;
                &lt;div id=&quot;view_updated_at&quot;&gt;&lt;/div&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/div&gt;
        &lt;div class=&quot;modal-footer&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- End View Expense Modal --&gt;

  &lt;!-- Footer --&gt;
&lt;?php
  include(&quot;include/footer.php&quot;);
?&gt;

&lt;script&gt;

  $(document).ready(function(){
    var datatable = $('#userTable').DataTable({
      'processing': true,
      'serverSide': true,
      'ajax': {
          url:'user_action.php',
          type: 'POST',
          data: {action:'user_fetch'}
      },
      'columns': [
          { data: 'user_id' },
          { data: 'user_full_name'},
          { data: 'user_email'},
          { data: 'user_gender'},
          { data: 'user_role'},
          { data: 'user_status'},
          { data: 'action',&quot;orderable&quot;:false}
      ]
    });

    $('#add_user').click(function(){
      $('#modal_title').text('Add User');
      $('#button_action').val('Save');
      $('#action').val('add_user');
      $('#formModal').modal('show');
      clear_field();
    });

    function clear_field() {
      $('#user_form')[0].reset();      
      $(&quot;#full_name_error_message&quot;).hide();
      $(&quot;#full_name&quot;).removeClass(&quot;is-invalid&quot;);
      $(&quot;#email_error_message&quot;).hide();
      $(&quot;#email&quot;).removeClass(&quot;is-invalid&quot;);
      $(&quot;#gender_error_message&quot;).hide();
      $(&quot;#gender&quot;).removeClass(&quot;is-invalid&quot;);
      $(&quot;#role_error_message&quot;).hide();
      $(&quot;#role&quot;).removeClass(&quot;is-invalid&quot;);
      $(&quot;#status_error_message&quot;).hide();
      $(&quot;#status&quot;).removeClass(&quot;is-invalid&quot;);
      $(&quot;#password_error_message&quot;).hide();
      $(&quot;#password&quot;).removeClass(&quot;is-invalid&quot;);
      $(&quot;#confirm_password_error_message&quot;).hide();
      $(&quot;#confirm_password&quot;).removeClass(&quot;is-invalid&quot;);
      $(&quot;#alert_error_message&quot;).hide();
    }

    function clear_update_field() {
      $('#update_profile_form')[0].reset();
      $('#user_password_form')[0].reset();
      $(&quot;#update_full_name_error_message&quot;).hide();
      $(&quot;#update_full_name&quot;).removeClass(&quot;is-invalid&quot;);
      $(&quot;#update_email_error_message&quot;).hide();
      $(&quot;#update_email&quot;).removeClass(&quot;is-invalid&quot;);
      $(&quot;#update_password_error_message&quot;).hide();
      $(&quot;#update_password&quot;).removeClass(&quot;is-invalid&quot;);
      $(&quot;#update_confirm_password_error_message&quot;).hide();
      $(&quot;#update_confirm_password&quot;).removeClass(&quot;is-invalid&quot;);
      $(&quot;#update_profile_alert_error_message&quot;).hide();
      $(&quot;#update_password_alert_error_message&quot;).hide();
    }

    $('#user_form').on('submit', function(event){
      event.preventDefault();
      addUser();
    });

    $('#update_profile_form').on('submit', function(event){
      event.preventDefault();
      updateProfile();      
    });

    $('#user_password_form').on('submit', function(event){
      event.preventDefault();
      updatePassword();
    });

    var error_full_name = false;
    var error_email = false;
    var error_gender = false;
    var error_role = false;
    var error_status = false;
    var error_password = false;
    var error_confirm_password = false;
    var error_update_full_name = false;
    var error_update_email = false;
    var error_update_gender = false;
    var error_update_role = false;
    var error_update_status = false;
    var error_update_password = false;
    var error_update_confirm_password = false;

    $(&quot;#full_name&quot;).focusout(function() {
      check_full_name();
    });

    $(&quot;#email&quot;).focusout(function() {
      check_email();
    });

    $(&quot;#gender&quot;).focusout(function() {
      check_gender();
    });

    $(&quot;#role&quot;).focusout(function() {
      check_role();
    });

    $(&quot;#status&quot;).focusout(function() {
      check_status();
    });

    $(&quot;#password&quot;).focusout(function() {
      check_password();
    });

    $(&quot;#confirm_password&quot;).focusout(function() {
      check_confirm_password();
    });

    $(&quot;#update_full_name&quot;).focusout(function() {
      check_update_full_name();
    });

    $(&quot;#update_email&quot;).focusout(function() {
      check_update_email();
    });

    $(&quot;#update_password&quot;).focusout(function() {
      check_update_password();
    });

    $(&quot;#update_confirm_password&quot;).focusout(function() {
      check_update_confirm_password();
    });

    function check_full_name() {

      if( $.trim( $('#full_name').val() ) == '' ){
        $(&quot;#full_name_error_message&quot;).html(&quot;Full name is a required field.&quot;);
        $(&quot;#full_name_error_message&quot;).show();
        $(&quot;#full_name&quot;).addClass(&quot;is-invalid&quot;);
        error_full_name = true;
      }
      else{
        $(&quot;#full_name_error_message&quot;).hide();
        $(&quot;#full_name&quot;).removeClass(&quot;is-invalid&quot;);
      }

    }

    function check_update_full_name() {

      if( $.trim( $('#update_full_name').val() ) == '' ){
        $(&quot;#update_full_name_error_message&quot;).html(&quot;Full name is a required field.&quot;);
        $(&quot;#update_full_name_error_message&quot;).show();
        $(&quot;#update_full_name&quot;).addClass(&quot;is-invalid&quot;);
        error_update_full_name = true;
      }
      else{
        $(&quot;#update_full_name_error_message&quot;).hide();
        $(&quot;#update_full_name&quot;).removeClass(&quot;is-invalid&quot;);
      }

    }

    function check_email() {
      var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);

      if ($.trim($('#email').val()) == '') {
        $(&quot;#email_error_message&quot;).html(&quot;Email is a required field.&quot;);
        $(&quot;#email_error_message&quot;).show();
        $(&quot;#email&quot;).addClass(&quot;is-invalid&quot;);
      } else if (!(pattern.test($(&quot;#email&quot;).val()))) {
        $(&quot;#email_error_message&quot;).html(&quot;Invalid email address&quot;);
        $(&quot;#email_error_message&quot;).show();
        error_email = true;
        $(&quot;#email&quot;).addClass(&quot;is-invalid&quot;);
      } else {
        $(&quot;#email_error_message&quot;).hide();
        $(&quot;#email&quot;).removeClass(&quot;is-invalid&quot;);
      }
    }

    function check_update_email() {
      var update_pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);

      if ($.trim($('#update_email').val()) == '') {
        $(&quot;#update_email_error_message&quot;).html(&quot;Email is a required field.&quot;);
        $(&quot;#update_email_error_message&quot;).show();
        $(&quot;#update_email&quot;).addClass(&quot;is-invalid&quot;);
      } else if (!(update_pattern.test($(&quot;#update_email&quot;).val()))) {
        $(&quot;#update_email_error_message&quot;).html(&quot;Invalid email address&quot;);
        $(&quot;#update_email_error_message&quot;).show();
        error_email = true;
        $(&quot;#update_email&quot;).addClass(&quot;is-invalid&quot;);
      } else {
        $(&quot;#update_email_error_message&quot;).hide();
        $(&quot;#update_email&quot;).removeClass(&quot;is-invalid&quot;);
      }
    }

    function check_status() {
      if( $.trim( $('#status').val() ) == '' ){
        $(&quot;#status_error_message&quot;).html(&quot;Status is a required field.&quot;);
        $(&quot;#status_error_message&quot;).show();
        $(&quot;#status&quot;).addClass(&quot;is-invalid&quot;);
        error_status = true;
      } else {
        $(&quot;#status_error_message&quot;).hide();
        $(&quot;#status&quot;).removeClass(&quot;is-invalid&quot;);
      }
    }

    function check_role() {
      if( $.trim( $('#role').val() ) == '' ){
        $(&quot;#role_error_message&quot;).html(&quot;Role is a required field.&quot;);
        $(&quot;#role_error_message&quot;).show();
        $(&quot;#role&quot;).addClass(&quot;is-invalid&quot;);
        error_role = true;
      } else {
        $(&quot;#role_error_message&quot;).hide();
        $(&quot;#role&quot;).removeClass(&quot;is-invalid&quot;);
      }
    }

    function check_gender() {
      if( $.trim( $('#gender').val() ) == '' ){
        $(&quot;#gender_error_message&quot;).html(&quot;Gender is a required field.&quot;);
        $(&quot;#gender_error_message&quot;).show();
        $(&quot;#gender&quot;).addClass(&quot;is-invalid&quot;);
        error_gender = true;
      } else {
        $(&quot;#gender_error_message&quot;).hide();
        $(&quot;#gender&quot;).removeClass(&quot;is-invalid&quot;);
      }
    }

    function check_password() {
      var password_length = $(&quot;#password&quot;).val().length;

      if ($.trim($('#password').val()) == '') {
        $(&quot;#password_error_message&quot;).html(&quot;Password is a required field.&quot;);
        $(&quot;#password_error_message&quot;).show();
        $(&quot;#password&quot;).addClass(&quot;is-invalid&quot;);
        error_password = true;
      } else if (password_length &lt; 8) {
        $(&quot;#password_error_message&quot;).html(&quot;Please enter at least 8 characters!&quot;);
        $(&quot;#password_error_message&quot;).show();
        error_password = true;
        $(&quot;#password&quot;).addClass(&quot;is-invalid&quot;);
      } else {
        $(&quot;#password_error_message&quot;).hide();
        $(&quot;#password&quot;).removeClass(&quot;is-invalid&quot;);
      }
    }

    function check_confirm_password() {
      var password = $(&quot;#password&quot;).val();
      var confirm_password = $(&quot;#confirm_password&quot;).val();

      if ($.trim($('#confirm_password').val()) == '') {
        $(&quot;#confirm_password_error_message&quot;).html(&quot;Confirm password is a required field.&quot;);
        $(&quot;#confirm_password_error_message&quot;).show();
        $(&quot;#confirm_password&quot;).addClass(&quot;is-invalid&quot;);
        error_confirm_password = true;
      } else if (password != confirm_password) {
        $(&quot;#confirm_password_error_message&quot;).html(&quot;Passwords do not match!&quot;);
        $(&quot;#confirm_password_error_message&quot;).show();
        error_confirm_password = true;
        $(&quot;#confirm_password&quot;).addClass(&quot;is-invalid&quot;);
      } else {
        $(&quot;#confirm_password_error_message&quot;).hide();
        $(&quot;#confirm_password&quot;).removeClass(&quot;is-invalid&quot;);
      }
    }

    function check_update_password() {
      var update_password_length = $(&quot;#update_password&quot;).val().length;

      if ($.trim($('#update_password').val()) == '') {
        $(&quot;#update_password_error_message&quot;).html(&quot;Password is a required field.&quot;);
        $(&quot;#update_password_error_message&quot;).show();
        $(&quot;#update_password&quot;).addClass(&quot;is-invalid&quot;);
        error_update_password = true;
      } else if (update_password_length &lt; 8) {
        $(&quot;#update_password_error_message&quot;).html(&quot;Please enter at least 8 characters!&quot;);
        $(&quot;#update_password_error_message&quot;).show();
        error_update_password = true;
        $(&quot;#update_password&quot;).addClass(&quot;is-invalid&quot;);
      } else {
        $(&quot;#update_password_error_message&quot;).hide();
        $(&quot;#update_password&quot;).removeClass(&quot;is-invalid&quot;);
      }
    }

    $(&quot;#update_confirm_password&quot;).focusout(function() {
      check_update_confirm_password();
    });

    function check_update_confirm_password() {
      var update_password = $(&quot;#update_password&quot;).val();
      var update_confirm_password = $(&quot;#update_confirm_password&quot;).val();

      if ($.trim($('#update_confirm_password').val()) == '') {
        $(&quot;#update_confirm_password_error_message&quot;).html(&quot;Confirm password is a required field.&quot;);
        $(&quot;#update_confirm_password_error_message&quot;).show();
        $(&quot;#update_confirm_password&quot;).addClass(&quot;is-invalid&quot;);
        error_update_confirm_password = true;
      } else if (update_password != update_confirm_password) {
        $(&quot;#update_confirm_password_error_message&quot;).html(&quot;Passwords do not match!&quot;);
        $(&quot;#update_confirm_password_error_message&quot;).show();
        error_update_confirm_password = true;
        $(&quot;#update_confirm_password&quot;).addClass(&quot;is-invalid&quot;);
      } else {
        $(&quot;#update_confirm_password_error_message&quot;).hide();
        $(&quot;#update_confirm_password&quot;).removeClass(&quot;is-invalid&quot;);
      }
    }

    function addUser(){

      error_full_name = false;
      error_email = false;
      error_gender = false;
      error_role = false;
      error_status = false;
      error_password = false;
      error_confirm_password = false;

      check_full_name();
      check_email();
      check_gender();
      check_role();
      check_status();
      check_password();
      check_confirm_password();

      if(error_full_name == false &amp;&amp; error_email == false &amp;&amp; error_gender == false &amp;&amp; error_role == false &amp;&amp; error_password == false &amp;&amp; error_confirm_password == false) {

        data=$('#user_form').serialize();
        $.ajax({
          type:&quot;POST&quot;,
          data: data,
          url:&quot;user_action.php&quot;,
          dataType:&quot;json&quot;,
          success:function(data){
            if (data.status == 'success') {
              $('#formModal').modal('hide');
              clear_field();
              datatable.ajax.reload();
              $('#sucess_message').show();
              $('#sucess_message').html('&lt;div class=&quot;alert alert-success&quot;&gt;&lt;i class=&quot;fas fa-check&quot;&gt;&lt;/i&gt;'+data.message+'&lt;/div&gt;');
              $(&quot;#alert_error_message&quot;).hide();
              setTimeout(function () {
                  $('#sucess_message').hide();
              }, 2000);
            } else if (data.status=='error') {
              $(&quot;#email_error_message&quot;).html(&quot;Email already exists&quot;);
              $(&quot;#email_error_message&quot;).show();
              $(&quot;#email&quot;).addClass(&quot;is-invalid&quot;);
            }
          },error:function(){
            alert(&quot;Oops! Something went wrong.&quot;);
          }
        });
      }else{
        $(&quot;#alert_error_message&quot;).show();
      }
    }

    $(document).on('click', '.update_user', function(){
      user_id = $(this).attr('id');
      clear_update_field();
      $('#updateUserModal').modal('show');      
      $.ajax({
        type:&quot;POST&quot;,
        data: {action:'single_fetch', user_id:user_id},
        url:&quot;user_action.php&quot;,
        dataType:&quot;json&quot;,
        success:function(data){
          $('#update_profile_id').val(data.user_id);
          $('#update_password_id').val(data.user_id);
          $('#update_full_name').val(data.user_full_name);
          $('#update_email').val(data.user_email);
          $('#update_gender').val(data.user_gender);
          $('#update_role').val(data.user_role);
          $('#update_status').val(data.user_status);
        }
      });
    });

    function updateProfile(){

      error_update_full_name = false;
      error_update_email = false;

      check_update_full_name();
      check_update_email();

      if(error_update_full_name == false &amp;&amp; error_update_email == false) {
        $.ajax({
          type:&quot;POST&quot;,
          data: $('#update_profile_form').serialize()+'&amp;action=update_user_profile',
          url:&quot;user_action.php&quot;,
          dataType:&quot;json&quot;,
          success:function(data){
            if (data.status == 'success') {
              datatable.ajax.reload();
              $('#update_profile_sucess_message').show();
              $('#update_profile_sucess_message').html('&lt;div class=&quot;alert alert-success&quot;&gt;&lt;i class=&quot;fas fa-check&quot;&gt;&lt;/i&gt;'+data.message+'&lt;/div&gt;');
              $(&quot;#update_profile_alert_error_message&quot;).hide();
              setTimeout(function () {
                  $('#update_profile_sucess_message').hide();
              }, 2000);
            } else if (data.status=='error') {
              $(&quot;#update_email_error_message&quot;).html(&quot;Email already exists.&quot;);
              $(&quot;#update_email_error_message&quot;).show();
              $(&quot;#update_email&quot;).addClass(&quot;is-invalid&quot;);
              $(&quot;#update_profile_alert_error_message&quot;).show();
            }
          },error:function(){
            alert(&quot;Oops! Something went wrong.&quot;);
          }
        });
      }else{
        $(&quot;#update_profile_alert_error_message&quot;).show();
      }
    }

    function updatePassword(){

      error_update_password = false;
      error_update_confirm_password = false;

      check_update_password();
      check_update_confirm_password();

      if(error_update_password == false &amp;&amp; error_update_confirm_password == false) {
        $.ajax({
          type:&quot;POST&quot;,
          data: $('#user_password_form').serialize()+'&amp;action=update_user_password',
          url:&quot;user_action.php&quot;,
          dataType:&quot;json&quot;,
          success:function(data){
            if (data.status == 'success') {
              $('#user_password_form')[0].reset();
              $('#update_password_sucess_message').show();
              $('#update_password_sucess_message').html('&lt;div class=&quot;alert alert-success&quot;&gt;&lt;i class=&quot;fas fa-check&quot;&gt;&lt;/i&gt;'+data.message+'&lt;/div&gt;');
              $(&quot;#update_password_alert_error_message&quot;).hide();
              setTimeout(function () {
                  $('#update_password_sucess_message').hide();
              }, 2000);
            }
          },error:function(){
            alert(&quot;Oops! Something went wrong.&quot;);
          }
        });
      }else{
        $(&quot;#update_password_alert_error_message&quot;).show();
      }
    }

    var customer_id = '';
    $(document).on('click', '.view_user', function(){
      user_id = $(this).attr('id');
      $.ajax({
        type:&quot;POST&quot;,
        data: {action:'single_fetch', user_id:user_id},
        url:&quot;user_action.php&quot;,
        dataType:&quot;json&quot;,
        success:function(data){
          $('#view_id').text(data['user_id']);
          $('#view_full_name').text(data['user_full_name']);
          $('#view_email').text(data['user_email']);
          $('#view_gender').text(data['user_gender']);
          $('#view_role').text(data['user_role']);          
          $('#view_status').text(data['user_status']);
          $('#view_created_by').text(data['user_created_by']);
          $('#view_last_update_by').text(data['user_last_update_by']);
          $('#view_created_at').text(data['user_created_at']);
          $('#view_updated_at').text(data['user_updated_at']);
        }
      });
    });
  });
&lt;/script&gt;</textarea></td></tr></table>