<form method="method" action="{{ route('Shop.Searches.search') }}" id="search-general">
    <div class="input-group">
        @include('components.form.autocomplete', [
            'name' => 'search',
            'url' => route('Shop.Articles.autocomplete'),
            'data' => [
                'name' => $search['search_name'] ?? '',
            ],
        ])
        <div class="input-group-append">
            <span class="input-group-text"><i class="btn btn-sm fa fa-search"></i></span>
        </div>
        <div class="input-group-append d-lg-none">
            <button class="navbar-toggler navbar-light" type="button" data-toggle="collapse"
                data-target="#navbarContentMobile" aria-controls="navbarContentMobile" aria-expanded="false"
                aria-label="Menu catégories">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </div>
</form>

@push('js')
    <script>
        $(function() {
            const articleShowUrlTemplate = "{{ route('Shop.Articles.show', ['id' => '__ARTICLE_ID__']) }}";

            $('#search-general .fa-search').click(function() {
                $('#search-general').submit();
            });

            function redirectToArticle(item, evt) {
                if (!item || typeof item.value === 'undefined' || item.value === null || item.value === '') {
                    return;
                }

                if (evt) {
                    evt.preventDefault();
                    evt.stopPropagation();
                }

                const targetUrl = articleShowUrlTemplate.replace('__ARTICLE_ID__', item.value);
                window.location.href = targetUrl;
            }

            initAutocomplete('#search_name', redirectToArticle);
        });
    </script>
@endpush
