{{-- Login --}}
@extends('layout.login')
@section('page-title', 'Forget Password')
@section('nav-title', 'Forget Password')
@section('page-js-script')
    <script type="text/javascript">
        $(function() {
            const validator = $("#forget_pw_fm").validate({
                debug: false,
                rules: {
                    mobile: {
                        required: true,
                        minlength: 10,

                    },
                    verify_code: {
                        required: true,
                    }
                },
                messages: {
                    mobile: {
                        required: "*{{ __('basic.PleaseInputMobile') }}",
                        minlength: "*{{ __('basic.AtLeastTenDigitsForPhone') }}",

                    },
                    verify_code: {
                        required: "*請輸入驗證碼",
                    }
                }
            });

            const validator_pw = $("#reset_pw_fm").validate({
                debug: false,
                rules: {

                    password: {
                        required: true,
                        pwcheck: true,

                    },
                    password_confirm: {
                        required: true,
                        equalTo: "#password"
                    },

                },
                messages: {

                    password: {
                        required: "*{{ __('basic.PleaseInputPassword') }}",
                    },
                    password_confirm: {
                        required: "*{{ __('basic.PleaseConfirmPassword') }}",
                        equalTo: "*{{ __('basic.PasswordNotTheSame') }}",
                    },

                }
            });
            $('#send_sms').click(function(e) {
                // validator.element("#mobile");
                validator.element("#mobile");
                if (validator.element("#mobile")) {
                    $.ajax({
                        url: '{{ url('ajax/check_mobile') }}',
                        data: {
                            mobile: $('#mobile').val()
                        },
                        dataType: 'json',

                        success: function(resp, textStatus, jqXHR) {
                            console.log(resp);
                            if (resp == false) {
                                $.ajax({
                                    url: '{{ url('ajax/send_sms_code') }}',
                                    data: {
                                        mobile: $('#mobile').val()
                                    },
                                    dataType: 'json',

                                    success: function(resp, textStatus, jqXHR) {
                                        console.log(resp);
                                        // if (resp == false) {

                                        // } else {
                                        //     validator.showErrors({
                                        //         "mobile": "{{ __('basic.PhoneNotRegistered') }}"
                                        //     });
                                        // }
                                    },
                                    error: ajaxError
                                });
                                counter(60);
                            } else {
                                validator.showErrors({
                                    "mobile": "{{ __('basic.PhoneNotRegistered') }}"
                                });
                            }
                        },
                        error: ajaxError
                    });

                }

            });
            $('#btn_verify').click(function() {
                if ($("#forget_pw_fm").valid()) {
                    console.log('yes');
                    $.ajax({
                        url: '{{ url('ajax/check_sms_code') }}',
                        data: {
                            mobile: $('#mobile').val(),
                            verify_code: $('#verify_code').val()
                        },
                        dataType: 'json',

                        success: function(resp, textStatus, jqXHR) {
                            console.log(resp.status);
                            if (resp.status) {
                                $("#forget_pw_fm").addClass('d-none');
                                $('#reset_pw_fm').removeClass('d-none');
                            } else {
                                validator.showErrors({
                                    "verify_code": "{{ __('basic.VerificationCodeError') }}"
                                });
                            }
                        },
                        error: ajaxError
                    });
                }

            })
            // 密碼驗證
            jQuery.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_pw.element('#password');
            });
            $('#btn_reset_pw').click(function() {
                // $('.form').submit();
                if ($("#reset_pw_fm").valid()) {

                    console.log('yes');
                    $.ajax({
                        url: '{{ url('ajax/reset_pwd') }}',
                        data: {
                            mobile: $('#mobile').val(),
                            new_pwd: $('#password').val(),
                        },
                        dataType: 'json',

                        success: function(resp, textStatus, jqXHR) {
                            console.log(resp.status);
                            if (resp.status) {
                                Swal.fire({
                                    title: (resp.msg != '') ? resp.msg : '{{ __('basic.SuccessUpdate') }}',
                                    // text: ,
                                    icon: 'success',
                                    confirmButtonText: '{{ __('basic.OK') }}',
                                }).then((function() {
                                    window.location.href = '{{ route('login') }}';

                                }))
                            } else {
                                Swal.fire({
                                    title: '{{ __('basic.Error') }}!',
                                    // text: resp.message,
                                    html: resp.msg.replaceAll("\r\n", "<BR>"),
                                    icon: 'error',
                                    confirmButtonText: '{{ __('basic.OK') }}',
                                })

                            }
                        },
                        error: ajaxError
                    });
                }

            })

            function counter(count) {
                var down = setInterval(CountDown, 1000); //每秒執行一次，賦值
                $('#send_sms').attr('disabled', 'disabled');

                function CountDown() {
                    let btn = $('#send_sms');
                    btn.text('{{ __('robot.Sent') }}(' + count + ')'); //寫入
                    // btn.css("color", "#a4a4a4");
                    if (count == 0) {
                        btn.removeAttr('disabled');
                        btn.text('{{ __('basic.Verify') }}');

                        clearInterval(down);
                        return;
                    }
                    count--;
                }
            }
        });
    </script>
@endsection
@section('container')
    <div class="l-login-card card px-6" style="height: calc(100vh - 80px)">
        <form class="row row-cols-1 align-items-center form py-6" id='forget_pw_fm' action="" method="POST">

            {{-- 手機 --}}
            <div class="col mb-3">
                <label class="form-label" for="mobile">{{ __('basic.Phone') }}</label>
                <div class="row">
                    <div class="col-8">
                        <input class="form-control" id='mobile' name='mobile' type="text" value="" placeholder="{{ __('basic.PleaseInputMobile') }}">
                    </div>
                    <div class="col-4 p-0">
                        <button class="btn btn-outline-primary w-100 px-1" id="send_sms" type="button">{{ __('basic.Verify') }}</button>
                    </div>
                </div>
            </div>

            {{-- 驗證碼 --}}
            <div class="col mb-3">
                <input class="form-control" id="verify_code" name='verify_code' type="text" placeholder="{{ __('basic.IuputVerifyCode') }}">
            </div>

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

        </form>

        <form class="row row-cols-1 align-items-center d-none form py-6" id='reset_pw_fm' action="" method="POST">

            <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 pt-6">
                <button class="submit_btn btn btn-outline-primary w-100" id="btn_reset_pw" type="button">{{ __('robot.Submit') }}</button>
            </div>

        </form>
    </div>
@endsection