@extends('layouts.app')

@section('title', 'Register')

@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>Register</h2></div>
                <div class="panel-body">
		    <p>
			Registration enables you to track your progress, and provides you with certificates of completion. Please fill out the form below to complete the registration process.
			<br /><br />* indicates required field
		    </p><br />
                    <form class="form-horizontal" role="form" method="POST" action="{{ url('/register') }}">
                        {{ csrf_field() }}

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

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

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

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

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

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

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

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

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

                        <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="{{ old('email') }}" required>

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

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

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

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

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

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

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

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

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

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

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

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

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


            			<div class="form-group">
            				<label for="state" class="col-md-4 control-label">State*</label>
            				<div class="col-md-3">
            					<select required autofocus class="form-control" id="state" name="state">
            						<option value="">--Please select--</option>
            						@foreach (getStates() as $state_abbr => $state_full)
                                        <option @if (old('state') == $state_abbr) selected @endif value="{{ $state_abbr }}">{{ $state_full }}</option>
                                    @endforeach
            					</select>
            				</div>
            			</div>


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

                            <div class="col-md-3">
                                <input id="zip" maxlength="5" type="text" class="form-control" name="zip" value="{{ old('zip') }}" required autofocus>

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

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

                            <div class="col-md-3">
                                <input id="phone" type="text" class="form-control" name="phone" value="{{ old('phone') }}" required autofocus>

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


                            <label for="phone_ext" class="col-md-1 control-label">Ext.</label>
                            <div class="col-md-2">
                                <input id="phone_ext" maxlength="6" type="text" class="form-control" name="phone_ext" value="{{ old('phone_ext') }}" autofocus>

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

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

                            <div class="col-md-3">
                                <input id="fax" type="text" class="form-control" name="fax" value="{{ old('fax') }}" autofocus>

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

			<hr />

                        <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">
                            <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>
                            </div>
                        </div>

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


                </div>
            </div>
        </div>
    </div>
</div>
@endsection