@extends('layouts.loginmaster')

@section('title', 'Reset Password')

@section('content')
    <!-- Content -->

    <div class="container-xxl">
        <div class="authentication-wrapper authentication-basic container-p-y">
            <div class="authentication-inner py-4">
                <!-- Reset Password -->
                <div class="card">
                    <div class="card-body">
                        <!-- Logo -->
                        <div class="app-brand justify-content-center mb-4 mt-2">
                            <a href="index.html" class="app-brand-link gap-2">
                                <span class="app-brand-logo demo">
                                    <img src="{{ asset(config('const.APP_LOGO')) }}" alt="logo">
                                </span>
                            </a>
                        </div>
                        <!-- /Logo -->
                        <h4 class="mb-1 pt-2">Reset Your Password 🔒</h4>

                        <form id="password_reset_form" action="{{ route('password.update', ['token' => Request()->token]) }}"
                            method="POST">
                            @csrf
                            <div class="mb-3 form-password-toggle">
                                <label class="form-label" for="password">New Password</label>
                                <div class="input-group input-group-merge">
                                    <input type="password" id="password" class="form-control" name="password"
                                        placeholder="Enter Password" aria-describedby="password" />
                                    <span class="input-group-text cursor-pointer"><i id="password_show_icon"
                                            class="ti ti-eye-off"></i></span>
                                </div>
                            </div>
                            <div class="mb-3 form-password-toggle">
                                <label class="form-label" for="confirm-password">Confirm Password</label>
                                <div class="input-group input-group-merge">
                                    <input type="password" id="password_confirmation" class="form-control"
                                        name="password_confirmation" placeholder="Enter Confirm Password"
                                        aria-describedby="password" />
                                    <span class="input-group-text cursor-pointer"><i id="confirm_password_show_icon"
                                            class="ti ti-eye-off"></i></span>
                                </div>
                            </div>
                            <button class="btn btn-primary w-100 mb-3 submitbutton">
                                <span class="spinner-border me-1 loader-btn d-none" role="status"
                                    aria-hidden="true"></span> Set New Password
                            </button>
                            <div class="text-center">
                                <a href="{{ route('admin.login.show') }}">
                                    <i class="ti ti-chevron-left scaleX-n1-rtl"></i>
                                    Back to login
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- /Reset Password -->
            </div>
        </div>
    </div>

    <!-- / Content -->
@endsection


@section('scripts')
    <script>
        $(document).ready(function() {
            $("#password_reset_form").validate({
                rules: {
                    password: {
                        required: true,
                        minlength: 8,
                        password: true,
                        maxlength:16
                    },
                    password_confirmation: {
                        required: true,
                        password: false,
                        equalTo: "#password"
                    },
                },
                messages: {
                    password_confirmation: {
                        required: "This field is required.",
                        equalTo: "New Password and Confirm Password does not match."
                    }

                },
                submitHandler: function(form) {
                    $('.loader-btn').removeClass("d-none");
                    $(".submitbutton").attr("type", "button");
                    $('.submitbutton').prop('disabled', true);
                    form.submit();
                },
                errorPlacement: function(error, element) {
                    if (element.attr("id") == "password" || element.attr("id") ==
                        "password_confirmation") {
                        error.insertAfter(element.parent("div"));
                    } else {
                        error.insertAfter(element);
                    }
                },
                /* This method is used when input is invalid it will add error class*/
                highlight: function(element, errorClass, validClass) {
                    if ($(element).attr("id") == "password" || $(element).attr("id") ==
                        "password_confirmation") {
                        $(element).addClass("has-error");
                        $(element).next('span').addClass('has-error');
                        $($(element).parent("div")).addClass("is-invalid");
                    } else {
                        $(element).addClass("has-error");
                    }
                },
                /* This method is used when input is valid it will remove error class*/
                unhighlight: function(element, errorClass, validClass) {
                    if ($(element).attr("id") == "password" || $(element).attr("id") ==
                        "password_confirmation") {
                        $(element).removeClass("has-error");
                        $(element).next('span').removeClass('has-error');
                        $($(element).parent("div")).removeClass("is-invalid");
                    } else {
                        $(element).removeClass("has-error");
                    }
                }
            });

            $.validator.addMethod("password", function(value, element) {
                let password = value;
                if (!(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[#?!@$%^&*-])/.test(password))) {
                    return false;
                }
                return true;
            }, function(value, element) {
                let password = $(element).val();
                if (!(/^(?=.*[A-Z])/.test(password))) {
                    return "@lang('admin.uppercasePassword')";
                } else if (!(/^(?=.*[a-z])/.test(password))) {
                    return "@lang('admin.lowercasePassword')";
                } else if (!(/^(?=.*[0-9])/.test(password))) {
                    return "@lang('admin.digitPassword')";
                } else if (!(/^(?=.*[#?!@$%^&*-])/.test(password))) {
                    return "@lang('admin.specialcharacterPassword')";
                }
                return false;
            });

            $('#password_show_icon').on('click', function() {
                if ($(this).hasClass('ti-eye-off')) {
                    $(this).removeClass('ti-eye-off');
                    $(this).addClass('ti-eye');
                    $('#password').attr('type', 'text');
                } else {
                    $(this).removeClass('ti-eye');
                    $(this).addClass('ti-eye-off');
                    $('#password').attr('type', 'password');
                }
            })

            $('#confirm_password_show_icon').on('click', function() {
                if ($(this).hasClass('ti-eye-off')) {
                    $(this).removeClass('ti-eye-off');
                    $(this).addClass('ti-eye');
                    $('#password_confirmation').attr('type', 'text');
                } else {
                    $(this).removeClass('ti-eye');
                    $(this).addClass('ti-eye-off');
                    $('#password_confirmation').attr('type', 'password');
                }
            })
        });
    </script>
@endsection