@extends('frontend::layouts.master')
@section('title')

@section('style')
<style>
    button:disabled {
        pointer-events: none;
        opacity: 0.4;
    }
</style>
@endsection

@section('content')
    <main>
        <div class="full-y-starter">
            <div class="container">
                <div class="info-cont">
                    <div class="portal-switcher">
                        <h2 class="title-text uppercase unactives">@lang('frontend.login')
                            <a href="{{ mwz_route('login', ['old='.$pageInit['get_route']]) }}"></a>
                        </h2>
                        <h2 class="title-text uppercase">@lang('frontend.register')</h2>
                    </div>
                    <div class="row mt-4 justify-center">
                        <div class="col-12 col-sm-8 col-lg-8">
                            <form class="form-wrapper px-4" id="frm_register" onsubmit="saveRegister(); return false;" action="javascript:void(0)">
                                @csrf
                                <div class="text-center p-6">
                                    <p>
                                        @lang('frontend.frnd_78')
                                    </p>
                                </div>
                                <div class="form-space">
                                    <div class="col-12 show-error" style="display: none">
                                        <div class="alert alert-danger msg-error" role="alert"></div>
                                    </div>
                                    <div class="col-12 show-success" style="display: none">
                                        <div class="alert alert-success msg-success" role="alert"></div>
                                    </div>
                                    <div class="col-12">
                                        <label for="firstname">@lang('frontend.frnd_13')</label>
                                        <input class="form-style" type="text" id="firstname" name="firstname" placeholder="@lang('frontend.frnd_19')" />
                                    </div>
                                    <div class="col-12">
                                        <label for="lastname">@lang('frontend.frnd_14')</label>
                                        <input class="form-style" type="text" id="lastname" name="lastname" placeholder="@lang('frontend.frnd_20')" />
                                    </div>
                                    <div class="col-12">
                                        <label for="email">@lang('frontend.register_email')</label>
                                        <input class="form-style" type="text" id="email" name="email" placeholder="@lang('frontend.input_email')" />
                                    </div>
                                    <div class="col-12">
                                        <label for="phone">@lang('frontend.register_mobile')</label>
                                        <div class="flex flex-wrap">
                                            <input class="form-style" style="width:60px!important" type="text" id="Phone1" name="Phone1" value="+66" placeholder="+66" onkeypress="InputValidateString3()" maxlength="3">
                                            <input class="form-style" style="width:calc(100% - 60px)" type="text" id="phone" name="phone" placeholder="@lang('frontend.input_mobile')" onkeypress="InputValidateString2()" maxlength="10">
                                        </div>
                                    </div>
                                    <div class="col-12 relative">
                                        <label for="password">@lang('frontend.password_login')</label>
                                        <input class="form-style" type="password" id="password" name="password" placeholder="@lang('frontend.input_password')" maxlength="240">
                                        <div class="toggle-password" onclick="togglePassword(this)">
                                            <div  ><i id="check-eye-open" class="slash fa fa-eye"></i></div>
                                        </div>
                                    </div>
                                    <div class="col-12 relative">
                                        <label for="repassword">@lang('frontend.register_again')</label>
                                        <input class="form-style" type="password" id="repassword" name="repassword" placeholder="@lang('frontend.input_repassword')" maxlength="240">
                                        <div class="toggle-password" onclick="togglePassword(this)">
                                            <div ><i id="check-eye-open" class="slash fa fa-eye"></i></div>
                                        </div>
                                    </div>
                                    <div class="col-12 relative">
                                        <label for="Gender">@lang('frontend.frnd_15')</label>
                                        <div class="color-chooser morp-to-gender">
                                            <div class="color-blk">
                                                <input id="color-0undefined" type="radio" name="gender" value="1" />
                                                <label class="bg-gray-light" for="color-0undefined">@lang('frontend.frnd_16')</label>
                                            </div>
                                            <div class="color-blk">
                                                <input id="color-1undefined" type="radio" name="gender" value="2" />
                                                <label class="bg-gray-light" for="color-1undefined">@lang('frontend.frnd_17')</label>
                                            </div>
                                            <div class="color-blk">
                                                <input id="color-2undefined" type="radio" name="gender" checked="checked" value="3" />
                                                <label class="bg-gray-light" for="color-2undefined">@lang('frontend.frnd_18')</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 py-6 flex flex-row items-start">
                                        <input type="checkbox" class="mr-2 mt-1" id="accept" name="accept" value="accept">
                                        <label class="text-lg" for="accept" of="policy">@lang('frontend.frnd_79')
                                            <a class="nowrap" href="{{ mwz_route('frontend.policy') }}">
                                                <u>@lang('frontend.privacy_policy')</u></a>
                                        </label>
                                    </div>
                                    <div class="col-12">
                                        <div class="g-recaptcha" data-callback="makeaction" data-expired-callback="expCallback" data-sitekey="6LcFg80mAAAAAAK2ioPg6a1hNyBo6XTTgXQ1gonM"></div>
                                    </div>
                                    <div class="col-12 py-6">
                                        <button type="submit" id="btn_submit" class="account-btn butn-submit add2bag-btn uppercase px-5 py-3 " disabled>@lang('frontend.register')</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')
    <script async src='https://www.google.com/recaptcha/api.js?hl={{ $lang }}'></script>
    <script src="{{ URL::asset('assets/plugins/validator/js/jquery.validate.min.js') }}"></script>
    <script type="text/javascript">
        function makeaction() {
            // let accept = $('#accept').prop('checked')
            // if (accept) {
                // $('#btn_submit').removeClass('disable-cls')
                document.getElementById("btn_submit").disabled = false;
            // }
        }

        function expCallback() {
            // $('#btn_submit').addClass('disable-cls')
            document.getElementById("btn_submit").disabled = true;
        }

        saveRegister = function() {
            let frm_data = new FormData($('#frm_register')[0]);
            let url_webpage = $('#url_webpage').val();
            btnLoading(2, "{{ __('frontend.register') }}", '#btn_submit')

            $.ajax({
                url: url_webpage + locale_lang() + "save_register",
                type: "POST",
                contentType: false,
                data: frm_data,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function(xhr) {
                    let rules = {
                        firstname: 'required',
                        lastname: 'required',
                        email: {
                            required: true,
                            email: true
                        },
                        phone: {
                            required: true,
                            minlength: 10
                        },
                        password: {
                            required: true,
                            minlength: 8
                        },
                        repassword: {
                            required: true,
                            minlength: 8
                        }
                    }

                    let messages = {
                        firstname: "{{ __('frontend.frnd_19') }}",
                        lastname: "{{ __('frontend.frnd_20') }}",
                        email: {
                            required: "{{ __('frontend.input_email') }}",
                            email: "{{ __('frontend.email_not_correct') }}"
                        },
                        phone: {
                            required: "{{ __('frontend.input_mobile') }}",
                            minlength: "{{ __('frontend.frnd_80') }}!"
                        },
                        password: {
                            required: "{{ __('frontend.input_password') }}!",
                            minlength: "{{ __('frontend.input_password8') }}"
                        },
                        repassword: {
                            required: "{{ __('frontend.input_repassword') }}",
                            minlength: "{{ __('frontend.input_password8') }}"
                        }
                    }

                    $('.show-error').css('display', 'none')
                    $('.show-success').css('display', 'none')
                    mwz_frm_validate($("#frm_register"), rules, messages)
                    if (!$("#frm_register").valid()) {
                        btnLoading(1, "{{ __('frontend.register') }}", '#btn_submit')
                    }
                    return $("#frm_register").valid();
                },
                success: function(resp) {
                    if (resp.success) {
                        $('#btn_submit').addClass('disable-cls')
                        $('.show-error').css('display', 'none')
                        $('.show-success').css('display', 'block')
                        $('.msg-success').html(resp.msg)

                        grecaptcha.reset();
                        // $('#accept').prop('checked', false)
                        $(':input', '#frm_register')
                            .not(':button, :submit, :reset, :hidden')
                            .val('')
                        $("html, body").animate({
                            scrollTop: 0
                        }, 0);
                    } else {
                        $('.show-error').css('display', 'block')
                        $('.msg-error').html(resp.msg)
                        if (resp.code == 501) {
                            $('#email').focus()
                        }
                        if (resp.focus) {
                            $('#' + resp.focus).focus()
                        }
                        $('.show-error').animate({
                            scrollTop: 10
                        }, 10);
                    }
                    btnLoading(1, "{{ __('frontend.register') }}", '#btn_submit')
                },
            });
        }
    </script>
@endsection