@extends('layouts.app')

@section('title', 'Veriqo - Edit Profile')

@section('content')

    <!-- main content -->
    <main class="page-content">
        <section class="payment_history animate-on-scroll" data-animation="fadeInLeft">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-6 col-md-10"> 
                          <h1 class="text-center main-titlepro">Edit Profile</h1>
                        <div class="auth_info_box edit_profile_form_wrapper">
                            <!-- <h2>Edit Profile</h2> -->

                            <form id="profileEditForm" action="javascript:void(0);" method="post" onsubmit="return false;" novalidate>
                                <div class="auth_inr">
                                    <div class="form-group">
                                        <input type="text" id="fullName" name="full_name" class="form-control" placeholder="Full Name*" maxlength="50" value="">
                                        <small id="fullNameError" style="color: #dc3545; font-size: 12px; display: none; margin-top: 5px;"></small>
                                    </div>
                                    <div class="form-group">
                                        <input type="email" id="workEmail" name="email" class="form-control" placeholder="Work email" value="" disabled>
                                        <small id="emailError" style="color: #dc3545; font-size: 12px; display: none; margin-top: 5px;"></small>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox-group">
                                            <div class="checkbox-item">
                                                <input type="checkbox" id="individualCheckbox" name="user_type" value="individual" disabled>
                                                <label for="individualCheckbox">Individual</label>
                                            </div>
                                            <div class="checkbox-item">
                                                <input type="checkbox" id="companyCheckbox" name="user_type" value="company" disabled>
                                                <label for="companyCheckbox">Company</label>
                                            </div>
                                        </div>
                                        <small id="userTypeError" style="color: #dc3545; font-size: 12px; display: none; margin-top: 5px;"></small>
                                    </div>
                                    <div class="form-group position-relative" id="companyFieldGroup" style="display: none;">
                                        <input type="text" id="company" name="company" class="form-control autocomplete-input" placeholder="Company*" autocomplete="off" maxlength="100" disabled>
                                        <div class="suggestions" id="company-suggestions"></div>
                                        <small id="companyError" style="color: #dc3545; font-size: 12px; display: none; margin-top: 5px;"></small>
                                    </div>
                                    <div class="form-group">
                                        <button type="submit" class="btn primary_btn w-100" id="submitBtn">Update Profile</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Success/Error Modal -->
    <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" id="modalTitle">Profile Updated Successfully!</h3>
            <p class="modal-message" id="modalMessage">Your profile has been updated successfully.</p>
            <div class="modal-data" id="modalData" style="display: none; margin-top: 20px; padding: 15px; background: rgba(255, 255, 255, 0.05); border-radius: 8px; text-align: left; font-size: 12px; max-height: 200px; overflow-y: auto; color: #cccccc; border: 1px solid rgba(255, 255, 255, 0.1);"></div>
        </div>
    </div>

@endsection


  <!-- Confirmation Modal -->
  <div id="confirmationModal" class="confirmation-modal" style="display: none;">
    <div class="modal-content">
      <p class="confirmation-message" id="confirmationMessage"></p>
      <div class="confirmation-buttons">
        <button id="confirmationYesBtn" class="btn-confirm-yes">Yes</button>
        <button id="confirmationNoBtn" class="btn-confirm-no">No</button>
      </div>
    </div>
  </div>

  
  <script src="./assets/js/jquery.min.js"></script>
  <script src="./assets/js/bs.min.js"></script>
  <script src="./assets/js/custom.js"></script>
  <script src="./assets/js/modal-utils.js"></script>
  <script>
    // Backend API base URL - Update this when deploying to production
    const API_BASE_URL = 'https://veriqo.xceltec.in/'; 
     $(document).ready(function() {
      // Check authentication status and show/hide profile or sign in button
      function checkAuthAndUpdateUI() {
        var accessToken = localStorage.getItem('access_token');
        
        if (accessToken) {
          // User is logged in - show profile, hide sign in button
          $('#profileSection').show();
          $('#signInButton').hide();
          // Update profile initial
          updateProfileInitial();
        } else {
          // User is not logged in - show sign in button, hide profile
          $('#profileSection').hide();
          $('#signInButton').show();
        }
      }
      
      // Replace profile images with user initial
      function updateProfileInitial() {
        try {
          // Get user data from localStorage
          var userDataStr = localStorage.getItem('user');
          if (!userDataStr) {
            return; // No user data available
          }
          
          var userData = JSON.parse(userDataStr);
          var fullName = userData.full_name || '';
          
          // Get first alphabet letter (A-Z), ignoring all non-alphabet characters (Google-like behavior)
          var firstLetter = '';
          if (fullName && fullName.trim().length > 0) {
            var trimmedName = fullName.trim();
            // Find first A-Z letter (case-insensitive), skip hyphens, symbols, numbers, etc.
            var match = trimmedName.match(/[a-zA-Z]/);
            if (match) {
              firstLetter = match[0].toUpperCase();
            } else {
              firstLetter = '?'; // No letters found (e.g., "---", "@#$")
            }
          } else {
            firstLetter = '?'; // Fallback if no name
          }
          
          // Replace all profile images with initial div
         
          
          // Add click handler for profile initial to toggle dropdown
        
        } catch (error) {
          console.error('Error updating profile initial:', error);
        }
      }
      
      // Close dropdown when clicking outside
      $(document).on('click', function(e) {
        if (!$(e.target).closest('.profile').length) {
          $('.profile_dropdown').slideUp(200);
        }
      });
      
      // Confirmation Modal Function
      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();
            }
          }
        });
      }
      
      // Logout functionality
      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';
        });
      }
      
      // Delete account functionality
      function handleDeleteAccount() {
        showConfirmationModal('Are you sure you want to delete your account? This action cannot be undone.', function() {
          // User confirmed - proceed with account deletion
          // Get access token from localStorage
          var accessToken = localStorage.getItem('access_token');
          
          if (!accessToken) {
            alert('You are not logged in. Please log in again.');
            window.location.href = './index.html';
            return;
          }
          
          // Call backend API to delete account
          $.ajax({
            url: API_BASE_URL + '/api/auth/delete-account',
            method: 'DELETE',
            headers: {
              'Authorization': 'Bearer ' + accessToken,
              'Content-Type': 'application/json'
            },
            success: function(response) {
              // 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');
              
              // Clear remembered credentials on account deletion (account no longer exists)
              localStorage.removeItem('remembered_email');
              localStorage.removeItem('remembered_password');
              
              // Redirect to index.html
              alert('Your account has been deleted successfully.');
              window.location.href = './index.html';
            },
            error: function(xhr) {
              console.error('Delete account error:', xhr.responseJSON);
              var errorMsg = xhr.responseJSON?.detail || 'An error occurred while deleting your account. Please try again.';
              
              // If token is invalid/expired, clear localStorage and sessionStorage and redirect
              if (xhr.status === 401) {
                localStorage.removeItem('access_token');
                localStorage.removeItem('user');
                localStorage.removeItem('remember_me_used'); // Clear Remember Me flag
                sessionStorage.removeItem('access_token');
                sessionStorage.removeItem('user');
                alert('Your session has expired. Please log in again.');
                window.location.href = './index.html';
              } else {
                alert('Error: ' + errorMsg);
              }
            }
          });
        });
      }
      
      // Attach logout handler
      $('#logoutBtn, .logout-btn').on('click', function(e) {
        e.preventDefault();
        handleLogout();
      });
      
      // Attach delete account handler
      $('#deleteAccountBtn, .delete-account-btn').on('click', function(e) {
        e.preventDefault();
        handleDeleteAccount();
      });
      
      // Check authentication on page load
      checkAuthAndUpdateUI();
      
      // Handle click on "Experience the Executive AI Shadow LLM" button
      $('#experienceBtn').on('click', function() {
        // Check if user is authenticated by checking for access token in localStorage
        var accessToken = localStorage.getItem('access_token');
        
        if (accessToken) {
          // User is authenticated - redirect to strategic analysis page
          window.location.href = './strategic-analysis.html';
        } else {
          // User is not authenticated - redirect to sign-in page
          window.location.href = './sign-in.html';
        }
      });
    });
    
    $(document).ready(function() {
      // Initialize session expiry check (checks immediately and sets up periodic check)
      var expiryCheckInterval = initSessionExpiryCheck('sessionExpiredModal');
      
      // If session expired, stop execution (redirect will happen automatically)
      if (expiryCheckInterval === null) {
        return;
      }
      
      // Get access token from localStorage or sessionStorage
      var accessToken = localStorage.getItem('access_token');
      var userData = null;
      
      // Try to get user data from localStorage or sessionStorage (stored during login)
      var storedUser = localStorage.getItem('user');
      if (storedUser) {
        try {
          userData = JSON.parse(storedUser);
        } catch (e) {
          // Error parsing user data - will use API fallback
        }
      }
      
      // Check if user is logged in
      if (!accessToken || accessToken.trim() === '') {
        // No token - redirect to sign-in
        window.location.href = './sign-in.html';
        return;
      }
      
      // Trim token to remove any whitespace
      accessToken = accessToken.trim();
      
      // Replace profile images with user initial
      function updateProfileInitial() {
        try {
          // Get user data from localStorage
          var userDataStr = localStorage.getItem('user');
          if (!userDataStr) {
            return; // No user data available
          }
          
          var userData = JSON.parse(userDataStr);
          var fullName = userData.full_name || '';
          
          // Get first alphabet letter (A-Z), ignoring all non-alphabet characters (Google-like behavior)
          var firstLetter = '';
          if (fullName && fullName.trim().length > 0) {
            var trimmedName = fullName.trim();
            // Find first A-Z letter (case-insensitive), skip hyphens, symbols, numbers, etc.
            var match = trimmedName.match(/[a-zA-Z]/);
            if (match) {
              firstLetter = match[0].toUpperCase();
            } else {
              firstLetter = '?'; // No letters found (e.g., "---", "@#$")
            }
          } else {
            firstLetter = '?'; // Fallback if no name
          }
          
          // Replace all profile images with initial div
          $('.profile img[src*="/profile.png"]').each(function() {
            $(this).replaceWith('<div class="profile-initial">' + firstLetter + '</div>');
          });
          
          // Add click handler for profile initial to toggle dropdown
          $('.profile-initial').on('click', function(e) {
            e.stopPropagation();
            // Get the closest profile container and find its dropdown
            var $profileContainer = $(this).closest('.profile');
            var $dropdown = $profileContainer.find('.profile_dropdown');
            // Toggle the dropdown with slide animation (same as custom.js)
            $dropdown.slideToggle(200);
          });
        } catch (error) {
          console.error('Error updating profile initial:', error);
        }
      }
      
      // Call function to update profile initial
      updateProfileInitial();
      
      // Store original email to detect changes
      var originalEmail = '';
      // Store original user type and company to detect changes
      var originalUserType = '';  // 'individual' or 'company'
      var originalCompany = '';   // Company name if user_type is 'company'
      
      // Function to refresh access token using refresh token
      function refreshAccessToken(callback) {
        var refreshToken = localStorage.getItem('refresh_token');
        if (!refreshToken) {
          callback(false);
          return;
        }
        
        $.ajax({
          url: API_BASE_URL + '/api/auth/refresh',
          method: 'POST',
          contentType: 'application/json',
          data: JSON.stringify({ refresh_token: refreshToken }),
          success: function(response) {
            if (response.access_token) {
              localStorage.setItem('access_token', response.access_token);
              // Token refresh - no need to clear sessionStorage (tokens always in localStorage now)
              accessToken = response.access_token;
              callback(true);
            } else {
              callback(false);
            }
          },
          error: function(xhr) {
            callback(false);
          }
        });
      }
      
      // Function to fetch current user profile from API
      function fetchUserProfile() {
        // Show loading state
        $('#fullName').val('Loading...');
        $('#workEmail').val('Loading...');
        
        $.ajax({
          url: API_BASE_URL + '/api/auth/user_profile',
          method: 'GET',
          headers: {
            'Authorization': 'Bearer ' + accessToken
          },
          success: function(userProfile) {
            // Populate form with fresh data from API
            $('#fullName').val(userProfile.full_name || '');
            var userEmail = userProfile.email || '';
            $('#workEmail').val(userEmail);
            // Store original email to detect changes
            originalEmail = userEmail;
            
            // Determine user type from API response
            var userType = userProfile.user_type || 'individual';
            if (userProfile.company_id && userProfile.company_id !== 0) {
              userType = 'company';
            }
            
            // Store original user type and company for validation
            originalUserType = userType;
            if (userType === 'company') {
              var companyName = userProfile.company_name || '';
              originalCompany = companyName;
            } else {
              originalCompany = '';
            }
            
            // Set checkboxes based on user type
            if (userType === 'individual') {
              $('#individualCheckbox').prop('checked', true);
              $('#companyCheckbox').prop('checked', false);
              $('#companyFieldGroup').hide();
              $('#company').val('');
            } else {
              $('#individualCheckbox').prop('checked', false);
              $('#companyCheckbox').prop('checked', true);
              $('#companyFieldGroup').show();
              // Set company name from API response
              var companyName = userProfile.company_name || '';
              $('#company').val(companyName);
            }
            
            // Update localStorage with fresh data from API
            localStorage.setItem('user', JSON.stringify(userProfile));
          },
          error: function(xhr) {
            // Fallback to localStorage if API fails
            if (userData) {
              if (userData.full_name) {
                $('#fullName').val(userData.full_name);
              }
              if (userData.email) {
                var fallbackEmail = userData.email;
                $('#workEmail').val(fallbackEmail);
                // Store original email to detect changes
                originalEmail = fallbackEmail;
              }
              
              var userType = 'individual';
              if (userData.company_id && userData.company_id !== null && userData.company_id !== 0) {
                userType = 'company';
                $('#companyFieldGroup').show();
              } else {
                $('#companyFieldGroup').hide();
              }
              
              // Store original user type and company for validation (fallback)
              originalUserType = userType;
              if (userType === 'company') {
                var companyName = userData.company_name || '';
                originalCompany = companyName;
                $('#company').val(companyName);
              } else {
                originalCompany = '';
                $('#company').val('');
              }
              
              if (userType === 'individual') {
                $('#individualCheckbox').prop('checked', true);
                $('#companyCheckbox').prop('checked', false);
              } else {
                $('#individualCheckbox').prop('checked', false);
                $('#companyCheckbox').prop('checked', true);
              }
            } else {
              // No data available - show error
              $('#modalTitle').text('Error');
              $('#modalMessage').text('Unable to load user profile. Please sign in again.');
              $('#errorIcon').show();
              $('#successIcon').hide();
              $('#successModal').css('display', 'flex').css('opacity', '1');
              
              setTimeout(function() {
                window.location.href = './sign-in.html';
              }, 3000);
            }
          }
        });
      }
      
      // Fetch and pre-fill user profile
      fetchUserProfile();
      
      // Prevent checkbox changes (even if enabled via console) - similar to email validation
      $('#individualCheckbox, #companyCheckbox').on('change', function() {
        // Check if this change would modify the original value
        var currentUserType = '';
        if ($('#individualCheckbox').is(':checked')) {
          currentUserType = 'individual';
        } else if ($('#companyCheckbox').is(':checked')) {
          currentUserType = 'company';
        }
        
        if (currentUserType !== originalUserType) {
          // Show error dialog
          $('#errorIcon').show();
          $('#successIcon').hide();
          $('#modalTitle').text('Update Failed');
          $('#modalMessage').text('User type (Individual/Company) cannot be changed. Please contact support if you need to update your account type.');
          
          $('#successModal').css({
            'display': 'flex',
            'opacity': '0'
          }).animate({
            'opacity': '1'
          }, 300);
          
          // Auto-close modal after 5 seconds
          setTimeout(function() {
            $('#successModal').animate({
              'opacity': '0'
            }, 300, function() {
              $(this).css('display', 'none');
              // Reset modal content back to success message
              $('#modalTitle').text('Profile Updated Successfully!');
              $('#modalMessage').text('Your profile has been updated successfully.');
              $('#successIcon').show();
              $('#errorIcon').hide();
            });
          }, 5000);
          
          // Reset to original state
          if (originalUserType === 'individual') {
            $('#individualCheckbox').prop('checked', true);
            $('#companyCheckbox').prop('checked', false);
            $('#companyFieldGroup').hide();
          } else {
            $('#individualCheckbox').prop('checked', false);
            $('#companyCheckbox').prop('checked', true);
            $('#companyFieldGroup').show();
          }
        } else {
          // Valid change (shouldn't happen if disabled, but handle for safety)
        if ($(this).is(':checked')) {
          // Uncheck the other checkbox
          if ($(this).attr('id') === 'individualCheckbox') {
            $('#companyCheckbox').prop('checked', false);
              // Hide company field when Individual is selected
            $('#companyFieldGroup').slideUp(200);
          } else {
            $('#individualCheckbox').prop('checked', false);
            // Show company field when Company is selected
            $('#companyFieldGroup').slideDown(200);
            }
          }
        }
      });
      
      // Prevent company field changes (even if enabled via console) - similar to email validation
      $('#company').on('input change', function() {
        if (originalUserType === 'company') {
          var currentCompany = $(this).val().trim();
          if (currentCompany !== originalCompany) {
            // Show error dialog
            $('#errorIcon').show();
            $('#successIcon').hide();
            $('#modalTitle').text('Update Failed');
            $('#modalMessage').text('Company name cannot be changed. Please contact support if you need to update your company name.');
            
            $('#successModal').css({
              'display': 'flex',
              'opacity': '0'
            }).animate({
              'opacity': '1'
            }, 300);
            
            // Auto-close modal after 5 seconds
            setTimeout(function() {
              $('#successModal').animate({
                'opacity': '0'
              }, 300, function() {
                $(this).css('display', 'none');
                // Reset modal content back to success message
                $('#modalTitle').text('Profile Updated Successfully!');
                $('#modalMessage').text('Your profile has been updated successfully.');
                $('#successIcon').show();
                $('#errorIcon').hide();
              });
            }, 5000);
            
            // Reset to original value
            $(this).val(originalCompany);
          }
        }
      });

      // Initialize: Hide company field on page load if Individual is selected
      if ($('#individualCheckbox').is(':checked')) {
        $('#companyFieldGroup').hide();
      }
      
      // Name validation function
      function validateNameCharacters(name) {
        if (!name || name.trim() === '') {
          return false;
        }
        var nameRegex = /^[a-zA-Z\s\-'\.]+$/;
        return nameRegex.test(name);
      }
      
      // Function to check if a character is valid for name field
      function isValidNameChar(char) {
        // Allow letters (a-z, A-Z), spaces, hyphens, apostrophes, and periods
        return /^[a-zA-Z\s\-'\.]$/.test(char);
      }
      
      // Function to validate company name characters (block dangerous special characters)
      function isValidCompanyChar(char) {
        // Allow: letters (a-z, A-Z), numbers (0-9), spaces, hyphens (-), apostrophes ('), periods (.), commas (,), ampersands (&)
        // Block: < > { } [ ] ( ) ; : / \ | ^ ~ * = % $ and other dangerous characters
        return /^[a-zA-Z0-9\s\-'.,&]$/.test(char);
      }
      
      // Function to validate company name (check for dangerous characters)
      function validateCompanyCharacters(company) {
        if (!company || company.trim() === '') {
          return true; // Empty is handled by required validation
        }
        // Block dangerous characters: < > { } [ ] ( ) ; : / \ | ^ ~ * = % $
        var dangerousChars = /[<>{}[\]();:\\|^~*=%@$]/;
        return !dangerousChars.test(company);
      }
      
      // Form submission handler - Connect to Backend API
      $('#profileEditForm').on('submit', function(e) {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        
        var fullName = $('#fullName').val().trim();
        var currentEmail = $('#workEmail').val().trim();
        var userType = '';
        var company = '';
        
        // Check if email was changed (even if user enabled it via console)
        if (currentEmail !== originalEmail) {
          // Show failure dialog
          $('#errorIcon').show();
          $('#successIcon').hide();
          $('#modalTitle').text('Update Failed');
          $('#modalMessage').text('Email cannot be edited. Please contact support if you need to update your email address.');
          
          $('#successModal').css({
            'display': 'flex',
            'opacity': '0'
          }).animate({
            'opacity': '1'
          }, 300);
          
          // Auto-close modal after 5 seconds
          setTimeout(function() {
            $('#successModal').animate({
              'opacity': '0'
            }, 300, function() {
              $(this).css('display', 'none');
              // Reset modal content back to success message
              $('#modalTitle').text('Profile Updated Successfully!');
              $('#modalMessage').text('Your profile has been updated successfully.');
              $('#successIcon').show();
              $('#errorIcon').hide();
            });
          }, 5000);
          
          // Reset email to original value
          $('#workEmail').val(originalEmail);
          return false;
        }
        
        // Check if user type was changed (even if user enabled it via console)
        var currentUserType = '';
        if ($('#individualCheckbox').is(':checked')) {
          currentUserType = 'individual';
        } else if ($('#companyCheckbox').is(':checked')) {
          currentUserType = 'company';
        }
        
        if (currentUserType !== originalUserType) {
          // Show failure dialog
          $('#errorIcon').show();
          $('#successIcon').hide();
          $('#modalTitle').text('Update Failed');
          $('#modalMessage').text('User type (Individual/Company) cannot be changed. Please contact support if you need to update your account type.');
          
          $('#successModal').css({
            'display': 'flex',
            'opacity': '0'
          }).animate({
            'opacity': '1'
          }, 300);
          
          // Auto-close modal after 5 seconds
          setTimeout(function() {
            $('#successModal').animate({
              'opacity': '0'
            }, 300, function() {
              $(this).css('display', 'none');
              // Reset modal content back to success message
              $('#modalTitle').text('Profile Updated Successfully!');
              $('#modalMessage').text('Your profile has been updated successfully.');
              $('#successIcon').show();
              $('#errorIcon').hide();
            });
          }, 5000);
          
          // Reset checkboxes to original state
          if (originalUserType === 'individual') {
            $('#individualCheckbox').prop('checked', true);
            $('#companyCheckbox').prop('checked', false);
            $('#companyFieldGroup').hide();
          } else {
            $('#individualCheckbox').prop('checked', false);
            $('#companyCheckbox').prop('checked', true);
            $('#companyFieldGroup').show();
          }
          return false;
        }
        
        // Check if company name was changed (for company users)
        if (originalUserType === 'company') {
          var currentCompany = $('#company').val().trim();
          if (currentCompany !== originalCompany) {
            // Show failure dialog
            $('#errorIcon').show();
            $('#successIcon').hide();
            $('#modalTitle').text('Update Failed');
            $('#modalMessage').text('Company name cannot be changed. Please contact support if you need to update your company name.');
            
            $('#successModal').css({
              'display': 'flex',
              'opacity': '0'
            }).animate({
              'opacity': '1'
            }, 300);
            
            // Auto-close modal after 5 seconds
            setTimeout(function() {
              $('#successModal').animate({
                'opacity': '0'
              }, 300, function() {
                $(this).css('display', 'none');
                // Reset modal content back to success message
                $('#modalTitle').text('Profile Updated Successfully!');
                $('#modalMessage').text('Your profile has been updated successfully.');
                $('#successIcon').show();
                $('#errorIcon').hide();
              });
            }, 5000);
            
            // Reset company field to original value
            $('#company').val(originalCompany);
            return false;
          }
        }
        
        // Initialize error tracking
        var hasError = false;
        
        // Hide all errors initially
        $('#fullNameError').hide();
        $('#userTypeError').hide();
        $('#companyError').hide();
        
        // Use original user type (already validated that it hasn't changed)
        userType = originalUserType;
        
        // Get company name if user type is company (use original company since it can't be changed)
        if (userType === 'company') {
          company = originalCompany;
        } else {
          company = '';
        }
        
        // Validate full name
        if (!fullName) {
          $('#fullNameError').text('Full name is required').show();
          hasError = true;
        } else if (fullName.length < 2) {
          $('#fullNameError').text('Full name must be at least 2 characters').show();
          hasError = true;
        } else if (fullName.length > 50) {
          $('#fullNameError').text('Full name can\'t be longer than 50 characters').show();
          hasError = true;
        } else if (!validateNameCharacters(fullName)) {
          $('#fullNameError').text('Name can only contain letters, spaces, hyphens, and apostrophes').show();
          hasError = true;
        }
        
        // Validate company if user_type is 'company' (should always be valid since it's from original, but validate for safety)
        if (userType === 'company') {
          if (!company || company === '') {
            $('#companyError').text('Company name is required').show();
            hasError = true;
          } else if (company.length < 2) {
            $('#companyError').text('Company name must be at least 2 characters').show();
            hasError = true;
          } else if (company.length > 100) {
            $('#companyError').text('Company name cannot exceed 100 characters').show();
            hasError = true;
          } else if (!validateCompanyCharacters(company)) {
            $('#companyError').text('Please enter a valid company name').show();
            hasError = true;
          }
        }
        
        // If any validation errors, stop here
        if (hasError) {
          return false;
        }
        
        // Disable submit button
        var submitBtn = $('#profileEditForm').find('button[type="submit"]');
        var originalButtonText = submitBtn.text();
        submitBtn.prop('disabled', true).text('Processing...');
        
        // Prepare API request data
        var profileData = {
          full_name: fullName,
          user_type: userType
        };
        
        // Only include company if Company is selected
        if (userType === 'company') {
          profileData.company = company;
        }
        
        // Make API call to backend
        $.ajax({
          url: API_BASE_URL + '/api/auth/complete-profile',
          method: 'POST',
          contentType: 'application/json',
          headers: {
            'Authorization': 'Bearer ' + accessToken.trim()
          },
          data: JSON.stringify(profileData),
          success: function(response) {
            // Re-enable button
            submitBtn.prop('disabled', false).text(originalButtonText);
            
            // IMPORTANT: Fetch fresh profile from API to reflect changes immediately
            fetchUserProfile();
            
            // Prepare display data
            var displayData = {
              'Updated Profile Data': {
                full_name: fullName,
                email: $('#workEmail').val(),
                user_type: userType,
                company: userType === 'company' ? company : ''
              },
              'API Response': response
            };
            
            // Show success modal
            $('#successIcon').show();
            $('#errorIcon').hide();
            $('#modalTitle').text('Profile Updated Successfully!');
            $('#modalMessage').text(response.message || 'Your profile has been updated successfully.');
            
            // Hide modal data for cleaner look (optional - can show if needed for debugging)
            $('#modalData').hide();
            
            $('#successModal').css({
              'display': 'flex',
              'opacity': '0'
            }).animate({
              'opacity': '1'
            }, 300);
            
            // Auto-close modal after 3 seconds (short success message)
            setTimeout(function() {
              $('#successModal').animate({
                'opacity': '0'
              }, 300, function() {
                $(this).css('display', 'none').removeClass('show');
                $('#modalData').hide();
                // Reset modal content back to success message
                $('#modalTitle').text('Profile Updated Successfully!');
                $('#modalMessage').text('Your profile has been updated successfully.');
                $('#successIcon').show();
                $('#errorIcon').hide();
    // Redirect to dashboard after modal closes
    window.location.href = './dashboard.html';
              });
}, 1000);
          },
          error: function(xhr) {
            // Re-enable button
            submitBtn.prop('disabled', false).text(originalButtonText);
            
            var errorMsg = xhr.responseJSON?.detail || xhr.responseText || 'An error occurred. Please try again.';
            
            // Enhanced error message
            var enhancedErrorMsg = errorMsg;
            if (xhr.status === 401 || errorMsg.toLowerCase().includes('unauthorized') || errorMsg.toLowerCase().includes('token') || errorMsg.toLowerCase().includes('expired')) {
              // Try to refresh the token first
              refreshAccessToken(function(success) {
                if (success) {
                  // Retry the request with new token
                  $.ajax({
                    url: API_BASE_URL + '/api/auth/complete-profile',
                    method: 'POST',
                    contentType: 'application/json',
                    headers: {
                      'Authorization': 'Bearer ' + accessToken.trim()
                    },
                    data: JSON.stringify(profileData),
                    success: function(response) {
                      submitBtn.prop('disabled', false).text(originalButtonText);
                      
                      // IMPORTANT: Fetch fresh profile from API to reflect changes immediately
                      fetchUserProfile();
                      
                      var displayData = {
                        'Updated Profile Data': {
                          full_name: fullName,
                          email: $('#workEmail').val(),
                          user_type: userType,
                          company: userType === 'company' ? company : ''
                        },
                        'API Response': response
                      };
                      
                      $('#successIcon').show();
                      $('#errorIcon').hide();
                      $('#modalTitle').text('Profile Updated Successfully!');
                      $('#modalMessage').text(response.message || 'Your profile has been updated successfully.');
                      
                      // Hide modal data for cleaner look
                      $('#modalData').hide();
                      
                      $('#successModal').css({
                        'display': 'flex',
                        'opacity': '0'
                      }).animate({
                        'opacity': '1'
                      }, 300);
                      
                      setTimeout(function() {
                        $('#successModal').animate({
                          'opacity': '0'
                        }, 300, function() {
                          $(this).css('display', 'none').removeClass('show');
                          $('#modalData').hide();
                          // Reset modal content
                          $('#modalTitle').text('Profile Updated Successfully!');
                          $('#modalMessage').text('Your profile has been updated successfully.');
                          $('#successIcon').show();
                          $('#errorIcon').hide();
    // Redirect to dashboard after modal closes
    window.location.href = './dashboard.html';
                        });
}, 1000); // 1 second for short success message
                    },
                    error: function(retryXhr) {
                      enhancedErrorMsg = 'Your session has expired. Please sign in again.';
                      $('#errorIcon').show();
                      $('#successIcon').hide();
                      $('#modalTitle').text('Profile Update Failed');
                      $('#modalMessage').text(enhancedErrorMsg);
                      $('#modalData').hide();
                      
                      $('#successModal').css({
                        'display': 'flex',
                        'opacity': '0'
                      }).animate({
                        'opacity': '1'
                      }, 300);
                      
                      setTimeout(function() {
                        $('#successModal').animate({
                          'opacity': '0'
                        }, 300, function() {
                          $(this).css('display', 'none').removeClass('show');
                          // Reset modal content
                          $('#modalTitle').text('Profile Updated Successfully!');
                          $('#modalMessage').text('Your profile has been updated successfully.');
                          $('#successIcon').show();
                          $('#errorIcon').hide();
                        });
                        window.location.href = './sign-in.html';
                      }, 3000);
                    }
                  });
                } else {
                  // Refresh failed, show error and redirect
                  enhancedErrorMsg = 'Your session has expired. Please sign in again.';
                  $('#errorIcon').show();
                  $('#successIcon').hide();
                  $('#modalTitle').text('Profile Update Failed');
                  $('#modalMessage').text(enhancedErrorMsg);
                  $('#modalData').hide();
                  
                  $('#successModal').css({
                    'display': 'flex',
                    'opacity': '0'
                  }).animate({
                    'opacity': '1'
                  }, 300);
                  
                  setTimeout(function() {
                    $('#successModal').animate({
                      'opacity': '0'
                    }, 300, function() {
                      $(this).css('display', 'none').removeClass('show');
                      // Reset modal content
                      $('#modalTitle').text('Profile Updated Successfully!');
                      $('#modalMessage').text('Your profile has been updated successfully.');
                      $('#successIcon').show();
                      $('#errorIcon').hide();
                    });
                    window.location.href = './sign-in.html';
                  }, 3000);
                }
              });
              
              // Don't show error modal here, let refreshAccessToken handle it
              return;
            } else if (errorMsg.toLowerCase().includes('company')) {
              enhancedErrorMsg = 'Company name is required when Company is selected.';
            }
            
            // Show error modal
            $('#errorIcon').show();
            $('#successIcon').hide();
            $('#modalTitle').text('Profile Update Failed');
            $('#modalMessage').text(enhancedErrorMsg);
            $('#modalData').hide();
            
            $('#successModal').css({
              'display': 'flex',
              'opacity': '0'
            }).animate({
              'opacity': '1'
            }, 300);
            
            // Auto-close error modal after 4 seconds (error messages)
            setTimeout(function() {
              $('#successModal').animate({
                'opacity': '0'
              }, 300, function() {
                $(this).css('display', 'none').removeClass('show');
                // Reset modal content back to success message
                $('#modalTitle').text('Profile Updated Successfully!');
                $('#modalMessage').text('Your profile has been updated successfully.');
                $('#successIcon').show();
                $('#errorIcon').hide();
              });
            }, 5000);
          }
        });
        
        return false;
      });
      
      // Handle modal close button
      $('#modalCloseBtn').on('click', function() {
        var modalTitle = $('#modalTitle').text();
        $('#successModal').animate({
          'opacity': '0'
        }, 300, function() {
          $(this).css('display', 'none').removeClass('show');
          // Reset modal content back to success message
          $('#modalTitle').text('Profile Updated Successfully!');
          $('#modalMessage').text('Your profile has been updated successfully.');
          $('#successIcon').show();
          $('#errorIcon').hide();
          $('#modalData').hide();
        });
      });
      
      // Close modal when clicking outside
      $('#successModal').on('click', function(e) {
        if ($(e.target).attr('id') === 'successModal') {
          var modalTitle = $('#modalTitle').text();
          $(this).animate({
            'opacity': '0'
          }, 300, function() {
            $(this).css('display', 'none').removeClass('show');
            // Reset modal content back to success message
            $('#modalTitle').text('Profile Updated Successfully!');
            $('#modalMessage').text('Your profile has been updated successfully.');
            $('#successIcon').show();
            $('#errorIcon').hide();
            $('#modalData').hide();
          });
        }
      });
      
      // Real-time validation
      $('#fullName').on('blur', function() {
        var fullName = $(this).val().trim();
        var fullNameError = $('#fullNameError');
        
        if (fullName === '') {
          fullNameError.hide();
        } else if (fullName.length < 2) {
          fullNameError.text('Full name must be at least 2 characters').show();
        } else if (fullName.length > 50) {
          fullNameError.text('Full name can\'t be longer than 50 characters').show();
        } else if (!validateNameCharacters(fullName)) {
          fullNameError.text('Name can only contain letters, spaces, hyphens, and apostrophes').show();
        } else {
          fullNameError.hide();
        }
      });
      
      // Real-time character blocking and validation for Full Name field
      $('#fullName').on('keypress', function(e) {
        var char = String.fromCharCode(e.which || e.keyCode);
        var $input = $(this);
        var currentValue = $input.val();
        var fullNameError = $('#fullNameError');
        
        // 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;
        }
        
        // Check if maximum length (50) is reached
        if (currentValue.length >= 50) {
          e.preventDefault();
          fullNameError.text('Full name can\'t be longer than 50 characters').show();
          return false;
        }
        
        // Block invalid characters
        if (!isValidNameChar(char)) {
          e.preventDefault();
          // Show error message when invalid character is attempted
          fullNameError.text('Name can only contain letters, spaces, hyphens, and apostrophes').show();
          return false;
        }
        
        // Hide error if valid character is being typed and length is 49 or less
        if (currentValue.length <= 49) {
          fullNameError.hide();
        }
        return true;
      });
      
      // Handle paste and other input methods for Full Name field
      $('#fullName').on('input', function() {
        var $input = $(this);
        var currentValue = $input.val();
        var fullNameError = $('#fullNameError');
        var validValue = '';
        var hasInvalidChar = false;
        
        // Filter out invalid characters
        for (var i = 0; i < currentValue.length; i++) {
          if (isValidNameChar(currentValue[i])) {
            validValue += currentValue[i];
          } else {
            hasInvalidChar = true;
          }
        }
        
        // Truncate to maximum length (50 characters)
        if (validValue.length > 50) {
          validValue = validValue.substring(0, 50);
        }
        
        // Update input value if invalid characters were found or length exceeded
        if (hasInvalidChar || currentValue.length > 50) {
          $input.val(validValue);
          if (currentValue.length > 50) {
            fullNameError.text('Full name can\'t be longer than 50 characters').show();
          } else {
            fullNameError.text('Name can only contain letters, spaces, hyphens, and apostrophes').show();
          }
        } else {
          // Hide error if all characters are valid and length is 50 or less
          if (validValue.length <= 50) {
            fullNameError.hide();
          }
        }
      });
      
      // Real-time validation for Company field
      // Block typing beyond 100 characters and dangerous characters in Company field
      $('#company').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 dangerous special characters
        var char = String.fromCharCode(e.which || e.keyCode);
        if (!isValidCompanyChar(char)) {
          e.preventDefault();
          $('#companyError').text('Please enter a valid company name').show();
          return false;
        }
        
        // Check if maximum length (100) is reached
        if (currentValue.length >= 100) {
          e.preventDefault();
          $('#companyError').text('Company name cannot exceed 100 characters').show();
          return false;
        }
      });
      
      $('#company').on('blur', function() {
        var company = $(this).val().trim();
        var companyError = $('#companyError');
        
        if (company === '') {
          companyError.hide();
        } else if (company.length < 2) {
          companyError.text('Company name must be at least 2 characters').show();
        } else if (company.length > 100) {
          companyError.text('Company name cannot exceed 100 characters').show();
        } else if (!validateCompanyCharacters(company)) {
          companyError.text('Please enter a valid company name').show();
        } else {
          companyError.hide();
        }
      });
      
      // Handle paste and other input methods for Company field
      $('#company').on('input', function() {
        var currentValue = $(this).val();
        var $input = $(this);
        var companyError = $('#companyError');
        
        // Filter out dangerous characters
        var filteredValue = '';
        var hasInvalidChar = false;
        for (var i = 0; i < currentValue.length; i++) {
          if (isValidCompanyChar(currentValue[i])) {
            filteredValue += currentValue[i];
          } else {
            hasInvalidChar = true;
          }
        }
        
        // Update input value if invalid characters were found
        if (hasInvalidChar) {
          $input.val(filteredValue);
          currentValue = filteredValue;
          companyError.text('Please enter a valid company name').show();
        }
        
        // Truncate to maximum length (100 characters)
        if (currentValue.length > 100) {
          $input.val(currentValue.substring(0, 100));
          companyError.text('Company name cannot exceed 100 characters').show();
        } else if (!hasInvalidChar) {
          // Hide error if no invalid characters and length is valid
          companyError.hide();
        }
      });
      
      // Confirmation Modal Function
      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();
            }
          }
        });
      }
      
      // Logout functionality
      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
          window.location.href = './index.html';
        });
      }
      
      // Attach logout handler to both logout buttons
      $('.logout-btn, #logoutBtnMobile, #logoutBtnDesktop').on('click', function(e) {
        e.preventDefault();
        handleLogout();
      });
      
      // Delete account functionality
      function handleDeleteAccount() {
        showConfirmationModal('Are you sure you want to delete your account? This action cannot be undone.', function() {
          // User confirmed - proceed with account deletion
          // Get access token from localStorage
          var accessToken = localStorage.getItem('access_token');
          
          if (!accessToken) {
            alert('You are not logged in. Please log in again.');
            window.location.href = './index.html';
            return;
          }
          
          // Call backend API to delete account
          $.ajax({
          url: API_BASE_URL + '/api/auth/delete-account',
          method: 'DELETE',
          headers: {
            'Authorization': 'Bearer ' + accessToken,
            'Content-Type': 'application/json'
          },
            success: function(response) {
              // 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');
              
              // Clear remembered credentials on account deletion (account no longer exists)
              localStorage.removeItem('remembered_email');
              localStorage.removeItem('remembered_password');
              
              // Redirect to index.html
              alert('Your account has been deleted successfully.');
              window.location.href = './index.html';
            },
            error: function(xhr) {
              console.error('Delete account error:', xhr.responseJSON);
              var errorMsg = xhr.responseJSON?.detail || 'An error occurred while deleting your account. Please try again.';
              
              // If token is invalid/expired, clear localStorage and sessionStorage and redirect
              if (xhr.status === 401) {
                localStorage.removeItem('access_token');
                localStorage.removeItem('user');
                localStorage.removeItem('remember_me_used'); // Clear Remember Me flag
                sessionStorage.removeItem('access_token');
                sessionStorage.removeItem('user');
                alert('Your session has expired. Please log in again.');
                window.location.href = './index.html';
              } else {
                alert('Error: ' + errorMsg);
              }
            }
          });
        });
      }
      
      // Attach delete account handler to both delete account buttons
      $('.delete-account-btn, #deleteAccountBtnMobile, #deleteAccountBtnDesktop').on('click', function(e) {
        e.preventDefault();
        handleDeleteAccount();
      });
    });
  </script>
  
  <script>
    // Company autocomplete functionality with API (for testing - can be disabled)
    document.addEventListener('DOMContentLoaded', function() {
      const companyInput = document.getElementById('company');
      const suggestionsBox = document.getElementById('company-suggestions');
      
      if (!companyInput || !suggestionsBox) return;
      
      let activeSuggestionIndex = -1;
      let searchTimeout = null;
      let currentCompanies = [];
      let isSelectingSuggestion = false;

      function debounce(func, wait) {
        return function(...args) {
          clearTimeout(searchTimeout);
          searchTimeout = setTimeout(() => func.apply(this, args), wait);
        };
      }

      async function fetchCompanies(searchQuery) {
        if (!searchQuery || searchQuery.trim().length < 2) {
          suggestionsBox.style.display = 'none';
          return [];
        }

        try {
          const response = await fetch(`${API_BASE_URL}/api/auth/companies/search?q=${encodeURIComponent(searchQuery.trim())}&limit=20`);
          if (!response.ok) {
            throw new Error('Failed to fetch companies');
          }
          const data = await response.json();
          return data.companies || [];
        } catch (error) {
          return [];
        }
      }

      function showSuggestions(companies) {
        suggestionsBox.innerHTML = '';
        
        if (companies.length === 0) {
          suggestionsBox.style.display = 'none';
          return;
        }

        companies.forEach((company, index) => {
          const item = document.createElement('div');
          item.className = 'suggestion-item';
          item.textContent = company;
          item.dataset.company = company;
          
          item.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            isSelectingSuggestion = true;
            companyInput.value = company;
            suggestionsBox.style.display = 'none';
            suggestionsBox.innerHTML = '';
            activeSuggestionIndex = -1;
            companyInput.dispatchEvent(new Event('input'));
            setTimeout(() => {
              isSelectingSuggestion = false;
            }, 100);
            companyInput.blur();
          });

          suggestionsBox.appendChild(item);
        });

        suggestionsBox.style.display = 'block';
        activeSuggestionIndex = -1;
      }

      function highlightActiveSuggestion() {
        const items = suggestionsBox.querySelectorAll('.suggestion-item');
        if (items.length === 0) return;

        items.forEach(item => item.classList.remove('active'));

        if (activeSuggestionIndex >= 0 && activeSuggestionIndex < items.length) {
          items[activeSuggestionIndex].classList.add('active');
          items[activeSuggestionIndex].scrollIntoView({ block: 'nearest' });
        }
      }

      const debouncedSearch = debounce(async function(query) {
        const companies = await fetchCompanies(query);
        currentCompanies = companies;
        showSuggestions(companies);
      }, 300);

      companyInput.addEventListener('input', function(e) {
        if (isSelectingSuggestion) return;
        
        const query = e.target.value.trim();
        debouncedSearch(query);
      });

      companyInput.addEventListener('keydown', function(e) {
        const items = suggestionsBox.querySelectorAll('.suggestion-item');
        
        if (e.key === 'ArrowDown') {
          e.preventDefault();
          activeSuggestionIndex = Math.min(activeSuggestionIndex + 1, items.length - 1);
          highlightActiveSuggestion();
        } else if (e.key === 'ArrowUp') {
          e.preventDefault();
          activeSuggestionIndex = Math.max(activeSuggestionIndex - 1, -1);
          highlightActiveSuggestion();
        } else if (e.key === 'Enter' && activeSuggestionIndex >= 0 && activeSuggestionIndex < items.length) {
          e.preventDefault();
          items[activeSuggestionIndex].click();
        } else if (e.key === 'Escape') {
          suggestionsBox.style.display = 'none';
          activeSuggestionIndex = -1;
        }
      });

      document.addEventListener('click', function(e) {
        if (!companyInput.contains(e.target) && !suggestionsBox.contains(e.target)) {
          suggestionsBox.style.display = 'none';
          activeSuggestionIndex = -1;
        }
      });
    });
  </script>
</body>
</html>