@extends('layouts.member-login')
@section('title','Create Permanent 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">Create Permanent Password</h3>
                                    <!--<div class="kt-login__desc text-white">Enter your email to reset your password:</div>-->
                                </div>
                                <form class="kt-form" method="POST" id="updatePasswordForm"  action="{{ getURL('first-time-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>
                                    <div class="input-group col-lg-12">
                                        <input class="form-control w-100" type="password" placeholder="Reenter New Password:" name="password_confirmation" id="password_confirmation">
                                    </div>
                                    <div class="kt-login__actions">
                                        <input type="submit" class="btn btn-primary w-100 d-block formSubmitButton" value="Login">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<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;">Request Password Reset</button>

@endsection

@section('page_level_js')
<script src="{{asset('assets/vendors/general/jquery-validation/dist/jquery.validate.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/vendors/general/jquery-validation/dist/additional-methods.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/vendors/custom/js/vendors/jquery-validation.init.js')}}" type="text/javascript"></script>
@endsection

@push('footerscript')
<script>

$(document).on('click', '#showPassword', function () {
    var x = document.getElementById("password");
    if (x.type === "password") {
        x.type = "text";
    } else {
        x.type = "password";
    }
});

$("#updatePasswordForm").validate({
    rules: {
        password: {
            required: true,
            regex: /^(?=.{10,}$)(?=(?:.*?[A-Z]){3})(?=(?:.*?[0-9]){2})(?:.*?[!@#$%^&*]{1}).*$/
        },
        password_confirmation: {
            required: true,
            equalTo: "#password",
        },
    },
    messages: {
        password: {
            required: "The credentials you've provided either do not meet the minimum requirements or do not match. Please try again.",
            regex: "The credentials you've provided either do not meet the minimum requirements or do not match. Please try again."
        },
        password_confirmation: {
            required: "The credentials you've provided either do not meet the minimum requirements or do not match. Please try again.",
            equalTo: "The credentials you've provided either do not meet the minimum requirements or do not match. Please try again.",
        },
    },
    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('Permanent Password');
        $('.resetPasswordText').html("{{$errors->first('message')}}");
        $("#resetSuccessModelButton").trigger("click");
    @endif
@endif
</script>
@endpush