@extends('layouts.app')
<title>InsureMe | Verify OTP</title>
@section('content')
    <style>
        .shadow {
            box-shadow: 0 8px 15px -6px black;
        }

        @media (min-width: 992px) {
            .card-mod {
                margin-left: 34%;
            }
        }
    </style>
    <div class="container">
        <div style="text-align: center;">
            <h1>Change Password</h1>
        </div>
        <div class="row">
            <div class="col-sm-4 card-mod">
                <div class="card shadow">
                    <div class="card-body">
                        {!! $errors->first('change-password-error', '<div class="alert alert-danger"><strong>Error!</strong> :message</div>') !!}
                        @csrf
                        <form action="{{route('change-password')}}" method="post">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <div class="form-group">
                                <label for="agent_code">Agent Code</label>
                                <div class="input-group">
                                    <input type="text" readonly class="form-control" name="agent_code" id="agent_code" value="{{$agent_code}}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="password">New Password</label>
                                <div class="input-group">
                                    <input type="password" required maxlength="20" minlength="6" class="form-control" name="password" id="password" onkeyup="CheckPasswordStrength(this.value)">
                                </div>
                                <span id="capitol" style="color: red">&#10539; Capitol Letters (A-Z)</span><br>
                                <span id="simple" style="color: red">&#10539; Simple Letters (a-z)</span><br>
                                <span id="numbers" style="color: red">&#10539; Numbers (0-9)</span><br>
                                <span id="special" style="color: red">&#10539; Special Characters (Eg: @#$%^)</span><br>
                            </div>
                            <div class="form-group">
                                <label for="password_confirm" >Confirm Password</label>
                                <div class="input-group">
                                    <input type="password" required maxlength="20" minlength="6" class="form-control" name="password_confirm" id="password_confirm" onkeyup="CheckPasswordConfirm(this.value)">
                                </div>
                                <span id="password_confirm_match" style="color: red">&#10539; Password doesn't match</span>
                            </div>

                            <button class="btn btn-primary" disabled="true" id="btn_save" type="submit">Save</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            function CheckPasswordStrength(password) {
                //Regular Expressions.
                const regex = {
                    capitol: "[A-Z]",
                    simple: "[a-z]",
                    numbers: "[0-9]",
                    special: "[$@$!%*#?&]"
                };

                let passed = {}, validPassword = false;

                for (let key in regex) passed[key] = new RegExp(regex[key]).test(password);
                for (let key in regex) {
                    if (passed[key]) validPassword = true;
                    else {
                        validPassword = false;
                        break;
                    }
                }

                document.getElementById('capitol').innerHTML = `${passed.capitol ? '&#10003;' : '&#10539;'} Capitol Letters (A-Z)`
                document.getElementById('capitol').style.color = passed.capitol ? 'green' : 'red';
                document.getElementById('simple').innerHTML = `${passed.simple ? '&#10003;' : '&#10539;'} Simple Letters (a-z)`
                document.getElementById('simple').style.color = passed.simple ? 'green' : 'red';
                document.getElementById('numbers').innerHTML = `${passed.numbers ? '&#10003;' : '&#10539;'} Numbers (0-9)`
                document.getElementById('numbers').style.color = passed.numbers ? 'green' : 'red';
                document.getElementById('special').innerHTML = `${passed.special ? '&#10003;' : '&#10539;'} Special Characters (Eg: @#$%^)`
                document.getElementById('special').style.color = passed.special ? 'green' : 'red';
                document.getElementById("btn_save").disabled = !validPassword;
            }

            function CheckPasswordConfirm(password_confirm) {
                const password = document.getElementById("password");
                const password_confirm_match = document.getElementById("password_confirm_match");

                if (password_confirm === password.value) {
                    password_confirm_match.innerHTML = '&#10003; Password matched'
                    password_confirm_match.style.color = 'green';
                } else {
                    password_confirm_match.innerHTML = "&#10539; Password doesn't match"
                    password_confirm_match.style.color = 'red';
                }
            }
        </script>
@endsection