@extends('layouts.frontend')
@section('title', $page->meta_title)
@section('meta_description', $page->meta_description)
@section('meta_keywords', $page->meta_keyword)
@section('json-ld', Breadcrumbs::view('breadcrumbs::json-ld', 'edm-taiwan'))
@section('content')
<div class="kv-inpage" style="background-image: url({{ asset($page->pic_1) }});">
    <div class="kv-inpage-item">
        <div class="container text-white">
            <h1>{{ $page->title }}</h1>
            <p class="mb-0">{{ $page->description_1 }}</p>
        </div>
    </div>
</div>

<nav class="nav-main">
    <div class="nav-primary">
        <div class="container d-none d-lg-block slick-nav">
            <div class="row no-gutters d-flex">
                <div class="col-2">
                    <a class="nav-link active" href="{{ route('about_edm-taiwan') }}">ed:m 台灣介紹</a>
                </div>
                <div class="col-2">
                    <a class="nav-link" href="{{ route('about_contact') }}">聯絡我們</a>
                </div>
            </div>
        </div>
        <div class="d-lg-none">
            <select class="custom-select" onchange="location = this.value;">
                <option value="{{ route('about_edm-taiwan') }}" selected>ed:m 台灣介紹</option>
                <option value="{{ route('about_contact') }}">聯絡我們</option>
            </select>
        </div>
    </div>
</nav>

<div class="container breadcrumbs">
    {{ Breadcrumbs::render('edm-taiwan') }}
</div>

<main class="main add2406">
    <!-- why edm -->
    <div class="area-sm-content">
        <div class="sm-why-edm">
            <div class="container">
                <div class="sm-cont-title">
                    <h2>為什麼要選擇edm留遊學呢?</h2>
                    <p class="add-text">所有選擇都是有原因的</p>
                </div>
                <div class="sm-content">
                    <div class="why-edm-pager">
                        <ul class="md-tabs-line">
                            <li>
                                <a data-slide-index="0" href="#slide1">雙重管理系統</a>
                            </li>
                            <li>
                                <a data-slide-index="1" href="#slide2">留遊學方案規劃/執行</a>
                            </li>
                            <li>
                                <a data-slide-index="2" href="#slide3">安全的留遊學系統</a>
                            </li>
                            <li>
                                <a data-slide-index="3" href="#slide4">海外全球辦公室</a>
                            </li>
                            <li>
                                <a data-slide-index="4" href="#slide5">留學錄取榜單</a>
                            </li>
                        </ul>
                    </div>
                    <div class="why-edm-slider">
                        <section class="slider-item">
                            <div class="item-wrap">
                                <article class="col2">
                                    <h3 class="tit"><em class="text-color">雙重</em>管理系統</h3>
                                    <p class="txt">
                                        edm留遊學顧問與團隊一同管理客戶。每位學生將由顧問與團隊合作進行管理，因此所有服務進行都將提供顧客最優質且系統化的管理。
                                    </p>
                                </article>
                                <div class="col2">
                                    <img src="/images/about/why-edm1.png" alt="分配個人負責顧問後，以小組爲單位對一系列服務進行雙重檢查及管理">
                                </div>
                            </div>
                        </section>
                        <section class="slider-item">
                            <div class="item-wrap">
                                <article class="col2">
                                    <h3 class="tit"><em class="text-color">留遊學方案</em>規劃/執行</h3>
                                    <p class="txt">
                                        為了讓考慮出國遊學、留學的顧客享受良好的經驗和福利，且成功實現留遊學計畫，edm以多年來的經驗規劃了多元的留遊學方案。
                                    </p>
                                </article>
                                <div class="col2">
                                    <img src="/images/about/why-edm2.png" alt="ed:m留學中心的結構">
                                </div>
                            </div>
                        </section>
                        <section class="slider-item">
                            <div class="item-wrap">
                                <article class="col2">
                                    <h3 class="tit"><em class="text-color">安全的</em>留遊學系統</h3>
                                    <p class="txt">
                                        為了edm留遊學中心顧客的生命與財務安全，我們正全力提高企業經營透明度、建構安全體系。
                                    </p>
                                </article>
                                <div class="col2">
                                    <img src="/images/about/why-edm3.png" alt="財務健全性 - edm的資本充足率:95%(2019.12.31爲準)，構建國內外緊急聯絡體系">
                                </div>
                            </div>
                        </section>
                        <section class="slider-item">
                            <div class="item-wrap">
                                <article class="col2">
                                    <h3 class="tit"><em class="text-color">海外全球</em>辦公室</h3>
                                    <p class="txt">
                                        為了讓學生安全地定居海外並完成留遊學計畫，正在與多個海外全球辦事處合作提供在地化服務，讓此趟留遊學行程更加安心。
                                    </p>
                                </article>
                                <div class="col2">
                                    <img src="/images/about/why-edm4.png" alt="10個國內直營分公司，14個海外國際中心">
                                </div>
                            </div>
                        </section>
                        <section class="slider-item">
                            <div class="item-wrap">
                                <article class="col2">
                                    <h3 class="tit"><em class="text-color">留學錄取</em>榜單</h3>
                                    <p class="txt">
                                        edm留學為了幫助學生成功升學進入海外大學，提供個人化的戰略計畫，針對學經歷背景提供升學指導，並與學校建立緊密的合作夥伴關係， 協助學生與學校之間順利溝通。
                                    </p>
                                </article>
                                <div class="col2">
                                    <img src="/images/about/why-edm5.png" alt="海外大學全體合格件數共8954件 - 包括大學、研究生院合格者（包括有條件入學）及重複合格，2013年~2020年03月30日edm留學中心/藝術留學統計">
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Why ed:m -->
    <div class="container">
        <!-- <div class="h3 font-weight-bold mb-9">Why ed:m</div> -->
        <div class="row row-about-why">
            @foreach ($list_1 as $k => $v)
            <div class="col-12 col-md-4 my-2 my-md-0">
                <div class="row no-gutters bg-light h-100">
                    @if (($k % 2) > 0)
                    <div class="col-12">
                        <img class="img-fluid w-100 lazyload" data-src="{{ asset($v->pic_1) }}">
                    </div>
                    @endif
                    <div class="col-12 py-10 px-5">
                        <div class="h5 font-weight-bold title-border">{{ $v->title }}</div>
                        <div class="description">{!! $v->description_1 !!}</div>
                    </div>
                    @if (($k % 2) == 0)
                    <div class="col-12 align-self-end">
                        <img class="img-fluid w-100 lazyload" data-src="{{ asset($v->pic_1) }}">
                    </div>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- 留遊學計畫 -->
    <div class="container">
        <div class="h3 font-weight-bold mb-10 mb-md-14 text-center text-md-left">
            每位學生的留遊學計畫<br>
            <span class="text-primary">ed:m都負責到底</span>
        </div>
        <div class="row row-about-step">
            <div class="col-12 col-md">
                <div class="row">
                    <div class="col-4 col-sm-5 col-md-12 pb-6 text-center border-dashed">
                        <div class="circle -clr-primary -sz-lg">
                            <i class="icon edm-report-card"></i>
                        </div>
                    </div>
                    <div class="col-8 col-sm-7 col-md-12 pl-3 pl-md-10">
                        <div class="font-weight-bold mb-2">{!! nl2br($list_2->blockDetail[0]->title) !!}</div>
                        <div class="description">{!! $list_2->blockDetail[0]->description !!}</div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md">
                <div class="row">
                    <div class="col-4 col-sm-5 col-md-12 pb-6 text-center border-dashed">
                        <div class="circle -clr-primary -sz-lg">
                            <i class="icon edm-passport"></i>
                        </div>
                    </div>
                    <div class="col-8 col-sm-7 col-md-12 pl-3 pl-md-10">
                        <div class="font-weight-bold mb-2">{!! nl2br($list_2->blockDetail[1]->title) !!}</div>
                        <div class="description">{!! $list_2->blockDetail[1]->description !!}</div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md">
                <div class="row">
                    <div class="col-4 col-sm-5 col-md-12 pb-6 text-center border-dashed">
                        <div class="circle -clr-primary -sz-lg">
                            <i class="icon edm-meeting"></i>
                        </div>
                    </div>
                    <div class="col-8 col-sm-7 col-md-12 pl-3 pl-md-10">
                        <div class="font-weight-bold mb-2">{!! nl2br($list_2->blockDetail[2]->title) !!}</div>
                        <div class="description">{!! $list_2->blockDetail[2]->description !!}</div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md">
                <div class="row">
                    <div class="col-4 col-sm-5 col-md-12 pb-6 text-center border-dashed">
                        <div class="circle -clr-primary -sz-lg">
                            <i class="icon edm-curriculum"></i>
                        </div>
                    </div>
                    <div class="col-8 col-sm-7 col-md-12 pl-3 pl-md-10">
                        <div class="font-weight-bold mb-2">{!! nl2br($list_2->blockDetail[3]->title) !!}</div>
                        <div class="description">{!! $list_2->blockDetail[3]->description !!}</div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md">
                <div class="row">
                    <div class="col-4 col-sm-5 col-md-12 pb-6 text-center">
                        <div class="circle -clr-primary -sz-lg">
                            <i class="icon edm-secured-letter"></i>
                        </div>
                    </div>
                    <div class="col-8 col-sm-7 col-md-12 pl-3 pl-md-10">
                        <div class="font-weight-bold mb-2">{!! $list_2->blockDetail[4]->title !!}</div>
                        <div class="description">{!! $list_2->blockDetail[4]->description !!}</div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="container">

        <section class="about-section about-section-3">
            <div class="about-clip">
                <h2 class="caption">{{ $list_3[0]->title }}</h2>
                <div class="about-card-grp">
                    <div class="about-card">
                        <h4 class="caption">{{ $list_3[1]->title }}</h4>
                        <p class="txt">{{ $list_3[1]->description_1 }}</p>
                    </div>
                    <div class="about-card">
                        <h4 class="caption">{{ $list_3[2]->title }}</h4>
                        <p class="txt">{{ $list_3[2]->description_1 }}</p>
                    </div>
                </div>
            </div>
            <div class="embed">
                <div class="embed__img" style="background-image: url('{{ asset($list_3[0]->pic_1) }}')"></div>
            </div>
        </section>

        <section class="about-section about-section-4">
            <h2 class="caption text-center">{!! nl2br($list_4->title) !!}</h2>
            <div class="about-features text-center">
                @foreach ($list_4->blockDetail as $k => $v)
                <div class="about-feature__item">
                    @if ($k == 0)
                    <i class="icon edm-heart-health"></i>
                    @elseif ($k == 1)
                    <i class="icon edm-multichannel"></i>
                    @elseif ($k == 2)
                    <i class="icon edm-group-task"></i>
                    @elseif ($k == 3)
                    <i class="icon edm-accuracy"></i>
                    @endif
                    <h4 class="caption">{!! nl2br($v->title) !!}</h4>
                    <p class="txt">{!! $v->description !!}</p>
                </div>
                @endforeach
            </div>
        </section>
    </div>

    <div class="">
        <section class="about-section about-section-5">
            <div class="about-space">
                <div class="embed">
                    <div class="embed__img" style="background-image: url('{{asset($list_5->pic)}}')"></div>
                </div>
                <div class="about-space__content">
                    <h2 class="caption">{{$list_5->title}}</h2>
                    <div class="description">{!!$list_5->description!!}</div>
                </div>
                <div class="about-slider-outer">
                <div class="about-slider">
                    @foreach ($list_5->blockDetail as $k => $v)
                        <div class="about-slider__item" style="background-image: url('{{asset($v->pic)}}');"></div>
                    @endforeach
                </div>
                <div class="slider-counter about-slider-counter"></div>
                </div>
            </div>
        </section>
        <section class="about-section about-section-6">
            <div class="circle">
                <i class="icon edm-quotation"></i>
            </div>
            <h2>With ed:m!</h2>
            <h4 class='texteffect-hold'>為了夢想而 <span id='text'></span><div class='console-underscore' id='console'>|</div></h4>
        </section>
    </div>

    <div class="row no-gutters">
        <div class="col-12 col-md-6">
            <a href="{{ route('about_global-office') }}">
            <div class="card card-overlay" style="background-image: url(/assets/img/uploads/about-service-bn.jpg);">
                <div class="card-body text-white text-center py-20">
                    <div class="h4 font-weight-bold">ed:m 全球網絡</div>
                </div>
            </div>
            </a>
        </div>
        <div class="col-12 col-md-6">
            <a href="{{ route('services') }}">
            <div class="card card-overlay" style="background-image: url(/assets/img/uploads/about-global-office-bn.jpg);">
                <div class="card-body text-white text-center py-20">
                    <div class="h4 font-weight-bold">服務一覽</div>
                </div>
            </div>
            </a>
        </div>
    </div>

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-md-10">
                <div class="edm-form box-edm" style="margin-top: -40px;">
                    <div class="row">
                        <div class="col-12 col-md-6 mb-12 mb-md-0 px-lg-10 px-3">
                            <div class="h3 font-weight-bold mb-5"><span>{{ $contact->title }}</span></div>
                            <p class="mb-10">{{ $contact->description }}</p>
                            <img class="img-fluid lazyload" data-src="/assets/img/uploads/consult-pic.svg" alt="">
                        </div>
                        <div class="col-12 col-md-6 px-lg-10 px-3">
                            <form id="form" action="" method="post">
                                <div class="form-group mb-6">
                                    <label class="text-muted">姓名</label>
                                    <input type="text" id="name" name="name" class="form-control" required>
                                </div>
                                <div class="form-group mb-6">
                                    <label class="text-muted">手機號碼</label>
                                    <input type="tel" id="phone" name="phone" pattern="[0-9]{10}" maxlength="10" class="form-control" required>
                                </div>
                                <div class="form-group mb-6">
                                    <label class="text-muted">電子信箱</label>
                                    <input type="email" class="form-control" pattern="[a-z0-9._%+-]{3,}@[a-z0-9.-]+\.[a-z]{2,4}$" name="email" required>
                                </div>
                                <div class="form-group mb-6">
                                    <div class="custom-control custom-checkbox mb-3">
                                        <input type="checkbox" class="custom-control-input" id="customCheck-agree" required>
                                        <label class="custom-control-label" for="customCheck-agree">我已詳細閱讀edm留遊學隱私權政策，並同意接受其內容</label>
                                    </div>
                                    <div class="box-agree">
                                        {!! nl2br($privacy->content) !!}
                                    </div>
                                </div>
                                <div class="form-group mb-6">
                                    <div id="g-recaptcha" class="g-recaptcha"></div>
                                </div>
                                {{-- <a class="btn btn-primary px-10" href="#" data-toggle="modal" data-target="#modal-states">送出</a> --}}

                                <input type="hidden" name="contact_type_id" value="1">
                                <input type="hidden" name="_token" value="{!! csrf_token() !!}">
                                <input type="submit" class="btn btn-primary px-10" value="送出" disabled>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@stop
@section('js')
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script type="text/javascript">
/*
 * 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'                        // 主題
        }
    );
};
</script>
<script src="/assets/js/vendor/jquery.lightbox.min.js"></script>
<script>
    $(".about-slider").on("initialized.owl.carousel changed.owl.carousel", function(e) {
        if (!e.namespace) {
            return;
        }
        $(".about-slider-counter").text(
            e.relatedTarget.relative(e.item.index) + 1 + " / " + e.item.count
        );
    }).owlCarousel({
        loop: true,
        items: 1,
        nav: true,
        dots: false,
        info: true,
    });
</script>
<script>
    $('#form').submit(function(event) {
        event.preventDefault();
        $.ajax({
            url: '{{ route('contact_add') }}',
            data: $('#form').serialize(),
            type: 'POST',
            success: function(response) {
                if (response == '成功送出') response = 'success';
                if (response != 'success') response = 'fail';
                $('#form')[0].reset();
                $('#modal-states .text-center').hide();
                $('#modal-states .' + response).show();
                $('#modal-states').modal();
            }
        });
    });

    $('#modal-states .btn-primary').click(function(event) {
        location.reload();
    });

    function checkForm(elem, class_name, error_msg)
    {
        var innerDiv = document.createElement('div');
        innerDiv.className = class_name + ' form_error';
        innerDiv.innerHTML = "<font color='red'>" + error_msg + "</font>";
        elem.parentNode.insertBefore(innerDiv, elem);
    }

    var item = document.querySelectorAll('input');
    for (var i = 0; i < item.length; i++) {
        item[i].addEventListener('keyup', function (event) {
            switch (this.name) {
                case "phone":
                    if (this.value.length != 10 || !(/^\d+$/.test(this.value))) {
                        if (document.querySelectorAll(".phone_error").length > 0) return;
                        checkForm(this, "phone_error", "請輸入十個數字")
                    } else {
                        if (document.querySelectorAll(".phone_error").length == 0) return;
                        this.parentNode.removeChild(document.querySelectorAll(".phone_error")[0]);
                    }
                    break;
                case "email":
                    if (this.value.indexOf("@") == -1) {
                        if (document.querySelectorAll(".email_error").length > 0) return;
                        checkForm(this, "email_error", "正確的Email格式")
                    } else {
                        if (document.querySelectorAll(".email_error").length == 0) return;
                        this.parentNode.removeChild(document.querySelectorAll(".email_error")[0]);
                    }
                    break;
            }
        });
    }
    $(function(){
        /* 서브메인 - 왜 edm유학일까요 */
        var whyedmSlider = $('.why-edm-slider').bxSlider({
            pagerCustom: '.why-edm-pager > ul',
            auto: true,
            mode: 'fade',
            infiniteLoop: false,
            hideControlOnEnd: true,
            autoHover: true,
            onSliderLoad: function(currentIndex) {
                $(this).parents('.bx-wrapper').find('.bx-controls').addClass('round-style center');
                $(".sm-why-edm").css("visibility", "visible").animate({opacity:1});
            },
            onSlideAfter: function($slideElement, oldIndex, newIndex){
                if (newIndex+1 === $slideElement.prevObject.length) {
                    setTimeout(function(){
                        whyedmSlider.goToSlide(0);
                    }, 2000)
                }
            }
        });

        $('.sm-con-slider').bxSlider({
            controls:false,
            onSliderLoad: function(currentIndex) {
                $(this).parents('.bx-wrapper').find('.bx-pager').addClass('outside gray');
            }
        });
    });
</script>
@stop