@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" href="{{ route('school.detail', request()->segment(3)) }}">學校</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="{{ route('school.course', request()->segment(3)) }}">課程</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('school.calculator', request()->segment(3)) }}">即時報價</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">
                    @if (isset($course_group))
                        <ul class="nav nav-tabs year-nav">
                            @foreach ($course_group->reverse()->keys() as $key)
                                <li class="nav-item">
                                    <a href="{{ route('school.course', [$school->school_uid, 'year' => $key]) }}" class="nav-link {{ ($key == request()->year or (empty(request()->year) and $key == $course_group->reverse()->keys()->first())) ? 'active' : '' }}">{{ $key }}</a>
                                </li>
                            @endforeach
                        </ul>
                        @foreach ($course_group[$year] 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->course_title_tw) ? $v->course_title_tw : $v->course_title_tw }}</div>
                                            <p>{{$v->course_category}}</p>
                                        </div>
                                        <div class="col-12 col-lg-3 my-6 my-lg-0">
                                            @if (!empty($v->cost) and count($v->cost)>0)
                                                <select id="course_{{$k}}" class="form-control custom-select course" data-currency="{{$v->course_currency}}">
                                                    @foreach ($v->cost as $cost)
                                                        <option term="{{$cost->week}}" value="{{$cost->fee}}">{{$cost->week}}週註冊</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-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->course_uid}}">課程資訊</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->course_uid}}">課程資訊</a>
                                    </div>
                                </div>
                                <div class="collapse border border-top-0" id="collapse-school-{{$v->course_uid}}">
                                    <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>{!! nl2br($v->course_introduction) !!}</p>
                                        <div class="row mt-6">
                                            @if ($v->course_capacity != '')
                                                <div class="col font-weight-bold text-muted">最大授課人數</div>
                                                <div class="col-8">{{$v->course_capacity}}</div>
                                                <div class="w-100 my-2"></div>
                                            @endif
                                            @if ($v->course_open_day != '')
                                                <div class="col font-weight-bold text-muted">開始日期</div>
                                                <div class="col-8">{{$v->course_open_day}}</div>
                                                <div class="w-100 my-2"></div>
                                            @endif
                                            @if ($v->course_class_time != '')
                                                <div class="col font-weight-bold text-muted">課程時間</div>
                                                <div class="col-8">{!! nl2br($v->course_class_time) !!}</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->course_condition}}</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->cost as $scd)
                                                <tr>
                                                    <td class="text-lg-center data-muted" data-label="課程時間">{{$scd->week}}週</td>
                                                    <td class="text-lg-center data-muted" data-label="每週學費">@if($scd->fee_per_week>0){{$scd->fee_per_week}}@endif</td>
                                                    <td class="text-lg-center data-muted" data-label="總額(外幣)">
                                                        {{ $v->course_currency }} {{number_format($scd->fee)}}
                                                        <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->course_uid}}">
                                                隱藏課程介紹<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->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>


    </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 currency = $(this).data('currency');
            var pay = Number($(this).val());
            var term_pay = currency + ' ' + pay.toLocaleString();
            $('.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>
        @if (isset($map))
        function initMap() {

            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
    </script>
@stop