"use strict";
var dataSet = [
    [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
    [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
    [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
];

var KTDatatablesSearchOptionsColumnSearch = function() {

	var initTable1 = function() {

	};

	return {

		//main function to initiate the module
		init: function() {
			initTable1();
		},

	};

}();

jQuery(document).ready(function() {
    
	  // begin first table
      var table =   $('#kt_table_1').DataTable({
        responsive: true,

    // Pagination settings
    dom: `<'row'<'col-sm-12'tr>>
    <'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>`,
    // read more: https://datatables.net/examples/basic_init/dom.html

    lengthMenu: [5, 10, 25, 50],

    pageLength: 10,

        data: dataSet,
    columns: [
        { title: "ID" },
        { title: "Job #" },
        { title: "Type" },
        { title: "Cust." },
        { title: "Status" },
        { title: "Action" }
    ],
    
    columnDefs: [
        {
            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>`;
            },
        },
        
        
    ],
});

// $.fn.dataTable.Api.register('column().title()', function() {
//     return $(table.table().header()).text().trim();
// });

$( table.table().header() )
    .addClass( 'highlight' );

var rowFilter = $('<tr class="filter"></tr>').appendTo($(table.table().header()));

table.columns().every(function() {
    var column = this;
    var input;
    
    // console.log(column);
    input = $(`<input type="text" class="form-control form-control-sm form-filter kt-input" data-col-index="` + column.index() + `"/>`);

    $(input).appendTo($('<th>').appendTo(rowFilter));
  
});


});