@extends('base')

@section('title', 'Search')

@section('content')
    @php
        $authID = \Illuminate\Support\Facades\Auth::id();
    @endphp

    <div class="ui grid" id="globalSearchEmpty">
        <div class="three wide column"></div>
        <div class="ten wide column">

            <h2 class="ui dividing header">{{__('No results for')}}</h2>

            <div class="ui grid">
                <div class="row">
                    <div class="field relativeContainer">
                        <input id="global_search_empty_input" placeholder="{{__('Search')}}" type="text" value="{{$query}}">
                        <img src="{{config('locations.systemImage.asset').'search.png'}}" onclick="globalSearch()">
                        <div class="ui dropdown emptyGlobalPredictions">
                            <div class="menu" id="emptyGlobalPredictions">

                            </div>
                        </div>
                    </div>

                    <div class="header bold">
                        {{__('Were sorry, we couldnt find anything to match your search')}}
                    </div>

                    <div class="header">
                        {{__('But dont give up, heres some tips to help you find what youre looking for')}}
                    </div>

                    <div class="ui list">
                        <div class="item">
                            {{"- "}}{{__('Double check your spelling')}}
                        </div>

                        <div class="item">
                            {{"- "}}{{__('Check our')}}

                            <a class="bold" href="{{ route('courses_catalog') }}">
                                {{__('Courses list')}}
                            </a>

                            {{__('or')}}

                            <a class="bold" href="{{ route('universities_catalog') }}">
                                {{__('Universities list')}}
                            </a>
                        </div>

                        <div class="item">
                            {{"- "}}{{__('Explore our most popular courses below')}}
                        </div>
                    </div>
                </div>

                @if(count($recommendedItems))
                    <div class="row recommended-container">
                        <span class="recommended-title font-title bold">
                            {{__('Recommended universities')}}
                        </span>

                        @include('components.recommendedItemsUniversity')
                    </div>
                @endif
            </div>

        </div>
    </div>

    <script>
        $(function(){
            $('#emptyGlobalPredictions').on('click', '.item:not(.forbidden)', function () {
                $('#global_search_empty_input').val($(this).text());
                globalSearch();
            });
        });

        $(window).on('load', function () {
            if ("{{$authID}}") {
                searchStringRetrieve('global', "{{route('searchStringRetrieve')}}", $('#emptyGlobalPredictions'), $('.emptyGlobalPredictions', ''));
            } else {
                showPredictions('global', $('#emptyGlobalPredictions'), $('.emptyGlobalPredictions'), "{{__('No results found')}}", '');
            }
        });

        $('#global_search_empty_input').on('input focus', function () {
            var text = $(this).val();
            var length = text.length;

            if(length >= 3) {
                globalSearchFilterByName(text, "{{route('globalSearchByName')}}", $('#emptyGlobalPredictions'), $('.emptyGlobalPredictions'), length);
            } else {
                if ("{{$authID}}") {
                    searchStringRetrieve('global', "{{route('searchStringRetrieve')}}", $('#emptyGlobalPredictions'), $('.emptyGlobalPredictions', text));
                } else {
                    showPredictions('global', $('#emptyGlobalPredictions'), $('.emptyGlobalPredictions'), "{{__('No results found')}}", text);
                }
            }
        }).on('keypress', function (e) {
            if (e.which == 13) {

                globalSearch();
            }
        });

        function globalSearch(){
            var input = $('#global_search_empty_input').val();

            if(input.length) {
                if('{{$authID}}') {
                    searchStringStore(input, 'global', "{{route('searchStringStore')}}");
                } else {
                    addPrediction(input, 'global');
                }
            }

            window.location = '/search\?q=' + input;
        }
    </script>

@endsection