@extends('layouts.frontend')
@section('title', $page->meta_title)
@section('meta_description', $page->meta_description)
@section('meta_keywords', $page->meta_keyword)
@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="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="h3 font-weight-bold mb-5"><span>免費手冊索取</span></div>
                                <p class="mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
                                    euismod bibendum laoreet.</p> --}}
                                <img class="img-fluid" src="/assets/img/uploads/request-pic.svg">
                            </div>
                            <div class="col-12 col-md-6 px-lg-10 px-3">
                                <ul class="nav nav-justified nav-request">
                                    <li class="nav-item">
                                        <a data-toggle="tab" href="#tab-step1"></a>
                                        <div class="nav-link nav-link1 active">1. 想知道的內容</div>
                                    </li>
                                    <li class="nav-item">
                                        <a data-toggle="tab" href="#tab-step2"></a>
                                        <div class="nav-link nav-link2">2. 您的聯絡資料</div>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane fade show active pt-8" id="tab-step1" role="tabpanel">
                                        <div class="form-group mb-12">
                                            <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="text-center">
                                            <a class="btn btn-primary btn-step-next px-8" href="javascript:void();">下一步</a>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade pt-8" id="tab-step2" role="tabpanel">
                                        <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>
            </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);
};

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


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