@extends('layouts.master', ['title' => 'Change Password'])
@section('content')
<div class="content-wrapper">
    <div class="row">
      <div class="col-12 grid-margin">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Change Password</h4>

            @if(session()->has('success'))
                    <div class="alert alert-success">
                        {{ session()->get('success') }}
                    </div>
            @endif
            @if(session()->has('error'))
                    <div class="alert alert-danger">
                        {{ session()->get('error') }}
                    </div>
            @endif
            <form  action="{{route('SaveChangePassword')}}" method="post" class="form-sample">
              @csrf
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group row">
                    <label class="col-sm-3 col-form-label">Password</label>
                    <div class="col-sm-9">
                      <input type="password" name="password"  id="password" class="form-control" placeholder="Enter password" />
                      <i class="mdi mdi-eye" id="togglePassword" style="top: 15px;position: absolute;left:90%;"></i>
                      @error('password')
                        <small class="text-danger">{{ $message }}</small>
                      @enderror
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-3 col-form-label">New Password</label>
                    <div class="col-sm-9">
                      <input type="password" name="new_password"  id="new_password" class="form-control" placeholder="Enter new password" />
                      <i class="mdi mdi-eye" id="toggleNewPassword" style="top: 15px;position: absolute;left:90%;"></i>
                      @error('new_password')
                        <small class="text-danger">{{ $message }}</small>
                      @enderror
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-3 col-form-label">Confirm Password</label>
                    <div class="col-sm-9">
                      <input type="password" name="confirm_password" id="confirm_password" class="form-control" placeholder="Enter confirm password" />
                        <i class="mdi mdi-eye" id="toggleConfirmPassword" style="top: 15px;position: absolute;left:90%;"></i>
                      @error('confirm_password')
                        <small class="text-danger">{{ $message }}</small>
                      @enderror
                    </div>
                  </div>
                </div>

              </div>
              <button type="submit" class="btn btn-success float-right" >Save</button>
              <button type="button" class="btn btn-success float-left" onclick="window.history.go(-1); return false;">Cancel</button>
            </form>
          </div>
        </div>
      </div>
  </div>
</div>
@endsection
@section('scripts')

<script>

$(document).ready(function() {

  // password

  $('#togglePassword').click(function(){
    $(this).toggleClass('mdi-eye mdi-eye-off');
    var type = $(this).hasClass('mdi-eye-off') ? 'text' : 'password';
    $('#password').attr('type', type);
  });


  //new password

  $('#toggleNewPassword').click(function(){
    $(this).toggleClass('mdi-eye mdi-eye-off');
    var type = $(this).hasClass('mdi-eye-off') ? 'text' : 'password';
    $('#new_password').attr('type', type);
  });


  $('#toggleConfirmPassword').click(function(){
    $(this).toggleClass('mdi-eye mdi-eye-off');
    var type = $(this).hasClass('mdi-eye-off') ? 'text' : 'password';
    $('#confirm_password').attr('type', type);
  });


});


</script>


@endsection