@extends('layouts.master')
@section('main-body')
<div class="container-fluid">
    <div class="page-header">
        <div class="row">
            <div class="col-lg-8">
                <h3>Update | My Profile</h3>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/myprofile">My Profile</a></li>
                    <li class="breadcrumb-item"><a href="/myprofile/change-password">Change Password</a></li>
                </ol>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header pb-0">
                    <h5>Form</h5>
                </div>
                <form action="{{ route('myprofile.update-password') }}" method="post" id="change-password-form">
                    @csrf
                    @method('PUT')
                    <div class="card-body row">
                    <div class="form-group">
                        <div class="input-group"><span class="input-group-text"><i class="icon-lock"></i></span>
                            <input class="form-control" type="password" name="current_password" id="current-password" onclick="hide()" onkeyup="checkPass()"  onblur="checkPass()" required placeholder="Current Password" autocomplete="off">
                            <span style="z-index: 5;" onClick="show('current-password')" class="position-absolute top-50 end-0 translate-middle"><i class="icon-eye"></i></span>
                        </div>
                        <p id="current-password-required-error" class="error-1" style="color:red;text-align:left;padding-left:45px;"></p>
                    </div>
                    <div class="form-group m-0" onClick="block()">
                        <div class="input-group"><span class="input-group-text"><i class="icon-lock"></i></span>
                            <input onkeyup="valid()" onblur="valid()" class="form-control" type="password" name="new_password" id="new-password" required placeholder="New Password">
                            <span style="z-index: 5;" onClick="show('new-password')" class="position-absolute top-50 end-0 translate-middle"><i class="icon-eye"></i></span>
                        </div>
                        <p id="new-password-required-error" class="error-1" style="color:red;text-align:left;padding-left:40px;"></p>
                        <div name="checking" style="display: none; margin: .5em" class="p-2 mt-2 text-danger bg-light">
                            <p name="valid">WEAK</p>
                            <ul>
                                <li name="valid">8 to 128 characters</li>
                                <li name="valid">At least one Upper Case character (A-Z)</li>
                                <li name="valid">At least one Lower Case character (a-z)</li>
                                <li name="valid">At least one Numeric Character (0-9)</li>
                                <li name="valid">At least one Special Character</li>
                            </ul>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group"><span class="input-group-text"><i class="icon-lock"></i></span>
                            <input class="form-control password" type="password" name="confirm_password" id="confirm-password" onclick="hide()" onkeyup="checkConfirmPass()" onblur="checkConfirmPass()" required="" placeholder="Confirm Password" autocomplete="off">
                            <span style="z-index: 5;" onClick="show('confirm-password')" class="position-absolute top-50 end-0 translate-middle"><i class="icon-eye"></i></span>
                        </div>
                        <p id="confirm-password-required-error" class="error-1" style="color:red;text-align:left;padding-left:40px;"></p>
                    </div>
                    <div class="d-flex align-items-end justify-content-end">
                        <a href="{{url()->previous()}}" class="btn btn-secondary mx-2">Cancel</a>
                        <x-confirmation title="Save" button="Save" value="change-password">Are you sure you want to update your profile?</x-confirmation>
                    </div>
                    </div>
                </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('import-scripts')

    <script src="/assets/js/myprofile/field-validations.js"></script>

@endsection

@section('page-script')

var errors = '{{ Session::get('errors') }}';
if (errors != "") {
    $('#current-password-required-error').text(errors);
}

@endsection