@layout('layouts.main')

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

@section('content')
<h1 class="title">
  Reset Password
</h1>

<p class="subtitle">
  Tip: keep your password safe
</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('resetPassword') }}" id="form-register">
  {{ csrfField() }}
  <div class="field">
    <label class="label">Password</label>
    <div class="control has-icons-left">
      <input class="input {{ getErrorFor('password') ? 'is-danger' : ''}}" required="true" name="password"
        type="password" placeholder="super secret password">
      <span class="icon is-small is-left">
        <i class="fa fa-lock"></i>
      </span>
    </div>
    <p class="help is-danger">{{ getErrorFor('password') ? getErrorFor('password') : '' }}</p>
  </div>

  <div class="field">
    <label class="label">Confirm</label>
    <div class="control has-icons-left">
      <input class="input  {{ getErrorFor('confirm') ? 'is-danger' : ''}}" required="true" type="password"
        name="confirm" placeholder="confirm super secret password">
      <span class="icon is-small is-left">
        <i class="fa fa-lock"></i>
      </span>
    </div>
    <p class="help is-danger">{{ getErrorFor('confirm') ? getErrorFor('confirm') : '' }}</p>
  </div>

  {{--  Hidden token  --}}
  <div class="field" style="display: none">
    <div class="control">
      <input class="input" required="true" type="password" name="token" value="{{ token }}">
    </div>
  </div>

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

@endsection