@extends('layout.login')
@section('page-title', 'Signup')
@section('nav-title', 'Signup')
@section('page-js-script')
    <script type="text/javascript">
        $(function() {
            const validator = $("#register_fm").validate({
                debug: true,
                rules: {
                    name: {
                        required: true,
                    },
                    mobile: {
                        required: true,
                        minlength: 10,
                        remote: {
                            url: "ajax/check_mobile",
                            type: "post",
                            dataType: "json",
                            data: {
                                mobile: function() {
                                    return $("#mobile").val();
                                }
                            }
                        }
                    },
                    uniform_number: {
                        // pattern: '/^[A-Z]{1}[1-2]{1}[0-9]{8}$/',
                        required: true,
                        // minlength: 10,
                        remote: {
                            url: "ajax/check_uniform_number",
                            type: "post",
                            dataType: "json",
                            data: {
                                mobile: function() {
                                    return $("#uniform_number").val();
                                }
                            }
                        }
                    },
                    org_uniform_number: {
                        required: true,
                        // minlength: 10,
                        remote: {
                            url: "ajax/check_org_uniform_number",
                            type: "post",
                            dataType: "json",
                            data: {
                                mobile: function() {
                                    return $("#org_uniform_number").val();
                                }
                            }
                        }
                    },
                    password: {
                        required: true,
                        pwcheck: true,

                    },
                    password_confirm: {
                        required: true,
                        equalTo: "#password"
                    },
                    account: {
                        // required: true,
                        //digits: true,
                        // email: true,
                        // remote: {
                        //     url: "ajax/check_email",
                        //     type: "post",
                        //     dataType: "json",
                        //     data: {
                        //         email: function() {
                        //             return $("#account").val();
                        //         }
                        //     }
                        // }
                    },
                    verify_code: {
                        required: true,
                    },
                    promo_code: {
                        remote: {
                            url: "ajax/check_promo_code",
                            type: "post",
                            dataType: "json",
                            data: {
                                promo_code: function() {
                                    return $("#promo_code").val();
                                }
                            }
                        }
                    }
                },
                messages: {
                    name: {
                        required: "*{{ __('basic.PleaseInputName') }}",
                        // string: "*暱稱不可使用符號",
                        // remote: "*此暱稱已存在，請嘗試其他暱稱",
                    },
                    // email:{
                    //     required: "*{{ __('basic.PleaseInputEmail') }}",
                    //     email: "*{{ __('basic.PleaseInputCurrentFormatEmail') }}",
                    //     remote: "*{{ __('basic.EmailExistTryAnotherOne') }}",
                    // },
                    password: {
                        required: "*{{ __('basic.PleaseInputPassword') }}",
                    },
                    password_confirm: {
                        required: "*{{ __('basic.PleaseConfirmPassword') }}",
                        equalTo: "*{{ __('basic.PasswordNotTheSame') }}",
                    },
                    account: {
                        required: "*{{ __('basic.PleaseInputAccount') }}",
                        //digits:"*請輸入數字",
                        // email: "*{{ __('basic.PleaseInputCurrentFormatEmail') }}",
                        // remote: "*{{ __('basic.EmailExistTryAnotherOne') }}",
                    },
                    uniform_number: {
                        // pattern: '* format wrong',
                        required: "*{{ __('basic.PleaseInputAccount') }}",
                        remote: "*This value already exists, please try another one",
                    },
                    org_uniform_number: {
                        // pattern: '* format wrong',
                        required: "*{{ __('basic.PleaseInputAccount') }}",
                        remote: "*This value already exists, please try another one",
                    },
                    mobile: {
                        required: "*{{ __('basic.PleaseInputMobile') }}",
                        minlength: "*{{ __('basic.AtLeastTenDigitsForPhone') }}",
                        remote: "*{{ __('basic.PhoneExistPleaseTryAnotherOne') }}",
                    },
                    promo_code: {
                        remote: "*{{ __('basic.PromoCodeNotExist') }}",
                    }
                    // verify_code: {
                    //     required: "*{{ __('basic.EnterVerifyCode') }}",
                    // }
                }
            });


            // 測試用===============================================
            // $('#name').val('Roy You'+randomNum(3));
            // // $('#account').val(randomNum(4));
            // $('#uniform_number').val(randomChr(1)+randomNum(9));
            // $('#account').val($('#uniform_number').val());
            // $('#mobile').val('09'+randomNum(8));
            // $('#password').val('123456');
            // $('#password_confirm').val($('#password').val());
            // $('#year').val('1991');
            // $('#month').val('6');
            // $('#day').val('3');
            // $('#email').val('mail'+randomNum(3)+'@mail.com');
            // $('#promo_code').val('MmZiNDlkODItZTk4YS00ZWFkLWJhZGMtNTI5MGQwZDI0ODdi');
            // 測試用===============================================

            $('.account_type').click(function() {
                validator.resetForm();
                $('#uniform_number').show();
                $('#org_uniform_number').hide();
                $('#org_uniform_number').val('');
                if (this.value == '0') {
                    $('#uniform_number').hide();
                    $('#uniform_number').val('');
                    $('#org_uniform_number').show();
                }
            });
            $('.uniform_number').on('input', function() {
                $('#account').val(this.value);
            });
            $('input').on('keyup', function(e) {
                e.preventDefault();
                validator.element('#' + this.id);

            });

            // 密碼驗證
            $.validator.addMethod("pwcheck", function(value, element) {
                return this.optional(element) || /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/.test(value);
            }, "{{ __('basic.PasswordDesc') }}");
            $('input[name="password_type"]').change(function(e) {
                e.preventDefault();
                if ($(this).val() == 'simple') {
                    $('#password_help_block').text('{{ __('robot.PasswordDescSimple') }}');
                    $.validator.addMethod("pwcheck", function(value, element) {
                        return this.optional(element) || /^\d{6}$/.test(value);
                    }, "{{ __('robot.PasswordDescSimple') }}");
                } else {
                    $('#password_help_block').text('{{ __('basic.PasswordDesc') }}');
                    $.validator.addMethod("pwcheck", function(value, element) {
                        return this.optional(element) || /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/.test(value);
                    }, "{{ __('basic.PasswordDesc') }}");
                }
                validator.element('#password');
            });
            $('.submit_btn').click(function() {
                $('.loading').show();
                console.log(validator);
                if ($("#register_fm").valid()) {
                    let formData = new FormData($('#register_fm')[0]);
                    formData.append('promo_code', $('#promo_code').val());
                    $.ajax({
                        url: '{{ url('ajax/register') }}',
                        data: formData,
                        dataType: 'json',
                        contentType: false,
                        processData: false,
                        success: function(resp, textStatus, jqXHR) {
                            console.log(resp);
                            $('.loading').hide();
                            if (resp.status) {
                                Swal.fire({
                                    title: (resp.msg != '') ? resp.msg : '{{ __('basic.SuccessRegister') }}',
                                    // text: ,
                                    icon: 'success',
                                    confirmButtonText: '{{ __('basic.OK') }}',
                                }).then((function() {
                                    memberObj.login($('#account').val(), $('#password').val(), $('#path').val());
                                }))
                            } else {
                                Swal.fire({
                                    title: '{{ __('basic.Error') }}!',
                                    // text: resp.message,
                                    html: resp.msg.replaceAll("\r\n", "<BR>"),
                                    icon: 'error',
                                    confirmButtonText: '{{ __('basic.OK') }}',
                                })

                            }
                        },
                        error: ajaxError
                    });
                } else {
                    $('.loading').hide();
                }
            });

        });
    </script>
@endsection
@section('container')
    <div class="l-login-card card mb-6 px-6">
        <form class="form row row-cols-1 align-items-center py-6" id='register_fm' action="" method="POST">
            <input id='path' name='path' type='hidden' value='{{ $path }}' />
            <input id='country_id' name='country_id' type='hidden' value='{{ session('country_id') }}' />

            {{-- 姓名 --}}
            <div class="col mb-3">
                <label class="form-label" for="name">{{ __('basic.Name') }}</label>
                <input class="form-control" id="name" name='name' type="text" placeholder="{{ __('basic.Name') }}">
            </div>

            {{-- 手機 --}}
            <div class="col mb-3">
                <label class="form-label" for="mobile">{{ __('basic.Phone') }}</label>
                {{-- <div class="d-flex align-items-start flex-row gap-3"> --}}
                {{-- <input type="phone" class="form-control py-2" id="mobile" name='mobile' placeholder="{{ __('basic.Phone') }}"> --}}
                {{-- <button type="submit" class="col-3 btn btn-outline-primary mb-3" disabled>{{ __('basic.Verify') }}</button> --}}
                {{-- </div> --}}
                <input class="form-control py-2" id="mobile" name='mobile' type="phone" placeholder="{{ __('basic.Phone') }}">
                {{-- <input type="text" class="form-control" id="inputVerify" placeholder="{{ __('basic.IuputVerifyCode') }}"> --}}
            </div>

            {{-- 帳號 --}}
            {{-- <div class="col mb-3">
                <label for="account" class="form-label">{{ __('basic.Account') }}</label>
                <input type="text" class="form-control" id="account" name='account' placeholder="{{ __('basic.Account') }}">
            </div> --}}

            {{-- 身分證/居留證號碼 --}}
            <div class="col mb-3">
                <label class="form-label" for="uniform_number">{{ __('basic.Account') }}
                    <div class='form-check form-check-inline ms-2'>
                        <input class='form-check-input account_type' id='account_type_1' name='account_type' type='radio' value='1' checked />
                        <label class='form-check-label' for='account_type_1'>{{ __('basic.UniformNumberOrARCNumber') }}</label>
                    </div>

                    <div class='form-check form-check-inline'>
                        <input class='form-check-input account_type' id='account_type_0' name='account_type' type='radio' value='0' />
                        <label class='form-check-label' for='account_type_0'>{{ __('basic.OriginUniformNumber') }}</label>
                    </div>
                </label>
                <input class="form-control" id="account" name='account' type="hidden" placeholder="{{ __('basic.Account') }}">
                <input class="form-control uniform_number" id="uniform_number" name='uniform_number' type="text" placeholder="{{ __('basic.UniformNumberOrARCNumber') }}">
                <input class="form-control uniform_number" id="org_uniform_number" name='org_uniform_number' type="text" style="display:none;" placeholder="{{ __('basic.OriginUniformNumber') }}" />
            </div>

            {{-- 密碼 --}}
            <div class="col mb-3">
                <label class="form-label" for="password">{{ __('basic.Password') }}</label>
                <div class="col mb-3">
                    <div class="form-check form-check-inline lh-base">
                        <input class="form-check-input" id="password_type_defalut" name="password_type" type="radio" value="defalut" checked>
                        <label class="form-check-label" for="password_type_defalut">{{ __('robot.AlphanumericPassword') }}</label>
                    </div>
                    <div class="form-check form-check-inline lh-base">
                        <input class="form-check-input" id="password_type_simple" name="password_type" type="radio" value="simple">
                        <label class="form-check-label" for="password_type_simple">{{ __('robot.DigitalPassword') }}</label>
                    </div>
                </div>
                <input class="form-control" id="password" name="password" type="password" placeholder="{{ __('basic.Password') }}">
                <div class="form-text" id="password_help_block">{{ __('basic.PasswordDesc') }}</div>
                <input class="form-control mt-4" id="password_confirm" name="password_confirm" type="password" placeholder="{{ __('basic.ConfirmPassword') }}">
            </div>

            {{-- 推薦代碼 --}}
            <div class="col mb-3">
                <label class="form-label" for="promo_code">{{ __('basic.PromoCode') }}</label>
                <input class="form-control" id="promo_code" name="promo_code" type="text" value='{{ $promo_code }}' {!! $promo_code != '' ? 'disabled' : '' !!} placeholder="{{ __('basic.PromoCode') }}">
            </div>

            <div class="col mb-3 pt-6">
                <button class="submit_btn btn btn-outline-primary w-100" type="button">{{ __('robot.Submit') }}</button>
            </div>

            <div class="d-flex justify-content-center">
                <p>
                    {{ __('basic.Agree') }}

                    <a class="form-label text-primary text-center" href="{{ route('terms') }}">{{ __('basic.TermsOfUse') }}</a>
                    {{ __('basic.And') }}
                    <a class="form-label text-primary text-center" href="{{ route('privacy') }}">{{ __('basic.PrivacyPolicy') }}</a>
                </p>
            </div>

            <p class="text-secondary my-4 text-center">{{ __('basic.CLCPromise') }}</p>

            {{-- <div class="d-flex justify-content-center gap-3"> --}}
            {{-- <a class="border-gray rounded-circle lh-sm fb_btn border p-4" href=""> <i class="icon-color-fb"></i></a> --}}
            {{-- <a class="border-gray rounded-circle lh-sm border p-4" href="{{ url('line/tw/auth') }}" > <i class="icon-color-line"></i></a> --}}
            {{-- </div> --}}
        </form>
        <a class="form-label text-primary mb-4 text-center" href="{{ route('login', ['path' => $path]) }}">{{ __('basic.OrLogin') }}</a>
    </div>
@endsection