@section('keywords')
    @if($input != '')
        <div class="keywordsSummary">
            @php
                $categoryCount = count($categoryName ?? []);
                $categoryName = ($categoryName) ? explode('--',$categoryName[0])[2] : '';
                $translationSuffix = ($categoryCount != 1) ? '-without-category': '';
            @endphp

            @if($resultsCount == 0)
                {!!__('courses-search-no-results'.$translationSuffix, [
                    'categoryName' => '<span class="bold-result bold-red">'.$categoryName.'</span>',
                    'keyword' => '<span class="bold-result bold-red">'.e($input).'</span>'
                ])!!}
            @elseif($resultsCount == 1)
                {!!__('courses-search-one-result'.$translationSuffix, [
                    'categoryName' => '<span class="bold-result bold-red">'.$categoryName.'</span>',
                    'keyword' => '<span class="bold-result bold-red">'.e($input).'</span>',
                    'resultCount' =>'<span class="bold-result bold-red">'.$resultsCount.'</span>'
                ])!!}
            @else
                {!!__('courses-search-many-results'.$translationSuffix, [
                    'categoryName' => '<span class="bold-result bold-red">'.$categoryName.'</span>',
                    'keyword' => '<span class="bold-result bold-red">'.e($input).'</span>',
                    'resultCount' =>'<span class="bold-result bold-red">'.$resultsCount.'</span>'
                ])!!}
            @endif
        </div>
    @endif
@endsection

@section('table')
    @php
        use App\Enumerables\Currency;
        use Illuminate\Support\Facades\Auth;

        $user = Auth::check();
        $language = config('app.locale');
        $class = ($language == 'en') ? 'top' : '';
        $currencySign = (($_COOKIE['currency'] ?? Currency::GBP) == Currency::GBP) ? '£ ' : '¥ ';
    @endphp

    <div class="ui grid">
        {{-- Fiter Table Header --}}
        <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" data-order="desc" >{{ __('Popularity') }}</div>
                            <!-- <div class="item" data-value="ranking" data-order="asc">{{ __('Times Ranking') }}</div> -->
                            <div class="item" data-value="qsRanking" data-order="asc">{{ __('QS Ranking') }}</div>
                            <div class="item" data-value="tuition" data-order="asc">{{ __('Tuition Fees') }}</div>
                            <div class="item" data-value="pricelh" data-order="asc">{{ __('Unit Price Low-High') }}</div>
                            <div class="item" data-value="pricehl" data-order="desc">{{ __('Unit Price High-Low') }}</div>
                        </div>
                    </div>
                </div>
            </div>

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

        <div class="row row-filter-header">
            <div class="three wide column">
                <div class="segment bold font-title">
                    {{ __('Universities') }}
                </div>
            </div>

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

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

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

            <div class="three wide column popupContainer center">
                <div class="segment relativeContainer">
                    <span class="bold font-title">
                        {{__('unit-price')}}
                    </span>

                    <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 {{($language == 'en')?'right':''}}">
                            <span class="triangle"></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>

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

        @include('catalog.lists.courses_list')

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

        {{--End Pagination--}}
    </div>
    <script>
        $(function () {
            @if(!empty($_GET['sorting']))
                $('#sort').dropdown('set selected', "{{$_GET['sorting']}}");
            @else
                $('#sort').dropdown('set selected', 'popularity');
            @endif

            $('.segment.relativeContainer .popupTrigger').popup({
                popup: $('.filter_header_price')
            });
    
            $('.timer.countdown').each(function () {
                simpleCountdown(
                    $(this),
                    '{{__('countdown-D')}}',
                    '{{__('countdown-H')}}',
                    '{{__('countdown-M')}}',
                    '{{__('countdown-S')}}'
                );
            });
        });
    </script>
@endsection