@extends('layouts.noheaderlayout')
@section('content')

@if (Session::has('message'))
	 <div class="container mt-5 mb-5">
		<div class="row">
			<div class="col-md-12 text-center">                    
				<h1>
                            <i>
                                <svg xmlns="http://www.w3.org/2000/svg" width="54px" height="53px">
                                    <path
                                        fill="#17A755"
                                        fill-rule="nonzero"
                                        d="M54 31.138c0-2-1.17-3.72-2.84-4.56a5.08 5.08 0 0 0 1.58-3.68c0-2.82-2.3-5.12-5.12-5.12H36.58c1.88-6.58 1.92-11.47.06-14.49-1.08-1.75-2.78-2.87-4.93-3.24-1.91-.32-3.73.98-4.06 2.91-.76 4.45-2.64 8.4-5.59 11.73a13.89 13.89 0 0 1-8.41 4.5 6.054 6.054 0 0 0-5.03-2.68H6.08c-3.35 0-6.07 2.72-6.07 6.07v22.83c0 3.35 2.72 6.07 6.07 6.07h2.54c2.17 0 4.06-1.14 5.14-2.85h1.25c.84 0 1.67.26 2.34.75l3.24 2.26c1 .72 2.24 1.11 3.5 1.11h20.99c2.82 0 5.12-2.3 5.12-5.12 0-1.45-.61-2.75-1.58-3.68 1.68-.84 2.84-2.56 2.84-4.56 0-1.27-.48-2.42-1.25-3.32 2.18-.59 3.79-2.56 3.79-4.92v-.01ZM8.61 49.478H6.07c-2.25 0-4.07-1.83-4.07-4.07v-22.83c0-2.25 1.83-4.07 4.07-4.07h2.54c2.25 0 4.07 1.83 4.07 4.07v22.83c0 2.25-1.83 4.07-4.07 4.07Zm40.27-15.22H35.25c-.55 0-1 .45-1 1s.45 1 1 1h11.1c1.72 0 3.12 1.4 3.12 3.12 0 1.72-1.4 3.12-3.12 3.12h-11.1c-.55 0-1 .45-1 1s.45 1 1 1h9.83c1.72 0 3.12 1.4 3.12 3.12 0 1.72-1.4 3.12-3.12 3.12H24.09c-.84 0-1.67-.26-2.34-.75l-3.24-2.26c-1-.72-2.24-1.11-3.5-1.11h-.44c.08-.39.12-.8.12-1.22v-22.83c0-.52-.07-1.03-.2-1.52 3.52-.64 6.72-2.4 9.07-5.05 3.2-3.61 5.24-7.9 6.06-12.72.14-.84.94-1.42 1.76-1.28 1.58.27 2.78 1.05 3.55 2.31 1.58 2.58 1.42 7.23-.44 13.45h-4.32c-.55 0-1 .45-1 1s.45 1 1 1h17.44c1.72 0 3.12 1.4 3.12 3.12 0 1.72-1.4 3.12-3.12 3.12H35.24c-.55 0-1 .45-1 1s.45 1 1 1h13.63c1.72 0 3.12 1.4 3.12 3.12 0 1.72-1.4 3.12-3.12 3.12l.01.02Z"
                                    ></path>
                                </svg>
                            </i>
                        </h1>
				<div class="forgot-msg">
					 <div class="alert alert-success" role="alert">
						{!! Session::get('message') !!}
					</div>
				</div>
			</div>                
		</div>
	</div>

@else
		<div class="container mt-5 mb-5">
			<div class="row">
				<div class="col-md-12 text-center">  					
					<h1 class="main-title home">
					 {{ optionBykey('login_forgot_pass') }}
					</h1>
					{!! optionBykey('choose_password_contend') !!}
				</div>                
			</div>
		</div>
        <div class="container mt-5 mb-5 loginpanel">
            <div class="row">
                <div class="col-md-12">
				
				<form action="{{ route('forget.password.post') }}" method="POST" id="password-recover-form" autocomplete="off">
						@csrf	
					
					<div class="row g-0">
                            <div class="col-md-12 mb-3">
                                <label class="form-label">{{ optionBykey('login_email') }}</label>
								<input type="text" id="email_address" class="form-control" placeholder="{{ optionBykey('login_email') }}" name="email">	
                                <div id="email-error" class="error-message"></div>
							@if ($errors->has('email'))
								<span id="email-error" class="text-danger error-message">{{ $errors->first('email') }}</span>
								
							@endif   
							
                            </div>
                            
                            <div class="col-md-12 mb-4">

                               <x-turnstile-captcha :language="substr(optionByKey('locale'), 0, 2)" />
								
							</div>
							
                            <div class="col-md-12">
                                <button disabled type="submit" class="frm-btn btn btn-primary btn-block w-100 m-0">
                                   {{ optionBykey('reset_password') }}
                                </button>
                            </div>
                        </div>
					
					</form>
					
					
                    <hr>
                    
                </div>
            </div>
        </div>
	@endif	


@endsection

@push('css-styles')

    <link rel="stylesheet" href="/static/css/login-signup.css?v={{time()}}" type="text/css">

@endpush


@push('scripts')



<script>
		$('.fadoutbtn').click(function() {
			$(this).attr('disabled', 'disabled');
			$(this).parents('form').submit();
		});

        document.addEventListener('DOMContentLoaded', function() {
            function validateEmail(emailInput) {
                const emailValue = emailInput.value.trim();
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 
                let errorMessage = '';

                if (!emailValue) {
                    errorMessage = '{{ optionBykey('email_error') }}';
                } else if (!emailRegex.test(emailValue)) {
                    errorMessage = '{{ optionBykey('email_error_regex') }}';
                }

                return errorMessage;
            }

    
            function handleValidation(inputElement, validateFn, errorElementId) {
                const errorMessage = validateFn(inputElement);
                const errorElement = document.getElementById(errorElementId);

                if (errorMessage) {
                    inputElement.classList.add('invalid');
                    errorElement.textContent = errorMessage;
                } else {
                    inputElement.classList.remove('invalid');
                    errorElement.textContent = '';
                }

                return !errorMessage; 
            }

            document.getElementById('password-recover-form').addEventListener('submit', function(event) {
                const emailInput = document.getElementById('email_address');
                let hasErrors = false;
                let firstErrorField = null;
                const isEmailValid = handleValidation(emailInput, validateEmail, 'email-error');
                if (!isEmailValid) {
                    hasErrors = true;
                    if (!firstErrorField) {
                        firstErrorField = emailInput; 
                    }
                }
                if (hasErrors) {
                    event.preventDefault();

                    if (firstErrorField) {
                        firstErrorField.focus(); 
                    }
                }
            });

            
            document.getElementById('email_address').addEventListener('input', function() {
                handleValidation(this, validateEmail, 'email-error');
            });
        });

        
        </script>

@endpush