@extends('layouts.default', [
    'activatedNavItem' => 'SCHOOLINFO',
])

@push('head')
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

    <link rel="stylesheet" type="text/css" href="/css/school/school-search.css">
    {!! resource(resource_path('js/school/school-info.js')) !!}
    {!! resource(resource_path('js/school/debounce.js')) !!}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
@endpush

@section('content')
<div class="h1-box hidden">
    @if ($utype == 1)
        <h1>어학연수 어학원 찾기</h1>
    @elseif($utype == 2)
        <h1>해외대학 찾기</h1>
    @elseif($utype == 4)
        <h1>미술전공 해외대학 찾기</h1>    
    @endif
</div>
<div class="school-info">
    <div class="school-info-search" id="school-info-search">
        <div class="school-info-width school-info-search-form-wrap">
            <form name="school-info-search" id="school-info-search" method="GET" action="" class="school-info-search-form">
                <div class="language-university">
                    <a href="{{ route('schoolinfo.language-abroad') }}" class="@active($utype, 1)">어학연수</a>
                    <a href="{{ route('schoolinfo.university-abroad') }}" class="@active($utype, 2)">대학(일반)</a>
                    <a href="{{ route('schoolinfo.art-university-abroad') }}" class="@active($utype, 4)">대학(아트)</a>
                    <a href="{{ route('schoolinfo.boarding') }}" class="@active($utype, 3)">초중고(조기)</a>
                </div>
                <div class="school-mo-search-btn">
                    <a id="school-mo-search-btn" href="javascript:;" >검색</a>
                </div>
                <div class="school-mo-popup-btn" id="school-mo-popup-btn" onclick="moPopupBtnNone()">
                    <a href="javascript:;" >팝업닫기</a>
                </div>
                <div class="school-info-search-wrap">
                    <span>
                        <label for="country">국가<svg width="20" height="20" viewBox="0 0 20 20"><defs><clipPath ><rect width="20" height="20" fill="none"/></clipPath></defs><rect  width="20" height="20" fill="none"/><g><g clip-path="url(#clip-path)"><path d="M10,2.725A7.275,7.275,0,1,1,2.724,10,7.276,7.276,0,0,1,10,2.725Z" fill="none" stroke="#141414" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><line x2="14.551" transform="translate(2.724 10)" fill="none" stroke="#141414" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M10,2.725A11.129,11.129,0,0,1,12.91,10,11.129,11.129,0,0,1,10,17.276,11.129,11.129,0,0,1,7.09,10,11.129,11.129,0,0,1,10,2.725Z" fill="none" stroke="#141414" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></g></svg></label>
                        <select name="country" id="country">
                            <option value="">국가전체</option>
                            @if($utype == 3)
                                <option value="6" @selected(6, request()->country)>캐나다</option>
                                <option value="5" @selected(5, request()->country)>미국</option>
                                <option value="1" @selected(1, request()->country)>영국</option>
                                <option value="8" @selected(8, request()->country)>뉴질랜드</option>
                            @else
                                @foreach($filter['countries'] as $val)
                                    <option value="{{ $val['id'] }}" @selected($val['active'])>{!! $val['name'] !!}</option>
                                @endforeach
                            @endif
                        </select>
                    </span>

                    @if ($utype == 1)
                        <span>
                            <label for="city">도시<svg width="20" height="20" viewBox="0 0 20 20"><defs><clipPath><rect width="20" height="20" fill="none"/></clipPath></defs><rect width="20" height="20" fill="none"/><g><g clip-path="url(#clip-path)"><path d="M15.987,8.67c0,4.657-5.987,8.648-5.987,8.648S4.012,13.327,4.012,8.67a5.988,5.988,0,0,1,11.975,0Z" fill="none" stroke="#141414" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M10,7.17a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,10,7.17" fill="#141414"/></g></g></svg></label>
                            <select name="city" id="city">
                                @include('schoolinfo.language-city-list', [
                                    'city_list' => $schools['cities'],
                                    'city_id' => $search['city'],
                                ])
                            </select>
                        </span>

                        <span>
                            <label for="category">과정<svg width="20" height="20" viewBox="0 0 20 20"><defs><clipPath><rect width="20" height="20" fill="none"/></clipPath></defs><rect width="20" height="20" fill="none"/><g><g clip-path="url(#clip-path)"><g transform="translate(-0.426 -0.083)"><path d="M3.426,4.083H7.371A2.629,2.629,0,0,1,10,6.713v9.2a1.972,1.972,0,0,0-1.972-1.973h-4.6Z" fill="none" stroke="#141414" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M16.574,4.083H12.629A2.629,2.629,0,0,0,10,6.713v9.2a1.972,1.972,0,0,1,1.972-1.973h4.6Z" fill="none" stroke="#141414" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></g></g></svg></label>
                            <select name="category" id="category">
                                <option value="">과정전체</option>
                                @foreach ($categories as $key=>$category)
                                    <option value="{{ $category['value'] }}" @selected($search['category'], $category['value'])>{{ $category['name'] }}</option>
                                @endforeach
                            </select>
                        </span>
                    @elseif ($utype == 3)
                        <span>
                            <label for="city"><span>주</span><svg width="20" height="20" viewBox="0 0 20 20"><defs><clipPath><rect width="20" height="20" fill="none"/></clipPath></defs><rect width="20" height="20" fill="none"/><g><g clip-path="url(#clip-path)"><path d="M15.987,8.67c0,4.657-5.987,8.648-5.987,8.648S4.012,13.327,4.012,8.67a5.988,5.988,0,0,1,11.975,0Z" fill="none" stroke="#141414" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M10,7.17a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,10,7.17" fill="#141414"/></g></g></svg></label>
                            <select name="city" id="city">
                                @include('schoolinfo.state-list', [
                                    'city_list' => $schools['cities'],
                                    'city_id' => $search['city'],
                                ])
                            </select>
                        </span>

                        <span>
                            <label for="category">학교종류<svg width="20" height="20" viewBox="0 0 20 20"><defs><clipPath><rect width="20" height="20" fill="none"/></clipPath></defs><rect width="20" height="20" fill="none"/><g><g clip-path="url(#clip-path)"><g transform="translate(-0.426 -0.083)"><path d="M3.426,4.083H7.371A2.629,2.629,0,0,1,10,6.713v9.2a1.972,1.972,0,0,0-1.972-1.973h-4.6Z" fill="none" stroke="#141414" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M16.574,4.083H12.629A2.629,2.629,0,0,0,10,6.713v9.2a1.972,1.972,0,0,1,1.972-1.973h4.6Z" fill="none" stroke="#141414" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></g></g></svg></label>
                            <select name="category" id="category">{!! $boarding_school_type !!}</select>
                        </span>
                    @else
                        <span>
                            <label for="subject">전공<svg width="20" height="20" viewBox="0 0 20 20"><defs><clipPath><rect width="20" height="20" fill="none"/></clipPath></defs><rect width="20" height="20" fill="none"/><g><g clip-path="url(#clip-path)"><path d="M15.987,8.67c0,4.657-5.987,8.648-5.987,8.648S4.012,13.327,4.012,8.67a5.988,5.988,0,0,1,11.975,0Z" fill="none" stroke="#141414" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M10,7.17a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,10,7.17" fill="#141414"/></g></g></svg></label>

                            <select name="subject" id="subject">
                                @include('schoolinfo.subject-list', [
                                    'subject_list' => $filter['subjects'],
                                    'subject_uid' => $search['subject'],
                                ])
                            </select>
                        </span>

                        <span>
                            <label for="course">과정<svg width="20" height="20" viewBox="0 0 20 20"><defs><clipPath><rect width="20" height="20" fill="none"/></clipPath></defs><rect width="20" height="20" fill="none"/><g><g clip-path="url(#clip-path)"><g transform="translate(-0.426 -0.083)"><path d="M3.426,4.083H7.371A2.629,2.629,0,0,1,10,6.713v9.2a1.972,1.972,0,0,0-1.972-1.973h-4.6Z" fill="none" stroke="#141414" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M16.574,4.083H12.629A2.629,2.629,0,0,0,10,6.713v9.2a1.972,1.972,0,0,1,1.972-1.973h4.6Z" fill="none" stroke="#141414" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></g></g></svg></label>

                            <select name="course" id="course">
                                @include('schoolinfo.course-list', [
                                    'course_list' => $categories,
                                    'course_id' => $search['course'],
                                ])
                            </select>
                        </span>
                    @endif

                    <span id="school-search-ui">
                        <label for="school-search-text" class="input-label">
                            <span>검색어</span><svg width="20" height="20" viewBox="0 0 20 20"><path d="M0,0H20V20H0Z" fill="none"/><path d="M7.166,8l4.166,4.166V18H7.166V14.664m0,3.333H3V12.165L7.166,8M8,8.832v-5A.833.833,0,0,1,8.832,3h8.332A.833.833,0,0,1,18,3.833V18H11.332" transform="translate(-0.5 -0.5)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><line transform="translate(11 6)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><line transform="translate(14 6)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><line transform="translate(14 9)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><line transform="translate(14 12)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
                        </label>
                        <input id="search" type="text" placeholder="직접입력" name="search" value="{{ $search['keyword'] }}" />
                    </span>

                    <button type="submit" onclick="moPopupBtnNone()"><span>학교 검색</span></button>
                </div>
            </form>
        </div>
    </div>

    <div class="school-info-list-wrap list-type1" id="school-info-list-type-wrap" >
        <div class="school-info-width">
            <!-- 리스트 -->
            <div class="school-info-list-con">
                <div class="school-info-list-head" id="school-info-list-head">
                    <div class="school-info-list-head-text">
                        검색: <span id="search-fields"></span><br>
                        총 <span id="total-count">{{ number_format($schools['count']) }}</span>개의 학교를 검색하였습니다.
                    </div>
                    <div class="school-info-list-type">
                        <span id="schoolListType1" class="active">
                            <svg viewBox="0 0 22 22"><g transform="translate(-792.998 -306)"><rect width="12.777" height="20" transform="translate(793.998 307)" fill="none" stroke="#c5c5c5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><rect width="20" height="20" transform="translate(793.998 307)" fill="none" stroke="#c5c5c5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x2="12.388" transform="translate(794.387 313.619)" fill="none" stroke="#c5c5c5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x2="12.388" transform="translate(794.387 320.238)" fill="none" stroke="#c5c5c5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></svg>
                            <span>상세 설명이랑 같이 학교 리스트 보기</span>
                        </span>
                        <span id="schoolListType2">
                            <svg viewBox="0 0 22 22"><g transform="translate(-840.998 -322.001)"><rect width="20" height="20" transform="translate(841.998 323.001)" fill="none" stroke="#c5c5c5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x2="19.611" transform="translate(842.387 329.62)" fill="none" stroke="#c5c5c5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x2="19.611" transform="translate(842.387 336.238)" fill="none" stroke="#c5c5c5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></svg>
                            <span>간단히 학교 리스트 보기</span>
                        </span>
                        <span id="schoolListType3">
                            <svg viewBox="0 0 22 22"><g transform="translate(-879.998 -320.918)"><rect width="20" height="20" transform="translate(880.998 321.918)" fill="none" stroke="#c5c5c5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><rect width="12" height="12" transform="translate(884.998 325.918)" fill="none" stroke="#c5c5c5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></svg>
                            <span>학교 이미지로 학교 리스트 보기</span>
                        </span>

                        <!-- 정렬 -->
                        <div class="sort">
                            <label for="sort"></label>
                            <select name="" id="sortby">
                                <option value="recommend" @selected($sort, 'recommend')>추천순</option>
                                <option value="read" @selected($sort, 'read')>조회순</option>
                                <option value="alphabet" @selected($sort, 'alphabet')>알파벳순</option>
                            </select>
                        </div>
                        <!-- //정렬 -->
                    </div>
                </div>
                <!-- 리스트 아이템 -->
                {{-- school-list 안으로 들어가면 paginate error 발생합니다 --}}
                <ul class="school-info-list" id="school-info-list">
                    @include('schoolinfo.school-list', [
                        'utype' => $utype,
                        'schools' => $schools,
                    ])
                </ul>
                <!-- //리스트 아이템 -->
            </div>
            <!-- //리스트 -->

            <!-- 상세정보 -->
            <div class="school-info-list-detail-wrap">
                <div class="school-info-list-detail" id="school-info-list-detail">
                    @include('schoolinfo.school-detail-preview', [
                        'utype' => $utype,
                        'schools' => $schools,
                    ])
                </div>
            </div>
            <!-- //상세정보 -->
        </div>
        <!--//school-info-width-->
    </div>
    <!--//school-info-list-wrap-->
</div>

<script type="text/javascript">
    function doSearch()
    {
        var formData = {
          country: $("#country").val(),
          city: $("#city").val(),
          subject: $("#subject").val(),
          course: $("#course").val(),
          category: $("#category").val(),
          search: $("#search").val(),
          sort: $('#sortby').val(),
          page: 1
        };

        $.ajax({
            url: $('#school-info-search').attr("action"),
            type: 'GET',
            data: formData,
            dataType: 'json',
            cache: false
        }).done(function(response){
            if (response.data) {
                $('#total-count').html(response.data.count);
                $('#school-info-list').html(response.data.view);
                $('#school-info-list-detail').html(response.data.details);

                @if ($utype == 1)
                    $('#city').html(response.data.city_view);
                @elseif ($utype == 3)
                    //console.log(response.data);
                    if ($("#country").val() == 1) $('label[for="city"] span').text('도시');
                    else $('label[for="city"] span').text('주');
                    $('#city').html(response.data.city_view);
                    $('#category').html(response.data.boarding_school_type);
                @elseif ($utype == 2 or $utype ==4)
                    //console.log(response.data);
                    $('#subject').html(response.data.subject_view);
                    $('#course').html(response.data.course_view);
                @endif

                setList();
                setSchoolList();
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            //console.log(jqXHR);
        });
    }

    function getKeywords(keyword)
    {
        if (keyword.length<2) return;

        var formData = {
            uhak_type: {{ $utype }},
            country: $("#country").val(),
            city: $("#city").val(),
            subject: $("#subject").val(),
            course: $("#course").val(),
            category: $("#category").val(),
            search: keyword
        };

        $.ajax({
            url: '/schoolinfo/getKeywords/',
            type: 'GET',
            data: formData,
            dataType: 'json',
            cache: false
        }).done(function(response){
            var tags = response;
            $('#search').autocomplete({
                source: tags,
                select: function (event, ui) {
                    $("#search").val(ui.item.value);
                    doSearch();
                },
                open: function (e, ui) {
                    var acData = $(this).data('ui-autocomplete');
                    acData.menu.element.find('li').each(function () {
                        var me = $(this).find('.ui-menu-item-wrapper');
                        var keywords = acData.term.split(' ').join('|');
                        me.html(me.text().replace(new RegExp("(" + keywords + ")", "gi"), '<strong>$1</strong>'));
                    });
                },
            });
        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR);
        });
    }

    function setSchoolList() {
        var country = $("#country option:selected").text();
        var city    = $("#city option:selected").text();
        var subject = $("#subject option:selected").text();
        var course  = $("#course option:selected").text();
        var category    = $("#category option:selected").text();
        var search_fields = '';

        var search_fields = country;
        if ($('#city option:selected').val() != '' && $('#city').length) search_fields += ', '+city;
        if ($('#category option:selected').val() != '' && $('#category').length) search_fields += ', '+category;
        if ($('#subject option:selected').val() != '' && $('#subject').length) search_fields += ', '+subject;
        if ($('#course option:selected').val() != '' && $('#course').length) search_fields += ', '+course;

        $('#search-fields').text(search_fields);

        var i = 0;
        $('.school-info-list-school').each(function(){
            $(this).click(function(e){
                var school_uid = $(this).attr('data-uid');

                $('.school-search-result').each(function(){
                    if (!$(this).hasClass('hidden')) {
                        if ($(this).attr('id') == 'school-'+school_uid) {
                            if ($(this).hasClass('animate__animated')) {
                                $(this).removeClass('animate__animated animate__bounceIn');
                                $(this).click();
                            }
                            $(this).addClass('animate__animated animate__bounceIn');
                        } else {
                            $(this).addClass('hidden');
                        }
                    } else {
                        $(this).removeClass('animate__animated animate__bounceIn');
                    }
                });

                $('#school-'+school_uid).removeClass('hidden');
            });

            if (i==0) $(this).click();

            i++;
        });
    }

    $(document).ready(function(){

        $('#school-info-search').submit(function(event){
            event.preventDefault();
            doSearch();
        });

        $('#country').on('change', function(){
            $('#city :selected').prop('selected', false);
            $('#category :selected').prop('selected', false);
            doSearch();
        });

        $('#city, #subject, #process, #category, #course, #sortby').on('change', function(){
            doSearch();
        });

        /*$('#search').on('keyup', $.debounce(250, function(e){
            doSearch();
        }));*/

        $('#search').on('keyup', function(){
            getKeywords($(this).val());
        });

        setList();
        setSchoolList();
    });

</script>
@endsection