@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">
    <!-- 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;
        }
    });
}
</script>
@stop