@extends('layout.appHomeDynamic')

@section('content')

<section class="section login-banner">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="page-banner">
                    <div class="row justify-content-center">
                        <div class="col-xxl-4 col-xl-5 col-lg-6 col-md-6 col-sm-12">
                            <div class="align-middle">
                                <div class="headings">
                                    <h1 class="text-lightBlack">
                                        <span>The</span>
                                            <span>
                                                <font class="text-burntOrange">U</font>
                                                <font class="text-darkOrange">World</font>
                                            </span>
                                        <span>Passport</span>
                                    </h1>
                                    <p class="text-lightBlack">One login across our entire ecosystem</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12">
                            <div class="align-middle">
                                <div class="ucard mh-460 br-black margin-lr p-4">
                                    <div class="tab-menu left-align">
                                        <ul>
                                            <li>Change Password?</li>
                                        </ul>
                                    </div>
                                    <form name="forget-password" class="uform" action="{{ route('cognito.action.change.password') }}" method="post">

                                        @csrf

                                        @include('common.notify')

                                        @if($errors->has('status'))
                                            <div class="error">{{ $errors->first('status') }}</div>
                                        @endif


                                        <input id="email" type="hidden"
                                               class="form-control @error('email') is-invalid @enderror" name="email"
                                               value="{{{ Auth::user()->email }}}" autocomplete="email" required />


                                        <div class="row">
                                            <div class="col">
                                                <label for="email">Existing Password <span>*</span></label>
                                                <input type="password" id="password" class="form-control" name="password" placeholder="**********" autocomplete="off" required />
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col">
                                                <label for="password">Password <span>*</span></label>
                                                <input type="password" id="new_password" class="form-control" name="new_password" placeholder="**********" autocomplete="off" required />
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col">
                                                <label for="confirmpassword">Confirm Password <span>*</span></label>
                                                <input type="password" id="new_password_confirmation" class="form-control" name="new_password_confirmation" placeholder="**********" autocomplete="off" required />
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col mb-4">
                                                <button type="submit" class="btn center btn-blue">Save Password</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('scripts')

<script src="{{asset('assets/js/PasswordValidatorv2.js')}}"></script>

<script>
    $(document).ready(function () {
        PasswordValidator.minSize = 8;
        PasswordValidator.maxSize = 16;
        PasswordValidator.specialConfigured = true; // Default
        PasswordValidator.prohibitedConfigured = false;
        PasswordValidator.prohibitedCharacters = [];
        PasswordValidator.setup('new_password', 'new_password_confirmation');
    });
</script>
@endsection