@layout('layouts.main')

@section('page-title')
Seepur| Reset Password
@endsection

@section('content')
<h1 class="title">
  Don't Pannic!
</h1>

<p class="subtitle">
  We'v got you
</p>

@if(hasErrorFor('userNotFound'))
<div class="notification is-danger" id="user-not-found-notification">
  <button class="delete" id="btn-close-notification"></button>
  {{getErrorFor('userNotFound')}}
</div>
<script>
  (function(){
    const notification = document.getElementById("user-not-found-notification");
    const btn = document.getElementById("btn-close-notification");
    console.log(btn);
    btn.onclick =() =>{
      const parent = notification.parentElement;
      parent.removeChild(notification);
    }
  })();
</script>
@endif

<form class="form register" method="POST" action="{{ route('resetPasswordRequest') }}" id="form-register">
  {{ csrfField() }}
  <div class="field">
    <label class="label">Email</label>
    <div class="control has-icons-left">
      <input class="input {{ getErrorFor('email') ? 'is-danger' : ''}}" required="true" name="email" type="email"
        placeholder="j.snow@thewall.com" value="{{ old('email', '') }}">
      <span class="icon is-small is-left">
        <i class="fa fa-envelope"></i>
      </span>

    </div>
    <p class="help is-danger">{{ getErrorFor('email') ? getErrorFor('email') : '' }}</p>
  </div>

  <div class="field is-grouped">
    <div class="control">
      <button id="btn-register-submit" class="button is-info is-rounded">Yep, Reset!</button>
    </div>
    <div class="control">
      <a class="button is-outlined  is-rounded" href='/'>Cancel</a>
    </div>
  </div>
</form>

@endsection