@extends('layouts.app')

@section('content')
<style>
    ul#password-help {
    text-align: center; /* Aligns list items to the left */
    list-style-type: none; /* Removes default bullet points */
    padding-left: 35%;
}

ul#password-help li {
    margin-bottom: 8px; /* Adds spacing between list items */
    display: flex; /* Aligns icon and text horizontally */
    align-items: center; /* Centers icon vertically with text */
}

ul#password-help li i {
    margin-right: 8px; /* Adds spacing between the icon and the text */
    color: green; /* Adds color to the checkmark icon */
}
@media (max-width: 768px) {
    ul#password-help {
        text-align: center; /* Keep text centered for tablets */
        padding-left: 5%; /* Slightly increase padding for better spacing */
    }
}
@media (max-width: 576px) {
    ul#password-help {
        text-align: center; /* Maintain center alignment for small screens */
        padding-left: 8%; /* Increase padding to enhance readability */
    }
}
</style>
<div id="content" class="container">
    <div class="row panel panel-default">
        <div>
            <div class="col-md-8 col-md-offset-2">
                <div class="panel-heading"><h2>Reset Password</h2></div>

                <div class="panel-body">
                    <form class="form-horizontal" role="form" method="POST" action="{{ url('/password/reset') }}">
                        {{ csrf_field() }}

                        <input type="hidden" name="token" value="{{ $token }}">

                        <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                            <label for="email" class="col-md-4 control-label">E-Mail Address</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control" name="email" value="{{ $email or old('email') }}" required autofocus>

                                @if ($errors->has('email'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                            <label for="password" class="col-md-4 control-label">Password</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control" name="password" required>

                                @if ($errors->has('password'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
          <div class="form-group">
    <div class="col-lg-12 text-center">
        <p style="font-family: Arial, sans-serif; font-size: 14px; color: #333;">Password must include the following requirements:</p>
        <ul class="list-unstyled" id="password-help">
            <li><i class="fas fa-check"></i> Be at least twelve characters long                   </li>
            <li><i class="fas fa-check"></i> Contain at least one uppercase letter (A-Z)           </li>
            <li><i class="fas fa-check"></i> Contain at least one lowercase letter (a-z)</li>
            <li><i class="fas fa-check"></i> Contain at least one number (0-9)           </li>
            <li><i class="fas fa-check"></i> Contain at least one special character (e.g. @,#,$,% )</li>
        </ul>
    </div>
</div>
                        <div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">
                            <label for="password-confirm" class="col-md-4 control-label">Confirm Password</label>
                            <div class="col-md-6">
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>

                                @if ($errors->has('password_confirmation'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('password_confirmation') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <button type="submit" class="btn btn-primary">
                                    Reset Password
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection