@extends('base')

@section('title', __('Authorization'))

@section('content')
    <div class="ui vertical stripe quote segment" id="login-register-container">
        <div class="ui equal width stackable internally grid">
            <div class="center aligned row">
                <div class="seven wide column" id="login-column">
                    <h3>{{__('Registered Customers')}}</h3>

                    <form class="ui form" id="login-form" action="@if(LaravelLocalization::setLocale() == 'en')/{{LaravelLocalization::setLocale()}}@endif/login" method="POST" onsubmit="return loginValidate()">
                        {{ csrf_field() }}
                        {{--<input type="hidden" name="loginType" value="">--}}
                        {{--<div class="field" id="animatedPhone">
                            <div class="field telephoneNumber" id="phoneErrorBox">
                                <div class="ui fluid search selection dropdown telephoneNumber" id="drop_login">
                                    <input type="hidden" name="country-code" id="country_login" value="44">
                                    <i class="chevron down icon"></i>
                                    <div class="default text"></div>
                                    <div class="menu">
                                        @include('countryCode')
                                    </div>
                                </div>
                                <input id="phone" name="phone" placeholder="{{__('Phone Number')}}" type="text" onfocusout="verifyLoginPhone()">
                            </div>
                        </div>--}}
                        <input type="hidden" name="user_arr" id="user_arr">
                        <input type="hidden" name="username" id="username">
                        <div class="field relativeContainer" id="animatedEmail">
                            <div class="field">
                                <input id="email" name="loginName" placeholder="{{__('Phone Number')}}/{{__('E-mail address')}}" type="text">
                                <img src="{{config('locations.systemImage.asset').'error.png'}}" class="validate-image err">
                                <img src="{{config('locations.systemImage.asset').'correct.png'}}" class="validate-image corr">
                            </div>
                        </div>

                        {{--<a class="toggleBtn phone">{{__('Use phone number to sign in')}}</a>
                        <a class="toggleBtn email visible">{{__('Use email to sign in')}}</a>--}}

                        <p class="errorMsg phonEmail">{{__('Incorrect phone number / email')}}</p>

                        <div class="field" id="loginPasswdContainer">
                            {{--<label>{{__('Password') }</label>--}}
                            <div class="field relativeContainer" id="loginPasswd">
                                <input id="password" placeholder="{{__('Password')}}" name="password" type="password"
                                       onfocusout="verifyLoginPassword()">
                                <img src="{{config('locations.systemImage.asset').'error.png'}}" class="validate-image err">
                                <img src="{{config('locations.systemImage.asset').'correct.png'}}" class="validate-image corr">
                            </div>
                        </div>

                        <p class="errorMsg">{{__('Incorrect password')}}</p>
                        <div class="ui basic segment right aligned">
                            <a href="#" id="reset-passwd" onclick="show_forgotten_password_modal()">{{__('Forgotten Password')}}</a>
                        </div>

                        <div class="ui basic segment left aligned remember">
                            <div class="ui checkbox">
                                <input type="checkbox" name="rememberUser" id="rememberUser">
                                <label>{{__('Remember username')}}</label>
                            </div>
                        </div>

                        @if (isset($login_error))
                            @if ($errorAttempts == 'trial1')
                                <h3 class="ui header loginError">{{__('Login and password do not match')}}</h3>
                            @elseif($errorAttempts == 'trial2')
                                <h3 class="ui header loginError">{{__('Incorrect password lockout warning')}}</h3>
                            @elseif($errorAttempts == 'block')
                                <h3 class="ui header loginError">Unknown Error! Please contact customer service.</h3>
                            @else
                                <h3 class="ui header loginError">{{__('More than 5 failed login attempts made, please try again in 15 minutes')}}</h3>
                            @endif
                        @endif

                        <button id="sign_in_btn" class="ui right floated fluid button" type="submit" onclick="store_data()">
                            {{__('Sign in')}}
                        </button>
                    </form>

                    <script>
                        function loginValidate() {
                            /*if (!$('#animatedPhone').hasClass('invisible')) {
                                $('input[name="loginType"]').val("full");
                                verifyLoginPhone();
                            } else {
                                $('input[name="loginType"]').val("");
                                verifyLoginEmail()
                            }*/

                            //verifyLoginPassword();

                            return $('#login-form .errorMsg.visible').length <= 0;
                        }
                    </script>
                </div>
                <div class="seven wide column" id="register-column">
                    <h3>{{__('New to UOFFER GLOBAL?')}}</h3>
                    <div class="ui button" id="show_registration_form_btn" onclick="show_registration_form()">
                        {{__('Create an account')}}
                    </div>
                    <div class="childrens-template">
                        <div class="field relativeContainer childrens-info">
                            <div class="ui fluid search selection dropdown telephoneNumber childrens-dropdown">
                                <input type="hidden" class="phone-code" value="44">
                                <i class="chevron down icon"></i>
                                <div class="default text">+44</div>
                                <div class="menu">
                                    @include('countryCode')
                                </div>
                            </div>
                            <input class="phone-number" placeholder="{{__('Student phone number')}}" type="text" autocomplete="off" required>
                            <div class="option-buttons">
                                <img src="{{config('locations.systemImage.asset').'delete.png'}}" class="option-delete">
                                <img src="{{config('locations.systemImage.asset').'delete-disabled.png'}}" class="option-delete-disabled">
                            </div>
                            <img src="{{config('locations.systemImage.asset').'error.png'}}" class="validate-image err">
                            <img src="{{config('locations.systemImage.asset').'correct.png'}}" class="validate-image corr">
                        </div>
                    </div>

                    <div id="registration_form" class="initially-hidden">
                        <form class="ui form">
                            <div class="field relativeContainer">
                                <label class="register-label">{{__('Account status')}}</label>
                                <div class="field relativeContainer identityContainer">
                                    <div class="field">
                                      <div class="ui radio checkbox ">
                                        <input type="radio" name="user_type" value="1" checked="checked">
                                        <label>{{__('Student')}}</label>
                                      </div>
                                    </div>
                                    <div class="field">
                                      <div class="ui radio checkbox">
                                        <input type="radio" name="user_type" value="2" >
                                        <label>{{__('Parents')}}</label>
                                      </div>
                                    </div>
                                </div>
                            </div>

                            <div class="field relativeContainer children-account">
                                <label class="register-label">{{__('Bind student')}}</label>
                                <div class="field relativeContainer childrens-info">
                                    <div class="ui fluid search selection dropdown telephoneNumber childrens-dropdown">
                                        <input type="hidden" class="phone-code" value="44">
                                        <i class="chevron down icon"></i>
                                        <div class="default text">+44</div>
                                        <div class="menu">
                                            @include('countryCode')
                                        </div>
                                    </div>
                                    <input class="phone-number" placeholder="{{__('Student phone number')}}" type="text"
                                           onfocusout="verifyRegPhone()" autocomplete="off" required>
                                    <div class="option-buttons">
                                        <img src="{{config('locations.systemImage.asset').'delete.png'}}" class="option-delete">
                                        <img src="{{config('locations.systemImage.asset').'delete-disabled.png'}}" class="option-delete-disabled">
                                    </div>
                                    <img src="{{config('locations.systemImage.asset').'error.png'}}" class="validate-image err">
                                    <img src="{{config('locations.systemImage.asset').'correct.png'}}" class="validate-image corr">
                                </div>
                                <div class="ui floated fluid black button add-student-button">
                                    <img src="{{config('locations.systemImage.asset').'add-student.png'}}">
                                </div>
                            </div>
                            <span class="errorMsg register regPhoneContainer">{{__('Incorrect phone number format')}}</span>

                            <div class="field relativeContainer">
                                <label class="register-label">{{__('Please enter valid e-mail address to receive application notifications')}}</label>
                                <div class="field relativeContainer">
                                    <input
                                        id="regemail"
                                        name="regemail"
                                        placeholder="{{__('E-mail address')}}"
                                        onfocusout="verifyRegEmail()"
                                        type="email"
                                        autocomplete="off"
                                        required
                                    >
                                    <img src="{{config('locations.systemImage.asset').'error.png'}}" class="validate-image err">
                                    <img src="{{config('locations.systemImage.asset').'correct.png'}}" class="validate-image corr">
                                </div>
                            </div>
                            <span class="errorMsg register regEmailContainer">{{__('Already registered')}}</span>

                            <div class="field regPhoneContainer relativeContainer">
                                <div class="field telephoneNumber relativeContainer" id="drop_re">
                                    <div class="ui fluid search selection dropdown telephoneNumber" id="drop_registration">
                                        <input type="hidden" name="country-code" id="country_re" value="44">
                                        <i class="chevron down icon"></i>
                                        <div class="default text">+44</div>
                                        <div class="menu">
                                            @include('countryCode')
                                        </div>
                                    </div>
                                    <input id="phone_re" name="phone" placeholder="{{__('Phone Number')}}" type="text" autocomplete="off" required>
                                    <img src="{{config('locations.systemImage.asset').'error.png'}}" class="validate-image err">
                                    <img src="{{config('locations.systemImage.asset').'correct.png'}}" class="validate-image corr">
                                </div>
                            </div>
                            <span class="errorMsg register regPhoneContainer">{{__('Incorrect phone number format')}}</span>

                            {{--<div class="fields equal width verCodeContainer relativeContainer">--}}
                                {{--<div class="field ver-code-input">--}}
                                    {{--<input placeholder="{{__('code')}}" type="text" id="verCode" onfocusout="verifyRegCode()" required>--}}
                                    {{--<input placeholder="{{__('code')}}" type="text" id="verCode" required>--}}
                                {{--</div>--}}
                                {{--<div class="field ver-code-btn relative container">--}}
                                    {{--<div class="ui black button" id="send-code" onclick="sendVerificationMsg()">--}}
                                        {{--{{__('Send Code')}}--}}
                                    {{--</div>--}}
                                    {{--<img src="{{config('locations.systemImage.asset').'error.png'}}" class="validate-image err">--}}
                                    {{--<img src="{{config('locations.systemImage.asset').'correct.png'}}" class="validate-image corr">--}}
                                {{--</div>--}}
                            {{--</div>--}}
                            <span class="errorMsg register verCodeContainer">{{__('Incorrect code')}}</span>

                            <div class="field regPasswdContainer relativeContainer">
                                <label class="register-label">{{__('Registration password requirements description')}}</label>
                                <div class="field relativeContainer">
                                    <input
                                        id="password_reg"
                                        name="password"
                                        placeholder="{{__('Password')}}"
                                        type="password"
                                        onfocusout="verifyRegPass(this, 'regPasswdContainer')"
                                        required
                                        autocomplete="new-password"
                                    >
                                    <img src="{{config('locations.systemImage.asset').'error.png'}}" class="validate-image err">
                                    <img src="{{config('locations.systemImage.asset').'correct.png'}}" class="validate-image corr">
                                </div>
                            </div>
                            <span class="errorMsg register regPasswdContainer">{{__('Use at least 8-16 characters and a number')}}</span>

                            <div class="field regPasswdRepeatContainer relativeContainer">
                                <div class="field relativeContainer">
                                    <input id="password_confirm"
                                        name="password"
                                        placeholder="{{__('Confirm Password')}}"
                                        onfocusout="verifyRegConfirmPass(this, $('#password_reg'), 'regPasswdRepeatContainer')"
                                        type="password"
                                        required
                                        autocomplete="new-password"
                                    >
                                    <img src="{{config('locations.systemImage.asset').'error.png'}}" class="validate-image err">
                                    <img src="{{config('locations.systemImage.asset').'correct.png'}}" class="validate-image corr">
                                </div>
                            </div>
                            <span class="errorMsg register regPasswdRepeatContainer">{{__('Password do not match')}}</span>

                            <div class="field registeredNameContainer relativeContainer">
                                <label class="register-label">{{__('user-name-input')}}</label>
                                <div class="field relativeContainer">
                                    <input id="registered_name"
                                           name="registeredName"
                                           placeholder="{{__('User Name')}}"
                                           onfocusout="verifyRegName(this, 'registeredNameContainer')"
                                           type="text"
                                           required
                                           autocomplete="name">
                                    <img src="{{config('locations.systemImage.asset').'error.png'}}" class="validate-image err">
                                    <img src="{{config('locations.systemImage.asset').'correct.png'}}" class="validate-image corr">
                                </div>
                            </div>

                            <span class="errorMsg register registeredNameContainer">{{__('Password do not match')}}</span>

                            {{-- ref code --}}
                            <div class="field refCode relativeContainer">
                                <label class="register-label">{{__('Registration adviser description')}}</label>
                                <select class="ui search dropdown" name="refCode" id="refCode" autocomplete="off">
                                    <option value="placeholder">{{__('Please select your application adviser')}}</option>
                                    @foreach($refCodes as $value)
                                        <option value="{{$value}}">{{$value}}</option>
                                    @endforeach
                                </select>
                            </div>
                            {{-- End ref code --}}

                            <div class="field">
                                <div class="ui checkbox" id="terms_agreed" >
                                    <input onchange="allow_registration(this)" tabindex="0" class="hidden" type="checkbox">
                                    <label class="register-label check">{{__('Accept our')}}
                                        <a href="{{route('terms')}}" target="_blank">
                                            {{__('Terms and Conditions')}}
                                        </a>
                                        {{__('and')}}
                                        <a href="{{route('privacy')}}" target="_blank">
                                            {{__('Privacy & Cookie Policy')}}
                                        </a>
                                    </label>
                                </div>
                            </div>
                            <div
                                class="ui right floated fluid black button disabled"
                                id="create_account"
                                onclick="checkVerificationMsg()"
                            >
                                {{__('Create an account')}}
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


    {{-- Forgoten Password modal --}}
    @include('common.modals.contents.tabs_modal', [
        'id' => 'forgotten_password_modal',
        'tabs' => [
            [
                'tabHeader' => __('Email verification'),
                'tabView' => 'password_reset_email'
            ],
            [
                'tabHeader' => __('Phone verification'),
                'tabView' => 'password_reset_phone'
            ]
        ]
    ])
    {{-- Forgoten Password Modal --}}

    {{-- Change Password modal --}}
    @include('common.modals.contents.input_modal', [
        'id' => 'change_password_modal',
        'header'=> __('Change your password'),
        'inputs' => [
            [
                'input' => [
                    'type' => 'password',
                    'name' => 'new_password',
                    'id' => 'newPassword',
                    'placeholder' => __('New Password'),
                    'onfocusout' => 'verifyRegPass(this, \'passwordChangeContainer\')',
                    'autocomplete' => 'new-password'
                ],
                'error' => [
                    'class' => 'errorMsg passwordChangeContainer'
                ]
            ],
            [
                'input' => [
                    'type' => 'password',
                    'name' => 'new_password_again',
                    'id' => 'newPasswordAgain',
                    'placeholder' => __('Confirm Password'),
                    'onfocusout' => 'verifyRegConfirmPass(this, $(\'#newPassword\'), \'passwordChangeRepeatContainer\');',
                    'autocomplete' => 'new-password'
                ],
                'error' => [
                    'class' => 'errorMsg passwordChangeRepeatContainer'
                ]
            ],
            [
                'input' => [
                    'type' => 'hidden',
                    'name' => 'hiddenPhone',
                    'id' => 'hiddenPhone'
                ]
            ]
        ],
        'callbacks' => [
            [
                'callback' => '$(this).parents(\'.custom-modal\').modal(\'hide\');',
                'buttonStyle' => 'dark',
                'buttonText' => __('Cancel')
            ],
            [
                'callback' => 'resetPassword()',
                'buttonStyle' => 'light',
                'buttonText' => __('Confirm')
            ]
        ]
    ])
    {{-- Change Password Modal --}}

    {{-- Success modal --}}
    @include('common.modals.contents.success_modal', [
        'id' => 'success_modal',
        'text' => __('Password change successful')
    ])
    {{-- Success Modal --}}

    {{-- password link sent modal --}}
    <div class="ui tiny modal" id="password_sent_modal">
        <div class="content">
            <img class="image" src="{{config('locations.systemImage.asset').'yellow_success.png'}}">
            {{__('Password link sent')}}
        </div>
        <div class="actions">
            <div class="ui black fluid deny button">
                {{__('Ok')}}
            </div>
        </div>
    </div>
    {{-- Success Modal --}}

    {{-- password link failed to send modal --}}
    <div class="ui tiny modal" id="password_send_fail_modal">
        <div class="content">
            {{__('Email was not found')}}
        </div>
        <div class="actions">
            <div class="ui black fluid deny button" onclick="show_forgotten_password_modal()">
                {{__('Ok')}}
            </div>
        </div>
    </div>

    {{-- Code send modal --}}
    <div class="ui tiny modal" id="code_send_modal">
        <div class="content">
            <span id="countdown">{{__('Code sent')}}{{"..."}}</span>
        </div>
        <div class="actions">
            <div class="ui yellow fluid approve button">
                {{__('Ok')}}
            </div>
        </div>
    </div>
    {{-- Code send Modal --}}

    <div class="ui tiny modal" id="code_send_modal_failed">
        <div class="content">
            <span id="countdown">{{__('Failed to send code, please check your number and try again')}}{{"..."}}</span>
        </div>
        <div class="actions">
            <div class="ui yellow fluid approve button">
                {{__('Ok')}}
            </div>
        </div>
    </div>
    {{--Failed to Send Code Modal --}}

    {{--Sales QR code modal--}}
    @include('common.modals.contents.qr_modal', [
        'id' => 'salesCode',
        'header' => __('Signed up successfully_1'),
        'subHeader' => __('Signed up successfully_2'),
        'image' => '',
        'subText' => __('Contact our experts'),
        'closeButtonAction' => 'location.href=\''.route('home').'\''
    ])
    {{--Sales QR code modal--}}

    @include('common.modals.contents.notification_modal', [
        'id' => 'registrationConfirmationModal',
        'text' => __('user-account-registration-note'),
        'callbacks' => [
            [
                'callback'=>'createAccount()',
                'buttonStyle'=>'light',
                'buttonText'=>__('Confirm')
            ],
            [
                'callback'=>'$(this).parents(\'.custom-modal\').modal(\'hide\');',
                'buttonStyle'=>'dark',
                'buttonText'=>__('Cancel')
            ]
        ]
    ])

    {{--Force Change Password--}}
    @if(isset($needResetPassword) && $needResetPassword)
        @include('common.modals.contents.input_modal', [
            'id' => 'force_change_password_modal',
            'header'=> __('Change your password'),
            'subHeader'=> __('This is your first login, please change your password.'),
            'inputs' => [
                [
                    'input' => [
                        'type' => 'password',
                        'name' => 'password',
                        'id' => 'newForcePassword',
                        'placeholder' => __('New Password'),
                        'onfocusout' => 'verifyRegPass(this, \'passwordForceChangeContainer\')'
                    ],
                    'error' => [
                        'class' => 'errorMsg passwordForceChangeContainer'
                    ]
                ],
                [
                    'input' => [
                        'type' => 'password',
                        'name' => 'password_again',
                        'id' => 'newForcePasswordAgain',
                        'placeholder' => __('Confirm Password'),
                        'onfocusout' => 'verifyRegConfirmPass(this, $(\'#newForcePassword\'), \'passwordForceChangeRepeatContainer\');'
                    ],
                    'error' => [
                        'class' => 'errorMsg passwordForceChangeRepeatContainer'
                    ]
                ],
                [
                    'input' => [
                        'type' => 'hidden',
                        'name' => 'hiddenPhone',
                        'id' => 'hiddenPhone'
                    ]
                ]
            ],
            'callbacks' => [
                [
                    'callback' => '$(this).parents(\'.custom-modal\').modal(\'hide\');',
                    'buttonStyle' => 'dark',
                    'buttonText' => __('Cancel')
                ],
                [
                    'callback' => 'forceResetPassword()',
                    'buttonStyle' => 'light',
                    'buttonText' => __('Confirm')
                ]
            ]
        ])

        <script>
            $(function(){
                $("#force_change_password_modal").modal('show');
            });

            function forceResetPassword() {
                var newPassword = $('#newForcePassword');
                var newPasswordAgain = $('#newForcePasswordAgain');
                verifyRegPass(newPassword, 'passwordForceChangeContainer', true);
                verifyRegConfirmPass(newPasswordAgain, newPassword, 'passwordForceChangeRepeatContainer');

                if ($('#force_change_password_modal .errorMsg.visible').length === 0) {
                    $.ajax({
                        type: 'POST',
                        url: '{{route('forceChangePassword')}}',
                        data: {
                            '_token': '{{ csrf_token() }}',
                            'password': newPassword.val(),
                            'password_again': newPasswordAgain.val(),
                        },
                        dataType: 'json',
                        success: function (data) {
                            if(data.code==200){
                                show_success_modal();
                            }else{
                                $('.passwordForceChangeRepeatContainer').html(data.msg).addClass('visible');
                            }
                        }
                    });
                }
            }

        </script>
    @endif
    {{--Force Change Password--}}
    <script src="{{url('/').mix('js/min/crypto-js.js')}}"></script>
    <script>
        var register_btn;

        $(function () {
            $('.refCode .dropdown.icon').removeClass('dropdown').addClass('chevron down');

            register_btn = $('#create_account');
            // $('.refCode .dropdown').dropdown({
            //     placeholder:'placeholder'
            // });
        });

        function allow_registration(element) {
            if ($(element).prop('checked')) {
                register_btn.removeClass('disabled');
            } else {
                register_btn.addClass('disabled');
            }
        }
    </script>

    <script>
        {{--TODO: "key" has to be replaced with secure value retrieved from database or stored as a cookie/another local storage item--}}

        $(function () {
            localStorage.removeItem('data-category');
            $(".refCode").show()
            $(".children-account").hide()

            $(".add-student-button").on("click",function(){
                let _len = $(".children-account").find(".childrens-info").length
                let _template = $(".childrens-template").find(".childrens-info").clone();
                _template.find(".option-delete").css({"display":"block"})
                _template.find(".option-delete-disabled").hide()
                _template.find(".phone-number").attr("data-index",_len)
                $(this).before(_template)
                $('.childrens-dropdown').dropdown();
            })
            
            $("input[name='user_type']").on("change",function(){
                let _val = ($(this).val());
                if(_val == 1) {
                    $(".refCode").show()
                    $(".children-account").hide()
                    //$("#registered_name").attr("readonly",false)
                }else {
                    $(".refCode").hide()
                    $(".children-account").show()
                    //$("#registered_name").attr("readonly",true)
                }
            })
            $("body").on("focus",".phone-code,.phone-number",function(){
                let _parent = $(this).parents(".childrens-info");
                if(_parent.next(".error-Msg") ) {
                    _parent.next(".error-Msg").remove()
                }
            })
            $("body").on("blur",".phone-code,.phone-number",function(){
                let _parent = $(this).parents(".childrens-info");
                let _userType = $("input[name='user_type']:checked").val()==1?2:1;
                let _code = _parent.find(".phone-code").val(),
                    _phone = _parent.find(".phone-number").val();
                
                if(_userType == 1 && (_code !== "" && _phone !== "")) {
                    $.ajax({
                        type: 'POST',
                        url: '{{route('getUserByPhone')}}',
                        data: {
                            '_token': '{{ csrf_token() }}',
                            'phoneCode':_code ,
                            'phone': _phone,
                            'user_type': _userType
                        },
                        success: function (data) {
                            if(data.id == null){
                                let str = '<span class="error-Msg register visible">{{__('The account does not exist. Please try again after registering the parent account first.')}}</span>'
                                _parent.after(str)
                            }else {
                                let user_arr = $("input[name='user_arr']").val().split(",");
                                if(user_arr.indexOf(data.id) !== -1){
                                    let str = '<span class="error-Msg register visible">{{__('Repeat binding')}}</span>'
                                    _parent.after(str)
                                    return false
                                }

                                let _len = $(".children-account").find(".childrens-info").length;
                                let str = '<span class="error-Msg register visible isExist">'+data.userName+'</span>'
                                _parent.after(str)
                                _parent.find(".phone-number").attr("data-name",data.userName)
                                .attr("data-index",_len)
                                handlerChangeUserName()
                                user_arr.push(data.id)
                                $("input[name='user_arr']").val(user_arr.toString())
                            }
                        }
                    });
                }
            })

            function handlerChangeUserName(){
                let str = ''
                let _deltes =  $(".children-account").find(".childrens-info")
                _deltes.each(function(){
                    let _index = $(this).find(".phone-number").attr("data-index");
                    let _name = $(this).find(".phone-number").attr("data-name");
                    if(_deltes.length <= 1){
                        str += _name
                    }else{
                       if(_index == (_deltes.length)) {
                        str += _name
                       }else{
                        str += _name+','
                       }

                    }
                })
                $("#username").val(str+'的家长')
            }

            $("body").on("click",".option-delete",function(){
                $(this).parents(".childrens-info").next(".error-Msg").remove()
                $(this).parents(".childrens-info").remove()
                setTimeout(()=>{
                    handlerChangeUserName()
                },300)
                let _deltes =  $(".children-account").find(".childrens-info")
                _deltes.each(function(){
                    let i = $(this).index()
                    $(this).find(".phone-number").attr("data-index",i)
                })
            })

            $('.childrens-dropdown').dropdown('set text', '<i class="gb flag"></i>44');
            $('#drop_registration').dropdown('set text', '<i class="gb flag"></i>44');
            if (localStorage.getItem('country_code') !== '' && localStorage.getItem('country_code') !== null) {
                $('#drop_login').dropdown('set selected', decrypt(localStorage.getItem('country_code'), "key"));
            }

            if (localStorage.getItem('phone') !== '' && localStorage.getItem('phone') !== null) {
                $('#phone').val(decrypt(localStorage.getItem('phone'), "key"));
            }

            if (localStorage.getItem('email') !== '' && localStorage.getItem('email') !== null) {
                $('#email').val(decrypt(localStorage.getItem('email'), "key"));
            }

            if (localStorage.getItem('store_user') !== 'false') {
                $('#rememberUser').parent().checkbox('check');
            }

            if (localStorage.getItem('recent') === 'email') {
                showEmail();
            }
        });

        function store_data() {
            if ($('#rememberUser').prop('checked') === true) {
                localStorage.setItem('country_code', encrypt($('#country_login').val(), "key"));
                localStorage.setItem('phone', encrypt($('#phone').val(), "key"));
                localStorage.setItem('email', encrypt($('#email').val(), "key"));
                localStorage.setItem('store_user', 'true');
            } else {
                localStorage.setItem('country_code', '');
                localStorage.setItem('phone', '');
                localStorage.setItem('email', '');
                localStorage.setItem('store_user', 'false');
            }

            if($('#animatedPhone').hasClass('invisible') && $('#animatedEmail').hasClass('visible')){
                localStorage.setItem('recent', 'email');
            } else {
                localStorage.setItem('recent', 'phone');
            }
        }

        function encrypt(message, key){
            return (CryptoJS.AES.encrypt(message, key)).toString();
        }

        function decrypt(message, key){
            return (CryptoJS.AES.decrypt(message, key)).toString(CryptoJS.enc.Utf8)
        }
    </script>

    <script>
        var code = '';
        let regEmailInput;

        $('.ui.checkbox').checkbox();

        $(function () {
            regEmailInput = $('#regemail');

            regEmailInput.on('keypress', function (event) {
                if (event.keyCode === 32) {
                    return false;
                }
            });

            $('.chevron.down.icon').click(function () {
                $(this).parent('.dropdown').dropdown('toggle');
            });

            $('#login-form').click(function () {
                if ($('#registration_form').hasClass('visible')) {
                    hide_registration_form();
                }
            });
        });


        function show_registration_form() {
            form = $('#registration_form');
            form.transition('slide down');

            $('#show_registration_form_btn').css('display', 'none');
        }

        function hide_registration_form() {
            $('#registration_form').transition('slide down');
            $('#register-column .err, #register-column .corr, #register-column .errorMsg').removeClass('visible');
            $('#show_registration_form_btn').css('display', 'flex');
            $('#registration_form *').removeClass('errorBorder');
            $('#register-column .err, #register-column .corr').removeClass('visible');
        }

        function show_forgotten_password_modal() {
            $('#forgotten_password_modal').modal('show');
        }

        $('.coupled.modal').modal({
            allowMultiple: false
        });

        function show_change_password_modal() {
            $('#change_password_modal').modal('show');
        }

        function show_success_modal() {
            $('#success_modal').modal('show');

            setTimeout(function () {
                location.href = '{{route('home')}}';
            }, 3000);
        }

        function show_passwordSent_modal() {
            $('#password_sent_modal').modal('show');
        }
        function show_passwordSent_fail_modal() {
            $('#password_send_fail_modal').modal('show');
        }

        function resetPassword() {
            var newPassword = $('#newPassword');
            var newPasswordAgain = $('#newPasswordAgain');

            verifyRegPass(newPassword, 'passwordChangeContainer');
            verifyRegConfirmPass(newPasswordAgain, newPassword, 'passwordChangeRepeatContainer');

            if ($('#change_password_modal .errorMsg.visible').length === 0) {
                $.ajax({
                    type: 'POST',
                    url: '{{route('changePassword')}}',
                    data: {
                        '_token': '{{ csrf_token() }}',
                        'hiddenPhone': $('#hiddenPhone').val(),
                        'password': newPassword.val(),
                        'password_again': newPasswordAgain.val(),
                        'areacode': $('#country_reset').val(),
                        'phonenumber': $('#phoneResetPassword').val(),
                        'phoneCode': $('#phoneCode').val()
                    },
                    success: function () {
                        //Here is jump by a link with a token from the user
                        // show_change_password_modal();
                        if (newPassword.val()=="" || newPasswordAgain.val()=="") {
                            $('.errorMsg').html('{{__('Password mustnt be empty')}}').addClass('visible');
                        } else {
                            show_success_modal();
                        }
                    }
                });
            }
        }

        function sendEmail(element) {
            element.html('{{__('Sending...')}}').addClass('disabled');

            $.ajax({
                type: 'POST',
                url: '{{route('sendEmail')}}',
                data: {
                    '_token': '{{ csrf_token() }}',
                    'email': $('#resetEmailName').val()
                },
                success: function (data) {
                    if (data === 'success') {
                        show_passwordSent_modal();
                    } else {
                        show_passwordSent_fail_modal();
                    }

                    element.html('{{__('Send verification link')}}').removeClass('disabled');
                }
            });
        }

        function phoneCodeCheck() {
            $("#errorSpan").text("").removeClass('viisble');
            $('#codeError2 ').removeClass('visible');
            var countryReset = $('#country_reset').val();
            var phoneResetPassword = $('#phoneResetPassword').val();

            $('#hiddenPhone').val((countryReset + '' + phoneResetPassword));

            $.ajax({
                type: 'POST',
                url: "{{route('phoneCodeCheck')}}",
                data: {
                    '_token': '{{ csrf_token() }}',
                    'areacode': countryReset,
                    'phonenumber': phoneResetPassword,
                    'phoneCode': $('#phoneCode').val()
                },
                success: function (data) {
                    if (data.infoCode == 200) {
                        show_change_password_modal();
                    } else {
                        $('#codeError2 ').addClass('visible');
                    }
                }
            });
        }

        function phoneResetPassword(element) {
            if (element.hasClass('disabled')) {
                return false;
            }

            $('#codeError2 ').removeClass('visible');
            var timer = null;
            var sendCodeBtn = element;
            sendCodeBtn.addClass('disabled');

            $.ajax({
                type: 'POST',
                url: '{{route('phoneResetPassword')}}',
                data: {
                    '_token': '{{ csrf_token() }}',
                    'areacode': $('#country_reset').val(),
                    'phonenumber': $('#phoneResetPassword').val()
                },
                success: function (data) {
                    if (data === 'phone not found') {
                        $("#errorSpan").text("{{__('Phone number does not exist')}}").addClass('visible');
                    } else {
                        $("#errorSpan").text("").removeClass('visible');
                        $('#codeCheckButton').removeClass('disabled');

                        var seconds = 60;

                        timer = setInterval(function () {
                            sendCodeBtn.html('{{__('Wait')}} (' + seconds + ')');

                            if (--seconds === 0) {
                                sendCodeBtn.removeClass('disabled').html('{{__('Send Code')}}');
                                clearInterval(timer);
                            }
                            console.log(seconds);
                        }, 1000);
                    }
                }
            });
        }

        function sendVerificationMsg() {
            var timer = null;

            $.ajax({
                type: 'POST',
                url: '{{route('phoneverify')}}',
                data: {
                    '_token': '{{ csrf_token() }}',
                    'phonenumber': $('#phone_re').val(),
                    'areacode': $('#country_re').val()
                },
                success: function (data) {
                    if(data != 'error') {
                       code = data;
                       var seconds = 60;
                       $('#code_send_modal').modal('show');
                       $('#send-code').addClass('disabled');
                       timer = setInterval(function () {

                           $('#send-code').html('Wait (' + seconds + ')');

                           if (--seconds == 0) {
                               $('#code_send_modal').modal('hide');
                               $('#send-code').removeClass('disabled').html('Send Code');
                               clearInterval(timer);
                           }
                       }, 1000);
                   } else{
                        $('#code_send_modal_failed').modal('show');
                    }
                }
            });
        }


        function checkVerificationMsg() {
            var registrationPasswordInput = $('#password_reg');
            var registrationNameInput = document.getElementById('registered_name');
            let user_arr = $("input[name='user_arr']").val();
            let _userType = $("input[name='user_type']:checked").val();

            verifyRegPhone(true);
            verifyRegEmail(true);
            verifyRegName(registrationNameInput, 'registeredNameContainer', true);
            verifyRegPass(registrationPasswordInput, 'regPasswdContainer', true);
            verifyRegConfirmPass($('#password_confirm'), registrationPasswordInput, 'regPasswdRepeatContainer', true);
            //verifyRegCode();
            $(".children-account").find(".childrens-info").find(".telephoneNumber").removeClass("errorBorder")
            if(_userType == 2){
                if(user_arr == ''){
                    $(".children-account").find(".childrens-info").find(".option-buttons").addClass("errorBorder")
                    $(".children-account").find(".childrens-info").find(".phone-number").addClass("errorBorder")
                    $(".children-account").find(".childrens-info").next(".error-Msg").remove()
                    let str = '<span class="error-Msg register visible">{{__('At least one account')}}</span>';
                    $(".children-account").find(".childrens-info").eq(0).after(str)
                    return false
                }
            }


            if ($('.errorMsg.register.visible').length === 0) {
                $.when(
                    verifyRegPhoneRemote(),
                    verifyRegEmailRemote(),
                    verifyRegNameRemote(registrationNameInput, 'registeredNameContainer')
                ).done(function () {
                    if ($('.errorMsg.register.visible').length === 0) {
                        $('#registrationConfirmationModal').modal('show');
                    }
                });
            }
        }

        function createAccount() {
            $('#create_account').addClass("disabled");
            $('#registrationConfirmationModal').modal('hide');
            let _userType = $("input[name='user_type']:checked").val();
            let params = {};
            if(_userType == 1){
                params = {
                    '_token': "{{ csrf_token() }}",
                    'areacode': $('#country_re').val(),
                    'phonenumber': $('#phone_re').val(),
                    'verCode': $('#verCode').val(),
                    'password_reg': $('#password_reg').val(),
                    'password_confirm': $('#password_confirm').val(),
                    'email': regEmailInput.val(),
                    'refCode': ($('#refCode').val() !== 'placeholder') ? $('#refCode').val() : '',
                    'registeredName': $('#registered_name').val(),
                    'user_type': _userType
                }
            }else{
                params = {
                    '_token': "{{ csrf_token() }}",
                    'areacode': $('#country_re').val(),
                    'phonenumber': $('#phone_re').val(),
                    'verCode': $('#verCode').val(),
                    'password_reg': $('#password_reg').val(),
                    'password_confirm': $('#password_confirm').val(),
                    'email': regEmailInput.val(),
                    'registeredName': $('#registered_name').val(),
                    'user_arr': $("#user_arr").val().substr(1),
                    'user_type': _userType,
                    'userName': $("#username").val()
                }
            }
            $.ajax({
                type: 'GET',
                url: "{{route('verCodeCheck')}}",
                data: params,
                success: function (data) {
                    if (data.infoCode == 200) {
                        resetForm();

                        if (data.path != ''){
                            // $('#salesCode .image').attr('src', '{{config('locations.staffQR.asset')}}' + data.path);
                            $('#salesCode').modal('show');

                            $('.dimmer').on('click', function () {
                                location.href = '{{route('home')}}';
                            });
                        } else {
                            location.href = '{{route('home')}}';
                        }
                    } else {
                        // 提示错误消息
                        $('#create_account').removeClass("disabled");
                    }
                }
            });
        }

        $('.toggleBtn').on('click', function(e){
           e.preventDefault();

           if($(this).hasClass('phone')){
               showPhone();
           } else {
                showEmail();
           }
        });

        function showEmail() {
            $('#animatedPhone').addClass('invisible');
            $('#animatedEmail').addClass('visible');
            $('.toggleBtn.phone, .toggleBtn.email').toggleClass('visible');
            clearErrorFormat();
        }

        function showPhone() {
            $('#animatedEmail').removeClass('visible');
            $('#animatedPhone').removeClass('invisible');
            $('.toggleBtn.phone, .toggleBtn.email').toggleClass('visible');
            clearErrorFormat();
        }

        function verifyRegPhone(save) {
            var number = $('#phone_re').val();
            var cc = $('#country_re').val();
            var regExpDigit = /^[0-9]+$/;

            $('.regPhoneContainer .err').removeClass('visible');
            $('.regPhoneContainer .corr').removeClass('visible');
            $('.register.regPhoneContainer').empty().removeClass('visible');
            $('.regPhoneContainer *').removeClass('errorBorder');

            if(!save && number == '') {
                return false;
            }

            if (number == '' || cc == '') {
                $('.regPhoneContainer .telephoneNumber.search, .regPhoneContainer #phone_re').addClass('errorBorder');
                $('.regPhoneContainer .err').addClass('visible');
                $('.register.regPhoneContainer').empty().append("{{__('Number is incomplete')}}").addClass('visible');
            } else if (!regExpDigit.test(number) || !regExpDigit.test(cc)) {
                $('.regPhoneContainer .telephoneNumber.search, .regPhoneContainer #phone_re').addClass('errorBorder');
                $('.regPhoneContainer .err').addClass('visible');
                $('.register.regPhoneContainer').empty().append("{{__('Number contains illegal characters')}}").addClass('visible');
            }
            // else if (number.length < 4 || number.length > 15) {
            //     $('.regPhoneContainer .telephoneNumber.search, .regPhoneContainer #phone_re').addClass('errorBorder');
            //     $('.regPhoneContainer .err').addClass('visible');
            //     $('.register.regPhoneContainer').empty().append("{{__('Numbers length should be between 4 and 15 digits')}}").addClass('visible');
            // }
            else {
                verifyRegPhoneRemote();
            }
        }

        function verifyRegPhoneRemote() {
            return $.ajax({
                type: 'GET',
                url: '{{route('validatePhoneNumber')}}',
                data: {
                    '_token': '{{ csrf_token() }}',
                    'phonenumber': $('#phone_re').val(),
                    'areacode': $('#country_re').val(),
                    'isRegistration': 'check'
                },
                success: function (data) {
                    if (data[0] != 1) {
                        $('.regPhoneContainer .telephoneNumber.search, .regPhoneContainer #phone_re').addClass('errorBorder');
                        $('.regPhoneContainer .err').addClass('visible');
                        $('.regPhoneContainer .corr').removeClass('visible');
                        $('.register.regPhoneContainer').empty().append(data[1]).addClass('visible');
                    } else {
                        $('.regPhoneContainer .telephoneNumber.search, .regPhoneContainer #phone_re').removeClass('errorBorder');
                        $('.regPhoneContainer .err').removeClass('visible');
                        $('.regPhoneContainer .corr').addClass('visible');
                        $('.register.regPhoneContainer').removeClass('visible');
                    }
                }
            });
        }

        function verifyRegCode() {
            var value = $('#verCode').val();

            $('.verCodeContainer .err').removeClass('visible');
            $('.verCodeContainer .corr').removeClass('visible');
            $('.register.verCodeContainer').empty().removeClass('visible');
            $('.verCodeContainer *').removeClass('errorBorder');

            if (value == '') {
                $('#verCode').addClass('errorBorder');
                $('.verCodeContainer .err').addClass('visible');
                $('.register.verCodeContainer').empty().append("{{__('Code mustnt be empty')}}").addClass('visible');
            } else if (value.length == 6) {
                $('#verCode').removeClass('errorBorder');
                $('.verCodeContainer .err').removeClass('visible');
                $('.verCodeContainer .corr').addClass('visible');
                $('.register.verCodeContainer').empty().removeClass('visible');
            } else {
                $('#verCode').addClass('errorBorder');
                $('.verCodeContainer .err').addClass('visible');
                $('.register.verCodeContainer').empty().append("{{__('Code must be 6 digits long')}}").addClass('visible');
            }
        }

        function verifyRegPass(element, container, save) {
            var input = $(element);
            var errorIcon = $('.'+container+' .err');
            var correctIcon = $('.'+container+' .corr');
            var errorMsg = $('.'+container+'.errorMsg');

            var value = input.val();

            var regExpLetter = /[a-zA-Z]/;
            var regExpDigit = /[0-9]/;
            var regExpSpace = /\s/g;

            errorIcon.removeClass('visible');
            correctIcon.removeClass('visible');
            errorMsg.removeClass('visible');
            input.removeClass('errorBorder');
            if(!save && value == '') {
                return false;
            }

            if (value == '') {
                input.addClass('errorBorder');
                errorIcon.addClass('visible');
                errorMsg.empty().append("{{__('Password mustnt be empty')}}").addClass('visible');
            } else if (value.length < 8 || value.length > 16) {
                input.addClass('errorBorder');
                errorIcon.addClass('visible');
                errorMsg.empty().append("{{__('Password must contain between 8 and 16 characters')}}").addClass('visible');
            }else if (!regExpLetter.test(value)) {
                input.addClass('errorBorder');
                errorIcon.addClass('visible');
                errorMsg.empty().append("{{__('Password must contain a letter')}}").addClass('visible');
            } else if (!regExpDigit.test(value)) {
                input.addClass('errorBorder');
                errorIcon.addClass('visible');
                errorMsg.empty().append("{{__('Password must contain a digit')}}").addClass('visible');
            } else if (regExpSpace.test(value)) {
                input.addClass('errorBorder');
                errorIcon.addClass('visible');
                errorMsg.empty().append("{{__('Password mustnt contain spaces')}}").addClass('visible');
            } else {
                input.removeClass('errorBorder');
                correctIcon.addClass('visible');
                errorMsg.removeClass('visible');
            }
        }

        function verifyRegConfirmPass(element1, element2, container, save) {
            var input1 = $(element1);
            var input2 = $(element2);
            var errorIcon = $('.'+container+' .err');
            var correctIcon = $('.'+container+' .corr');
            var errorMsg = $('.'+container+'.errorMsg');

            var value1 = input1.val();
            var value2 = input2.val();

            errorIcon.removeClass('visible');
            correctIcon.removeClass('visible');
            errorMsg.removeClass('visible');
            input1.removeClass('errorBorder');

            if(!save && value1 == '' && value2 == '') {
                return false;
            }

            if (value1 == '') {
                input1.addClass('errorBorder');
                errorIcon.addClass('visible');
                errorMsg.empty().append("{{__('Password mustnt be empty')}}").addClass('visible');
            } else if (value1 != value2) {
                input1.addClass('errorBorder');
                errorIcon.addClass('visible');
                errorMsg.empty().append("{{__('Passwords dont match')}}").addClass('visible');
            } else {
                input1.removeClass('errorBorder');
                correctIcon.addClass('visible');
                errorMsg.removeClass('visible');
            }
        }

        function verifyRegName(element, container, save) {
            var value = element.value.trim();
            var input = $(element);
            var errorIcon = $('.'+container + ' .err');
            var correctIcon = $('.'+container + ' .corr');
            var errorMsg = $('.'+container + '.errorMsg');

            resetInput(input, errorIcon, correctIcon, errorMsg);

            if (!save && value === '') {
                return false;
            }

            if (value.length < 1 || value.length > 100 || /[^?!\u3400-\u9FBFA-z0-9]/.test(value)) {
                markInput(false, input, errorIcon, correctIcon, errorMsg, '{{__('user-name-error')}}');
            } else {
                verifyRegNameRemote(element, container);
            }
        }

        function verifyRegNameRemote(element, container) {
            var value = element.value.trim();
            var input = $(element);
            var errorIcon = $('.'+container + ' .err');
            var correctIcon = $('.'+container + ' .corr');
            var errorMsg = $('.'+container + '.errorMsg');

            return $.ajax({
                method: 'GET',
                url: '{{route('validateRegisteredName')}}',
                data: {
                    registeredName: value
                },
                success: function (data) {
                    if (data.id === '') {
                        markInput(true, input, errorIcon, correctIcon, errorMsg);
                    } else {
                        markInput(false, input, errorIcon, correctIcon, errorMsg, '{{__('user-name-exists')}}');
                    }
                },
                error: function () {
                    markInput(false, input, errorIcon, correctIcon, errorMsg, '{{__('user-name-error')}}');
                }
            });
        }

        function resetInput(input, errorIcon, correctIcon, errorMessage) {
            errorIcon.removeClass('visible');
            correctIcon.removeClass('visible');
            errorMessage.removeClass('visible');
            input.removeClass('errorBorder');
        }

        function markInput(isValid, input, errorIcon, correctIcon, errorMessage, messageText) {
            if (isValid) {
                input.removeClass('errorBorder');
                correctIcon.addClass('visible');
                errorMessage.removeClass('visible');
            } else {
                input.addClass('errorBorder');
                errorIcon.addClass('visible');
                errorMessage.empty()
                    .append(messageText)
                    .addClass('visible');
            }
        }

        function verifyRegEmail(save) {
            var value = regEmailInput.val();

            $('.regEmailContainer .err').removeClass('visible');
            $('.regEmailContainer .corr').removeClass('visible');
            $('.register.regEmailContainer').removeClass('visible');
            $('.regEmailContainer *').removeClass('errorBorder');

            if (!save && value == '') {
                return false;
            }

            if (value == '') {
                regEmailInput.addClass('errorBorder');
                $('.regEmailContainer .err').addClass('visible');
                $('.register.regEmailContainer').empty().append("{{__('Field mustnt be empty')}}").addClass('visible');
            } else if (!validateEmail(value)) {
                regEmailInput.addClass('errorBorder');
                $('.regEmailContainer .err').addClass('visible');
                $('.register.regEmailContainer').empty().append("{{__('Incorrect e-mail format')}}").addClass('visible');
            } else {
                verifyRegEmailRemote();
            }
        }

        function verifyRegEmailRemote() {
            return $.ajax({
                type: 'GET',
                url: '{{route('validateDuplicateEmail')}}',
                data: {
                    '_token': "{{ csrf_token() }}",
                    'email': regEmailInput.val()
                },
                success: function (data) {
                    if (data[0] != 1) {
                        regEmailInput.addClass('errorBorder');
                        $('.regEmailContainer .err').addClass('visible');
                        $('.register.regEmailContainer').empty().append(data[1]).addClass('visible');
                    } else {
                        regEmailInput.removeClass('errorBorder');
                        $('.regEmailContainer .err').removeClass('visible');
                        $('.regEmailContainer .corr').addClass('visible');
                        $('.register.regEmailContainer').removeClass('visible');
                    }
                }
            });
        }

        function verifyLoginPhone() {
            if (!$('#animatedPhone').hasClass('invisible')) {
                var value = $('#phone').val();

                if (value != "") {
                    var regExpDigit = /[0-9]/;

                    if(!regExpDigit.test(value)){
                        $('#phone, #drop_login').addClass('errorBorder');
                        $('.phonEmail').addClass('visible');
                        $('#animatedEmail .corr').removeClass('visible');
                        $('#animatedEmail .err').addClass('visible');
                    } else {
                        $.ajax({
                            type: 'POST',
                            url: '{{route('validatePhoneNumber')}}',
                            data: {
                                '_token': '{{ csrf_token() }}',
                                'phonenumber': $('#phone').val(),
                                'areacode': $('#country_login').val(),
                                'isRegistration': 'no'
                            },
                            success: function (data) {
                                if (data[0] == 0) {
                                    $('.phonEmail').empty().html("{{__('Incorrect phone number')}}").addClass('visible');
                                    $('#animatedEmail .corr').removeClass('visible');
                                    $('#animatedEmail .err').addClass('visible');
                                    $('#phone, #drop_login').addClass('errorBorder');

                                    if (data[1]) {
                                        $('.phonEmail').empty().html(data[1]);
                                    } else {
                                        $('.phonEmail').empty().html("{{__('Incorrect phone number')}}");
                                    }
                                } else {
                                    $('#phone, #drop_login').removeClass('errorBorder');
                                    $('.phonEmail').removeClass('visible');
                                    $('#animatedEmail .corr').addClass('visible');
                                    $('#animatedEmail .err').removeClass('visible');
                                }
                            }
                        });
                    }
                } else {
                    $('.phonEmail').removeClass('visible');
                    $('#animatedEmail .corr').removeClass('visible');
                    $('#animatedEmail .err').removeClass('visible');
                    $('#phone, #drop_login').removeClass('errorBorder');
                }
            }
        }

        function verifyLoginPassword() {
            var value = $('#password').val();

            $('#password').removeClass('errorBorder');

            if (value != "") {
                if (value && value.length >= 6 && value.length <= 16) {
                    $('#password').removeClass('errorBorder');
                    $('#loginPasswdContainer + .errorMsg').removeClass('visible');
                    $('#loginPasswd .corr').addClass('visible');
                    $('#loginPasswd .err').removeClass('visible');
                } else {
                    $('#password').addClass('errorBorder');
                    $('#loginPasswdContainer + .errorMsg').addClass('visible');
                    $('#loginPasswd .corr').removeClass('visible');
                    $('#loginPasswd .err').addClass('visible');
                }
            } else {
                $('#password').removeClass('errorBorder');
                $('#loginPasswdContainer + .errorMsg').removeClass('visible');
                $('#loginPasswd .corr').removeClass('visible');
                $('#loginPasswd .err').removeClass('visible');
            }
        }

        function verifyLoginEmail() {
            if ($('#animatedPhone').hasClass('invisible')) {
                var value = $('#email').val();
                if (value != "") {
                    if (validateEmail(value)) {
                        $('#email').removeClass('errorBorder');
                        $('.phonEmail').removeClass('visible');
                        $('#animatedEmail .corr').addClass('visible');
                        $('#animatedEmail .err').removeClass('visible');
                    }
                    else {
                        $('#email').addClass('errorBorder');
                        $('.phonEmail').empty().html("{{__('Incorrect email address')}}").addClass('visible');
                        $('#animatedEmail .corr').removeClass('visible');
                        $('#animatedEmail .err').addClass('visible');
                    }
                } else {
                    $('#email').removeClass('errorBorder');
                    $('.phonEmail').removeClass('visible');
                    $('#animatedEmail .corr').removeClass('visible');
                    $('#animatedEmail .err').removeClass('visible');
                }
            }
        }

        function clearErrorFormat() {
            $('#animatedEmail .corr').removeClass('visible');
            $('#animatedEmail .err').removeClass('visible');
            $('#loginPasswd .corr').removeClass('visible');
            $('#loginPasswd .err').removeClass('visible');
            $('#login-form *').removeClass('errorBorder');
        }

        const EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

        function validateEmail(email) {
            return EMAIL_REGEX.test(String(email).toLowerCase());
        }

        function resetForm(){
            $('#registration_form form').trigger('reset');
            $('#registration_form *').removeClass('errorBorder');
            $('#registration_form .errorMsg').removeClass('visible');
            $('#registration_form .err').removeClass('visible');
        }
    </script>


@endsection