text: "use strict";
  // Class definition
  
  var KTDefaultDatatableDemo = function() {
      // Private functions
  
      // basic demo
      var demo = function() {
  
          var datatable = $('.kt_datatable').KTDatatable({
              data: {
                  type: 'remote',
                  source: {
                      read: {
                          url: 'https://keenthemes.com/keen/tools/preview/inc/api/datatables/demos/default2.php',
                      },
                  },
                  pageSize: 20,
                  serverPaging: true,
                  serverFiltering: true,
                  serverSorting: true,
              },
  
              layout: {
                  theme: 'default',
                  class: '',
                  scroll: true,
                  height: 550,
                  footer: false,
              },
  
              sortable: true,
  
              filterable: false,
  
              pagination: true,
  
              search: {
                  input: $('#generalSearch'),
              },
  
              columns: [{
                  field: 'employee_id',
                  title: 'Employee ID',
                  locked: {
                      left: 'lg'
                  },
              }, {
                  field: 'name',
                  title: 'Name',
                  locked: {
                      left: 'lg'
                  },
                  template: function(row) {
                      return row.first_name + ' ' + row.last_name;
                  },
              }, {
                  field: 'email',
                  width: 150,
                  title: 'Email',
              }, {
                  field: 'phone',
                  title: 'Phone',
              }, {
                  field: 'hire_date',
                  title: 'Hire Date',
                  type: 'date',
                  format: 'MM/DD/YYYY',
              }, {
                  field: 'gender',
                  title: 'Gender',
              }, {
                  field: 'department',
                  title: 'Department',
              }, {
                  field: 'address',
                  title: 'Address',
              }, {
                  field: 'website',
                  title: 'Website',
              }, {
                  field: 'salary',
                  title: 'Salary',
              }, {
                  field: 'notes',
                  title: 'Notes',
                  width: 300,
              }, {
                  field: 'status',
                  title: 'Status',
                  locked: {
                      right: 'lg'
                  },
                  // callback function support for column rendering
                  template: function(row) {
                      var status = {
                          1: {
                              'title': 'Pending',
                              'class': 'kt-badge--brand'
                          },
                          2: {
                              'title': 'Delivered',
                              'class': ' kt-badge--metal'
                          },
                          3: {
                              'title': 'Canceled',
                              'class': ' kt-badge--primary'
                          },
                          4: {
                              'title': 'Success',
                              'class': ' kt-badge--success'
                          },
                          5: {
                              'title': 'Info',
                              'class': ' kt-badge--info'
                          },
                          6: {
                              'title': 'Danger',
                              'class': ' kt-badge--danger'
                          },
                          7: {
                              'title': 'Warning',
                              'class': ' kt-badge--warning'
                          },
                      };
                      return '<span class="kt-badge ' + status[row.status].class + ' kt-badge--inline kt-badge--pill">' + status[row.status].title + '</span>';
                  },
              }, {
                  field: 'type',
                  title: 'Type',
                  locked: {
                      right: 'lg'
                  },
                  autoHide: false,
                  // callback function support for column rendering
                  template: function(row) {
                      var status = {
                          1: {
                              'title': 'Online',
                              'state': 'danger'
                          },
                          2: {
                              'title': 'Retail',
                              'state': 'primary'
                          },
                          3: {
                              'title': 'Direct',
                              'state': 'accent'
                          },
                      };
                      return '<span class="kt-badge kt-badge--' + status[row.type].state + ' kt-badge--dot"></span>&nbsp;<span class="kt-font-bold kt-font-' + status[row.type].state + '">' +
                          status[row.type].title + '</span>';
                  },
              }, {
                  field: 'Actions',
                  title: 'Actions',
                  sortable: false,
                  width: 110,
                  overflow: 'visible',
                  locked: {
                      right: 'lg'
                  },
                  autoHide: false,
                  template: function() {
                      return '\
  							<div class="dropdown">\
  								<a href="javascript:;" class="btn btn-sm btn-clean btn-icon btn-icon-md" data-toggle="dropdown">\
  	                                <i class="la la-ellipsis-h"></i>\
  	                            </a>\
  							    <div class="dropdown-menu dropdown-menu-right">\
  							        <a class="dropdown-item" href="#"><i class="la la-edit"></i> Edit Details</a>\
  							        <a class="dropdown-item" href="#"><i class="la la-leaf"></i> Update Status</a>\
  							        <a class="dropdown-item" href="#"><i class="la la-print"></i> Generate Report</a>\
  							    </div>\
  							</div>\
  							<a href="javascript:;" class="btn btn-sm btn-clean btn-icon btn-icon-md" title="Edit details">\
  								<i class="la la-edit"></i>\
  							</a>\
  							<a href="javascript:;" class="btn btn-sm btn-clean btn-icon btn-icon-md" title="Delete">\
  								<i class="la la-trash"></i>\
  							</a>\
  						';
                  },
              }],
  
          });
  
          $('#kt_form_status').on('change', function() {
              datatable.search($(this).val().toLowerCase(), 'status');
          });
  
          $('#kt_form_type').on('change', function() {
              datatable.search($(this).val().toLowerCase(), 'type');
          });
  
          $('#kt_form_status,#kt_form_type').selectpicker();
  
      };
  
      return {
          // public functions
          init: function() {
              demo();
          }
      };
  }();
  
  jQuery(document).ready(function() {
      KTDefaultDatatableDemo.init();
  });