@extends('layouts.noheaderlayout')



@section('content')


   <div class="container mt-5 mb-5">
            <div class="row">
                <div class="col-md-12 text-center">                    
                    <h1 class="main-title home">
                        {{ optionByKey('retrive_password') }}
                    </h1>
                </div>
                 @if (\Session::has('msg'))
					<div class="alert alert-success">
						<ul>
							<li>{!! \Session::get('msg') !!}</li>
						</ul>
					</div>
				@endif        
            </div>
        </div>
		
        <div class="container mt-5 mb-5 loginpanel">
            <div class="row">
                <div class="col-md-12">
					<form id="password-retrive-form" action="{{ url('c/feedback/reset-password') }}" method="POST" autocomplete="off">
                        @csrf
						<input type="hidden" name="token" value="{{ $token }}">
                         <div class="row g-0">                           
                            <div class="col-md-12 mb-3">
                                <label for="password-field" class="form-label">{{ optionBykey('reg_password') }}</label>
                                <div class="eye-icon-add position-relative">
                                    <input id="password-field" placeholder="{{ optionBykey('reg_password') }}" type="password" class="form-control" name="password" autocomplete="off">
                                    <span toggle="#password-field" class="fa-fw icon-eye-slash field-icon toggle-password togglePassword"></span>
                                </div>
                                <div id="password-error" class="error-message"></div>
								
								@error('password')
									<div id="password-error" class="error-message">{{ $message }}</div>
                                @enderror
							  
                            </div> 
                            <div class="col-md-12 mb-3">                           
                                <div>
                                    <div class="progress"><div class="progress-bar"></div></div>
                                </div>
                                <div id="message" role="alert" class="m-0 alert alert-loginpanel">
                                   {!! optionBykey('reg_pass_error') !!}
                                </div>
                            </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('save_password') }}
                                </button>
                            </div>
                        </div>
                    </form>

				</div>
            </div>
        </div>					  

@endsection 

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


@push('scripts')



<script>
        document.addEventListener('DOMContentLoaded', function() {
            $(".toggle-password").click(function() {
                $(this).toggleClass("icon-eye icon-eye-slash");
                var input = $($(this).attr("toggle"));
                if (input.length) {
                    if (input.attr("type") === "password") {
                        input.attr("type", "text");
                    } else {
                        input.attr("type", "password");
                    }
                }
            });
        });


         
        document.addEventListener('DOMContentLoaded', function() {
   

   function validatePassword(passwordInput) {
       const passwordValue = passwordInput.value.trim();
       const minLength = 8;
       const hasLowerCase = /[a-z]/.test(passwordValue);
       const hasUpperCase = /[A-Z]/.test(passwordValue);
       const hasNumber = /[0-9]/.test(passwordValue);
       const isValidLength = passwordValue.length >= minLength;
       const errorElementw = document.getElementById('password-error');

       if (!passwordValue) {
           errorElementw.innerHTML = '';
       }

       const criteria = [
           { check: hasLowerCase, message: 'A <b>lowercase</b> letter' },
           { check: hasUpperCase, message: 'A <b>uppercase</b> letter' },
           { check: hasNumber, message: 'A <b>number</b>' },
           { check: isValidLength, message: 'Minimum <b>8 characters</b>' }
       ];

       const invalidMessages = criteria.filter(c => !c.check).map(c => c.message);
       const isValid = invalidMessages.length === 0;

       if (!passwordValue) {
           errorElementw.innerHTML = "<p class='error'>{{optionByKey('pass_blank_error')}}</p>";
       } else if (!isValid) {
           errorElementw.innerHTML = "<p class='error'>{{optionByKey('pass_error')}}</p>";
       } else {
           errorElementw.innerHTML = '';
       }

       return { isValid, invalidMessages, criteria };
   }

   function handleValidation(inputElement, validateFn, errorElementId) {
       const result = validateFn(inputElement);
       const { isValid, invalidMessages, criteria, errorMessage } = result;
       const errorElement = document.getElementById(errorElementId);
       if (!errorElement) {
           console.error(`Element not found for ID: ${inputElement?.id ?? errorElementId}`);
           return false;
       }

       if (errorElementId === 'password-error') {
           const errorElement2 = document.getElementById('message');
           const messageListItems = errorElement2.querySelectorAll('li');
           messageListItems.forEach((item, index) => {
               if (index < criteria.length) {
                   if (criteria[index].check) {
                       item.classList.add('valid');
                       item.classList.remove('invalid');
                   } else {
                       item.classList.add('invalid');
                       item.classList.remove('valid');
                   }
               }
           });
       } else if (errorElementId === 'termsFeedback') {
           errorElement.innerHTML = errorMessage ? '<p class="error">' + errorMessage + '</p>' : '';
       }

       // Update border style based on validity
      

       if (errorElementId === 'password-error') {
           updateProgressBar(invalidMessages.length);
       }

       return isValid;
   }

   function handleValidationEmail(inputElement, validateFn, errorElementId) {
       const { isValid, errorMessage } = validateFn(inputElement);
       const errorElement = document.getElementById(errorElementId);
       const messageListItems = errorElement.querySelectorAll('li');

       if (!inputElement) {
           console.error(`Input element not found for ID: ${inputElement.id}`);
           return false;
       }

       if (errorElement) {
           if (errorMessage) {
               errorElement.classList.add('invalid');
           } else {
               errorElement.classList.remove('invalid');
           }
       } else {
           console.error(`Error element not found for ID: ${errorElementId}`);
       }

       // Update input border based on validity
       inputElement.classList.toggle('valid', isValid);
       inputElement.classList.toggle('invalid', !isValid);

       return isValid;
   }

   function updateProgressBar(numOfInvalid) {
       const progressBar = document.querySelector('.progress-bar');
       const progress = (4 - numOfInvalid) * 25; // 25% for each valid criteria
       progressBar.style.width = `${progress}%`;

       // Add styles for different levels
       if (progress === 100) {
           progressBar.classList.add('bg-success');
       } else {
           progressBar.classList.remove('bg-success');
       }
   }

   // Form submission logic
   document.getElementById('password-retrive-form').addEventListener('submit', function(event) {
       const passwordInput = document.querySelector('input[name="password"]');
       //const emailInput = document.getElementById('E-mail');
       //const termsInput = document.getElementById('terms');

       //const isEmailValid = handleValidationEmail(emailInput, validateEmail, 'email-error');
       const isPasswordValid = handleValidation(passwordInput, validatePassword, 'password-error');
       //const isTermsValid = handleValidation(termsInput, validateTerms, 'termsFeedback');

       if (!isPasswordValid) {
           event.preventDefault();
       }
   });

   // Real-time validation for email, password, and terms
   const passwordInput1 = document.querySelector('input[name="password"]');
   // const emailInput1 = document.getElementById('E-mail');
   // const termsInput1 = document.getElementById('terms');

   // emailInput1.addEventListener('input', function() {
   //     handleValidationEmail(this, validateEmail, 'email-error');
   // });

   passwordInput1.addEventListener('input', function() {
       handleValidation(this, validatePassword, 'password-error');
   });

   // document.getElementById('terms').addEventListener('change', function() {
   //     handleValidation(this, validateTerms, 'termsFeedback');
   // });
});

       
      
</script>


@endpush