<div class="form-group">
    <label for="columnSelector">Select Columns:</label>
    <select id="columnSelector" multiple class="form-control">
        <option value="0">Sr. No</option>
        <option value="1">Lead ID</option>
        <option value="2">Date Raised</option>
        <option value="3">User Name</option>
        <option value="4">User Email</option>
        <option value="5">Phone</option>
        <option value="6">Rental Start Date</option>
        <option value="7">Rental End Date</option>
        <option value="8">Product Name</option>
        <option value="9">Subsidary Product Name</option>
        <option value="10">Location</option>
        <option value="11">User Note</option>
        <option value="12">Customer Status</option>
        <option value="13">Status</option>
        <option value="14">Customer ID</option>
        <option value="15">BA remarks</option>
        <option value="16">Last Updated</option>
        <option value="17">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;
}

.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
        var dataTable = jQuery('#guestEnqTable').DataTable({
            "scrollX": true,
            "columnDefs": [
                { "visible": true, "targets": [0, 1, 2, 3, 4,17] }, // Show only the first 5 columns initially
                { "visible": false, "targets": '_all' } // Hide all other columns
            ]
        });

        // Initialize Bootstrap Multiselect
        jQuery('#columnSelector').multiselect({
            includeSelectAllOption: true,
            enableFiltering: false, // Disable filtering/search
            maxHeight: 300,
            numberDisplayed: 5,
            buttonText: function(options, select) {
                if (options.length === 0) {
                    return 'None selected';
                } else if (options.length > 5) {
                    return options.length + ' selected';
                } else {
                    var labels = [];
                    options.each(function() {
                        labels.push(jQuery(this).text());
                    });
                    return labels.join(', ') + '';
                }
            },
            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();
            });
            }
        });

        // 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>