@props([
    'title' => 'Link to accounts',
    'model' => 'lead',
    'cols' => 'fullname, address+address_line_1',
    'id' => 'multi_search',
    'limit' => 8,
    'quickSelectGroups' => [],
    'firstMultiSearch' => false,
    'preSelected' => []
])

<div class="row my-3">
    <div class="col-12">
        <strong>{!! $title !!}</strong> <input
            id="{!! $id !!}"
            data-model="{!! $model !!}"
            data-cols="{!! $cols !!}"
            data-limit="{!! $limit !!}"
            class="multi_search_input" type="text" />

        <div id="{!! $id !!}_results"></div>
        <div id="{!! $id !!}_selections"></div>

    </div>
</div>

@if(sizeof($preSelected) > 0)
<script>

    $(document).ready(function() {
        @foreach($preSelected as $selected)
            addSelection(
                "{!! $id !!}",
                "{!! $selected['id'] !!}",
                "{!! $selected['info'] !!}"
            );
        @endforeach
    });
</script>
@endif

@if($firstMultiSearch)
<script>

    $(document).ready(function() {

        $('body').on('input', '.multi_search_input', function() {
            getMultiSearchOptions(
                $(this).attr('id'),
                $(this).val(),
                $(this).data('model'),
                $(this).data('cols'),
                $(this).data('limit')
            );
        });

        $('body').on('click', '.multi_search_result', function() {
            clickMultiSearchResult($(this));
        });

        $('body').on('click', '.multi_search_selection', function() {
            clickMultiSearchSelection($(this));
        });

    });

    function getMultiSearchOptions(id, val, model, cols, limit){
        if(val.length > 2){
            $('#'+id).addClass('input-ajax-loading');
            ajaxCall('multiSearchSelect', {
                caller_id: id,
                val: val,
                model: model,
                cols: cols,
                limit: limit
            });
        }else{
            document.getElementById(id+'_results').innerHTML = "";
        }
    }

    function multiSearchSelectComplete(data){
    console.log('ajaxcomplete', data);
        $('#'+data.caller_id).removeClass('input-ajax-loading');
    }

    function multiSearchSelectSuccess(data){
        document.getElementById(data.caller_id+'_results').innerHTML = "";
        for (const key in data.results) {
            document.getElementById(data.caller_id+'_results').innerHTML +=
                '<div class="multi_search_item multi_search_result" data-caller_id="'+data.caller_id+'" data-result_id="'+key+'">'+data.results[key]+'</div>';
        }
    }

    var multi_search_selections = {};

    function clickMultiSearchResult(ele){
        var caller_id = ele.data('caller_id');
        var result_id = ele.data('result_id');
        var display_info = ele.html();
        addSelection(caller_id, result_id, display_info);
        ele.remove();
    }

    function addSelection(caller_id, result_id, display_info){
        if(multi_search_selections[caller_id] == undefined){
            multi_search_selections[caller_id] = {};
        }
        if(multi_search_selections[caller_id][result_id] != undefined){
            return;
        }
        // Track selection in array
        multi_search_selections[caller_id][result_id] = result_id;
        // add selection visualy and with hidden input
        var hidden_input = '<input type="hidden" name="'+caller_id+'[]" value="'+result_id+'" />';
        document.getElementById(caller_id+'_selections').innerHTML +=
                '<div class="multi_search_item multi_search_selection" data-caller_id="'+caller_id+'" data-result_id="'+result_id+'"><i class="fa fa-check"></i>'+display_info+hidden_input+'</div>';
    }

    function clickMultiSearchSelection(ele){
        var caller_id = ele.data('caller_id');
        var result_id = ele.data('result_id');
        if(multi_search_selections[caller_id][result_id] != undefined){
            multi_search_selections[caller_id][result_id] = undefined;
            ele.remove();
            return;
        }
        alert('Error removing selection, '+result_id+' could not be found.');
    }

</script>
@endif