// "use strict";
toastr.options = {
  closeButton: false,
  debug: false,
  newestOnTop: false,
  progressBar: false,
  positionClass: "toastr-top-right",
  preventDuplicates: true,
  onclick: null,
  showDuration: "300",
  hideDuration: "1000",
  timeOut: "2000",
  extendedTimeOut: "1000",
  showEasing: "swing",
  hideEasing: "linear",
  showMethod: "fadeIn",
  hideMethod: "fadeOut",
  tapToDismiss: false,
};
let gapiLoaded = false;
let auth2;
class Index {
  signIn() {
    $("#sign_in").removeClass("btn-main").addClass("btn-secondary");
    $("#sign_in").removeAttr("onclick");

    let email = $("#email").val().trim();
    let password = $("#password").val();

    if (email.length < 1) {
      toastr.error("Please enter your email", "Error!");
    } else if (password.length < 1) {
      toastr.error("Please enter your password", "Error!");
    } else {
      $(".indicator-label").hide();
      $(".indicator-progress").show();

      dopost({
        type: "POST",
        url: api_link + "/auth/login",
        data: {
          email: email,
          password: password,
        },
        success: function (response) {
          try {
            let json = JSON.parse(response);
            if (json.statuscode == 0) {
              $(".indicator-label").show();
              $(".indicator-progress").hide();
              toastr.success("Login successful", "Success!");
              var page = json.data.userpage;

              var ret = {
                sessionid: json.data.sessionid,
                userid: json.data.userid,
              };
              window.location.href = page + "?" + serialize(ret);
            } else {
              toastr.error(json.status, "Error!");
              $(".indicator-label").show();
              $(".indicator-progress").hide();
              $("#sign_in").removeClass("btn-secondary").addClass("btn-main");
              $("#sign_in").attr("onclick", "index.signIn()");
            }
          } catch (e) {
            toastr.error(e.message, "Error!");
            $(".indicator-label").show();
            $(".indicator-progress").hide();
            $("#sign_in").removeClass("btn-secondary").addClass("btn-main");
            $("#sign_in").attr("onclick", "index.signIn()");
          }
        },
        // "error": loadingerr
      });
    }
  }

  logOutx() {
    index.blockUI("Signing out");

    dopost({
      url: api_link + "/auth/logout",
      data: {
        action: "logout",
        userid: getItem("userid"),
        sessionid: getItem("sessionid"),
      },
      type: "POST",
      success: function (response) {
        try {
          let json = JSON.parse(response);
          $.unblockUI();
          window.localStorage.clear();
          resetItems(true);
          window.location.href = "/";
        } catch (e) {
          console.log(e.message);
        }
      },
    });
  }

  logOut() {
    $("#continueBrowsing").modal("show");
  }

  verifySession() {
    index.blockUI("Verifying session");

    let password = $("#verify_password").val();
    if (password.length < 1) {
      toastr.error("Please enter your password", "Error!");
    } else {
      $("#verify_btn .indicator-label").hide();
      $("#verify_btn .indicator-progress").show();

      dopost({
        url: api_link + "/auth/confirm_session_owner",
        data: {
          userid: getItem("userid"),
          sessionid: getItem("sessionid"),
          password: password,
        },
        type: "POST",
        success: function (response) {
          try {
            let json = JSON.parse(response);
            if (json.statuscode === 0) {
              $.unblockUI();
              $("#verify_password").val("");
              $("#continueBrowsing").modal("hide");
              $("#verify_btn .indicator-label").show();
              $("#verify_btn .indicator-progress").hide();
              // window.localStorage.clear();
              // resetItems(true);
              // window.location.href = '/';
            } else {
              setTimeout(index.logOutx, 2000);
            }
          } catch (e) {
            console.log(e.message);
          }
        },
      });
    }
  }

  signOut() {
    toastr.options = {
      closeButton: true,
      debug: false,
      newestOnTop: false,
      progressBar: false,
      positionClass: "toastr-top-right",
      preventDuplicates: false,
      showDuration: "300",
      hideDuration: "1000",
      timeOut: 0,
      extendedTimeOut: 0,
      showEasing: "swing",
      hideEasing: "linear",
      showMethod: "fadeIn",
      hideMethod: "fadeOut",
      tapToDismiss: false,
    };

    toastr.info(
      `<div class="d-flex flex-wrap"> <span class="pe-1">Are you sure you want to logout? </span> <br/> <span class="mt-5 me-8 fw-bolder text-main" onclick="index.logOutx()">Yes</span> <span class="mt-5" onclick="users.clearToast();">Cancel</span> </div>`,
      "Please confirm!"
    );
  }

  resetInactivity(time) {
    let timer = null;
    $(document).ready(this.resetTimer(time));
    $(document).on("mousemove", this.resetTimer(time));
    $(document).on("keypress", this.resetTimer(time));
  }

  resetTimer(tm) {
    let timer = null;
    clearTimeout(timer);
    timer = setTimeout(index.logOut, tm);
  }

  getDashboard() {
    // index.blockUI('Loading Dashboard');
    setItem("userid", newQueryString("userid"));
    setItem("sessionid", newQueryString("sessionid"));

    setItem("user_id", getItem("userid"));

    dopost({
      url: api_link + "/auth/user",
      data: {
        userid: newQueryString("userid"),
        sessionid: newQueryString("sessionid"),
      },
      type: "POST",
      success: function (response) {
        try {
          let json = JSON.parse(response);
          if (json.statuscode == 0) {
            var department = json.data.dept;
            var sig_available = json.data.sig_available;
            var email = json.data.email;
            var first_name = json.data.first_name;
            var other_names = json.data.other_names;
            var phoneno = json.data.phoneno;
            var rank = json.data.rank;
            var role = json.data.role;
            var state = json.data.state;
            var surname = json.data.surname;
            var zone = json.data.zone;
            var unit = json.data.unit;

            setItem("department", department);
            setItem("email", email);
            setItem("firstname", first_name);
            setItem("othername", other_names);
            setItem("phoneno", phoneno);
            setItem("rank", rank);
            setItem("role", role);
            setItem("state", state);
            setItem("surname", surname);
            setItem("zone", zone);
            setItem("unit", unit);
            setItem("sig_available", sig_available);
            setItem("ximage", json.data.ximage);

            var user_name = json.data.first_name + " " + json.data.surname;
            setItem("fullname", user_name);
            $(".fullname").html(user_name);
            $(".user_department").html(index.resolveIdKey(department));
            $(".user_role").html(role);
            $(".email").html(email);
            var mnu = ubecMenuCreator(json.data.menu);
            mnu.insertAfter($("#dashboard_link"));
            config.getPendingMailsCount();
            config.getRequestsCount();
            config.getPendingMemoCount();
            index.displayNotifications();
            config.getSessionTimeoutDuration();
            // index.resetInactivity();

            var page = json.data.role;
            var loadUserDashboard = true;
            if (loadUserDashboard) {
              if (
                json.data.role == "Executive secretary" ||
                json.data.role == "Deputy executive secretary"
              ) {
                $.get("dashboards/es.html", (htmlStr) => {
                  $("#page_content").html(htmlStr);
                  setItem("role", json.data.role);
                  $("#kt_app_sidebar").addClass("bg-main-es");
                  // console.log('Executive secretary');
                });
              } else if (json.data.role == "Admin") {
                $.get("dashboards/admin.html", (htmlStr) => {
                  $("#page_content").html(htmlStr);
                  $("#kt_app_sidebar").addClass("bg-main-admin");
                  // console.log("Admin")
                });
              } else if (
                json.data.role == "Director" ||
                json.data.role == "Deputy Director" ||
                json.data.role == "Special Adviser"
              ) {
                $.get("dashboards/director.html", (htmlStr) => {
                  $("#page_content").html(htmlStr);
                  $("#kt_app_sidebar").addClass("bg-main-dir");
                  // console.log('Director');
                });
              } else if (json.data.role == "Head of unit") {
                $.get("dashboards/hou.html", (htmlStr) => {
                  $("#page_content").html(htmlStr);
                  $("#kt_app_sidebar").addClass("bg-main-hou");
                  // console.log('Head of unit');
                });
              } else if (json.data.role == "Secretary") {
                $.get("dashboards/general.html", (htmlStr) => {
                  $("#page_content").html(htmlStr);
                  $("#kt_app_sidebar").addClass("bg-main-sec");
                  // console.log('Secretary');
                });
              } else {
                $.get("dashboards/general.html", (htmlStr) => {
                  $("#page_content").html(htmlStr);
                  // console.log('General');
                  $("#kt_app_sidebar").addClass("bg-main");
                });
              }
            }

            toastr.success(
              "Your dashboard is ready",
              "Welcome " + json.data.first_name
            );
            $(".preloader").hide();
            $("#kt_app_root").addClass("d-flex").removeClass("d-none");

            $.unblockUI();

            if (json.data.cpass == 0) $("#cpassnow").modal("show");
          } else if (json.statuscode == 99) {
            $.unblockUI();
            toastr.error(json.status, "Error!");
            setTimeout(index.logOut, 2000);
          } else {
            $.unblockUI();
            toastr.error(json.status, "Error!");
          }
        } catch (e) {
          toastr.error(e.message, "Error!");
          $.unblockUI();
        }
      },
    });
  }

  goHome() {
    var ret = {
      sessionid: newQueryString("sessionid"),
      userid: newQueryString("userid"),
    };
    window.location.href = "dashboard.html?" + serialize(ret);
  }

  gotoPage(page) {
    return (window.location.href = page + ".html");
  }

  forgotPassword() {
    let email = $("#email").val();

    if (email.length < 2) {
      toastr.error("Please enter your email", "Error!");
    } else {
      $(".indicator-label").hide();
      $(".indicator-progress").show();

      dopost({
        type: "POST",
        url: api_link + "/auth/forgotpassword",
        data: {
          email: email,
        },
        success: function (response) {
          try {
            let json = JSON.parse(response);
            if (json.statuscode == 0) {
              $(".indicator-label").show();
              $(".indicator-progress").hide();
              toastr.success(
                "Please check your mail for your confirmation code to reset your password"
              );
              setTimeout(index.gotoPage, 2000, "reset_password");
            } else if (json.statuscode == 99) {
              toastr.error(json.status, "Error!");
              setTimeout(index.logOut, 2000);
            } else {
              toastr.error(json.status, "Error!");
              $(".indicator-label").show();
              $(".indicator-progress").hide();
            }
          } catch (e) {
            toastr.error(e.message, "Error!");
            $(".indicator-label").show();
            $(".indicator-progress").hide();
          }
        },
        // "error": loadingerr
      });
    }
  }

  resetPassword() {
    let email = $("#email").val();
    let password = $("#password").val();
    let cpassword = $("#cpassword").val();
    let code = $("#code").val();

    if (email.length < 2) {
      toastr.error("Please enter your email", "Error!");
    } else if (password.length < 2) {
      toastr.error("Please enter your new password", "Error!");
    } else if (password !== cpassword) {
      toastr.error(
        "Please confirm your password, passwords do not match",
        "Error!"
      );
    } else if (code.length < 2) {
      toastr.error(
        "Please enter the code that was sent to your mail",
        "Error!"
      );
    } else {
      $(".indicator-label").hide();
      $(".indicator-progress").show();

      dopost({
        type: "POST",
        url: api_link + "/auth/resetpassword",
        data: {
          email: email,
          password: password,
          confirm_password: cpassword,
          confirm_code: code,
        },
        success: function (response) {
          try {
            let json = JSON.parse(response);
            if (json.statuscode == 0) {
              $(".indicator-label").show();
              $(".indicator-progress").hide();
              toastr.success("Your password has been successfully changed");
              $(".form-control").val("");
              setTimeout(index.gotoPage, 2000, "index");
            } else if (json.statuscode == 99) {
              toastr.error(json.status, "Error!");
              setTimeout(index.logOut, 2000);
            } else {
              toastr.error(json.status, "Error!");
              $(".indicator-label").show();
              $(".indicator-progress").hide();
            }
          } catch (e) {
            toastr.error(e.message, "Error!");
            $(".indicator-label").show();
            $(".indicator-progress").hide();
          }
        },
        // "error": loadingerr
      });
    }
  }

  blockUI(message) {
    $.blockUI({
      message:
        '<div class="blockui-message d-flex align-items-center fw-bolder bg-white w-auto m-0 text-main" style="border-radius: 0.475rem; box-shadow: 0 0 50px 0 rgb(82 63 105 / 15%); color: #7e8299; padding: 0.85rem 1.75rem!important;"><span class="spinner-border text-main me-2"></span class="text-main"> ' +
        message +
        "...</div>",
      baseZ: 2000,
      css: {
        display: "flex",
        padding: "20%",
        margin: "0",
        width: "100%",
        height: "100vh",
        top: "0%",
        left: "0%",
        textAlign: "center",
        color: "#000",
        border: "0px solid #aaa",
        backgroundColor: "rgba(255,255,255,0.6)",
        cursor: "wait",
        alignItems: "center",
        justifyContent: "center",
      },
    });
  }

  signUp() {
    let email = $("#email").val();
    let password = $("#password").val();
    let cpassword = $("#cpassword").val();
    let code = $("#code").val();
    let userid = getItem("userid");
    let sessionid = getItem("sessionid");

    if (email.length < 2) {
      toastr.error("Please enter a valid email", "Error!");
    } else if (password.length < 2 || password.length < 8) {
      toastr.error(
        "Please enter a valid password with at least 8 characters",
        "Error!"
      );
    } else if (password !== cpassword) {
      toastr.error(
        "Please confirm password again, passwords do not match",
        "Error!"
      );
    } else if (code.length < 2) {
      toastr.error("Please enter a valid code", "Error!");
    } else {
      $(".indicator-label").hide();
      $(".indicator-progress").show();

      dopost({
        type: "POST",
        url: api_link + "/auth/signup",
        data: {
          userid: userid,
          sessionid: sessionid,
          email: email,
          password: password,
          confirm_password: cpassword,
          confirm_code: code,
        },
        success: function (response) {
          try {
            let json = JSON.parse(response);
            if (json.statuscode == 0) {
              $(".indicator-label").show();
              $(".indicator-progress").hide();
              toastr.success(
                "Congrats! Your account has been created successfully",
                "Success!"
              );
              $(".form-control").val("");
              setTimeout(index.gotoPage, 2000, "index");
            } else if (json.statuscode == -1) {
              toastr.error(json.status, "Error!");
              $(".indicator-label").show();
              $(".indicator-progress").hide();
            } else if (json.statuscode == 99) {
              toastr.error(json.status, "Error!");
              setTimeout(index.logOut, 2000);
            } else {
              toastr.error(json.status, "Error!");
              $(".indicator-label").show();
              $(".indicator-progress").hide();
            }
          } catch (e) {
            toastr.error(e.message, "Error!");
            $(".indicator-label").show();
            $(".indicator-progress").hide();
          }
        },
        // "error": loadingerr
      });
    }
  }

  hasBack(state, page) {
    if (state == false) {
      $(".back_button").removeClass("d-flex");
      $(".back_button").addClass("d-none");
    } else {
      $(".back_button").removeClass("d-none");
      $(".back_button").addClass("d-flex");
      $(".back_button").attr(
        "onclick",
        "showAjax('', '" + page + ".html', 'page_content')"
      );
    }
  }

  createRole() {
    let name = $("#role_name").val();
    let key = $("#role_key").val();
    let settings = $("#role_settings").val();
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");

    if (name.length < 2) {
      toastr.error("Please enter a valid role name", "Error!");
    } else if (key.length < 1) {
      toastr.error("Please enter a valid role key", "Error!");
    } else if (settings == "Select settings" || settings == "") {
      toastr.error("Please select a role setting", "Error!");
    } else {
      $(".indicator-label").hide();
      $(".indicator-progress").show();

      dopost({
        type: "POST",
        url: api_link + "/auth/add_role",
        data: {
          userid: userid,
          sessionid: sessionid,
          role_name: name,
          role_key: key,
          role_setting: settings,
        },
        success: function (response) {
          try {
            let json = JSON.parse(response);
            if (json.statuscode == 0) {
              $(".indicator-label").show();
              $(".indicator-progress").hide();
              toastr.success("Role created successfully", "Success!");
              $(".form-control").val("");
              $(".form-select").val("");
              index.getConfigRoles();
            } else if (json.statuscode == 99) {
              toastr.error(json.status, "Error!");
              setTimeout(logOut, 2000);
            } else {
              toastr.error(json.status, "Error!");
              $(".indicator-label").show();
              $(".indicator-progress").hide();
            }
          } catch (e) {
            toastr.error(e.message, "Error!");
            $(".indicator-label").show();
            $(".indicator-progress").hide();
          }
        },
        // "error": loadingerr
      });
    }
  }

  getConfigRoles() {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");
    var scount = 1;
    $("#message_indicator").hide();

    dopost({
      type: "POST",
      url: api_link + "/auth/list_roles",
      data: {
        userid: userid,
        sessionid: sessionid,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            $("#table_loader").removeClass("d-flex").addClass("d-none");
            $("#role_table").removeClass("d-none").addClass("d-table");

            if ($.fn.dataTable.isDataTable("#role_table")) {
              $("#role_table").DataTable().destroy();
            }

            var table = $("#role_table").DataTable({
              //buttons: ['copy', 'excel', 'pdf'],
              dom: "Bfrtip",
              data: json.data,

              columns: [
                {
                  title: "S/N",
                  data: scount,
                },
                {
                  title: "Role",
                  data: "role_name",
                },
                {
                  title: "Role Key",
                  data: "role_key",
                },
                {
                  title: "",
                },
              ],
              columnDefs: [
                {
                  defaultContent: "-",
                  targets: "_all",
                },
                {
                  targets: 0,
                  orderable: true,
                  searchable: true,
                  render: function (data, type, row) {
                    var retstr = `
                                                <span>${scount}</span>
                                            `;
                    scount++;
                    return retstr;
                  },
                },
                {
                  targets: -1,
                  orderable: false,
                  searchable: false,
                  render: function (data, type, row) {
                    var retstr = `
                                            <div class="text-end">
                                                <a onclick="index.deleteRole('${row.role_id}')" title="Delete ${row.role_name}" class="btn btn-sm btn-icon btn-light-danger w-30px h-30px me-2">
                                                    <span class="svg-icon svg-icon-2">
                                                        <i class="bx bx-trash fs-4"></i>
                                                    </span>
                                                </a>
                                                <a onclick="index.updateRole('${row.role_id}')" title="Update${row.role_name}" class="btn btn-sm btn-icon btn-light-success w-30px h-30px">
                                                    <span class="svg-icon svg-icon-2">
                                                        <i class="bx bxs-edit fs-4"></i>
                                                    </span>
                                                </a>
                                            </div>
                                            `;

                    return retstr;
                  },
                },
              ],
            });
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          } else {
            $("#table_loader").removeClass("d-flex").addClass("d-none");
            $("#message_indicator").show();
            $("#message_indicator > div").addClass("not_found");
            $("#indicator_message").html("No record found");
          }
        } catch (e) {
          console.error(e.message);
        }
      },
      error: loadingerr,
    });
  }

  deleteRole(role) {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");

    index.blockUI("Deleting role");

    dopost({
      type: "POST",
      url: api_link + "/auth/delete_role",
      data: {
        userid: userid,
        sessionid: sessionid,
        role_id: role,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            toastr.success(json.status, "Success!");
            index.getConfigRoles();
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          } else {
            toastr.error(json.status, "Error!");
          }
          $.unblockUI();
        } catch (e) {
          toastr.error(e.message, "Error!");
          $.unblockUI();
        }
      },
      error: loadingerr,
    });
  }

  updateRole(role) {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");

    index.blockUI("Loading details");

    dopost({
      type: "POST",
      url: api_link + "/auth/get_this_role",
      data: {
        userid: userid,
        sessionid: sessionid,
        role_id: role,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            $("#edit_role_name").val(json.data.role_name);
            $("#edit_role_key").val(json.data.role_key);
            $("#role_id").val(json.data.role_id);
            $("#edit_role_settings").val(json.data.role_setting);

            $("#configuration_title").html("Update " + json.data.role_name);

            $("#role_details").modal("toggle");
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          } else {
            toastr.error(json.status, "Error!");
          }
          $.unblockUI();
        } catch (e) {
          toastr.error(e.message, "Error!");
          $.unblockUI();
        }
      },
      error: loadingerr,
    });
  }

  getRoles(classname, cls = "") {
    index.blockUI("Loading roles");

    dopost({
      type: "POST",
      url: api_link + "/auth/list_roles",
      data: {
        userid: getItem("userid"),
        sessionid: getItem("sessionid"),
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            if (cls == 1) {
              var str = "<option value=''>Select Role</option>";
              for (var idx in json.data) {
                str +=
                  "<option value='" +
                  json.data[idx].role_id +
                  "'>" +
                  json.data[idx].role_name +
                  "</option>";
              }
              setItem("sysroles", str);
            } else {
              $("." + classname).html(
                '<option value = "">Select Role</option>'
              );
              for (var idx in json.data) {
                var option = $("<option />");
                option.text(json.data[idx].role_name);
                option.val(json.data[idx].role_id);
                $("." + classname).append(option);
              }
              $("." + classname).select2();
            }
          } else if (json.statuscode == 204) {
            $("." + classname).html('<option value="">No Role</option>');
            $("." + classname).select2();
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          }
          $.unblockUI();
        } catch (e) {
          toastr.error(e.status, "Error!");
          $.unblockUI();
        }
      },
      error: loadingerr,
    });
  }

  getAcronyms(classname, cls = "") {
    index.blockUI("Loading position acronyms");

    dopost({
      type: "POST",
      url: api_link + "/auth/list_acronyms",
      data: {
        userid: getItem("userid"),
        sessionid: getItem("sessionid"),
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            if (cls == 1) {
              var str = "<option value=''>Select Acronym</option>";
              for (var idx in json.data) {
                str +=
                  "<option value='" +
                  json.data[idx].position_acronyms_id +
                  "'>" +
                  json.data[idx].position_acronyms_name +
                  "</option>";
              }
              //setItem("sysroles", str);
            } else {
              $("." + classname).html(
                '<option value = "">Select Acronym</option>'
              );
              for (var idx in json.data) {
                var option = $("<option />");
                option.text(json.data[idx].position_acronyms_name);
                option.val(json.data[idx].position_acronyms_id);
                $("." + classname).append(option);
              }
              $("." + classname).select2();
            }
          } else if (json.statuscode == 204) {
            $("." + classname).html('<option value="">No Acronym</option>');
            $("." + classname).select2();
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          }
          $.unblockUI();
        } catch (e) {
          toastr.error(e.status, "Error!");
          $.unblockUI();
        }
      },
      error: loadingerr,
    });
  }

  doUpdateRole() {
    let name = $("#edit_role_name").val();
    let key = $("#edit_role_key").val();
    let settings = $("#edit_role_settings").val();
    let role_id = $("#role_id").val();
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");

    if (name.length < 2) {
      toastr.error("Please enter a valid role name", "Error!");
    } else if (key.length < 1) {
      toastr.error("Please enter a valid role key", "Error!");
    } else if (settings == "Select settings" || settings == "") {
      toastr.error("Please select a role setting", "Error!");
    } else {
      $(".indicator-label").hide();
      $(".indicator-progress").show();

      dopost({
        type: "POST",
        url: api_link + "/auth/update_role",
        data: {
          userid: userid,
          sessionid: sessionid,
          role_id: role_id,
          role_name: name,
          role_key: key,
          role_setting: settings,
        },
        success: function (response) {
          try {
            let json = JSON.parse(response);
            if (json.statuscode == 0) {
              $(".indicator-label").show();
              $(".indicator-progress").hide();
              toastr.success("Role created successfully", "Success!");
              $(".form-control").val("");
              $(".form-select").val("");
              index.getConfigRoles();
            } else if (json.statuscode == 99) {
              toastr.error(json.status, "Error!");
              setTimeout(logOut, 2000);
            } else {
              toastr.error(json.status, "Error!");
              $(".indicator-label").show();
              $(".indicator-progress").hide();
            }
          } catch (e) {
            toastr.error(e.message, "Error!");
            $(".indicator-label").show();
            $(".indicator-progress").hide();
          }
        },
        // "error": loadingerr
      });
    }
  }

  getFieldValues(className) {
    let values = [];

    $("." + className).each(function () {
      let type = $(this).attr("type");

      if (
        type === "checkbox" &&
        $(this).is(":checked") &&
        $(this).val() !== ""
      ) {
        values.push($(this).val());
      } else if (type !== "checkbox") {
        values.push($(this).val());
      }
    });
    values = values.filter(function (v) {
      return v !== "";
    });
    return values;
  }

  createMeetingCategory() {
    var participant = index.getFieldValues("inp");
    let title = $("#meeting_category").val();
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");

    if (title.length < 2) {
      toastr.error("Please enter a valid meeting type", "Error!");
    } else {
      $(".indicator-label").hide();
      $(".indicator-progress").show();

      dopost({
        type: "POST",
        url: api_link + "/form_config/save_meeting_type",
        data: {
          userid: userid,
          sessionid: sessionid,
          meeting_type_name: title,
          meeting_type_members: participant,
        },
        success: function (response) {
          try {
            let json = JSON.parse(response);
            if (json.statuscode == 0) {
              $(".indicator-label").show();
              $(".indicator-progress").hide();
              toastr.success("Meeting Type created successfully", "Success!");
              $(".form-control").val("");
              $("input[type=checkbox]").prop("checked", false);
              $("#customSelectBox").hide();
              $("#participant").val([]).trigger("change");

              index.getConfigMeetingTypes();
            } else if (json.statuscode == 99) {
              toastr.error(json.status, "Error!");
              setTimeout(logOut, 2000);
            } else {
              toastr.error(json.status, "Error!");
              $(".indicator-label").show();
              $(".indicator-progress").hide();
            }
          } catch (e) {
            toastr.error(e.message, "Error!");
            $(".indicator-label").show();
            $(".indicator-progress").hide();
          }
        },
        // "error": loadingerr
      });
    }
  }

  getConfigMeetingTypes() {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");
    var scount = 1;
    $("#message_indicator").hide();

    dopost({
      type: "POST",
      url: api_link + "/form_config/get_meeting_types",
      data: {
        userid: userid,
        sessionid: sessionid,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            $("#table_loader").removeClass("d-flex").addClass("d-none");
            $("#meeting_cat_table").removeClass("d-none").addClass("d-table");

            if ($.fn.dataTable.isDataTable("#meeting_cat_table")) {
              $("#meeting_cat_table").DataTable().destroy();
            }

            var table = $("#meeting_cat_table").DataTable({
              //buttons: ['copy', 'excel', 'pdf'],
              dom: "Bfrtip",
              data: json.data,

              columns: [
                {
                  title: "S/N",
                  data: scount,
                },
                {
                  title: "Meeting Type",
                  data: "meeting_type_name",
                },
                {
                  title: "Meeting Type ID",
                  data: "meeting_type_id",
                },
                {
                  title: "",
                },
              ],
              columnDefs: [
                {
                  defaultContent: "-",
                  targets: "_all",
                },
                {
                  targets: 0,
                  orderable: true,
                  searchable: true,
                  render: function (data, type, row) {
                    var retstr = `
                                                <span>${scount}</span>
                                            `;
                    scount++;
                    return retstr;
                  },
                },
                {
                  targets: -1,
                  orderable: false,
                  searchable: false,
                  render: function (data, type, row) {
                    var retstr = `
                                            <div class="text-end">
                                                <a onclick="index.deleteMeetingTypes('${row.meeting_type_id}','${row.meeting_type_name}')" title="Delete ${row.meeting_type_name}" class="btn btn-sm btn-icon btn-light-danger w-30px h-30px me-2">
                                                    <span class="svg-icon svg-icon-2">
                                                        <i class="bx bx-trash fs-4"></i>
                                                    </span>
                                                </a>
                                                <a onclick="index.viewMeetingTypes('${row.meeting_type_id}','${row.meeting_type_name}')" title="Update ${row.meeting_type_name}" class="btn btn-sm btn-icon btn-light-success w-30px h-30px">
                                                    <span class="svg-icon svg-icon-2">
                                                        <i class="bx bxs-edit fs-4"></i>
                                                    </span>
                                                </a>
                                            </div>
                                            `;

                    return retstr;
                  },
                },
              ],
            });
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          } else {
            $("#table_loader").removeClass("d-flex").addClass("d-none");
            $("#meeting_cat_table").removeClass("d-table").addClass("d-none");
            $("#message_indicator").show();
            $("#message_indicator > div").addClass("not_found");
            $("#indicator_message").html("No record found");
          }
        } catch (e) {
          console.error(e.message);
        }
      },
      error: loadingerr,
    });
  }

  getMeetingTypes(classname) {
    index.blockUI("Loading types of meetings");

    dopost({
      type: "POST",
      url: api_link + "/form_config/get_meeting_types",
      data: {
        userid: getItem("userid"),
        sessionid: getItem("sessionid"),
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);
          if (json.statuscode == 0) {
            $("." + classname).html("<option>Select Meeting Type</option>");
            $("." + classname).prepend(
              '<option value="custom_meeting">Create custom meeting</option>'
            );

            for (var idx in json.data) {
              var option = $("<option />");
              option.text(json.data[idx].meeting_type_name);
              option.val(json.data[idx].meeting_type_id);
              $("." + classname).append(option);
            }

            $("." + classname).select2();
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          }
          $.unblockUI();
        } catch (e) {
          toastr.error(e.status, "Error!");
          $.unblockUI();
        }
      },
      error: loadingerr,
    });
  }

  deleteMeetingTypes(meeting_id, meeting_title) {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");

    index.blockUI("Deleting " + meeting_title);

    dopost({
      type: "POST",
      url: api_link + "/form_config/delete_meeting_type",
      data: {
        userid: userid,
        sessionid: sessionid,
        meeting_type_id: meeting_id,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            toastr.success(meeting_title + " deleted successfully", "Success!");
            showAjax("", "admin/config_meeting_type.html", "page_content");
            // index.getConfigMeetingTypes();
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          } else {
            toastr.error(json.status, "Error!");
          }
          $.unblockUI();
        } catch (e) {
          toastr.error(e.message, "Error!");
          $.unblockUI();
        }
      },
      error: loadingerr,
    });
  }

  viewMeetingTypes(meeting_id, meeting_title) {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");
    var meeting_members = $("#edit_meeting_members").val();

    index.blockUI("Loading " + meeting_title + " details");

    dopost({
      type: "POST",
      url: api_link + "/form_config/get_this_meeting_type",
      data: {
        userid: userid,
        sessionid: sessionid,
        meeting_type_id: meeting_id,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          var members = json.data.meeting_type_members;

          if (json.statuscode == 0) {
            $("#meeting_details").modal("toggle");

            // meeting_members = json.data.meeting_type_members;

            $("#configuration_title")
              .html("Update " + meeting_title)
              .attr("meeting_id", json.data.meeting_type_id);
            $("#edit_meeting_category").val(meeting_title);

            $("#edit_custom").change(function () {
              if (this.checked) {
                $("#edit_customSelectBox").show();
              } else {
                $("#edit_customSelectBox").hide();
              }
            });

            $("#edit_all").change(function () {
              $("input[type=checkbox].edt_meet")
                .not(this)
                .prop("disabled", this.checked);
              $("input[type=checkbox].edt_meet")
                .not(this)
                .prop("checked", false);
              $("#edit_customSelectBox").hide();
              $("#edit_participant").val([]).trigger("change");
            });
            if (members.length && typeof members[0] !== "string") {
              for (var x in members) {
                $("input[type=checkbox].edt_meet").prop("checked", false);
                $("#edit_custom").prop("checked", true);
              }
            } else {
              for (var x in members) {
                $("input[type=checkbox].edt_meet").prop("checked", false);
                $("#edit_" + members[x]).prop("checked", true);
              }
            }
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          } else {
            toastr.error(json.status, "Error!");
          }
          $.unblockUI();
        } catch (e) {
          toastr.error(e.message, "Error!");
          $.unblockUI();
        }
      },
      error: loadingerr,
    });
  }

  updateMeetingCategory() {
    var participant = index.getFieldValues("edt_meet");
    let title = $("#edit_meeting_category").val();
    let meeting_id = $("#configuration_title").attr("meeting_id");
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");

    if (title.length < 2) {
      toastr.error("Please enter a valid meeting type", "Error!");
    } else {
      $("update_btn .indicator-label").hide();
      $("update_btn .indicator-progress").show();

      dopost({
        type: "POST",
        url: api_link + "/form_config/update_meeting_type",
        data: {
          userid: userid,
          sessionid: sessionid,
          meeting_type_id: meeting_id,
          meeting_type_name: title,
          meeting_type_members: participant,
        },
        success: function (response) {
          try {
            let json = JSON.parse(response);
            if (json.statuscode == 0) {
              $("update_btn .indicator-label").show();
              $("update_btn .indicator-progress").hide();
              $("#meeting_details").modal("toggle");
              toastr.success(title + " updated successfully", "Success!");
              $(".form-control").val("");
              $("input[type=checkbox]").prop("checked", false);
              $("#customSelectBox").hide();
              $("#participant").val([]).trigger("change");

              index.getConfigMeetingTypes();
            } else if (json.statuscode == 99) {
              toastr.error(json.status, "Error!");
              setTimeout(logOut, 2000);
            } else {
              toastr.error(json.status, "Error!");
              $("update_btn .indicator-label").show();
              $("update_btn .indicator-progress").hide();
            }
          } catch (e) {
            toastr.error(e.message, "Error!");
            $("update_btn .indicator-label").show();
            $("update_btn .indicator-progress").hide();
          }
        },
        // "error": loadingerr
      });
    }
  }

  listVenue() {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");
    dopost({
      type: "POST",
      url: api_link + "/form_config/listVenueConfig",
      data: {
        userid: userid,
        sessionid: sessionid,
      },
      success: function (response) {
        try {
          $.unblockUI();
          let json = JSON.parse(response);

          if (json.statuscode === 0) {
            $("#meeting_location")
              .empty()
              .html("<option>Select Venue</option>");
            $.each(json.data, function (a, b) {
              var option = $("<option />");
              option.text(b.venue);
              option.val(b.venue);
              $("#meeting_location").append(option);
            });
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(index.logOut, 2000);
          } else if (json.statuscode == 204) {
            toastr.info(json.status, "Info!");
          } else {
            toastr.error(json.status, "Error!");
          }
        } catch (e) {
          $.unblockUI();
          toastr.error(e.message);
        }
      },
      error: loadingerr,
    });
  }

  createMeeting(selectedLocationValue) {
    // var customMeetingValue = '';
    // var customVenueValue = '';

    // var meetingValue = selectedMeetingTitleValue;
    // if (selectedMeetingTitleValue === 'custom_meeting') {
    //     customMeetingValue = $('#other_meeting_type').val();
    //     meetingValue = customMeetingValue; // Update to use custom meeting title value
    //     console.log(meetingValue);
    // }

    var locationValue = selectedLocationValue;
    if (selectedLocationValue === "others") {
      customVenueValue = $("#other_venue").val();
      locationValue = customVenueValue; // Update to use custom venue value
    }

    var participant = index.getFieldValues("inp");

    let meeting_category = $("#meeting_category").val();

    let meeting_type_name = $("#meeting_title").val();
    let meeting_title = "";
    if (meeting_type_name === "custom_meeting") {
      meeting_title = meeting_category;
    } else {
      meeting_title = meeting_type_name;
    }

    let date = $("#meeting_date").val();
    let presentation_end_date = $("#presentation_end_date").val();
    let duration = $("#meeting_duration").val();
    let description = $("#meeting_description").val();
    let members = $("#meeting_additional_members").val();
    let agenda = $("#upload_status").val();
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");
    var location = locationValue;
    var start_time = $("#start_time").val();
    var end_time = $("#end_time").val();

    if (date.length < 2) {
      toastr.error("Please choose meeting date", "Error!");
    } else if (start_time.length < 2) {
      toastr.error("Please enter start time", "Error!");
    } else if (start_time.length < 2) {
      toastr.error("Please enter start time", "Error!");
    } else if (location.length < 2) {
      toastr.error("Please select a valid meeting location", "Error!");
    } else if (description.length < 2) {
      toastr.error("Please enter a valid meeting description", "Error!");
    } else if (presentation_end_date.length < 2) {
      toastr.error("Please choose presentation end date", "Error!");
    } else {
      $(".create_meeting .indicator-label").hide();
      $(".create_meeting .indicator-progress").show();

      index.blockUI("Loading...");

      dopost({
        type: "POST",
        url: api_link + "/form_config/save_meeting",
        data: {
          userid: userid,
          sessionid: sessionid,
          meeting_type_name: meeting_type_name,
          meeting_title: meeting_title,
          meeting_category: meeting_category,
          meeting_date: date,
          start_time: start_time,
          end_time: end_time,
          presentation_end_date: presentation_end_date,
          meeting_location: location,
          meeting_description: description,
          meeting_members: members,
          meeting_type_members: participant,
        },
        success: function (response) {
          try {
            $.unblockUI();
            let json = JSON.parse(response);
            if (json.statuscode == 0) {
              $(".create_meeting .indicator-label").show();
              $(".create_meeting .indicator-progress").hide();
              toastr.success("Meeting created successfully", "Success!");
              $(".form-control").val("");
              $(".form-select").val("");
              $("#doc_upload").attr("meeting_id", json.meeting_id);
              $("#meeting_form").hide();
              $("#meeting_agenda").show();
              // index.getConfigMeetings();
              index.displayNotifications();
            } else if (json.statuscode == -1) {
              toastr.error(json.status, "Error!");
              setTimeout(logOut, 2000);
            } else {
              toastr.error(json.errors, "Error!");
              $(".create_meeting .indicator-label").show();
              $(".create_meeting .indicator-progress").hide();
            }
          } catch (e) {
            toastr.error(e.message, "Error!");
            $(".create_meeting .indicator-label").show();
            $(".create_meeting .indicator-progress").hide();
            $.unblockUI();
          }
        },
        // "error": loadingerr
      });
    }
  }

  createAgenda(type) {
    if (type == "proceed") {
      $("#meeting_form").hide();
      $("#meeting_agenda").show();
    } else {
      $("#meeting_form").show();
      $("#meeting_agenda").hide();
    }
  }

  getConfigMeetings() {
    console.log("this is a dataTable");
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");
    dopost({
      type: "POST",
      url: api_link + "/form_config/get_meetings",

      data: {
        userid: userid,
        sessionid: sessionid,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);
          if (json.statuscode == 0) {
            $("#table_loader").removeClass("d-flex").addClass("d-none");
            $("#meeting_table").removeClass("d-none").addClass("d-table");
            if ($.fn.dataTable.isDataTable("#meeting_table")) {
              $("#meeting_table").DataTable().destroy();
            }

            console.log(json.data.meeting_description);
            console.log("Rendering");

            var table = $("#meeting_table").DataTable({
              //buttons: ['copy', 'excel', 'pdf'],
              dom: "lfrtip",
              data: json.data,
              columns: [
                {
                  title: "S/N",
                },

                {
                  title: "Date",
                  data: "meeting_description",
                },

                {
                  title: "Time",
                  data: "inspection.inspection_time",
                },
              ],
              columnDefs: [
                {
                  defaultContent: "-",
                  targets: "_all",
                },
                {
                  targets: 0,
                  orderable: true,
                  searchable: true,
                  render: function (data, type, row, meta) {
                    var sno = 0;
                    sno = meta.row + 1;
                    var content = sno;
                    return content;
                  },
                },
              ],
            });
          } else {
            $("#table_loader_pending").removeClass("d-flex").addClass("d-none");
            $("#load_gif_pending").addClass("not_found");
            $("#message_indicator_pending")
              .removeClass("d-none")
              .html("No record found");
          }
        } catch (e) {
          console.error(e.message);
        }
      },
      error: loadingerr,
    });
  }

  // getConfigMeetings() {
  //     var userid = getItem('userid');
  //     var sessionid = getItem('sessionid');
  //     var scount = 1;
  //     $('#message_indicator').hide();

  //     dopost({
  //         type: 'POST',
  //         url: api_link + '/form_config/get_meetings',
  //         data: {
  //             userid: userid,
  //             sessionid: sessionid,
  //         },
  //         success: function (response) {
  //             try {
  //                 let json = JSON.parse(response);

  //                 if (json.statuscode == 0) {
  //                     $('#table_loader').removeClass('d-flex').addClass('d-none');
  //                     $('#meeting_table').removeClass('d-none').addClass('d-table');

  //                     if ($.fn.dataTable.isDataTable('#meeting_table')) {
  //                         $('#meeting_table').DataTable().destroy();
  //                     }

  //                     var table = $('#meeting_table').DataTable({
  //                         //buttons: ['copy', 'excel', 'pdf'],
  //                         // dom: 'Bfrtip',
  //                         dom: 'lfrtip',
  //                         data: json.data,

  //                         columns: [
  //                             {
  //                                 title: 'Meeting',
  //                                 data: 'meeting_title',
  //                             },
  //                             {
  //                                 title: 'Meeting Date',
  //                                 data: 'meeting_date',
  //                             },
  //                             {
  //                                 title: 'Meeting Duration (in minutes)',
  //                                 data: 'meeting_duration',
  //                             },
  //                             {
  //                                 title: 'Status',
  //                                 data: 'status',
  //                             },
  //                             {
  //                                 title: '',
  //                             },
  //                         ],
  //                         columnDefs: [
  //                             {
  //                                 defaultContent: '-',
  //                                 targets: '_all',
  //                             },
  //                             {
  //                                 targets: 3,
  //                                 orderable: true,
  //                                 searchable: true,
  //                                 render: function (data, type, row) {
  //                                     var status = row.status;
  //                                     var badge_color;

  //                                     if (status == 'Started') {
  //                                         badge_color = 'badge-light-success';
  //                                     } else if (status == 'Not Started') {
  //                                         badge_color = 'badge-light-info';
  //                                     } else if (status == 'Ended') {
  //                                         badge_color = 'badge-light-danger';
  //                                     }

  //                                     var retstr = `
  //                                         <div class="badge badge-pill ${badge_color} py-4 px-6 rounded-4 text-capitalize">${status}</div>
  //                                     `;

  //                                     return retstr;
  //                                 },
  //                             },
  //                             {
  //                                 targets: -1,
  //                                 orderable: false,
  //                                 searchable: false,
  //                                 render: function (data, type, row) {
  //                                     var retstr = `
  //                                         <div class="row d-block text-end">
  //                                             <a onclick="index.deleteMeeting('${row.meeting_id}','${row.meeting_title}')" title="Delete ${row.meeting_title}" class="btn btn-sm btn-icon btn-light-danger w-30px h-30px me-2">
  //                                                 <span class="svg-icon svg-icon-2">
  //                                                     <i class="bx bx-trash fs-4"></i>
  //                                                 </span>
  //                                             </a>
  //                                             <a onclick="index.viewMeeting('${row.meeting_id}','${row.meeting_title}')" title="Update ${row.meeting_title}" class="btn btn-sm btn-icon btn-light-success w-30px h-30px me-2">
  //                                                 <span class="svg-icon svg-icon-2">
  //                                                     <i class="bx bxs-edit fs-4"></i>
  //                                                 </span>
  //                                             </a>
  //                                             <a onclick="index.doRescheduleMeeting('${row.meeting_id}','${row.meeting_title}')" title="Reschedule ${row.meeting_title}" class="btn btn-sm btn-icon btn-light-primary w-30px h-30px">
  //                                                 <span class="svg-icon svg-icon-2">
  //                                                     <i class='bx bx-refresh fs-4'></i>
  //                                                 </span>
  //                                             </a>
  //                                         </div>
  //                                         `;

  //                                     return retstr;
  //                                 },
  //                             },
  //                         ],
  //                     });
  //                 } else if (json.statuscode == 99) {
  //                     toastr.error(json.status, 'Error!');
  //                     setTimeout(logOut, 2000);
  //                 } else {
  //                     $('#table_loader').removeClass('d-flex').addClass('d-none');
  //                     $('#message_indicator').show();
  //                     $('#message_indicator > div').addClass('not_found');
  //                     $('#indicator_message').html('No record found');
  //                 }
  //             } catch (e) {
  //                 console.error(e.message);
  //             }
  //         },
  //         error: loadingerr,
  //     });
  // }

  getMeetings(classname) {
    index.blockUI("Loading meetings");

    dopost({
      type: "POST",
      url: api_link + "/form_config/list_my_meetings",
      data: {
        userid: getItem("userid"),
        sessionid: getItem("sessionid"),
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            var meeting = json.data;

            for (var x in meeting) {
              var meeting_blocks = `
                                <div class="col-lg-4 col-md-6 mb-8" onclick="index.viewThisMeeting('${meeting[x].meeting_id}','${meeting[x].meeting_title}');">    
                                    <div class="card h-100 shadow-none bg-gray-200">
                                        <div class="card-body px-7 pb-9">
                                            <div class="position-relative">
                                                <div class="img-fluid object-fit-cover w-100 rounded-4 h-200px meeting_info"></div>
                                                <div class="badge badge-pill badge-sm bg-primary-light p-3 rounded-3 text-capitalize position-absolute" style="left: 10px; top: 10px;">${meeting[x].meeting_title}</div>
                                            </div>

                                            <div class="d-md-flex justify-content-between align-items-center flex-nowrap my-6">
                                                <div>
                                                    <div class="card-title fs-7 fw-bold mb-1 text-wrap">${meeting[x].meeting_title}</div>
                                                    <div class="text-gray-400 fs-8">By <span class="fw-bold text-wrap">${meeting[x].added_by}</span></div>
                                                </div>

                                                <div>
                                                    <div class="badge badge-pill bg-white text-dark p-3 rounded-3 text-capitalize fs-8 mt-3 mt-md-0" title="Meeting Date">${meeting[x].meeting_date}</div>
                                                </div>
                                            </div>

                                            <div>
                                                <div class="badge badge-pill bg-white text-dark p-3 rounded-3 text-capitalize fs-8 mt-3 mt-md-0 mb-2" title="Meeting Time"> ${meeting[x].start_time} - ${meeting[x].end_time} </div>
                                            </div>

                                            <div class="text-gray-400 fs-7">
                                                <div class="d-flex flex-stack bg-white p-4 rounded-4 border">
                                                    
                                                    <div class="symbol symbol-40px me-4 symbol-circle">
                                                        <img src="../assets/media/misc/map.png">
                                                    </div>
                                                    <div class="d-flex align-items-center flex-row-fluid flex-wrap">
                                                        <div class="flex-grow-1">
                                                            <span class="text-muted fw-semibold d-block fs-8 text-wrap" "Meeting Venue">${meeting[x].meeting_location}</span>
                                                        </div>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            `;

              $("#meetings").append(meeting_blocks);
            }
          } else if (json.statuscode == 99) {
            setTimeout(logOut, 2000);
          } else {
            toastr.error(json.status, "Error!");
            $("#meetings").addClass("not_found");
          }
          $.unblockUI();
        } catch (e) {
          toastr.error(e.status, "Error!");
          $.unblockUI();
        }
      },
      error: loadingerr,
    });
  }

  deleteMeeting(meeting_id, meeting_title) {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");

    index.blockUI("Deleting " + meeting_title);

    dopost({
      type: "POST",
      url: api_link + "/form_config/delete_meeting",
      data: {
        userid: userid,
        sessionid: sessionid,
        meeting_id: meeting_id,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            toastr.success(meeting_title + " deleted successfully", "Success!");
            index.getConfigMeetings();
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          } else {
            toastr.error(json.status, "Error!");
          }
          $.unblockUI();
        } catch (e) {
          toastr.error(e.message, "Error!");
          $.unblockUI();
        }
      },
      error: loadingerr,
    });
  }

  doRescheduleMeeting(meeting_id, meeting_title) {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");

    index.blockUI("Rescheduling " + meeting_title);

    dopost({
      type: "POST",
      url: api_link + "/form_config/get_this_meeting",
      data: {
        userid: userid,
        sessionid: sessionid,
        meeting_id: meeting_id,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            $("#reshedule_modal").modal("show");
            $("#paypoint_name").val(json.data.meeting_date);
            $("#edit_header").html(`Rechedule ${meeting_title}`);
            $("#resheduleBtn").attr(
              "onclick",
              "index.rescheduleMeeting(" + json.data.meeting_id + ")"
            );
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          } else {
            toastr.error(json.status, "Error!");
          }
          $.unblockUI();
        } catch (e) {
          toastr.error(e.message, "Error!");
          $.unblockUI();
        }
      },
      error: loadingerr,
    });
  }

  rescheduleMeeting(meeting_id) {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");

    index.blockUI("Rescheduling...");

    dopost({
      type: "POST",
      url: api_link + "/form_config/reschedule_meeting",
      data: {
        userid: userid,
        sessionid: sessionid,
        meeting_id: meeting_id,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            toastr.success(
              meeting_title + " rescheduled successfully",
              "Success!"
            );
            index.getConfigMeetings();
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          } else {
            toastr.error(json.status, "Error!");
          }
          $.unblockUI();
        } catch (e) {
          toastr.error(e.message, "Error!");
          $.unblockUI();
        }
      },
      error: loadingerr,
    });
  }

  viewMeeting(meeting_id, meeting_title) {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");
    index.getMeetingTypes("edit_meeting_type");
    index.getUsers("edit_meeting_members");
    $("form-select").select2();

    index.blockUI("Loading " + meeting_title + " details");

    dopost({
      type: "POST",
      url: api_link + "/form_config/get_this_meeting",
      data: {
        userid: userid,
        sessionid: sessionid,
        meeting_id: meeting_id,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);
          console.log(json);

          if (json.statuscode == 0) {
            $("#edit_meeting_title").val(meeting_title);
            $("#edit_meeting_type").val(json.data.meeting_type);
            $("#edit_meeting_date").val(json.data.meeting_date);
            $("#edit_presentation_end_date").val(
              json.data.presentation_end_date
            );
            $("#edit_meeting_duration").val(json.data.meeting_duration);
            $("#edit_meeting_location").val(json.data.meeting_location);
            $("#edit_meeting_members").val(json.data.meeting_members);
            $("#edit_meeting_description").val(json.data.meeting_description);
            $("#configuration_title").attr("meeting_id", meeting_id);
            $("#configuration_title").html("Update " + json.data.meeting_title);

            $("#meeting_details").modal("toggle");
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          } else {
            toastr.error(json.status, "Error!");
          }
          $.unblockUI();
        } catch (e) {
          toastr.error(e.message, "Error!");
          $.unblockUI();
        }
      },
      error: loadingerr,
    });
  }

  updateMeeting() {
    let title = $("#edit_meeting_title").val();
    let type = $("#edit_meeting_type").val();
    let date = $("#edit_meeting_date").val();
    let presentation_end_date = $("#edit_presentation_end_date").val();
    // let duration = $('#edit_meeting_duration').val();
    let location = $("#edit_meeting_location").val();
    let description = $("#edit_meeting_description").val();
    let members = $("#edit_meeting_members option:selected").val();
    let id = $("#configuration_title").attr("meeting_id");
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");

    if (title.length < 2) {
      toastr.error("Please enter a valid meeting title", "Error!");
    } else if (type == "Select Type" || type == "") {
      toastr.error("Please select meeting type", "Error!");
    } else if (date.length < 2) {
      toastr.error("Please choose meeting date", "Error!");
    } else if (location.length < 2) {
      toastr.error("Please enter a valid meeting location", "Error!");
    } else if (description.length < 2) {
      toastr.error("Please enter a valid meeting description.", "Error!");
    } else if (members.length < 2) {
      toastr.error("Please select meeting members", "Error!");
    } else if (presentation_end_date.length < 2) {
      toastr.error("Please choose presentation end date", "Error!");
    } else {
      $(".indicator-label").hide();
      $(".indicator-progress").show();

      dopost({
        type: "POST",
        url: api_link + "/form_config/save_meeting",
        data: {
          userid: userid,
          sessionid: sessionid,
          meeting_id: id,
          meeting_title: title,
          meeting_type: type,
          meeting_date: date,
          // meeting_duration: duration,
          meeting_location: location,
          meeting_description: description,
          meeting_members: members,
          presentation_end_date: presentation_end_date,
        },
        success: function (response) {
          try {
            let json = JSON.parse(response);
            if (json.statuscode == 0) {
              $(".indicator-label").show();
              $(".indicator-progress").hide();
              toastr.success("Meeting updated successfully", "Success!");
              $(".form-control").val("");
              $(".form-select").val("");
              index.getConfigMeetings();
            } else if (json.statuscode == 99) {
              toastr.error(json.status, "Error!");
              setTimeout(logOut, 2000);
            } else {
              toastr.error(json.errors, "Error!");
              $(".indicator-label").show();
              $(".indicator-progress").hide();
            }
          } catch (e) {
            toastr.error(e.message, "Error!");
            $(".indicator-label").show();
            $(".indicator-progress").hide();
          }
        },
        // "error": loadingerr
      });
    }
  }

  viewThisMeeting(meeting_id, meeting_title) {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");
    setItem("meeting_id", meeting_id);
    showAjax("", "admin/meeting_details.html", "page_content");

    index.blockUI("Loading " + meeting_title + " details");

    dopost({
      type: "POST",
      url: api_link + "/form_config/get_this_meeting_with_document",
      data: {
        userid: userid,
        sessionid: sessionid,
        meeting_id: meeting_id,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);
          var docs = json.data.documents;
          var presentations = json.data.presentations;
          var mdocs = "";
          var mpresentations = "";
          var members = json.data.meeting_additional_members;
          var list_members = "";

          if (json.statuscode == 0) {
            var userid = getItem("userid");
            var added_by = json.data.userid;
            if (userid == added_by) {
              $(".meeting_owner").show();
            } else {
              $(".meeting_owner").hide();
            }

            if (json.data.upload_presentation != "expired") {
              $(".meeting_member").show();
            } else {
              $(".meeting_member").hide();
            }

            $("#meeting_name").html(json.data.meeting_description);
            $("#meeting_type").html(meeting_title);
            $("#created_by").html(json.data.added_by);
            $("#meeting_date").html(json.data.meeting_date);
            $("#meeting_location").html(json.data.meeting_location);
            $("#meeting_name").attr("meeting_id", meeting_id);

            if (!jQuery.isEmptyObject(docs)) {
              $.each(docs, function (x, val) {
                mdocs += `
                                    <div class="d-flex flex-stack border rounded-3 bg-gray-300 p-3 mb-5" title="View Document" onclick="docViewer('','${userid}','${val}')">
                                        <div class="symbol symbol-40px me-4 bg-light">
                                            <div class="symbol-label fw-semibold text-inverse-dark rounded-3"><i class="bx bxs-file-pdf text-danger fs-2x"></i></div>
                                        </div>
                                        <!--begin::Section-->
                                        <div class="d-flex align-items-center flex-row-fluid flex-wrap">
                                            <div class="flex-grow-1 me-2">
                                                <a href="#" class="text-gray-800 text-hover-primary fs-6 fw-bold">${x}.pdf</a>
                                                <span class="text-muted fw-semibold d-block fs-7">50 kb</span>
                                            </div>
                                        </div>
                                        <a href="#" class="btn btn-sm btn-icon bg-transparent w-30px h-30px">
                                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
                                            <span class="svg-icon svg-icon-2">
                                                <i class="bx bx-chevron-right fs-4 fw-bold"></i>
                                            </span>
                                            <!--end::Svg Icon-->
                                        </a>
                                        <!--end::Section-->
                                    </div>
                                `;
                $("#meeting_docs").append(mdocs);
              });
            }

            if (!jQuery.isEmptyObject(presentations)) {
              $("#meeting_presentations").html("");
              $.each(presentations, function (x, val) {
                mpresentations += `
                                    <div class="d-flex flex-stack border rounded-3 p-3 mb-5" title="View Document" onclick="docViewer('','${userid}','${val}')">
                                        <div class="symbol symbol-40px me-4 bg-light">
                                            <div class="symbol-label fw-semibold text-inverse-dark rounded-3"><i class="bx bxs-file-pdf text-danger fs-2x"></i></div>
                                        </div>
                                        <!--begin::Section-->
                                        <div class="d-flex align-items-center flex-row-fluid flex-wrap">
                                            <div class="flex-grow-1 me-2">
                                                <a href="#" class="text-gray-800 text-hover-primary fs-6 fw-bold">${x}.pdf</a>
                                                <span class="text-muted fw-semibold d-block fs-7">50 kb</span>
                                            </div>
                                        </div>
                                        <a href="#" class="btn btn-sm btn-icon bg-transparent w-30px h-30px">
                                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
                                            <span class="svg-icon svg-icon-2">
                                                <i class="bx bx-chevron-right fs-4 fw-bold"></i>
                                            </span>
                                            <!--end::Svg Icon-->
                                        </a>
                                        <!--end::Section-->
                                    </div>
                                `;
                $("#meeting_presentations").append(mpresentations);
              });
            }

            if (members.length > 0) {
              $("#show_members_div").show();
              // console.log(members);
              $.each(members, function (idx, value) {
                // console.log(value);
                var dept = "";
                var parts = value.split("|");
                var name = parts[0];
                var department = parts[1].toLowerCase();

                if (department == "" && department.length < 1) {
                  dept = "-";
                } else {
                  dept = index.resolveIdKey(department);
                }

                list_members += `
                                    <div class="mb-4">
                                        <div>${name}</div>
                                        <div class="text-gray-400 fs-7 text-capitalize" title="Department">${dept}</div>
                                    </div>
                                `;

                $("#show_members").html("");
                $("#show_members").append(list_members);
              });
            }
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          } else {
            toastr.error(json.status, "Error!");
          }
          $.unblockUI();
        } catch (e) {
          toastr.error(e.message, "Error!");
          $.unblockUI();
        }
      },
      error: loadingerr,
    });
  }

  fnSuccessImage_meeting = function (file, response, obj, extra = "") {
    try {
      var json = JSON.parse(response);
      if (json.statuscode == 0) {
        toastr.success("Meeting agenda added successfully", "Success!");
        obj.removeFile(file);
        $("#upload_pending").hide();
        $("#upload_done").show();
        showAjax("", "/admin/config_meeting.html", "page_content");
        // $('#upload_status').val('1');
      } else {
        toastr.error(json.status, "Error!");
      }
    } catch (e) {
      toastr.error(e.message, "Error!");
      console.log(e.message);
    }
  };

  getUsers(classname) {
    return dopost({
      url: api_link + "/admin/adminlistusers",
      data: {
        userid: getItem("userid"),
        sessionid: getItem("sessionid"),
      },
      type: "POST",
      success: function (response) {
        try {
          var json = JSON.parse(response);
          $.unblockUI();
          if (json.statuscode == 0) {
            var option = null;
            $("." + classname).html("<option value=''>Select Staff</option>");
            for (var idx in json.data) {
              option = $("<option/>");
              option.text(`${json.data[idx].name}`);
              option.val(json.data[idx].userid);
              option.attr(
                "info",
                window.btoa(JSON.stringify(json.data[idx].privileges))
              );
              $("." + classname).append(option);
            }
            $("." + classname).select2();
          } else if (json.statuscode == 204) {
            $("." + classname).html('<option value="">No Staff</option>');
            $("." + classname).select2();
          } else {
            callSweetMsg(json, appAlertTitle, "error");
          }
        } catch (e) {
          console.log(e.message);
        }
      },
    });
  }

  getManagementStaff() {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");
    var scount = 1;
    $("#message_indicator").hide();

    dopost({
      type: "POST",
      url: api_link + "/auth/list_mgtMems",
      data: {
        userid: userid,
        sessionid: sessionid,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            $("#table_loader").removeClass("d-flex").addClass("d-none");
            $("#management_table").removeClass("d-none").addClass("d-table");

            if ($.fn.dataTable.isDataTable("#management_table")) {
              $("#management_table").DataTable().destroy();
            }

            var table = $("#management_table").DataTable({
              //buttons: ['copy', 'excel', 'pdf'],
              dom: "Bfrtip",
              data: json.data,

              columns: [
                {
                  title: "Fullname",
                  data: "fullname",
                },
                {
                  title: "Role Name",
                  data: "role_name",
                },
                {
                  title: "Department",
                  data: "dept_name",
                },
                {
                  title: "",
                },
              ],
              columnDefs: [
                {
                  defaultContent: "-",
                  targets: "_all",
                },
                {
                  targets: -1,
                  orderable: false,
                  searchable: false,
                  render: function (data, type, row) {
                    var retstr = `
                                            <div class="text-end">
                                                <a onclick="index.removeFromMeetingCategory('${row.userid}','${row.fullname}')" title="Delete ${row.fullname}" class="btn btn-sm btn-icon btn-light-danger w-30px h-30px me-2">
                                                    <span class="svg-icon svg-icon-2">
                                                        <i class="bx bx-trash fs-4"></i>
                                                    </span>
                                                </a>
                                            </div>
                                            `;

                    return retstr;
                  },
                },
              ],
            });
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          } else {
            $("#table_loader").removeClass("d-flex").addClass("d-none");
            $("#message_indicator").show();
            $("#message_indicator > div").addClass("not_found");
            $("#indicator_message").html("No record found");
          }
        } catch (e) {
          console.error(e.message);
        }
      },
      error: loadingerr,
    });
  }

  removeFromMeetingCategory(user_id, user) {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");

    index.blockUI("Deleting " + user);

    dopost({
      type: "POST",
      url: api_link + "/auth/delete_mgtMems",
      data: {
        userid: userid,
        sessionid: sessionid,
        mgt_members: user_id,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            toastr.success(user + " deleted successfully", "Success!");
            index.getManagementStaff();
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          } else {
            toastr.error(json.status, "Error!");
          }
          $.unblockUI();
        } catch (e) {
          toastr.error(e.message, "Error!");
          $.unblockUI();
        }
      },
      error: loadingerr,
    });
  }

  configManagementStaff() {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");
    var count = 0;
    var checkbox = `<div class="form-check"> <input class="form-check-input" type="checkbox" id="checkAll" onclick="index.checkAll()" value="" id="flexCheckDefault" /></div>`;
    $("#message_indicator").hide();

    dopost({
      type: "POST",
      url: api_link + "/admin/adminlistusersforapproval",
      data: {
        userid: userid,
        sessionid: sessionid,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            $("#table_loader").removeClass("d-flex").addClass("d-none");
            $("#staff_table").removeClass("d-none").addClass("d-table");

            if ($.fn.dataTable.isDataTable("#staff_table")) {
              $("#staff_table").DataTable().destroy();
            }

            var table = $("#staff_table").DataTable({
              buttons: [
                "excel",
                "pdf",
                {
                  text: "Add",
                  action: function () {
                    index.addMultiple();
                  },
                },
              ],
              dom: "Bfrtip",
              data: json.data,

              columns: [
                {
                  title: checkbox,
                },
                {
                  title: "Fullname",
                  data: "fullname",
                },
                {
                  title: "Role Name",
                  data: "role_name",
                },
                {
                  title: "Department",
                  data: "dept_name",
                },
                {
                  title: "Status",
                },
              ],
              columnDefs: [
                {
                  defaultContent: "-",
                  targets: "_all",
                },
                {
                  targets: 0,
                  orderable: false,
                  searchable: false,
                  render: function (data, type, row) {
                    var status = row.isMgtMember;

                    if (status == "1") {
                      var retstr = `<div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="${row.userid}" / disabled>
                                                </div>`;
                    } else {
                      var retstr = `<div class="form-check">
                                                    <input class="form-check-input mgt_mem" type="checkbox" value="${row.userid}" id="mgt_mem_${count}" />
                                                </div>`;
                      count++;
                    }
                    return retstr;
                  },
                },
                {
                  targets: -1,
                  orderable: true,
                  searchable: true,
                  render: function (data, type, row) {
                    var status;
                    var badge_color;

                    if (row.isMgtMember == "1") {
                      badge_color = "badge-light-info";
                      status = "Unavailable";
                    } else {
                      badge_color = "badge-light-success";
                      status = "Available";
                    }

                    var retstr = `
                                            <div class="badge badge-pill ${badge_color} py-4 px-6 rounded-4 text-capitalize">${status}</div>
                                        `;

                    return retstr;
                  },
                },
              ],
            });
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          } else {
            $("#table_loader").removeClass("d-flex").addClass("d-none");
            $("#message_indicator").show();
            $("#message_indicator > div").addClass("not_found");
            $("#indicator_message").html("No record found");
          }
        } catch (e) {
          console.error(e.message);
        }
      },
      error: loadingerr,
    });
  }

  getBoardStaff() {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");
    var scount = 1;
    $("#message_indicator").hide();

    dopost({
      type: "POST",
      url: api_link + "/auth/list_boardMems",
      data: {
        userid: userid,
        sessionid: sessionid,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            $("#table_loader").removeClass("d-flex").addClass("d-none");
            $("#board_table").removeClass("d-none").addClass("d-table");

            if ($.fn.dataTable.isDataTable("#board_table")) {
              $("#board_table").DataTable().destroy();
            }

            var table = $("#board_table").DataTable({
              //buttons: ['copy', 'excel', 'pdf'],
              dom: "Bfrtip",
              data: json.data,

              columns: [
                {
                  title: "Fullname",
                  data: "fullname",
                },
                {
                  title: "Role Name",
                  data: "role_name",
                },
                {
                  title: "Department",
                  data: "dept_name",
                },
                {
                  title: "",
                },
              ],
              columnDefs: [
                {
                  defaultContent: "-",
                  targets: "_all",
                },
                {
                  targets: -1,
                  orderable: false,
                  searchable: false,
                  render: function (data, type, row) {
                    var retstr = `
                                            <div class="text-end">
                                                <a onclick="index.removeFromMeetingCategory('${row.userid}','${row.fullname}')" title="Delete ${row.fullname}" class="btn btn-sm btn-icon btn-light-danger w-30px h-30px me-2">
                                                    <span class="svg-icon svg-icon-2">
                                                        <i class="bx bx-trash fs-4"></i>
                                                    </span>
                                                </a>
                                            </div>
                                            `;

                    return retstr;
                  },
                },
              ],
            });
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          } else {
            $("#table_loader").removeClass("d-flex").addClass("d-none");
            $("#message_indicator").show();
            $("#message_indicator > div").addClass("not_found");
            $("#indicator_message").html("No record found");
          }
        } catch (e) {
          console.error(e.message);
        }
      },
      error: loadingerr,
    });
  }

  removeFromBoardCategory(user_id, user) {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");

    index.blockUI("Deleting " + user);

    dopost({
      type: "POST",
      url: api_link + "/auth/delete_boardMems",
      data: {
        userid: userid,
        sessionid: sessionid,
        mgt_members: user_id,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            toastr.success(user + " deleted successfully", "Success!");
            index.getBoardStaff();
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          } else {
            toastr.error(json.status, "Error!");
          }
          $.unblockUI();
        } catch (e) {
          toastr.error(e.message, "Error!");
          $.unblockUI();
        }
      },
      error: loadingerr,
    });
  }

  configBoardStaff() {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");
    var count = 0;
    var checkbox = `<div class="form-check"> <input class="form-check-input" type="checkbox" id="checkAll" onclick="index.checkAll()" value="" id="flexCheckDefault" /></div>`;
    $("#message_indicator").hide();

    dopost({
      type: "POST",
      url: api_link + "/admin/adminlistusersforapproval",
      data: {
        userid: userid,
        sessionid: sessionid,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            $("#table_loader").removeClass("d-flex").addClass("d-none");
            $("#staff_table").removeClass("d-none").addClass("d-table");

            if ($.fn.dataTable.isDataTable("#staff_table")) {
              $("#staff_table").DataTable().destroy();
            }

            var table = $("#staff_table").DataTable({
              buttons: [
                "excel",
                "pdf",
                {
                  text: "Add",
                  action: function () {
                    index.addMultiple();
                  },
                },
              ],
              dom: "Bfrtip",
              data: json.data,

              columns: [
                {
                  title: checkbox,
                },
                {
                  title: "Fullname",
                  data: "fullname",
                },
                {
                  title: "Role Name",
                  data: "role_name",
                },
                {
                  title: "Department",
                  data: "dept_name",
                },
                {
                  title: "Status",
                },
              ],
              columnDefs: [
                {
                  defaultContent: "-",
                  targets: "_all",
                },
                {
                  targets: 0,
                  orderable: false,
                  searchable: false,
                  render: function (data, type, row) {
                    var status = row.isBoardMember;

                    if (status == "1") {
                      var retstr = `<div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="${row.userid}" / disabled>
                                                </div>`;
                    } else {
                      var retstr = `<div class="form-check">
                                                    <input class="form-check-input mgt_mem" type="checkbox" value="${row.userid}" id="mgt_mem_${count}" />
                                                </div>`;
                      count++;
                    }
                    return retstr;
                  },
                },
                {
                  targets: -1,
                  orderable: true,
                  searchable: true,
                  render: function (data, type, row) {
                    var status;
                    var badge_color;

                    if (row.isBoardMember == "1") {
                      badge_color = "badge-light-info";
                      status = "Unavailable";
                    } else {
                      badge_color = "badge-light-success";
                      status = "Available";
                    }

                    var retstr = `
                                            <div class="badge badge-pill ${badge_color} py-4 px-6 rounded-4 text-capitalize">${status}</div>
                                        `;

                    return retstr;
                  },
                },
              ],
            });
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          } else {
            $("#table_loader").removeClass("d-flex").addClass("d-none");
            $("#message_indicator").show();
            $("#message_indicator > div").addClass("not_found");
            $("#indicator_message").html("No record found");
          }
        } catch (e) {
          console.error(e.message);
        }
      },
      error: loadingerr,
    });
  }

  checkAll() {
    if ($("#checkAll").is(":checked")) {
      $(".mgt_mem:checkbox").each(function () {
        $(this).prop("checked", true);
      });
    } else {
      $(".mgt_mem:checkbox").each(function () {
        $(this).prop("checked", false);
      });
    }
  }

  addMultiple() {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");
    var new_member = $(".form-check-input").is(":checked");

    if (new_member == false) {
      toastr.error("Please select a member to add", "Error!");
      return false;
    } else {
      index.blockUI("adding members");

      var members = [];

      var mgt_members = $(".mgt_mem:checkbox:checked")
        .map(function () {
          return $(this).val();
        })
        .toArray();

      for (var i = 0; i < mgt_members.length; i++) {
        members.push(mgt_members[i]);
      }

      dopost({
        type: "POST",
        url: api_link + "/auth/save_mgtMems",
        data: {
          userid: userid,
          sessionid: sessionid,
          mgt_members: members,
        },
        success: function (response) {
          try {
            let json = JSON.parse(response);
            $.unblockUI();
            if (json.statuscode == 0) {
              toastr.success("Members added successfully", "Success!");
              showAjax(
                "",
                "admin/config_management_meeting.html",
                "page_content"
              );
            } else if (json.statuscode == 99) {
              toastr.error(json.status, "Error!");
              setTimeout(logOut, 2000);
            } else {
              toastr.error(json.errors, "Error!");
              $(".create_meeting .indicator-label").show();
              $(".create_meeting .indicator-progress").hide();
            }
          } catch (e) {
            $.unblockUI();
            toastr.error(e.message, "Error!");
            $(".create_meeting .indicator-label").show();
            $(".create_meeting .indicator-progress").hide();
          }
          $.unblockUI();
        },
        // "error": loadingerr
      });
    }
  }

  resolveIdKey(id_key) {
    if (
      id_key === undefined ||
      id_key === null ||
      id_key === false ||
      id_key === ""
    ) {
      var name = "";
    } else {
      var name = id_key.replace(/_/g, " ");
    }
    return name;
  }

  randomColors() {
    let x = Math.floor(Math.random() * 8 + 1);
    let color = {
      0: "bg-primary",
      1: "bg-secondary",
      2: "bg-success",
      3: "bg-danger",
      4: "bg-warning",
      5: "bg-info",
      6: "bg-dark",
      7: "bg-primary",
      8: "bg-main-light",
    };
    return color[x];
  }

  randomTextColors() {
    let x = Math.floor(Math.random() * 7 + 1);
    let icon = {
      0: "text-primary",
      1: "text-success",
      2: "text-danger",
      3: "text-warning",
      4: "text-info",
      5: "text-black",
      6: "text-main",
      7: "text-info",
    };
    return icon[x];
  }

  getPageList(totalPages, page, maxLength) {
    function range(start, end) {
      return Array.from(Array(end - start + 1), (_, i) => i + start);
    }

    var sideWidth = maxLength < 9 ? 1 : 2;
    var leftWidth = (maxLength - sideWidth * 2 - 3) >> 1;
    var rightWidth = (maxLength - sideWidth * 2 - 3) >> 1;

    if (totalPages <= maxLength) {
      return range(1, totalPages);
    }

    if (page <= maxLength - sideWidth - 1 - rightWidth) {
      return range(1, maxLength - sideWidth - 1).concat(
        0,
        range(totalPages - sideWidth + 1, totalPages)
      );
    }

    if (page >= totalPages - sideWidth - 1 - rightWidth) {
      return range(1, sideWidth).concat(
        0,
        range(totalPages - sideWidth - 1 - rightWidth - leftWidth, totalPages)
      );
    }

    return range(1, sideWidth).concat(
      0,
      range(page - leftWidth, page + rightWidth),
      0,
      range(totalPages - sideWidth + 1, totalPages)
    );
  }

  listRequests(cards) {
    var numberOfItems = $("#staff_request_div .col-md-3.mb-8").length;
    var limitPerPage = parseInt(cards);
    var totalPages = Math.ceil(numberOfItems / limitPerPage);
    var paginationSize = numberOfItems; //(7)
    var currentPage;

    function showPage(whichPage) {
      if (whichPage < 1 || whichPage > totalPages) return false;

      currentPage = whichPage;

      $("#staff_request_div .col-md-3.mb-8")
        .hide()
        .slice((currentPage - 1) * limitPerPage, currentPage * limitPerPage)
        .show();

      $(".pagination li").slice(1, -1).remove();

      index
        .getPageList(totalPages, currentPage, paginationSize)
        .forEach((item) => {
          $("<li>")
            .addClass("page-item")
            .addClass(item ? "current-page" : "dots")
            .toggleClass("active", item === currentPage)
            .append(
              $("<a>")
                .addClass("page-link")
                .attr({ href: "javascript:void(0)" })
                .text(item || "...")
            )
            .insertBefore(".next-page");
        });
      $(".previous-page").toggleClass("disable", currentPage === 1);
      $(".next-page").toggleClass("disable", currentPage === totalPages);
      return true;
    }

    $(".pagination").append(
      $("<li>")
        .addClass("page-item")
        .addClass("previous-page")
        .append(
          $("<a>")
            .addClass("page-link")
            .attr({ href: "javascript:void(0)" })
            .html('<i class="bx bx-chevron-left fs-2x text-main"></i>')
        ),
      $("<li>")
        .addClass("page-item")
        .addClass("next-page")
        .append(
          $("<a>")
            .addClass("page-link")
            .attr({ href: "javascript:void(0)" })
            .html('<i class="bx bx-chevron-right fs-2x text-main"></i>')
        )
    );

    $("#staff_request_div").show();
    showPage(1);
    $(document).on(
      "click",
      ".pagination li.current-page:not(.active)",
      function () {
        return showPage(+$(this).text());
      }
    );
    $(".previous-page").on("click", function () {
      return showPage(currentPage - 1);
    });
    $(".next-page").on("click", function () {
      return showPage(currentPage + 1);
    });
  }

  showPassword(password) {
    var x = $("#" + password);
    if (x.attr("type") === "password") {
      x.attr("type", "text");
      $("#" + password)
        .siblings()
        .find("span")
        .html("Hide Password");
    } else {
      x.attr("type", "password");
      $("#" + password)
        .siblings()
        .find("span")
        .html("Show Password");
    }
  }

  updateNotification(notificationId) {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");
    var role = getItem("role");

    dopost({
      type: "POST",
      url: api_link + "/form_config/remove_my_nofication",
      data: {
        userid: userid,
        sessionid: sessionid,
        role: role,
        notification_id: notificationId,
      },
      success: function (response) {
        try {
          $.unblockUI();
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            $("#notify_container").hide();
            index.displayNotifications();
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(index.logOut, 2000);
          } else if (json.statuscode == 204) {
            toastr.info(json.status, "Info!");
          } else {
            // notifyCount.text('0');
            toastr.error(json.status, "Error!");
          }
        } catch (e) {
          $.unblockUI();
          toastr.error(e.message);
        }
      },
      error: loadingerr,
    });
  }

  removeNotification(notificationId, pageToLoad) {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");

    dopost({
      type: "POST",
      url: api_link + "/form_config/remove_my_nofication",
      data: {
        userid: userid,
        sessionid: sessionid,
        notification_id: notificationId,
      },
      success: function (response) {
        try {
          $.unblockUI();
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            // console.log(json.statuscode);
            $("#notify_container").hide();
            showAjax("", pageToLoad, "page_content");
            index.displayNotifications();
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(index.logOut, 2000);
          } else if (json.statuscode == 204) {
            toastr.info(json.status, "Info!");
          } else {
            // notifyCount.text('0');
            toastr.error(json.status, "Error!");
          }
        } catch (e) {
          $.unblockUI();
          toastr.error(e.message);
        }
      },
      error: loadingerr,
    });
  }

  displayNotifications() {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");
    var role = getItem("role");

    // Variables to store notification counts and messages
    var overdueMessages = [];
    var meetingMessages = [];
    var mailMessages = [];
    var inspectionMessages = [];

    dopost({
      type: "POST",
      url: api_link + "/form_config/count_my_meeting",
      data: {
        userid: userid,
        sessionid: sessionid,
        role: role,
        notification_type: "meeting",
      },
      success: function (response) {
        try {
          $.unblockUI();
          let json = JSON.parse(response);

          // Display notifications

          if (json.statuscode == 0) {
            var notifyCount = $("#notify_count");
            var totalCount = json.data.Total;
            var members = json.data.meeting;
            var show_notifications = "";
            var notifylist = "";
            var meetingData = "";

            if (members.length > 0) {
              $(".notify_list").html("");

              show_notifications = totalCount > 9 ? "9+" : totalCount;
              notifyCount.text(show_notifications);
              $("#meetingCount").text(totalCount);
              notifyCount
                .addClass(
                  "position-absolute top-0 start-100 translate-middle badge badge-sm badge-circle badge-danger"
                )
                .attr("title", "You have " + totalCount + " new notifications");

              for (var i = 0; i < members.length; i++) {
                var notification = members[i];
                if (
                  notification.member === "admin" &&
                  getItem("role") === "Admin"
                ) {
                  overdueMessages.push(notification);
                } else if (notification.notification_type === "meeting") {
                  meetingMessages.push(notification);
                } else if (
                  notification.notification_type ===
                  "PHYSICAL PLANNING DEPARTMENT Inspection Schedule"
                ) {
                  inspectionMessages.push(notification);
                } else {
                  mailMessages.push(notification);
                }
              }

              overdueMessages.forEach(function (overdueData) {
                if (overdueData) {
                  notifylist += `
                                        <div class="d-flex align-items-center justify-content-between w-100 border-bottom px-2 py-4" onclick="request.viewRequest('${overdueData.request}'); index.updateNotification('${overdueData.notification_id}')">
                                            <div>
                                                <span class="badge badge-light-danger badge-sm">Overdue</span>
                                            </div>
                                            <div class="d-flex justify-content-start flex-column">
                                                <span class="d-block fw-semi-bold mb-1 fs-8 text-gray-600 ps-2">Request by ${overdueData.sender} (${overdueData.request}) is <span class="fw-bold text-dark">${overdueData.expected_period_of_action}</span></span>
                                            </div>
                                        </div>
                                    `;
                }
              });

              meetingMessages.forEach(function (meetingData) {
                if (meetingData) {
                  notifylist += `
                                        <div class="d-flex align-items-center justify-content-between w-100 border-bottom px-2 py-4" id="meeting_notification_${meetingData.notification_id}" onclick="index.removeNotification('${meetingData.notification_id}', 'admin/meeting.html')">
                                            <div class="">
                                                <span class="badge badge-light-primary badge-sm">Meeting</span>
                                            </div>

                                            <div class="d-flex justify-content-start flex-column">
                                                <span class="d-block fw-semi-bold mb-1 fs-8 text-gray-600 ps-2">You have a meeting on <span class="fw-bold text-dark">${meetingData.event_date}</span></span>
                                            </div>
                                        </div>
                                    `;
                }
              });

              mailMessages.forEach(function (mailData) {
                if (mailData) {
                  notifylist += `
                                        <div class="d-flex align-items-center w-100 border-bottom px-2 py-4" id="mail_notification_${mailData.notification_id}" onclick="index.removeNotification('${mailData.notification_id}', 'admin/incoming_mails.html')">
                                            <span class="badge badge-light-success">Mail</span>
            
                                            <div class="d-flex justify-content-start flex-column">
                                                <span class="d-block fw-semi-bold mb-1 fs-8 text-gray-600">You have a new mail from <span class="fw-bold text-dark"> ${mailData.sender}</span></span>
                                            </div>
                                        </div>
                                    `;
                }
              });

              inspectionMessages.forEach(function (inspectionData) {
                if (inspectionData) {
                  notifylist += `
                                        <div class="d-flex align-items-center w-100 border-bottom px-2 py-4" id="mail_notification_${inspectionData.notification_id}" onclick="index.removeNotification('${inspectionData.notification_id}', 'pplanning/inspectors.html')">
                                            <span class="badge badge-light-warning">Inspection</span>
                                            <div class="d-flex justify-content-start flex-column">
                                                <span class="d-block fw-semi-bold mb-1 fs-8 text-gray-600"> ${inspectionData.message}</span>
                                            </div>
                                        </div>
                                    `;
                }
              });
              // Append meeting notifications to the list
              $(".notify_list").append(notifylist);
            } else {
              // No notifications
              notifyCount.text("");
              notifyCount.removeClass(
                "position-absolute top-0 start-100 translate-middle badge badge-sm badge-circle badge-danger"
              );
              notifylist = `
                                <div class="d-flex align-items-center w-100 border-bottom p-5 justify-content-center h-100">
                                    <div class="d-flex justify-content-start flex-column">
                                        <div class="d-flex flex-center min-h-150px find_notification mb-4" style="opacity: 0.4"></div>
                                        <span class="d-block fw-semi-bold mb-1 fs-8 text-gray-600">No notification at the moment</span>
                                    </div>
                                </div>
                            `;
              $(".notify_list").append(notifylist);
            }
            // $('.notify_list').html(notifylist);
            if (totalCount > 0) {
              $("#notif_desc").html(
                "You have " + totalCount + " notifications"
              );
            } else {
              $("#notif_desc").html("You have no notification");
            }
          }
        } catch (e) {
          $.unblockUI();
          toastr.error(e.message);
        }
      },
      error: loadingerr,
    });
  }

  getUserActivities() {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");
    var scount = 1;
    $("#message_indicator").hide();

    dopost({
      type: "POST",
      url: api_link + "/admin/fetch_activity_logs",
      data: {
        userid: userid,
        sessionid: sessionid,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            var activity = "";
            var activity_log = "";

            for (var x in json.data) {
              if (json.data[x].statuscode == 0) {
                // console.log("Try again to get the correct count");
                $.each(json.data[x].data, function (y, val) {
                  activity = `
                                        <div class="row mx-0 d-flex align-items-center my-5">
                                            <span class="text-gray-400 fs-6 fw-bold text-capitalize">${y.replace(
                                              /_/g,
                                              " "
                                            )}</span>
                                            <div class="row mx-0" id="period_${x}"></div>
                                        </div>
                                    `;

                  $("#all_activity").append(activity);
                  console.log(y, x);

                  // console.log("This is for " + y + ": " + val[i].action);

                  for (var i in val) {
                    console.log(i, x, val);
                    // if (i == x) {
                    // console.log(i, val[i]);
                    activity_log += `
                                                <div class="row mx-0 d-flex align-items-center my-1" id="period_log_${x}">
                
                                                    <div class="col-3">
                                                        <span class="fw-bold" id="activity_action">${
                                                          val[i].action
                                                        }</span>
                                                    </div>
                
                                                    <div class="col-4">
                                                        <span class="">
                                                            <p class="fw-bold mb-0">${
                                                              val[i].user
                                                                .first_name
                                                            } ${
                      val[i].user.surname
                    }</p> 
                                                            <span class="fw-bold fs-7 text-gray-400">${
                                                              val[i].description
                                                            }</span> 
                                                        </span>
                                                    </div>
                
                                                    <div class="col-3">
                                                        <p class="fw-bold text-capitalize mb-0">${val[
                                                          i
                                                        ].user.role.replace(
                                                          /_/g,
                                                          " "
                                                        )}</p>
                                                        <span class="fs-7 text-gray-400">${
                                                          val[i].user.email
                                                        }</span>
                                                    </div>
                
                                                    <div class="col-2 text-end">
                                                        <span class="text-gray">${moment(
                                                          val[i].time_created
                                                        ).format("llll")}</span>
                                                    </div>
                                                </div>
                                            `;
                    $("#period_" + x).html(activity_log);
                    // }
                  }

                  $("#table_loader").removeClass("d-flex").addClass("d-none");
                  $("#all_activity").removeClass("d-none").addClass("d-flex");
                });
              } else {
                $.each(json.data[x].data, function (y, val) {
                  activity = `
                                        <div class="row mx-0 d-flex align-items-center my-5">
                                            <span class="text-gray-400 fs-6 fw-bold text-capitalize">${y.replace(
                                              /_/g,
                                              " "
                                            )}</span>
                                            <div class="row mx-0" id="period_${x}">
                                                <div class="row mx-0 d-flex align-items-center my-1" id="period_log_${x}">
                                                    <div class="col-12">
                                                        <span class="fw-bold">${val}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    `;

                  $("#all_activity").append(activity);
                  console.log(y, val);

                  $("#table_loader").removeClass("d-flex").addClass("d-none");
                  $("#all_activity").removeClass("d-none").addClass("d-flex");
                });
              }
            }

            // $('#table_loader').removeClass('d-flex').addClass('d-none');
            // $('#all_activity').removeClass('d-none').addClass('d-table');

            // if ($.fn.dataTable.isDataTable('#all_activity')) {
            //     $('#all_activity').DataTable().destroy();
            // }

            // var table = $('#all_activity').DataTable({
            //     //buttons: ['copy', 'excel', 'pdf'],
            // // dom: 'Bfrtip',
            //     dom: 'lfrtip',
            //     data: json.data,

            //     columns: [
            //         {
            //             title: '',
            //             data: '',
            //         },
            //     ],
            //     columnDefs: [
            //         // {
            //         //     defaultContent: '-',
            //         //     targets: '_all',
            //         // },
            //         {
            //             targets: 0,
            //             orderable: true,
            //             searchable: true,
            //             render: function (data, type, row) {

            //                 var activity = "";

            //                 for(var x in json.data){
            //                     activity += `
            //                         <div class="row mx-0 d-flex align-items-center my-5" id="period_${x}">
            //                             <span class="text-gray-400 fs-6 fw-bold">${json.data[x]}</span>
            //                         </div>
            //                     `;
            //                 }

            //                 return activity;

            //             },
            //         }
            //     ],
            // });
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
          } else {
            $("#table_loader").removeClass("d-flex").addClass("d-none");
            $("#message_indicator").show();
            $("#message_indicator > div").addClass("not_found");
            $("#indicator_message").html("No record found");
          }
        } catch (e) {
          console.error(e.message);
        }
      },
      error: loadingerr,
    });
  }

  getSearchResults(type) {
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");
    var params = $("#search_key").val();
    var search_type = type;

    var scount = 1;
    $("#search_Table").parent().parent().hide();

    $("#message_indicator").hide();
    $("#table_loader").removeClass("d-none").addClass("d-flex");

    dopost({
      type: "POST",
      url: api_link + "/admin/search_request",
      data: {
        userid: userid,
        sessionid: sessionid,
        search_type: search_type,
        params: params,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);
          var file = "";
          var link = "";

          if (json.statuscode == 0) {
            // $('#table_loader').removeClass('d-flex').addClass('d-none');
            $("#search_count").html(
              json.status + ' for "<span class="fw-bold">' + params + '</span>"'
            );
            $("#search_count").parent().parent().removeClass("d-none");
            $("#search_Table").removeClass("d-none").addClass("d-table");
            $("#search_Table").parent().parent().show();

            switch (search_type) {
              case "request":
                if (json.statuscode == 0) {
                  if ($.fn.dataTable.isDataTable("#search_Table")) {
                    $("#search_Table").DataTable().destroy();
                  }

                  var table = $("#search_Table").DataTable({
                    dom: "lfrtip",
                    data: json.data,

                    columns: [
                      {
                        title: "",
                        render: function (data, type, row) {
                          var result = "";
                          if (row.hasOwnProperty("title")) {
                            result = `
                                                                <div class="text-capitalize" title="Title of Request">${row.title}</div>
                                                                <div class="fs-7 text-gray-400">by ${row.applicant_id.first_name} ${row.applicant_id.surname}</div>
                                                                <div class="fs-7 text-gray-400" title="Date Submitted">${row.submitted_date}</div>
                                                            `;
                            // result = `<span class="text-uppercase badge badge-sm badge-pill badge-light-success fs-9 px-4 mt-2 rounded-4">${index.resolveIdKey(row.role)}</span>`;
                          } else {
                            result = `
                                                                <div class="text-capitalize" title="Title of Request">${row.request_type}</div>
                                                                <div class="fs-7 text-gray-400">by ${row.applicant_id.first_name} ${row.applicant_id.surname}</div>
                                                                <div class="fs-7 text-gray-400" title="Date Submitted">${row.submitted_date}</div>
                                                            `;
                          }

                          return result;
                        },
                      },
                      {
                        title: "",
                        render: function (data, type, row) {
                          var dept = "";
                          dept = `
                                                            <div class="text-capitalize" title="Department">${row.dept}</div>
                                                        `;
                          return dept;
                        },
                      },
                      {
                        title: "",
                        render: function (data, type, row) {
                          var status = "";
                          status = `
                                                            <div class="text-capitalize" title="Status">${row.status}</div>
                                                        `;
                          return status;
                        },
                      },
                      {
                        title: "",
                        render: function (data, type, row) {
                          if (
                            row.hasOwnProperty("prev_steps") &&
                            row.prev_steps != ""
                          ) {
                            var status = "";
                            var indx = row.prev_steps.length;

                            status = `
                                                                <div class="text-capitalize text-end">Last updated ${moment(
                                                                  row
                                                                    .prev_steps[
                                                                    indx - 1
                                                                  ].action_date
                                                                ).format(
                                                                  "LLL"
                                                                )}</div>
                                                            `;
                          } else {
                            status = `
                                                                <div class="text-capitalize text-gray-400 text-end" title="Not Available"> N/A </div>
                                                            `;
                          }
                          return status;
                        },
                      },
                      {
                        title: "",
                      }
                    ],
                    columnDefs: [
                      {
                        defaultContent: "-",
                        targets: "_all",
                      },
                      {
                        targets: -1,
                        orderable: true,
                        searchable: true,
                        render: function (data, type, row) {
                          var retstr = `
                                                    <a href="#" class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary" onclick="config.processThisMail('${row.mail_id}', 'view', '${row.submission_id}')">
                                                        <span class="text-gray-500"> <i class="bx bx-chevron-right fs-2"> </i></span>
                                                    </a>`;
                          return retstr;
                        },
                      }
                    ],
                  });

                  $("#table_loader").removeClass("d-flex").addClass("d-none");
                  $("#search_Table").parent().parent().show();
                } else {
                  $("#table_loader").removeClass("d-flex").addClass("d-none");
                  $("#search_Table").parent().parent().hide();
                }
                break;

              case "file":
                if (json.files.length > 0) {
                  for (var idx in json.files) {
                    link = json.files[idx].filePath;
                    link = link.split(".com/");
                    link = link[1];

                    file += `
                                            <div class="col-lg-3 px-0 d-flex flex-nowrap" onclick="docViewer('','${userid}','${link}')">
                                                <div class="d-flex align-items-center ps-4">
                                                    <i class="bx bxs-file-pdf fs-2tx text-danger fw-normal"></i>
                                                </div>
            
                                                <div class="d-flex align-items-center pe-4 ps-1 fs-7">
                                                    <span>${json.files[idx].fileName}</span>
                                                </div>
                                            </div>
                                        `;
                  }

                  $("#all_files").html(file);

                  $("#table_loader").removeClass("d-flex").addClass("d-none");
                  $("#search_Table").parent().parent().show();
                } else {
                  $("#table_loader").removeClass("d-flex").addClass("d-none");
                  $("#search_Table").parent().parent().hide();
                }
                break;
            }

            $("thead").hide();
          }
        } catch (e) {
          console.error(e.message);
        }
      },
      error: loadingerr,
    });
  }

  // prevent the user from selecting past dates
  setMinDate(selector) {
    var dtToday = new Date();
    var month = dtToday.getMonth() + 1;
    var day = dtToday.getDate();
    var year = dtToday.getFullYear();
    if (month < 10) month = "0" + month.toString();
    if (day < 10) day = "0" + day.toString();
    var maxDate = year + "-" + month + "-" + day;
    $(selector).attr("min", maxDate);
  }

  getAllTables() {
    index.blockUI("Loading tables");

    dopost({
      type: "POST",
      url: api_link + "/form_config/fetch_folder_names",
      data: {
        userid: getItem("userid"),
        sessionid: getItem("sessionid"),
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);
          var folder = "";

          if (json.statuscode == 0) {
            // $('.' + classname).html('<option value="">Select Folder</option>');
            for (var idx in json.data) {
              folder += `
                                <div class="col-lg-3 mb-8 px-0 d-flex flex-nowrap" onclick="index.doSearch('search','${
                                  json.data[idx]
                                }')">
                                    <div class="d-flex align-items-center">
                                        <i class="bx bxs-folder-open display-3 text-warning"></i>
                                    </div>

                                    <div class="d-flex align-items-center text-capitalize px-5">
                                        <span>${index.resolveIdKey(
                                          json.data[idx]
                                        )}</span>
                                    </div>
                                </div>
                            `;
            }

            $("#all_folders").html(folder);

            // } else if (json.statuscode == 204) {
            //     $('.' + classname).html('<option value="">No Folder</option>');
            //     $('.' + classname).select2();
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(index.logOut, 5000);
          }
          $.unblockUI();
        } catch (e) {
          toastr.error(e.status, "Error!");
          $.unblockUI();
        }
      },
      error: loadingerr,
    });
  }

  doSearch(action, folderid) {
    setItem("folder", folderid);
    $("#selected_folder").html(
      "Search from <b class='text-capitalize'>" +
        index.resolveIdKey(folderid) +
        "</b> folder"
    );

    if (action == "search") {
      // $("#search_folder").addClass('d-block').removeClass('d-none');
      $("#search_folder").show();
      $("#select_folder").hide();
    } else {
      showAjax("", "admin/search_folders.html", "page_content");
      // $("#search_folder").hide();
      // $("#select_folder").show();
    }
  }

  createDoc() {
    if ($('#doctype').val().length < 1 || $('#titleDoc').val() == '') {
      Swal.fire({
          title: appAlertTitle,
          html: 'Please enter document name and type',
          icon: 'error',
          allowOutsideClick: false,
          customClass: { confirmButton: "btn btn-sm btn-main" },
          confirmButtonText: "Ok"
      });
      return;
    }
    index.blockUI('Creating Document...');
    let type =$('#doctype').val();
    dopost({
        url: api_link + '/util/google_doc',
        data: {
            userid: getItem('userid'),
            sessionid: getItem("sessionid"),
            title: $('#titleDoc').val(),
            type: type
        },
        type: "POST",
        success: function (response) {
            $.unblockUI();
            try {
                let json = JSON.parse(response);
                if (json.statuscode == 0) {
                    $('#newDocModal').modal('hide');
                    index.getAllDocuments('get_my_docs', 'get_my_docs');
                    let documentname = $('#titleDoc').val();
                    let row2 = {};
                    row2.doc_id = json.data;
                    console.log(row2);
                    let jsonString = JSON.stringify(row2);
                    index.fetchDoc(jsonString, documentname, type);
                }else {
                    Swal.fire({
                        title: appAlertTitle,
                        html: json.status,
                        icon: 'error',
                        allowOutsideClick: false,
                        customClass: { confirmButton: "btn btn-sm btn-main" },
                        confirmButtonText: "Ok"
                    });
                }
            } catch (e) {
                $.unblockUI();
                console.error(e)
            }
        },
    });
  }
  deleteDocument(id) {
    Swal.fire({
      icon: "warning",
      title: appAlertTitle,
      text: 'Are you sure you want to delete this document?',
      showDenyButton: true,
      showCancelButton: false,
      confirmButtonText: "Yes",
      denyButtonText: "No",
    }).then((result) => {
      if (result.isConfirmed) {
        index.blockUI('Deleting...');
        dopost({
            url: api_link + '/util/delete_doc',
            data: {
                userid: getItem('userid'),
                sessionid: getItem("sessionid"),
                doc_id: id
            },
            type: "POST",
            success: function (response) {
                $.unblockUI();
                try {
                    let json = JSON.parse(response);
                    if (json.statuscode == 0) {
                        Swal.fire({
                            title: appAlertTitle,
                            html: json.status,
                            icon: 'success',
                            allowOutsideClick: false,
                            customClass: { confirmButton: "btn btn-sm btn-main" },
                            confirmButtonText: "Ok"
                        });
                        index.getAllDocuments('get_my_docs', 'get_my_docs');
                        index.getAllDocuments('reviewer_docs', 'reviewer_docs');
                    }else {
                        Swal.fire({
                            title: appAlertTitle,
                            html: json.status,
                            icon: 'error',
                            allowOutsideClick: false,
                            customClass: { confirmButton: "btn btn-sm btn-main" },
                            confirmButtonText: "Ok"
                        });
                    }
                } catch (e) {
                    $.unblockUI();
                    console.error(e)
                }
            },
        });
      }
    });
  }
  set_treated(id) {
    Swal.fire({
      icon: "warning",
      title: appAlertTitle,
      text: 'Are you sure you want to mark as treated document?',
      showDenyButton: true,
      showCancelButton: false,
      confirmButtonText: "Yes",
      denyButtonText: "No",
    }).then((result) => {
      if (result.isConfirmed) {
        index.blockUI('Deleting...');
        dopost({
            url: api_link + '/util/set_treated',
            data: {
                userid: getItem('userid'),
                sessionid: getItem("sessionid"),
                doc_id: id
            },
            type: "POST",
            success: function (response) {
                $.unblockUI();
                try {
                    let json = JSON.parse(response);
                    if (json.statuscode == 0) {
                        Swal.fire({
                            title: appAlertTitle,
                            html: json.status,
                            icon: 'success',
                            allowOutsideClick: false,
                            customClass: { confirmButton: "btn btn-sm btn-main" },
                            confirmButtonText: "Ok"
                        });
                        $('#docModal').modal('hide');
                        index.getAllDocuments('treated_docs', 'treated_docs');
                        index.getAllDocuments('reviewer_docs', 'reviewer_docs');
                    }else {
                        Swal.fire({
                            title: appAlertTitle,
                            html: json.status,
                            icon: 'error',
                            allowOutsideClick: false,
                            customClass: { confirmButton: "btn btn-sm btn-main" },
                            confirmButtonText: "Ok"
                        });
                    }
                } catch (e) {
                    $.unblockUI();
                    console.error(e)
                }
            },
        });
      }
    });
  }

  sendDocument() {
    if ($('#staffD').val().length < 1 || $('#doccomment').val() == '') {
      Swal.fire({
          title: appAlertTitle,
          html: 'Please select users and enter your comment',
          icon: 'error',
          allowOutsideClick: false,
          customClass: { confirmButton: "btn btn-sm btn-main" },
          confirmButtonText: "Ok"
      });
      return;
    }
      index.blockUI('Sending Document...');
      let formData = new FormData();
      formData.append('userid', getItem('userid'));
      formData.append('sessionid', getItem("sessionid"));
      formData.append('doc_id', getItem('doc_id'));
      formData.append('send_to', $('#staffD').val());
      formData.append('comment', $('#doccomment').val());
      $.each(uploadedFiles, (idx, data) => {
          formData.append('file[]', data);
      })
      fetch(api_link + "/util/send_doc", {
          method: "POST",
          body: formData,
      })
        .then((response) => response.json())
        .then((json) => {
            if (json.statuscode === 0) {
                $.unblockUI()
                uploadedFiles = [];
                Swal.fire({
                    title: appAlertTitle,
                    html: json.status,
                    icon: 'success',
                    allowOutsideClick: false,
                    customClass: { confirmButton: "btn btn-sm btn-main" },
                    confirmButtonText: "Ok"
                });
            } else {
                $.unblockUI();
                Swal.fire({
                    title: appAlertTitle,
                    html: json.status,
                    icon: 'error',
                    allowOutsideClick: false,
                    customClass: { confirmButton: "btn btn-sm btn-main" },
                    confirmButtonText: "Ok"
                });
            }
        })
        .catch((error) => {
            $.unblockUI();
            console.error("Error:", error);
      });
  }

  sendToWFA() {
    if ($('#staffD').val().length < 1) {
      Swal.fire({
          title: appAlertTitle,
          html: 'Please select users',
          icon: 'error',
          allowOutsideClick: false,
          customClass: { confirmButton: "btn btn-sm btn-main" },
          confirmButtonText: "Ok"
      });
      return;
    }

    Swal.fire({
      icon: "warning",
      title: appAlertTitle,
      text: "Do you wish to send this document as a request for approval?",
      showDenyButton: true,
      showCancelButton: false,
      confirmButtonText: "Yes",
      denyButtonText: "No",
    }).then((result) => {
      if (result.isConfirmed) {
      index.blockUI('Sending Document As Request...');
      let formData = new FormData();
      formData.append('userid', getItem('userid'));
      formData.append('sessionid', getItem("sessionid"));
      formData.append('doc', getItem('doc_id'));
      formData.append('staffid[]', $('#staffD').val());
      formData.append('stafftxt[]', $('#staffD option:selected').text());
      fetch(api_link + "/form_config/submitRequest2_", {
          method: "POST",
          body: formData,
      })
        .then((response) => response.json())
        .then((json) => {
            if (json.statuscode === 0) {
                $.unblockUI()
                Swal.fire({
                    title: appAlertTitle,
                    html: json.status,
                    icon: 'success',
                    allowOutsideClick: false,
                    customClass: { confirmButton: "btn btn-sm btn-main" },
                    confirmButtonText: "Ok"
                });
            } else {
                $.unblockUI();
                Swal.fire({
                    title: appAlertTitle,
                    html: json.status,
                    icon: 'error',
                    allowOutsideClick: false,
                    customClass: { confirmButton: "btn btn-sm btn-main" },
                    confirmButtonText: "Ok"
                });
            }
        })
        .catch((error) => {
            $.unblockUI();
            console.error("Error:", error);
      });
    }
  });
  }

  fetchDoc(row, documentname, type, api = '') {
    var data = JSON.parse(row);
    index.blockUI("Loading Document");
    $('#googledoc').removeClass('col-12');
    $('#googledoc').addClass('col-9');
    $('#sider').show();
    if (api == 'reviewer_docs') {
      let frow = '';
      let type2 = '';
      let org = '';
      let row2 = {};
      let org_id = '';
      row2.doc_type = data.doc_type;
      row2.comment = data.comment;
      row2.doc_title = data.doc_title;
      if (data.files && data.files.length > 0) {
        row2.files = data.files;
        row2.gfiles = data.gfiles;
        $.each(data.files, (x, v) => {
          if (x == 0) {
            type2 = data.gfiles[0].type;
            row2.doc_id = data.gfiles[0].id;
            org_id = data.gfiles[0].id;
            let jsonString = JSON.stringify(row2).replace(/"/g, '&quot;');
            org += `<div class="notice d-flex bg-light-primary rounded border-primary border border-dashed mb-9 p-6">
                      <div class="d-flex flex-stack flex-grow-1">
                          <div class="col-12">
                              <h5 class="text-gray-900 fw-bold">Original Documents</h5>
                              <a href="#"
                                  data-docu='${jsonString}'
                                  class="notice d-flex bg-light-danger rounded border-danger border border-dashed mb-2 p-2 cursor-pointer"
                                  onclick="index.fetchDoc(this.dataset.docu, '${v}', '${type2}', 'reviewer_docs')">
                                  <div class="d-flex align-items-center">
                                      <span class="svg-icon svg-icon-2x svg-icon-primary me-4">
                                          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                              <path opacity="0.3"
                                                  d="M19 22H5C4.4 22 4 21.6 4 21V3C4 2.4 4.4 2 5 2H14L20 8V21C20 21.6 19.6 22 19 22Z"
                                                  fill="currentColor"></path>
                                              <path d="M15 8H20L14 2V7C14 7.6 14.4 8 15 8Z" fill="currentColor"></path>
                                          </svg>
                                      </span>
                                      <div class="fs-6 text-gray-700">${v}</div>
                                  </div>
                              </a>
                          </div>
                      </div>
                  </div>`
          } else {
            let name = v.split('/');
            row2.dname = v;
            if (data.gfiles[x] && data.gfiles[x].type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
              type2 = 'sheet';
              row2.doc_id = data.gfiles[x].id;
            } else if (data.gfiles[x] && data.gfiles[x].type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
              type2 = 'doc';
              row2.doc_id = data.gfiles[x].id;
            } else if (data.gfiles[x] && data.gfiles[x].type == "image/jpeg") {
              type2 = 'pdf_image'
            } else if (data.gfiles[x] && data.gfiles[x].type == "application/pdf") {
              type2 = 'pdf_image'
            }
            let jsonString = JSON.stringify(row2).replace(/"/g, '&quot;');
            frow += `<a href="#" class="notice d-flex bg-light-success rounded border-success border border-dashed mb-2 p-2 cursor-pointer" 
                    data-doc='${jsonString}'
                    onclick="index.fetchDoc(this.dataset.doc, '${name[3]}', '${type2}', 'reviewer_docs')">
                        <div class="d-flex align-items-center">
                            <span class="svg-icon svg-icon-2x svg-icon-primary me-4">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path opacity="0.3"
                                        d="M19 22H5C4.4 22 4 21.6 4 21V3C4 2.4 4.4 2 5 2H14L20 8V21C20 21.6 19.6 22 19 22Z"
                                        fill="currentColor"></path>
                                    <path d="M15 8H20L14 2V7C14 7.6 14.4 8 15 8Z" fill="currentColor"></path>
                                </svg>
                            </span>
                            <div class="fs-6 text-gray-700">${name[3]}</div>
                        </div>
                    </a>`
          }
        })
      }
      $('#sider').html(`
      <h4>Sender's Comment</h4>
                        <p class="fw-semibold text-gray-600 fs-5 senderComment"></p>
                        ${org}
                        <div class="notice d-flex bg-light-warning rounded border-warning border border-dashed mb-9 p-6">
                          <div class="d-flex flex-stack flex-grow-1">
                              <div class="col-12">
                                  <h5 class="text-gray-900 fw-bold">Attached Documents</h5>
                                  ${frow}
                              </div>
                          </div>
                        </div>
                      <button class="btn btn-light-primary btn-sm mb-10" type="button" onclick="index.set_treated('${org_id}')">Mark as Treated</button>


                      <h4>Share With Another Staff</h4>
        <div class="col-12 mb-8">
            <label for="form_name" class="fw-bolder form-label">Select User</label>
            <select multiple class="form-select" id="staffD"></select>
        </div>
        <div class="col-12 mb-8">
            <label for="form_name" class="fw-bolder form-label">Comment</label>
            <textarea class="form-control center_code inp" id="doccomment" rows="5"></textarea>
        </div>
        <button class="btn btn-light-primary btn-sm" type="button" onclick="index.sendDocument()">Share Document</button>
                        `)
      if (data.comment == 'null' || data.comment == null || data.comment == '' || !data.comment) {
        $('.senderComment').html('');
      } else {
        $('.senderComment').html(data.comment)
      }

      $('.form-select').select2();
        users.listAllStaffs2('#staffD');
        index.blockUI("Loading Document");
    } else {
      let frow = '';
      let type2 = '';
      let org = '';
      let row2 = {};
      let org_id = '';
      row2.doc_type = data.doc_type;
      row2.comment = data.comment;
      row2.doc_title = data.doc_title;
      if (data.files && data.files.length > 0) {
        row2.files = data.files;
        row2.gfiles = data.gfiles;
        $.each(data.files, (x, v) => {
          if (x == 0) {
            type2 = data.gfiles[0].type;
            row2.doc_id = data.gfiles[0].id;
            org_id = data.gfiles[0].id;
            let jsonString = JSON.stringify(row2).replace(/"/g, '&quot;');
            org += `<div class="notice d-flex bg-light-primary rounded border-primary border border-dashed mb-9 p-6">
                      <div class="d-flex flex-stack flex-grow-1">
                          <div class="col-12">
                              <h5 class="text-gray-900 fw-bold">Original Documents</h5>
                              <a href="#"
                                  data-docu='${jsonString}'
                                  class="notice d-flex bg-light-danger rounded border-danger border border-dashed mb-2 p-2 cursor-pointer"
                                  onclick="index.fetchDoc(this.dataset.docu, '${v}', '${type2}', '')">
                                  <div class="d-flex align-items-center">
                                      <span class="svg-icon svg-icon-2x svg-icon-primary me-4">
                                          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                              <path opacity="0.3"
                                                  d="M19 22H5C4.4 22 4 21.6 4 21V3C4 2.4 4.4 2 5 2H14L20 8V21C20 21.6 19.6 22 19 22Z"
                                                  fill="currentColor"></path>
                                              <path d="M15 8H20L14 2V7C14 7.6 14.4 8 15 8Z" fill="currentColor"></path>
                                          </svg>
                                      </span>
                                      <div class="fs-6 text-gray-700">${v}</div>
                                  </div>
                              </a>
                          </div>
                      </div>
                  </div>`
          } else {
            let name = v.split('/');
            row2.dname = v;
            if (data.gfiles[x] && data.gfiles[x].type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
              type2 = 'sheet';
              row2.doc_id = data.gfiles[x].id;
            } else if (data.gfiles[x] && data.gfiles[x].type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
              type2 = 'doc';
              row2.doc_id = data.gfiles[x].id;
            } else if (data.gfiles[x] && data.gfiles[x].type == "image/jpeg") {
              type2 = 'pdf_image'
            } else if (data.gfiles[x] && data.gfiles[x].type == "application/pdf") {
              type2 = 'pdf_image'
            }
            let jsonString = JSON.stringify(row2).replace(/"/g, '&quot;');
            frow += `<a href="#" class="notice d-flex bg-light-success rounded border-success border border-dashed mb-2 p-2 cursor-pointer" 
                    data-doc='${jsonString}'
                    onclick="index.fetchDoc(this.dataset.doc, '${name[3]}', '${type2}', '')">
                        <div class="d-flex align-items-center">
                            <span class="svg-icon svg-icon-2x svg-icon-primary me-4">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path opacity="0.3"
                                        d="M19 22H5C4.4 22 4 21.6 4 21V3C4 2.4 4.4 2 5 2H14L20 8V21C20 21.6 19.6 22 19 22Z"
                                        fill="currentColor"></path>
                                    <path d="M15 8H20L14 2V7C14 7.6 14.4 8 15 8Z" fill="currentColor"></path>
                                </svg>
                            </span>
                            <div class="fs-6 text-gray-700">${name[3]}</div>
                        </div>
                    </a>`
          }
        })
      }
      $('#sider').html(`<h4>Send Document</h4>
        <div class="col-12 mb-8">
            <label for="form_name" class="fw-bolder form-label">Select User</label>
            <select multiple class="form-select" id="staffD"></select>
        </div>
        <div class="col-12 mb-8">
            <label for="form_name" class="fw-bolder form-label">Attach Other Document</label>
            <input type="file" class="d-none" type="hidden" id="otherDoc" readonly>
            <button type="button" class="btn btn-sm btn-light-primary me-3 w-100" id="uploadButton">
                <span class="svg-icon svg-icon-2">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path opacity="0.3" d="M10 4H21C21.6 4 22 4.4 22 5V7H10V4Z" fill="currentColor"></path>
                        <path d="M10.4 3.60001L12 6H21C21.6 6 22 6.4 22 7V19C22 19.6 21.6 20 21 20H3C2.4 20 2 19.6 2 19V4C2 3.4 2.4 3 3 3H9.20001C9.70001 3 10.2 3.20001 10.4 3.60001ZM16 11.6L12.7 8.29999C12.3 7.89999 11.7 7.89999 11.3 8.29999L8 11.6H11V17C11 17.6 11.4 18 12 18C12.6 18 13 17.6 13 17V11.6H16Z" fill="currentColor"></path>
                        <path opacity="0.3" d="M11 11.6V17C11 17.6 11.4 18 12 18C12.6 18 13 17.6 13 17V11.6H11Z" fill="currentColor"></path>
                    </svg>
                </span>Upload File
            </button>
        </div>
        <div class="col-12 mb-8">
        ${org}
          <div class="notice d-flex bg-light-warning rounded border-warning border border-dashed mb-9 p-6">
            <div class="d-flex flex-stack flex-grow-1">
                <div class="col-12">
                    <h5 class="text-gray-900 fw-bold">Attached Documents</h5>
                    ${frow}
                </div>
            </div>
          </div>
        </div>
        <div id="doccname" class="col-12 mb-8"></div>
        <div class="col-12 mb-8">
            <label for="form_name" class="fw-bolder form-label">Comment</label>
            <textarea class="form-control center_code inp" id="doccomment" rows="5"></textarea>
        </div>
        <button class="btn btn-light-primary btn-sm" type="button" onclick="index.sendDocument()">Share Document</button>
        <button class="btn btn-light-info btn-sm" type="button" onclick="index.sendToWFA()">Send As Request</button>
        `)
        document.getElementById('otherDoc').addEventListener('change', function () {
          const files = Array.from(this.files); 
          files.forEach((file, index) => {
              const sno = uploadedFiles.length;
              uploadedFiles.push(file);
    
              const fileName = file.name;
              const div = `<div class="notice d-flex bg-light-warning rounded border-warning border border-dashed p-2" id="div${sno}">
                              <span class="svg-icon svg-icon-2x svg-icon-primary me-4">
                                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                      <path opacity="0.3" d="M19 22H5C4.4 22 4 21.6 4 21V3C4 2.4 4.4 2 5 2H14L20 8V21C20 21.6 19.6 22 19 22Z" fill="currentColor"></path>
                                      <path d="M15 8H20L14 2V7C14 7.6 14.4 8 15 8Z" fill="currentColor"></path>
                                  </svg>
                              </span>
                              <div class="d-flex flex-stack flex-grow-1">
                                  <div class="fw-semibold">
                                      <div class="fs-6 text-gray-700 senderComment">${fileName}</div>
                                  </div>
                              <i class="bi bi-x-circle-fill cursor-pointer" id="deleteFile${sno}" data-index="${sno}"></i></div>
                          </div>`;
    
              $('#doccname').append(div);
              document.getElementById(`deleteFile${sno}`).addEventListener('click', function () {
                  const index = parseInt(this.getAttribute('data-index'), 10);
                  uploadedFiles.splice(index, 1);
                  $(`#div${index}`).remove();
                  uploadedFiles.forEach((_, i) => {
                      document.getElementById(`div${i}`).id = `div${i}`;
                      const deleteBtn = document.getElementById(`deleteFile${i}`);
                      deleteBtn.id = `deleteFile${i}`;
                      deleteBtn.setAttribute('data-index', i);
                  });
              });
          });
        });
        document.getElementById('uploadButton').addEventListener('click', function () {
            document.getElementById('otherDoc').click();
        });
        $('.form-select').select2();
        users.listAllStaffs2('#staffD');
        index.blockUI("Loading Document");
    }
    setItem('doc_id', data.doc_id);
    let editUrl = '';
    if (type == 'sheet' || type == 'excel') {
      editUrl = `https://docs.google.com/spreadsheets/d/${data.doc_id}/edit`;
      $('#googledoc').html(`<iframe id="iframeDoc" src='${editUrl}' width='100%' height='100%' frameborder='0'></iframe>`);
    } else if (type == 'pdf_image') {
      docViewer2('', getItem("userid"), data.dname,'','googledoc',1)
    } else if (type == 'doc' || type == 'word') {
      editUrl = `https://docs.google.com/document/d/${data.doc_id}/edit`;
      $('#googledoc').html(`<iframe id="iframeDoc" src='${editUrl}' width='100%' height='100%' frameborder='0'></iframe>`);
    }
    $('.documentname').html(documentname);
    $('#docModal').modal('show');
    setTimeout(() => {
      $.unblockUI();
    }, 8000);
    // const iframe = document.getElementById('iframeDoc');
    // iframe.addEventListener('load', () => {
    //     $.unblockUI();
    // });
  }

  previewDoc(documentname, type, doc_id) {
    index.blockUI("Loading Document");
    $('#googledoc').removeClass('col-9');
    $('#googledoc').addClass('col-12');
    $('#sider').hide();
    let editUrl = '';
    if (type == 'sheet' || type == 'excel') {
      editUrl = `https://docs.google.com/spreadsheets/d/${doc_id}/preview`;
      $('#googledoc').html(`<iframe id="iframeDoc" src='${editUrl}' width='100%' height='100%' frameborder='0'></iframe>`);
    } else if (type == 'doc' || type == 'word') {
      editUrl = `https://docs.google.com/document/d/${doc_id}/preview`;
      $('#googledoc').html(`<iframe id="iframeDoc" src='${editUrl}' width='100%' height='100%' frameborder='0'></iframe>`);
    }
    $('.documentname').html(documentname);
    $('#docModal').modal('show');
    setTimeout(() => {
      $.unblockUI();
    }, 5000);
    
  }
  callMessage(msg, icon = "info", cancelButton = false, callback = function() {}, yes = 'Okay', no = 'Cancel') {
    swal
      .fire({
        title: appAlertTitle,
        html: msg,
        icon: icon,
        showDenyButton: cancelButton,
        allowOutsideClick: false,
        confirmButtonColor: "#009ef7",
        allowEscapeKey: false,
        confirmButtonText: yes,
        denyButtonText: no,
      })
      .then((ok) => {
        if (ok.isConfirmed) {callback()};
      });
  }

  // @collapse

  getAllDocuments(api, id) {
    this.blockUI('Loading..');
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");
    var scount = 1;

    dopost({
      type: "POST",
      url: api_link + "/util/" + api,
      data: {
        userid: userid,
        sessionid: sessionid,
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            $("#table_loader").removeClass("d-flex").addClass("d-none");
            $("#"+id).removeClass("d-none").addClass("d-table");

            if ($.fn.dataTable.isDataTable("#"+id)) {
              $("#"+id).DataTable().destroy();
            }

            var table = $("#"+id).DataTable({
              //buttons: ['copy', 'excel', 'pdf'],
              dom: "Bfrtip",
              data: json.status.reverse(),

              columns: [
                { title: "S/N"},
                { title: "Document Name", data: "doc_title"},
                {
                  title: "Document Type",
                  data: "doc_type",
                },
                {
                  title: "Date Created",
                  data: "",
                },
                {
                  title: "",
                },
              ],
              columnDefs: [
                {
                  defaultContent: "-",
                  targets: "_all",
                },
                {
                  targets: 0,
                  orderable: true,
                  searchable: true,
                  render: function (data, type, row) {
                    var retstr = `
                                                <span>${scount}</span>
                                            `;
                    scount++;
                    return retstr;
                  },
                },
                {
                  targets: 3,
                  orderable: true,
                  searchable: true,
                  render: function (data, type, row) {
                    var retstr = moment(row.created_at * 1000).format("llll");
                    return retstr;
                  }
                },
                {
                  targets: -1,
                  orderable: false,
                  searchable: false,
                  render: function (data, type, row) {
                    let jsonString = JSON.stringify(row).replace(/'/g, "\\'").replace(/"/g, '&quot;');
                    var retstr1 = `<div class="text-end">
                                      <a onclick="index.deleteDocument('${row.doc_id}')" title="Delete ${row.doc_title}" class="btn btn-sm btn-icon btn-light-danger w-30px h-30px me-2">
                                          <span class="svg-icon svg-icon-2">
                                              <i class="bx bx-trash fs-4"></i>
                                          </span>
                                      </a>
                                      <a onclick="index.fetchDoc('${jsonString}','${row.doc_title}', '${row.doc_type}', '${api}')" title="View ${row.doc_title}" class="btn btn-sm btn-icon btn-light-success w-30px h-30px">
                                          <span class="svg-icon svg-icon-2">
                                              <i class="bx bxs-edit fs-4"></i>
                                          </span>
                                      </a>
                                  </div>
                                  `;
                    var retstr2 = `<div class="text-end">
                                      <a onclick="index.fetchDoc('${jsonString}','${row.doc_title}', '${row.doc_type}', '${api}')" title="View ${row.doc_title}" class="btn btn-sm btn-icon btn-light-success w-30px h-30px">
                                          <span class="svg-icon svg-icon-2">
                                              <i class="bx bxs-edit fs-4"></i>
                                          </span>
                                      </a>
                                  </div>
                                  `;
                    var retstr3 = `<div class="text-end">
                                        <a onclick="index.previewDoc('${row.doc_title}', '${row.doc_type}', '${row.doc_id}')" title="View ${row.doc_title}" class="btn btn-sm btn-icon btn-light-success w-30px h-30px">
                                            <span class="svg-icon svg-icon-2">
                                                <i class="bi bi-eye fs-4"></i>
                                            </span>
                                        </a>
                                    </div>
                                    `;
                    if (api == 'reviewer_docs') {
                      return retstr2;
                    } else if( api == 'treated_docs') {
                      return retstr3;
                    } else {
                      return retstr1;
                    }
                    
                  },
                },
              ],
            });
            $.unblockUI()
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
            $.unblockUI()
          } else {
            $("#table_loader").removeClass("d-flex").addClass("d-none");
            $("#"+id).removeClass("d-table").addClass("d-none");
            $("#message_indicator").show();
            $("#message_indicator > div").addClass("not_found");
            $("#indicator_message").html("No record found");
            $.unblockUI()
          }
        } catch (e) {
          console.error(e.message);
          $.unblockUI()
        }
      },
      error: loadingerr,
    });
  }

  get_all_applications(id) {
    this.blockUI('Loading..');
    var userid = getItem("userid");
    var sessionid = getItem("sessionid");
    var scount = 1;

    dopost({
      type: "POST",
      url: api_link + "/form_config/get_all_applications",
      data: {
        userid: userid,
        sessionid: sessionid,
        submission_id: $('#sub_id').val()
      },
      success: function (response) {
        try {
          let json = JSON.parse(response);

          if (json.statuscode == 0) {
            $("#"+id).removeClass("d-none").addClass("d-table");

            if ($.fn.dataTable.isDataTable("#"+id)) {
              $("#"+id).DataTable().destroy();
            }

            var table = $("#"+id).DataTable({
              //buttons: ['copy', 'excel', 'pdf'],
              responsive: true,
              searching: true,
              dom: "Bfrtip",
              data: json.data.reverse(),

              columns: [
                {title: "S/N", data: ''},
                {title: "Applicant", data: ""},
                {title: "Submission ID", data: "submission_id"},
                {title: "Application Name", data: "application_name"},
                {title: "Approval Chain", data: ""},
                {title: "Status", data: "status"},
                {title: "Submitted Date", data: ""},
                {title: "Current Action", data: ""},
                {title: "Previous Step", data: ""},
                // {title: "Action"},
              ],
              columnDefs: [
                {
                  defaultContent: "-",
                  targets: "_all",
                },
                {
                  targets: 0,
                  orderable: true,
                  searchable: true,
                  class: "sn-table",
                  render: function (data, type, row) {
                    var retstr = `<span>${scount}</span>`;
                    scount++;
                    return retstr;
                  },
                },
                {
                  targets: 1,
                  orderable: true,
                  searchable: true,
                  class: 'applicant_name_table',
                  render: function (data, type, row) {
                    return row.applicant_name
                  }
                },
                {
                  targets: 3,
                  orderable: true,
                  searchable: true,
                  class: 'application_name_table',
                  render: function (data, type, row) {
                    return row.application_name
                  }
                },
                {
                  targets: 4,
                  orderable: true,
                  searchable: true,
                  class: 'approval_chain_table',
                  render: function (data, type, row) {
                    if (row.approval_chain){
                      return JSON.stringify(row.approval_chain, null, 2);
                    } else {
                      return 'N/A';
                    }
                  }
                },
                {
                  targets: 5,
                  orderable: true,
                  searchable: true,
                  render: function (data, type, row) {
                    let status = row.status;
                    var retstr;
                    if (status == 'approved') {
                      retstr = `<span class="badge py-3 px-4 fs-7 badge-light-success">Approved</span>`;
                    } else if (status == 'declined') {
                      retstr = `<span class="badge py-3 px-4 fs-7 badge-light-danger">Declined</span>`;
                    } else {
                      retstr = `<span class="badge py-3 px-4 fs-7 badge-light-primary">${status}</span>`;
                    }
                    return retstr;
                  }
                },
                {
                  targets: 6,
                  orderable: true,
                  searchable: true,
                  class: "submitted_date_table",
                  render: function (data, type, row) {
                    return row.submitted_date
                  }
                },
                {
                  targets: 7,
                  orderable: true,
                  searchable: true,
                  render: function (data, type, row) {
                    function capitalized_Each_word(sentence) {
                      if (!sentence || sentence == '') return '-';
                      return sentence.split(' ').map(word => {
                          return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
                      }).join(' ');
                    }
                    
                    if (Array.isArray(row.current_action)) {
                      row.current_action = Object.fromEntries(row.current_action.map((value, index) => [index, value]));
                    }
                    if (Array.isArray(row.approval_chain)) {
                      row.approval_chain = Object.fromEntries(row.approval_chain.map((value, index) => [index, value]));
                    }
                    
                    if (Object.keys(row.current_action).length > 0) {                
                      let dat = '';
                      let chainIndex = '';
                      Object.entries(row.current_action).forEach(function ([index, data], position) {
                        if (Object.keys(row.approval_chain).length > 0) {
                          Object.entries(row.approval_chain).forEach(function ([key, value], position2) {
                            if(position == position2) {
                              chainIndex = key;
                            }
                          });
                        }
                        if (!data) return;
                        let role2 = !data.role || data.role == '' || data.role == null ? '-' : data.role.replace(/_/g, ' ');
                        let role = capitalized_Each_word(role2);
                        var dept2 = !data.dept || data.dept == '' || data.dept == null ? '-' : data.dept.replace(/_/g, ' ');
                        let dept = capitalized_Each_word(dept2);
                        let unit2 = !data.unit || data.unit == '' || data.unit == null ? '-': data.unit.replace(/_/g, ' ');
                        let unit = capitalized_Each_word(unit2);
                        dat += `<label class="form-check form-check-custom form-check-solid mt-5">
                                <input class="form-check-input h-20px w-20px" submission_id="${row.submission_id}" type="checkbox" chainIndex="${chainIndex}" name="field_keys[]" value="${index}">
                                <span class="form-check-label fw-semibold">${role} | ${dept} | ${unit}</span>
                              </label>`;
                      });

                      let element = `<div class="d-flex flex-stack">
                                      <form id="${row.submission_id}" class="align-items-center">
                                        ${dat}
                                      </form>
                                      <div class="align-items-center">
                                        <button class="btn btn-sm btn-light-danger" onclick="index.remove_data('${row.submission_id}')">Remove</button>
                                      </div>
                                    </div>`;
                      return element;
                    } else {
                      return 'N/A';
                    }
                  }
                },
                {
                  targets: 8,
                  orderable: true,
                  searchable: true,
                  render: function (data, type, row) {
                    if (row.prev_steps && row.prev_steps.length > 0){
                      let element = '';
                      row.prev_steps.forEach(function (data, index) {
                        element += `<div class="d-flex flex-stack">
                                        <div class="align-items-center">
                                          <div class="d-flex align-items-center mb-3 mb-sm-6">
                                              <span class="bullet bullet-dot bg-info me-2 h-10px w-10px"></span>
                                              <span class="fw-bold text-gray-600 fs-6">${data?.role_name ?? ''} | Dept: ${data?.dept ?? ''} | Remark: ${data?.remark ?? ''} | Date: ${data?.action_date ?? ''} | Action: ${data?.action ?? ''} | Officer Name: ${data?.officer_name ?? ''}</span>
                                          </div>
                                        </div>
                                      </div>`;
                      });
                      return element;
                    } else {
                      return 'N/A';
                    }
                  }
                },
              ],
            });
            $.unblockUI()
          } else if (json.statuscode == 99) {
            toastr.error(json.status, "Error!");
            setTimeout(logOut, 2000);
            $.unblockUI()
          } else {
            $("#"+id).removeClass("d-table").addClass("d-none");
            Swal.fire({
                title: appAlertTitle,
                html: json.status,
                icon: 'error',
                allowOutsideClick: false,
                customClass: { confirmButton: "btn btn-sm btn-main" },
                confirmButtonText: "Ok"
            });
            $.unblockUI();
          }
        } catch (e) {
          console.error(e.message);
          $.unblockUI()
        }
      },
      error: loadingerr,
    });
  }

  remove_data(subID) {
    index.callMessage("Are you sure you want to remove this selected action?", "info", true, () => {
      index.blockUI('Removing data...');
      const checkedCheckboxes = [];
      const chainIndex = [];
      document.querySelectorAll(`#${subID} input[type="checkbox"]:checked`).forEach(checkbox => {
          checkedCheckboxes.push(checkbox.value);
          chainIndex.push(checkbox.getAttribute('chainIndex'));
      });
      dopost({
          url: api_link + '/form_config/remove_data',
          data: {
              field_keys: checkedCheckboxes,
              arr: chainIndex,
              submission_id: subID,
              userid: getItem('userid'),
              sessionid: getItem('sessionid')
          },
          type: "POST",
          success: function (response) {
              $.unblockUI();
              try {
                  let json = JSON.parse(response);
                  if (json.statuscode == 0) {
                      Swal.fire({
                          title: appAlertTitle,
                          html: json.status,
                          icon: 'success',
                          allowOutsideClick: false,
                          customClass: { confirmButton: "btn btn-sm btn-main" },
                          confirmButtonText: "Ok"
                      });
                      index.get_all_applications('get_all_applications');
                  }else {
                      Swal.fire({
                          title: appAlertTitle,
                          html: json.status,
                          icon: 'error',
                          allowOutsideClick: false,
                          customClass: { confirmButton: "btn btn-sm btn-main" },
                          confirmButtonText: "Ok"
                      });
                  }
              } catch (e) {
                  $.unblockUI();
                  console.error(e)
              }
          },
      });
    }, 'Yes', 'No')
  }

  print_document(type, id) {
    let link = '';
    if (type == 'sheet' || type == 'excel') {
      index.print_google_sheet(id);
      return;
    } else {
      link = `https://docs.google.com/document/d/${id}/export?format=html`;
    }
    fetch(link)
    .then(response => response.text())
    .then(docContent => {
        // Approval chain data (replace with dynamic data if necessary)
        const approvalChain = [
            { name: 'John Doe', signature: 'Signature1.png' },
            { name: 'Jane Smith', signature: 'Signature2.png' }
        ];
        let contentToPrint = `
            <div>${docContent}</div>
            <div style="page-break-before: always; margin-top: 20px;">
                <h2>Approval Chain</h2>
                <ul>
                    ${approvalChain.map(approver => `
                        <li>
                            <strong>Name:</strong> ${approver.name} <br>
                            <strong>Signature:</strong> <img src="${approver.signature}" alt="Signature" width="100">
                        </li>
                    `).join('')}
                </ul>
            </div>
        `;

        const printWindow = window.open('', '_blank', 'width=800,height=600');
        printWindow.document.write(`
            <html>
                <head>
                    <title>Print Document</title>
                    <style>
                        body { font-family: Arial, sans-serif; }
                        ul { list-style: none; padding: 0; }
                        li { margin-bottom: 20px; }
                        img { display: block; }
                    </style>
                </head>
                <body>
                    ${contentToPrint}
                </body>
            </html>
        `);
        printWindow.document.close();
        printWindow.print();
    })
    .catch(error => console.error('Error fetching document content:', error));
  }

  print_google_sheet(SPREADSHEET_ID) {
    
    gapi.auth2.getAuthInstance().signIn().then(function () {
        const sheetMetadataRequest = gapi.client.sheets.spreadsheets.get({
            spreadsheetId: SPREADSHEET_ID,
        });

        sheetMetadataRequest.then(function (response) {
            const sheet = response.result.sheets[0];
            const rowCount = sheet.properties.gridProperties.rowCount;
            const columnCount = sheet.properties.gridProperties.columnCount;
            const lastColumnLetter = String.fromCharCode(65 + columnCount - 1);
            const range = `Sheet1!A1:${lastColumnLetter}${rowCount}`;

            const dataRequest = gapi.client.sheets.spreadsheets.values.get({
                spreadsheetId: SPREADSHEET_ID,
                range: range,
            });

            dataRequest.then(function (response) {
                const rows = response.result.values;
                if (rows.length) {
                    let htmlContent = '<table border="1" style="width: 100%;">';
                    rows.forEach(function (row) {
                        htmlContent += '<tr>';
                        row.forEach(function (cell) {
                            htmlContent += `<td>${cell}</td>`;
                        });
                        htmlContent += '</tr>';
                    });
                    htmlContent += '</table>';

                    // Adding the approval chain after sheet data
                    const approvalChain = [
                        { name: 'John Doe', signature: 'https://example.com/signature1.png' },
                        { name: 'Jane Smith', signature: 'https://example.com/signature2.png' },
                    ];

                    htmlContent += `
                        <div style="page-break-before: always; margin-top: 20px;">
                            <h2>Approval Chain</h2>
                            <ul>
                                ${approvalChain.map(approver => `
                                    <li>
                                        <strong>Name:</strong> ${approver.name} <br>
                                        <strong>Signature:</strong> <img src="${approver.signature}" alt="Signature" width="100">
                                    </li>
                                `).join('')}
                            </ul>
                        </div>
                    `;
                    const printWindow = window.open('', '_blank', 'width=800,height=600');
                    printWindow.document.write(`
                        <html>
                            <head>
                                <title>Print Document</title>
                                <style>
                                    body { font-family: Arial, sans-serif; }
                                    ul { list-style: none; padding: 0; }
                                    li { margin-bottom: 20px; }
                                    img { display: block; }
                                </style>
                            </head>
                            <body>
                                ${content}
                            </body>
                        </html>
                    `);
                    printWindow.document.close();
                    printWindow.print();
                } else {
                    console.log('No data found.');
                }
            });
        });
    });
  }

  initClient() {
    gapi.load('client:auth2', function () {
        gapi.auth2.init({
            client_id: '103941870323375312613.apps.googleusercontent.com',
            scope: ['https://www.googleapis.com/auth/spreadsheets.readonly']
        }).then(loadClient);
    });
  }

  async fetchSheetData(spreadsheetId) {
    const range = await getSheetMetadata(spreadsheetId); // Get the dynamic range

    const authClient = await authenticateWithServiceAccount();
    const sheets = google.sheets({ version: 'v4', auth: authClient });

    try {
        const res = await sheets.spreadsheets.values.get({
            spreadsheetId: spreadsheetId,
            range: range, // Use the dynamic range here
        });

        const rows = res.data.values;
        if (rows.length) {
            let htmlContent = '<table border="1" style="width: 100%;">';
            rows.forEach(row => {
                htmlContent += '<tr>';
                row.forEach(cell => {
                    htmlContent += `<td>${cell}</td>`;
                });
                htmlContent += '</tr>';
            });
            htmlContent += '</table>';

            const approvalChain = [
                { name: 'John Doe', signature: 'https://example.com/signature1.png' },
                { name: 'Jane Smith', signature: 'https://example.com/signature2.png' },
            ];

            htmlContent += `
                <div style="page-break-before: always; margin-top: 20px;">
                    <h2>Approval Chain</h2>
                    <ul>
                        ${approvalChain.map(approver => `
                            <li>
                                <strong>Name:</strong> ${approver.name} <br>
                                <strong>Signature:</strong> <img src="${approver.signature}" alt="Signature" width="100">
                            </li>
                        `).join('')}
                    </ul>
                </div>
            `;
            const printWindow = window.open('', '_blank', 'width=800,height=600');
            printWindow.document.write(`
                <html>
                    <head>
                        <title>Print Document</title>
                        <style>
                            body { font-family: Arial, sans-serif; }
                            ul { list-style: none; padding: 0; }
                            li { margin-bottom: 20px; }
                            img { display: block; }
                        </style>
                    </head>
                    <body>
                        ${htmlContent}
                    </body>
                </html>
            `);
            printWindow.document.close();
            printWindow.print();
        } else {
            console.log('No data found in the specified range.');
        }
    } catch (error) {
        console.error('Error fetching sheet data:', error);
    }
  }

}

let index = new Index();