<div id="searchForm">
    <form action="/{{!empty($links->search) ? $links->search->route : ''}}">
        <label class="form-title" for="searchbar">@lang('site/global.quickSearch')</label>
        <input type="text" class="search-field" id="searchbar" name="term" value=""
               placeholder="@lang('site/global.searchPlaceholder')" autocomplete="off"
               data-language-id="{{ \App::getLanguage()->id }}">
        <label class="searchbutton">
            <input type="submit" value=""/>
            @include('site.svg.icon.search')
        </label>
    </form>
    <div id="searchresults">

    </div>
</div>
@section('searchbar-js')
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var searchBar = document.getElementById('searchbar');
            var searchForm = document.querySelector('#searchForm form');
            var languageId = searchBar.dataset.languageId;

            var sh = searchHandler.init("{{ route('catalog.search')}}");

            @if(isset($links))
            var resultHolder = document.getElementById('searchresults');
            var liSelected;


            searchForm.addEventListener('submit', function(e) {
                if(liSelected) {
                    if(liSelected.find('a').attr('href')) {
                        window.location = liSelected.find('a').attr('href');
                    }
                } else {
                   // if(searchBar.value !== '') {
                        searchForm.submit();
                    //}
                }
                e.preventDefault();
                return false;
            });

            searchBar.addEventListener('keyup', debounce(function (e) {
                if (e.which !== 40 && e.which !== 13 && e.which !== 38) {
                    resultHolder.style.display = "block";
                    sh.search(searchBar.value, 1, 5, languageId)
                        .done(function (result) {
                            var htmlString = '<ul>';
                            var currentType = '';
                            var route = '{{$links->products->route}}';

                            if (typeof result.data !== 'undefined' && result.data.length > 0) {
                                for (var i = 0; i < result.data.length; i++) {
                                    var item = result.data[i];
                                    if (item.attributes.hasOwnProperty('translation')) {
                                        if (item.type !== currentType) {
                                            currentType = item.type;
                                            htmlString += '</ul><ul><h4>' + item.type + '</h4><hr>';
                                        }
                                        var resultTranslation = item.attributes.translation[0].attributes;
                                        if (resultTranslation.hasOwnProperty('title') && resultTranslation.title !== '') {
                                            htmlString += '<li>' +
                                                '<a href="/' + route + '/' + result.data[i].attributes.translation[0].attributes.slug + '">' +
                                                result.data[i].attributes.translation[0].attributes.title
                                                + '</a>' +
                                                '</li>'

                                        } else if (resultTranslation.hasOwnProperty('name') && resultTranslation.name !== '') {
                                            htmlString += '<li>' +
                                                '<a href="/' + route + '/' + result.data[i].attributes.translation[0].attributes.slug + '">' +
                                                result.data[i].attributes.translation[0].attributes.name
                                                + '</a>' +
                                                '</li>'
                                        }
                                    }
                                }
                            } else {
                                htmlString += "<h4>Er zijn geen resultaten voor '" + searchBar.value + "'</h4>";
                            }
                            htmlString += '</ul>';

                            resultHolder.innerHTML = htmlString;
                            resultHolder.style.display = "block";


                            document.addEventListener('click', function (ev) {
                                if (ev.target !== resultHolder) {
                                    resultHolder.style.display = "none";
                                }
                            });
                        })
                        .fail(function () {
                            // An error occurred
                        });
                } else {
                    var li = $(resultHolder).find('li');
                    if (e.which === 40) {
                        if (liSelected) {
                            liSelected.removeClass('selected');
                            $next = liSelected.next();
                            if ($next.length > 0) {
                                liSelected = $next.addClass('selected');
                            } else {
                                liSelected = li.eq(0).addClass('selected');
                            }
                            console.log("liSelected", liSelected);
                        } else {
                            liSelected = li.eq(0).addClass('selected');
                        }
                    } else if (e.which === 38) {
                        if (liSelected) {
                            liSelected.removeClass('selected');
                            $prev = liSelected.prev();
                            if ($prev.length > 0) {
                                liSelected = $prev.addClass('selected');
                            } else {
                                liSelected = li.last().addClass('selected');
                            }
                            console.log("liSelected", liSelected);
                        } else {
                            liSelected = li.last().addClass('selected');
                        }
                    } else if( e.which === 13) {
                        console.log('form submit here');
                        searchForm.submit();
                    }
                }
            }, 200));

            @endif


        })
    </script>
@endsection