@inject('FrontendPresenter', 'App\Presenters\FrontendPresenter')
@section('json-ld', Breadcrumbs::view('breadcrumbs::json-ld', 'search_school-content', $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" id="btnlike">
                        @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 active" href="{{ route('search_school-content', request()->segment(3)) }}">學校</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('search_school-course', request()->segment(3)) }}">課程</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('search_language-school-caculator', request()->segment(3)) }}">即時報價</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container breadcrumbs">
        {{ Breadcrumbs::render('search_school-content', $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="h5 font-weight-bold mb-6">學校設施/服務</div>
                <div class="row">
                    @if (in_array('FC010', explode(',', $school->facility)))
                    <div class="col-4 col-lg-2 my-2 text-center">
                        <img class="img-fluid" src="/assets/img/icon/school-service-wifi.svg" alt="">
                        <div class="mt-2">Free WIFI</div>
                    </div>
                    @endif
                    @if (in_array('FC020', explode(',', $school->facility)))
                    <div class="col-4 col-lg-2 my-2 text-center">
                        <img class="img-fluid" src="/assets/img/icon/school-service-library.svg" alt="">
                        <div class="mt-2">Library</div>
                    </div>
                    @endif
                    @if (in_array('FC030', explode(',', $school->facility)))
                    <div class="col-4 col-lg-2 my-2 text-center">
                        <img class="img-fluid" src="/assets/img/icon/school-service-book.svg" alt="">
                        <div class="mt-2">Self study area</div>
                    </div>
                    @endif
                    @if (in_array('FC070', explode(',', $school->facility)))
                    <div class="col-4 col-lg-2 my-2 text-center">
                        <img class="img-fluid" src="/assets/img/icon/school-service-computer.svg" alt="">
                        <div class="mt-2">Interactive screens</div>
                    </div>
                    @endif
                    @if (in_array('FC050', explode(',', $school->facility)))
                    <div class="col-4 col-lg-2 my-2 text-center">
                        <img class="img-fluid" src="/assets/img/icon/school-service-weekend.svg" alt="">
                        <div class="mt-2">Student Lounge</div>
                    </div>
                    @endif
                    @if (in_array('FC080', explode(',', $school->facility)))
                    <div class="col-4 col-lg-2 my-2 text-center">
                        <img class="img-fluid" src="/assets/img/icon/school-service-fitness.svg" alt="">
                        <div class="mt-2">GYM</div>
                    </div>
                    @endif
                    @if (in_array('FC060', explode(',', $school->facility)))
                    <div class="col-4 col-lg-2 my-2 text-center">
                        <img class="img-fluid" src="/assets/img/icon/school-service-cutlery.svg" alt="">
                        <div class="mt-2">Student kitchen</div>
                    </div>
                    @endif
                    @if (in_array('FC040', explode(',', $school->facility)))
                    <div class="col-4 col-lg-2 my-2 text-center">
                        <img class="img-fluid" src="/assets/img/icon/school-service-gamepad.svg" alt="">
                        <div class="mt-2">IT Lounge</div>
                    </div>
                    @endif
                </div>
                <hr class="my-8">

                <div class="h5 font-weight-bold mb-6">基本信息</div>
                <div class="row mb-4">
                    <div class="col font-weight-bold text-muted">種類</div>
                    @if ($school->school_type == 'ST010')
                        <div class="col-8">遊學</div>
                    @else
                        <div class="col-8">留學</div>
                    @endif

                    @if (!empty($school->establish))
                        <div class="w-100 my-2"></div>
                        <div class="col font-weight-bold text-muted">設立年度</div>
                        <div class="col-8">{{$school->establish}}</div>
                    @endif

                    @if (!empty($school->total_student))
                        <div class="w-100 my-2"></div>
                        <div class="col font-weight-bold text-muted">學生總人數</div>
                        <div class="col-8">{{$school->total_student}}</div>
                    @endif
                    
                    @if (!empty($school->nationality_rate))
                        <div class="w-100 my-2"></div>
                        <div class="col font-weight-bold text-muted">主要國籍</div>
                        <div class="col-8">{{$FrontendPresenter->rateString($school->nationality_rate)}}</div>
                    @endif
                </div>
                <div class="readmore-expand">
                    <div class="collapse1 mb-2" id="collapse-readmore-1">
                        {!! nl2br($school->intro) !!}
                    </div>
                </div>
                <hr class="my-8">

                @if (!empty($school->nationality_rate))
                    <div class="h5 font-weight-bold mb-6">主要國籍比例</div>
                    <div class="mb-6">
                        <div id="pie-country-all" style="width: 100%; height:300px;"></div>
                    </div>
                    <hr class="my-8">
                @endif

                <div class="h5 font-weight-bold mb-6">住宿服務</div>
                <table class="table table-rwd table-noborder table-striped m-0">
                    <thead>
                        <tr class="text-muted">
                            <th>住宿種類</th>
                            <th>住宿類型</th>
                            <th class="text-center" style="width: 100px;">每週價格</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (isset($school->schoolStay) && count($school->schoolStay) > 0)
                        @foreach ($school->schoolStay as $k => $v)
                        <tr>
                            <td class="data-muted td-border" data-label="住宿種類">
                                @if ($v->stay_ctg == 'SY010')
                                Homestay
                                @elseif ($v->stay_ctg == 'SY020')
                                Dormitory
                                @elseif ($v->stay_ctg == 'SY030')
                                Studio
                                @elseif ($v->stay_ctg == 'SY040')
                                etc
                                @endif
                            </td>
                            <td class="data-muted" data-label="住宿類型">
                                {{ !empty($v->exp_taiwan) ? $v->exp_taiwan : $v->exp }}
                            </td>
                            <td class="data-muted text-lg-right" data-label="每週價格" nowrap><span class="float-left">{{$country->currency_symbol}}</span> {{$v->pay}}</td>
                        </tr>
                        @endforeach
                        @endif
                        {{-- <tr>
                            <td class="data-muted td-border" data-label="住宿種類">Dormitory</td>
                            <td class="data-muted" data-label="住宿類型">Standard Zone3,4 (Single/No Private Bath Room)</td>
                            <td class="data-muted text-lg-center" data-label="每週價格"> 170</td>
                        </tr>
                        <tr>
                            <td class="data-muted td-border" data-label="住宿種類">Studio</td>
                            <td class="data-muted" data-label="住宿類型">Standard Zone3,4 (Single/No Private Bath Room)</td>
                            <td class="data-muted text-lg-center" data-label="每週價格"> 170</td>
                        </tr> --}}
                    </tbody>
                </table>
            </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
                        <div class="font-weight-bold mb-2">學校社群</div>
                        <div class="mb-5 d-flex">
                            @if (isset($school->schoolSns) && count($school->schoolSns) > 0)
                            @foreach ($school->schoolSns as $k => $v)
                            @if ($v->url != '')
                            <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>
                            @endif
                            @endforeach
                            @endif
                        </div>
                        <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">看3D視圖</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') }}" target="_blank">預約諮詢</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{--<div class="nav-mobile-search">
        <a class="btn btn-block btn-primary" href="javascript:void();" data-toggle="modal" data-target="#modal-price">
            索取報價
        </a>
    </div>--}}
</main>
@stop
@section('other')
<!-- modal-索取報價 -->
<div class="modal-search-price"></div>
<!-- modal-states -->
<div class="modal-states"></div>
<!-- ./modal-states -->
@stop
@section('modal')
@include('frontend.module.modal-search-price')
@stop
@section('js')
<script src="/assets/js/vendor/jquery.readmore.min.js"></script>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script type="text/javascript">
</script>
<script>

$('#modal-price').on('shown.bs.modal', function () {
    grecaptcha.render("g-recaptcha", {sitekey: "6LeeWXsUAAAAAL4TrChBuOXXSsju6_MshpoELvDD", theme: "light"});
});

$('#modal-price').on('hide.bs.modal', function () {
    $("#g-recaptcha").empty();
});

$('.price').click(function () {
    $('.course_name').html($(this).attr('course_name'));
    $('.course_term').html($(this).attr('course_term'));
    $('.course_term_pay').html($(this).attr('course_term_pay'));
    $('#school_id').val($(this).attr('school_id'));

    $('#modal-price').modal();


    /*
    * recaptcha API 參考 https://developers.google.com/recaptcha/docs/display
    */
    // var verifyCallback = function(response) {
    //     $('.btn-primary').attr('disabled', false);
    // };

    // var onloadCallback = function() {
    //     grecaptcha.render(
    //         'g-recaptcha', {                              // widget 驗證碼視窗在 id="my-widget" 顯示
    //             'sitekey' : '6LeeWXsUAAAAAL4TrChBuOXXSsju6_MshpoELvDD',  // API Key
    //             'callback' : verifyCallback,            // 要呼叫的回調函式
    //             // 'theme' : 'dark'                        // 主題
    //         }
    //     );
    // };
});

$('#form').submit(function(event) {
    event.preventDefault();
    $.ajax({
        url: '{{ route('contact_add') }}',
        data: $('#form').serialize(),
        type: 'POST',
        success: function(response) {
            alert(response);
            $('#name').val('');
            $('#phone').val('');
            $('#email').val('');
            $('#customCheck-agree').prop('checked', false);
            $('#modal-price').modal('hide');
        }
    });
});


$('.readmore-expand').readmore({
    speed: 500,
    collapsedHeight: 100,
    moreLink: '<p class="text-right"><a class="text-dark font-weight-bold" href="#">展開 <i class="fas fa-chevron-down"></i></a></p>',
    lessLink: '<p class="text-right"><a class="text-dark font-weight-bold" href="#">收合 <i class="fas fa-chevron-up"></i></a></p>',
});
</script>


<script src="https://www.google.com/jsapi"></script>
<!-- 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() {
    @if ($school->lat && $school->lng)
        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,
        });
    @endif
}

@if (!is_null(json_decode($school->nationality_rate)))
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawCharts);
function drawCharts() {
    // BEGIN PIE CHART
    // pie chart data
    var pieData = google.visualization.arrayToDataTable([
        ['Country', 'Count']
        <br />
<b>Notice</b>:  Undefined variable: school in <b>/home/edmedu/www/edmtw.com/dev.bak/resources/views/frontend/search/language-school-content.blade.php</b> on line <b>373</b><br />
<br />
<b>Notice</b>:  Trying to get property 'nationality_rate' of non-object in <b>/home/edmedu/www/edmtw.com/dev.bak/resources/views/frontend/search/language-school-content.blade.php</b> on line <b>373</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/edmedu/www/edmtw.com/dev.bak/resources/views/frontend/search/language-school-content.blade.php</b> on line <b>374</b><br />
,['其他國家', 100]    ]);
    // pie chart options
    var pieOptions = {
        backgroundColor: 'transparent',
        pieHole: 0.5,
        colors: [
                 "f16548",
                 "f1963a",
                 "00b49c",
                 "5073b8",
                 "e53946",
                 "b85084",
                 "a5668c",
                 "16abe5",
                 "237ba0",
                 "f0c709"
                ],
//        pieSliceText: 'label',
        pieSliceTextStyle: {
            fontSize: 13,
        },
        tooltip: {
            isHtml: true,
            text: 'percentage',
            textStyle: {
                fontSize: 16,
            }
        },
        fontName: 'Noto Sans TC',
        chartArea: {
            width: '100%',
            height: '90%'
        },
        legend: {
            position: 'left',
            textStyle: {
                fontSize: 16,
            }
        },
        animation: {
            duration: 1200,
            easing: 'out',
            startup: true
        },
    };
    // draw pie chart
    var pieChart = new google.visualization.PieChart(document.getElementById('pie-country-all'));
    pieChart.draw(pieData, pieOptions);
}
@endif
</script>
@stop