@extends('layouts.login')
@section('title', 'Change password')
@section('content')
<div class="content-body">
    <!-- Multi item selection table -->
    <section id="multi-item">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="content-header-title">Change Password</h3>
                        <form name="change_password" id="change_password" method="post" action="{{route('savepassword')}}">
                            @csrf
                            <div class="language-section">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="firstName1">Current Password</label>
                                            <input type="password" class="form-control" id="c_password" name="c_password" placeholder="Enter Current Password" value="">
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="firstName1">New Password</label>
                                            <input type="password" class="form-control" id="n_password" name="n_password" placeholder="Enter New Password" value="">
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="firstName1">Confirm Password</label>
                                            <input type="password" class="form-control" id="con_password" name="con_password" placeholder="Enter Confirm Password" value="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer  px-lg-2">
                                <button type="submit" id="change-password-btn"class="btn btn-primary" id="save_button">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection
@section('jssection')
<script>

    $.validator.addMethod("pwcheck", function (value) {
        return /^[A-Za-z0-9\d=!\-@._*]*$/.test(value) // consists of only these
                && /[a-z]/.test(value) // has a lowercase letter
                && /[A-Z]/.test(value)
                && /\d/.test(value) // has a digit
    }, 'Password must contain one capital letter,one numerical and one special character');
    jQuery("#change_password").validate({
        rules: {
            c_password: {
                required: true
            },
            n_password: {
                required: true,
                pwcheck: true,
                minlength: 8,
                maxlength: 24
            },
            con_password: {
                required: true,
                equalTo: "#n_password",
                minlength: 8,
                maxlength: 24
            }
        },
        messages: {
            c_password: {
                required: 'Please enter current password.'
            },
            n_password: {
                required: 'Please enter new password.',
                minlength: 'Password must contain atleast 8 characters.',
                maxlength: 'Password must contain maximum 24 characters.'
            },
            con_password: {
                required: 'Please enter confirm password.',
                minlength: 'Password must contain atleast 8 characters.',
                maxlength: 'Password must contain maximum 24 characters.',
                equalTo: 'Confirm Password does not match.'
            }
        },
        submitHandler: function (form) {
            $('#change-password-btn').attr('disabled', 'disabled');
            form.submit();
        }
    });

</script>
@endsection