@extends('front.layout.app')
@section('content')

<style>
main.login-form {
    height: 100vh;
}
.card-header {
    text-align: center;
    padding: 20px 0;
    font-size: 45px;
    color: #fff;
    text-align: center;
    font-weight: 600;
}
.btn-primary {
      color: #fff;
    padding: 12px !important;
    border-color: #0a58ca;
    font-family: 'Poppins';
    font-size: 18px !IMPORTANT;
    font-weight: 500 !IMPORTANT;
    width: 100% !important;
    margin: auto;
    background: #e8c652;
}
.btn-primary:hover{
      color: #fff;
    padding: 12px !important;
    border-color: #0a58ca;
    font-family: 'Poppins';
    font-size: 18px !IMPORTANT;
    font-weight: 500 !IMPORTANT;
    width: 100% !important;
    margin: auto;
    background: #e8c652;
}
main.login-form {
    height: 100vh;
    background-image: url("https://custom.democlientlink.com/wisezone/public/assets/front/images/pro-bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    position: relative;
}
main.login-form::before{
    content: '';
    position: absolute;
    inset: 0;
  
}
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #49678182;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
    padding: 20px 30px 30px 20px;
}
.form-control {
    display: block;
    width: 100%;
    padding: 12px 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;}
</style>

<main class="login-form">
  <div class="container h-100">
      <div class="row justify-content-center align-items-center h-100">
          <div class="col-md-6 col-12">
              <div class="card">
                  <div class="card-header">Reset Password</div>
                  <div class="card-body">
  
                      <form action="{{ route('password.reset') }}" method="POST">
                          @csrf
                          <input type="hidden" name="token" value="{{ $token }}">
  
                          <div class="form-group row my-4">
                              
                              <div class="col-md-12">
                                  <input type="text" id="email_address" class="form-control" name="email" placeholder="Enter Email" required >
                                  @if ($errors->has('email'))
                                      <span class="text-danger">{{ $errors->first('email') }}</span>
                                  @endif
                              </div>
                          </div>
  
                          <div class="form-group row my-4">
                             
                              <div class="col-md-12">
                                  <input type="password" id="password" class="form-control" name="password" required  placeholder="Enter new password">
                                  @if ($errors->has('password'))
                                      <span class="text-danger">{{ $errors->first('password') }}</span>
                                  @endif
                              </div>
                          </div>
  
                          <div class="form-group row my-4">
                             
                              <div class="col-md-12">
                                  <input type="password" id="password-confirm" class="form-control" name="password_confirmation" required  placeholder="Confirm password">
                                  @if ($errors->has('password_confirmation'))
                                      <span class="text-danger">{{ $errors->first('password_confirmation') }}</span>
                                  @endif
                              </div>
                          </div>
  
                          <div class="col-md-12">
                              <button type="submit" class="btn btn-primary">
                                  Reset Password
                              </button>
                          </div>
                      </form>
                        
                  </div>
              </div>
          </div>
      </div>
  </div>
</main>
@endsection