@extends('layouts/blankLayout')

@section('title', 'Forgot Password')

@section('page-style')
@vite([
  'resources/assets/vendor/scss/pages/page-auth.scss'
])
@endsection

<style>
.invalid-feedback-auth{
	display:block;
	color: #ff3e1d;
	margin-top:5px;
	font-weight:600;
	font-size:.9em;
}
</style>

@section('content')
<div class="mt-6 mb-6 overflow-hidden p-2">
  <div class="row">
    <div class="col-md-4 offset-md-4">

      <!-- Forgot Password -->
      <div class="card px-sm-6 px-0 kco-border-top">
        <div class="card-body p-3">
          <!-- Logo -->
          <div class="kco-brand">
            <a href="{{url('/')}}" class="text-center">
              <div class="kco-brand-logo">
				<img src="{{url('/assets/img/logo_w.jpg')}}" alt="Kericho County Finance Bill Management System" title="Kericho County Finance Bill Management System">
			  </div>
              <div class="kco-brand-text">
			  <span class="kco-big-heading">Kericho County</span>
			  <span class="kco-small-heading">
			  Finance Bill Management System
			  </span>
			  </div>
            </a>
          </div>
          <!-- /Logo -->
          <span class="kco-welcome">Forgot Password?</span>
          <p class="mb-6">Enter your email and we'll send you instructions to reset your password</p>
          <form id="formAuthentication" class="mb-6" action="{{ route('password.update') }}" method="POST">
			@csrf
			<input type="hidden" name="token" value="{{ $token }}">
            <div class="mb-6">
              <label for="email" class="form-label">Email</label>
              <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ $email ?? old('email') }}" required autocomplete="email" autofocus>
			  
				@error('email')
                                    <span class="invalid-feedback-auth" role="alert">
                                        {{ $message }}
                                    </span>
                                @enderror
			  
            </div>
            <button class="btn btn-kco-green d-grid w-100">Send Reset Link</button>
          </form>
          <div class="text-center">
            <a href="{{ route('login') }}" class="d-flex justify-content-center">
              <i class="bx bx-chevron-left scaleX-n1-rtl me-1"></i>
              Back to login
            </a>
          </div>
        </div>
      </div>
      <!-- /Forgot Password -->
    </div>
  </div>
</div>
@endsection
