@extends('main-page')
@section('title')
   Reset Password
@endsection
@section('main-contents')
<style type="text/css">
.eye-icon{
    width: 100%;
    position: relative;
}
.right-icon{
    position: absolute;
    top: 40%;
    right: 0px;
    cursor: pointer;
    font-size: 19px;
}
.right-icon-2{
    position: absolute;
    top: 20%;
    right: 0px;
    cursor: pointer;
    font-size: 19px;
}
#captcha-btn {
    margin-right: 10px;
    padding: 9px 7px;
    border: 2px solid #59595D;
    border-radius: 20px;
    height: 36px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
</style>

    <div class="login-page bg-image pt-1 pb-1 pt-md-0 pb-md-0 pt-lg-2 pb-lg-0"" style="background-color:##FFF4EC">
        <!-- style="background-image: url('assets/images/backgrounds/login-bg.jpg')"  -->
        <div class="container">
            <div class="form-box">
                <p style="text-align: center;font-size: 25px;font-weight:bold">RESET PASSWORD</p>
                <div class="form-tab">
                    <div class="tab-pane active" id="signin-2" role="tabpanel" aria-labelledby="signin-tab-2">
                            <form action="#">
                                <div class="form-group eye-icon">
                                    <input type="password" class="form-control custom-design-input" id="password" name="singin-email" placeholder="NEW PASSWORD *" required>
                                    <span id="tooglePassword1">
                                        <i class="fa-solid fa-eye-slash right-icon" id="eye-open1"></i>
                                        <i class="fa-solid fa-eye right-icon eye-close" id="eye-close1"></i>
                                    </span>
                                    <div id="passwordMsg" class="error-msg-color"></div>
                                </div><!-- End .form-group -->
                                <div class="form-group eye-icon">
                                    <input type="password" class="form-control custom-design-input" id="confirmPassword" name="singin-email" placeholder="CONFIRM NEW PASSWORD *" required>
                                    <span id="tooglePassword2">
                                        <i class="fa-solid fa-eye-slash right-icon-2" id="eye-open2"></i>
                                        <i class="fa-solid fa-eye right-icon-2 eye-close"  id="eye-close2"></i>
                                    </span>
                                    <div id="confirmPasswordMsg" class="error-msg-color">PASSWORD MUST BE AT LEAST 9 CHARACTERS LONG WITH LETTERS, NUMBERS AND 1 SPECIAL CHARACTER</div>
                                </div><!-- End .form-group -->
                                    <button type="button" class="login-reg-btn" onclick="changedUserPassword()">
                                        <span>SUBMIT</span>
                                </button>
                                <div class="form-footer">
                                    <div class="custom-control" style="text-align: center; width: 75%;">
                                        
                                    <a href="#" onclick="redirectToSignin()" class="forgot-link" >BACK TO SIGN IN</a>
                                    </div><!-- End .custom-checkbox -->

                                </div><!-- End .form-footer -->
                            </form>
                        </div><!-- .End .tab-pane -->
                </div><!-- End .form-tab -->
            </div><!-- End .form-box -->
        </div><!-- End .container -->
    </div><!-- End .login-page section-bg -->
    <script type="text/javascript">
         document.addEventListener('DOMContentLoaded', () => {
        showPreloader();
            setTimeout(() => {
                hidePreloader();
            }, 2000);
        });
        const passwordEvent = document.getElementById('tooglePassword1');
        passwordEvent.addEventListener('click',(e) =>{
            const password = document.getElementById('password');
            if (password.type === 'password') {
                password.type = 'text';
                document.getElementById('eye-close1').style.display = 'block';
                document.getElementById('eye-open1').style.display = 'none';
            } else {
                password.type = 'password';
                document.getElementById('eye-close1').style.display = 'none';
                document.getElementById('eye-open1').style.display = 'block';
            }
        });
        const passwordEvent2 = document.getElementById('tooglePassword2');
        passwordEvent2.addEventListener('click',(e) =>{
            const password = document.getElementById('confirmPassword');
            if (password.type === 'password') {
                password.type = 'text';
                document.getElementById('eye-close2').style.display = 'block';
                document.getElementById('eye-open2').style.display = 'none';
            } else {
                password.type = 'password';
                document.getElementById('eye-close2').style.display = 'none';
                document.getElementById('eye-open2').style.display = 'block';
            }
        });
        async function  changedUserPassword(){
        try{
            let password = document.getElementById('password').value;
            let confirmPassword = document.getElementById('confirmPassword').value;
          
            if(password==""){
                document.getElementById('eye-close1').style.top = "27%";
                document.getElementById('eye-open1').style.top = "27%";
                document.getElementById('password').style.borderBottom="2px solid #ED1C24";
                document.getElementById('passwordMsg').innerText = "Please fill in this field";
            }else{
                document.getElementById('passwordMsg').innerText = ""; 
                if (isValidPassword(password)) {
                    document.getElementById('passwordMsg').innerText = ""; 
                    document.getElementById('password').style.borderBottom="2px solid #000000";
                } else {
                    document.getElementById('eye-close1').style.top = "20%";
                    document.getElementById('eye-open1').style.top = "20%";
                    document.getElementById('password').style.borderBottom="2px solid #ED1C24";
                    document.getElementById('passwordMsg').innerText = "PASSWORD MUST BE AT LEAST 9 CHARACTERS LONG WITH LETTERS, NUMBERS AND 1 SPECIAL CHARACTER"; 
                    return false; 
                }
            }
            if(confirmPassword==""){
                document.getElementById('eye-close2').style.top = "27%";
                document.getElementById('eye-open2').style.top = "27%";
                document.getElementById('confirmPassword').style.borderBottom="2px solid #ED1C24";
                document.getElementById('confirmPasswordMsg').innerText = "Please fill in this field"; 
            }else{
                document.getElementById('confirmPasswordMsg').innerText = ""; 
                document.getElementById('confirmPassword').style.borderBottom="2px solid #000000";
            }
            if(confirmPassword!="" && password!=""){
                if(confirmPassword!=password){
                    document.getElementById('eye-close2').style.top = "27%";
                    document.getElementById('eye-open2').style.top = "27%";
                    document.getElementById('confirmPassword').style.borderBottom="2px solid #ED1C24";
                    document.getElementById('confirmPasswordMsg').innerText = "CONFIRM PASSWORD IS NOT MATCH WITH PASSWORD"; 
                }else{
                    const token = '{{csrf_token()}}';
                    const currentUrl = window.location.pathname;
                    const encryptedId = currentUrl.split('/').pop();
                    let formData={
                        confirmPassword:confirmPassword,
                        password:password,
                    }
                    const headers = {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json',
                    };
                    showPreloader();
                    let URL=`http://127.0.0.1:8000/reset-user-password/${encryptedId}`;
                    let result = await axios.post(URL,formData,{ headers });
                    if(result.status == 200 && result.data['status']=='success'){
                        hidePreloader();
                        showNotification('Password has been changed successfully');
                        setTimeout(() => {
                            window.location.href="/sign-in";
                        }, "3000");
                    }
                }
			}
           
        }catch(error){
            alert(error.message);
        }
    }
    function isValidPassword(password) {
        var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{9,}$/;
        return passwordRegex.test(password);
    }

    const confirmPassword = document.getElementById('confirmPassword');
    confirmPassword.addEventListener('input', ()=>{
        if(confirmPassword.value!=""){
            document.getElementById('confirmPasswordMsg').innerHTML="";
            document.getElementById('confirmPassword').style.borderBottom="2px solid #59595D";
        }else{
            document.getElementById('confirmPasswordMsg').innerHTML="Please fill in this field";
            document.getElementById('confirmPassword').style.borderBottom="2px solid #ED1C24";  
        }
    });
    const password= document.getElementById('password');
    password.addEventListener('input', ()=>{
        if(password.value!=""){
            document.getElementById('passwordMsg').innerHTML="";
            document.getElementById('password').style.borderBottom="2px solid #59595D";
        }else{
            document.getElementById('passwordMsg').innerHTML="Please fill in this field";
            document.getElementById('password').style.borderBottom="2px solid #ED1C24";  
        }
    });
    </script>
@endsection