@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_request'))
@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" href="{{ route('channel_appointment') }}">免費諮詢</a>
                <a class="btn btn-white px-6 active" href="{{ route('channel_request') }}">索取資料</a>
            </div>
        </div>
    </div>
</div>

<main class="main pt-0">
    <div class="container">
        <form id="form" action="" method="post">
            <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_request') }}
                    </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>
                                <div class="row">
                                    <div class="col pr-0">
                                        <h3 class="text-success font-weight-bold">免費索取,<br>您將瞭解</h3>
                                        <ul class="m-0 mt-2 fa-ul">
                                            <li><span class="fa-li"><i class="fas fa-check text-success"></i></span>留遊學規劃完整解析</li>
                                            <li><span class="fa-li"><i class="fas fa-check text-success"></i></span>6大國家與36城市介紹</li>
                                            <li><span class="fa-li"><i class="fas fa-check text-success"></i></span>200+精選學校特色簡介</li>
                                            <li><span class="fa-li"><i class="fas fa-check text-success"></i></span>ed:m學員專屬優惠</li>
                                        </ul>
                                    </div>
                                    <div class="col-4 pl-0">
                                        <img class="img-fluid" src="/assets/img/uploads/request-pic.png">
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 px-lg-10 px-3">
                                <div>
                                    <div class="form-group mb-6">
                                        <label class="text-muted">請選擇想索取的項目</label>
                                        <select name="category_id" class="custom-select form-control px-0">
                                            @foreach ($list as $k => $v)
                                            <option value="{{$v->pb_id}}">{{$v->title}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <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" pattern="[0-9]{10}" maxlength="10" name="phone" 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">
                                        <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>
                                        <input type="text" class="form-control" name="address">
                                    </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>
                                    <div class="row">
                                        <div class="col-12 col-md-6 my-2">
                                            <a class="btn btn-block btn-outline-primary btn-step-prev" href="#">上一步</a>
                                        </div>
                                        <div class="col-12 col-md-6 my-2">
                                            {{-- <a class="btn btn-block btn-primary" href="#" data-toggle="modal"
                                                data-target="#modal-states">送出</a> --}}
                                            <input type="hidden" name="contact_type_id" value="4">
                                            <input type="hidden" name="_token" value="{!! csrf_token() !!}">
                                            <input type="submit" class="btn btn-block btn-primary" value="送出" disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </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);
};

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

$('#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', 'request') }}';
            } 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_request') }}';
                    }, 3000);
                }
            }
        }
    });
});

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/ixYrCK3Wk5UBEIDe0vEC',
          'event_callback': callback
      });
      return false;
    }
</script>

@stop