@extends(env('APP_NAME').'.layout')

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

    {!! resource(env('APP_NAME').'/component/school/asset/school.css') !!}
    {!! resource(env('APP_NAME').'/component/school/asset/school.js') !!}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
@endpush

@section('content')
<div class="school-info">
    <!-- 페이지타이틀 -->
    <div class="programs-top-banner">
        <div class="max-width">
            <h1 class="programs-title">
                @if($uhak_type == '1')
                    어학연수 학교검색
                @elseif($uhak_type == '2')
                    해외대학 검색
                @elseif($uhak_type == '3')
                    초중고 검색
                @elseif($uhak_type == '4')
                    아트대학 검색
                @else
                @endif
            </h1>
            <p class="programs-text">
                <!-- 카테고리 선택에 따라 span 태그 속 텍스트가 변경됨 -->
                @if($uhak_type == '1')
                <span>국내 1위 edm유학센터가 엄선한 <br>어학연수 기관</span>들을 검색해보세요.
                @elseif($uhak_type == '2')
                <span>국내 1위 edm유학센터가 엄선한 <br>해외대학</span>들을 검색해보세요.
                @elseif($uhak_type == '3')
                <span>국내 1위 edm유학센터가 엄선한 <br>해외 초중고</span>들을 검색해보세요.
                @elseif($uhak_type == '4')
                <span>국내 1위 edm유학센터가 엄선한 <br>아트대학</span>들을 검색해보세요.
                @else
                @endif
            </p>
        </div>
    </div>

    <div class="school-info-search" id="programsSearchWrap">
        <div class="max-width">
            <div class="apc-category">
                @php
                    switch ($uhak_type) {
                        case 1: $action = '/'.$db; break;
                        case 2: $action = '/'.$db.'/degree'; break;
                        case 3: $action = '/'.$db.'/boarding'; break;
                        case 4: $action = '/'.$db.'/art'; break;
                        default:$action = '/'.$db; break;
                    }
                @endphp
                <form name="school-info-search" id="school-info-search" method="GET" action="{{ $action }}" class="school-info-search-form">
                    <div class="categoryWrap">
                        <a href="/{{ $db }}" class="@active($uhak_type, 1)">어학연수</a>
                        <a href="/{{ $db }}/degree" class="@active($uhak_type, 2)">대학-일반</a>
                        <a href="/{{ $db }}/art" class="@active($uhak_type, 4)">대학-아트</a>
                        <a href="/{{ $db }}/boarding" class="@active($uhak_type, 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> -->
                    <!-- pc filter -->
                    <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($uhak_type == 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>
                                @else
                                    @foreach(countries() as $val)
                                        <option value="{{ $val->config_oldcode }}" @selected($val->config_oldcode, request()->country)>{!! $val->config_name !!}</option>
                                    @endforeach
                                @endif
                            </select>
                        </span>

                        @if ($uhak_type == 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">{!! $city_options !!}</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=>$value)
                                        <option value="{{ $value }}" @selected($value, request()->category)>{{ $key }}</option>
                                    @endforeach
                                </select>
                            </span>
                        @elseif($uhak_type == 3)
                            <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">{!! $city_options !!}</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">{!! $subjects !!}</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">{!! $courses !!}</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="{{ request()->search }}" />
                        </span>

                        <button type="submit" onclick="moPopupBtnNone()"><span>학교 검색</span></button>
                    </div>
                    <!-- mobile filter -->
                     <!--  -->
                    <div class="filterWrap_mo open1">
                        <button type="button" class="closeBtn">닫기<span></span><span></span></button>
                        <div class="filterContents">
                            <div class="country">
                                <p>국가</p>
                                <div class="list" id="mo-country-selector">
                                    @if($uhak_type == 3)
                                        <button type="button" @class(['active' => request()->country==6]) data-value='6'>캐나다</button>
                                        <button type="button" @class(['active' => request()->country==5]) data-value='5'>미국</button>
                                        <button type="button" @class(['active' => request()->country==1]) data-value='1'>영국</button>
                                    @else
                                        @foreach(countries() as $val)
                                            <button type="button" @class(['active' => request()->country==$val->config_oldcode]) data-value="{{ $val->config_oldcode }}">{!! $val->config_name !!}</button>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="filterWrap_mo open2">
                        <button type="button" class="closeBtn">닫기<span></span><span></span></button>
                        <div class="filterContents">
                            @if($uhak_type == 1 or $uhak_type == 3)
                            <div class="city" id="mo-city-selector">
                                <p>도시</p>
                                <div class="list">
                                    @if(request()->country)
                                        @foreach ($cities as $city=>$city_name)
                                        <button type="button" @class(['active' => request()->city==$city]) data-value="{{ $city }}">{{ $city_name }}</button>
                                        @endforeach
                                    @else
                                        <button type="button" data-value="">도시전체</button>
                                    @endif
                                </div>
                            </div>
                            @else
                            <div class="city" id="mo-subject-selector">
                                <p>전공</p>
                                <div class="list">
                                    <button type="button" data-value="">전공전체</button>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>

                    <div class="filterWrap_mo open3">
                        <button type="button" class="closeBtn">닫기<span></span><span></span></button>
                        <div class="filterContents">
                            @if($uhak_type == 1)
                                <div class="course" id="mo-category-selector">
                                    <p>과정</p>
                                    <div class="list">
                                        <button type="button" data-value="">전체과정</button>
                                        @foreach ($categories as $key=>$value)
                                            <button type="button" @class(['active' => request()->category==$value]) data-value="{{ $value }}">{{ $key }}</button>
                                        @endforeach
                                    </div>
                                </div>
                            @elseif($uhak_type == 3)
                                <div class="course" id="mo-category-selector">
                                    <p>학교종류</p>
                                    <div class="list">
                                        <button type="button" data-value="">학교종류전체</button>
                                    </div>
                                </div>
                            @else
                                <div class="course" id="mo-course-selector">
                                    <p>과정</p>
                                    <div class="list">
                                        <button type="button" data-value="">과정전체</button>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </form>
            </div>
            <div class="fake_button_mo">
                <div id="mo-country" class="click country click1" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/programsSearch_country.svg');">{{ request()->country ? $country_name : '국가전체'}}</div>

                @if ($uhak_type == 1)
                    <div id="mo-city" class="click city click2" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/programsSearch_city.svg');">{{ request()->city ? $city_name : '도시전체'}}</div>
                    <div id="mo-category" class="click course box click3" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/programsSearch_category.svg');">{{ request()->category ?? '과정전체' }}</div>
                @elseif($uhak_type == 3)
                    <div id="mo-city" class="click city click2" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/programsSearch_city.svg');">{{ request()->city ? $city_name : '도시전체'}}</div>
                    <div id="mo-category" class="click course box click3" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/programsSearch_category.svg');">{{ request()->category ?? '학교종류' }}</div>
                @else
                    <div id="mo-subject" class="click city click2" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/programsSearch_city.svg');">{{ request()->subject ?? '전공'}}</div>
                    <div id="mo-course" class="click course box click3" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/programsSearch_category.svg');">{{ request()->course ?? '과정' }}</div>
                @endif

                <div class="search box">
                    <div class="btn-group">
                        <input id="mo-search" type="text" placeholder="직접입력" value="{{ request()->search }}" />
                        <button id="mo-search-submit" type="button" class="btn btn-outline-secondary" disabled>찾기</button>
                    </div>
                </div>
            </div>
        </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->total()) }}</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>
                <!-- 리스트 아이템 -->
                <ul class="school-info-list" id="school-info-list">
                    @include(env('APP_NAME').'.component.school.index-list', [
                        'uhak_type' => $uhak_type,
                        'schools' => $schools,
                    ])
                </ul>
                <!-- //리스트 아이템 -->
            </div>
            <!-- //리스트 -->

            <!-- 상세정보 -->
            <div class="school-info-list-detail-wrap">
                <div class="school-info-list-detail" id="school-info-list-detail">
                    @include(env('APP_NAME').'.component.school.index-view', [
                        'uhak_type' => $uhak_type,
                        'schools' => $schools,
                    ])
                </div>
            </div>
            <!-- //상세정보 -->
        </div>
        <!--//school-info-width-->
    </div>
    <!--//school-info-list-wrap-->
</div>

<div id="loading">
    <div id="loading-content"></div>
</div>

<script type="text/javascript">
    $(document).ajaxStart(function() {
        $('#loading').addClass('loading');
        $('#loading-content').addClass('loading-content');
    });

    $(document).ajaxStop(function() {
        $('#loading').removeClass('loading');
        $('#loading-content').removeClass('loading-content');
    });

    function doSearch()
    {
        var formData = {
          uhak_type: {{ $uhak_type }},
          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){
            //console.log(response.data);

            if (response.data) {
                $('#total-count').html(response.data.count);
                $('#school-info-list').html(response.data.school_list);
                $('#school-info-list-detail').html(response.data.school_preview);

                @if ($uhak_type == 1)
                    $('#city').html(response.data.city_options);
                @elseif($uhak_type == 3)
                    $('#city').html(response.data.city_options);
                    $('#category').html(response.data.boarding_school_type);
                @elseif ($uhak_type == 2 or $uhak_type ==4)
                    $('#subject').html(response.data.subjects);
                    $('#course').html(response.data.courses);
                @endif

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

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

        $(document).unbind('ajaxStart');

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

        $.ajax({
            url: '/{{ $db }}/get-keywords/',
            type: 'GET',
            data: formData,
            dataType: 'json',
            cache: false
        }).done(function(response){
            var tags = response;
            $(document).ajaxStart(function() {
                $('#loading').addClass('loading');
                $('#loading-content').addClass('loading-content');
            });
            $('#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 getCities($country)
    {
        $.ajax({
            url: '/{{ $db }}/get-cities?uhaktype={{ $uhak_type }}&country='+$country,
            type: 'GET',
            cache: false
        }).done(function(response){
            //console.log(response);
            $('#mo-city-selector > .list').html(response);
        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR);
        });
    }

    function getSubjects($country)
    {
        $.ajax({
            url: '/{{ $db }}/get-subjects-mo?uhak_type={{ $uhak_type }}&country='+$country,
            type: 'GET',
            cache: false
        }).done(function(response){
            //console.log(response);
            $('#mo-subject-selector > .list').html(response);
        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR);
        });
    }

    function getBoardingSchoolTypes($country)
    {
        $.ajax({
            url: '/{{ $db }}/get-boarding-school-types?country='+$country,
            type: 'GET',
            cache: false
        }).done(function(response){
            //console.log(response);
            $('#mo-category-selector > .list').html(response);
        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR);
        });
    }

    function getCourses(country, uhak_type)
    {
        $.ajax({
            url: '/{{ $db }}/get-courses?uhak_type={{ $uhak_type }}&country='+country,
            type: 'GET',
            cache: false
        }).done(function(response){
            //console.log(response);
            $('#mo-course-selector > .list').html(response);
        }).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++;
        });
    }

    function closeMoWin()
    {
        $('.filterWrap_mo').removeClass('active');
        $('html,body').css({
            'overflow':'auto'
        });
    }

    function setMobileSearch()
    {
        $('#mo-country-selector button').each(function(){
            $(this).on('click', function(e){
                e.preventDefault();
                $('#mo-country-selector button').removeClass('active');
                $(this).addClass('active');
                $('#country').val($(this).attr('data-value'));
                $('#mo-country').text($(this).text());

                @if($uhak_type==1 or $uhak_type==3)
                    $('#city').val('');
                    $('#mo-city').text('도시전체');
                    getCities($(this).attr('data-value'));
                    @if($uhak_type==3)
                        getBoardingSchoolTypes($(this).attr('data-value'));
                    @endif
                @else
                    $('#subject').val('');
                    $('#mo-subject').text('전공전체');
                    getSubjects($(this).attr('data-value'));
                    getCourses($(this).attr('data-value'), {{ $uhak_type }});
                @endif

                var selectedCountry = $('#mo-country').text();
                var uhak_type = {{ $uhak_type }};
                var uhak_title;

                if (uhak_type == '1') {
                    uhak_title = '어학연수';
                } else if (uhak_type == '2') {
                    uhak_title = '해외대학';
                } else if (uhak_type == '3') {
                    uhak_title = '조기유학';
                } else if (uhak_type == '4') {
                    uhak_title = '아트유학';
                }

                var newTitle = selectedCountry + ' ' + uhak_title + ' ' + '학교검색';
                $('h1.programs-title').text(newTitle);

                closeMoWin();
                doSearch();
            });
        });

        $('#mo-city-selector button').each(function(){
            $(this).on('click', function(e){
                e.preventDefault();
                $('#mo-city-selector button').removeClass('active');
                $(this).addClass('active');
                $('#city').val($(this).attr('data-value'));
                $('#mo-city').text($(this).text());

                closeMoWin();
                doSearch();
            });
        });

        $('#mo-subject-selector button').each(function(){
            $(this).on('click', function(e){
                e.preventDefault();
                $('#mo-subject-selector button').removeClass('active');
                $(this).addClass('active');
                $('#subject').val($(this).attr('data-value'));
                $('#mo-subject').text($(this).text());

                closeMoWin();
                doSearch();
            });
        });

        $('#mo-category-selector button').each(function(){
            $(this).on('click', function(e){
                e.preventDefault();
                $('#mo-category-selector button').removeClass('active');
                $(this).addClass('active');
                $('#category').val($(this).attr('data-value'));
                $('#mo-category').text($(this).text());

                closeMoWin();
                doSearch();
            });
        });

        $('#mo-course-selector button').each(function(){
            $(this).on('click', function(e){
                e.preventDefault();
                $('#mo-course-selector button').removeClass('active');
                $(this).addClass('active');
                $('#course').val($(this).attr('data-value'));
                $('#mo-course').text($(this).text());

                closeMoWin();
                doSearch();
            });
        });

        $('#mo-search').on('keyup', function(e){
            let keyword = $(this).val();
            if(keyword.length>0) {
                $('#mo-search-submit').prop('disabled', false);
                $('#mo-search-submit').click(function(){
                    $('#search').val(keyword);
                    doSearch();
                });
            } else {
                $('#mo-search-submit').prop('disabled', true);
            }
        });

    }

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

        $('#country').on('change', function(){
            var selectedCountry = $('#country option:selected').text();
            var uhak_type = {{ $uhak_type }};
            var uhak_title;

            if (uhak_type == '1') {
                uhak_title = '어학연수 학교검색';
            } else if (uhak_type == '2') {
                uhak_title = '대학 검색';
            } else if (uhak_type == '3') {
                uhak_title = '초중고 검색';
            } else if (uhak_type == '4') {
                uhak_title = '아트대학 검색';
            }

            var newTitle = selectedCountry + ' ' + uhak_title;
            $('h1.programs-title').text(newTitle);

            $('#city :selected').prop('selected', false);
            $('#category :selected').prop('selected', false);
            doSearch();
        });


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

        $('#sortby').on('change', function(){
            $('input[name=sort]').val($(this).find(":selected").val());
            doSearch();
        });

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

        setList();
        setSchoolList();
        setMobileSearch();

        // 모바일 필터 팝업
        $('.fake_button_mo .click').on('click',function(){
            /*$('html,body').css({
                'overflow':'hidden'
            });*/
            if($(this).hasClass('click1')){
                $('.filterWrap_mo.open1').addClass('active');
            }else if($(this).hasClass('click2')){
                $('.filterWrap_mo.open2').addClass('active');
            }else if($(this).hasClass('click3')){
                $('.filterWrap_mo.open3').addClass('active');
            }
        });

        $('.filterWrap_mo .closeBtn, .filterWrap_mo .completeBtn').on('click',function(){
            $('.filterWrap_mo').removeClass('active');
            $('html,body').css({
                'overflow':'auto'
            });
        });
    });

</script>
@endsection