@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>
                    <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-course', $school->school_id, $school->name) }}
    </div>

    <div class="container pt-8 pt-md-12">
        <div class="row justify-content-center">
            {{-- {{dd($school->schoolCourse)}} --}}
            <div class="col-12 col-md-8">
            @if (isset($school->schoolCourse))
                @foreach ($school->schoolCourse as $k => $v)
                    <div class="mb-4 mb-md-8">
                        <div class="border px-lg-8 px-6 pt-lg-12 pb-lg-4 py-8">
                            <div class="row align-items-center mb-0 mb-lg-12">
                                <div class="col-12 col-lg-6">
                                    <div class="h5 font-weight-bold mb-4">{{ !empty($v->name_tw) ? $v->name_tw : $v->name }}</div>
                                    <p>{{ $FrontendPresenter->getCtg($v->course_lang_ctg) }} {{ $FrontendPresenter->getCtg($v->course_lang_ctg_sub) }}<br>{{$v->course_lesson}}</p>
                                </div>
                                <div class="col-12 col-lg-3 my-6 my-lg-0">
                                    @if (!empty($v->schoolCourseDetail) and count($v->schoolCourseDetail)>0)
                                    <select id="course_{{$k}}" class="form-control custom-select course">
                                        @foreach ($v->schoolCourseDetail as $scd)
                                        <option term="{{$scd->term}}" value="{{$scd->term_pay}}">{{$scd->term}}週註冊</option>
                                        @endforeach
                                    </select>
                                    @endif
                                </div>
                                <div class="col-12 col-lg-3 text-lg-center text-left">
                                    <div class="h5 font-weight-bold mb-6 price_{{$k}}">
                                                                            </div>
                                    {{-- <a class="btn btn-primary btn-block price" course_name="{{$v->name}}" course_term="{{$v->schoolCourseDetail[0]->term_pay}}" course_term_pay="為期{{$v->schoolCourseDetail[0]->term}}週" school_id="{{$school->school_id}}" href="javascript:void();">索取報價</a> --}}
                                    <a class="btn btn-block btn-primary" href="{{ route('channel_appointment') }}" target="_blank">預約諮詢</a>
                                </div>
                            </div>
                            <div class="text-right mt-5 mt-lg-0 d-none d-md-block">
                                <a class="d-lg-inline-block d-md-block collapse-arrow-v text-dark font-weight-bold" data-toggle="collapse" href="#collapse-school-{{$v->sc_id}}">課程資訊</a>
                            </div>
                            <div class="mt-5 collapse-btn-open d-md-none">
                                <a class="collapse-arrow-v text-dark font-weight-bold" data-toggle="collapse" href="#collapse-school-{{$v->sc_id}}">課程資訊</a>
                            </div>
                        </div>
                        <div class="collapse border border-top-0" id="collapse-school-{{$v->sc_id}}">
                            <div class="bg-light px-lg-8 px-6 py-2">
                                <div class="font-weight-bold">課程介紹</div>
                            </div>
                            <div class="p-lg-8 p-6">
                                <p>{!! $v->intro !!}</p>
                                <div class="row mt-6">
                                    @if ($v->s_max != '')
                                    <div class="col font-weight-bold text-muted">最大授課人數</div>
                                    <div class="col-8">{{$v->s_max}}</div>
                                    <div class="w-100 my-2"></div>
                                    @endif
                                    @if ($v->time != '')
                                    <div class="col font-weight-bold text-muted">每週授課人數</div>
                                    <div class="col-8">{{$v->time}}</div>
                                    <div class="w-100 my-2"></div>
                                    @endif
                                    @if ($v->course_start != '')
                                    <div class="col font-weight-bold text-muted">開始日期</div>
                                    <div class="col-8">{{$v->course_start}}</div>
                                    <div class="w-100 my-2"></div>
                                    @endif
                                    @if ($v->course_leason != '')
                                    <div class="col font-weight-bold text-muted">課程時間</div>
                                    <div class="col-8">{{$v->course_leason}}</div>
                                    <div class="w-100 my-2"></div>
                                    @endif
                                    @if ($v->englevel != '')
                                    <div class="col font-weight-bold text-muted">最低英語能力限制</div>
                                    <div class="col-8">{{ $FrontendPresenter->getLevel($v->englevel) }}</div>
                                    <div class="w-100 my-2"></div>
                                    @endif
                                    @if ($v->s_min != '')
                                    <div class="col font-weight-bold text-muted">最低入學年齡</div>
                                    <div class="col-8">{{$v->s_min}}</div>
                                    @endif
                                </div>
                            </div>
                            <div class="bg-light px-md-8 px-6 py-2">
                                <div class="font-weight-bold">學費按期間劃分</div>
                            </div>
                            <div class="p-lg-8 p-6">
                                <table class="table table-rwd table-striped">
                                    <thead>
                                        <tr class="text-muted">
                                            <th class="text-center">課程時間</th>
                                            <th class="text-center">每週學費</th>
                                            <th class="text-center">總額(外幣)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($v->schoolCourseDetail as $scd)
                                        <tr>
                                            <td class="text-lg-center data-muted" data-label="課程時間">{{$scd->term}}週</td>
                                            <td class="text-lg-center data-muted" data-label="每週學費"> {{$scd->week_pay}}</td>
                                            <td class="text-lg-center data-muted" data-label="總額(外幣)">
                                                {{$scd->term_pay}}
                                                <hr class="mt-5 d-lg-none">
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <div class="d-md-none mt-5 collapse-btn-close">
                                    <a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse-school-{{$v->sc_id}}">
                                        隱藏課程介紹<i class="fas fa-chevron-up"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif
            </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)
                        <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
                        @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>
$('.course').change(function () {
    var id = $(this).attr('id').split('_')[1];
    var term = $(this).find(':selected').attr('term');
    var term_pay = $(this).val();
    $('.price_' + id).html(' ' + term_pay);
    $('.price_' + id).parent().find('.price').attr('course_term', term_pay);
    $('.price_' + id).parent().find('.price').attr('course_term_pay', '為期' + term + '週');
});

$('.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'));
    $('#scd_id').val($(this).attr('scd_id'));

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

$('#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();
        }
    });
});
</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() {
    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