@extends('base')

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

@section('content')
    @php
        $authID = \Illuminate\Support\Facades\Auth::id();
        $language = config('app.locale');
    @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">{{ __('University List') }}</div>
                </div>
            </div>
        </div>
    </div>

    <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">{{ __('University List') }}</h2>
                </div>

                <div class="ui basic segment">
                    <div class="searchbar-large relativeContainer">
                        <input class="searchbar-input" id="nameSearch" value="" 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>
                </div>
            </div>
        </div>

        <div class="row responsive-row">
            <div class="three wide column searchControl">
                <div class="ui basic segment">
                    {{--<div id="keywords"></div>--}}

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

                        {{-- 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 icon" name="cities" id="city"  autocomplete="off">
                                <i class="chevron down icon"></i>
                                <option value="">{{ __('City') }}</option>
                                @foreach($locations as $key => $value1)
                                    <option value="{{$value1->locationName}}" disabled="">
                                        {{($language === 'en')?$value1->locationName:$value1->locationNameChinese}}
                                    </option>
                                    @foreach($cities as $key => $value2)
                                        @if($value2->locationName == $value1->locationName)
                                            {{($language === 'en')?$value1->locationName:$value1->locationNameChinese}}
                                            <option value="{{$value2->cityID}}">
                                                {{$value2->cityName}} {{($language != 'en')?$value2->cityChineseName:''}}
                                            </option>
                                        @endif
                                    @endforeach
                                @endforeach
                            </select>
                        </div> -->
                        {{-- End City --}}

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

                        {{-- Minimum IELTS --}}
                        <div class="grouped fields">
                            <label class="font-title"><i class="ui chevron up icon"></i> {{ __('Minimum IELTS') }}</label>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="min_ielts[]" tabindex="0" class="hidden" type="checkbox" value="5">
                                    <label>5.0</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="min_ielts[]" tabindex="0" class="hidden" type="checkbox" value="5.5">
                                    <label>5.5</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="min_ielts[]" tabindex="0" class="hidden" type="checkbox" value="6">
                                    <label>6.0</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="min_ielts[]" tabindex="0" class="hidden" type="checkbox" value="6.5">
                                    <label>6.5</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="min_ielts[]" tabindex="0" class="hidden" type="checkbox" value="7">
                                    <label>7.0+</label>
                                </div>
                            </div>
                        </div>
                        {{-- End Minimum IELTS --}}

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

                        {{-- Times Ranking --}}
                        <!-- <div class="grouped fields">
                            <label class="font-title"><i class="ui chevron up icon"></i> {{ __('Times Ranking') }}</label>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="times_ranking[]" tabindex="0" class="hidden" type="checkbox" value="20">
                                    <label>1-20</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="times_ranking[]" tabindex="0" class="hidden" type="checkbox" value="40">
                                    <label>21-40</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="times_ranking[]" tabindex="0" class="hidden" type="checkbox" value="60">
                                    <label>41-60</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="times_ranking[]" tabindex="0" class="hidden" type="checkbox" value="80">
                                    <label>61-80</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="times_ranking[]" tabindex="0" class="hidden" type="checkbox" value="81">
                                    <label>81+</label>
                                </div>
                            </div>
                        </div> -->
                        {{-- End Times Ranking --}}

                        <div class="ui divider"></div>
                        {{-- QS Ranking --}}
                        <div class="grouped fields">
                            <label class="font-title"><i class="ui chevron up icon"></i> {{ __('QS Ranking') }}</label>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="qs_ranking[]" tabindex="0" class="hidden" type="checkbox" value="50">
                                    <label>1-50</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="qs_ranking[]" tabindex="0" class="hidden" type="checkbox" value="100">
                                    <label>51-100</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="qs_ranking[]" tabindex="0" class="hidden" type="checkbox" value="150">
                                    <label>101-150</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="qs_ranking[]" tabindex="0" class="hidden" type="checkbox" value="200">
                                    <label>151-200</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="qs_ranking[]" tabindex="0" class="hidden" type="checkbox" value="250">
                                    <label>201-250</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="qs_ranking[]" tabindex="0" class="hidden" type="checkbox" value="300">
                                    <label>251-300</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input name="qs_ranking[]" tabindex="0" class="hidden" type="checkbox" value="301">
                                    <label>300+</label>
                                </div>
                            </div>
                        </div>
                        {{-- End QS Ranking --}}

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

            <div class="thirteen wide column" id="table">
                @include('catalog.universitiesSearchResult')
            </div>
        </div>
    </div>

    {{--<script src="{{ asset('semanticui-range/range.js' ) }}"></script>--}}
    <script>
        var isFiltering = false;
        var dataset = null;
        // var isTuition = 0;

        $(function(){
            $('#city').dropdown({
                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();
                    $('.ui.header .content .dropdown').dropdown('show');
                }
            });


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

        //initializing filter values
        @if(isset($selectedListPage))
            var listPage = '{{$selectedListPage}}';
        @else
            var listPage = 1;
        @endif
        {{--@if(isset($selectedSorting))--}}
            {{--$('#sort').dropdown('set selected', "{{$selectedSorting}}");--}}
        {{--@else--}}
            {{--$('#sort').dropdown('set selected', 'popularity');--}}
        {{--@endif--}}
        @if(isset($appliedSearchTerm))
            $('.placeholder').removeClass('visible');
            $('.searchbar-input').val('{{$appliedSearchTerm}}');
        @endif
        @if(isset($selectedLocations))
            @foreach($selectedLocations as $location)
                var checkbox = $("input[name='location[]'][value='{{$location}}']").parents('.checkbox');
                checkbox.checkbox('check');
                if(!checkbox.hasClass('checked'))
                    checkbox.addClass('checked');
            @endforeach
            citySearchFilter();
        @endif
        @if(isset($selectedCities))
            @foreach($selectedCities as $city)
                $('#city').dropdown('set selected','{{$city}}');
            @endforeach
        @endif
        @if(isset($selectedIelts))
            @foreach($selectedIelts as $ielts)
                var checkbox = $("input[name='min_ielts[]'][value='{{$ielts}}']").parents('.checkbox');
                checkbox.checkbox('check');
                if(!checkbox.hasClass('checked'))
                    checkbox.addClass('checked');
            @endforeach
        @endif
        @if(isset($selectedTimesRanking))
            @foreach($selectedTimesRanking as $rank)
            var checkbox =  $("input[name='times_ranking[]'][value='{{$rank}}']").parents('.checkbox');
            checkbox.checkbox('check');
            if(!checkbox.hasClass('checked'))
                checkbox.addClass('checked');
            @endforeach
        @endif
        @if(isset($selectedQsRanking))
            @foreach($selectedQsRanking as $rank)
            var checkbox =  $("input[name='qs_ranking[]'][value='{{$rank}}']").parents('.checkbox');
            checkbox.checkbox('check');
            if(!checkbox.hasClass('checked'))
                checkbox.addClass('checked');
            @endforeach
        @endif
        function searchFilter(num,element) {
            $('.predictions').dropdown('hide');

            var input = $('.searchbar-input').val();
            // if (element) {
            //     if (element.id == 'max_tuition_fee')
            //         isTuition = 1;
            // }

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

            var data = {
                '_token':"{{ csrf_token() }}"
            };

            data['listPage']= num;
            //filter by name
            data['uniName'] = input;

            //filter by location
            var locationValues = new Array();
            $.each($("input[name='location[]']:checked"), function() {
                locationValues.push($(this).val());
            });
            data['location'] = locationValues;

            //filter by city
            data['city'] = $('#city').val();

            //filter by tuition fee
            // var tuition = $('#max_tuition_fee_label').html().split(' - ');
            // if(isTuition){
            //     data['tuitionFeeMin'] = tuition[0];
            //     data['tuitionFeeMax'] = tuition[1];
            // } else {
            //     data['tuitionFeeMin'] = '';
            //     data['tuitionFeeMax'] = '';
            // }

            //filter by ielts
            var ieltsValues = new Array();
            $.each($("input[name='min_ielts[]']:checked"), function() {
                ieltsValues.push($(this).val());
            });
            data['ielts'] = ieltsValues;

            //filter by times ranking
            var timesRankingValues = new Array();
            $.each($("input[name='times_ranking[]']:checked"), function() {
                timesRankingValues.push($(this).val());
            });
            data['timesRanking'] = timesRankingValues;

            //filter by qs ranking
            var qsRankingValues = new Array();
            $.each($("input[name='qs_ranking[]']:checked"), function() {
                qsRankingValues.push($(this).val());
            });
            data['qsRanking'] = qsRankingValues;
            //sort by
            var sorting = $("#sort .item.active");
            if($( "#sort" ).length){
                data['sorting'] = sorting.attr('data-value');
                data['sortingOrder'] = sorting.attr('data-order');
            }else{
                data['sorting'] = '{{$selectedSorting}}';
            }

            dataset = data;

            if(!isFiltering) {
                filter();
            }
        }

        function filter(){
            $('.preloader').removeClass('hidden');
            isFiltering = true;
            var data = dataset;
            dataset = null;

            window.history.pushState('', '','{{route('universities_catalog')}}'+'?'+$.param(data));

            $.ajax({
                type:'GET',
                url:"{{route('uniFilter')}}",
                data:data,
                success:function(data) {
                    //console.log(data)
                    $('#table').html(data.view);
                    $('#keywords').html(data.keywords);
                    $('.preloader').addClass('hidden');
                    // if(!isTuition){
                    //     if(data.tuitionMax && data.tuitionMin){
                    //         $('#tuitionSection').show();
                    //         tuitionRange(parseInt(data.tuitionMax),parseInt(data.tuitionMin),true);
                    //     } else
                    //         $('#tuitionSection').hide();
                    // }

                    if(dataset == null){
                        isFiltering = false;
                    } else {
                        filter();
                    }
                }
            });
        }

        function citySearchFilter() {
            var data = {
                '_token':"{{ csrf_token() }}"
            };

            //filter by location
            var locationValues = new Array();
            $.each($("input[name='location[]']:checked"), function() {
                locationValues.push($(this).val());
            });
            data['location'] = locationValues;

            $.ajax({
                type:'GET',
                url:"{{route('citySearchFilter')}}",
                data:data,
                success:function(data){
                    var $cities = data.cities;
                    var $locations = data.locations;
                    //alert(data.locations);
                    //console.log(values);
                    var $city = $("#city");
                    $city.empty(); // remove old options
                    $city.append('<option value=""> City </option>');
                    for (var a = 0; a < $locations.length; a++) {
                        $city.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 )
                                $city.append('<option value="' + $cities[i].cityID + '">' + $cities[i].cityName + '</option>');
                        }
                    }
                }
            });
        }

        // Allow to uncheck radiobuttons
        // $('.ui.radio.checkbox').click(function(){
        //       if($(this).hasClass("checked")) {
        //         $(this).removeClass("checked");
        //     }
        // });

        // $('.ui.radio.checkbox').click(function(){
        //     if($('input[type=radio]', this).prop('checked') == true) {
        //         if($(this).hasClass('checked')){
        //             $(this).removeClass('checked');
        //         } else {
        //             $(this).addClass('checked');
        //         }
        //     } else {
        //         $('input[type=radio]', this).prop('checked', true);
        //         $(this).addClass('checked');
        //     }
        //     searchFilter(1);
        // });

        // $('.ui.radio.checkbox').click(function(e){
        //     e.preventDefault();
        //
        //     if($(this).hasClass('unchecked')){
        //         $(this).checkbox('check');
        //         $(this).removeClass('unchecked');
        //     } else if($(this).hasClass('checked')){
        //         $(this).addClass('unchecked');
        //         $(this).checkbox('uncheck');
        //     } else {
        //
        //     }
        //     searchFilter(1);
        // });

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

    </script>

    <script>
        $("#table").on('click', '#sort .menu', function() {
            searchFilter(1);
        });

        $("input[name='location[]']").change(function(){
            // $('#city').dropdown('clear');
            citySearchFilter();
            searchFilter(1);
        });

        $("input[name='min_ielts[]']").change(function(){
            searchFilter(1);
        });

        $("input[name='times_ranking[]']").change(function(){
            searchFilter(1);
        });

        $("input[name='qs_ranking[]']").change(function(){
            searchFilter(1);
        });

        $('#city').change(function(){
            searchFilter(1);
        });

        $('#uniName').change(function(){
            searchFilter(1);
        });
    </script>

    {{--<script>--}}
        {{--function tuitionRange(max,min,isUpdate) {--}}
            {{--var maxVal = max;--}}
            {{--var minVal = min;--}}

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

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

                    {{--if (val1 <= val2) {--}}
                        {{--var smaller = val1;--}}
                        {{--var larger = val2;--}}
                    {{--} else {--}}
                        {{--var smaller = val2;--}}
                        {{--var larger = val1;--}}
                    {{--}--}}

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

                    {{--if (larger > maxVal) {--}}
                        {{--larger = maxVal;--}}
                    {{--}--}}
                    {{--isUpdate=false;--}}
                    {{--$('#max_tuition_fee_label').html(smaller + ' - ' + larger);--}}
                {{--},--}}
                {{--onChange: function () {--}}
                    {{--if(!isUpdate){--}}
                        {{--searchFilter(1,this);--}}
                    {{--}--}}
                {{--}--}}
            {{--});--}}
        {{--}--}}
    {{--</script>--}}

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

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

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

                    searchFilter(1);
                }
            });
        });

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

        function searchFilterByName(text, length) {
            var data = {
                '_token':"{{ csrf_token() }}"
            };

            data['length'] = length;

            //filter by name
            data['uniName'] = text;
            //filter by location
            var locationValues = new Array();
            $.each($("input[name='location[]']:checked"), function() {
                locationValues.push($(this).val());
            });
            data['location'] = locationValues;

            //filter by city
            data['city'] = $('#city').val();

            //filter by tuition fee
            // var tuition = $('#max_tuition_fee_label').html().split(' - ');
            // data['tuitionFeeMin'] = tuition[0];
            // data['tuitionFeeMax'] = tuition[1];

            //filter by ielts
            var ieltsValues = new Array();
            $.each($("input[name='min_ielts[]']:checked"), function() {
                ieltsValues.push($(this).val());
            });
            data['ielts'] = ieltsValues;

            //filter by times ranking
            var timesRankingValues = new Array();
            $.each($("input[name='times_ranking[]']:checked"), function() {
                timesRankingValues.push($(this).val());
            });
            data['timesRanking'] = timesRankingValues;

            //filter by qs ranking
            var qsRankingValues = new Array();
            $.each($("input[name='qs_ranking[]']:checked"), function() {
                qsRankingValues.push($(this).val());
            });
            data['qsRanking'] = qsRankingValues;

            //sort by
            var sorting = $("#sort .item.active");

            data['sorting'] = sorting.attr('data-value');
            data['sortingOrder'] = sorting.attr('data-order');

            $.ajax({
                type:'GET',
                url:"{{route('uniFilterByName')}}",
                data:data,
                success:function(data){
                    $('#predictions').html(data);
                    $('.predictions').dropdown('show');
                }
            });
        }
    </script>
@endsection

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