@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', 'channel_appointment'))
@section('content')

<div class="kv-inpage" style="background-image: url(/assets/img/uploads/kv-appointment.jpg);">
    <div class="kv-inpage-item">
        <div class="container text-white text-center">
            <div class="btn-group btn-group-lg">
                <a class="btn btn-white px-6 active" href="{{ route('channel_appointment') }}">免費諮詢</a>
                <a class="btn btn-white px-6" href="{{ route('channel_request') }}">索取資料</a>
            </div>
        </div>
    </div>
</div>

<main class="main pt-0">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-md-10">
                <div class="breadcrumbs" style="position: absolute; top: -5rem; right: 4rem">
                    {{ Breadcrumbs::render('channel_appointment') }}
                </div>
                <div class="edm-form box-edm">
                    <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>{{$page->title}}</span></div>
                            <p class="mb-10">{!! $page->description_1 !!}</p>
                            <img class="img-fluid" src="{{asset($page->pic_1)}}" onerror="this.onerror=null;this.src='/assets/img/uploads/appointment-pic.svg'">

                            <div class="mt-8">
                               <img src="/assets/img/uploads/edmtw_banner_reservation.png">
                            </div>

                        </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" class="form-control" name="name" required>
                                </div>
                                <div class="form-group mb-6">
                                    <label class="text-muted">手機號碼 *</label>
                                    <input type="tel" class="form-control" name="phone" pattern="[0-9]{10}"  required  maxlength="10">
                                </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">
                                    <label class="text-muted">Line ID</label>
                                    <input type="text" class="form-control" name="line">
                                </div>
                                <div class="form-group mb-6">
                                    <label class="text-muted">想告訴我們的訊息</label>
                                    <textarea class="form-control" rows="6" name="content" placeholder="請告訴我們您想諮詢的國家、出國時間、學習需求及預算考量。"></textarea>
                                </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 scrollbar-inner">
                                        <div class="p-2">
                                        {!! nl2br($privacy->content) !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group mb-6">
                                    <div id="g-recaptcha" class="g-recaptcha"></div>
                                </div>
                                <input type="hidden" name="contact_type_id" value="3">
                                <input type="hidden" name="_token" value="{!! csrf_token() !!}">
                                <a href="javascript:void(0);" class="btn btn-primary px-10 submit_a" disabled>送出</a>
                                <input type="submit" id="submit" class="btn btn-primary px-10" value="送出" style="display:none">
                            </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) {
    $('.submit_a').attr('disabled', false);
};

var onloadCallback = function() {
    grecaptcha.render(
        'g-recaptcha', {                              // widget 驗證碼視窗在 id="my-widget" 顯示
            'sitekey' : '6LeeWXsUAAAAAL4TrChBuOXXSsju6_MshpoELvDD',  // API Key
            'callback' : verifyCallback,            // 要呼叫的回調函式
            // 'theme' : 'dark'                        // 主題
        }
    );
};

$('.submit_a').click(function () {
    $('#submit').click();
})

$('#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';
            if (response=='success') {
                location.href = '{{ route('channel_thank', 'appointment') }}';
            } else {
                $('#form')[0].reset();
                $('#modal-states .text-center').hide();
                $('#modal-states .' + response).show();
                $('#modal-states').modal();
                if (response == 'success') {
                    window.setTimeout(function () {
                        location.href = '{{ route('channel_appointment') }}';
                    }, 3000);
                }
            }
        }
    });
});

$('#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>
<!-- Event snippet for Handbook Enquiry 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/V2JhCIao2ZMBEIDe0vEC',
        'event_callback': callback
    });
    return false;
}
</script>

@stop