@extends('layouts.member-login')
@section('title','Reset Password')
@section('page_title','')

@section('page_level_css')
@endsection

@section('content')

<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">
    <div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid">
        <div class="kt-grid kt-grid--ver kt-grid--root bg-white radius-15">
            <div class="kt-grid kt-grid--hor kt-grid--root kt-login kt-login--v3  kt-login--signin" id="kt_login">

                <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor">
                    <div class="kt-grid__item kt-grid__item--fluid kt-login__wrapper pt-5">
                        <div class="logo-big-center text-center">
                            <img alt="Logo" src="{{getURL('assets/media/logos/login-blue-logo.png')}}" />
                        </div>
                        <div class="kt-login__container">
                            <div class="kt-login__forgot" style="display: block;">
                                <div class="kt-login__head">
                                    <h3 class="kt-login__title">Password Reset</h3>
                                </div>
                                <form class="kt-form" method="POST" id="updatePasswordForm"  action="{{ getURL('update-password') }}">
                                    @csrf
                                    <input type="hidden" name="token" value="{{ $token }}">
                                    <p class="information-text">In order to complete your registration, you will need to provide a permanent password for your account. 
                                        Your password must be a minimum of (10) characters, and must contain at least 
                                        (3) capital letters, (2) numbers, and at least (1) special character. 
                                        Special characters include the following: 
                                        "!, @, #, $, %, ^, &, *"
                                        <br><br>
                                        Example 1 : TerR!4r9xAz2<br>
                                        Example 2 : Ri5ss%8YY30x!
                                    </p>

                                    <div class="input-group col-lg-12">
                                        <input class="form-control w-100" type="password" placeholder="Enter New Password" name="password" id="password">
                                        <div class="input-group-append w-20 resetIconManager">
                                            <span class="input-group-text" id="showPassword">
                                                <i class="la la-eye"></i>
                                                <i class="la la-eye-slash" style="display: none;"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="input-group col-lg-12">
                                        <input class="form-control w-100" type="password" placeholder="Retype New Password" name="password_confirmation" id="password_confirmation">
                                        <div class="input-group-append w-20 resetIconManager">
                                            <span class="input-group-text" id="showRePassword">
                                                <i class="la la-eye"></i>
                                                <i class="la la-eye-slash" style="display: none;"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="kt-login__actions">
                                        <input type="submit" class="btn btn-primary w-100 d-block formSubmitButton" id="formSubmitButton" value="Accept New Password" disabled>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<div class="modal fade" id="loginFail" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title" id="loginFailTitle">Invalid Login Credentials</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i aria-hidden="true" class="ki ki-close"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <p>The credentials you entered are incorrect. If you believe this is in error, then try again. If this issue persists, contact your system administrator for additional information.</p>
                </div>
            </div>
            <div class="modal-footer border-top-0 d-flex justify-content-center">
                <button type="button" class="btn btn-custom btn-pill font-weight-bold" data-dismiss="modal">CLOSE</button>
            </div>
        </div>
    </div>
</div>
<button id="loginFailButton" class="btn kt-login__btn-primary btn-pill btn-custom" data-toggle="modal" data-target="#loginFail" style="display: none;">Login Fail</button>

<div class="modal fade" id="resetSuccessModel" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered " role="document">
        <div class="modal-content">
            <div class="modal-header custom-blue-header">
                <h5 class="modal-title resetSuccessModelTitle">Reset Password</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i aria-hidden="true" class="ki ki-close"></i>
                </button>
            </div>
            <div class="modal-body pb-0">
                <div class="text-center">
                    <p class="resetPasswordText">Your request to reset your password has begun. Please check your email for additional information and instructions.</p>
                </div>
            </div>
            <div class="modal-footer border-top-0 d-flex justify-content-center">
                <button type="button" class="btn btn-custom btn-pill font-weight-bold border-radius-50" data-dismiss="modal">Got it!</button>
            </div>
        </div>
    </div>
</div>
<button id="resetSuccessModelButton" class="btn kt-login__btn-primary btn-pill btn-custom" data-toggle="modal" data-target="#resetSuccessModel" style="display: none;">Show Contact Us</button>

@endsection

@push('page_level_script')

@endpush

@push('footerscript')
<script>

    $(document).on('click', '#showPassword', function () {
        var x = document.getElementById("password");
        if (x.type === "password") {
            x.type = "text";
            $("#showPassword .la-eye").hide();
            $("#showPassword .la-eye-slash").show();
        } else {
            x.type = "password";
             $("#showPassword .la-eye").show();
            $("#showPassword .la-eye-slash").hide();
        }
    });
    $(document).on('click', '#showRePassword', function () {
        var x = document.getElementById("password_confirmation");
        if (x.type === "password") {
            x.type = "text";
            $("#showRePassword .la-eye").hide();
            $("#showRePassword .la-eye-slash").show();
        } else {
            x.type = "password";
            $("#showRePassword .la-eye").show();
            $("#showRePassword .la-eye-slash").hide();
        }
    });
    
    $("#updatePasswordForm input, #updatePasswordForm textarea").keyup(function() {
        if($('#password').val() != '' && $('#password_confirmation').val() != '') {
            $("#formSubmitButton").prop('disabled', false);
            //console.log('Enabled');
        } else {
            $("#formSubmitButton").prop('disabled', true);
            //console.log('Disabled');
        }
    });

    $("#updatePasswordForm").validate({
        rules: {
            password: {
                required: true,
                regex: /^(?=.{10,}$)(?=(?:.*?[A-Z]){3})(?=(?:.*?[0-9]){2})(?:.*?[!@#$%^&*]{1}).*$/
            },
            password_confirmation: {
                required: true,
                equalTo: "#password",
            }
        },
        messages: {
            password: {
                required: "You must use must be a minimum of 10 characters, 3 capital letters and 2 numbers, and at least (1) special character.",
                regex: "You must use must be a minimum of 10 characters, 3 capital letters and 2 numbers, and at least (1) special character."
            }
        },
        invalidHandler: function (event, validator) {
            var alert = $('#kt_form_1_msg');
            alert.removeClass('kt--hide').show();
            KTUtil.scrollTop();
        },
        submitHandler: function (form) {
            form.submit();
        }
    });

    @if ($errors->first('message'))
        @if ($errors->first('status') == '0')
            $('.resetSuccessModelTitle').html('Reset Password');
            $('.resetPasswordText').html("{{$errors->first('message')}}");
            $("#resetSuccessModelButton").trigger("click");
        @endif
    @endif
</script>
@endpush