@extends('backend.layouts.login')
@section('content')
<div class="bg-dark card text-white  rounded-0 h-100">
	<img src="{{ asset('images/super-admin-banner.jpg') }}" class="card-img login-img  object-fit-cover w-100" alt="credentials-background">
	<div class="card-img-overlay">
		<div class="d-flex flex-column align-items-center justify-content-center pt-0 min-h-100 pb-4">
			
			<div class="login-box-body my-auto rounded-16 w-100 flex-wrap">
				<div class="pt-0 pb-4 d-flex justify-content-between align-items-center flex-wrap">
					<a href="/">
						<img src="{{ asset('images/logo.svg') }}"  alt="Logo"/>
					</a>
					<span class="badge badge-bg  fs-14 px-3 py-11 text-primary mt-2 mt-md-0">{{ $roleTitles[$role] }} Portal</span>
				</div>
				@if (session('status'))
				<div class="alert alert-success" role="alert">
					{{ session('status') }}
				</div>
				@endif
				
				<h1 class="login-box-msg primary-color text-black text-start p-0 mb-0 fw-600 fs-36">{{ __('Reset Password') }}</h1>
				<div class="fs-16 text-dark-gray mb-3">Enter new password</div>
				<form action="{{url('password/reset')}}" class='m-login__form m-form mb-2' method="POST">
					@csrf
					<input type="hidden" name="token" value="{{$token}}">
					<input type="hidden" name="email" value="{{urldecode($email)}}">

					<div class="form-group has-feedback">
						<div class="pass-show-hide">
							<label class="fs-14 fw-normal">New Password</label>
							<div class="position-relative">
								<input id="password" type="password" autocomplete="off" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="Enter new password" value="{{ old('password', session('password_value')) }}">
								<div class="pass-show-hide-btn" toggle="#password">
									<span class="eye-slash-icon active">
										<em class="iconsax text-8E8E93 fs-20" icon-name="eye-slash"></em>
									</span>
									<span class="eye-icon">
										<em class="iconsax text-8E8E93 fs-20" icon-name="eye"></em>
									</span>
								</div>
								@if ($errors->has('password'))
								<span class="invalid-feedback text-danger" role="alert">
									<strong>{{ $errors->first('password') }}</strong>
								</span>
								@endif
							</div>
						</div>
					</div>

					<div class="form-group has-feedback">
						<div class="pass-show-hide">
							<label class="fs-14 fw-normal">Confirm Password</label>
							<div class="position-relative">
								<input id="password_confirmation" type="password" autocomplete="off" class="form-control @error('password_confirmation') is-invalid @enderror" name="password_confirmation" placeholder="Enter password" value="{{ old('password_confirmation', session('password_confirmation_value')) }}">
								<div class="pass-show-hide-btn" toggle="#password_confirmation">
									<span class="eye-slash-icon active">
										<em class="iconsax text-8E8E93 fs-20" icon-name="eye-slash"></em>
									</span>
									<span class="eye-icon">
										<em class="iconsax text-8E8E93 fs-20" icon-name="eye"></em>
									</span>
								</div>
								@if ($errors->has('password_confirmation'))
								<span class="invalid-feedback text-danger" role="alert">
									<strong>{{ $errors->first('password_confirmation') }}</strong>
								</span>
								@endif
							</div>
						</div>
					</div>

					<div class="row my-3">
						<div class="col text-end">
							<a href="{{ route('role.login', $role ?? 'admin') }}" id="m_login_forget_password" class="m-link link fs-14 fw-600">{{ __('Back to login') }}</a>
						</div>
					</div>

					<x-recaptcha />

					<div class="row mt-12">
						<div class="col text-right">
							<button id="m_login_signin_submit cw-submit" class="btn btn-primary w-100 fs-14 fw-600 text-white" type="submit">Submit</button>
						</div>
					</div>
				</form>

			</div>
		</div>
	</div>
</div>
<script src="https://www.google.com/recaptcha/api.js?render={{env('GOOGLE_RECAPTCHA_PUBLIC_KEY')}}"></script>
@endsection