@extends('layouts.app')

@section('content')
<div class="row justify-content-center row-margin">
    <div class="col-md-12">
        <div class="page page-md comman-page-height-main user-listing">
            <div class="header-box py-5">
            </div>
            <div class="content-box bg-white">
                <div class="row">
                    <div class="col-md-12">
                        <form method="post" name="frm_change_password" id="frm_change_password" action="{{ route('change-password-post') }}">
                            @csrf
                            <h3 class="section-title">{{ __('message_lang.LBL_CHANGE_PASSWORD') }}</h3>
                            <div class="form-group">
                                <label for="current_password">{{ __('message_lang.LBL_CURRENT_PASSWORD') }} <span style="color: red;">*</span></label>
                                <input class="form-control @error('current_password') is-invalid @enderror custom-field" id="current_password" name="current_password" type="password" placeholder="{{ __('message_lang.LBL_CURRENT_PASSWORD') }}">

                                @error('current_password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="confirmAccount">{{ __('message_lang.LBL_NEW_PASSWORD') }} <span style="color: red;">*</span></label>
                                <input class="form-control @error('password') is-invalid @enderror custom-field" id="password" name="password" type="password" placeholder="{{ __('message_lang.LBL_NEW_PASSWORD') }}">

                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="idNumber">{{ __('message_lang.LBL_CONFIRM_NEW_PASSWORD') }} <span style="color: red;">*</span></label>
                                <input class="form-control @error('password_confirmation') is-invalid @enderror custom-field" id="password_confirmation" name="password_confirmation" type="password" placeholder="{{ __('message_lang.LBL_CONFIRM_NEW_PASSWORD') }}">

                                @error('password_confirmation')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-row">
                                <div class="col">
                                    <button type="submit" class="btn btn-primary btn-lg btn-block" id="change-password-submit">{{ __('message_lang.BUTTON_SUBMIT') }}</button>
                                </div>
                                <div class="col">
                                    <a class="btn btn-primary btn-lg btn-block" href="{{ route('my-account') }}">{{ __('message_lang.BUTTON_CANCEL') }}</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $('#frm_change_password').submit(function(){
			$('#change-password-submit').attr('disabled', 'disabled');
		});

    $("#frm_change_password").validate({
        errorElement: "span", // contain the error msg in a span tag
        errorClass: 'help-block',
        errorPlacement: function (error, element) { // render error placement for each input type
            // debugger;
            error.insertAfter(element);
            // for other inputs, just perform default behavior
        },
        ignore: "",
        rules: {
            current_password: {
                required: true,
            },
            password: {
                required: true,
                minlength: 7
            },
            password_confirmation: {
                required: true,
                equalTo: password
            }
        },
        messages: {
            current_password: {
                required: "{{ __('message_lang.PLEASE_ENTER_CURRENT_PASSWORD') }}",
            },
            password: {
                required: "{{ __('message_lang.PLEASE_ENTER_NEW_PASSWORD') }}",
                minlength: "{{ __('message_lang.PLEASE_ENTER_NUMERIC_PASSWORD') }}"
            },
            password_confirmation: {
                required: "{{ __('message_lang.PLEASE_ENTER_CONFIRM_PASSWORD') }}",
                equalTo: "{{ __('message_lang.PASSWORD_NOT_MATCH') }}"
            }
        },
        invalidHandler: function (event, validator) { //display error alert on form submit
            // debugger;
            //successHandler1.hide();
            //errorHandler1.show();
        },
        highlight: function (element) {
            // debugger;
            $('#change-password-submit').removeAttr('disabled');
            $(element).closest('.help-block').removeClass('valid');
            // display OK icon
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
            // add the Bootstrap error class to the control group
        },
        unhighlight: function (element) { // revert the change done by hightlight
            // debugger;
            $(element).closest('.form-group').removeClass('has-error');
            // set error class to the control group
        },
        success: function (label, element) {
            // debugger;
            label.addClass('help-block valid');
            // mark the current input as valid and display OK icon
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success').find('.symbol').removeClass('required').addClass('ok');
        },
        submitHandler: function (frmadd) {
            // debugger;
            successHandler1.show();
            errorHandler1.hide();
        }
    });
</script>
@endsection