<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">Quotation ID</option>
    <option value="2">Customer Name</option>
    <option value="3">Customer Email</option>
    <option value="4">Product Name</option>
    <option value="5">Start Date</option>
    <option value="6">End Date</option>
    <option value="7">Shifts</option>
    <option value="8">Final Price</option>
    <option value="9">Status</option>
    <option value="10">Discount Status</option>
    <option value="11">Discount Requested</option>
    <option value="12">Approver Comments</option>
    <option value="13">Created On</option>
    <option value="14">Action</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;
    width:240px;
}

.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;
}
.multiselect-container>li>a>label.checkbox, .multiselect-container>li>a>label.radio {
    margin: 0;
    background-color: #fff;
    color: #000;
}
</style>





<script>
jQuery(document).ready(function($) {
    // Initialize DataTable with default visible columns
    var dataTable = jQuery('#quotation-table').DataTable({
        "columnDefs": [
            { "visible": false, "targets": '_all' } // Start with all columns hidden
        ]
    });

    // Default columns to be visible
    var defaultVisibleColumns = ['0', '1', '2', '3', '4', '14'];
    defaultVisibleColumns.forEach(function(columnIdx) {
        dataTable.column(columnIdx).visible(true);
    });

    // Initialize Bootstrap Multiselect
    jQuery('#columnSelector').multiselect({
        includeSelectAllOption: false, 
        enableFiltering: false,
        maxHeight: 300,
        numberDisplayed: 5,
        buttonText: function(options, select) {
            var selectedCount = options.length;
            return selectedCount + ' selected';
        },
        onChange: function(element, checked) {
            var columnIdx = jQuery(element).val();
            dataTable.column(columnIdx).visible(checked);
            saveColumnVisibility();
            updateSelectAllCheckbox();
        }
    });

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

    // Function to save column visibility state to localStorage
    function saveColumnVisibility() {
        var visibleColumns = [];
        jQuery('#columnSelector option').each(function() {
            var columnIdx = jQuery(this).val();
            if (dataTable.column(columnIdx).visible()) {
                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 {
            // Default pre-selection
            jQuery('#columnSelector').multiselect('select', defaultVisibleColumns);
        }
        jQuery('#columnSelector').multiselect('updateButtonText');
        
    }

    loadColumnVisibility();

});
</script>