@props(['columns' => []])
<div class="dropdown">
    <button class="btn btn-danger dropdown-toggle" type="button" id="columnSelectorDropdown" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="fas fa-columns me-1"></i> Customize Columns
    </button>
    <div class="dropdown-menu p-3 shadow-sm column-selector-dropdown" style="width: 320px;">
        <h6 class="dropdown-header border-bottom pb-2 mb-2">Toggle Columns Visibility</h6>
        <div class="row g-2">
            @foreach($columns as $column)
                <div class="col-6">
                    <div class="form-check form-switch">
                        <input class="form-check-input column-checkbox" type="checkbox" value="{{ $column['value'] }}" id="{{ $column['id'] }}" @checked($column['checked'] ?? false)>
                        <label class="form-check-label" for="{{ $column['id'] }}">{{ $column['label'] }}</label>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="dropdown-divider my-2"></div>
        <div class="d-flex justify-content-between">
            <button id="select-all-columns" class="btn btn-sm btn-outline-danger" type="button">
                <i class="fas fa-check-square me-1"></i> Select All
            </button>
            <button id="deselect-all-columns" class="btn btn-sm btn-outline-secondary" type="button">
                <i class="fas fa-square me-1"></i> Deselect All
            </button>
        </div>
    </div>
</div>