@extends('layouts.app')

@section('title', 'Veriqo - Set New Password')

@section('content')

    <!-- main content -->
    <main class="auth-content">
        <section class="auth_sec animate-on-scroll" data-animation="fadeInLeft">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-6 col-md-10">
                        <div class="auth_info_box">
                            <h2>Set New Password</h2>

                            <form id="setPasswordForm" action="" method="post" novalidate>
                                <div class="auth_inr">
                                    <div class="form-group">
                                        <div style="position: relative;">
                                            <input type="password" id="newPassword" name="newPassword" class="form-control" placeholder="New Password*" style="padding-right: 40px;" maxlength="16">
                                            <span class="password-toggle" id="newPasswordToggle" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 10;">
                                                <img src="./assets/image/hidden 1.png" alt="Show password" id="newPasswordToggleIcon" style="width: 20px; height: 20px;">
                                            </span>
                                        </div>
                                        <small id="newPasswordError" style="color: #dc3545; font-size: 12px; display: none; margin-top: 5px;"></small>
                                    </div>
                                    <div class="form-group">
                                        <div style="position: relative;">
                                            <input type="password" id="confirmPassword" name="confirmPassword" class="form-control" placeholder="Re-enter Password*" style="padding-right: 40px;" maxlength="16">
                                            <span class="password-toggle" id="confirmPasswordToggle" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 10;">
                                                <img src="./assets/image/hidden 1.png" alt="Show password" id="confirmPasswordToggleIcon" style="width: 20px; height: 20px;">
                                            </span>
                                        </div>
                                        <small id="confirmPasswordError" style="color: #dc3545; font-size: 12px; display: none; margin-top: 5px;"></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; margin-top: 5px;">Please verify that you are not a robot</small>
                                    </div>
                                    <div class="form-group">
                                        <small id="successMessage" style="color: #28a745; font-size: 12px; display: none; margin-top: 5px;"></small>
                                    </div>
                                    <div class="form-group">
                                        <button type="submit" class="btn primary_btn w-100">Submit</button>
                                    </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 Successfully Updated!</h3>
            <p class="modal-message">Your new password has been set successfully. You can now log in with your new credentials.</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() {
      // Get token from URL query parameter
      var urlParams = new URLSearchParams(window.location.search);
      var token = urlParams.get('token');
      
      // If no token in URL, show error and disable form
      if (!token) {
        $('#newPasswordError').text('Invalid reset link. Please request a new password reset.').show();
        $('#setPasswordForm').find('input, button').prop('disabled', true);
        return;
      }
      
      // Decode token (handle URL encoding)
      token = decodeURIComponent(token);
      
      // Disable form initially until token is verified
      $('#setPasswordForm').find('input, button').prop('disabled', true);
      
      // Verify token first before allowing password reset
      var tokenValid = false;
      $.ajax({
        url: API_BASE_URL + '/api/auth/verify-reset-token?token=' + encodeURIComponent(token),
        method: 'GET',
        success: function(response) {
          if (response.valid === true) {
            tokenValid = true;
            // Token is valid, enable form
            $('#setPasswordForm').find('input, button').prop('disabled', false);
            // Clean URL (remove token for security)
            window.history.replaceState({}, document.title, window.location.pathname);
          } else {
            $('#newPasswordError').text('Invalid or expired reset link. Please request a new password reset.').show();
            $('#setPasswordForm').find('input, button').prop('disabled', true);
          }
        },
        error: function(xhr) {
          console.error('Token verification error:', xhr.responseJSON);
          var errorMsg = xhr.responseJSON?.detail || 'Invalid or expired reset link. Please request a new password reset.';
          
          // Enhanced error message for expired tokens
          var enhancedErrorMsg = errorMsg;
          if (errorMsg.toLowerCase().includes('expired') || errorMsg.toLowerCase().includes('expire')) {
            enhancedErrorMsg = 'Invalid or expired reset token. This link may have expired (valid for 5 minutes only), already been used, or is invalid. Please request a new password reset email.';
          } else if (errorMsg.toLowerCase().includes('invalid') || errorMsg.toLowerCase().includes('token')) {
            enhancedErrorMsg = 'Invalid or expired reset token. This link may have expired (valid for 5 minutes only), already been used, or is invalid. Please request a new password reset email.';
          }
          
          // Hide inline error (modal will show the error instead)
          $('#newPasswordError').hide();
          $('#setPasswordForm').find('input, button').prop('disabled', true);
          
          // Show error modal for better visibility
          $('#errorIcon').show();
          $('#successIcon').hide();
          $('#successModal .modal-title').text('Password Reset Failed');
          $('#successModal .modal-message').text(enhancedErrorMsg);
          $('#successModal').css({
            'display': 'flex',
            'opacity': '0'
          }).animate({
            'opacity': '1'
          }, 300);
          
          // Auto-close modal after 5 seconds and redirect to forgot password page
          setTimeout(function() {
            $('#successModal').animate({
              'opacity': '0'
            }, 300, function() {
              $(this).css('display', 'none');
              // Reset modal content back to success message for next time
              $('#successModal .modal-title').text('Password Successfully Updated!');
              $('#successModal .modal-message').text('Your new password has been set successfully. You can now log in with your new credentials.');
              $('#successIcon').show();
              $('#errorIcon').hide();
              // Redirect to forgot password page
              window.location.href = './reset-your-password.html';
            });
          }, 5000);
        }
      });
      
      // Password validation functions
      function validatePasswordLength(password) {
        return password.length >= 8;
      }
      
      function validatePasswordUppercase(password) {
        return /[A-Z]/.test(password);
      }
      
      function validatePasswordLowercase(password) {
        return /[a-z]/.test(password);
      }
      
      function validatePasswordNumber(password) {
        return /[0-9]/.test(password);
      }
      
      function validatePasswordSpecial(password) {
        return /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password);
      }
      
      function validatePassword(password) {
        var errors = [];
        if (!password || password === '') {
          errors.push('Password is required');
        } else {
          if (!validatePasswordLength(password)) {
            errors.push('Password must be at least 8 characters long');
          }
          if (!validatePasswordUppercase(password)) {
            errors.push('Password must contain at least one uppercase letter');
          }
          if (!validatePasswordLowercase(password)) {
            errors.push('Password must contain at least one lowercase letter');
          }
          if (!validatePasswordNumber(password)) {
            errors.push('Password must contain at least one number');
          }
          if (!validatePasswordSpecial(password)) {
            errors.push('Password must contain at least one special character');
          }
        }
        return errors;
      }
      
      // Function to get combined password requirements message (static - shows all requirements)
      function getPasswordRequirementsMessage(password) {
        if (!password || password === '') {
          return 'Password is required';
        }
        
        // Check if password meets all requirements
        var isValid = validatePasswordLength(password) && 
                      validatePasswordUppercase(password) && 
                      validatePasswordLowercase(password) && 
                      validatePasswordNumber(password) && 
                      validatePasswordSpecial(password);
        
        if (isValid) {
          return ''; // Password is valid - hide message
        }
        
        // Always show ALL requirements in a static message (doesn't change)
        return 'Your password must be 8–16 characters long and include at least one uppercase letter, one lowercase letter, one number, and one special character';
      }
      
      // Function to hide all errors
      function hideAllErrors() {
        $('#newPasswordError').hide();
        $('#confirmPasswordError').hide();
        $('#successMessage').hide();
      }
      
      // Handle form submission
      $('#setPasswordForm').on('submit', function(e) {
        e.preventDefault();
        
        var newPassword = $('#newPassword').val();
        var confirmPassword = $('#confirmPassword').val();
        var newPasswordError = $('#newPasswordError');
        var confirmPasswordError = $('#confirmPasswordError');
        var successMessage = $('#successMessage');
        var hasError = false;
        
        // Hide previous errors and success message
        hideAllErrors();
        
        // Validate new password
        var passwordRequirementsMsg = getPasswordRequirementsMessage(newPassword);
        if (passwordRequirementsMsg !== '') {
          newPasswordError.text(passwordRequirementsMsg).show();
          hasError = true;
        }
        
        // Validate confirm password
        if (confirmPassword === '') {
          confirmPasswordError.text('Re-enter password is required').show();
          hasError = true;
        } else if (newPassword !== confirmPassword) {
          confirmPasswordError.text('Confirm password does not match').show();
          hasError = true;
        }
        
        // reCAPTCHA v3 will be executed on form submit (see below)
        // No validation needed here as it runs automatically
        
        if (hasError) {
          return false;
        }
        
        // Disable submit button
        var submitBtn = $(this).find('button[type="submit"]');
        submitBtn.prop('disabled', true).text('Updating...');
        
        // Check if token is still valid before submitting
        if (!tokenValid) {
          newPasswordError.text('Invalid or expired reset link. Please request a new password reset.').show();
          submitBtn.prop('disabled', false).text('Submit');
          return false;
        }
        
        // Execute reCAPTCHA v3 and get token
        grecaptcha.ready(function() {
          grecaptcha.execute('6LdxtxQsAAAAAEyx3PZK7yQOMYETFuL9sQR-xVep', {action: 'submit'}).then(function(recaptchaToken) {
            // Send request to backend API (including token and reCAPTCHA token)
            $.ajax({
          url: API_BASE_URL + '/api/auth/set-password',
          method: 'POST',
          contentType: 'application/json',
          data: JSON.stringify({
            token: token,
            new_password: newPassword,
            recaptcha_token: recaptchaToken  // v3 token from execute()
          }),
          success: function(response) {
            // Reset form and hide errors
            $('#setPasswordForm')[0].reset();
            hideAllErrors();
            
            // Re-enable button
            submitBtn.prop('disabled', false).text('Submit');
            
            // Show success icon and hide error icon
            $('#successIcon').show();
            $('#errorIcon').hide();
            
            // Update modal content for success
            $('#successModal .modal-title').text('Password Successfully Updated!');
            $('#successModal .modal-message').text('Your new password has been set successfully. You can now log in with your new credentials.');
            
            // Show success modal with flex display for proper centering
            $('#successModal').css({
              'display': 'flex',
              'opacity': '0'
            }).animate({
              'opacity': '1'
            }, 300);
            
            // Redirect to sign-in page after 5 seconds
            setTimeout(function() {
              $('#successModal').animate({
                'opacity': '0'
              }, 300, function() {
                $(this).css('display', 'none');
                window.location.href = './sign-in.html';
              });
            }, 5000);
          },
          error: function(xhr) {
            console.error('Set password 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 success message on error
            successMessage.hide();
            $('#recaptchaError').hide();
            
            // Enhanced error message
            var enhancedErrorMsg = errorMsg;
            var autoCloseTime = 5000; // Default 5 seconds
            if (errorMsg.toLowerCase().includes('token') || errorMsg.toLowerCase().includes('expired') || errorMsg.toLowerCase().includes('invalid')) {
              enhancedErrorMsg = 'Invalid or expired reset token. This link may have expired (valid for 5 minutes only), already been used, or is invalid. Please request a new password reset email.';
              autoCloseTime = 8000; // 8 seconds for very long message (30 words)
              // Disable form if token is invalid
              $('#setPasswordForm').find('input, button').prop('disabled', true);
              tokenValid = false;
            }
            
            // Hide inline error (modal will show the error instead)
            newPasswordError.hide();
            
            // Show error modal for better visibility
            $('#errorIcon').show();
            $('#successIcon').hide();
            $('#successModal .modal-title').text('Password Reset Failed');
            $('#successModal .modal-message').text(enhancedErrorMsg);
            $('#successModal').css({
              'display': 'flex',
              'opacity': '0'
            }).animate({
              'opacity': '1'
            }, 300);
            
            // Auto-close modal after appropriate time (8s for long message, 5s for others) and redirect to forgot password page
            setTimeout(function() {
              $('#successModal').animate({
                'opacity': '0'
              }, 300, function() {
                $(this).css('display', 'none');
                // Reset modal content back to success message for next time
                $('#successModal .modal-title').text('Password Successfully Updated!');
                $('#successModal .modal-message').text('Your new password has been set successfully. You can now log in with your new credentials.');
                $('#successIcon').show();
                $('#errorIcon').hide();
                // Redirect to forgot password page
                window.location.href = './reset-your-password.html';
              });
            }, autoCloseTime);
            
            // Re-enable button
            submitBtn.prop('disabled', false).text('Submit');
          }
            }); // Close $.ajax
          }); // Close grecaptcha.execute().then()
        }); // Close grecaptcha.ready()
        
        return false;
      });
      
      // Block spaces and enforce max length in New Password field
      $('#newPassword').on('keypress', function(e) {
        var $input = $(this);
        var currentValue = $input.val();
        
        // 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 (16) is reached
        if (currentValue.length >= 16) {
          e.preventDefault();
          return false;
        }
      });
      
      // Block paste event on new password field
      $('#newPassword').on('paste', function(e) {
        e.preventDefault();
        return false;
      });
      
      // Block keyboard shortcuts (Ctrl+V, Ctrl+C) on new password field
      $('#newPassword').on('keydown', function(e) {
        // Block Ctrl+V (paste) - keyCode 86
        if ((e.ctrlKey || e.metaKey) && e.keyCode === 86) {
          e.preventDefault();
          return false;
        }
        // Block Ctrl+C (copy) - keyCode 67
        if ((e.ctrlKey || e.metaKey) && e.keyCode === 67) {
          e.preventDefault();
          return false;
        }
      });
      
      // Filter spaces from pasted content in New Password field (if paste somehow gets through)
      $('#newPassword').on('input', function() {
        var $input = $(this);
        var newPassword = $input.val();
        var newPasswordError = $('#newPasswordError');
        
        // Remove spaces from input
        var filteredPassword = newPassword.replace(/\s/g, '');
        if (newPassword !== filteredPassword) {
          $input.val(filteredPassword);
          newPassword = filteredPassword;
        }
        
        // Truncate to maximum length (16 characters)
        if (newPassword.length > 16) {
          $input.val(newPassword.substring(0, 16));
          newPassword = newPassword.substring(0, 16);
        }
        
        // Hide error on input, but show validation if password has content
        if (newPassword === '') {
          newPasswordError.hide();
        } else {
          // Show all password requirements in real-time as user types
          var passwordRequirementsMsg = getPasswordRequirementsMessage(newPassword);
          if (passwordRequirementsMsg !== '') {
            newPasswordError.text(passwordRequirementsMsg).show();
          } else {
            newPasswordError.hide();
          }
        }
        
        $('#successMessage').hide();
        // Check password match in real-time
        var confirmPassword = $('#confirmPassword').val();
        if (confirmPassword !== '' && newPassword !== confirmPassword) {
          $('#confirmPasswordError').text('Passwords do not match').show();
        } else if (confirmPassword !== '' && newPassword === confirmPassword) {
          $('#confirmPasswordError').hide();
        }
      });
      
      // Block spaces and enforce max length in Confirm Password field
      $('#confirmPassword').on('keypress', function(e) {
        var $input = $(this);
        var currentValue = $input.val();
        
        // 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 (16) is reached
        if (currentValue.length >= 16) {
          e.preventDefault();
          return false;
        }
      });
      
      // Block paste event on confirm password field
      $('#confirmPassword').on('paste', function(e) {
        e.preventDefault();
        return false;
      });
      
      // Block keyboard shortcuts (Ctrl+V, Ctrl+C) on confirm password field
      $('#confirmPassword').on('keydown', function(e) {
        // Block Ctrl+V (paste) - keyCode 86
        if ((e.ctrlKey || e.metaKey) && e.keyCode === 86) {
          e.preventDefault();
          return false;
        }
        // Block Ctrl+C (copy) - keyCode 67
        if ((e.ctrlKey || e.metaKey) && e.keyCode === 67) {
          e.preventDefault();
          return false;
        }
      });
      
      // Filter spaces from pasted content in Confirm Password field (if paste somehow gets through)
      $('#confirmPassword').on('input', function() {
        var $input = $(this);
        var confirmPassword = $input.val();
        
        // Remove spaces from input
        var filteredConfirmPassword = confirmPassword.replace(/\s/g, '');
        if (confirmPassword !== filteredConfirmPassword) {
          $input.val(filteredConfirmPassword);
          confirmPassword = filteredConfirmPassword;
        }
        
        // Truncate to maximum length (16 characters)
        if (confirmPassword.length > 16) {
          $input.val(confirmPassword.substring(0, 16));
          confirmPassword = confirmPassword.substring(0, 16);
        }
        
        $('#confirmPasswordError').hide();
        $('#successMessage').hide();
        // Check password match in real-time
        var newPassword = $('#newPassword').val();
        if (newPassword !== '' && newPassword !== confirmPassword) {
          $('#confirmPasswordError').text('Passwords do not match').show();
        } else if (newPassword !== '' && newPassword === confirmPassword) {
          $('#confirmPasswordError').hide();
        }
      });
      
      // Toggle password visibility for New Password field
      $('#newPasswordToggle').on('click', function() {
        var passwordInput = $('#newPassword');
        var toggleIcon = $('#newPasswordToggleIcon');
        
        if (passwordInput.attr('type') === 'password') {
          passwordInput.attr('type', 'text');
          toggleIcon.attr('src', './assets/image/Icon.png');
          toggleIcon.attr('alt', 'Hide password');
        } else {
          passwordInput.attr('type', 'password');
          toggleIcon.attr('src', './assets/image/hidden 1.png');
          toggleIcon.attr('alt', 'Show password');
        }
      });
      
      // Toggle password visibility for Confirm Password field
      $('#confirmPasswordToggle').on('click', function() {
        var confirmPasswordInput = $('#confirmPassword');
        var toggleIcon = $('#confirmPasswordToggleIcon');
        
        if (confirmPasswordInput.attr('type') === 'password') {
          confirmPasswordInput.attr('type', 'text');
          toggleIcon.attr('src', './assets/image/Icon.png');
          toggleIcon.attr('alt', 'Hide password');
        } else {
          confirmPasswordInput.attr('type', 'password');
          toggleIcon.attr('src', './assets/image/hidden 1.png');
          toggleIcon.attr('alt', 'Show password');
        }
      });
      
      // Real-time password validation
      $('#newPassword').on('blur', function() {
        var newPassword = $(this).val();
        var newPasswordError = $('#newPasswordError');
        
        if (newPassword === '') {
          newPasswordError.hide();
        } else {
          var passwordRequirementsMsg = getPasswordRequirementsMessage(newPassword);
          if (passwordRequirementsMsg !== '') {
            newPasswordError.text(passwordRequirementsMsg).show();
          } else {
            newPasswordError.hide();
          }
          // Check if confirm password matches when new password changes
          var confirmPassword = $('#confirmPassword').val();
          if (confirmPassword !== '' && newPassword !== confirmPassword) {
            $('#confirmPasswordError').text('Passwords do not match').show();
          } else if (confirmPassword !== '' && newPassword === confirmPassword) {
            $('#confirmPasswordError').hide();
          }
        }
      });
      
      $('#confirmPassword').on('blur', function() {
        var confirmPassword = $(this).val();
        var newPassword = $('#newPassword').val();
        var confirmPasswordError = $('#confirmPasswordError');
        
        if (confirmPassword === '') {
          confirmPasswordError.hide();
        } else if (newPassword !== '' && newPassword !== confirmPassword) {
          confirmPasswordError.text('Passwords do not match').show();
        } else {
          confirmPasswordError.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
          $('#successModal .modal-title').text('Password Successfully Updated!');
          $('#successModal .modal-message').text('Your new password has been set successfully. You can now log in with your new credentials.');
          $('#successIcon').show();
          $('#errorIcon').hide();
        });
        // Redirect based on modal type
        if (modalTitle === 'Password Successfully Updated!') {
          // Success - redirect to sign-in
          setTimeout(function() {
            window.location.href = './sign-in.html';
          }, 300);
        } else {
          // Error - redirect to forgot password page
          setTimeout(function() {
            window.location.href = './reset-your-password.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
            $('#successModal .modal-title').text('Password Successfully Updated!');
            $('#successModal .modal-message').text('Your new password has been set successfully. You can now log in with your new credentials.');
            $('#successIcon').show();
            $('#errorIcon').hide();
          });
          // Redirect based on modal type
          if (modalTitle === 'Password Successfully Updated!') {
            // Success - redirect to sign-in
            setTimeout(function() {
              window.location.href = './sign-in.html';
            }, 300);
          } else {
            // Error - redirect to forgot password page
            setTimeout(function() {
              window.location.href = './reset-your-password.html';
            }, 300);
          }
        }
      });
    });
  </script>
</body>
</html>