@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>
        .experience-owl .owl-dots {
            bottom: 0.25rem;
        }

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

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

        @media (min-width: 768px) {
            @foreach ($list_2 as $k => $v)
            .kv-item-{{($k + 1)}} {
                background-image: url('{{ asset($v->pic) }}');
            }
            @endforeach
        }
    </style>
@endsection
@section('content')
{{-- @section('title', $page->meta_title)
@section('meta_description', $page->meta_description)
@section('meta_keywords', $page->meta_keyword)
@section('css2')
@foreach ($list_2 as $k => $v)
.kv-item-{{($k + 1)}} {
    background-image: url('{{ asset($v->pic_m) }}');
}
@endforeach

@media (min-width: 768px) {
    @foreach ($list_2 as $k => $v)
    .kv-item-{{($k + 1)}} {
        background-image: url('{{ asset($v->pic) }}');
    }
    @endforeach
}
@stop --}}

    <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 class="tab tab--card js-tab">
                    <nav class="tab__nav">
                        <a class="tab__btn active" href="#taiwan">edm台北辦公室</a>
                        <a class="tab__btn" href="#branches">edm海外辦事處</a>
                    </nav>
                    <div class="tab__container">
                        <div class="scrollbar-inner">
                            <div id="taiwan" class="tab__content show">
                                <div class="branch">
                                    <div class="branch__cover" style="background-image: url('{{ asset($bm_3->pic) }}')">
                                        <img src="tmp/office-02.png" alt="ed:m 台北辦公室">
                                    </div>
                                    <a class="branch__info" href="{{ $bm_3->url }}">
                                        <h4 class="caption">{{ $bm_3->title }}</h4>
                                        <address class="txt">{!! $bm_3->description !!}</address>
                                    </a>
                                    <div class="row no-gutters w-100">
                                        @if (isset($bm_3->blockDetail))
                                        @foreach ($bm_3->blockDetail as $k => $v)
                                        <div class="col-6 my-1">
                                            <a href="{{ $v->description }}" @if ($k == 4) target="_blank" @endif>
                                                @if ($k == 0)
                                                <i class="icon edm-bubbles text-primary h5"></i>
                                                @elseif ($k == 1)
                                                <i class="icon edm-discount text-primary h5"></i>
                                                @elseif ($k == 2)
                                                <i class="icon edm-books text-primary h5"></i>
                                                @elseif ($k == 3)
                                                <i class="icon edm-plane text-primary h5"></i>
                                                @elseif ($k == 4)
                                                <i class="icon edm-line-outline text-primary h5"></i>
                                                @elseif ($k == 5)
                                                <i class="icon edm-emotsmile text-primary h5"></i>
                                                @endif
                                                {{ $v->title }}
                                            </a>
                                        </div>
                                        @endforeach
                                        @endif
                                    </div>
                                </div>

                            </div>
                            <div id="branches" class="tab__content">
                                @foreach ($office_list as $k => $v)
                                <div class="accordion">
                                    <h6 class="accordion__caption @if ($k == 0) active @endif">{{$v->title}}</h6>

                                    <div class="accordion__content"><a href="{{ $v->url }}">
                                        <div class="branch">
                                            <address class="txt">
                                                {!! $v->description !!}
                                            </address>
                                        </div>
                                    </a>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        <main class="main p-0">
            <section class="home-section-provided">
                @foreach ($bm_3->blockDetail as $k => $v)
                <div class="provide__item">
                    <a href="{{ $v->description }}">
                        <div>
                            @if ($k == 0)
                            <i class="icon edm-bubbles"></i>
                            @elseif ($k == 1)
                            <i class="icon edm-discount"></i>
                            @elseif ($k == 2)
                            <i class="icon edm-books"></i>
                            @elseif ($k == 3)
                            <i class="icon edm-plane"></i>
                            @elseif ($k == 4)
                            <i class="icon edm-line-outline"></i>
                            @elseif ($k == 5)
                            <i class="icon edm-emotsmile"></i>
                            @endif
                            <p class="text-dark">{{ $v->title }}</p>
                        </div>
                    </a>
                </div>
                @endforeach
            </section>

            <div class="container-fluid px-0 index-section-feature">
                <div class="row align-items-center">

                    <div class="col-12 col-md-4 offset-md-1 my-8 px-6">
                        <div class="h3 font-weight-bold mb-5">{{ $bm_5->title }}</div>
                        <p>{{ $bm_5->description }}</p>
                        <a class="btn btn-primary" href="{{ $bm_5->url }}">瞭解更多</a>
                    </div>
                    <div class="col-12 col-md-6 offset-md-1">
                        <div class="row no-gutters text-center">
                            <div class="col-6 bg-light">
                                <a class="d-block" href="{{ $bm_5->url }}">
                                    <div class="icon-feature">
                                        <i class="icon edm-country"></i>
                                    </div>
                                    <p>{{ $bm_5->title_1 }}</p>
                                    <p class="font-small">{{ $bm_5->description_1 }}</p>
                                </a>
                            </div>
                            <div class="col-6">
                                <a class="d-block" href="{{ $bm_5->url }}">
                                    <div class="icon-feature">
                                        <i class="icon edm-curriculum"></i>
                                    </div>
                                    <p>{{ $bm_5->title_2 }}</p>
                                    <p class="font-small">{{ $bm_5->description_2 }}</p>
                                </a>
                            </div>
                            <div class="col-6">
                                <a class="d-block" href="{{ $bm_5->url }}">
                                    <div class="icon-feature">
                                        <i class="icon edm-contract"></i>
                                    </div>
                                    <p>{{ $bm_5->title_3 }}</p>
                                    <p class="font-small">{{ $bm_5->description_3 }}</p>
                                </a>
                            </div>
                            <div class="col-6 bg-light">
                                <a class="d-block" href="{{ $bm_5->url }}">
                                    <div class="icon-feature">
                                        <i class="icon edm-knowledge-sharing"></i>
                                    </div>
                                    <p>{{ $bm_5->title_4 }}</p>
                                    <p class="font-small">{{ $bm_5->description_4 }}</p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 精選課程 -->
            <div class="container px-0 px-md-3 index-section-course">
                <div class="h3 font-weight-bold mb-7 text-center">精選課程</div>
                <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-hot">
                <div class="">
                    <div class="h3 font-weight-bold mb-7 text-center">熱門國家</div>
                    <div class="row no-gutters">
                        @foreach ($list_7 as $k => $v)
                        @if ($k < 3)
                        <div class="col-6 col-lg-4 col-primary">
                        @else
                        <div class="col-6 col-lg col-secondary">
                        @endif
                        <div class="card" style="background-image: url('/assets/img/uploads/country-{{ ($k + 1) }}.jpg')">
                                <div class="card-img-overlay">
                                    <div class="h4 font-weight-bold mb-3">{{ $v->country_name }}</div>
                                    <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>

            <section class="home-section-experience">
                <div class="experience_titles mb-9">
                    <h3 class="section-title">心得分享</h3>
                    <p class="section-intro">最真實的 ed:m 經驗，最美好的回憶</p>
                </div>
                <div class="home-section-experience-wrapper">
                    <div class="experiences">
                        <div class="experience-owl js-carousel">
                            @foreach ($list_10 as $k => $v)
                            <div class="experience__item">
                                <h4 class="caption">{{ $v->title }}</h4>
                                <p class="txt">{{ $v->summary }}</p>
                                <div class="person">
                                    <div class="person__info">
                                        <h6 class="person__name">{{ $v->issuer }}</h6>
                                        <div class="person__txt">{{ $v->school_name }}</div>
                                    </div>
                                </div>
                                <a class="btn btn-primary mt-4" href="{{ $FrontendPresenter->articleUrl($v->ac_id, $v->article_id) }}">閱讀更多</a>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="experience-cover-grp">
                        @foreach ($list_10 as $k => $v)
                        <div class="experience-cover show" style="background-image: url('{{ asset($v->img) }}');">
                            <img class="lazyload" data-src="{{ asset($v->img) }}" alt="{{ $v->title }}">
                        </div>
                        @endforeach
                    </div>
                </div>
            </section>

            <section class="home-section-feedback">
                <div class="text-center">
                    <div class="h3 font-weight-bold mb-3 text-center">學生回饋</div>
                    <p class="section-intro">謝謝您對我們的支持，學生的滿意度是 ed:m 追求的最高價值  </p>
                </div>
                <div class="review-grp js-carousel">
                    @foreach ($list_11 as $k => $v)
                    <div class="review-grp__item">
                        <div class="review">
                            <h4 class="caption">{{ $v->title }}</h4>
                            <div class="rating rating--score-5">
                                @for ($x = 0; $x < $v->score; $x++)
                                <i class="rating__item icon edm-star"></i>
                                @endfor
                            </div>
                            <p class="text-row-6">{{ $v->summary }}</p>
                            <div class="person">
                                <div class="person__avatar" style="background-image: url('{{ asset($v->avatar) }}')">
                                    {{-- <i class="icon-user"></i> --}}
                                </div>
                                <div class="person__info">
                                    <h6 class="person__name">{{ $v->issuer }}</h6>
                                    <div class="person__txt">{{ $v->date }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </section>

            <!-- 活動消息 -->
            <div class="index-section-news">
                <div class="container mb-7">
                    <div class="h3 font-weight-bold mb-7 text-center">活動消息</div>
                    <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 pb-10">
                    <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>

            <!-- 合作夥伴 -->
            <div class="index-section-partners mb-7 mb-lg-14">
                <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>

            <!-- 快速申請 -->
            <div class="index-section-request">
                <div class="block-gray pos-right w-50 d-none d-lg-block"></div>
                <div class="">
                <div class="row-request justify-content-center align-items-center">
                    @if (isset($bm_14->blockDetail))
                    @foreach ($bm_14->blockDetail as $k => $v)
                    <div class="request-info mr-6 my-2">
                        @if ($k == 0)
                        <a class="card card-overlay" href="{{ route('channel_appointment') }}">
                        @else
                        <a class="card card-overlay" href="{{ route('channel_request') }}">
                        @endif
                            <img class="card-img d-none d-lg-block lazyload" data-src="{{ asset($v->pic) }}" src="{{ asset($v->pic) }}">
                            <img class="card-img d-lg-none lazyload" data-src="{{ asset($v->pic) }}" src="{{ asset($v->pic) }}">
                            <div class="card-img-overlay px-md-6 pt-md-7">
                                <div class="d-flex flex-column h-100 text-white">
                                    <div class="mb-auto">
                                    <div class="card-title h5">{{ $v->title }}</div>
                                    <p class="card-text font-weight-light">{!! $v->description !!}</p>
                                    </div>
                                    <div class="mt-auto btn-arw-change-right">
                                        {{ $v->description_1 }}
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    @endforeach
                    @endif
                    {{-- <div class="request-info my-2">
                        <a class="card card-overlay" href="">
                            <img class="card-img d-none d-lg-block" src="assets/img/uploads/index-channel-request.jpg" alt="">
                            <img class="card-img d-lg-none" src="assets/img/uploads/index-channel-request-mb.jpg" alt="">
                            <div class="card-img-overlay px-md-6 pt-md-7">
                                <div class="d-flex flex-column h-100 text-white">
                                    <div class="mb-auto">
                                    <div class="card-title h5">留遊學指南免費申請</div>
                                    <p class="card-text font-weight-light">從學校推薦到在地生活大小事！<br>
                                        為了讓每位學生能更有效率的規劃海外進修，ed:m集合了各種必需資訊編纂為一本留遊學指南，提供免費申請及郵寄服務</p>
                                    </div>
                                    <div class="mt-auto btn-arw-change-right">
                                        申請留遊學指南
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div> --}}
                    <div class="request-action my-2 text-center text-lg-left">
                        <div class="h3 font-weight-bold mb-6">{{ $bm_14->title }}</div>
                        <p class="mb-6">{{ $bm_14->description }}</p>
                        <a class="btn btn-primary" href="{{ route('channel_appointment') }}">立即諮詢</a>
                    </div>
                </div>
                </div>
            </div>

    {{--<div class="nav-mobile-search">
        <a class="btn btn-block btn-primary" href="{{ route('channel_appointment') }}">
            聯絡我們
        </a>
    </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;
}
</script>
@endsection