@extends('layouts.app')

@section('title', 'Veriqo - Reset Your Password')

@section('content')

    <!-- main content -->
    <main class="auth-content">
        <section class="auth_sec animate-on-scroll" data-animation="fadeInUp">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-6 col-md-10">
                        <div class="auth_info_box">
                            <div class="reset_pass_title">
                                <h2>Reset Your Password</h2>
                                <p>Enter your email and we’ll send you a link to reset your password.</p>
                            </div>
                            <form id="resetPasswordForm" action="" method="post" novalidate>
                                <div class="auth_inr">
                                    <div class="form-group">
                                        <input type="email" id="resetEmail" name="email" class="form-control" placeholder="Email*" maxlength="128">
                                        <small id="emailError" style="color: #dc3545; font-size: 12px; display: none;"></small>
                                        <small id="successMessage" style="color: #28a745; font-size: 12px; display: none;"></small>
                                    </div>
                                    <div class="form-group">
                                        <!-- reCAPTCHA v3 runs invisibly in background - no widget needed -->
                                        <small id="recaptchaError" style="color: #dc3545; font-size: 12px; display: none;">Please verify that you are not a robot</small>
                                    </div>
                                    <div class="form-group">
                                        <button type="submit" class="btn primary_btn w-100">Send Reset Link</button>
                                    </div>
                                    <div class="form-group text-center">
                                        <p>Back to<a href="./sign-in.html"> Sign In</a></p>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <div id="successModal" class="success-modal" >
        <div class="modal-content">
            <!-- Close Button -->
            <button class="modal-close" id="modalCloseBtn">×</button>
            
            <div class="modal-icon">
                <img id="successIcon" src="assets/image/sucess.png" width="60" alt="" srcset="" style="display: none;">
                <img id="errorIcon" src="invalid.png" width="60" alt="" srcset="" style="display: none;">
            </div>
            <h3 class="modal-title">Password Reset Email Sent!</h3>
            <p class="modal-message">We've sent a password reset link to your email. Please check your inbox to reset your password.</p>
            <!-- <button id="loginBtn" class="modal-btn">Go to Login</button> -->
        </div>
    </div>

@endsection
  
  <script src="./assets/js/jquery.min.js"></script>
  <script src="./assets/js/bs.min.js"></script>
  <script src="./assets/js/custom.js"></script>
  <script>
    // Backend API base URL - Update this when deploying to production
    const API_BASE_URL = 'https://veriqo.xceltec.in/';
    

    $(document).ready(function() {  


      // Email validation function
      function validateEmail(email) {
        // Basic format check - must contain @ and at least one .
        if (!email || email.indexOf('@') === -1 || email.indexOf('.') === -1) {
          return false;
        }
        
        // Split email into local and domain parts
        var parts = email.split('@');
        if (parts.length !== 2) {
          return false; // Must have exactly one @
        }
        
        var localPart = parts[0];
        var domainPart = parts[1];
        
        // Check local part (before @)
        if (localPart.length === 0 || localPart.length > 64) {
          return false; // Local part cannot be empty or exceed 64 chars
        }
        
        // Check for consecutive dots in local part
        if (localPart.indexOf('..') !== -1) {
          return false;
        }
        
        // Check for dot at start or end of local part
        if (localPart.startsWith('.') || localPart.endsWith('.')) {
          return false;
        }
        
        // Check domain part
        if (domainPart.length === 0) {
          return false; // Domain cannot be empty
        }
        
        // Check for dot immediately after @ (domain starts with dot)
        if (domainPart.startsWith('.')) {
          return false;
        }
        
        // Check for hyphen immediately after @ (domain starts with hyphen)
        if (domainPart.startsWith('-')) {
          return false;
        }
        
        // Check for hyphen at end of domain part
        if (domainPart.endsWith('-')) {
          return false;
        }
        
        // Check for consecutive dots in domain part
        if (domainPart.indexOf('..') !== -1) {
          return false;
        }
        
        // Check for dot at end of domain part
        if (domainPart.endsWith('.')) {
          return false;
        }
        
        // Domain must have at least one dot and valid TLD
        if (domainPart.indexOf('.') === -1) {
          return false;
        }
        
        // Check that domain has valid TLD (at least 2 characters after last dot)
        var lastDotIndex = domainPart.lastIndexOf('.');
        if (lastDotIndex === -1 || domainPart.length - lastDotIndex - 1 < 2) {
          return false;
        }
        
        // Basic regex check for valid characters (alphanumeric, dots, hyphens, underscores)
        var localRegex = /^[a-zA-Z0-9._-]+$/;
        var domainRegex = /^[a-zA-Z0-9.-]+$/;
        
        if (!localRegex.test(localPart) || !domainRegex.test(domainPart)) {
          return false;
        }
        
        return true;
      }

      // Function to check if a character is valid for email field
      function isValidEmailChar(char, currentValue) {
        // Allow @ symbol only once
        if (char === '@') {
          return currentValue.indexOf('@') === -1;
        }
        
        // Check if we're in local part (before @) or domain part (after @)
        var atIndex = currentValue.indexOf('@');
        
        if (atIndex === -1) {
          // Local part: allow letters, numbers, dots, underscores, hyphens
          return /^[a-zA-Z0-9._-]$/.test(char);
        } else {
          // Domain part: allow letters, numbers, dots, hyphens (no underscore)
          return /^[a-zA-Z0-9.-]$/.test(char);
        }
      }

      // Function to hide error
      function hideError() {
        $('#emailError').hide();
      }
      
      // Function to hide success message
      function hideSuccess() {
        $('#successMessage').hide();
      }
      
      // Function to show success message
      function showSuccess(message) {
        hideError();
        $('#successMessage').text(message).show();
      }

      // Handle form submission
      $('#resetPasswordForm').on('submit', function(e) {
        e.preventDefault();
        
        var email = $('#resetEmail').val().trim();
        var emailError = $('#emailError');
        var hasError = false;
        
        // Hide previous errors and success messages
        hideError();
        hideSuccess();
        $('#recaptchaError').hide();
        
        // Validate email
        if (email === '') {
          emailError.text('Email is required').show();
          hasError = true;
        } else if (email.length > 128) {
          emailError.text('Please enter a valid email address').show();
          hasError = true;
        } else {
          // Check local part (before @) character limit
          var emailParts = email.split('@');
          if (emailParts.length > 0 && emailParts[0].length > 64) {
            emailError.text('Please enter a valid email address').show();
            hasError = true;
          } else if (!validateEmail(email)) {
            emailError.text('Please enter a valid email address').show();
            hasError = true;
          }
        }
        
        // reCAPTCHA v3 will be executed on form submit (see below)
        // No validation needed here as it runs automatically
        
        // If there are any errors, stop form submission
        if (hasError) {
          return false;
        }
        
        // Disable submit button
        var submitBtn = $(this).find('button[type="submit"]');
        submitBtn.prop('disabled', true).text('Sending...');
        
        // Execute reCAPTCHA v3 and get token
        grecaptcha.ready(function() {
          grecaptcha.execute('6LdxtxQsAAAAAEyx3PZK7yQOMYETFuL9sQR-xVep', {action: 'submit'}).then(function(token) {
            // Send request to backend API (including reCAPTCHA token)
            $.ajax({
          url: API_BASE_URL + '/api/auth/forgot-password',
          method: 'POST',
          contentType: 'application/json',
          data: JSON.stringify({
            email: email,
            recaptcha_token: token  // v3 token from execute()
          }),
          success: function(response) {
            // Check if response indicates success
            if (response.success === true) {
              // Reset form
              $('#resetPasswordForm')[0].reset();
              
              // Hide errors
              hideError();
              hideSuccess();
              
              // Show success icon and hide error icon
              $('#successIcon').show();
              $('#errorIcon').hide();
              
              // Show success modal with flex display for proper centering
              $('#successModal').css({
                'display': 'flex',
                'opacity': '0'
              }).animate({
                'opacity': '1'
              }, 300);
              
              // Close modal and redirect to sign-in page after 5000 milliseconds
              setTimeout(function() {
                $('#successModal').animate({
                  'opacity': '0'
                }, 300, function() {
                  $(this).css('display', 'none');
                  window.location.href = './sign-in.html';
                });
              }, 5000);
            } else {
              // Show error modal
              var modalTitle = $('#successModal .modal-title');
              var modalMessage = $('#successModal .modal-message');
              
              // Show error icon and hide success icon
              $('#errorIcon').show();
              $('#successIcon').hide();
              
              // Update modal content for error
              modalTitle.text('Password Reset Failed');
              modalMessage.text('Email not found in our system. Please check your email address and try again, or sign up if you don\'t have an account.');
              
              // Show modal with flex display for proper centering
              $('#successModal').css({
                'display': 'flex',
                'opacity': '0'
              }).animate({
                'opacity': '1'
              }, 300);
              
              // Auto-close modal after 6 seconds (long error message - 20 words)
              setTimeout(function() {
                $('#successModal').animate({
                  'opacity': '0'
                }, 300, function() {
                  $(this).css('display', 'none');
                  // Reset modal content back to success message for next time
                  modalTitle.text('Password Reset Email Sent!');
                  modalMessage.text('We\'ve sent a password reset link to your email. Please check your inbox to reset your password.');
                  // Reset icons - show success icon by default
                  $('#successIcon').show();
                  $('#errorIcon').hide();
                });
              }, 6000);
            }
            
            // Re-enable button
            submitBtn.prop('disabled', false).text('Send Reset Link');
          },
          error: function(xhr) {
            console.error('Password reset error:', xhr.responseJSON);
            var errorMsg = xhr.responseJSON?.detail || 'An error occurred. Please try again.';
            
            // reCAPTCHA v3 doesn't need reset - it auto-executes on next submit
            // Hide inline errors
            hideError();
            hideSuccess();
            $('#recaptchaError').hide();
            
            // Re-enable button
            submitBtn.prop('disabled', false).text('Send Reset Link');
            
            // Show error modal
            var modalTitle = $('#successModal .modal-title');
            var modalMessage = $('#successModal .modal-message');
            
            // Show error icon and hide success icon
            $('#errorIcon').show();
            $('#successIcon').hide();
            
            // Update modal content for error
            modalTitle.text('Password Reset Failed');
            
            // Create enhanced error message with helpful content
            var enhancedErrorMsg = errorMsg;
            var autoCloseTime = 5000; // Default 5 seconds
            if (errorMsg.toLowerCase().includes('not found') || errorMsg.toLowerCase().includes('email not found')) {
              enhancedErrorMsg = 'Email not found in our system. Please check your email address and try again, or sign up if you don\'t have an account.';
              autoCloseTime = 6000; // 6 seconds for long message (20 words)
            } else if (errorMsg.toLowerCase().includes('inactive') || errorMsg.toLowerCase().includes('account is inactive')) {
              enhancedErrorMsg = 'Your account is currently inactive. Please contact support if you believe this is an error.';
              autoCloseTime = 5000; // 5 seconds for medium message (12 words)
            } else {
              enhancedErrorMsg = errorMsg + ' Please check your email address and try again, or contact support if the problem persists.';
              autoCloseTime = 5000; // 5 seconds for longer messages
            }
            
            modalMessage.text(enhancedErrorMsg);
            
            // Show modal with flex display for proper centering
            $('#successModal').css({
              'display': 'flex',
              'opacity': '0'
            }).animate({
              'opacity': '1'
            }, 300);
            
            // Auto-close modal after appropriate time based on message length
            setTimeout(function() {
              $('#successModal').animate({
                'opacity': '0'
              }, 300, function() {
                $(this).css('display', 'none');
                // Reset modal content back to success message for next time
                modalTitle.text('Password Reset Email Sent!');
                modalMessage.text('We\'ve sent a password reset link to your email. Please check your inbox to reset your password.');
                // Reset icons - show success icon by default
                $('#successIcon').show();
                $('#errorIcon').hide();
              });
            }, autoCloseTime);
          }
            }); // Close $.ajax
          }); // Close grecaptcha.execute().then()
        }); // Close grecaptcha.ready()
        
        return false;
      });
      
      // Real-time email validation
      $('#resetEmail').on('blur', function() {
        var email = $(this).val().trim();
        var emailError = $('#emailError');
        
        if (email === '') {
          emailError.hide();
        } else if (email.length > 128) {
          emailError.text('Please enter a valid email address').show();
        } else {
          // Check local part (before @) character limit
          var emailParts = email.split('@');
          if (emailParts.length > 0 && emailParts[0].length > 64) {
            emailError.text('Please enter a valid email address').show();
          } else if (!validateEmail(email)) {
            emailError.text('Please enter a valid email address').show();
          } else {
            emailError.hide();
          }
        }
      });
      
      // Real-time max length validation, space blocking, and character validation for Email field
      $('#resetEmail').on('keypress', function(e) {
        var $input = $(this);
        var currentValue = $input.val();
        var emailError = $('#emailError');
        var char = String.fromCharCode(e.which || e.keyCode);
        
        // Allow control keys (backspace, delete, tab, etc.)
        if (e.which === 0 || e.which === 8 || e.which === 9 || e.which === 13 || e.which === 27 || 
            (e.which >= 35 && e.which <= 40) || (e.which >= 16 && e.which <= 20)) {
          return true;
        }
        
        // Block space character (keyCode 32)
        if (e.which === 32 || e.keyCode === 32) {
          e.preventDefault();
          return false;
        }
        
        // Check if maximum length (128) is reached
        if (currentValue.length >= 128) {
          e.preventDefault();
          emailError.text('Please enter a valid email address').show();
          return false;
        }
        
        // Block invalid characters
        if (!isValidEmailChar(char, currentValue)) {
          e.preventDefault();
          return false;
        }
        
        // Hide error if valid character is being typed
        emailError.hide();
        return true;
      });
      
      // Handle paste and other input methods for Email field
      $('#resetEmail').on('input', function() {
        var $input = $(this);
        var currentValue = $input.val();
        var emailError = $('#emailError');
        
        // Remove all spaces from input
        var filteredValue = currentValue.replace(/\s/g, '');
        
        // Split by @ to handle local and domain parts separately
        var atIndex = filteredValue.indexOf('@');
        var localPart = '';
        var domainPart = '';
        
        if (atIndex === -1) {
          // No @ found, treat entire value as local part
          localPart = filteredValue;
        } else {
          // Split into local and domain parts
          localPart = filteredValue.substring(0, atIndex);
          domainPart = filteredValue.substring(atIndex + 1);
          
          // Keep only the first @, remove any additional @ symbols from domain
          domainPart = domainPart.replace(/@/g, '');
        }
        
        // Filter local part: allow only a-z, A-Z, 0-9, ., _, -
        var validLocalPart = '';
        for (var i = 0; i < localPart.length; i++) {
          if (/^[a-zA-Z0-9._-]$/.test(localPart[i])) {
            validLocalPart += localPart[i];
          }
        }
        
        // Filter domain part: allow only a-z, A-Z, 0-9, ., - (no underscore)
        var validDomainPart = '';
        for (var j = 0; j < domainPart.length; j++) {
          if (/^[a-zA-Z0-9.-]$/.test(domainPart[j])) {
            validDomainPart += domainPart[j];
          }
        }
        
        // Reconstruct email
        if (atIndex === -1) {
          filteredValue = validLocalPart;
        } else {
          filteredValue = validLocalPart + '@' + validDomainPart;
        }
        
        // Update input value if changes were made
        if (currentValue !== filteredValue) {
          $input.val(filteredValue);
          currentValue = filteredValue;
        }
        
        // Truncate to maximum length (128 characters)
        if (currentValue.length > 128) {
          $input.val(currentValue.substring(0, 128));
          emailError.text('Please enter a valid email address').show();
        } else {
          // Hide error if length is 128 or less
          if (currentValue.length <= 128) {
            emailError.hide();
          }
        }
        
        $('#successMessage').hide();
      });
      
      // Handle modal close button click
      $('#modalCloseBtn').on('click', function() {
        var modalTitle = $('#successModal .modal-title').text();
        $('#successModal').animate({
          'opacity': '0'
        }, 300, function() {
          $(this).css('display', 'none');
          // Reset modal content back to success message
          $('#successModal .modal-title').text('Password Reset Email Sent!');
          $('#successModal .modal-message').text('We\'ve sent a password reset link to your email. Please check your inbox to reset your password.');
          // Reset icons - show success icon by default
          $('#successIcon').show();
          $('#errorIcon').hide();
        });
        // Only redirect to sign-in if it's a success message, not an error
        if (modalTitle === 'Password Reset Email Sent!') {
          setTimeout(function() {
            window.location.href = './sign-in.html';
          }, 300);
        }
      });
      
      // Close modal when clicking outside the modal content
      $('#successModal').on('click', function(e) {
        if ($(e.target).attr('id') === 'successModal') {
          var modalTitle = $('#successModal .modal-title').text();
          $(this).animate({
            'opacity': '0'
          }, 300, function() {
            $(this).css('display', 'none');
            // Reset modal content back to success message
            $('#successModal .modal-title').text('Password Reset Email Sent!');
            $('#successModal .modal-message').text('We\'ve sent a password reset link to your email. Please check your inbox to reset your password.');
            // Reset icons - show success icon by default
            $('#successIcon').show();
            $('#errorIcon').hide();
          });
          // Only redirect to sign-in if it's a success message, not an error
          if (modalTitle === 'Password Reset Email Sent!') {
            setTimeout(function() {
              window.location.href = './sign-in.html';
            }, 300);
          }
        }
        
      });
    });
    $('#logoutBtn, .logout-btn').on('click', function (e) {
        e.preventDefault();
        handleLogout();
      });

      function showConfirmationModal(message, onConfirm, onCancel) {
        $('#confirmationMessage').text(message);
        $('#confirmationModal').fadeIn(300);

        // Remove any existing handlers to prevent duplicates
        $('#confirmationYesBtn, #confirmationNoBtn').off('click');

        // Yes button handler
        $('#confirmationYesBtn').on('click', function () {
          $('#confirmationModal').fadeOut(300);
          if (onConfirm) {
            onConfirm();
          }
        });

        // No button handler
        $('#confirmationNoBtn').on('click', function () {
          $('#confirmationModal').fadeOut(300);
          if (onCancel) {
            onCancel();
          }
        });

        // Close on overlay click (optional - you can remove this if you don't want it)
        $('#confirmationModal').on('click', function (e) {
          if ($(e.target).hasClass('confirmation-modal')) {
            $('#confirmationModal').fadeOut(300);
            if (onCancel) {
              onCancel();
            }
          }
        });
      }

      function handleLogout() {
        showConfirmationModal('Are you sure you want to logout?', function () {
          // User confirmed - proceed with logout
          // Clear all authentication data from localStorage and sessionStorage
          localStorage.removeItem('access_token');
          localStorage.removeItem('user');
          localStorage.removeItem('remember_me_used'); // Clear Remember Me flag
          sessionStorage.removeItem('access_token');
          sessionStorage.removeItem('user');

          // Note: We keep remembered_email and remembered_password in localStorage
          // so they persist after logout (only cleared if Remember Me was unchecked)

          // Redirect to index.html (refresh page to show sign in button)
          window.location.href = './index.html';
        });
      }

  </script> 

</body>
</html>