@extends('layouts.app-Auth')
@section('content')
<div class="auth-wrapper auth-v1 px-2">
    <div class="auth-inner py-2">
        <!-- Login v1 -->
        <div class="card mb-0">
            <div class="card-body">
                <a href="{{route('index')}}" class="brand-logo">
                <img id="auth_logo" src="{{static_asset('')}}front/assets/images/logo.png" alt="logo"  />
                </a>

                <h4 class="card-title mb-1">Reset Password 🔒</h4>
                <p class="card-text mb-2">Your new password must be different from previously used passwords</p>

                @if(Session::has('message'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{Session::get('message') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                    @endif
                <form class="auth-login-form mt-2" method="POST" action="{{ route('password.update') }}" >
                @csrf                  
                    <div class="form-group">
                        <label for="login-email" class="form-label">Email</label>
                        <input type="text" class="form-control @error('email') is-invalid @enderror" id="login-email" placeholder="john@example.com" aria-describedby="login-email" name="email" value="{{ $email ?? old('email') }}" required autocomplete="email" tabindex="1" autofocus />
                        @error('email')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="login-password" class="form-label">Password</label>
                        <div class="input-group input-group-merge form-password-toggle">
                            <input type="password" onchange="CheckPassword()" onkeyup="CheckPassword()" onpaste="CheckPassword()" class="form-control form-control-merge @error('password') is-invalid @enderror" id="login-password" name="password" tabindex="2" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"  autocomplete="current-password" aria-describedby="login-password" />
                            <div class="input-group-append">
                                <span class="input-group-text cursor-pointer"><i data-feather="eye"></i></span>
                            </div>
                        </div>
                        @error('password')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>                    
                    <div class="form-group">
                        <label for="login-re-password" class="form-label">Confirm Password</label>
                        <div class="input-group input-group-merge form-password-toggle">
                            <input type="password"  onkeyup="return validatePassword(event)" onpaste="return validatePassword(event)" onchange="return validatePassword(event)" class="form-control form-control-merge @error('password_confirmation') is-invalid @enderror" id="login-re-password" name="password_confirmation" tabindex="3" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"  aria-describedby="login-re-password" />
                            <div class="input-group-append">
                                <span class="input-group-text cursor-pointer"><i data-feather="eye"></i></span>
                            </div>
                        </div>
                        @error('password_confirmation')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                    <button class="btn btn-primary btn-block" tabindex="4">Update</button>
                </form>

                <p class="text-center mt-2">
                    <span>Already have an account?</span>
                    <a href="{{route('login')}}">
                        <span>Login</span>
                    </a>
                </p>

                <div class="divider my-2">
                    <div class="divider-text">or</div>
                </div>

                <div class="auth-footer-btn d-flex justify-content-center">
                    <a href="{{route('index')}}">
                        <span>Go to home</span>
                    </a>
                </div>
                
            </div>
        </div>
        <!-- /Login v1 -->
    </div>
    @push('custom-scripts')
    <script type="text/javascript">
        function validate(evt) {
            var theEvent = evt || window.event;

            // Handle paste
            if (theEvent.type === 'paste') {
                key = event.clipboardData.getData('text/plain');
            } else {
                // Handle key press
                var key = theEvent.keyCode || theEvent.which;
                key = String.fromCharCode(key);
            }
            var regex = /[0-9]|\./;
            if( !regex.test(key) ) {
                theEvent.returnValue = false;
                if(theEvent.preventDefault) theEvent.preventDefault();
            }
        }
        function checkEntry(e) {
            var k;
            document.all ? k = e.keyCode : k = e.which;
            return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));
        }
        function CheckPassword() {
            pass = document.getElementById("password").value;
            regex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;
            if (regex.exec(pass) == null) {
                //return false;
                $("#validate-length").text("Password Minimum 8 character and One Upper case One lower case one digit and 0ne special character ");
                document.getElementById("validate-length").style.color = "#FF0000";
                document.getElementById("kt_login_signin_submit").style.cursor = "not-allowed";
                document.getElementById("kt_login_signin_submit").disabled = true;
                document. getElementById("validate-length"). style. display = "block";
            }
            else {
                document. getElementById("validate-length"). style. display = "none";
                document.getElementById("kt_login_signin_submit").removeAttribute('disabled');
                document.getElementById("kt_login_signin_submit").style.cursor = "pointer";
            }
        }
        $(document).ready(function() {
            $("#password_confirmation").keyup(validatePassword);
        });
        function validatePassword() {
            var password1 = $("#password").val();
            var password2 = $("#password_confirmation").val();
            if(password1 == password2) {
                $("#validate-status").text("Password Matched");
                document.getElementById("validate-status").style.color = "#52bb2a";
                document.getElementById("kt_login_signin_submit").removeAttribute('disabled');
                document.getElementById("kt_login_signin_submit").style.cursor = "pointer";
            }
            else {
                $("#validate-status").text("Password Not Matched");
                document.getElementById("validate-status").style.color = "#FF0000";
                document.getElementById("kt_login_signin_submit").style.cursor = "not-allowed";
                document.getElementById("kt_login_signin_submit").disabled = true;
            }
        }
    </script>
@endpush
</div>
@endsection