@extends('layouts.auth')

@section('content')
<div class="content">
    <div class="container">
      <div class="card card-sign">
        <div class="card-body text-center">

          @if (session('status'))
            <div class="alert alert-outline alert-info d-flex align-items-center" role="alert">
              <i class="ri-information-line"></i> {{ session('status') }}
            </div>
          @endif

          <form id="form_password_update" method="POST" action="{{ route('password.update') }}" onsubmit="spinbtn()">
          @csrf
		    <input type="hidden" name="token" value="{{ $token }}">

            <h3 class="card-title mb-5">{{ __('Reset Password') }}</h3>
            <div class="row g-2">

              <div class=" mb-3">
                <label for="email" class="form-label d-flex justify-content-between">{{ __('Email Address') }}</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')
                  <ul class="parsley-errors-list filled" aria-hidden="false"><li class="parsley-required">{{ $message }}</li></ul>
                @enderror
              </div>

              <div class=" mb-3">
                <label for="email" class="form-label d-flex justify-content-between">{{ __('Password') }}</label>
                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
                @error('password')
                  <ul class="parsley-errors-list filled" aria-hidden="false"><li class="parsley-required">{{ $message }}</li></ul>
                @enderror
              </div>

              <div class=" mb-3">
                <label for="email" class="form-label d-flex justify-content-between">{{ __('Confirm Password') }}</label>
                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
              </div>

              <div class="col-sm-12">
                <button id="btnSubmit" type="submit" class="btn btn-primary">
                  {{ __('Reset Password') }}
                </button>
              </div>

            </div><!-- row -->
          </form>

        </div><!-- card-body -->
      </div><!-- card -->
    </div><!-- container -->
  </div><!-- content -->
@endsection


<script type="text/javascript">
    function spinbtn()
    {
      document.getElementById("btnSubmit").innerHTML = '<span id="ShowSpinner" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Resetting Password ...';
      document.getElementById("btnSubmit").disabled = true;
      document.getElementById('form_password_update').submit();
    }
</script>