{{-- Suggest dropdown --}}
{{-- for config details see https://github.com/lzwme/bootstrap-suggest-plugin --}}

{{-- Required settings: --}}
{{-- none --}}

{{-- Optional settings: --}}
{{-- label: label associated with the input; id is required --}}
{{-- id: required if label is specified --}}
{{-- name:  --}}
{{-- placeholder --}}
{{-- conatainerId --}}
{{-- containerExtraClass --}}
{{-- inputExtraClass --}}

{{-- Automatic config (optional), for details --}}
{{-- autoInit: boolean indicating if dropdown should be automatically configured using below options --}}
{{-- searchName: alternative name, used by DataTable utility --}}
{{-- searchFilelds: array of search fields --}}
{{-- effectiveFields: array of effective fields --}}
{{-- effectiveFieldsAlias: array of effective fields' aliases --}}
{{-- showHeader: boolean indicating if headers should be displayed above dropdown options --}}
{{-- emptyTip: string displayed when no values are provided --}}
{{-- idField: number indicating index of the ID field, defaultys to 0 --}}
{{-- keyField: number indicating index of the KEY field, defaults to 1 --}}
{{-- getDataMethod: string indicating how dropdown is populated, defaults to "url" --}}
{{-- data: name of variable containing predefined data used to populate the dropdown --}}
{{-- data: array of data objects (alternative to variable name) --}}
{{-- useSingleCallback: boolean indicating if the same method should be called when value is set or removed --}}
{{-- triggerOnInput: boolean indicating if callback should be executed when user enters data --}}
{{-- genericCallback: name of the generic callback function (event) --}}
{{-- setCallback: name of the data set callback function (event, selectedData, selectedRawData) --}}
{{-- unsetCallback: name of the data unset callback function (event, selectedData, selectedRawData) --}}
{{-- changeCallback: name of the change callback function (event) --}}
{{-- inputCallback: name of the input callback function (event) --}}

<div
    class="form-input-container suggest-control-container {{$containerExtraClass ?? ''}}"
    @if(!empty($containerId)) id="{{$containerId}}" @endif
>
    @if(!empty($label) && !empty($id))
        <label for="{{$id}}">{{$label}}</label>
    @endif

    <div class="suggest-input-container">
        <input
            type="text"
            class="form-control {{$inputExtraClass ?? ''}}"
            @if(!empty($id)) id="{{$id}}" @endif
            @if(!empty($name)) name="{{$name}}" @endif
            placeholder="{{$placeholder ?? ' '}}"
            autocomplete="chrome-off"
            @if($autoInit ?? false)
                data-auto-init="true"
                data-search-name="{{$searchName ?? ''}}"
                data-search-fields="{{json_encode($searchFields)}}"
                data-effective-fields="{{json_encode($effectiveFields)}}"
                data-effective-fields-alias="{{json_encode($effectiveFieldsAlias)}}"
                data-show-header="{{json_encode($showHeader ?? false)}}"
                data-empty-tip="{{$emptyTip ?? __('All_alternative')}}"
                data-index-id="{{$idField ?? 0}}"
                data-index-key="{{$keyField ?? 1}}"
                data-source="{{$getDataMethod ?? 'url'}}"
                data-url="{{$url ?? ''}}"
                data-data="{{json_encode($data ?? [])}}"

                @if($triggerOnInput ?? false) data-input-trigger="true" @endif

                @if($useSingleCallback ?? false)
                    data-generic-callback="{{$genericCallback ?? ''}}"
                @else
                    data-set-callback="{{$setCallback ?? ''}}"
                    data-unset-callback="{{$unsetCallback ?? ''}}"
                    data-change-callback="{{$changeCallback ?? ''}}"
                    data-input-callback="{{$inputCallback ?? ''}}"
                @endif
            @endif
        >

        <div class="input-group-btn">
            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown"></button>
            <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
        </div>
    </div>
</div>