@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', 'contact'))
@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" href="{{ route('about_edm-taiwan') }}">ed:m 台灣介紹</a>
                </div>
                <div class="col-2">
                    <a class="nav-link active" 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') }}">ed:m 台灣介紹</option>
                <option value="{{ route('about_contact') }}" selected>聯絡我們</option>
            </select>
        </div>
    </div>
</nav>
<div class="container breadcrumbs">
    {{ Breadcrumbs::render('contact') }}
</div>
<main class="main pt-0">
    <div class="container-map">
        <div id="map-canvas" class="map-local"></div>
        <div class="card-contact box-edm">
            <h4 class="caption">{{$page->description_2}}</h4>
            <address>
                <strong>聯絡資訊</strong><br>
                {{$page->description_3}}<br>
                {{$page->description_4}}<br>
                {{$page->description_5}}
            </address>
            <address>
                <strong>營業時間</strong><br>
                {!!nl2br($page->description_6)!!}
            </address>
            <hr class="mb-6">
            <div class="d-flex mb-7">
                <a class="btn-rounded btn-dark mr-2" target="_blank" href="{{$page->description_7}}">
                    <i class="fab fa-facebook-f"></i>
                </a>
                <a class="btn-rounded btn-dark" target="_blank" href="{{$page->description_8}}">
                    <i class="fab fa-instagram"></i>
                </a>
            </div>
            {{-- <div class="socials">
                <a class="social__item text-white" target="_blank" href="{{$page->description_7}}">
                    <i class="fab fa-facebook-f"></i>
                </a>
                <a class="social__item text-white" target="_blank" href="{{$page->description_8}}">
                    <i class="fab fa-instagram"></i>
                </a>
            </div> --}}
            <div class="line">
                <p>不受時空限制快速諮詢！</p>
                <div class="line__mobile">
                    <a class="btn -clr-primary" target="_blank" href="https://line.me/ti/p/dL6_Zbb5Ci">
                        <i class="icon edm-line"></i>
                        1:1 專業諮詢
                    </a>
                </div>
                <div class="line__desktop">
                    <p class="txt">
                        <img class="line__logo" src="/assets/img/ui/line.png">
                        1:1 專業諮詢
                    </p>
                    <img src="/assets/img/ui/qrcode.png">
                </div>
            </div>
        </div>
    </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-xl-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" 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="2">
                                <input type="hidden" name="reg_root" value="기타">
                                <input type="hidden" name="_token" value="{!! csrf_token() !!}">
                                <input type="hidden" name="rc_token" id="rc_token">
                                <input type="submit" id="submit" class="btn btn-primary px-10" value="送出" disabled>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@stop
@section('other')
<!-- modal-states -->
<div class="modal-states"></div>
<!-- ./modal-states -->
@stop
@section('js')

<!-- Google Map API -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6piIpu_iVGX8ZNUF5F8GWr2udHRYMxJ0&callback=initMap" type="text/javascript"></script>
<script>
    function initMap() {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({'address': '{{$page->description_3}}'}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                // var mylatlng = {lat: 51.517, lng: -0.140};
                var mylatlng = {lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng()};
                var map = new google.maps.Map(document.getElementById('map-canvas'), {
                    zoom: 15,
                    center: mylatlng
                });
                var marker = new google.maps.Marker({
                    position: mylatlng,
                    map: map,
                    icon: "/assets/img/ui/map-pin.png",
                });
            }
        });
    }
</script>

<script src="https://www.google.com/recaptcha/api.js?render=6LfZRlglAAAAAJeAjywvhCOc6s4g6kAhzXRiZ0K4"></script>
<script type="text/javascript">
grecaptcha.ready(function() {
    grecaptcha.execute('6LfZRlglAAAAAJeAjywvhCOc6s4g6kAhzXRiZ0K4', {action: 'submit'}).then(function(token) {
        $('#submit').attr('disabled', false);
        $('#rc_token').val(token);
    });
});

$('#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