@extends('layouts.app')

@section('content')

<div class='container'>

    <div class='row d-flex justify-content-center pt-5'>
        <div class="col-md-6 pt-5">
            <div class="closer-form-div">
            <form method="POST" action="{{ route('password_changed') }}">
                        @csrf
                    <div class='row'>
                        <div class="col-md-12">
                        <div class="form-group mb-3 password-div">
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" placeholder='New Password' name="password" autocomplete="new-password">
                                <i id='showpswd' class="fa fa-eye-slash" onclick="showpwd()" aria-hidden="true"></i>

                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                        </div>
                        <div class="form-group mb-3">
                                <input id="password-confirm" type="password" class="form-control" placeholder='Confirm New Password' name="password_confirmation" autocomplete="new-password">
                        </div>
                        <div class="form-group mb-0">
                                <button type="submit" class="btn btn-primary w-100">
                                    {{ __('Update Password') }}
                                </button>
                        </div>
                        </div>
                    </div>
                    </form>
            </div>
        </div>
    </div>

</div>

<script>
function showpwd() {
    var icon = document.getElementById("showpswd");
  var x = document.getElementById("password");

  if (x.type === "password") {
    x.type = "text";
    icon.classList.remove('fa-eye-slash');
    icon.classList.add('fa-eye');
  } else {
    x.type = "password";
    icon.classList.remove('fa-eye');
    icon.classList.add('fa-eye-slash');
  }
}
</script>
@endsection