@extends('base')

@section('title', __('Course List'))

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

    <div class="ui basic segment no-margin">
        <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>
                    @if(!empty($_GET['activityID']))
                        <div class="active section">{{ __('Events') }}</div>
                    @else
                        <div class="active section">{{ __('Course List') }}</div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    @if(count($virtualCourses) > 0)
        <div class="grid virtualCourses">
            <div class="row relativeContainer">
                <div class="col">
                    @if(isset($virtualCourses[0]))
                        @include('catalog.components.virtual_course', [
                            'virtualCourse'=>$virtualCourses[0],
                            'imagePosition'=>'after'
                        ])
                    @endif
                </div>

                <div class="middle-block">
                    <div class="content">
                        <div class="text title bold font-title">
                            {{__('VirtualCourseCenterImageTitle')}}
                        </div>

                        <div class="text">
                            {{__('VirtualCourseCenterImageText')}}
                        </div>
                    </div>
                </div>

                <div class="col">
                    @if(isset($virtualCourses[1]))
                        @include('catalog.components.virtual_course', [
                            'virtualCourse'=>$virtualCourses[1],
                            'imagePosition'=>'before'
                        ])
                    @endif
                </div>
            </div>
        </div>
    @endif

    <div class="ui grid">
        <div class="row list-header-row responsive-row">
            <div class="sixteen wide column">
                <div class="ui basic segment">
                    <h2 class="ui header font-title">{{ __('Course List') }}</h2>
                </div>

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

                    <div id="keywords"></div>
                </div>
            </div>
        </div>

        <div class="row responsive-row">
            <div class="three wide column searchControl">

                <div class="ui basic segment">
                    <div class="ui equal width form">
                        <h3 class="ui header font-title">{{ __('Filters') }}</h3>

                        {{-- Course Level --}}
                        <div class="field staticdropdown">
                            <label class="font-title"><i class="ui chevron up icon"></i> {{ __('Course Level') }}</label>
                            <div class="ui fluid multiple search selection dropdown" id="courseLevel">
                                <input type="hidden" name="courseLevel[]" autocomplete="off">
                                <i class="dropdown icon"></i>
                                <div class="default text">{{ __('Level') }}</div>
                                <div class="menu">
                                    <div class="item" data-value="">{{ __('Level') }}</div>

                                    @foreach($courseLevels as $key => $level)
                                        <div class="item courseLevel" data-value="{{$level->courseLevelID}}" data-id="{{$level->courseLevelID}}">
                                            {{$level->courseLevelName}}{{" ("}}<span class="count">{{$level->count}}</span>{{")"}}
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        {{-- End Course Level --}}

                        <div class="ui divider"></div>

                        {{-- Cetegory --}}
                        <div class="field staticdropdown togglable">
                            <label class="font-title"><i class="ui chevron up icon"></i> {{ __('Category') }}</label>
                            <div class="ui fluid multiple search selection dropdown" id="catMenu">
                                <input type="hidden" name="catMenu[]" autocomplete="off">
                                <i class="dropdown icon"></i>
                                <div class="default text">{{ __('Category') }}</div>
                                <div class="menu">
                                    <div class="item" data-value="">{{ __('Category') }}</div>

                                    @foreach($categoriesLevelOne as $key => $value1)
                                        <div
                                            data-value="1--{{$value1->levelOneID}}--{{$value1->levelOneName}}"
                                            id="levelOne_{{$value1->levelOneID}}"
                                            class="item levelOne"
                                            data-id="{{$value1->levelOneID}}"
                                        >
                                            {{$value1->levelOneDisplayName}}{{" ("}}<span class="count">{{$value1->count}}</span>{{")"}}
                                        </div>

                                        @foreach($categoriesLevelTwo as $key => $value2)
                                            @if($value2->levelOneName == $value1->levelOneName)
                                                <div
                                                    data-value="2--{{$value2->levelTwoID}}--{{$value2->levelTwoName}}"
                                                    id="levelTwo_{{$value2->levelTwoID}}"
                                                    class="item levelTwo"
                                                    data-id="{{$value2->levelTwoID}}"
                                                >
                                                    {{$value2->levelTwoDisplayName}}{{" ("}}<span class="count">{{$value2->count}}</span>{{")"}}
                                                </div>
                                            @endif
                                        @endforeach
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        {{--End Category --}}

                        <div class="ui divider"></div>

                        {{-- Location --}}
                        <div class="grouped fields">
                            <label class="font-title"><i class="ui chevron up icon"></i> {{ __('Location') }}</label>
                            @foreach($locations as $key => $value1)
                                <div class="field">
                                    <div class="ui checkbox">
                                        <input name="location[]" tabindex="0" class="hidden" type="checkbox" value="{{$value1->locationID}}" >
                                        <label>{{($language === 'en')?$value1->locationName:$value1->locationNameChinese}}</label>
                                    </div>
                                </div>
                            @endforeach           
                           
                        </div>
                        {{-- End Location --}}

                        <!-- <div class="ui divider"></div> -->

                        {{-- City --}}
                        <!-- <div class="field staticdropdown">
                            <label class="font-title"><i class="ui chevron up icon"></i> {{ __('Cities') }}</label>
                            <select multiple="" class="ui search dropdown" name="cities" id="city" autocomplete="off">
                                <option value="">{{ __('City') }}</option>
                                
                            </select>
                        </div> -->
                        {{-- End City --}}

                        <div class="ui divider"></div>

                        {{-- University --}}
                        <div class="field staticdropdown">
                            <label class="font-title"><i class="ui chevron up icon"></i> {{ __('University') }}</label>
                            <select multiple="" class="ui search dropdown" autocomplete="off" id="uniNames">
                                <option value="">{{ __('University') }}</option>
                                @foreach($universities as $key => $value)
                                    <option value="{{ $value->uniName }}">{{$value->uniDisplayName}}</option>
                                @endforeach
                            </select>
                        </div>
                        {{-- End University --}}

                        <div class="ui divider"></div>

                        {{-- Start Date --}}
                        <div class="grouped fields">
                            <label class="font-title"><i class="ui chevron up icon"></i> {{ __('Course Start Date') }}</label>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="startDate[]" tabindex="0" class="hidden" type="checkbox" value="September">
                                    <label>{{ __('September') }}</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="startDate[]" tabindex="0" class="hidden" type="checkbox" value="January">
                                    <label>{{ __('January') }}</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="startDate[]" tabindex="0" class="hidden" type="checkbox" value="May">
                                    <label>{{ __('May') }}</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="startDate[]" tabindex="0" class="hidden" type="checkbox" value="Other">
                                    <label>{{ __('Other') }}</label>
                                </div>
                            </div>
                        </div>
                        {{-- End Start Date --}}

                        <div class="ui divider"></div>

                        {{-- UCAS fee --}}
                        <div class="grouped fields" id="ucasFeeStatusSection">
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="ucasFeeStatus" tabindex="0" class="hidden" type="checkbox" id="ucasFeeStatus">
                                    <label class="font-title bold relativeContainer" for="ucasFeeStatus">
                                        {{ __('Application through UCAS') }}

                                        <img class="popupTrigger" src="{{config('locations.systemImage.asset').'question_mark.png'}}">

                                        <div class="ui popup popup-left {{($language == 'en')?'top-position':''}}" id="ucas-fee-status">
                                            <div class="text">
                                                {{__('ucas-fee-status-popup')}}
                                            </div>

                                            <span class="container">
                                                <span class="triangle"></span>
                                            </span>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                        {{-- End UCAS Fee --}}

                        <div class="ui divider"></div>

                        {{-- Application Fee --}}
                        <div class="grouped fields" id="paidStatusSection">
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="paidStatus" tabindex="0" class="hidden" type="checkbox" id="paidStatus">
                                    <label class="font-title bold" for="paidStatus">{{ __('No application fee') }}</label>
                                </div>
                            </div>
                        </div>
                        {{-- End Application Fee --}}

                        <div class="ui divider"></div>

                        {{-- Tuition Fee --}}
                        <div class="field" id="tuitionSection">
                            <label class="font-title"><i class="ui chevron up icon"></i> {{ __('Average Tuition Fee') }}</label>

                            <div class="slider-static-label">
                                <div id="slider-value-1"></div>
                                <div id="slider-value-2"></div>
                                <div id="slider-value-3"></div>
                            </div>

                            <div class="ui double range" id="max_tuition_fee"></div>

                            <div class="custom-centered" id="max_tuition_fee_label"></div>
                        </div>
                        {{-- End Tuition Fee --}}
                    </div>
                </div>
            </div>

            <div class="thirteen wide column courses-container" id="table"></div>
        </div>
    </div>

    <script src="{{ asset('semanticui-range/range.js' ).'?'.$version }}"></script>
    <script src="{{ asset('js/simpleCountdown.js' ).'?'.$version }}"></script>
    <script src="{{ asset('js/UrlHandler.js' ).'?'.$version }}"></script>
    <script>
        var _language = '{{$language ?? 'zh'}}';

        window.onpopstate = function(event) {
            if (document.location.href !== localStorage.getItem('courseSortOrder')) {
                location.reload();
            }
        };

        var UrlHandler = new UrlHandler('{{route('courses_catalog')}}');

        var categoryLevelOneItems = document.getElementsByClassName('item levelOne');
        var categoryLevelTwoItems = document.getElementsByClassName('item levelTwo');
        var courseLevelItems = document.getElementsByClassName('item courseLevel');
        var isFiltering = false;
        var inQueue = false;
        var isTuition = 0;
        var isUni = 0;
        var isCity = 0;
        var max_tuition_fee = '{{$selectedFeesMax ?? ''}}';
        var min_tuition_fee = '{{$selectedFeesMin ?? ''}}';
        var listPage = '{{$selectedListPage??1}}';

        $(function () {
            $('#ucasFeeStatusSection .popupTrigger').popup({
                popup: $('#ucas-fee-status')
            });

            $('.searchControl .ui.dropdown').dropdown({
                fullTextSearch: 'exact',
                onShow: function () {
                    $(this).children('.chevron.icon').addClass('rotate');
                },
                onHide: function () {
                    $(this).children('.chevron.icon').removeClass('rotate');
                }
            });

            $('#table').on('click', '.ui.header .content', function (e) {
                if (!$(e.target).hasClass('dropdown')) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    $('.dropdown', this).dropdown('show');
                }
            }).on('click', '#sort .menu', function(e) {
                e.preventDefault();
                e.stopImmediatePropagation();
                setSorting();
                searchFilter(1);
            });

            $('i.dropdown.icon').removeClass('dropdown').addClass('chevron down');

            $('i.chevron.down.icon').click(function(){
                $(this).prev('select').dropdown('toggle');
            });

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

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

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

            $('.ui.checkbox').checkbox();

            @if(!empty($selectedPaidStatus))
                checkCheckbox('paidStatus');
            @endif

            @if(!empty($selectedUcasFeeStatus))
                checkCheckbox('ucasFeeStatus');
            @endif

            @if(isset($appliedSearchTerm))
                $('.placeholder').removeClass('visible');
                $('.searchbar-input').val('{{$appliedSearchTerm}}');
            @endif

            @if(isset($selectedCourseLevels))
                @foreach($selectedCourseLevels as $level)
                    $('#courseLevel').dropdown('set selected','{{$level}}');
                @endforeach
            @endif

            if(selectedCourseLevel !== 'ALL'){
                $('#courseLevel').dropdown('set selected', selectedCourseLevel);
            }

            $('#catMenu').dropdown({delimiter: '¬'});
            @if(isset($selectedCategoryNames) && $selectedCategoryNames != '')
                @foreach($selectedCategoryNames as $name)
                    $('#catMenu').dropdown('set selected','{!! rtrim(htmlspecialchars_decode($name))!!}');
                @endforeach
            @endif

            @if(isset($selectedLocations))
                @foreach($selectedLocations as $location)
                    checkCheckbox('location[]', '{{$location}}');
                @endforeach
            @endif

            @if(isset($selectedCities))
                @foreach($selectedCities as $city)
                    $('#city').dropdown('set selected','{{$city}}');
                @endforeach
            @endif

            @if(isset($selectedStartDates))
                @foreach($selectedStartDates as $date)
                    checkCheckbox('startDate[]', '{{$date}}');
                @endforeach
            @endif

            @if(isset($selectedUniversities))
                @foreach($selectedUniversities as $university)
                    $('#uniNames').dropdown('set selected','{{$university}}');
                @endforeach
            @endif

            initiateUrlParams();
            searchFilter(listPage);

            $('.searchControl .field > label, .searchControl .fields > label').click(function(){
                $(this).siblings('div').slideToggle();
                $('.icon', this).toggleClass('rotate');
            });

            $('input[name="location[]"], input[name="startDate[]"]').change(function(){
                var paramName = 'startDate';
                var inputName = $(this).attr('name');

                if (inputName === 'location[]') {
                    paramName = 'location';
                }

                UrlHandler.setParameter(paramName, getCheckboxValues(inputName));
                searchFilter(1);
            });

            $('#paidStatusSection .checkbox, #ucasFeeStatusSection .checkbox').click(function(){
                toggleCheckbox($(this));
            });

            $('#courseLevel input, #catMenu input').change(function(){
                var paramName = 'courseLevel';
                var input = $(this);
                var values = '';
                if (input.attr('name') === 'catMenu[]') {
                    paramName = 'category';
                    values = $('#catMenu').dropdown('get values');
                } else {
                    values = $('#courseLevel').dropdown('get values');
                }
                values = (values === '') ? '' : JSON.stringify(values);

                UrlHandler.setParameter(paramName, values);
                searchFilter(1);
                $(this).parents('.dropdown').dropdown('hide');
            });
        });

        /**
         * Initiate basic url parameters
         */
        function initiateUrlParams() {
            var categoryVal = $('#catMenu').dropdown('get values');
            var courseLevelVal = $('#courseLevel').dropdown('get values');
            UrlHandler.setParameters(
                {
                    'courseName': '{{$appliedSearchTerm}}',
                    'category': (categoryVal === '') ? '' : JSON.stringify(categoryVal),
                    'courseLevel': (courseLevelVal === '') ? '' : JSON.stringify(courseLevelVal),
                    'city': $('#city').val(),
                    'location': getCheckboxValues('location[]'),
                    'uniNames': $('#uniNames').val(),
                    'tuitionFeeMin': min_tuition_fee,
                    'tuitionFeeMax': max_tuition_fee,
                    'startDate': getCheckboxValues('startDate[]'),
                    'paidStatus': ($('input[name="paidStatus"]').is(':checked')) ? '1' : '',
                    'ucasFeeStatus': ($('input[name="ucasFeeStatus"]').is(':checked')) ? '1' : '',
                    'activityStatus': '{{$activityStatus}}',
                    'activityID': '{{$activityID}}',
                    'listPage': listPage
                }
            );
            setSorting();
            UrlHandler.replaceHistoryState();
        }

        /**
         * Set list sorting
         */
        function setSorting() {
            var sorting = $('#sort .item.active');
            UrlHandler.setParameter('sorting', sorting.attr('data-value') || '{{$selectedSorting}}');
            UrlHandler.setParameter('sortingOrder', sorting.attr('data-order'));
        }

        /**
         * Set search course name
         */
        function setSearchTerm() {
            var searchTerm = $('.searchbar-input').val();
            UrlHandler.setParameter('courseName', searchTerm);
            if (searchTerm.length) {
                if('{{$authID}}') {
                    searchStringStore(searchTerm, 'course', "{{route('searchStringStore')}}");
                } else {
                    addPrediction(searchTerm, 'course');
                }
            }
        }

        function checkCheckbox(name, value)
        {
            var selector = 'input[name="'+name+'"]';
            if (value) {
                selector += '[value="'+value+'"]';
            }
            var checkbox = $(selector).parents('.checkbox');
            checkbox.checkbox('check');
            checkbox.parent().addClass('checked');
        }

        function toggleCheckbox(element, toggleParent)
        {
            if(toggleParent) {
                element.parents('.field').siblings('.field').find('.checkbox').checkbox('set unchecked');
            }

            element.checkbox('toggle');

            setUrlParamsByCheckbox(element);
            searchFilter(1);

            element.checkbox('toggle');
        }

        /**
         * Update url parameters after checkboxes have been checked
         *
         * @param element
         */
        function setUrlParamsByCheckbox(element) {
            var input = element.find('input');
            switch (input.attr('name')) {
                case 'ucasFeeStatus' :
                    UrlHandler.setParameter('ucasFeeStatus', input.is(':checked') ? '1': '');
                    break;
                case 'paidStatus' :
                    UrlHandler.setParameter('paidStatus', input.is(':checked') ? '1': '');
                    break;
            }
        }

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

            UrlHandler.setParameter('listPage', num);

            inQueue = true;
            if(!isFiltering) {
                UrlHandler.updateUrl();
                filter();
                isUni = 0;
                isTuition = 0;
                isCity = 0;
            }
        }

        function filter() {
            var data = UrlHandler.getParameters();
            console.log(data)
            isFiltering = true;
            inQueue = false;

            uniSearchFilter(data);
            updateCounters(data);
            citySearchFilter(data);

            $.ajax({
                type: 'GET',
                url: "{{route('courseFilter')}}",
                data: data,
                success: function (data) {
                    localStorage.setItem('courseSortOrder', document.location);

                    $('#table').html(data.view);
                    $('#keywords').html(data.keywords);

                    if (!inQueue) {
                        isFiltering = false;
                    } else {
                        filter();
                    }
                }
            });
        }

        /**
         * Update university dropdown
         *
         * @param data
         */
        function uniSearchFilter(data)
        {
            if (isUni || isTuition) {
                return;
            }
            $.ajax({
                type: 'POST',
                url: "{{route('courseUniversityFilter')}}",
                data: data,
                success: function (data) {
                    var uniDropdown = $("#uniNames");
                    var universities = data.universities;
                    var universityValues = [];
                    var dropDownValues = {values: []};

                    uniDropdown.off('change').empty();

                    for (var a = 0; a < universities.length; a++) {
                        universityValues.push(universities[a].uniName);
                        uniDropdown.append('<option value="' + universities[a].uniName + '">' + universities[a].uniDisplayName + '</option>');
                        dropDownValues.values.push({value: universities[a].uniName, name: universities[a].uniDisplayName});
                    }

                    updateDropdownValues(uniDropdown, universityValues, data.selectedUniversities, dropDownValues);

                    uniDropdown.on('change', filterCourseByUniversity);

                    if (universityValues.length === 0) {
                        var data = $.extend({}, UrlHandler.getParameters());
                        data['city'] = '';
                        uniSearchFilter(data);
                    }
                }
            });
        }

        /**
         * University dropdown change callback
         */
        function filterCourseByUniversity()
        {
            if (isFiltering) return;
            var element = $('#uniNames');
            UrlHandler.setParameter('uniNames', element.val());
            isUni = 1;
            searchFilter(1);
            element.dropdown('hide');
        }

        /**
         * Update city dropdown
         *
         * @param data
         */
        function citySearchFilter(data)
        {
            if (isCity) {
                return;
            }
            $.ajax({
                type: 'GET',
                url: "{{route('courseCityFilter')}}",
                data: data,
                success: function (data) {
                    var $cities = data.cities;
                    var $locations = data.locations;
                    var cityDropdown = $("#city");
                    var dropDownValues = {values: []};
                    var cityValues = [];

                    cityDropdown.off('change').empty();

                    for (var a = 0; a < $locations.length; a++) {
                        cityDropdown.append('<option disabled value="' + $locations[a].locationName + '">' + $locations[a].locationName + '</option>');
                        for (var i = 0; i < $cities.length; i++) {
                            if ($locations[a].locationName === $cities[i].locationName) {
                                cityValues.push($cities[i].cityID);
                                cityDropdown.append('<option value="' + $cities[i].cityID + '">' + $cities[i].cityName + (_language !== 'en' ? ( ' ' + $cities[i].cityChineseName ) : '') + '</option>');
                                dropDownValues.values.push({value: $cities[i].cityID, name: $cities[i].cityName});
                            }
                        }
                    }

                    updateDropdownValues(cityDropdown, cityValues, data.selectedCities, dropDownValues);

                    cityDropdown.on('change', filterCourseByCities);
                }
            });
        }

        /**
         * City dropdown change callback
         */
        function filterCourseByCities()
        {
            if (isFiltering) return;
            var element = $('#city');
            UrlHandler.setParameter('city', element.val());
            isCity = 1;
            searchFilter(1);
            element.dropdown('hide');
        }

        /**
         * Set new dropdown values
         *
         * @param dropDown
         * @param availableValues
         * @param selectedValues
         * @param newValues
         */
        function updateDropdownValues(dropDown, availableValues, selectedValues, newValues)
        {
            var isAnySelected = false;
            dropDown.dropdown('clear')
                .dropdown('setup menu', newValues);

            if (Array.isArray(selectedValues)) {
                selectedValues.forEach(function (item) {
                    if (availableValues.includes(item.toString())) {
                        dropDown.dropdown('set selected', item);
                        isAnySelected = true;
                    }
                });
            }

            return isAnySelected;
        }

        function searchFilterByName(text, length)
        {
            var data = UrlHandler.getParameters();
            data.length = length;

            $.ajax({
                type: 'GET',
                url: "{{route('courseFilterByName')}}",
                data: data,
                success: function (data) {
                    $('#predictions').html(data);
                    $('.predictions').dropdown('show');
                }
            });
        }

        function getCheckboxValues(name) {
            var arr = [];

            $("input[name='"+name+"']:checked").each(function () {
              arr.push($(this).val().toLowerCase());
            });

            return arr;
        }

        /**
         * Get dropdown selection values
         */
        function updateCounters(data)
        {
            $.ajax({
                type: 'GET',
                url: "{{route('courseFilterCounters')}}",
                data: data,
                success: function (data) {
                    updateItemsCounter(categoryLevelOneItems, data.levelOnes);
                    updateSelectedItemsCounter(data.levelOnes, 'catMenu', 1);
                    updateItemsCounter(categoryLevelTwoItems, data.levelTwos);
                    updateSelectedItemsCounter(data.levelTwos, 'catMenu', 2);
                    updateItemsCounter(courseLevelItems, data.levels);
                    updateSelectedItemsCounter(data.levels, 'courseLevel', 0);
                }
            });
        }

        /**
         * Update dropdown counters
         *
         * @param items
         * @param stats
         */
        function updateItemsCounter(items, stats)
        {
            if (stats.length === 0) {
                for (var i = 0; i < items.length; i++) {
                    items[i].querySelector('.count').textContent = '0';
                }
            } else {
                for (var i = 0; i < items.length; i++) {
                    if (stats.hasOwnProperty(items[i].dataset.id)) {
                        items[i].querySelector('.count').textContent = stats[items[i].dataset.id];
                    } else {
                        items[i].querySelector('.count').textContent = '0';
                    }
                }
            }
        }

        /**
         * Update selected dropdown counters
         *
         * @param stats
         * @param parentId
         * @param level
         */
        function updateSelectedItemsCounter(stats, parentId, level)
        {
            var selectedItems = $('#'+parentId).find('.ui.label');
            for (i = 0; i < selectedItems.length; i++) {
                var dataValue = selectedItems[i].getAttribute('data-value');
                var catLevel = dataValue.split('--')[0] || 0;
                if (level === 0 || catLevel == level) {
                    var id = dataValue.split('--')[1] || dataValue;
                    if (typeof id !== 'undefined' && stats.hasOwnProperty(id)) {
                        selectedItems[i].querySelector('.count').textContent = stats[id];
                    } else {
                            selectedItems[i].querySelector('.count').textContent = '0';
                    }
                }
            }
        }

        function tuitionRange(max, min, isUpdate, selectedMin, selectedMax)
        {
            var maxVal = max;
            var minVal = min;
            max_tuition_fee = selectedMax || max;
            min_tuition_fee = selectedMin || min;

            var start = selectedMin || minVal;
            var end = selectedMax || maxVal;

            $('#max_tuition_fee_label').html('£'+start.toLocaleString() + ' - ' + '£'+end.toLocaleString());
            $('#slider-value-1').empty().html('£'+minVal.toLocaleString() + '<span class="dash">|</span>');
            $('#slider-value-2').empty().html('£'+parseInt((maxVal + minVal) / 2).toLocaleString() + '<span class="dash">|</span>');
            $('#slider-value-3').empty().html('£'+maxVal.toLocaleString() + '<span class="dash">|</span>');

            $('#max_tuition_fee').range({
                min: (minVal - 1000),
                max: (maxVal + 1000),
                start: start,
                doubleStart: end,
                step: 1000,
                onMove: function () {
                    var smaller = $(this).range('get thumb value');
                    var larger = $(this).range('get thumb value', 'second');

                    if(smaller > larger) {
                        var tmp = larger;
                        larger = smaller;
                        smaller = tmp;
                    }

                    if (smaller < minVal) {
                        smaller = minVal;
                    }

                    if (larger > maxVal) {
                        larger = maxVal;
                    }

                    isUpdate = false;

                    $('#max_tuition_fee_label').html('£'+smaller.toLocaleString() + ' - ' + '£'+larger.toLocaleString());
                    max_tuition_fee = larger;
                    min_tuition_fee = smaller;
                },
                onChange: function () {
                    if(!isUpdate) {
                        UrlHandler.setParameters(
                            {
                                'tuitionFeeMin': min_tuition_fee,
                                'tuitionFeeMax': max_tuition_fee
                            }
                        );
                        isTuition = 1;
                        searchFilter(1);
                    }
                }
            });
        }

        tuitionRange(
            parseInt('{{$feesMax??0}}'),
            parseInt('{{$feesMin??0}}'),
            true,
            parseInt('{{$selectedFeesMin ?? 0}}'),
            parseInt('{{$selectedFeesMax ?? 0}}')
        );
    </script>
@endsection