<div class="form-group" style="margin-bottom:unset;">
    <label for="columnSelector">Select Columns:</label>
    <select id="columnSelector" multiple class="form-control">
        <option value="0">Sr. No</option>
        <option value="1">RMS ID</option>
        <option value="2">RMS Order ID</option>
        <option value="3">Customer Name</option>
    <option value="4">Customer Email</option>
    <option value="5">Product Name</option>
    <option value="6">Start Date</option>
    <option value="7">End Date</option>
    <option value="8">Shifts</option>
    <option value="9">Location</option>
    <option value="10">Listing Price</option>
    <!-- <option value="9">Discount</option> -->
    <!-- <option value="10">Final Price</option> -->
    <option value="11">Customer Status</option>
    <option value="12">RFQ Status</option>
    <option value="13">Applications</option>
    <option value="14">Requested On</option>
    <option value="15" >Quote Status</option>
    <option value="16">Actions</option>
    </select>
</div>

<style>
select[multiple] {
    height: 150px;
    width: 100%;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f8f9fa;
    color: #333;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

select[multiple]:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    outline: none;
}

.multiselect-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
}

.multiselect-item-checkbox {
    margin-left: auto;
}

.dropdown-item {
    color: #333;
    padding: 5px 10px;
    border-radius: 3px;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dropdown-item:hover {
    background-color: #f1f1f1;
    color: #007bff;
}

.dropdown-item.active {
    background-color: unset;
    color: #000;
}

.multiselect-container .multiselect-item label {
    display: flex;
    align-items: center;
    padding: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    justify-content: space-between;
}

.multiselect-container .multiselect-item label:hover {
    background-color: #f1f1f1;
}

.multiselect-container .multiselect-item label input[type="checkbox"] {
    margin-left: auto;
}

.multiselect-container .multiselect-item.active {
    background-color: #007bff;
    color: #fff;
    border-radius: 3px;
}
.form-group input[type=checkbox]{
    margin: 8px 0px 0px -24px !important
}
</style>

<script>
jQuery(document).ready(function(jQuery) {
    // Initialize DataTable with initial column visibility settings
    var dataTable = jQuery('#rfq-table').DataTable({
    "scrollX": true,
        "columnDefs": [
            { "visible": true, "targets": [0, 1, 2, 3, 4, 12] }, 
            { "visible": false, "targets": '_all' } // Hide all other columns
        ]
    });

    // Initialize Bootstrap Multiselect without search/filter
    jQuery('#columnSelector').multiselect({
        includeSelectAllOption: true, // Enable select all option
        enableFiltering: false, // Disable filtering/search
        maxHeight: 300,
        numberDisplayed: 5,
        buttonText: function(options, select) {
            var selectedCount = options.length;
            return selectedCount + ' selected';
        },
        onChange: function(element, checked) {
            var column = jQuery(element).val();
            // Toggle column visibility
            dataTable.column(column).visible(checked);
             // Save column visibility state to localStorage
             saveColumnVisibility();
        },
        onSelectAll: function() {
            jQuery('#columnSelector option').each(function() {
                var columnIdx = jQuery(this).val();
                dataTable.column(columnIdx).visible(true);
                saveColumnVisibility();
            });
        },
        onDeselectAll: function() {
            jQuery('#columnSelector option').each(function() {
                var columnIdx = jQuery(this).val();
                dataTable.column(columnIdx).visible(false);
                saveColumnVisibility();
            });
        }
    });

    // Pre-select the columns you want initially
    jQuery('#columnSelector').multiselect('select', ['0', '1', '2', '3', '4', '12']); // Selecting '12' assuming it corresponds to "Actions"
    jQuery('#columnSelector').multiselect('updateButtonText');

    // Handle initial state for the column visibility in DataTable
    jQuery('#columnSelector option').each(function() {
        var columnIdx = jQuery(this).val();
        var isVisible = dataTable.column(columnIdx).visible();
        jQuery(this).prop('selected', isVisible);
    });

    jQuery('#columnSelector').multiselect('refresh');
     // Function to save column visibility state to localStorage
     function saveColumnVisibility() {
            var visibleColumns = [];
            jQuery('#columnSelector option').each(function() {
                var columnIdx = jQuery(this).val();
                var isVisible = dataTable.column(columnIdx).visible();
                if (isVisible) {
                    visibleColumns.push(columnIdx);
                }
            });
            localStorage.setItem('columnVisibility', JSON.stringify(visibleColumns));
        }

        // Function to load column visibility state from localStorage
        function loadColumnVisibility() {
            var visibleColumns = JSON.parse(localStorage.getItem('columnVisibility'));
            if (visibleColumns) {
                dataTable.columns().visible(false);
                jQuery('#columnSelector').multiselect('deselectAll', false);
                jQuery.each(visibleColumns, function(index, columnIdx) {
                    dataTable.column(columnIdx).visible(true);
                    jQuery('#columnSelector').multiselect('select', columnIdx);
                });
            } else {
                // Pre-select the first 5 columns if no visibility state is saved
                jQuery('#columnSelector').multiselect('select', ['0', '1', '2', '3', '4']);
            }
            jQuery('#columnSelector').multiselect('updateButtonText');
        }

        // Load column visibility state on page load
        loadColumnVisibility();
});
</script>