text: siteObjJs.admin.menuGroupJs = function () {
  
  // Initialize all the page-specific event listeners here.
  
      var initializeListener = function () {
          $('body').on("click", ".btn-collapse", function () {
              $("#ajax-response-text").html("");
              //retrieve id of form element and create new instance of validator to clear the error messages if any
              var formElement = $(this).closest("form");
              var formId = formElement.attr("id");
              var validator = $('#' + formId).validate();
              validator.resetForm();
              //remove any success or error classes on any form, to reset the label and helper colors
              $('.form-group').removeClass('has-error');
              $('.form-group').removeClass('has-success');
          });
          $('body').on('click', '.delete', function (e) {
              e.preventDefault();
              var menuGroupId = $(this).attr('id');
              bootbox.confirm({
                  buttons: {confirm: {label: 'CONFIRM'}},
                  message: 'Are you sure you want to delete this record?',
                  callback: function (result) {
                      if (result === false) {
                          return;
                      }
  
                      handleGroupAction(grid);
                  }
              });
              function handleGroupAction(grid) {
                  var token = $('meta[name="csrf-token"]').attr('content');
                  var actionUrl = 'menu-group/' + menuGroupId;
                  jQuery.ajax({
                      url: actionUrl,
                      cache: false,
                      data: {
                          _token: token,
                          _method: "delete",
                          ids: menuGroupId
                      },
                      type: "POST",
                      success: function (data)
                      {
                          grid.getDataTable().ajax.reload();
                          if (data.status === 'success') {
                              Metronic.alert({
                                  type: 'success',
                                  icon: 'success',
                                  message: data.message,
                                  container: $('#ajax-response-text'),
                                  place: 'prepend',
                                  closeInSeconds: siteObjJs.admin.commonJs.constants.alertCloseSec
                              });
                          }
                          else if (data.status === 'fail') {
                              Metronic.alert({
                                  type: 'danger',
                                  icon: 'warning',
                                  message: data.message,
                                  container: $('#ajax-response-text'),
                                  place: 'prepend',
                                  closeInSeconds: siteObjJs.admin.commonJs.constants.alertCloseSec
                              });
                          }
                      },
                      error: function (jqXHR, textStatus, errorThrown)
                      {
  
                      }
                  });
              }
          });
      };
      // Method to fetch and place edit form with data using ajax call
  
      var fetchDataForEdit = function () {
          $('.portlet-body').on('click', '.edit-form-link', function () {
              var cat_id = $(this).attr("id");
              var actionUrl = 'menu-group/' + cat_id + '/edit';
              $.ajax({
                  url: actionUrl,
                  cache: false,
                  dataType: "json",
                  type: "GET",
                  success: function (data)
                  {
                      $("#edit_form").html(data.form);
                      siteObjJs.validation.formValidateInit('#edit-menugroup', handleAjaxRequest);
                  },
                  error: function (jqXhr, json, errorThrown)
                  {
                      var errors = jqXhr.responseJSON;
                      var errorsHtml = '';
                      $.each(errors, function (key, value) {
                          errorsHtml += value[0] + '<br />';
                      });
                      // alert(errorsHtml, "Error " + jqXhr.status + ': ' + errorThrown);
                      Metronic.alert({
                          type: 'danger',
                          message: errorsHtml,
                          container: $('#ajax-response-text'),
                          place: 'prepend',
                          closeInSeconds: siteObjJs.admin.commonJs.constants.alertCloseSec
                      });
                  }
              });
          });
      };
      // Common method to handle add and edit ajax request and reponse
  
      var handleAjaxRequest = function () {
          var formElement = $(this.currentForm); // Retrive form from DOM and convert it to jquery object
          var actionUrl = formElement.attr("action");
          var actionType = formElement.attr("method");
          var formData = formElement.serialize();
          var icon = "check";
          var messageType = "success";
          $.ajax(
                  {
                      url: actionUrl,
                      cache: false,
                      type: actionType,
                      data: formData,
                      success: function (data)
                      {
                          //console.log(data);
                          //data: return data from server
                          if (data.status === "error")
                          {
                              icon = "times";
                              messageType = "danger";
                          }
                          $('#sidebar-menu').html(data.sidebar);
                          //Empty the form fields
                          formElement.find("input[type=text], textarea").val("");
                          //trigger cancel button click event to collapse form and show title of add page
                          $('.btn-collapse').trigger('click');
                          //reload the data in the datatable
                          grid.getDataTable().ajax.reload();
                          Metronic.alert({
                              type: messageType,
                              icon: icon,
                              message: data.message,
                              container: $('#ajax-response-text'),
                              place: 'prepend',
                              closeInSeconds: siteObjJs.admin.commonJs.constants.alertCloseSec
                          });
                          siteObjJs.admin.commonJs.showSelectedMenus();
                      },
                      error: function (jqXhr, json, errorThrown)
                      {
                          var errors = jqXhr.responseJSON;
                          var errorsHtml = '';
                          $.each(errors, function (key, value) {
                              errorsHtml += value[0] + '<br />';
                          });
                          //alert(errorsHtml, "Error " + jqXhr.status + ': ' + errorThrown);
                          Metronic.alert({
                              type: 'danger',
                              message: errorsHtml,
                              container: $('#ajax-response-text'),
                              place: 'prepend',
                              closeInSeconds: siteObjJs.admin.commonJs.constants.alertCloseSec
                          });
                      }
                  }
          );
      }
  
      var handleTable = function () {
  
          grid = new Datatable();
          grid.init({
              src: $('#menu-group-table'),
              loadingMessage: 'Loading...',
              dataTable: {
                  'language': {
                      'info': '<span class="seperator">|</span><b>Total _TOTAL_ record(s) found</b>',
                      'infoEmpty': '',
                  },
                  "bStateSave": false,
                  "lengthMenu": siteObjJs.admin.commonJs.constants.gridLengthMenu,
                  "pageLength": siteObjJs.admin.commonJs.constants.recordsPerPage,
                  "columns": [
                      {data: null, name: 'rownum', searchable: false},
                      {data: 'name', name: 'name'},
                      {data: 'position', name: 'position'},
                      {data: 'action', name: 'action', orderable: false, searchable: false}
                  ],
                  "drawCallback": function (settings) {
                      var api = this.api();
                      var rows = api.rows({page: 'current'}).nodes();
                      var last = null;
                      var page = api.page();
                      var recNum = null;
                      var displayLength = settings._iDisplayLength;
                      api.column(0, {page: 'current'}).data().each(function (group, i) {
                          recNum = ((page * displayLength) + i + 1);
                          $(rows).eq(i).children('td:first-child').html(recNum);
                      });
                  },
                  "ajax": {
                      "url": "menu-group/data",
                      "type": "GET"
                  },
                  "order": [
                      [2, "asc"]
                  ]// set display order column as a default sort by asc
              }
          });
          $('#data-search').keyup(function () {
              grid.getDataTable().search($(this).val()).draw();
          });
      };
      return {
          //main function to initiate the module
          init: function () {
              initializeListener();
              handleTable();
              fetchDataForEdit();
              //bind the validation method to 'add' form on load
              siteObjJs.validation.formValidateInit('#create-menugroup', handleAjaxRequest);
          }
  
      };
  }();
  