@extends('layouts.app',['dashBoardTitle'=>'Reset Password'])

@section('content')
<style>
    .password-field {
    display: flex;
    align-items: center;
}

.toggle-password {
    margin-left: -30px;
    cursor: pointer;
}
.error-message {
    color: red; /* Set the color for error messages */
}

.success-message {
    color: green; /* Set the color for success messages */
}
.reset_input_error{
  color: red;
}

</style>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
              

                <div class="card-body">
                    <form method="POST" id="resetPassword" action="{{ route('update-password') }}"> 
                        @csrf

                        <input type="hidden" name="token" value="{{ $token }}">

                        <div class="row mb-3">
                            <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email') }}</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email"  required autocomplete="email">
                                <span class="reset_input_error"></span>
                                <span class="success-message"></span>
                            </div>
                        </div>  

                        <div class="row mb-3">
                            <label for="password" class="col-md-4 col-form-label text-md-end">{{ __('New Password') }}</label>

                            <div class="col-md-6">
                              <div class="password-field">
                                <input id="password" name="password" type="password" minlength="8" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
                                <i class="toggle-password fas fa-eye"></i> 
                                </div>                              
                            </div>
                            <span class="reset_input_error" style="padding-left: 238px;"></span>
                        </div>

                        <div class="row mb-3">
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-end">{{ __('Confirm New Password') }}</label>

                            <div class="col-md-6">
                              <div class="password-field">
                                <input id="password_confirm" type="password" minlength="8"  class="form-control @error('password') is-invalid @enderror" name="password_confirmation" required autocomplete="new-password">
                                <i class="toggle-password fas fa-eye"></i>
                               </div>
                               
                            </div>
                            <span class="reset_input_error"></span>
                            <span id="password-confirm-error" class="reset_input_error" style="padding-left: 238px;"></span>
                          
                        </div>

                        <div class="row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" id="mybutton" class="btn btn-primary">
                                    {{ __('Submit') }}
                                </button>
                            </div>
                        </div>
                    </form>
               
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {    
        
    $('#email').on('focusout', function() {
        var email = $(this).val();
        var errorContainer = $('#error-reset');
        var successContainer = $('#success-reset');
        var ajaxErrorContainer = $('#ajax-error-message');
        var submitButton = $('.mybutton'); // Assuming this is the button you want to enable/disable

        if (!email) {
            // Handle empty email
            $("#email").next('.reset_input_error').text('Please enter an email').show();
            $("#email").next('.success-message').hide(); // Hide success message
            return false;
        } else {
            var regex = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i;
            if (!regex.test(email)) {
                // Handle invalid email format
                $("#email").next('.reset_input_error').text('Invalid email').show();
                $("#email").next('.success-message').hide(); // Hide success message
                return true;
            } else {
                $("#email").next('.reset_input_error').hide(); // Hide error message
                $("#email").next('.success-message').text('Valid email').show(); // Show success message
                return false;
            }
        }
         
    });
});

</script>
<!-- <script>
 $('#email').on('focusout', function() {
        var email = $(this).val();
        if (!password) {
            $("#password").next('.reset_input_error').text('Please enter an password').show();
            $("#password").next('.success-message').hide(); // Hide success message
            return tr;
            }
        });
</script> -->
<script>
    const togglePasswordButtons = document.querySelectorAll('.toggle-password');
        const passwordInputs = document.querySelectorAll('input[type="password"]');

        togglePasswordButtons.forEach((button, index) => {
            button.addEventListener('click', () => {
                if (passwordInputs[index].type === 'password') {
                    passwordInputs[index].type = 'text';
                    button.classList.remove('fa-eye');
                    button.classList.add('fa-eye-slash');
                } else {
                    passwordInputs[index].type = 'password';
                    button.classList.remove('fa-eye-slash');
                    button.classList.add('fa-eye');
                }
            });
       
            
          //password    
          var password=$("#password").val();
            if(password == null || password == ''){
              $("#password").on('keyup', function() {
              var password = $(this).val();
                if (password != null && password !== '') {
                  // Hide the error message when there is input
                  $(this).parent().parent().next('.reset_input_error').hide();
                }
                });
              $("#password").parent().parent().next('.reset_input_error').text('please enter password').show();
              return false;
            }else{
              $("#password").parent().parent().next('.reset_input_error').hide();
              }

          //confirm password
          var password_confirm=$("#password_confirm").val();
            if(password_confirm == null || password_confirm == ''){
              $("#password_confirm").on('keyup', function() {
              var password_confirm = $(this).val();
                if (password_confirm != null && password_confirm !== '') {
                  // Hide the error message when there is input
                  $(this).parent().parent().next('.reset_input_error').hide();
                }
                });
              $("#password_confirm").parent().parent().next('.reset_input_error').text('please confirm password').show();
              return false;
            }else{
              $("#password_confirm").parent().parent().next('.reset_input_error').hide();
              }
            });
            $("#password_confirm").on("input", function() {
            var input = $(this).val();
            var password = $("#password").val();
            
            if (input !== password) {
              $('.mybutton').attr('disabled',true);
                $("#password-confirm-error").text("Passwords do not match.");
            } else {
              $('.mybutton').attr('disabled',false);
                $("#password-confirm-error").text("");
            }
        });        
</script>
@endsection