@extends('layouts.retail')

@section('contents')
    <div class="content-wrapper" id="content-wrapper" style="min-height: 440px;">
        <section class="container col content  p-2 p-xl-4 p-lg-4">
            <section class="content-header">
                <h5 class="font-weight-bold"><i class="nav-icon fas fa-key mr-3" style="color: #F9D339"></i> Change Password
                </h5>
                <div class="d-block mt-3">
                    <div class="bg-white border p-4" style="border-radius: 5px; max-height: 1700px;  width: 100%;">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="" style="max-width: 500px">
                                    <!-- Display validation errors -->
                                    <form class="form-horizontal" role="form" method="POST"
                                        action="{{ url('change-the-password') }}">
                                        @csrf
                                        <div class="form-group">
                                            <label class="col-md-12 control-label">Old Password</label>
                                            <div class="col-md-12">
                                                <input type="password" class="form-control" name="old_password"
                                                    placeholder="Old Password">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-12 control-label">New Password</label>
                                            <div class="col-md-12">
                                                <input type="password" class="form-control" name="password"
                                                    placeholder="New Password">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-12 control-label">Confirm Password</label>
                                            <div class="col-md-12">
                                                <input type="password" class="form-control" name="password_confirmation"
                                                    placeholder="Confirm New Password">
                                            </div>
                                        </div>

                                        @if ($errors->has('old_password'))
                                            <li class="ml-3"><span>{{ $errors->first('old_password') }}</span></li>
                                        @endif
                                        @if ($errors->has('password'))
                                            <li class="ml-3"><span>{{ $errors->first('password') }}</span></li>
                                        @endif
                                        @if (session('status'))
                                            <li class="ml-3"><span>{{ session('status') }}</span></li>
                                        @endif

                                        <div class="form-group">
                                            <div class="col-md-12 col-md-offset-4">
                                                <button type="submit" class="btn text-sm special-button py-2 mt-1">
                                                    Change Password
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="col-md-6 d-xl-block d-lg-block d-md-block d-none">
                                <div class="card">
                                    <div class="card-header" style="padding-bottom: 8px !important;">
                                        <h5><i class="reminder fas fa-rocket mr-3" style="color: #F9D339"></i> Reminder</h5>
                                    </div>
                                    <div class="card-body">
                                        <ul>
                                            <li>Avoid using easily guessable information such as birthdays, employee IDs,
                                                common words, etc. for passwords.</li>
                                            <li>Avoid using the same password for multiple accounts.</li>
                                            <li>Change your password regularly to keep your account secure.</li>
                                            <li>Password strength should be at least 8 characters long and should include at
                                                least one uppercase letter, one lowercase letter, one number and one special
                                                character.</li>
                                            <li>Do not share your password with anyone.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </section>
    </div>
@endsection