@extends('account.base')

@section('title', __('Account Management'))

@section('account_content')

    @include('common.no_cache')

    <div class="ui grid" id="accountManagement">
        <h2 class="ui dividing header font-title">{{ __('Account Management') }}</h2>

        <div class="row">
            <div class="col">
                <form class="ui form" name="personalDetails" id="personalDetails">
                    <div class="field realName">
                        <label for="registeredName" class="disabled">{{ __('User Name') }}{{" *"}}</label>
                        <div class="field relativeContainer">
                            <input type="text" name="registeredName" id="realName" value="{{$user->registeredName}}" disabled="disabled" readonly="readonly">
                        </div>
                    </div>

                    <div class="field realName">
                        <label for="registeredName" class="disabled">{{ __('name') }}{{" *"}}</label>
                        <div class="field relativeContainer">
                            <input type="text" name="registeredName" id="realName" value="{{$user->userName}}" disabled="disabled" readonly="readonly">
                        </div>
                    </div>

                    <div class="field nEmail">
                        <label for="newEmail">{{ __('Email address') }}{{" *"}}</label>
                        <div class="field relativeContainer">
                            <input type="email" name="newEmail" id="newEmail" value="{{$user->email}}">
                            <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 nEmail"></span>

                    <div class="field cEmail">
                        <label for="confirmEmail">{{ __('Confirm email') }}{{" *"}}</label>
                        <div class="field relativeContainer">
                            <input type="email" name="confirmEmail" id="confirmEmail" value="{{$user->email}}" onfocusout="verifyEmailConf($(this), $('#newEmail'), 'cEmail')">
                            <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 cEmail"></span>

                    <div class="field">
                        <label for="newPhone">{{ __('Mobile number') }}</label>
                        <div class="field telephoneNumber relativeContainer">
                            <div class="ui fluid search selection dropdown telephoneNumber">
                                <input type="hidden" name="country-code" id="areaCode" value="44">
                                <i class="chevron down icon"></i>
                                <div class="default text">+44</div>
                                <div class="menu">
                                    @include('countryCode')
                                </div>
                            </div>
                            <input type="text" name="newPhone" id="newPhone" value="{{$user->phone}}" onfocusout="verifyPhone(this, 'telephoneNumber')">
                            <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 telephoneNumber"></span>

                    <div id='saveDetails' class="ui button disabled" onclick="saveDetails()">
                        {{ __('Save Details') }}
                    </div>

                    <div class="errorMsg accountDetails"></div>
                </form>
            </div>
        </div>

        <div class="row">
            <h3 class="ui header font-title">{{ __('Change Password') }}</h3>

            <div class="col">
                <form class="ui form" name="changePassword" id="changePassword">
                    <div class="field oPasswd">
                        <label>{{ __('Current Password') }}</label>
                        <div class="field relativeContainer">
                            <input type="password" name="old_password" id="old_password" onfocusout="verifyPasswd(this, 'oPasswd')">
                            <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 oPasswd"></span>

                    <div class="field">
                        <label>{{ __('New Password') }}</label>
                        <div class="field nPasswd relativeContainer">
                            <input type="password" name="new_password" id="new_password" onfocusout="verifyPasswd(this, 'nPasswd')">
                            <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 nPasswd"></span>

                    <div class="field">
                        <label>{{ __('Confirm Password') }}</label>
                        <div class="field cPasswd relativeContainer">
                            <input type="password" name="new_password_again" id="new_password_again" onfocusout="verifyPasswdConf(this, $('#new_password'), 'cPasswd')">
                            <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 cPasswd"></span>

                    <div class="ui button" onclick="save()">
                        {{ __('Save') }}
                    </div>
                </form>
            </div>
        </div>

        <div class="childrens-template">
            <div class="field telephoneNumber relativeContainer childrens-info"> 
                <div class="ui fluid search selection dropdown telephoneNumber">
                    <input type="hidden" class="bang-code" value="44">
                    <i class="chevron down icon"></i>
                    <div class="default text">+44</div>
                    <div class="menu">
                        @include('countryCode')
                    </div>
                </div>
                <input type="text" class="band-phone">
                <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 class="row">
            <h3 class="ui header font-title">
                @if($user->user_type == 1)
                    {{ __('Bind parents') }}
                @else
                    {{ __('Bind student') }}
                @endif
            </h3>

            <div class="col">
                <form class="ui form">
                    <div class="field realName">
                        <label for="registeredName" class="disabled">{{ __('Account status') }}</label>
                        <div class="field relativeContainer">
                            @if($user->user_type == 1)
                                <input type="text" name="accountStatus" id="accountStatus" value="{{ __('Student') }}" disabled="disabled" readonly="readonly">
                            @else
                                <input type="text" name="accountStatus" id="accountStatus" value="{{ __('Parents') }}" disabled="disabled" readonly="readonly">
                            @endif
                        </div>
                    </div>

                    <div class="field userCenter-list">
                        <label for="">
                            @if($user->user_type == 1)
                                {{ __('Bind parents') }}
                            @else
                                {{ __('Bind student') }}
                            @endif
                        </label>
                        <div class="field telephoneNumber relativeContainer childrens-info">
                            <div class="ui fluid search selection dropdown telephoneNumber">
                                <input type="hidden" class="bang-code" value="44">
                                <i class="chevron down icon"></i>
                                <div class="default text">+44</div>
                                <div class="menu">
                                    @include('countryCode')
                                </div>
                            </div>
                            <input type="text" class="band-phone">
                            <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 add-student-button">
                            <img src="{{config('locations.systemImage.asset').'add-student.png'}}">
                        </div>
                    </div>
                    <span class="errorMsg telephoneNumber"></span>

                    <!-- <div class="ui button" onclick="save()">
                        {{ __('Save') }}
                    </div> -->
                </form>
            </div>
        </div>
    </div>

    @include('common.modals.contents.success_modal', [
        'id' => 'success_modal',
        'text' => __('Password change successful'),
    ])

    <script>
        var originalEmail = '{{$user->email}}';
        var originalPhone = '{{$user->phone}}';

        var emailInput = '';
        var emailConfirmationInput = '';
        var areaCodeInput = '';
        var phoneInput = '';
        var saveButton = '';
        var saveError = '';

        var passwordInput = $('#old_password');
        var newPasswordInput = $('#new_password');
        var newPasswordConfirmationInput = $('#new_password_again');
        let _inituserType = "{{$user->user_type}}";

        if(_inituserType == 1){
            getBindParentList()
        }else if(_inituserType == 2){
            getBindUserList()
        }
        function getBindUserList(){//获取已绑定的学生
            let _userId = "{{$user->id ?? ""}}";
            $.ajax({
                type: 'GET',
                url: "{{route('bindUserList')}}",
                data: {
                    '_token': "{{ csrf_token() }}",
                    'id': _userId
                },
                success: function (data) {
                    if(data.code == 200) {
                        rendBingUser(data.data)
                    }else{
                        layer.msg(data.msg)
                    }
                }
            });
        }
        function getBindParentList() {
            let _userId = "{{$user->id ?? ""}}";
            $.ajax({
                type: 'GET',
                url: "{{route('bindParentList')}}",
                data: {
                    '_token': "{{ csrf_token() }}",
                    'id': _userId
                },
                success: function (data) {
                    if(data.code == 200) {
                        rendBingUser(data.data)
                    }else{
                        layer.msg(data.msg)
                    }
                }
            });
        }

        function rendBingUser(data){
            if(data.length <= 0){
                return false
            }
            $(".userCenter-list").find(".childrens-info").remove()
            data.map((item,index)=>{
                let _template = $(".childrens-template").find(".childrens-info").clone();
                if(index === 0){
                    _template.find(".option-delete").css({"display":"none"})
                    _template.find(".option-delete-disabled").show()
                }else{
                    _template.find(".option-delete").css({"display":"block"})
                    .attr("data-id",item.user_id)
                    _template.find(".option-delete-disabled").hide()
                }
                
                _template.find("input.band-phone").val(item.phone)//缺少code和phone
                _template.find("input.bang-code").val(item.areaCode)
                let str = '<span class="error-Msg register visible isExist">'+item.userName+'</span>'
                $('.add-student-button').before(_template)
                $('.add-student-button').before(str)
                $('.telephoneNumber').dropdown();
            })
        }

        $(".add-student-button").on("click",function(){
            let _template = $(".childrens-template").find(".childrens-info").clone();
            _template.find(".option-delete").css({"display":"block"})
            _template.find(".option-delete-disabled").hide()
            $(this).before(_template)
            $('.telephoneNumber').dropdown();
        })

        $("body").on("focus",".bang-code,.band-phone",function(){
            let _parent = $(this).parents(".childrens-info");
            if(_parent.next(".error-Msg") ) {
                _parent.next(".error-Msg").remove()
            }
        })

        $("body").on("blur",".bang-code,.band-phone",function(){
            let _parent = $(this).parents(".childrens-info");
            let _userType = _inituserType==1?2:1;
            let _code = _parent.find(".bang-code").val(),
                _phone = _parent.find(".band-phone").val();
           if((_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 str = '<span class="error-Msg register visible isExist">'+data.userName+'</span>'
                            _parent.after(str)
                            bindUser(data.id)
                        }
                    }
                });
            }
        })
        $("body").on("click",".option-delete",function(){
            let _id = $(this).attr("data-id");
            if(_id){
                untieUser(_id,$(this))
            }else{
                $(this).parents(".childrens-info").remove()
            }
        })
        function bindUser(id){//绑定用户
            let params = {}
            params._token = "{{ csrf_token() }}";
            let _userId = "{{$user->id ?? ""}}";
            if(_inituserType == 1){
                params.user_id = _userId
                params.parent_id = id
            }else if(_inituserType == 2){
                params.parent_id = _userId
                params.user_id = id
            }
            $.ajax({
                type: 'POST',
                url: "{{route('managementBindUser')}}",
                data: params,
                success: function (data) {
                    if(data.code == 200) {
                        
                    }else{
                        layer.msg(data.msg)
                    }
                }
            });
        }

        function untieUser(id,element){//解除绑定
            let params = {}
            let _userId = "{{$user->id ?? ""}}";
            params._token = "{{ csrf_token() }}";
            if(_inituserType == 1){
                params.user_id = _userId
                params.parent_id = id
            }else if(_inituserType == 2){
                params.parent_id = _userId
                params.user_id = id
            }
            $.ajax({
                type: 'POST',
                url: "{{route('managementUntieUser')}}",
                data: params,
                success: function (data) {
                    if(data.code == 200) {
                        element.parents(".childrens-info").next(".error-Msg").remove()
                        element.parents(".childrens-info").remove()
                    }else{
                        layer.msg(data.msg)
                    }
                }
            });
        }

        // $("body").on("click",".option-delete",function(){
        //     $(this).parents(".childrens-info").remove()
        // })

        $(window).on('load', function(){
            $('.field.telephoneNumber img + .menu').remove();
        });

        $(function(){
            emailInput = $('#newEmail');
            emailConfirmationInput = $('#confirmEmail');

            $('#newEmail, #confirmEmail').on('keypress', function (event) {
                if (event.keyCode === 32) {
                    return false;
                }
            });

            areaCodeInput = $('#areaCode');
            phoneInput = $('#newPhone');

            saveButton = $('#saveDetails');
            saveError = $('.errorMsg.accountDetails');

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

            $('#accountManagementMenuItem').addClass('active');
            $('.ui.breadcrumb').append("<a href=\"#\" class=\"section\">"+"{{ __('Account Management') }}"+"</a>");

            $('.telephoneNumber').dropdown('set selected', '{{isset($user->areaCode)?$user->areaCode:"44"}}');

            emailInput.on('focusout', function(){
                verifyEmail(this, 'nEmail');
                verifyEmailConf(emailConfirmationInput, $(this), 'cEmail');
            });

        });

        function validateChanges(element, callback){
            var emailInputValue = emailInput.val();
            var phoneInputValue = phoneInput.val();
            var areaCodeInputValue = areaCodeInput.val();
            if (( emailInputValue === originalEmail && phoneInputValue === originalPhone) ||
                emailInputValue == '' || phoneInputValue == '' || areaCodeInputValue == ''){
                saveButton.addClass('disabled');
                callback(true);
                return;
            }

            var data = {
                '_token': "{{ csrf_token() }}"
            };

            data['email'] = emailInputValue;
            data['areacode'] = areaCodeInputValue;
            data['phonenumber'] = phoneInputValue;

            $.ajax({
                type: 'POST',
                url: "{{route('validateChangeDetailsInAccount')}}",
                data: data,
                success: function (data) {
                    if (data.success) {
                        callback(true);
                    } else {
                        saveButton.addClass('disabled');
                        if (data.emailFailed) {
                            $(emailInput).addClass('errorBorder');
                            $('.nEmail .err').addClass('visible');
                            $(emailConfirmationInput).addClass('errorBorder');
                            $('.cEmail .err').addClass('visible');
                            if (element === 'email') {
                                callback(false);
                                return;
                            }
                        }

                        if (data.phoneFailed) {
                            $(phoneInput).addClass('errorBorder');
                            $('.telephoneNumber .err').addClass('visible');
                            if (element === 'phone') {
                                callback(false);
                                return;
                            }
                        }

                        callback(true);
                    }
                }
            });
        }

        function saveDetails(){
            var errors = $('#personalDetails .errorMsg.visible').length;

            if(errors === 0){
                var data = {
                    '_token': "{{ csrf_token() }}"
                };

                data['email'] = emailInput.val();
                data['confirmemail'] = emailConfirmationInput.val();
                data['areacode'] = areaCodeInput.val();
                data['phonenumber'] = phoneInput.val();

                $.ajax({
                    type: 'POST',
                    url: "{{route('changeDetailsInAccount')}}",
                    data: data,
                    success: function (data) {
                        if (data.actionStatus) {
                            if (data.emailChangeStatus === 'changed' && data.phoneChangeStatus === 'changed') {
                                showModal("{{__('Details successfully changed')}}");
                                originalEmail = emailInput.val();
                                originalPhone = phoneInput.val();
                            } else if (data.emailChangeStatus === 'changed') {
                                showModal("{{__('Email successfully changed')}}");
                                originalEmail= emailInput.val();
                            } else if (data.phoneChangeStatus === 'changed') {
                                showModal("{{__('Phone successfully changed')}}");
                                originalPhone = phoneInput.val();
                            } else {
                                showDetailsError('{{__('It seems your details are the same or are duplicate of existing entries')}}', false);
                            }

                            saveButton.addClass('disabled');
                        } else {
                            showDetailsError('{{__('Failed to change your details! Try Again Later')}}', true);
                        }
                    }
                });
            }
        }

        function save(){
            verifyPasswd(passwordInput, 'oPasswd', true);
            verifyPasswd(newPasswordInput, 'nPasswd', true);
            verifyPasswdConf(newPasswordConfirmationInput, newPasswordInput, 'cPasswd', true);

            var errors = $('#changePassword .errorMsg.visible').length;

            if(errors === 0){
                var data = {
                    '_token': "{{ csrf_token() }}"
                };

                data['old_password'] = passwordInput.val();
                data['new_password'] = newPasswordInput.val();
                data['new_password_again'] = newPasswordInput.val();

                $.ajax({
                    type: 'POST',
                    url: "{{route('changePasswordInAccount')}}",
                    data: data,
                    success: function (data) {
                        if(data === 'success'){
                            showModal("{{__('Password successfully changed')}}");
                        } else if(data === 'mismatch'){
                            newPasswordInput.addClass('errorBorder');
                            newPasswordConfirmationInput.addClass('errorBorder');

                            $('.nPasswd .corr, .cPasswd .corr').removeClass('visible');
                            $('.nPasswd .err, .cPasswd .err').addClass('visible');
                            $('.errorMsg.nPasswd, .errorMsg.cPasswd').text('{{__('New password doesnt match')}}').addClass('visible');
                        } else {
                            passwordInput.addClass('errorBorder');
                            $('.oPasswd .corr').removeClass('visible');
                            $('.oPasswd .err').addClass('visible');
                            $('.errorMsg.oPasswd').text('{{__('Current password is incorrect')}}').addClass('visible');
                        }
                    }
                });
            }
        }

        function showModal(message){
            var modal = $('#success_modal');

            modal.find('.text').html(message);
            modal.modal('show');

            setTimeout(function () {
                modal.modal('hide');
            }, 3000);
        }

        function showDetailsError(message, disableButton) {
            saveError.text(message).addClass('visible');

            if (disableButton) {
                saveButton.addClass('disabled');
            }
        }

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

            var value = input.val();

            errorIcon.removeClass('visible');
            correctIcon.removeClass('visible');
            errorMsg.removeClass('visible');
            saveError.removeClass('visible');

            if(value === ''){
                input.addClass('errorBorder');
                errorIcon.addClass('visible');
                errorMsg.empty().append("{{__('Email mustnt be empty')}}").addClass('visible');
                saveButton.addClass('disabled');
            } else if(!(validateEmail(value))){
                input.addClass('errorBorder');
                errorIcon.addClass('visible');
                errorMsg.empty().append("{{__('Incorrect e-mail format')}}").addClass('visible');
                saveButton.addClass('disabled');
            } else {
                validateChanges('email', function(data){
                    if(data){
                        input.removeClass('errorBorder');
                        errorIcon.removeClass('visible');
                        correctIcon.addClass('visible');
                        errorMsg.removeClass('visible');

                        var errors = $('#personalDetails .errorMsg.visible').length;
                        if(errors === 0) {
                            saveButton.removeClass('disabled');
                        }
                    } else {
                        errorMsg.empty().append("{{__('This email is already associated with another account')}}").addClass('visible');
                    }
                });
            }
        }

        function verifyEmailConf(element1, element2, container){
            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();

            input1.addClass('errorBorder');
            errorIcon.addClass('visible');
            correctIcon.removeClass('visible');
            saveError.removeClass('visible');

            if (value1 === '') {
                errorMsg.empty().append("{{__('Email mustnt be empty')}}").addClass('visible');
                saveButton.addClass('disabled');
            } else if(!(validateEmail(value1))){
                errorMsg.empty().append("{{__('Incorrect e-mail format')}}").addClass('visible');
                saveButton.addClass('disabled');
            } else if (value1 !== value2) {
                errorMsg.empty().append("{{__('Emails dont match')}}").addClass('visible');
                saveButton.addClass('disabled');
            } else {
                validateChanges('email', function(data){
                    if(data){
                        input1.removeClass('errorBorder');
                        errorIcon.removeClass('visible');
                        correctIcon.addClass('visible');
                        errorMsg.removeClass('visible');

                        var errors = $('#personalDetails .errorMsg.visible').length;
                        if(errors === 0) {
                            saveButton.removeClass('disabled');
                        }
                    } else {
                        errorMsg.empty().append("{{__('This email is already associated with another account')}}").addClass('visible');
                    }
                });
            }
        }

        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 verifyPhone(element, container){
            var input = $(element);
            var errorIcon = $('.'+container+' .err');
            var correctIcon = $('.'+container+' .corr');
            var errorMsg = $('.'+container+'.errorMsg');

            var value = input.val();

            var regExpDigit = /^[0-9]+$/;

            var dropdown = $('.telephoneNumber.dropdown');

            input.addClass('errorBorder');
            dropdown.addClass('errorBorder');
            errorIcon.addClass('visible');
            saveError.removeClass('visible');

            if (value === '') {
                errorMsg.empty().append("{{__('Number mustnt be empty')}}").addClass('visible');
                saveButton.addClass('disabled');
            } else if (value.length < 4 || value.length > 15) {
                errorMsg.empty().append("{{__('Number must contain between 6 and 16 characters')}}").addClass('visible');
                saveButton.addClass('disabled');
            } else if (!regExpDigit.test(value)) {
                errorMsg.empty().append("{{__('Number must contain digits only')}}").addClass('visible');
                saveButton.addClass('disabled');
            } else {
                validateChanges('phone', function(data){
                    if(data){
                        input.removeClass('errorBorder');
                        dropdown.removeClass('errorBorder');
                        errorIcon.removeClass('visible');
                        correctIcon.addClass('visible');
                        errorMsg.removeClass('visible');

                        var errors = $('#personalDetails .errorMsg.visible').length;
                        if(errors === 0) {
                            saveButton.removeClass('disabled');
                        }
                    } else {
                        errorMsg.empty().append("{{__('This phone number is already associated with another account')}}").addClass('visible');
                    }
                });
            }
        }

        function verifyPasswd(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;
            }

            input.addClass('errorBorder');
            errorIcon.addClass('visible');

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

        function verifyPasswdConf(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();

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

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

            input1.addClass('errorBorder');
            errorIcon.addClass('visible');

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