@inject('FrontendPresenter', 'App\Presenters\FrontendPresenter')
<!-- 註冊 -->
<div class="modal modal-responsive fade" id="modal-signup" role="dialog" style="overflow:auto;">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body p-0">
                <div class="row row-signup no-gutters">
                    <div class="col-12 col-md-5 col-signup-intro">
                        <div class="box h-100 d-flex flex-column">
                            <div class="position-absolute d-md-none" style="left: 1rem; top: 1rem;">
                                <a class="text-white" data-dismiss="modal" href="javascript:void();">
                                    <i class="fas fa-sm fa-chevron-left mr-3"></i> 返回
                                </a>
                            </div>
                            <div class="mb-auto"></div>
                            {{-- <img class="img-fluid logo mb-3" src="/assets/img/ui/logo_simple_white.svg" alt="">
                            --}}
                            <div class="h3 font-weight-bold mb-4">
                                edm 留遊學<br>
                                鼓勵學生不斷追尋自己的夢想
                            </div>
                            <p>學生是ed:m存在的價值，我們致力於提供學生客製化的整合服務。ed:m留遊學追求的最高價值為讓服務熱忱帶領學生成功更超越學生的期待滿意度。</p>
                            <div class="mt-auto"></div>
                        </div>
                    </div>
                    <div class="col-12 col-md-7 col-signup-form">
                        <div class="position-absolute d-none d-md-block" style="right: 1rem; top: 1rem;">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <i class="fas fa-sm fa-times"></i>
                            </button>
                        </div>
                        <div class="box">
                            <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 px-0 active">1. 關於你</div>
                                </li>
                                <li class="nav-item">
                                    <a data-toggle="tab" href="#tab-step2"></a>
                                    <div class="nav-link nav-link2 px-0">2. 讓我們更了解你</div>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane fade show active pt-8" id="tab-step1" role="tabpanel">
                                    <form id="form_register" method="post" action="{{ route('member_register') }}">
                                        <div class="form-group mb-6">
                                            <label class="text-muted">姓名 *</label>
                                            <input type="text" name="register_name" class="form-control" required>
                                        </div>
                                        <div class="form-group mb-6">
                                            <label class="text-muted">手機號碼 *</label>
                                            <input id="register_phone" type="tel" name="register_phone" class="form-control" pattern="[0-9]{10}"  required  maxlength="10">
                                        </div>
                                        <div class="form-group mb-6">
                                            <label class="text-muted">電子信箱 *</label>
                                            <input type="email" name="register_email" class="form-control" required pattern="[a-z0-9._%+-]{3,}@[a-z0-9.-]+\.[a-z]{2,4}$" >
                                        </div>
                                        <div class="form-group mb-6">
                                            <label class="text-muted">密碼 *</label>
                                            <input type="password" name="register_pass" id="register_pass" class="form-control"
                                                required pattern=".{6,}">
                                        </div>
                                        <div class="form-group mb-6">
                                            <label class="text-muted">確認密碼 *</label>
                                            <input type="password" name="register_pass_confirm" id="register_pass_confirm"
                                                class="form-control" required pattern=".{6,}">
                                        </div>
                                        <div class="form-group mb-6" style="display:none;">
                                            <label class="text-muted">
                                                生日
                                                {{-- <div class="d-none d-md-inline-block">
                                                    <i class="fas fa-xs fa-question-circle text-primary" data-toggle="tooltip"
                                                        data-placement="right" title="需要年滿14歲以上才可註冊。"></i>
                                                </div> --}}
                                            </label>
                                            <p class="d-md-none">需要年滿14歲以上才可註冊。</p>
                                            <div class="form-row">
                                                <div class="col">
                                                    <select name="register_y" id="register_y" class="custom-select form-control px-0"
                                                        >
                                                        <option value="">年</option>
                                                        @for ($x = (date("Y")-14); $x > 1918; $x--)
                                                        <option value="{{$x}}">{{$x}}</option>
                                                        @endfor
                                                    </select>
                                                </div>
                                                <div class="col">
                                                    <select name="register_m" id="register_m" class="custom-select form-control px-0"
                                                        >
                                                        <option value="">月</option>
                                                        @for ($x = 1; $x <= 12; $x++) <option value="{{$x}}">{{$x}}</option>
                                                            @endfor
                                                    </select>
                                                </div>
                                                <div class="col">
                                                    <select name="register_d" id="register_d" class="custom-select form-control px-0"
                                                        >
                                                        <option value="">日</option>
                                                        @for ($x = 1; $x <= 31; $x++) <option value="{{$x}}">{{$x}}</option>
                                                            @endfor
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group mb-6">
                                            <div class="custom-control custom-checkbox mb-3">
                                                <input type="checkbox" name="register-agreement" class="custom-control-input"
                                                    id="customCheck-agree1" required>
                                                <label class="custom-control-label agreement_label" for="customCheck-agree1">我已詳細閱讀edm留遊學隱私權政策，並同意接受其內容*</label>
                                            </div>
                                            <div class="box-agree scrollbar-inner hidden_agreement_label">
                                                {!! nl2br($FrontendPresenter->getPrivacy(6)) !!}
                                            </div>
                                        </div>
                                        <div class="form-group mb-6">
                                            <div class="custom-control custom-checkbox mb-3">
                                                <input type="checkbox" name="register-terms" class="custom-control-input"
                                                    id="customCheck-terms" required>
                                                <label class="custom-control-label terms_label" for="customCheck-terms">我已詳細閱讀edm留遊學服務條款，並同意接受其內容*</label>
                                            </div>

                                            <div class="box-agree scrollbar-inner hidden_terms_label">
                                                {!! nl2br($FrontendPresenter->getPrivacy(7)) !!}
                                            </div>
                                        </div>
                                        <div class="form-group mb-6">
                                            <div id="signup-recaptcha" class="g-recaptcha"></div>
                                        </div>
                                        <div class="text-center">
                                            <button class="btn btn-primary btn-block" type="submit" id="go-step-next" onClick="callRegisterStep('go-step-next')">下一步</button>
                                            <div class="mt-4">已經有帳號了嗎？ <a class="font-weight-bold" href="" data-dismiss="modal"
                                                    data-toggle="modal" data-target="#modal-login">立即登入</a></div>
                                        </div>
                                </div>
                                <div class="tab-pane fade pt-8" id="tab-step2" role="tabpanel">
                                    <div class="form-group mb-6">
                                        請於此填入完整的資訊 ed:m留遊學 專業顧問將會盡快與您聯繫，提供您免費的留遊學諮詢服務。
                                    </div>
                                    <div class="form-group mb-6">
                                        <div class="d-none d-md-block">
                                            <label class="text-muted">想去的國家?</label>
                                        </div>
                                        <div class="d-md-none">
                                            <a class="collapse-arrow-v text-dark" data-toggle="collapse" href="#collapse-countries">
                                                <label class="text-muted">想去的國家?</label>
                                            </a>
                                        </div>
                                        <div class="form-row collapse show" id="collapse-countries">
                                            {!! $FrontendPresenter->getCountryCheckbox() !!}
                                        </div>
                                    </div>
                                    <div class="form-group mb-6">
                                        <div class="d-none d-md-block">
                                            <label class="text-muted">興趣課程</label>
                                        </div>
                                        <div class="d-md-none">
                                            <a class="collapse-arrow-v text-dark" data-toggle="collapse" href="#collapse-courses">
                                                <label class="text-muted">興趣課程</label>
                                            </a>
                                        </div>
                                        <div class="form-row collapse show" id="collapse-courses">
                                            <div class="col-12 col-sm-3">
                                                <div class="custom-control custom-checkbox custom-control-inline my-2">
                                                    <input type="checkbox" class="custom-control-input" name="interest[]"
                                                        value="1" id="customCheck-city-1">
                                                    <label class="custom-control-label w-100" for="customCheck-city-1">語言</label>
                                                </div>
                                            </div>
                                            <div class="col-12 col-sm-3">
                                                <div class="custom-control custom-checkbox custom-control-inline my-2">
                                                    <input type="checkbox" class="custom-control-input" name="interest[]"
                                                        value="2" id="customCheck-city-2">
                                                    <label class="custom-control-label w-100" for="customCheck-city-2">出國留學</label>
                                                </div>
                                            </div>
                                            <div class="col-12 col-sm-3">
                                                <div class="custom-control custom-checkbox custom-control-inline my-2">
                                                    <input type="checkbox" class="custom-control-input" name="interest[]"
                                                        value="3" id="customCheck-city-3">
                                                    <label class="custom-control-label w-100" for="customCheck-city-3">學習藝術</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group mb-6">
                                        <label class="text-muted">預計出發日</label>
                                        <!--                                            <input type="text" class="form-control" placeholder="請輸入年份/月份 (YYYY/MM)">-->
                                        <div class="form-row">
                                            <div class="col">
                                                <select name="register_departure_y" class="custom-select form-control px-0">
                                                    <option value="">年</option>
                                                    @for ($x = date('Y'); $x < date('Y') + 5; $x++) <option value="{{$x}}">{{$x}}</option>
                                                        @endfor
                                                </select>
                                            </div>
                                            <div class="col">
                                                <select name="register_departure_m" class="custom-select form-control px-0">
                                                    <option value="">月</option>
                                                    @for ($x = 1; $x <= 12; $x++) <option value="{{$x}}">{{$x}}</option>
                                                        @endfor
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- <div class="form-group mb-6">
                                        <label class="text-muted">預計出發日</label>
                                        <input type="date" name="register_departure" class="form-control" placeholder="請輸入年份/月份 (YYYY/MM)">
                                    </div> --}}
                                    <div class="form-group mb-6">
                                        <label class="text-muted">Line ID</label>
                                        <input type="text" name="register_line" class="form-control">
                                    </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">
                                            <input type="hidden" name="_token" value="{!! csrf_token() !!}">
                                            <button class="btn btn-primary btn-block" type="submit"  id="go-step-register" onClick="callRegisterStep('go-step-register')">註冊</button>
                                            {{-- <a class="btn btn-block btn-primary" href="#" data-dismiss="modal"
                                                data-toggle="modal" data-target="#modal-email-confirm">註冊</a> --}}
                                        </div>
                                    </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    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 "register_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 "register_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;
                case "register_pass":
                    if (this.value.length < 6) {
                        if (document.querySelectorAll(".pass_error").length > 0) return;
                        checkForm(this, "pass_error", "密碼至少6個字元");
                    } else if (document.getElementById("register_pass_confirm").value != "" && this.value != document.getElementById("register_pass_confirm").value) {
                        if (document.querySelectorAll(".pass_error").length > 0) return;
                        checkForm(this, "pass_error", "密碼至少6個字元，且兩次輸入的密碼要相同");
                    } else {
                        if (document.querySelectorAll(".pass_error").length == 0) return;
                        this.parentNode.removeChild(document.querySelectorAll(".pass_error")[0]);

                    }
                    break;
                case "register_pass_confirm":
                    if (this.value != document.getElementById("register_pass").value) {
                        if (document.querySelectorAll(".confirm_pass_error").length > 0) return;
                        checkForm(this, "confirm_pass_error", "密碼至少6個字元，且兩次輸入的密碼要相同")
                    } else {
                        if (document.querySelectorAll(".confirm_pass_error").length == 0) return;
                        this.parentNode.removeChild(document.querySelectorAll(".confirm_pass_error")[0]);
                    }
                    break;
            }
        });
    }



    //  var sel = document.querySelectorAll('select');
    //     for (var i = 0; i < sel.length; i++) {
    //         console.log(sel[i].name);
    //     sel[i].addEventListener('change', function(event) {

    //         switch(this.name){



    //           case "register_y":
    //           case "register_m":
    //           case "register_d":
    //                 console.log(this.name);
    //                 if(Math.abs(parseInt(document.getElementById("register_y").value) - (new Date()).getFullYear()) ==14 ){

    //                     if(parseInt(document.getElementById("register_m").value) > ((new Date()).getMonth()+1)){
    //                         if(document.querySelectorAll(".dob_error").length>0)return;
    //                         checkForm(this,"dob_error","年齡至少要滿十四歲")


    //                     }else if(parseInt(document.getElementById("register_m").value) == ((new Date()).getMonth()+1)){

    //                             if(parseInt(document.getElementById("register_d").value) >= (new Date()).getDate()){
    //                                 if(document.querySelectorAll(".dob_error").length>0)return;

    //                                 checkForm(this,"dob_error","年齡至少要滿十四歲")

    //                             }else{
    //                                 if(document.querySelectorAll(".dob_error").length==0)return;

    //                                 this.parentNode.removeChild(document.querySelectorAll(".dob_error")[0]);

    //                             }
    //                     }else{
    //                         if(document.querySelectorAll(".dob_error").length!=0) {

    //                          this.parentNode.removeChild(document.querySelectorAll(".dob_error")[0]);
    //                         }

    //                     }


    //                 } 
    //           break;
    //         }

    //     });
    // }



    document.querySelectorAll(".agreement_label")[0].addEventListener('click', function (event) {

        document.querySelectorAll(".hidden_agreement_label")[0].style.display = "block";
        document.querySelectorAll(".hidden_agreement_label .box-agree")[0].style.display = "block";

    });

    document.querySelectorAll(".terms_label")[0].addEventListener('click', function (event) {
        document.querySelectorAll(".hidden_terms_label")[0].style.display = "block";
        document.querySelectorAll(".hidden_terms_label .box-agree")[0].style.display = "block";

    });
</script>