@extends('layouts.merchant')

@section('content')
    <div class="row">
        @if(Session::has('failure'))
            <div class="alert alert-danger">
                {{ Session::get('failure') }}
            </div>
        @endif
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"> Change Password
                    <span class="pull-right"><strong class="text-danger">*</strong> Required Fields</span>
                </h3>
            </div>

            <div class="panel-body">
                <form action="{{ route('merchant.users.change-password',$user->id) }}" id="password_reset" method="POST" class="form-horizontal form-padding" enctype="multipart/form-data">
                    <div class="error-message-jsx"></div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-12">
                        <div class="form-group">
                           <p class="text-center">
                               <strong>You will be asked to login again after updating the password.</strong>
                           </p>
                        </div>

                        <div class="form-group">
                            <label for="" class="col-md-3 control-label">Current Password</label>
                            <div class="col-md-6">
                                <input type="password" class="form-control" name="current_password" placeholder="******">
                                <span class="text-danger">{{ $errors->first('current_password') }}</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-md-3 control-label">New Password</label>
                            <div class="col-md-6">
                                <input type="password" class="form-control" id="new_password" name="new_password" placeholder="******">
                                <span class="text-danger">{{ $errors->first('confirm_password') }}</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-md-3 control-label">Confirm Password</label>
                            <div class="col-md-6">
                                <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="******">
                                <span class="text-danger">{{ $errors->first('confirm_password') }}</span>
                            </div>
                        </div>
                        @csrf
                        <div class="form-group">
                            <label class="col-md-3 control-label"></label>
                            <div class="col-md-4">
                                <button class="btn btn-block btn-info pw-submit">Update</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('ext_js')
    <script>
        $('.pw-submit').click(function (e) {
            e.preventDefault();
            $('.error-message-jsx').html('')
            if ($('#new_password').val() == $('#confirm_password').val()) {
                var password = $('#new_password').val();
                var upperCase = new RegExp('[A-Z]');
                var lowerCase = new RegExp('[a-z]');
                var numbers   = new RegExp('[0-9]');
                var symbol    = new RegExp('[_!#%]');
                var validPass = true;
                if (password.length < 9 || password.length > 16) {
                    $('.error-message-jsx').html(`
                        <div class="alert alert-danger alert-dismissable">
                            <button class="close" data-dismiss="alert"><i class="pci-cross pci-circle"></i></button>
                            <strong>Failed !</strong> Your password must have a minimum length of 9 characters and maximum of 16 characters, and must contain at least one lowercase(a-z) alphabetic character,at leaset one uppercase(A-Z) alphabetic character, at least one numeric character(0-9) and at least one special character (!_#%).
                        </div>
                    `);
                    return false;
                }
                if(!password.match(upperCase)) {
                    validPass = false;
                }
                if(!password.match(lowerCase)) {
                    validPass = false;
                }
                if(!password.match(symbol)) {
                    validPass = false;
                }
                if(!password.match(numbers)) {
                    validPass = false;
                }
                if (validPass) {
                    $(this).attr('disabled', true);
                    $( '#password_reset' ).submit()
                } else{
                    $('.error-message-jsx').html(`
                        <div class="alert alert-danger alert-dismissable">
                            <button class="close" data-dismiss="alert"><i class="pci-cross pci-circle"></i></button>
                            <strong>Failed !</strong> Your password must have a minimum length of 9 characters and maximum of 16 characters, and must contain at least one lowercase(a-z) alphabetic character,at leaset one uppercase(A-Z) alphabetic character, at least one numeric character(0-9) and at least one special character (!_#%).
                        </div>
                    `);
                }
            } else {
                $('.error-message-jsx').html(`
                    <div class="alert alert-danger alert-dismissable">
                        <button class="close" data-dismiss="alert"><i class="pci-cross pci-circle"></i></button>
                        <strong>Failed !</strong> Confirm password doesnot match new password
                    </div>
                `);
            }
        })
    </script>
@endsection