
function filterTable() {
    var productName = document.getElementById('productName').value;
    var userName = document.getElementById('userName').value;
    var planNames = document.getElementById('planNames').value;
    var billingPeriod = document.getElementById('billingPeriod').value;
    var sStatus = document.getElementById('sStatus').value;
    var yearFilter = document.getElementById('yearFilter').value;
    var monthFilter = document.getElementById('monthFilter').value;
    var dateFilter = document.getElementById('dateFilter').value;

    var rows = document.getElementById('dataTable').getElementsByTagName('tr');
    for (var i = 1; i < rows.length; i++) {
        var row = rows[i];
        var showRow = true;
        if (productName !== 'all' && row.getAttribute('products-name') !== productName) {
            showRow = false;
        }
        if (userName !== 'all' && row.getAttribute('user-names') !== userName) {
            showRow = false;
        }
        if (planNames !== 'all' && row.getAttribute('plan-names') !== planNames) {
            showRow = false;
        }
        if (billingPeriod !== 'all' && row.getAttribute('billing-period') !== billingPeriod) {
            showRow = false;
        }
        if (sStatus !== 'all' && row.getAttribute('s-status') !== sStatus) {
            showRow = false;
        }
        if (yearFilter !== 'all' && row.getAttribute('data-date').substring(0, 4) !== yearFilter) {
            showRow = false;
        }
        if (monthFilter !== 'all' && row.getAttribute('data-date').substring(5, 7) !== monthFilter) {
            showRow = false;
        }
        if (dateFilter !== 'all' && row.getAttribute('data-date').substring(8, 10) !== dateFilter) {
            showRow = false;
        }
        row.style.display = showRow ? '' : 'none';
    }
}

// Select option search
jQuery(document).ready(function($) {
    $('#userName').select2();
    $('#productName').select2();
    $('#planNames').select2();
});