@props([
    'id' => 'search-columns',
    'label' => 'Szukaj w',
    'columns' => [],
    'buttonClass' => 'btn btn_table_status new-btn-border-1',
    'iconClass' => 'fas fa-search',
    'wrapperClass' => 'dropdown',
    'theme' => 'default',
])

<div class="{{ $wrapperClass }} {{ $id }}-wrapper {{ $id }}-theme-{{ $theme }}">
    <button
        class="{{ $buttonClass }} dropdown-toggle {{ $id }}-toggle-btn"
        type="button"
        id="{{ $id }}_toggle"
        data-toggle="dropdown"
        title="{{ $label }}"
        aria-label="{{ $label }}"
        aria-haspopup="true"
        aria-expanded="false"
    >
        <i class="{{ $iconClass }}" aria-hidden="true"></i>
        <span class="badge badge-light {{ $id }}-count">0</span>
        <span class="sr-only">{{ $label }}</span>
    </button>

    <div class="dropdown-menu p-2 {{ $id }}-menu" aria-labelledby="{{ $id }}_toggle" style="min-width: 280px;">
        <div class="small text-muted mb-2">Wybierz kolumny do wyszukiwania.</div>

        <div class="{{ $id }}-list">
            @foreach($columns as $column)
                @php
                    $colKey = $column['key'] ?? '';
                    $colLabel = $column['label'] ?? $colKey;
                    $checked = array_key_exists('checked', $column) ? (bool) $column['checked'] : true;
                    $disabled = array_key_exists('disabled', $column) ? (bool) $column['disabled'] : false;
                @endphp
                @if($colKey !== '')
                    <div class="d-flex align-items-center {{ $id }}-item py-1 px-1 mb-1 border rounded form-control">
                        <div class="mb-0" style="padding-left: 1.6rem;">
                            <input
                                class="form-check-input {{ $id }}-toggle"
                                type="checkbox"
                                id="{{ $id }}_{{ $colKey }}"
                                data-column-key="{{ $colKey }}"
                                {{ $checked ? 'checked' : '' }}
                                {{ $disabled ? 'disabled' : '' }}
                            >
                            <label class="form-check-label" for="{{ $id }}_{{ $colKey }}">
                                {{ $colLabel }}
                            </label>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>

        <div class="dropdown-divider"></div>
        <button type="button" class="btn btn-sm btn-secondary w-100 {{ $id }}-reset">Przywróć domyślne</button>
    </div>
</div>

<style>
    .{{ $id }}-toggle-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        min-width: 3.05rem;
        min-height: 2rem;
        padding: 0.28rem 0.55rem;
        border-radius: 0.25rem;
        border: 1px solid #4f8fc9;
        background: linear-gradient(180deg, #67abd8 0%, #4f97cc 100%);
        color: #ffffff;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }

    .{{ $id }}-toggle-btn:hover,
    .{{ $id }}-toggle-btn:focus,
    .{{ $id }}-toggle-btn:active {
        border-color: #3f7fb9;
        background: linear-gradient(180deg, #5fa2d2 0%, #468abd 100%);
        color: #ffffff;
    }

    .{{ $id }}-toggle-btn i {
        font-size: 1.1rem;
    }

    .{{ $id }}-toggle-btn.dropdown-toggle::after {
        display: none;
    }

    .{{ $id }}-toggle-btn .badge {
        min-width: 1.25rem;
        padding: 0.2rem 0.35rem;
        font-size: 0.74rem;
        background: #f2f8ff;
        color: #2f6fa9;
        border: 1px solid #9fc0df;
    }

    .{{ $id }}-menu {
        border: 1px solid #9fc0df;
        border-radius: 0.35rem;
        box-shadow: 0 8px 16px rgba(31, 77, 121, 0.15);
    }

    .{{ $id }}-item:hover,
    .{{ $id }}-item.is-hover {
        background: rgba(0, 55, 255, 0.15) !important;
    }

    .{{ $id }}-theme-searchbox .{{ $id }}-toggle-btn {
        min-height: calc(1.5em + .75rem + 2px);
        height: calc(1.5em + .75rem + 2px);
        padding: .375rem .6rem;
        border-radius: 0 .25rem .25rem 0;
        border: 1px solid #6c757d;
        background: #6c757d;
        color: #ffffff;
        box-shadow: none;
    }

    .{{ $id }}-theme-searchbox .{{ $id }}-toggle-btn:hover,
    .{{ $id }}-theme-searchbox .{{ $id }}-toggle-btn:focus,
    .{{ $id }}-theme-searchbox .{{ $id }}-toggle-btn:active {
        border-color: #5a6268;
        background: #5a6268;
        color: #ffffff;
    }

    .{{ $id }}-theme-searchbox .{{ $id }}-toggle-btn i {
        font-size: 1rem;
    }

    .{{ $id }}-theme-searchbox .{{ $id }}-toggle-btn .badge {
        min-width: 1.3rem;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.05;
        padding: 0.1rem 0.3rem;
        background: #6c757d;
        border: 1px solid #ffffff;
        color: #ffffff;
        /*
        background: #ffffff;
        border: 1px solid #b5d8ff;
        color: #5db7ff;
        #5a6268
        */
        margin-top: 3px;
    }
</style>

<script>
    (function () {
        var toggleId = '#{{ $id }}_toggle';
        var itemClass = '.{{ $id }}-item';
        var menuClass = '.{{ $id }}-menu';
        var toggleClass = '.{{ $id }}-toggle';

        function updateCount() {
            var active = $(menuClass).find(toggleClass + ':checked:not(:disabled)').length;
            $('.{{ $id }}-count').text(active);
        }

        $(document).on('change', toggleClass, updateCount);

        $(document).on('mouseenter', itemClass, function () {
            $(this).addClass('is-hover');
        });

        $(document).on('mouseleave', itemClass, function () {
            $(this).removeClass('is-hover');
        });

        $(document).on('click', '.{{ $id }}-reset', function () {
            setTimeout(updateCount, 0);
        });

        $(document).on('shown.bs.dropdown', '#{{ $id }}_toggle', updateCount);
        $(document).on('{{ $id }}:refresh', updateCount);
        $(document).on('show.bs.dropdown', '#{{ $id }}_toggle', function () {
            $(this).tooltip('hide');
        });

        $(function () {
            var $toggle = $(toggleId);
            if ($toggle.length) {
                $toggle.tooltip({
                    trigger: 'hover focus',
                    placement: 'bottom',
                    container: 'body'
                });
            }
            updateCount();
        });
    })();
</script>

<script>
    $(document).on('click', '.{{ $id }}-menu', function (e) {
        e.stopPropagation();
    });
</script>