@inject('FrontendPresenter', 'App\Presenters\FrontendPresenter')
@section('json-ld', Breadcrumbs::view('breadcrumbs::json-ld', 'search_school-course', $school->school_id, $school->name))
@extends('layouts.frontend')
@section('content')
<main class="main pt-0">
    <div class="container py-8 px-0 px-md-3">
        <div class="row align-items-center">
            <div class="col-12 col-md-5">
                <div class="slider-school-gallery slider-school-gallery-lg">
                    @if (isset($school->schoolImage))
                        @foreach ($school->schoolImage as $num => $i)
                            @if ($num == 10)
                                @break
                            @endif
                            <img class="img-fluid" src="{{$i->url}}">
                        @endforeach
                    @endif
                </div>
            </div>
            <div class="col-12 col-md-6 mt-6 mt-md-0 px-6 px-md-0">
                <div class="row align-items-center justify-content-between">
                    <div class="col">
                        <img class="img-fluid" src="{{$school->logo}}" style="max-width: 140px;">
                    </div>
                    @if (env('hide') == 'N')
                        <div class="col text-right">
                            @include('frontend.module.school-btnlike')
                        </div>
                    @endif
                </div>
                <div class="h3 font-weight-bold my-4">{{$school->name}}</div>
                <div class="text-muted mb-3">
                    <i class="fas fa-sm fa-map-marker-alt"></i> {{ $FrontendPresenter->getCountry($school->country) }} {{$school->city_tw}}
                </div>
                <p class="text-row-3">
                    {!!$school->feature!!}
                </p>
            </div>
        </div>
    </div>

    <div class="nav-secondary nav-sticky border-0">
        <div class="container">
            <div class="nav-light">
                <ul class="nav nav-big">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('search_school-content', request()->segment(3)) }}">學校介紹</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="{{ route('search_school-course', request()->segment(3)) }}">課程</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container breadcrumbs">
        {{ Breadcrumbs::render('search_school-course', $school->school_id, $school->name) }}
    </div>

    <div class="container pt-8 pt-md-12">
        <div class="row justify-content-center">
            <div class="col-12 col-md-8">
                <div class="border p-5 p-md-9 mb-4 mb-md-8">
                    <div class="h5 font-weight-bold mb-6">課程資訊</div>
                    <p>
                        {!! $school->course_intro !!}
                    </p>
                </div>
                <div class="border p-5 p-md-9 mb-4 mb-md-7">
                    <div class="h5 font-weight-bold mb-6">入學條件</div>
                    <p>
                        {!! nl2br($school->enter_condi_memo) !!}
                    </p>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div class="border sticky-sidebar mt-6 mt-md-0">
                    <div class="p-6">
                    @if ($school->website != '')
                    <div class="font-weight-bold mb-2">學校</div>
                    <p>
                        <a class="text-dark text-wrap" href="{{$school->website}}" target="_blank">
                            {{$school->website}}
                        </a>
                    </p>
                    @endif
                    @if (isset($school->schoolSns) && count($school->schoolSns) > 0)
                    <div class="font-weight-bold mb-2">學校社群</div>
                    <div class="mb-5 d-flex">
                        @foreach ($school->schoolSns as $k => $v)
                        <a class="btn-rounded btn-dark mr-2" href="{{$v->url}}" target="_blank">
                            <i class="fab fa-fw fa-xs fa-{{$v->sns}}"></i>
                        </a>
                        @endforeach
                    </div>
                    @endif
                    <div class="font-weight-bold mb-2">學校地址</div>
                    <p>{{$school->address}}</p>
                    <div class="font-weight-bold mb-2">學校連繫</div>
                    <p>
                        {{$school->telephone}}
                    </p>
                    @if ($school->view360 != '')
                    <div class="mb-5 d-lg-block">
                        <a class="btn btn-outline-primary" href="{{$school->view360}}" target="_blank">學校指南</a>
                    </div>
                    @endif
                    <div class="mb-4">
                        <div id="map-canvas" class="map-sm"></div>
                    </div>
                    <div class="d-lg-block">
                        <a class="btn btn-block btn-primary" href="{{ route('channel_appointment') }}">免費諮詢</a>
                    </div>
                </div>
                </div>
            </div>
            {{-- <div class="col-12 col-md-4">
                <div class="border p-6 sticky-sidebar mt-6 mt-md-0">
                    <div class="font-weight-bold mb-2">學校</div>
                    <p>
                        <a class="text-dark text-wrap" href="http://www.kaplaninternational.com/" target="_blank">
                            http://www.kaplaninternational.com/
                        </a>
                    </p>
                    <div class="font-weight-bold mb-2">學校社群</div>
                    <div class="mb-5 d-flex">
                        <a class="btn-rounded btn-dark mr-2" href="" target="_blank">
                            <i class="fab fa-fw fa-xs fa-youtube"></i>
                        </a>
                        <a class="btn-rounded btn-dark" href="" target="_blank">
                            <i class="fab fa-fw fa-xs fa-twitter"></i>
                        </a>
                    </div>
                    <div class="font-weight-bold mb-2">學校地址</div>
                    <p>3-4倫敦南安普頓廣場，WC1A 2DA</p>
                    <div class="font-weight-bold mb-2">學校連繫</div>
                    <p>
                        44 20 7404 3080<br>44 20 7404 3443
                    </p>
                    <div class="mb-5 d-none d-lg-block">
                        <a class="btn btn-outline-primary" href="javascript:void();">學校指南</a>
                    </div>
                    <div class="mb-4">
                        <div id="map-canvas" class="map-sm"></div>
                    </div>
                    <div class="d-none d-lg-block">
                        <a class="btn btn-block btn-primary" href="javascript:void();">免費諮詢</a>
                    </div>

                </div>
            </div> --}}
        </div>
    </div>

    {{--<div class="nav-mobile-search">
         <a class="btn btn-block btn-outline-primary" href="javascript:void();">
            學校指南
        </a>
        <a class="btn btn-block btn-primary" href="javascript:void();">
            免費諮詢
        </a>
    </div>--}}
</main>
@stop
@section('other')
<!-- modal-索取報價 -->
<div class="modal-search-price"></div>

<!-- modal-states -->
<div class="modal-states"></div>
<!-- ./modal-states -->
@stop
@section('js')
<!-- Google Map API -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6piIpu_iVGX8ZNUF5F8GWr2udHRYMxJ0&callback=initMap" type="text/javascript"></script>
<script>
function initMap() {
    var mylatlng = {lat: {{$school->lat}}, lng: {{$school->lng}}};
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 15,
        center: mylatlng,
        disableDefaultUI: true
    });
    var icon = {
        url: "/assets/img/ui/map-pin.png", // url
        scaledSize: new google.maps.Size(26, 43), // scaled size
    };
    var marker = new google.maps.Marker({
        position: mylatlng,
        map: map,
        icon: icon,
    });
}
</script>
@stop