text: "use strict";
  var DatatablesBasicBasic = function() {
  
  	var initTable1 = function() {
  		var table = $('#k_table_1');
  
  		// begin first table
  		table.DataTable({
  			responsive: true,
  
  			// DOM Layout settings
  			dom: `<'row'<'col-sm-12'tr>>
  			<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>`,
  
  			lengthMenu: [5, 10, 25, 50],
  
  			pageLength: 10,
  
  			language: {
  				'lengthMenu': 'Display _MENU_',
  			},
  
  			// Order settings
  			order: [[1, 'desc']],
  
  			headerCallback: function(thead, data, start, end, display) {
  				thead.getElementsByTagName('th')[0].innerHTML = `
                      <label class="k-checkbox k-checkbox--single k-checkbox--solid">
                          <input type="checkbox" value="" class="k-group-checkable">
                          <span></span>
                      </label>`;
  			},
  
  			columnDefs: [
  				{
  					targets: 0,
  					width: '30px',
  					className: 'dt-right',
  					orderable: false,
  					render: function(data, type, full, meta) {
  						return `
                          <label class="k-checkbox k-checkbox--single k-checkbox--solid">
                              <input type="checkbox" value="" class="k-checkable">
                              <span></span>
                          </label>`;
  					},
  				},
  				{
  					targets: -1,
  					title: 'Actions',
  					orderable: false,
  					render: function(data, type, full, meta) {
  						return `
                          <span class="dropdown">
                              <a href="#" class="btn btn-sm btn-clean btn-icon btn-icon-md" data-toggle="dropdown" aria-expanded="true">
                                <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>
                          </span>
                          <a href="#" class="btn btn-sm btn-clean btn-icon btn-icon-md" title="View">
                            <i class="la la-edit"></i>
                          </a>`;
  					},
  				},
  				{
  					targets: 8,
  					render: function(data, type, full, meta) {
  						var status = {
  							1: {'title': 'Pending', 'class': 'k-badge--brand'},
  							2: {'title': 'Delivered', 'class': ' k-badge--metal'},
  							3: {'title': 'Canceled', 'class': ' k-badge--primary'},
  							4: {'title': 'Success', 'class': ' k-badge--success'},
  							5: {'title': 'Info', 'class': ' k-badge--info'},
  							6: {'title': 'Danger', 'class': ' k-badge--danger'},
  							7: {'title': 'Warning', 'class': ' k-badge--warning'},
  						};
  						if (typeof status[data] === 'undefined') {
  							return data;
  						}
  						return '<span class="k-badge ' + status[data].class + ' k-badge--inline k-badge--pill">' + status[data].title + '</span>';
  					},
  				},
  				{
  					targets: 9,
  					render: function(data, type, full, meta) {
  						var status = {
  							1: {'title': 'Online', 'state': 'danger'},
  							2: {'title': 'Retail', 'state': 'primary'},
  							3: {'title': 'Direct', 'state': 'accent'},
  						};
  						if (typeof status[data] === 'undefined') {
  							return data;
  						}
  						return '<span class="k-badge k-badge--' + status[data].state + ' k-badge--dot"></span>&nbsp;' +
  							'<span class="k-font-bold k-font-' + status[data].state + '">' + status[data].title + '</span>';
  					},
  				},
  			],
  		});
  
  		table.on('change', '.k-group-checkable', function() {
  			var set = $(this).closest('table').find('td:first-child .k-checkable');
  			var checked = $(this).is(':checked');
  
  			$(set).each(function() {
  				if (checked) {
  					$(this).prop('checked', true);
  					$(this).closest('tr').addClass('active');
  				}
  				else {
  					$(this).prop('checked', false);
  					$(this).closest('tr').removeClass('active');
  				}
  			});
  		});
  
  		table.on('change', 'tbody tr .k-checkbox', function() {
  			$(this).parents('tr').toggleClass('active');
  		});
  	};
  
  	return {
  
  		//main function to initiate the module
  		init: function() {
  			initTable1();
  		},
  
  	};
  
  }();
  
  jQuery(document).ready(function() {
  	DatatablesBasicBasic.init();
  });