/*=========================================================================================
    File Name: datatable-api.js
    Description: API Datatable 
    ----------------------------------------------------------------------------------------
    Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
    Version: 1.0
    Author: Pixinvent
    Author URL: hhttp://www.themeforest.net/user/pixinvent
==========================================================================================*/

$(document).ready(function() {

/*****************************
*       js of Add Row        *
******************************/

var t = $('.add-rows').DataTable();
var counter = 1;

$('#addRow').on( 'click', function () {
    t.row.add( [
        counter +'.1',
        counter +'.2',
        counter +'.3',
        counter +'.4',
        counter +'.5'
    ] ).draw( false );

    counter++;
} );

/*****************************************************
*       Automatically add a first row of data        *
*****************************************************/

$('#addRow').trigger('click');


/***************************************************************
*       js of Individual column searching (text inputs)        *
***************************************************************/

// Setup - add a text input to each footer cell
$('.text-inputs-searching tfoot th').each( function () {
    var title = $(this).text();
    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );

// DataTable
var tableSearching = $('.text-inputs-searching').DataTable();

// Apply the search
tableSearching.columns().every( function () {
    var that = this;

    $( 'input', this.footer() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
            that
                .search( this.value )
                .draw();
        }
    } );
} );


/*****************************************************************
*       js of Individual column searching (select inputs)        *
*****************************************************************/

$('.datatable-select-inputs').DataTable( {
    initComplete: function () {
        this.api().columns().every( function () {
            var column = this;
            var select = $('<select><option value="">Select option</option></select>')
                .appendTo( $(column.footer()).empty() )
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );

            column.data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' );
            } );
        } );
    }
} );


/********************************************************************
*       js of Child rows (show extra / detailed information)        *
********************************************************************/


/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
    '<tr>'+
        '<td>Full name:</td>'+
        '<td>'+d.name+'</td>'+
    '</tr>'+
    '<tr>'+
        '<td>Extension number:</td>'+
        '<td>'+d.extn+'</td>'+
    '</tr>'+
    '<tr>'+
        '<td>Extra info:</td>'+
        '<td>And any further details here (images etc)...</td>'+
    '</tr>'+
'</table>';
}

// -- Child rows (show extra / detailed information) --


var tableChildRows = $('.show-child-rows').DataTable( {
    "ajax": "../../../app-assets/data/datatables/ajax-child-rows.json",
    "columns": [
        {
            "className":      'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { "data": "name" },
        { "data": "position" },
        { "data": "office" },
        { "data": "salary" }
    ],
    "order": [[1, 'asc']]
} );

// Add event listener for opening and closing details
$('.show-child-rows tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = tableChildRows.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
} );


/***************************************************
*       js of Row selection (multiple rows)        *
***************************************************/


    var multipleRowsTable = $('.selection-multiple-rows').DataTable();

    $('.selection-multiple-rows tbody').on('click', 'tr', function() {
        $(this).toggleClass('selected');
    });

    $('#row-count').on('click', function() {
        alert(multipleRowsTable.rows('.selected').data().length + ' row(s) selected');
    });


/*************************************************************
*       js of Row selection and deletion (single row)        *
*************************************************************/


    var tableselectionDelete = $('.selection-deletion-row').DataTable();

    $('.selection-deletion-row tbody').on('click', 'tr', function() {
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
        } else {
            tableselectionDelete.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    });

    $('#delete-row').on('click', function() {
        tableselectionDelete.row('.selected').remove().draw(false);
    });


/*********************************
*       js of Form inputs        *
*********************************/


    var tableFormInputs = $('.submit-form-inputs').DataTable();

    $('.inputs-submin').on('click', function() {
        var data = tableFormInputs.$('input, select').serialize();
        alert(
            "The following data would have been submitted to the server: \n\n" +
            data.substr(0, 120) + '...'
        );
        return false;
    });


/*****************************************************
*       js of Show / hide columns dynamically        *
*****************************************************/


    var tableDynamically = $('.hide-columns-dynamically').DataTable({
        "scrollY": "200px",
        "paging": false
    });

    $('a.toggle-vis').on('click', function(e) {
        e.preventDefault();

        // Get the column API object
        var column = tableDynamically.column($(this).attr('data-column'));

        // Toggle the visibility
        column.visible(!column.visible());
    });

/************************************************
*       Search API (regular expressions)        *
************************************************/


    $('.search-api').DataTable();

    $('input.global_filter_search').on('keyup click', function() {
        filterGlobal();
    });

    $('input.column_filter_search').on('keyup click', function() {
        filterColumn($(this).parents('tr').attr('data-column'));
    });


    function filterGlobal() {
        $('.search-api').DataTable().search(
            $('#global_filter').val(),
            $('#global_regex').prop('checked'),
            $('#global_smart').prop('checked')
        ).draw();
    }

    function filterColumn(i) {
        $('.search-api').DataTable().column(i).search(
            $('#col' + i + '_filter').val(),
            $('#col' + i + '_regex').prop('checked'),
            $('#col' + i + '_smart').prop('checked')
        ).draw();
    }

} );