@extends('auth.master')
@section('auth-body')
{!! Form::open(['route'=>'set-password','class'=>'theme-forest login-form summit-form','method'=>'POST']) !!}
<h4>Set Password</h4>
@if(Session::get('errorMessage'))
<div class="alert alert-danger dark alert-dismissible fade show text-center" role="alert">
    <p>{!! Session::get('errorMessage') !!}</p>
    <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
<div class="form-group" onClick="block()">
    <div class="input-group"><span class="input-group-text"><i class="icon-lock"></i></span>
        <input onkeyup="valid()"  onfocusout="validatePassword(this, 'new-password-required-error')" class="form-control" type="password" name="password" id="password" required="" placeholder="New Password">
        <span style="z-index: 5;" onClick="show('password')" class="position-absolute top-50 end-0 translate-middle"><i class="icon-eye"></i></span>
    </div>
    <p id="new-password-required-error" class="error-1" style="color:red;text-align:left;padding-left:40px;"></p>
    <div name="checking" style="display: none" class="p-2 mt-2 text-danger bg-light">
        <p name="valid">WEAK</p>
        <ul>
            <li name="valid">8 to 128 characters</li>
            <li name="valid">At least one Upper Case character (A-Z)</li>
            <li name="valid">At least one Lower Case character (a-z)</li>
            <li name="valid">At least one Numeric Character (0-9)</li>
            <li name="valid">At least one Special Character</li>
        </ul>
    </div>
</div>

<div class="form-group">
    <div class="input-group"><span class="input-group-text"><i class="icon-lock"></i></span>
        <input class="form-control password" type="password" name="password_confirmation" id="confirm-password" onclick="hide()" onkeyup="valid()" onfocusout="validatePassword(this, 'confirm-password-required-error')" required="" placeholder="Confirm Password" autocomplete="off">
        <span style="z-index: 5;" onClick="show('confirm-password')" class="position-absolute top-50 end-0 translate-middle"><i class="icon-eye"></i></span>
    </div>
    <p id="confirm-password-required-error" class="error-1" style="color:red;text-align:left;padding-left:40px;"></p>
</div>

<div class="form-group">
    <input type="hidden" name="verification" value="{{$body}}">
    <input type="hidden" id="password-strength" value="0">
    <div class="d-flex justify-content-end">
        <a href="/" class="btn btn-light m-0" data-bs-dismiss="modal">Cancel</a>
        <button class="btn btn-primary btn-block submit-btn ms-1" type="submit" disabled id="submit-btn">Set Password</button>
    </div>
</div>

{!! Form::close() !!}
@endsection

<script>
    var checking = document.getElementsByName("checking");
    var errors = document.getElementsByName("valid"); 
    
    function valid () {
        let newPassword = $('#password').val();
        let confirmPassword = $('#confirm-password').val();
        let strength = 0;
        
        if(newPassword.length > 7){
            errors[1].style.color = "green"
        }else {
            errors[1].style.color = "red"
        }
        if(newPassword.match(/[A-Z]/)){
            errors[2].style.color = "green"
        }else {
            errors[2].style.color = "red"
        }
        if(newPassword.match(/[a-z]/)){
            errors[3].style.color = "green"
        }else {
            errors[3].style.color = "red"
        }
        if(newPassword.match(/[0-9]/)){
            errors[4].style.color = "green"
        }else {
            errors[4].style.color = "red"
        }
        if(newPassword.match(/\W|_/g)){
            errors[5].style.color = "green"
        }else {
            errors[5].style.color = "red"
        }

        for (let i = 1; i < errors.length; i++) {
            if(errors[i].style.color == "green"){
                strength++;
            }
        }

        if(strength == 5) {
            errors[0].innerHTML = "STRONG"
            errors[0].style.color = "green"
        }else if(strength == 4) {
            errors[0].innerHTML = "FAIR"
            errors[0].style.color = "brown"
        }else{
            errors[0].innerHTML = "WEAK"
            errors[0].style.color = "red"
        }
        
        $('#password-strength').val(strength);
        checkIfHasSameValue(newPassword, confirmPassword, strength)
    }
    
    function hide () {
        console.log("hide")
        checking[0].style.display = "none"
    }
    
    function block () {
        console.log("block")
        checking[0].style.display = "block";
    }

    function validatePassword(elem, containMessage) {
        
        let newPassword = $('#password').val();
        let confirmPassword = $('#confirm-password').val();
        let thisPassword = elem.value;
        let passwordStrength = $('#password-strength').val();
        let errorMessage = "";

        console.log(containMessage)
        if (thisPassword == "") {
            errorMessage = "*This field is required.";
            $('#'+containMessage).html(errorMessage);
        }
    }

    function checkIfHasSameValue (password, confirmPassword, passwordStrength) {
        console.log(passwordStrength)
        if (password !== confirmPassword && confirmPassword !== "") {
            $('#confirm-password-required-error').html("New Password and Confirm Password do not match");
        }else {
            $('#confirm-password-required-error').html("");
        }
        
        if(password.length < 8){
            $('#new-password-required-error').html("Must be atleast 8 character");
        }else if(passwordStrength < 4){
            $('#new-password-required-error').html("PASSWORD IS WEAK");
        }else {
        $('#new-password-required-error').html("");
        }
        
        let isDisable = password === confirmPassword && password.length > 7 && passwordStrength >= 4 ? false : true;

        $('#submit-btn').prop('disabled', isDisable);
    }

</script>