@props([
    'label' => 'Wyszukaj:',
    'inputId' => 'search',
    'searchBtnId' => 'search-btn',
    'clearBtnId' => 'search-clear',
    'placeholder' => '',
    'searchableColumns' => [],
    'wrapperClass' => 'input-group wyszukiwarka ajax-crud-search',
    'labelClass' => 'form-label my_HalfFrame my_HalfFrameSearch input-group-text',
    'inputClass' => 'form-control',
    'searchButtonClass' => 'btn btn-primary',
    'clearButtonClass' => 'btn btn-danger',
    'searchColumnsId' => null,
    'searchColumnsLabel' => 'Szukaj w',
    'searchColumnsOptions' => [],
    'searchColumnsButtonClass' => 'btn btn-primary',
    'searchColumnsIconClass' => 'fas fa-search',
])

@php
    $columnsCsv = collect($searchableColumns)
        ->map(function ($column) {
            return trim((string) $column);
        })
        ->filter(function ($column) {
            return $column !== '';
        })
        ->implode(',');

    $useSearchColumnsSelector = is_string($searchColumnsId)
        && trim($searchColumnsId) !== ''
        && is_array($searchColumnsOptions)
        && count($searchColumnsOptions) > 0;
@endphp

<div class="{{ $wrapperClass }}">
    <label class="{{ $labelClass }}">{{ $label }}</label>

    @if($useSearchColumnsSelector)
        <div class="input-group-prepend ajax-search-columns-inline">
            <x-search-columns-selector
                :id="$searchColumnsId"
                :label="$searchColumnsLabel"
                :columns="$searchColumnsOptions"
                :button-class="$searchColumnsButtonClass"
                :icon-class="$searchColumnsIconClass"
                wrapper-class="dropdown"
                theme="searchbox"
            />
        </div>
    @endif

    <input id="{{ $inputId }}" class="{{ $inputClass }}" placeholder="{{ $placeholder }}" data-search-columns="{{ $columnsCsv }}" style="width: 14vw;" />
    <button type="button" class="{{ $searchButtonClass }}" id="{{ $searchBtnId }}" title="Wyszukaj">
        <i class="fas fa-search"></i>
    </button>
    <button type="button" class="{{ $clearButtonClass }}" id="{{ $clearBtnId }}" title="Wyczyść">
        <i class="fas fa-times"></i>
    </button>
</div>

@if($useSearchColumnsSelector)
    <style>
        .ajax-crud-search .ajax-search-columns-inline {
            margin-left: -1px;
            margin-right: -1px;
        }

        .ajax-crud-search .ajax-search-columns-inline .dropdown {
            display: flex;
        }

        .ajax-crud-search .ajax-search-columns-inline .dropdown-menu {
            left: 0;
            right: auto;
        }

        .ajax-crud-search .ajax-search-columns-inline .dropdown-toggle {
            border-radius: 0 !important;
        }
    </style>
@endif