@extends('layouts.auth-layout')
@section('title', 'Set New Password')
@section('content')
<div class="text-center mb-5">
  <div class="login-icon"><i class="bi bi-lock-fill"></i></div>
  <h4 class="mt-1">Set New Password</h4>
  <p class="small fst-italic">Create a new password for your portal</p>
</div>

@if (session('success'))
  <div class="alert alert-success alert-dismissible fade show" role="alert">
    <i class="bi bi-check2-circle me-1"></i>{!! session('success') !!}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
  <script>
    setTimeout(()=>{location ="{{route('auth.login')}}"},8000);
  </script>
@endif
@if(session()->has('error'))
  <div class="alert alert-warning alert-dismissible d-flex align-items-center" role="alert">
    <i class="bi bi-x-circle me-1"></i>{!! session()->get('error') !!}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
    </button>
  </div>
@endif

<form method="post" action="{{route('reset-password')}}" autocomplete="off" class="mt-4">
  @csrf
  <input type="hidden" name="token" value="{{$request->route('token')}}">
  <input type="hidden" name="email" value="{{$request->email}}">
  <div class="password-wrap mb-3">
    <label>New Password </label>
    <input type="password" id="pwd" name="password" class="form-control" placeholder="Enter your secure password">
    <span toggle="#pwd" class="bi bi-eye field-icon toggle-pwd"></span>
  </div>
  <div class="password-wrap mb-5">
    <label>Confirm Password </label>
    <input type="password" id="pwd2" name="password_confirmation" class="form-control" placeholder="Enter password confirmation">
    <span toggle="#pwd2" class="bi bi-eye field-icon toggle-pwd"></span>
  </div>
  <div class="caps-warning small mt-1" id="capsWarn"><i class="bi bi-capslock me-1"></i>Caps Lock is ON</div>
  <button class="btn btn-success w-100 fw-semibold login-btn">Save Password</button>
</form>
@push('customJs')
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script type="text/javascript">
  $(function($){
    $(".toggle-pwd").click(function(){
      $(this).toggleClass("bi-eye bi-eye-slash");
      var input=$($(this).attr("toggle"));
      if(input.attr("type")==="password"){
        input.attr("type","text");
      }else{input.attr("type", "password");}
    });
     
  });
</script>
@endpush
@endsection