@inject('FrontendPresenter', 'App\Presenters\FrontendPresenter')
@extends('layouts.frontend')
@section('title', $page->meta_title)
@section('meta_description', $page->meta_description)
@section('meta_keywords', $page->meta_keyword)
@section('css')
    <style>
        button.editable, button.editable-right {
            position: absolute;
            z-index: 19;
            border: solid 1px #fff;
            line-height: 1rem;
            font-size: small;
            font-weight: bold;
            background: rgba(220,53,69,0.8);
        }
        button.editable-right {
            right: 0;
        }

        .kv-item *:hover {
            cursor: pointer;
            opacity: 0.8
        }

        .sub-h4 {
            font-size: small;
            color: #828282
        }
        .custom-control-label {
            font-size: small;
        }
        .custom-checkbox {
            display: flex;
            align-items: center;
        }

        .school-search {
            background: #6EC12D;
            padding: 1rem
        }
        .school-search select {
            padding: 0.5em 3.5em 0.5em 1em;
            background-color: transparent;
            border: solid 1px #fff;
            border-radius: 0;
            color: #fff;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-appearance: none;
            -moz-appearance: none;
        }
        .school-search select option {
            color: #000
        }
        .school-search select {
            background-image:
                linear-gradient(45deg, transparent 50%, #fff 50%),
                linear-gradient(135deg, #fff 50%, transparent 50%),
                linear-gradient(to right, #fff, #fff);
            background-position:
                calc(100% - 20px) calc(1em + 2px),
                calc(100% - 15px) calc(1em + 2px),
                calc(100% - 2.5em) 0.5em;
            background-size:
                5px 5px,
                5px 5px,
                1px 1.5em;
            background-repeat: no-repeat;
        }
        .school-search select:focus {
            background-image:
                linear-gradient(45deg, green 50%, transparent 50%),
                linear-gradient(135deg, transparent 50%, green 50%),
                linear-gradient(to right, #ccc, #ccc);
            background-position:
                calc(100% - 15px) 1em,
                calc(100% - 20px) 1em,
                calc(100% - 2.5em) 0.5em;
            background-size:
                5px 5px,
                5px 5px,
                1px 1.5em;
            background-repeat: no-repeat;
            border-color: green;
            outline: 0;
        }

        .school-search button {
            width: 100%
        }
        #school-search-form {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }
        #school-search-form select {
            flex: 1 0 100%;
            margin-bottom: .3rem
        }
        #school-search-form button {
            flex: 1;
            padding: 0.5em 1em 0.5em 1em;
        }
        #school-search-form p {
            color: #fff;
            margin: 0 1rem 1rem 0;
            line-height: 1.2;
            width: 100%;
            font-size: large;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #school-search-form p i {
            font-size: x-large;
            margin-right: .5rem
        }

        #student-review {
            position: relative;
        }
        #student-review .owl-nav {
            justify-content: flex-end;
            position: absolute;
            width: auto;
            height: 1rem;
            top: 0;
            left: auto;
            right: 0;
            background: transparent;
        }
        #student-review .owl-prev,
        #student-review .owl-next {
            flex: 1 0 1rem;
            width: 1rem;
            height: 1rem
        }

        .experience-item {
            display: flex;
            flex-direction: column;
        }
        .experience-item .-image {
            max-width: 100%;
            height: 210px;
            margin-bottom: 1rem;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        }
        .experience-item .-content {
            margin-bottom: 2rem
        }

        .right-section {
            margin-top: 3rem
        }

        .index-section-hot {
            display: none;
        }

        @media (min-width: 768px) {
            .experience-item {
                flex-direction: row;
            }
            .experience-item .-image {
                flex: 1 0 210px;
                width: 210px;
                margin-bottom: 0
            }
            .experience-item .-content {
                padding-left: 1rem
            }
            #experience .owl-dots {
                margin-bottom: 0
            }

            .right-section {
                margin-top: 0
            }

            .index-section-hot {
                display: block;
            }
        }

        ul.right-list {
            list-style-type: none;
            margin: 2rem 0 0 0;
            padding: 0
        }
        ul.right-list li {
            display: flex;
            align-items: center;
            padding: 1.5rem 1rem;
        }
        ul.right-list li a {
            margin-right: 1rem
        }
        ul.right-list li a i {
            font-size: 60px
        }


        @foreach ($list_2 as $k => $v)
        .kv-item-{{($k + 1)}} {
            background-image: url('{{ asset($v->pic_m) }}');
        }
        @endforeach

        @media (min-width: 768px) {
            .school-search button {
                width: auto;
            }
            #school-search-form {
                flex-wrap: nowrap;
                margin-left: -10px;
            }
            #school-search-form select {
                flex: 1 1 auto;
                margin: 0 10px;
            }
            #school-search-form p {
                margin-bottom: 0;
                font-size: medium;
                font-weight: normal;
                width: auto;
            }

            @foreach ($list_2 as $k => $v)
            .kv-item-{{($k + 1)}} {
                background-image: url('{{ asset($v->pic) }}');
            }
            @endforeach
        }
    </style>
@endsection
@section('content')
    <div class="kv">
        <div class="kv-list js-carousel">
            @foreach ($list_2 as $k => $v)
            <a class="kv-item kv-item-{{($k + 1)}} d-block" href="{{ $v->url }}">
                <div class="jumbotron">
                    <h2 class="jumbotron__caption">{{$v->title}}</h2>
                    <p class="txt mb-6">{{$v->description}}</p>
                </div>
            </a>
            @endforeach
        </div>
    </div>

    <div class="school-search">
        <div class="container">
            <form name="school-search-form" id="school-search-form" method="get" action="{{ route('search') }}">
                <p><i class="fas fa-school"></i> 請搜尋有興趣的學校</p>
                <select name="type">
                    <option value="language">遊學</option>
                    <option value="degree">留學</option>
                </select>

                <select name="country" id="school-search-country">
                    <option value="">所有國家</option>
                    @foreach ($country_list as $k => $v)
                        <option value="{{$v->country_name_en}}">{{$v->country_name}}</option>
                    @endforeach
                </select>

                <select name="city[]" id="school-search-city" disabled>
                    <option value="">城市</option>
                </select>

                <button class="btn btn-white" type="submit">學校搜尋 <i class="fas fa-search"></i></button>
            </form>
        </div>
    </div>

    <main class="main p-0">

        <!-- 精選課程 -->
        <div class="container px-0 px-md-3 index-section-course" style="margin-top: 5rem">
            <h3 class="mb-7 text-center">精選課程</h3>
            <div class="nav-responsive mb-6">
                <ul class="nav nav-tabs justify-content-center">
                    @foreach ($list_6 as $k => $v)
                    <li class="nav-item">
                        <a class="nav-link @if ($k == 0) active @endif" href="#index-course-{{$k}}" data-toggle="tab">{{$v->title}}</a>
                    </li>
                    @endforeach
                </ul>
            </div>
            <div class="tab-content">
                @foreach ($list_6 as $k => $v)
                <div class="tab-pane fade show @if ($k == 0) active @endif" id="index-course-{{$k}}">
                    <div class="row no-gutters">
                        @if (isset($v->indexCourse))
                            @foreach ($v->indexCourse as $num => $course)
                                @if ($num == 8)
                                    @break
                                @endif
                                <div class="col-6 col-lg-3 p-0 p-lg-1">
                                    <a class="card card-overlay" href="{{ $course->url }}" style="background-image: url('{{ asset($course->pic) }}')">
                                        <div class="card-img-overlay">
                                            <div class="d-flex flex-column h-100 text-white">
                                                <div class="mb-auto">
                                                    <div class="card-title h5 font-weight-bold title-border">
                                                        {{$course->title}}
                                                    </div>
                                                </div>
                                                <div class="mt-auto">
                                                    {{$course->description}}
                                                    {{-- #英國#遊學#倫敦#英語學習 --}}
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        <!-- 活動消息 -->
        <div class="index-section-news">
            <div class="container mb-7">
                <h3 class="mb-7 text-center">活動消息</h3>
                <div class="nav-responsive">
                <ul class="nav justify-content-center">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#tab-news-1">
                            全部
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab-news-2">
                            留遊學新聞
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab-news-3">
                            最新消息
                        </a>
                    </li>
                    {{-- <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab-news-4">
                            講座
                        </a>
                    </li> --}}
                </ul>
                </div>
            </div>
            <div class="tab-content position-relative">
                <div class="tab-pane fade show active" id="tab-news-1">
                    <div class="js-carousel js-carousel-news">
                        @foreach ($list_12 as $k => $v)
                        <div class="js-carousel-item px-3">
                            <div class="text-center">
                                <img class="img-fluid owl-lazy" src="{{ asset($v->pic) }}">
                            </div>
                            <a class="h5 font-weight-bold my-3 height-fix text-row-2 d-block text-dark" href="{{ $FrontendPresenter->articleUrl($v->ac_id, $v->article_id) }}">{{ $v->title }}</a>
                            <a class="font-weight-bold text-dark btn-arw-change-right" href="{{ $FrontendPresenter->articleUrl($v->ac_id, $v->article_id) }}">
                                閱讀更多
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="tab-pane fade" id="tab-news-2">
                    <div class="js-carousel js-carousel-news">
                        @foreach ($list_12_1 as $k => $v)
                        <div class="js-carousel-item px-3">
                            <div class="text-center">
                                <img class="img-fluid owl-lazy" src="{{ asset($v->pic) }}">
                            </div>
                            <a class="h5 font-weight-bold my-3 height-fix text-row-2 d-block text-dark" href="{{ $FrontendPresenter->articleUrl($v->ac_id, $v->article_id) }}">{{ $v->title }}</a>
                            <a class="font-weight-bold text-dark btn-arw-change-right" href="{{ $FrontendPresenter->articleUrl($v->ac_id, $v->article_id) }}">
                                閱讀更多
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="tab-pane fade" id="tab-news-3">
                    <div class="js-carousel js-carousel-news">
                        @foreach ($list_12_2 as $k => $v)
                        <div class="js-carousel-item px-3">
                            <div class="text-center">
                                <img class="img-fluid owl-lazy" src="{{ asset($v->pic) }}">
                            </div>
                            <a class="h5 font-weight-bold my-3 height-fix text-row-2 d-block text-dark" href="{{ $FrontendPresenter->articleUrl($v->ac_id, $v->article_id) }}">{{ $v->title }}</a>
                            <a class="font-weight-bold text-dark btn-arw-change-right" href="{{ $FrontendPresenter->articleUrl($v->ac_id, $v->article_id) }}">
                                閱讀更多
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="tab-pane fade" id="tab-news-4">
                    <div class="js-carousel js-carousel-news">
                        @foreach ($list_12_3 as $k => $v)
                        <div class="js-carousel-item px-3">
                            <div class="text-center">
                                <img class="img-fluid owl-lazy" src="{{ asset($v->pic) }}">
                            </div>
                            <a class="h5 font-weight-bold my-3 height-fix text-row-2 d-block text-dark" href="{{ $FrontendPresenter->articleUrl($v->ac_id, $v->article_id) }}">{{ $v->title }}</a>
                            <a class="font-weight-bold text-dark btn-arw-change-right" href="{{ $FrontendPresenter->articleUrl($v->ac_id, $v->article_id) }}">
                                閱讀更多
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <section style="background-color: #f2f2f2; padding: 4rem 0">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <!-- 學生回饋 -->
                        <div style="border-bottom: solid 1px #e2e2e2; padding-bottom: 1rem">
                            <h3 class="mb-3">學生回饋</h3>
                            <p class="section-intro">謝謝您對我們的支持，學生的滿意度是 ed:m 追求的最高價值</p>

                            <div id="student-review" class="student-review js-carousel">
                                @foreach ($list_11 as $k => $v)
                                    <div>
                                        <div class="rating rating--score-5">
                                            @for ($x = 0; $x < $v->score; $x++)
                                                <i class="rating__item icon edm-star"></i>
                                            @endfor
                                        </div>
                                        <h4 class="text-row-1 my-2">{{ $v->title }}</h4>
                                        <p class="text-row-2" style="color: #818181">{{ $v->summary }}</p>
                                        <div>
                                            {{ $v->date }} &nbsp;&nbsp;&nbsp; {{ $v->issuer }}
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- 心得分享 -->
                        <div style="padding-top: 2rem">
                            <h3 class="mb-3">心得分享</h3>

                            <div id="experience" class="experience js-carousel">
                                @foreach ($list_10 as $k => $v)
                                    <a href="{{ $FrontendPresenter->articleUrl($v->ac_id, $v->article_id) }}">
                                        <div class="experience-item">
                                            <div class="-image" style="background-image: url('{{ asset($v->img) }}');"></div>
                                            <div class="-content">
                                                <h4 style="color: #000">{{ $v->title }}</h4>
                                                <p class="text-row-6 mt-2" style="color: #818181">{{ $v->summary }}</p>
                                            </div>
                                        </div>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <!-- ed:m永遠把學生需求擺在第一位 -->
                    <div class="col-md-6 right-section">
                        <h3 class="mb-3">{{ $bm_5->title }}</h3>
                        <p>{{ $bm_5->description }}</p>

                        <ul class="right-list">
                            <li>
                                <a href="{{ $bm_5->url }}"><i class="icon edm-country"></i></a>
                                <div>
                                    <h4>{{ $bm_5->title_1 }}</h4>
                                    <p>{{ $bm_5->description_1 }}</p>
                                </div>
                            </li>

                            <li>
                                <a href="{{ $bm_5->url }}"><i class="icon edm-curriculum"></i></a>
                                <div>
                                    <h4>{{ $bm_5->title_2 }}</h4>
                                    <p>{{ $bm_5->description_2 }}</p>
                                </div>
                            </li>

                            <li>
                                <a href="{{ $bm_5->url }}"><i class="icon edm-contract"></i></a>
                                <div>
                                    <h4>{{ $bm_5->title_3 }}</h4>
                                    <p>{{ $bm_5->description_3 }}</p>
                                </div>
                            </li>

                            <li>
                                <a href="{{ $bm_5->url }}"><i class="icon edm-knowledge-sharing"></i></a>
                                <div>
                                    <h4>{{ $bm_5->title_4 }}</h4>
                                    <p>{{ $bm_5->description_4 }}</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- 熱門國家 -->
        <div class="index-section-hot" style="margin-top: 5rem">
            <div class="container">
                <h3 class="h3 mb-7 text-center">熱門國家</h3>
                <div class="row no-gutters">
                    @foreach ($list_7 as $k => $v)
                    <div class="col-md-3 col-primary">
                        <div class="card" style="background-image: url('/assets/img/uploads/country-{{ ($k + 1) }}.jpg')">
                            <div class="card-img-overlay">
                                <h4 class="mb-3">{{ $v->country_name }}</h4>
                                <nav class="nav flex-column">
                                    @if (isset($v->indexCountryDetail))
                                        @foreach ($v->indexCountryDetail as $detail)
                                            <a class="nav-link btn-arw-change-right" href="{{ $detail->url }}">{{ $detail->title }}</a>
                                        @endforeach
                                    @endif
                                </nav>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- 全球支援 -->
        <div id="section-count">
            <div class="container-fluid index-section-support">
                <div class="row justify-content-center">
                    <div class="col-12 col-lg-6 col-xl-5">
                        <div class="h3 font-weight-bold mb-10 text-center text-lg-left">ed:m 全球支援</div>
                        <div class="row no-gutters">
                            <div class="col-6 my-2 text-center text-lg-left">
                                <div class="d-md-inline-block d-sm-block my-1 h1 font-weight-bold text-primary">
                                    <span class="number" data-value="12">0</span>
                                </div>
                                <div class="d-md-inline-block d-sm-block my-1">
                                    <span class="h5 font-weight-normal">海外辦事處</span>
                                </div>
                            </div>
                            <div class="col-6 my-2 text-center">
                                <div class="d-md-inline-block d-sm-block my-1 h1 font-weight-bold text-primary">
                                    <span class="number" data-value="3000">0</span><sup>+</sup>
                                </div>
                                <div class="d-md-inline-block d-sm-block my-1">
                                    <span class="h5 font-weight-normal">合作學校</span>
                                </div>
                            </div>
                            <div class="col-6 my-2 text-center text-lg-left">
                                <div class="d-md-inline-block d-sm-block my-1 h1 font-weight-bold text-primary">
                                    <span class="number" data-value="20">0</span>
                                </div>
                                <div class="d-md-inline-block d-sm-block my-1">
                                    <span class="h5 font-weight-normal">留學代辦經驗</span>
                                </div>
                            </div>
                            <div class="col-6 my-2 text-center">
                                <div class="d-md-inline-block d-sm-block my-1 h1 font-weight-bold text-primary">
                                    <span class="number" data-value="40000">0</span><sup>+</sup>
                                </div>
                                <div class="d-md-inline-block d-sm-block my-1">
                                    <span class="h5 font-weight-normal">海外學子見證</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6 col-xl-5 text-center mt-10 mt-lg-0">
                        <a href="{{ $page->description_2 }}">
                            <img class="img-fluid lazyload" data-src="{{ asset($page->pic_2) }}" alt="全球據點">
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 合作夥伴 -->
        <div class="index-section-partners">
            <div class="kv-inpage" style="background-image: url('{{ asset($bm_13->pic) }}')">
                <div class="kv-inpage-item py-20 text-center">
                    <div class="container text-white">
                        <div class="h3 font-weight-bold mb-3">{{ $bm_13->title }}</div>
                        <p class="mb-0">{{ $bm_13->description }}</p>
                    </div>
                </div>
            </div>
            <div class="partner-list js-carousel">
                @if (isset($bm_13->blockDetail))
                @foreach ($bm_13->blockDetail as $k => $v)
                @if ($v->description != '')
                <a href="{{ $v->description }}">
                @endif
                <div class="partner">
                    <img class="img-fluid" src="{{ asset($v->pic) }}">
                </div>
                @if ($v->description != '')
                </a>
                @endif
                @endforeach
                @endif
            </div>
        </div>
     </main>
@stop
@section('js')
    <!-- Event snippet for Click Zendesk conversion page
    In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. -->
    <script>
        function gtag_report_conversion(url) {
            var callback = function () {
            if (typeof(url) != 'undefined') {
                window.location = url;
            }
            };
            gtag('event', 'conversion', {
                'send_to': 'AW-775204608/8olNCN7DgJUBEIDe0vEC',
                'event_callback': callback
            });
            return false;
        }

        $(document).ready(function(){
            $('#school-search-country').on('change', function(){
                var country = $(this).val();
                if (country=='') {
                    $('#school-search-city').prop('disabled', true);
                } else {
                    $('#school-search-city').prop('disabled', false);

                    $.ajax({
                        type: 'GET',
                        data: { key: 'city-option', country: country },
                        dataType: 'json',
                        url: '{{ URL::route('search-ajax') }}',
                        success: function(result){
                            var len = result.length;
                            $('#school-search-city').empty();

                            $('#school-search-city').append("<option value=''>城市</option>");
                            for (var i = 0; i < len; i++) {
                                $('#school-search-city').append("<option value='"+result[i]+"'>"+result[i]+"</option>");
                            }
                        }
                    });
                }
            });
        });
    </script>
@endsection