@extends('auth.layout')
@section('title')
Set 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="set_password_form">
                    @csrf
                    <input type="hidden" value="{{ $token }}" name="token">
                    <h2>Set Password To Continue</h2>
                    <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="Enter 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 confirm_password" id="password" name="password_confirmation" style="margin-bottom:0px;text-transform: none" placeholder="Enter 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 text-end">
                            <button type="button" class="btn btn-prim generate_random_password"><i class="fa fa-refresh"
                                ></i> Generate a strong password </button>
                        </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-end">
                            

                                <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> Set Password</button>
                        </div>
                    </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');
            }
        });
    });

            $("#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" );
                }
            });
            $(".generate_random_password").on('click', function(e) {

                e.preventDefault();
                $('#show_hide_password2 input').attr('type', 'text');
                $('#togglePassword2').removeClass( "fa-eye-slash" );
                $('#togglePassword2').addClass( "fa-eye" );

                $('#show_hide_password input').attr('type', 'text');
                $('#togglePassword').removeClass( "fa-eye-slash" );
                $('#togglePassword').addClass( "fa-eye" );

                $.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);

                    }

                });


            });
            

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

                e.preventDefault();

                $.ajax({

                    url: "/api/password/verify",

                    type: "post",

                    data: new FormData(this),

                    dataType: "JSON",

                    processData: false,

                    contentType: false,

                    cache: false,

                    beforeSend: function () {

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

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

                    },

                    complete: function () {

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

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

                    },

                    success: function (response) {

                        console.log(response)

                        if (response["status"] == "fail") {

                            toastr.error('Failed',response["msg"])

                        } else if (response["status"] == "success") {

                            toastr.success('Success',response["msg"])

                            $("#set_password_form")[0].reset();

                            setTimeout(function(){
                                window.location.href = response.redirect;
                            }, 1800); // 5000 milliseconds = 1.8 seconds

                        }

                        else if (response["status"] == "server") {

                            toastr.error('Warning',response["msg"])

                            $("#set_password_form")[0].reset();

                        }

                        else if (response["status"] == "deactive") {

                            toastr.error('Not Allowed',response["msg"])

                            $("#set_password_form")[0].reset();

                        }

                    },

                    error: function (error) {

                        console.log(error);

                    }

                });

            }));

        });
    </script>
@endsection