@extends('web_layouts.layout')
{{-- title --}}
@section('title','Reset-Password page')

@section('content')
<section class="midd-inner-banner shadow-bottom">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="inner-banner-area-pages">
                    <!-- <h1 class="cmn-hd-inner"><span></span>Login</h1>
                    <p>Welcome Back!</p>

                    <div class="breadcrumb"><a href="http://103.1.100.53/Bursato/public">Home</a> <em></em> Login</div> -->
                </div>

            </div>
        </div>
    </div>
</section>

<section class="common-section formarea-section">
    <div class="container">
        <div class="row">
        <div class="col-lg-6" style="margin:auto;">
                <div class="text-center">
                    <h1 class=""><span></span>{{ __('messages.create_new_password')}}</h1>
                    <p>{{ __('messages.type_new_password_account')}}</p>

                    <!-- <div class="breadcrumb"><a href="{{url('/')}}">Home</a> <em></em> Set New Password</div> -->
                </div>
                @if ($message = Session::get('error'))
                <div class="alert alert-danger alert-block">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <strong>{{ $message }}</strong>
                </div>
                @endif

                <form id="login-reset" role="form" action="{{ route('reset-password.save') }}" method="POST">
                    <!-- START Form Control-->
                    @csrf
                    <input type="hidden" name="token" value="" />
                    <div class="cmn-form-area">
                        <div class="row">
                            <div class="col-md-12">
                                <input type="text" name='email' id="email" value="{{ old('username') }}" placeholder="{{ __('messages.email_placeholder')}}" value="{{ $username ?? old('username') }}" class="form-control">
                                @error('email')
                                <label class="error">
                                    {{ $message }}
                                </label>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <input name="password" id="password" type="password" class="password form-control" placeholder="{{ __('messages.new_password')}}" autocomplete="new-password" onkeyup="pwcheck();" maxlength="20" minlength="8">
                                <span class="eye-icon-login-password" style="cursor: pointer;" onclick="passwordHideShow()">
                                    <!-- <img src="{{ asset('/images/webimage/eye-icon.png')}}"></a> -->
                                    <i class="fa fa-eye-slash" id="passwordEyeIcon" style="font-size: 26px;color: #ced4da;"></i>
                                </span>
                            </div>
                            <div class="col-md-6 d-none reset_pswd_info" id="reset_pswd_info">
                                <span id="message" style="color:red">{{ __('messages.password_must_have_least')}}: </span>
                                <ul id="d1" class="list-unstyled">
                                    <li class="pwd-color" id=d12><span class='fa fa-remove' aria-hidden='true'></span>&nbsp; 1 {{ __('messages.uppercase')}}</li>
                                    <li class="pwd-color" id=d13><span class='fa fa-remove' aria-hidden='true'></span>&nbsp; 1 {{__('messages.lowercase')}}</li>
                                    <li class="pwd-color" id=d14><span class='fa fa-remove' aria-hidden='true'></span> &nbsp;1 {{__("messages.special_character")}} (!@#$%^&*)</li>
                                    <li class="pwd-color" id=d15><span class='fa fa-remove' aria-hidden='true'></span> &nbsp;1 {{__("messages.number")}} (0-9)</li>
                                    <li class="pwd-color" id=d16><span class='fa fa-remove' aria-hidden='true'></span>&nbsp; {{__('messages.password_length_between_characters')}}</li>
                                </ul>
                            </div>
                            <div class="col-md-12">
                                <input name="confirm_password" type="password" id="confirm_password" class="confirm_password form-control" placeholder="{{ __('messages.confirm_new_password')}}">
                                <span class="eye-icon-login-password" style="cursor: pointer;" onclick="confirmPasswordHideShow()">
                                    <!-- <img src="{{ asset('/images/webimage/eye-icon.png')}}"> -->
                                    <i class="fa fa-eye-slash" id="confirmPasswordEyeIcon" style="font-size: 26px;color: #ced4da;"></i>
                                </span>
                                <span id="message" style="color:red"> </span>
                            </div>

                            <div class="col-md-12">
                                <div class="form-btn"><input name="submit" type="submit" value="{{ __('messages.reset_password')}}" class="btn btn-secondary submit" disabled></div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

</div>
</div>
@endsection
@section('topup-home.script')
<script src="{{ asset('js/scripts/jquery.validate.min.js') }}"></script>
<script>
    function passwordHideShow() {
        var type = $("#password").attr('type');
        if(type == 'password'){
            $("#password").attr('type','text')
            $("#passwordEyeIcon").addClass("fa-eye").removeClass("fa-eye-slash");
        }else if(type == 'text'){
            $("#password").attr('type','password')
            $("#passwordEyeIcon").addClass("fa-eye-slash").removeClass("fa-eye");
        }
        // console.log(type);
    }
    function confirmPasswordHideShow() {
        var type = $("#confirm_password").attr('type');
        if(type == 'password'){
            $("#confirm_password").attr('type','text')
            $("#confirmPasswordEyeIcon").addClass("fa-eye").removeClass("fa-eye-slash");
        }else if(type == 'text'){
            $("#confirm_password").attr('type','password')
            $("#confirmPasswordEyeIcon").addClass("fa-eye-slash").removeClass("fa-eye");
        }
        // console.log(type);
    }
    function pwcheck() {
        // var str=$('#newPassword').val();
        var str = $('.password').val();
        var upper_text = new RegExp('[A-Z]');
        var lower_text = new RegExp('[a-z]');
        var number_check = new RegExp('[0-9]');
        var special_char = new RegExp('[!/\'^�$%&*()}{@#~?><>,|=_+�-\]');

        var flag = 'T';


        if (str.match(upper_text)) {
            $('#d12').html("<span class='fa fa-check' aria-hidden='true'></span>&nbsp; 1 {{__('messages.uppercase')}}");
            $('#d12').css("color", "green");
        } else {
            $('#d12').css("color", "red");
            $('#d12').html("<span class='fa fa-remove' aria-hidden='true'></span>&nbsp; 1 {{__('messages.uppercase')}}");
            flag = 'F';
        }

        if (str.match(lower_text)) {
            $('#d13').html("<span class='fa fa-check' aria-hidden='true'></span>&nbsp; 1 {{__('messages.lowercase')}}");
            $('#d13').css("color", "green");
        } else {
            $('#d13').css("color", "red");
            $('#d13').html("<span class='fa fa-remove' aria-hidden='true'></span>&nbsp; 1 {{__('messages.lowercase')}}");
            flag = 'F';
        }

        if (str.match(special_char)) {
            $('#d14').html("<span class='fa fa-check' aria-hidden='true'></span> &nbsp;1 {{ __('messages.special_character')}} (!@#$%^&*)");
            $('#d14').css("color", "green");
        } else {
            $('#d14').css("color", "red");
            $('#d14').html("<span class='fa fa-remove' aria-hidden='true'></span> &nbsp;1 {{ __('messages.special_character')}} (!@#$%^&*)");
            flag = 'F';
        }

        if (str.match(number_check)) {
            $('#d15').html("<span class='fa fa-check' aria-hidden='true'></span>&nbsp; 1 {{__('messages.number')}}");
            $('#d15').css("color", "green");
        } else {
            $('#d15').css("color", "red");
            $('#d15').html("<span class='fa fa-remove' aria-hidden='true'></span>&nbsp; 1 {{__('messages.number')}}");
            flag = 'F';
        }


        if (str.length > 7 && str.length<21) {
            // $('#d16').html("<span class='fa fa-check' aria-hidden='true'></span>&nbsp; Atleast 8 Character");
            $('#d16').html("<span class='fa fa-check' aria-hidden='true'></span>&nbsp; {{__('messages.password_length_between_characters')}}");
            $('#d16').css("color", "green");
        } else {
            $('#d16').css("color", "red");
            $('#d16').html("<span class='fa fa-check' aria-hidden='true'></span>&nbsp; {{__('messages.password_length_between_characters')}}");
            // $('#d16').html("<span class='fa fa-remove' aria-hidden='true'></span>&nbsp; Atleast 8 Character");

            flag = 'F';
        }

        $('.submit').prop('disabled', true);
        if (str.match(upper_text) && str.match(lower_text) && str.match(special_char) && str.match(number_check) && str.length > 7 == true && str.length<21 == true && $('#email').val() != '' && IsEmail($('#email').val()) && $("#confirm_password").val() != '' && str == $("#confirm_password").val()) {
            $('.submit').prop('disabled', false);
            return str.match(upper_text) && str.match(lower_text) && str.match(special_char) && str.match(number_check) && str.length>7 && str.length<21;
        }

    }
    $(document).ready(function() {
        $("#login-reset").validate({
            rules: {
                email: {
                    required: true,
                    email: true
                },
                password: {
                    required: true,
                },
                confirm_password: {
                    required: true,
                    equalTo: "#password"
                }
            },
            messages: {
                email: {
                    required: "{{__('messages.please_provide_an_email_address')}}",
                    email: "{{__('messages.please_enter_a_valid_email_address')}}",
                },
                password: {
                    required: "{{__('messages.enter_password')}}",
                },
                confirm_password: " {{__('messages.enter_confirm_password_same_as_password')}}"
            }
        });


        $(".password").on("focus", function() {
            pwcheck();
            $("#reset_pswd_info").addClass('d-block').removeClass('d-none');
        });

        $(".password").on("focusout", function() {
            $(".reset_pswd_info").removeClass('d-block').addClass('d-none');
        });
    });
    $("#confirm_password-error").hide();
    $('body').on('input','#email',function(){
        var confirm_password = $("#confirm_password").val();
        var email = $("#email").val();
        var password = $("#password").val();
        if(email === ""){
            $(".submit").attr('disabled', true);
            return false;
        }else{
            if(confirm_password === ""){
                $(".submit").attr('disabled', true);
                return false;
            }else if(password === ""){
                $(".submit").attr('disabled', true);
                return false;
            }else{
                if(IsEmail(email) == true){
                    $(".submit").attr('disabled', false);
                }else{
                    $(".submit").attr('disabled', true);
                    return false;
                }
                
            }
            
        }
    });

    function IsEmail(email) {
        var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if(!regex.test(email)) {
            return false;
        }else{
            return true;
        }
    }
    
    $('body').on('input','#confirm_password',function(){
        var confirm_password = $("#confirm_password").val();
        var email = $("#email").val();
        var password = $("#password").val();
        if(confirm_password === ""){
            $(".submit").attr('disabled', true);
            return false;
        }else{
            if(email === ""){
                $(".submit").attr('disabled', true);
                return false;
            }else if(password === ""){
                $(".submit").attr('disabled', true);
                return false;
            }else{
                if(confirm_password === password){
                    if(pwcheck){
                        $(".submit").attr('disabled', false);
                    }else{
                        $(".submit").attr('disabled', true);    
                    }
                }else{
                    $(".submit").attr('disabled', true);
                    return false;
                }
                
            }
            
        }
    });
</script>
@endsection