@props([
    'id' => 'column-visibility',
    'label' => 'Kolumny',
    'columns' => [],
    'buttonClass' => 'btn btn_table_status new-btn-border-1',
    'iconClass' => 'fas fa-columns',
    'counter' => true,
])

<div class="dropdown" style="font-size: 2rem">
    <button
        class="{{ $buttonClass }} dropdown-toggle {{ $id }}-toggle-btn"
        type="button"
        style="font-size: 1.7rem;"
        id="{{ $id }}_toggle"
        data-toggle="dropdown"
        title="{{ $label }}"
        aria-label="{{ $label }}"
        aria-haspopup="true"
        aria-expanded="false"
    >
        <i class="{{ $iconClass }}" aria-hidden="true"></i>
        @if($counter)
            <span class="badge badge-light {{ $id }}-count">0</span>
        @endif
        <span class="sr-only">{{ $label }}</span>
    </button>

    <div class="dropdown-menu p-2 {{ $id }}-menu column-visibility-menu" aria-labelledby="{{ $id }}_toggle">
        <div class="small text-muted mb-2">Przeciągnij, aby zmienić kolejność kolumn.</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" draggable="true" data-column-key="{{ $colKey }}">
                        <span class="text-muted mr-2 {{ $id }}-drag-handle" style="cursor: grab; width: 16px; text-align: center;">
                            <i class="fas fa-grip-lines"></i>
                        </span>

                        <div class="form-check mb-0" style="padding-left: 1.2rem;">
                            <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: 2.05rem;
        padding: 0.3rem 0.58rem;
        border-radius: 0.25rem;
        border: 1px solid #4f8fc9 !important;
        background: linear-gradient(180deg, #6caee0 0%, #5b9bd5 100%) !important;
        color: #ffffff !important;
        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 !important;
        background: linear-gradient(180deg, #64a8dd 0%, #4e8fc8 100%) !important;
        color: #ffffff !important;
    }

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

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

    .{{ $id }}-toggle-btn .badge {
        min-width: 1.25rem;
        padding: 0.2rem 0.35rem;
        font-size: 0.82rem;
        background: #e7f3ff;
        color: #5db7ff;
        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 }}-item.dragging {
        opacity: .45;
    }

    .{{ $id }}-item.drag-over-top {
        border-top: 2px solid #2b8ff0 !important;
    }

    .{{ $id }}-item.drag-over-bottom {
        border-bottom: 2px solid #2b8ff0 !important;
    }
</style>

<script>
    (function () {
        var toggleId = '#{{ $id }}_toggle';
        var itemClass = '.{{ $id }}-item';
        var listClass = '.{{ $id }}-list';
        var toggleClass = '.{{ $id }}-toggle';
        var hasCounter = {{ $counter ? 'true' : 'false' }};
        var draggingKey = null;

        function clearDragMarkers() {
            $(itemClass).removeClass('drag-over-top drag-over-bottom');
        }

        function currentOrder() {
            var order = [];
            $(listClass).find(itemClass).each(function () {
                var key = String($(this).data('column-key') || '');
                if (key) {
                    order.push(key);
                }
            });
            return order;
        }

        function updateCount() {
            if (!hasCounter) {
                return;
            }
            var totalChecked = $(listClass).find(toggleClass + ':checked').length;
            $('.{{ $id }}-count').text(totalChecked);
        }

        $(document).on('dragstart', itemClass, function (e) {
            draggingKey = String($(this).data('column-key') || '');
            $(this).addClass('dragging');
            if (e.originalEvent && e.originalEvent.dataTransfer) {
                e.originalEvent.dataTransfer.effectAllowed = 'move';
                e.originalEvent.dataTransfer.setData('text/plain', draggingKey);
            }
        });

        $(document).on('dragover', itemClass, function (e) {
            e.preventDefault();
            if (!draggingKey) {
                return;
            }

            var $target = $(this);
            var targetKey = String($target.data('column-key') || '');
            if (!targetKey || targetKey === draggingKey) {
                return;
            }

            clearDragMarkers();
            var rect = this.getBoundingClientRect();
            var midpoint = rect.top + (rect.height / 2);
            if ((e.originalEvent.clientY || 0) < midpoint) {
                $target.addClass('drag-over-top');
            } else {
                $target.addClass('drag-over-bottom');
            }
        });

        $(document).on('drop', itemClass, function (e) {
            e.preventDefault();
            var $target = $(this);
            var targetKey = String($target.data('column-key') || '');
            if (!draggingKey || !targetKey || targetKey === draggingKey) {
                clearDragMarkers();
                return;
            }

            var $dragging = $(listClass).find(itemClass + '[data-column-key="' + draggingKey + '"]');
            if (!$dragging.length) {
                clearDragMarkers();
                return;
            }

            var rect = this.getBoundingClientRect();
            var midpoint = rect.top + (rect.height / 2);
            if ((e.originalEvent.clientY || 0) < midpoint) {
                $target.before($dragging);
            } else {
                $target.after($dragging);
            }

            clearDragMarkers();
            $(document).trigger('{{ $id }}:orderChanged', [currentOrder()]);
        });

        $(document).on('dragend', itemClass, function () {
            draggingKey = null;
            $(this).removeClass('dragging');
            clearDragMarkers();
        });

        $(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>