@inject('FrontendPresenter', 'App\Presenters\FrontendPresenter')
@section('json-ld', Breadcrumbs::view('breadcrumbs::json-ld', 'search_school-content', $school->school_uid, $school->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->images))
                        @foreach ($school->images as $num => $i)
                            @if ($num == 10)
                                @break
                            @endif
                            @php
                                $tmpstr = $i->img_url;
                                $tmparr = explode('/', $tmpstr);
                                $tmpstr = str_replace($tmparr[count($tmparr)-1], 'vq900/'.$tmparr[count($tmparr)-1], $tmpstr);
                            @endphp

                            <img class="img-fluid" src="{{$tmpstr}}">
                        @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="https://s3.ap-northeast-2.amazonaws.com/uploadimg.edmedu.com/edm/school/logo/{{$school->slogo_filename}}" style="max-width: 140px;">
                    </div>
                </div>
                <div class="h3 font-weight-bold my-4">{{$school->school_name}}</div>

                <div class="text-muted mb-3">
                    <i class="fas fa-sm fa-map-marker-alt"></i> {{ $FrontendPresenter->getSystemCountry($school->country) }} {{$school->school_city_tw}}
                </div>
                <p class="text-row-3">
                    {!! nl2br($school->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('school.detail', request()->segment(2)) }}">學校</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('school.course', request()->segment(2)) }}">課程</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('school.calculator', request()->segment(2)) }}">即時報價</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container breadcrumbs">
        {{ Breadcrumbs::render('search_school-content', $school->school_uid, $school->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">
                    @php
                        $serviceMap = [
                            'Wi-Fi'     => ['img' => 'school-service-wifi.svg', 'label' => 'Free WIFI'],
                            '圖書館'    => ['img' => 'school-service-library.svg', 'label' => 'Library'],
                            '自習室'    => ['img' => 'school-service-book.svg', 'label' => 'Self study area'],
                            '電腦室'    => ['img' => 'school-service-computer.svg', 'label' => 'Computer Room'],
                            '休息室'    => ['img' => 'school-service-weekend.svg', 'label' => 'Student Lounge'],
                            '販賣部'    => ['img' => 'school-service-cutlery.svg', 'label' => 'Student kitchen'],
                            '游泳池'    => ['img' => 'school-service-swimming.svg', 'label' => 'Swimming Pool'],
                            '體育設施'  => ['img' => 'school-service-fitness.svg', 'label' => 'GYM'],
                            '電子白板'  => ['img' => 'school-service-computer.svg', 'label' => 'Interactive screens'],
                            '機場接送'  => ['img' => 'school-service-airport.svg', 'label' => 'Airport Pickup'],
                            '活動'      => ['img' => 'school-service-gamepad.svg', 'label' => 'Activities'],
                            '洗衣服務'  => ['img' => 'school-service-laundry.svg', 'label' => 'Laundry Service'],
                        ];

                        $services = explode('|', $language->language_service ?? '');
                    @endphp
                    @foreach ($services as $service)
                        @if (isset($serviceMap[$service]))
                            <div class="col-4 col-lg-2 my-2 text-center">
                                <img class="img-fluid"
                                     src="/assets/img/icon/{{ $serviceMap[$service]['img'] }}"
                                     alt="">
                                <div class="mt-2">{{ $serviceMap[$service]['label'] }}</div>
                            </div>
                        @endif
                    @endforeach
                </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->uhak_type == '1')
                        <div class="col-8">遊學</div>
                    @else
                        <div class="col-8">留學</div>
                    @endif

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

                    @if (!empty($language->language_total_students))
                        <div class="w-100 my-2"></div>
                        <div class="col font-weight-bold text-muted">學生總人數</div>
                        <div class="col-8">{{$language->language_total_students}}</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->school_introduction) !!}
                    </div>
                </div>
                <hr class="my-8">

                @if (!empty($nationality))
                    <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 class="text-center" style="width: 100px;">每週價格</th>
                        </tr>
                    </thead>
                    <tbody>
                    @if ($homestay_list && $homestay)
                        @foreach ($homestay_list as $k => $v)
                            <tr>
                                <td class="data-muted" data-label="住宿類型">
                                    {{$v->type}}
                                </td>
                                <td class="data-muted text-lg-right" data-label="每週價格" nowrap><span
                                            class="float-left">{{$homestay->homestay_currency}}</span> {{$v->price}}</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->school_homepage1 != '')
                        <div class="font-weight-bold mb-2">學校</div>
                        <p>
                            <a class="text-dark text-wrap" href="{{$school->school_homepage1}}" target="_blank">
                                {{$school->school_homepage1}}
                            </a>
                        </p>
                        @endif
                        <div class="font-weight-bold mb-2">學校社群</div>
                        <div class="mb-5 d-flex">
                            @if($school->school_facebook)
                                <a class="btn-rounded btn-dark mr-2" href="{{$school->school_facebook}}" target="_blank">
                                    <i class="fab fa-fw fa-xs fa-facebook"></i>
                                </a>
                            @endif
                            @if($school->school_insta)
                                <a class="btn-rounded btn-dark mr-2" href="{{$school->school_insta}}" target="_blank">
                                    <i class="fab fa-fw fa-xs fa-instagram"></i>
                                </a>
                            @endif
                            @if($school->school_twitter)
                                <a class="btn-rounded btn-dark mr-2" href="{{$school->school_twitter}}" target="_blank">
                                    <i class="fab fa-fw fa-xs fa-twitter"></i>
                                </a>
                            @endif
                            @if($school->school_youtube)
                                <a class="btn-rounded btn-dark mr-2" href="{{$school->school_youtube}}" target="_blank">
                                    <i class="fab fa-fw fa-xs fa-youtube"></i>
                                </a>
                            @endif
                        </div>
                        <div class="font-weight-bold mb-2">學校地址</div>
                        <p>{{$school->school_address}}</p>
                        @if ($school->school_3d != '')
                        <div class="mb-5 d-lg-block">
                            <a class="btn btn-outline-primary" href="{{$school->school_3d}}" 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 (isset($map))
        var mylatlng = {lat: {{$map['lat']}}, lng: {{$map['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 ($nationality)
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawCharts);
function drawCharts() {
    // BEGIN PIE CHART
    // pie chart data
    var pieData = google.visualization.arrayToDataTable({!! $nationality !!});
    // 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