@extends('base')

@section('title', 'Search result')

@section('content')
    @php
        use App\Enumerables\Currency;
        use Illuminate\Support\Facades\Auth;
        
        $version = config('app.version');
        $authID = Auth::id();
        $language = config('app.locale');
        $class = ($language == 'en') ? 'top' : '';
        $currencySign = (($_COOKIE['currency'] ?? Currency::GBP) == Currency::GBP) ? '£ ' : '¥ ';
    @endphp

    <div class="ui basic segment">
        <div class="ui grid">
            <div class="one wide column"></div>
            <div class="ten wide column">
                <div class="ui breadcrumb">
                    <a href="{{ route('home') }}" class="section">{{ __('Home') }}</a>
                    <i class="right angle icon divider"></i>
                    <div class="active section">{{ __('Search') }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="ui grid">
        <div class="row list-header-row responsive-row padding-left">
            <div class="sixteen wide column" id="global-search-header">
                <div class="ui basic segment">
                    <h2 class="ui header">{{ __('Search') }}</h2>
                </div>

                <div class="ui basic segment">
                    <div class="searchbar-large relativeContainer">
                        <input class="searchbar-input" id="nameSearch" value="{{$input}}" placeholder="{{__('Search')}}">
                        <img src="{{config('locations.systemImage.asset').'search.png'}}" onclick="searchFilter(1)">
                        <div class="ui dropdown predictions">
                            <div class="menu" id="predictions"></div>
                        </div>
                    </div>

                    <div id="keywords">
                        <div class="keywordsSummary">
                            @if($input != '')
                                @if($resultsCount == 0)
                                    {!!__('global-search-no-results', [
                                        'keyword' => '<span class="bold-result bold-red">'.e($input).'</span>'
                                    ])!!}
                                @else
                                    @php
                                        /**
                                        * @var int $resultsCountUni
                                        * @var int $resultsCountCourse
                                        */

                                        $universityText = ($resultsCountUni == 1) ? __('university') : __('universities');
                                        $courseText = ($resultsCountCourse == 1) ? __('course') : __('courses');
                                    @endphp
                                    {!!__('global-search-with-results', [
                                        'keyword' => '<span class="bold-result bold-red">'.e($input).'</span>',
                                        'universityText' => $universityText,
                                        'universityCount' => '<span class="bold-result bold-red">'.$resultsCountUni.'</span>',
                                        'courseText' => $courseText,
                                        'courseCount' => '<span class="bold-result bold-red">'.$resultsCountCourse.'</span>'
                                    ])!!}
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ui grid">
        <div class="row responsive-row padding-left">
            <div class="sixteen wide column search-results" id="searchTable">
                <div class="grid">
                    <div class="topbar">
                        <div class="ui header">
                            <div class="content">
                                <span class="search-header">{{ __('Sort by') }}</span>
                                <div class="ui inline dropdown icon" id="sort">
                                    <div class="text">{{ __('Popularity') }}</div>
                                    <i class="chevron down icon"></i>
                                    <div class="menu">
                                        <div class="active selected item" data-value="popularity">{{ __('Popularity') }}</div>
                                        <div class="item" data-value="ranking">{{ __('Times Ranking') }}</div>
                                        <div class="item" data-value="qsRanking">{{ __('QS Ranking') }}</div>
                                        <div class="item" data-value="tuition">{{ __('Tuition Fees') }}</div>
                                        <div class="item" data-value="pricelh">{{ __('Unit Price Low-High') }}</div>
                                        <div class="item" data-value="pricehl">{{ __('Unit Price High-Low') }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if($listCount > 1)
                            @include('pagination', ['includeScript'=>false])
                        @endif
                    </div>
                </div>

                @if(count($universities) > 0)
                    {{-- Universities Result --}}
                    <div class="ui grid">
                        <div class="row search-results-header">
                            <span>{{__('Universities')}}</span>
                        </div>


                        {{-- Fiter Table Header --}}
                        <div class="row row-filter-header uni">
                            <div class="two wide column">
                                <div class="segment">
                                    {{ __('University Logo') }}
                                </div>
                            </div>

                            <div class="five wide column">
                                <div class="segment">
                                    {{ __('Universities') }}
                                </div>
                            </div>

                            <div class="three wide column">
                                <div class="segment">
                                    {{ __('Times Ranking') }}
                                </div>
                            </div>

                            <div class="three wide column">
                                <div class="segment">
                                    {{ __('QS Ranking') }}
                                </div>
                            </div>

                            <div class="three wide column">
                                <div class="segment">
                                    {{ __('Student Satisfaction') }}
                                </div>
                            </div>
                        </div>
                        <div class="ui hidden divider"></div>
                        {{-- End Fiter Table Header --}}

                        @include('catalog.lists.universities_list')
                    </div>
                    {{-- End Universities Result --}}
                @endif

                @if(count($courses) > 0)
                    {{--Courses Result--}}
                    <div class="ui grid">
                        <div class="row search-results-header">
                            <span>{{__('Courses')}}</span>
                        </div>

                        {{-- Fiter Table Header --}}
                        <div class="row row-filter-header">
                            <div class="three wide column">
                                <div class="segment">
                                    {{ __('Universities') }}
                                </div>
                            </div>

                            <div class="four wide column">
                                <div class="segment left">
                                    {{ __('Courses') }}
                                </div>
                            </div>

                            <div class="three wide column center">
                                <div class="segment relativeContainer">
                                    {{__('Course Level')}}
                                </div>
                            </div>

                            <div class="three wide column center">
                                <div class="segment relativeContainer">
                                    {{__('Tuition Fee')}}
                                </div>
                            </div>

                            <div class="three wide column popupContainer center">
                                <div class="segment relativeContainer">
                                    {{__('unit-price')}}
                                    <img class="popupTrigger" src="{{config('locations.systemImage.asset').'question_mark.png'}}">
                                    <div class="ui popup filter_header_price popup-left" id="popup-service-fee">
                                        <div class="text">
                                            {{__('service-fee-popup-1-list')}}
                                        </div>

                                        <div class="text">
                                            {{__('service-fee-popup-2')}}
                                        </div>

                                        <div class="text">
                                            {{__('service-fee-popup-3')}}
                                        </div>

                                        <span class="container">
                                            <span class="triangle"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="ui hidden divider"></div>
                        {{-- End Fiter Table Header --}}

                        @include('catalog.lists.courses_list')
                    </div>
                    {{--End Courses Result--}}
                @endif

                {{--Start Pagination--}}
                @if($listCount > 1)
                    @include('pagination', ['includeScript'=>true])
                @endif

                {{--End Pagination--}}
            </div>
        </div>
    </div>
    @include('modals.add_to_cart_validation_modal')

    <script src="{{ asset('js/simpleCountdown.js' ).'?'.$version }}"></script>
    <script>
        $(function(){
            $('#sort .menu').on('click', function () {
                searchFilter(1);
            });

            $('#predictions').on('click', '.item:not(.forbidden)', function () {
                $('.searchbar-input').val($(this).text());

                searchFilter(1);
            });

            @if(isset($_GET['f']))
                $('#sort').dropdown('set selected', "{{$_GET['f']}}");
            @endif

            $('#searchTable').on('click', '.ui.header .content', function (e) {
                if (!e.target.classList.contains('dropdown') && !e.target.classList.contains('item')) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    $('.ui.header .content .dropdown').dropdown('show');
                }
            });

            $('.segment.relativeContainer .popupTrigger').popup({
                popup: $('#filter_header_price')
            });

            $('.timer.countdown').each(function () {
                simpleCountdown($(this), '{{__('countdown-D')}}', '{{__('countdown-H')}}', '{{__('countdown-M')}}', '{{__('countdown-S')}}');
            });
        });

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

        $('.searchbar-large').on('input focus', '.searchbar-input', function () {
            var text = $(this).val();
            var length = text.length;

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

                searchFilter(1);
            }
        });

        function searchFilter(num) {
            $('.predictions').dropdown('hide');

            var input = $('.searchbar-input').val();

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

            window.location = "{{route('globalSearch')}}" + '/?q=' + input + '&p=' + num + '&f=' + $('#sort .active.selected').attr('data-value');
        }
    </script>
@endsection

@section('document_ready_scripts')
    $('.ui.checkbox').checkbox();
@endsection