const formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2
})

function isDate(val) {
    try {
        var regex = /^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/;
        if (!(regex.test(val))) {
            return false;
        }
        return true;
    } catch (e) {
        return false;
    }
}

function isNumeric(val) {
    var v = val.replace(/\$|,/g, '');
    if (isNaN(v))
        return false;
    else return true;
}

function containsSpecialCharacters(str) {
    var regex = /[ !@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/g;
    return regex.test(str);
}

var ignoreCols = [];
var datTable;


$(function () {
    var cdata = [
        {
            "CustomerID": "ALFKI",
            "CompanyName": "Alfreds Futterkiste",
            "ContactName": "Maria Anders",
            "Phone": "030-0074321",
            "Fax": "030-0076545"
        },
        {
            "CustomerID": "ANATR",
            "CompanyName": "Ana Trujillo Emparedados y helados",
            "ContactName": "Ana Trujillo",
            "Phone": "(5) 555-4729",
            "Fax": "(5) 555-3745"
        },
        {
            "CustomerID": "ANTON",
            "CompanyName": "Antonio Moreno Taquería",
            "ContactName": "Antonio Moreno",
            "Phone": "(5) 555-3932",
            "Fax": ""
        },
        {
            "CustomerID": "AROUT",
            "CompanyName": "Around the Horn",
            "ContactName": "Thomas Hardy",
            "Phone": "(171) 555-7788",
            "Fax": "(171) 555-6750"
        },
        {
            "CustomerID": "BERGS",
            "CompanyName": "Berglunds snabbköp",
            "ContactName": "Christina Berglund",
            "Phone": "0921-12 34 65",
            "Fax": "0921-12 34 67"
        },
        {
            "CustomerID": "BLAUS",
            "CompanyName": "Blauer See Delikatessen",
            "ContactName": "Hanna Moos",
            "Phone": "0621-08460",
            "Fax": "0621-08924"
        },
        {
            "CustomerID": "BLONP",
            "CompanyName": "Blondesddsl père et fils",
            "ContactName": "Frédérique Citeaux",
            "Phone": "88.60.15.31",
            "Fax": "88.60.15.32"
        },
        {
            "CustomerID": "BOLID",
            "CompanyName": "Bólido Comidas preparadas",
            "ContactName": "Martín Sommer",
            "Phone": "(91) 555 22 82",
            "Fax": "(91) 555 91 99"
        },
        {
            "CustomerID": "BONAP",
            "CompanyName": "Bon app'",
            "ContactName": "Laurence Lebihan",
            "Phone": "91.24.45.40",
            "Fax": "91.24.45.41"
        },
        {
            "CustomerID": "BOTTM",
            "CompanyName": "Bottom-Dollar Markets",
            "ContactName": "Elizabeth Lincoln",
            "Phone": "(604) 555-4729",
            "Fax": "(604) 555-3745"
        },
        {
            "CustomerID": "BSBEV",
            "CompanyName": "B's Beverages",
            "ContactName": "Victoria Ashworth",
            "Phone": "(171) 555-1212",
            "Fax": ""
        },
        {
            "CustomerID": "CACTU",
            "CompanyName": "Cactus Comidas para llevar",
            "ContactName": "Patricio Simpson",
            "Phone": "(1) 135-5555",
            "Fax": "(1) 135-4892"
        },
        {
            "CustomerID": "CENTC",
            "CompanyName": "Centro comercial Moctezuma",
            "ContactName": "Francisco Chang",
            "Phone": "(5) 555-3392",
            "Fax": "(5) 555-7293"
        },
        {
            "CustomerID": "CHOPS",
            "CompanyName": "Chop-suey Chinese",
            "ContactName": "Yang Wang",
            "Phone": "0452-076545",
            "Fax": ""
        },
        {
            "CustomerID": "COMMI",
            "CompanyName": "Comércio Mineiro",
            "ContactName": "Pedro Afonso",
            "Phone": "(11) 555-7647",
            "Fax": ""
        }
    ];
    $.fn.dataTable.ext.order["dom-text"] = function (settings, col) {
        return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) { return $('input', td).val(); });
    };

    $.fn.dataTable.ext.buttons.Reset = {
        text: 'Reset',
        //className: 'tablebutton',
        titleAttr: "Click to reset the grid filter and sort",
        action: function (e, dt, node, config) {
            setTimeout(function () {
                $("th select").each(function () {
                    var control = $(this)[0];
                    if (control.selectedIndex != 0) {
                        control.value = "Show All";
                        $(this).trigger('change');
                    }
                });
                dt.iterator('table', function (s) {
                    s.aaSorting.length = 0;
                    s.aiDisplay.sort(function (a, b) {
                        return a - b;
                    });
                    s.aiDisplayMaster.sort(function (a, b) {
                        return a - b;
                    });
                });
                dt.search('').draw();
            }, 50);
        }
    };

    datTable = $('#example').DataTable({
        dom: "<'row buttonsDiv'B>" + "<'row middleAlign'<'col-sm-6'l><'col-sm-6'f>>" + "'<'row middleAlign'<'col-sm-5'i><'col-sm-7'p>>" + "<'row'<'col-sm-12'tr>>" + "'<'row middleAlign'<'col-sm-5'i><'col-sm-7'p>>",
        buttons: ['Reset'],
        //ajax: {
        //    url: '/ajax/data/Customers.json',
        //    type: "GET",
        //    dataType: "json",
        //    contentType: "application/json; charset=utf-8"
        //},
        data: cdata,
        processing: true,
        search: {
            caseInsensitive: false
        },
        language: {
            emptyTable: "No data found",
            loadingRecords: function () {
                $('#example_processing').removeClass('panel panel-default');
                '<div class="loader"><div class="loading loading--full-height"><span class="loading-message">Loading...Please wait...</span></div></div>'
            },
            processing: '<div class="loader"><div class="loading loading--full-height"><span class="loading-message">Loading...Please wait...</span></div></div>'
        },
        columns: [
            { data: "CustomerID", title: "Customer ID" },
            { data: "CompanyName", title: "Company Name" },
            { data: "ContactName", title: "Contact Name" },
            { data: "Phone", title: "Phone Number", orderDataType: "dom-text", type: "string" },
            { data: "Fax", title: "Fax Number", orderDataType: "dom-text", type: "string" }
        ],
        columnDefs: [
            {
                targets: [3, 4],
                render: function (data, type, row, display) {
                    if (type === 'filter') {
                        if (data.search('select') != -1) {
                            return $(data).find('option:selected').text();
                        }
                        else
                            return data;
                    }
                    return '<input type="phone" class="form-control" value="' + data + '" />';
                }
            }
        ],
        initComplete: function () {
            $(".dataTables_length select").addClass('input-sm');
            $(".dataTables_filter input").addClass('searchInput input-sm');
            this.api().columns().every(function () {
                InitComplete(this);
            });
        }
    });
});
function UpdateSelectList(datatable) {
    $(datatable).DataTable().columns({ search: 'applied' }).every(function () {
        var column = this;
        // Add column indexes to ignoreCols to NOT put a dropdown in the header
        if (ignoreCols.indexOf(column.index()) == -1) {
            //Find the dropdown in the column header
            var select = $(column.header()).find('select');
            //Get the selected text
            var selectedOption = select.find(":selected").text().trim();
            //Get the selected value
            var selectedValue = $(select).filter(function () {
                return $(this).val() == selectedOption.trim();
            }).attr('selected', true).val();
            // Remove everything from the list that isn't selected or showing
            select.find('option:not(:first-child)').remove();

            // Create a set of all available options
            var selectSet = new Set();
            selectSet = BuildSelectList(column);

            // Convert to an array for sorting
            var selectArray = Array.from(selectSet);
            var colContainsNumbers = false;
            var colContainsDates = false;
            var item = selectArray.filter(function (e) { return e.trim() != '' && !isNumeric(e.trim()); });
            if (typeof item[0] !== 'undefined') {
                colContainsNumbers = isNumeric(item[0]) && !isDate(item[0]);
                colContainsDates = isDate(item[0]);
            } else {
                colContainsNumbers = true;
            }

            if (colContainsDates) {
                selectArray.sort(function (a, b) {
                    a = new Date(a);
                    b = new Date(b);
                    return a - b
                });
            } else if (colContainsNumbers)
                selectArray.sort(function (a, b) {
                    if (a.length == 0) a = '-1';
                    if (b.length == 0) b = '-1';
                    a = parseFloat(a.replace(/\$|,/g, ''));
                    b = parseFloat(b.replace(/\$|,/g, ''));
                    return a - b
                });
            else
                selectArray.sort();

            newArray = [];
            selectArray.forEach(function (val) {
                val = val.trim();
                if (column.search() === '^' + val + '$') {
                    newArray.push('<option value="' + val + '" selected="selected">' + val + '</option>');
                } else {
                    newArray.push('<option value="' + val + '">' + val + '</option>');
                }
            });

            // Add sorted options to select list
            function addOption(value) {
                select.append(value);
            }
            newArray.forEach(addOption);
            if (selectedValue != undefined) {
                $(select).val(selectedValue);
            } else $(select).val("Show All");

            // Don't sort the column on select list click
            $(select).click(function (e) {
                e.stopPropagation();
            });
        }
    });
}

function BuildSelectList(column) {
    var selectSet = new Set();
    //Sort all the data in the column
    column.data().unique().sort().each(function (d, j) {
        var val = $('<div/>').html(d).text();
        if (null != d && d.toString().search("input") != -1) {
            // Get input values
            if ($(d).find("input:text").length > 0) {
                val = $(d).find("input:text").val();
            }
            // Get checkbox values
            if ($(d).find("input:checkbox").length > 0) {
                val = $(d).find("input:checkbox").val();
            }
        }
        if (val != "") {
            try {
                // Get selected values
                var s = d.search('selected=');
                if (s != -1) {
                    var len = $(d).find('option:selected').length;
                    if (len > 0)
                        val = $(d).find('option:selected').text();
                }
            } catch {
                val = '';
            }
            // Create list of values
            var vals = val.split('\n').filter(function (i) { return i; });
            vals.forEach(function (val) {
                if (val == '')
                    val = $(d).val('');
                if (typeof val === "undefined")
                    val = '';
                selectSet.add(val);
            });
            if (vals.length == 0) selectSet.add('');
        } else if (d != '') {
            $(d + ' :input').each(function () {
                if (this.value != undefined) {
                    if ((this.type == 'text' || this.type == 'search') && this.hidden == false) {
                        if (this.value != undefined) {
                            selectSet.add(this.value);
                        } else
                            selectSet.add('');
                    }
                    else
                        selectSet.add(this.value);
                } else
                    selectSet.add('');
            })
        } else {
            selectSet.add('');
        }
    });
    return selectSet;
}

function InitComplete(col) {
    var column = col;
    var select = $('<select class="form-control" style="width:100%;"><option value="Show All">Show All</option></select>')
        .appendTo($(column.header()))
        .on('change', function () {
            $("#spinner").show();
            var val = $(this).val();
            if (val === "") {
                // **********************************************
                // This is not finding blank values in the column if there is an input there
                // **********************************************
                column.search('^$', true, false).draw();
            }
            else {
                var colContainsNumbers = false;
                if (val == "Show All") {
                    val = "";
                    column.search(val).draw();
                } else {
                    if (typeof val !== 'undefined') {
                        colContainsNumbers = isNumeric(val) && !isDate(val);
                        if (containsSpecialCharacters(val) && !colContainsNumbers) {
                            val = $.fn.dataTable.util.escapeRegex($(this).val());
                            //column.search(val ? '^' + val + '$' : '', true, false).draw();
                            column.search(val, true, false).draw();
                        } else {
                            if (colContainsNumbers) {
                                column.search('\\b' + val.replace(/\$|,/g, '') + '\\b', true, false).draw();
                            } else {
                                column.search('\\b' + val + '\\b', true, false).draw();
                            }
                        }
                    }
                }
            }
            setTimeout(function () {
                UpdateSelectList('#example');
                $("#spinner").hide();
            }, 50);
        });

    // Create a set of all available options
    var selectSet = new Set();
    selectSet = BuildSelectList(column);

    // Convert to an array for sorting
    var selectArray = Array.from(selectSet);
    var colContainsNumbers = false;
    var colContainsDates = false;
    var item = selectArray.filter(function (e) { return e.trim() != '' && !isNumeric(e.trim()); });
    if (typeof item[0] !== "undefined") {
        colContainsNumbers = isNumeric(item[0]) && !isDate(item[0]);
        colContainsDates = isDate(item[0]);
    } else {
        colContainsNumbers = true;
    }
    if (colContainsDates) {
        selectArray.sort(function (a, b) {
            a = new Date(a);
            b = new Date(b);
            return a - b
        });
    } else if (colContainsNumbers)
        selectArray.sort(function (a, b) {
            if (a.length == 0) a = '-1';
            if (b.length == 0) b = '-1';
            a = parseFloat(a.replace(/\$|,/g, ""));
            b = parseFloat(b.replace(/\$|,/g, ""));
            return a - b
        });
    else
        selectArray.sort();

    newArray = [];
    var isSomethingSelected = false;
    selectArray.forEach(function (val) {
        val = val.trim();
        if (column.search() === "^" + val + "$") {
            newArray.push('<option value="' + val + '" selected="selected">' + val + "</option>");
            isSomethingSelected = true;
        } else {
            newArray.push('<option value="' + val + '">' + val + "</option>");
        }
    });

    if (!isSomethingSelected)
        column.search('').draw();

    // Add sorted options to select list
    function addOption(value) {
        select.append(value);
    }
    newArray.forEach(addOption);

    // Don't sort the column on select list click
    $(select).click(function (e) {
        e.stopPropagation();
    });
}