@inject('FrontendPresenter', 'App\Presenters\FrontendPresenter')
@section('json-ld', Breadcrumbs::view('breadcrumbs::json-ld', 'study-school-search-map'))
@extends('layouts.frontend')
@section('other_body')
<nav class="pushy pushy-right py-3 d-flex flex-column">
    <div class="px-3">
        <a class="menu-btn text-dark" href="javascript:void();">
            <i class="fas fa-chevron-left mr-2"></i> 返回
        </a>
        <div class="list-group my-5">
            <a class="list-group-item collapse-arrow-v" data-toggle="collapse" href="#collapse-m-school">
                留學
            </a>
            <div id="collapse-m-school" class="collapse border-top" role="tabpanel">
                <a class="dropdown-item" href="{{ route('search_language-school-search-map') }}">遊學</a>
                <a class="dropdown-item" href="{{ route('search_study-school-search-map') }}">留學</a>
            </div>
            <a class="list-group-item collapse-arrow-v" data-toggle="collapse" href="#collapse-m-countries">
                @if (!request()->has('country'))
                    <div>所有國家</div>
                @else
                    @foreach ($country_list as $k => $v)
                        @if (request()->input('country') == $v->country_name_en)
                            <div>{{$v->country_name}}</div>
                        @endif
                    @endforeach
                @endif
            </a>
            <div id="collapse-m-countries" class="collapse border-top" role="tabpanel">
                <a class="dropdown-item" href="{{ route('search_study-school-search-map') }}">所有國家</a>
                @foreach ($country_list as $k => $v)
                    <a class="dropdown-item" href="{{ route('search_study-school-search-map') }}?country={{$v->country_name_en}}">{{$v->country_name}}</a>
                @endforeach
            </div>
            <div class="input-group mt-7">
                <div class="input-group-prepend">
                <span class="input-group-text bg-white border-top-0 border-left-0 px-2" id="">
                    <i class="fas fa-xs fa-search"></i>
                </span>
                </div>
                <input type="text" id="filter_keyword2" class="form-control" placeholder="搜尋關鍵字">
                <span class="toggle-helper d-none" data-toggle="dropdown"></span>
                <div class="dropdown-menu" id="inputFilterList2"></div>
            </div>
            <div class="mt-7">
                <div class="font-small text-muted mb-1">檢視模式</div>
                <div class="btn-group btn-group-justified">
                    <a class="btn btn-outline-light" href="{{ route('search_study-school-search-list') }}?{{ http_build_query(request()->query()) }}">
                        <i class="fas fa-xs fa-fw fa-list-ul"></i> 清單
                    </a>
                    <a class="btn btn-primary text-white" href="{{ route('search_study-school-search-map') }}?{{ http_build_query(request()->query()) }}">
                        <i class="fas fa-xs fa-fw fa-map"></i> 地圖
                    </a>
                </div>
            </div>
        </div>
    </div>
</nav>
<div class="site-overlay"></div>
@stop
@section('content')
<nav class="nav-main">
    <div class="nav-secondary">
        <div class="container px-0 px-lg-3">
            <nav class="navbar d-none d-lg-block">
                <ul class="nav nav-pills nav-fill nav-search">
                    <li class="nav-item dropdown dropdown-inline">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <div>留學</div>
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="{{ route('search_language-school-search-map') }}">遊學</a>
                            <a class="dropdown-item" href="{{ route('search_study-school-search-map') }}">留學</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown d-none d-lg-block">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            @if (!request()->has('country'))
                            <div>所有國家</div>
                            @else
                            @foreach ($country_list as $k => $v)
                            @if (request()->input('country') == $v->country_name_en)
                            <div>{{$v->country_name}}</div>
                            @endif
                            @endforeach
                            @endif
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="{{ route('search_study-school-search-map') }}">所有國家</a>
                            @foreach ($country_list as $k => $v)
                            <a class="dropdown-item" href="{{ route('search_study-school-search-map') }}?country={{$v->country_name_en}}">{{$v->country_name}}</a>
                            @endforeach
                        </div>
                    </li>
                    <li class="nav-item dropdown dropdown-filter w-75">
                        <input type="text" id="filter_keyword" class="form-control" placeholder="搜尋關鍵字">
                        <span class="toggle-helper d-none" data-toggle="dropdown"></span>
                        <div class="dropdown-menu" id="inputFilterList"></div>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="d-lg-none">
            <a class="d-flex justify-content-between align-items-center text-black menu-btn px-4 py-3" href="javascript:void();">
                學校搜尋 <i class="fas fa-sliders-h"></i>
            </a>
        </div>
    </div>
</nav>

<div class="container breadcrumbs">
    {{ Breadcrumbs::render('study-school-search-map') }}
</div>

<main class="main py-0 pt-lg-6 pb-lg-20">

    <div class="container">
        <div class="d-none d-lg-flex align-items-center justify-content-between mb-6">
            <div class="h4 font-weight-bold">共有 {{$school_count}} 所學校</div>
            <a class="btn btn-outline-primary" href="{{ route('search_study-school-search-list') }}?{{ http_build_query(request()->query()) }}">
                <i class="fas fa-list-ul"></i> 清單
            </a>
        </div>
        <div class="row row-search-map">
            <div class="col-12 col-lg-8 d-none d-lg-block">
                <div class="list-school scrollbar-inner">
                    @foreach ($school_list as $k => $v)
                    <div class="box-school mb-4">
                        <div class="row no-gutters box">
                            <div class="col-12 col-md-5 slider-school-gallery mb-4 mb-md-0">
                                @if (isset($v->schoolImage))
                                @foreach ($v->schoolImage as $num => $i)
                                @if ($num == 10)
                                @break
                                @endif
                                <img class="img-fluid" src="{{$i->url}}">
                                @endforeach
                                @endif
                            </div>
                            <div class="col-12 col-md-7 flex-column d-flex pl-0 pl-md-4">
                                <div class="mb-auto">
                                    <div class="row justify-content-between no-gutters">
                                        <div class="col-lg-10 col-9">
                                            <div class="h5 font-weight-bold">
                                                {{ $v->name }}
                                            </div>
                                        </div>
                                        <div class="col text-right">
                                            @if (env('hide') == 'N')
                                            <a class="btn-like" school_id="{{$v->school_id}}" href="javascript:void();">
                                                @if(!empty($mc_save_school) && in_array($v->school_id, $mc_save_school))
                                                    <i class="fa-fw fa-heart fas text-danger"></i>
                                                @else
                                                    <i class="far fa-fw fa-heart text-muted"></i>
                                                @endif
                                            </a>
                                            @endif
                                        </div>
                                    </div>
                                <div class="text-muted my-1">
                                    <i class="fas fa-sm fa-map-marker-alt"></i> {{ $FrontendPresenter->getCountry($v->country) }} {{$v->city_tw}}
                                </div>
                                <p class="text-row-3">
                                    {!!$v->feature!!}
                                </p>
                                </div>
                                <div class="mt-4 md-md-auto d-block d-md-flex">
                                    <a class="btn btn-more btn-primary" href="{{ route('search_school-content', $v->school_id) }}">了解更多</a>
                                    <a class="btn btn-more btn-outline-primary ml-0 ml-md-4" href="{{ route('channel_appointment') }}">預約諮詢</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <nav class="mt-10">
                    <!-- nav-pagination -->
                    <div id="nav-pagination">
                        {!! $FrontendPresenter->pagination($school_list) !!}
                    </div>
                    <!-- ./nav-pagination -->
                </nav>
            </div>
            <div class="col-12 col-lg-4">
                <div id="map-canvas" class="h-100"></div>
            </div>
        </div>
    </div>

    {{--<div class="nav-mobile-search">
         <a class="btn btn-outline-primary" href="{{ route('search_study-school-search-list') }}?{{ http_build_query(request()->query()) }}">
            <i class="fas fa-sm fa-list-ul"></i> 清單
        </a>
        <a class="btn btn-primary menu-btn" href="javascript:void();">
            FILTER
             <span class="badge">2</span>
        </a>
    </div>--}}
</main>
@stop
@section('js')
<script>
$(document).on('click', function (e) {
    if ($(e.target).closest("#inputFilterList").length === 0) {
        $("#inputFilterList").hide();
    }

    if ($(e.target).closest("#inputFilterList2").length === 0) {
        $("#inputFilterList2").hide();
    }
});

$('#filter_keyword').keyup(function () {
    var keyword = $(this).val();
    $.ajax({
        url: '{{ route('search_study') }}',
        data: 'keyword=' + keyword + '&_token={!! csrf_token() !!}',
        type: 'POST',
        success: function(response) {
            $("#inputFilterList").show();
            $('#inputFilterList').html(response).addClass('show');
        }
    });
});

$('#filter_keyword2').keyup(function () {
    var keyword = $(this).val();
    $.ajax({
        url: '{{ route('search_study') }}',
        data: 'keyword=' + keyword + '&_token={!! csrf_token() !!}',
        type: 'POST',
        success: function(response) {
            $("#inputFilterList2").show();
            $('#inputFilterList2').html(response).addClass('show');
        }
    });
});

$('.btn-like').click(function () {
    var like = $(this).find('i');
    $.ajax({
        url: '{{ route('member_save-school') }}',
        data: 'school_id=' + $(this).attr('school_id') + '&_token={!! csrf_token() !!}',
        type: 'POST',
        success: function(response) {
            alert(response);
            if(response == '請先登入') {
                like.removeClass('text-danger').addClass('text-muted').removeClass('fas').addClass('far');
                $('#modal-login').modal();
            } else {
                var like_count = Cookies.get('like_count');
                if(like_count > 99) {
                    $('#header_like_count').html('99+');
                }else if(like_count > 0) {
                    $('#header_like_count').html(like_count);
                }
            }
        }
    });
});
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6piIpu_iVGX8ZNUF5F8GWr2udHRYMxJ0&callback=initMap" type="text/javascript"></script>
<script>
function initMap()
{
    @if (isset($school_list[0]))
    var mylatlng = {lat: {{$school_list[0]->lat}}, lng: {{$school_list[0]->lng}}};
    @else
    var mylatlng = {lat: 51.517, lng: -0.140};
    @endif
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 5,
        center: mylatlng,
        disableDefaultUI: true
    });
    var icon = {
        url: "/assets/img/ui/map-pin.png", // url
        scaledSize: new google.maps.Size(26, 43), // scaled size
    };
    @foreach ($school_list as $k => $v)
    var data = {
        school_id: {{ $v->school_id }} ,
        title: '{{$v->name}}',
        address: '{{$v->address}}',
        desc: '{{ explode('<br>', $v->feature)[0] }}',
        position: {lat: {{$v->lat}}, lng: {{$v->lng}}},
        map: map,
        icon: icon,
    };
    var marker = new google.maps.Marker(data);
    var infoWindow = new google.maps.InfoWindow();
    infoWindow.setContent("<div class='info-window bs-strong'>" + "<div class='h5 font-weight-bold text-row-3'><a href='{{ route('search_school-content', $v->school_id) }}'>" + data.title + "</a></div><div class='text-muted my-2'><i class='fas fa-map-marker-alt'></i>" + data.address + "</div><div class='text-row-1' style='-webkit-box-orient:inherit'>" + data.desc + "</div></div>");
    (function (marker, data) {
        google.maps.event.addListener(marker, "click", function (e) {
            infoWindow.setContent("<div class='info-window bs-strong'>" + "<div class='h5 font-weight-bold text-row-3'><a href='{{ route('search_school-content', $v->school_id) }}'>" + data.title + "</a></div><div class='text-muted my-2'><i class='fas fa-map-marker-alt'></i>" + data.address + "</div><div class='text-row-1' style='-webkit-box-orient:inherit'>" + data.desc + "</div></div>");
            infoWindow.open(map, marker);
        });
    })(marker, data);
    @endforeach
}
</script>
@stop