@extends('auth.layout')
@section('title')
Reset Password
@endsection

@section('login_css')

<style>
    .form-wrap input
    {
        text-transform: lowercase;
    }
    #password_checklist {
    list-style: none;
    padding-left: 0;
}

#password_checklist li {
    margin-bottom: 5px;
}

.checked i {
    color: green;
}

.unchecked i {
    color: red;
}
</style>
@endsection

@section('login_content')
    <div class="form-wrap form-wrap-reg">
        <div class="row justify-content-between">
            <div class="col-xxl-4 col-xl-4 col-lg-4 order-2-mob">
                <img src="{{ asset('assets/new-figma-data/images/login.png') }}" alt="login">
            </div>
            <div class="col-xxl-6 col-xl-7 col-lg-7 my-auto">
                <form id="update_password_form">
                    @csrf
                    <input type="hidden" value="{{ $token }}" name="token">
                    <h2>Reset Password!</h2>
                    <span class="text-center">Please enter your new password </span>
                    <div class="row">
                        <div class="col-lg-12">


                            <div class="input-group mb-3" id="show_hide_password">
                                <span class="input-group-text"><i class="fa fa-lock"></i></span>
                                <input type="password" class="form-control password" id="password" name="password" style="margin-bottom:0px;text-transform: none" placeholder="New password" value="" required>
                                <span class="input-group-text">
                                    <a href="">
                                        <i class="fa fa-eye-slash" id="togglePassword" style="cursor: pointer"></i>
                                    </a>
                                 </span>
                            </div>
                        </div>
                        <div class="col-lg-12">

                            <div class="input-group mb-3" id="show_hide_password2">
                                <span class="input-group-text"><i class="fa fa-lock"></i></span>
                                <input type="password" class="form-control password_confirmation" id="password" name="password_confirmation" style="margin-bottom:0px;text-transform: none" placeholder="Confirm password" value="" required>
                                <span class="input-group-text">
                                    <a href="">
                                        <i class="fa fa-eye-slash" id="togglePassword2" style="cursor: pointer"></i>
                                    </a>
                                </span>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <ul id="password_checklist">
                                <li id="lowercase_item" class="text-danger"><i class="fa fa-times "></i> Lowercase</li>
                                <li id="uppercase_item" class="text-danger"><i class="fa fa-times "></i> Uppercase</li>
                                <li id="digit_item" class="text-danger"><i class="fa fa-times "></i> Digit</li>
                                <li id="special_character_item" class="text-danger"><i class="fa fa-times "></i> Special Character</li>
                            </ul>
                        </div>
                    </div>
                    <div class="row last-form-row">
                        <div class="col-lg-12 text-center">
                            <button type="button" class="btn btn-prim generate_random_password" style="margin-top: -65px;"><i class="fa fa-refresh"
                                ></i> Generate </button>
                            <button type="submit" id="password_update_button" class="btn btn-prim" style="margin-top: -65px;"><i class="fa fa-spinner fa-spin fa-pulse"
                                style="display:none;"></i> Update Password</button>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <p>Forget it,
                            <a class="text-muted" href="{{ route('login')}}">
                                Send me back
                            </a>
                            to the sign in screen.
                        </p>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('login_script')
    <script>
        $(document).ready(function(){

            $("#show_hide_password a").on('click', function(event) {
                event.preventDefault();
                if($('#show_hide_password input').attr("type") == "text")
                {
                    $('#show_hide_password input').attr('type', 'password');
                    $('#togglePassword').addClass( "fa-eye-slash" );
                    $('#togglePassword').removeClass( "fa-eye" );
                }
                else if($('#show_hide_password input').attr("type") == "password")
                {
                    $('#show_hide_password input').attr('type', 'text');
                    $('#togglePassword').removeClass( "fa-eye-slash" );
                    $('#togglePassword').addClass( "fa-eye" );
                }
            });

            $('.password').on('input', function() {
        var password = $(this).val();
        var checklist = {
            lowercase: /[a-z]/.test(password),
            uppercase: /[A-Z]/.test(password),
            digit: /\d/.test(password),
            special_character: /[@$!%*?&]/.test(password)
        };

        $.each(checklist, function(key, value) {
            var item = $('#' + key + '_item');
            if (value) {
                item.removeClass('text-danger').addClass('text-success').find('i').removeClass('fa-times').addClass('fa-check');
            } else {
                item.removeClass('text-success').addClass('text-danger').find('i').removeClass('fa-check').addClass('fa-times');
            }
        });
    });

    $(".generate_random_password").on('click', function(e) {

e.preventDefault();

$.ajax({
    url: "/generate_random_password",
    type: "get",
    dataType: "JSON",
    cache: false,
    success: function (response) {

     $("#lowercase_item").removeClass('text-danger').addClass('text-success').find('i').removeClass('fa-times').addClass('fa-check');
     $("#uppercase_item").removeClass('text-danger').addClass('text-success').find('i').removeClass('fa-times').addClass('fa-check');
     $("#digit_item").removeClass('text-danger').addClass('text-success').find('i').removeClass('fa-times').addClass('fa-check');
     $("#special_character_item").removeClass('text-danger').addClass('text-success').find('i').removeClass('fa-times').addClass('fa-check');

        console.log(response)
        $(".password").val(response.password)
        $(".confirm_password").val(response.password)
    },

    error: function (error) {

        console.log(error);

    }

});


});

            $("#show_hide_password2 a").on('click', function(event) {
                event.preventDefault();
                if($('#show_hide_password2 input').attr("type") == "text")
                {
                    $('#show_hide_password2 input').attr('type', 'password');
                    $('#togglePassword2').addClass( "fa-eye-slash" );
                    $('#togglePassword2').removeClass( "fa-eye" );
                }
                else if($('#show_hide_password2 input').attr("type") == "password")
                {
                    $('#show_hide_password2 input').attr('type', 'text');
                    $('#togglePassword2').removeClass( "fa-eye-slash" );
                    $('#togglePassword2').addClass( "fa-eye" );
                }
            });

            $("#update_password_form").on('submit', (function(e) {

                e.preventDefault();

                $.ajax({

                    url: "/password/reset",

                    type: "post",

                    data: new FormData(this),

                    dataType: "JSON",

                    processData: false,

                    contentType: false,

                    cache: false,

                    beforeSend: function() {

                        $("#password_update_button").attr('disabled', true);

                        $(".fa-pulse").css('display', 'inline-block');

                    },

                    complete: function() {

                        $("#password_update_button").attr('disabled', false);

                        $(".fa-pulse").css('display', 'none');

                    },

                    success: function(response) {

                        if (response.status == "fail")
                        {

                            toastr.error('Failed', response.msg)

                        }
                        else if (response.status == "success")
                        {

                            toastr.success('Success', response.msg)

                            window.location.href = "{{route('login')}}";

                        }
                    },

                    error: function(error) {

                        console.log(error);

                    }

                });

            }));
        });
    </script>
@endsection