{{ Form::open(array('method'=>'post',
  'enctype'  =>  'multipart/form-data',
  'url' => route('password.change'),
  'id' => 'change_password_form'
  )) }}
  {{  Form::hidden('id',@$profile['id'])  }}
  
  <div class="box">
    <div class="box-header">
      <i class="fa fa-lock"></i>
      <h6 class="box-title text-muted">
        Change Password
      </h6>
    </div><!-- /.box header -->
    <div class="box-body">
      <div class="row">
        <div class="col-md-12">
          <div class="alert" style="display: none">
            <sapn class="text text-danger">
            </sapn>
          </div>
        </div>
      </div>          
      <div class="row">
        <div class="col-md-12">
          <div class="form-group {{ $errors->has('current_password') ? ' has-error' : '' }}">
            {{  Form::label('current_password', 'Current Password', ['class' => 'mandatory']) }}
            {{  Form::password('current_password', 
              [
              'class' => 'form-control',
              'autocomplete' => 'off',
              ])
            }}
            @if ($errors->has('current_password'))
            <span class="help-block">
              <strong>{{ $errors->first('current_password') }}</strong>
            </span>
            @endif
            <span class="help-block" id="current_password"></span>
          </div>
        </div>  
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="form-group {{ $errors->has('password') ? ' has-error' : '' }}">
            {{  Form::label('password', 'New Password', ['class' => 'mandatory']) }}
            {{  Form::password('password', 
              [
              'class' => 'form-control',
              'autocomplete' => 'off',
              ])
            }}
            @if ($errors->has('password'))
            <span class="help-block">
            <strong>{{ $errors->first('password') }}</strong>
            </span>
            @endif
            <span class="help-block" id="password">
              <strong></strong>
            </span>
          </div>
        </div>  
      </div>  
      <div class="row">
        <div class="col-md-12">
          <div class="form-group {{ $errors->has('password_confirmation') ? ' has-error' : '' }}">
            {{  Form::label('password_confirmation', 'Re-enter New Password', ['class' => 'mandatory'])}}
            {{  Form::password('password_confirmation', 
              [
              'id' => 'password_confirmation',
              'class' => 'form-control',
              ])
            }}
            @if ($errors->has('password_confirmation'))
            <span class="help-block">
            <strong>{{ $errors->first('password_confirmation') }}</strong>
            </span>
            @endif
            <span class="help-block" id="password_confirmation"></span>
          </div>
        </div>
      </div><!-- 2nd row over -->

    </div>
    <div class="box-footer">
      <div class="pull-right">
        <div class="pull-right">
          {{  Form::submit('Save',
            [
            'id' => 'change_password',
            'class' => 'btn btn-primary pull-right'
            ])
          }}
        </div>
        <div class="col-md-1 pull-right">
          <a href="{{ URL::previous() }}" id="cancel" class="btn btn-default pull-right">Cancel</a> 
        </div>
      </div>                     
    </div><!-- /.box -->
    <div class="toggle" data-toggle-on="true" data-toggle-height="20" data-toggle-width="60"></div>
  </div>
  {{  Form::close() }}

  @section('custom-scripts')

  <script type="text/javascript">

    function displayFieldErrors(response){

      var gotErrors = false;

      var errorPostion = "top";
      $.each(response.responseJSON, function (key, item) {
        $gotErrors = true;
        $.each(item, function (keys, item) {
          console.log(item);
          if(item == 'The password confirmation does not match.'){
            $(".help-block#" + key +'_confirmation').closest('.form-group').addClass('has-error');
            $(".help-block#" + key +'_confirmation').append(item+"<br>");
          }else{
            $(".help-block#" + key).closest('.form-group').addClass('has-error');
            $(".help-block#" + key).append(item+"<br>");
            
          }
        });

        if (errorPostion === "top") {
          errorPostion = "bottom";
        } else {
          errorPostion = "top";
        }
      });

      return gotErrors;
    }
  </script>
  @append