@extends('layouts.app')

@section('title', 'Veriqo - Complete Your Profile')

@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>Complete Profile</h2>

                            <form id="completeProfileForm" action="" method="post" 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" checked>
                                                <label for="individualCheckbox">Individual</label>
                                            </div>
                                            <div class="checkbox-item">
                                                <input type="checkbox" id="companyCheckbox" name="user_type" value="company">
                                                <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">
                                        <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">Start Free Trial</button>
                                    </div>
                                    <p>Get 2 free board queries – no credit card required</p>
                                </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">Profile Completed!</h3>
            <p class="modal-message">Your profile has been completed successfully. Redirecting to dashboard...</p>
        </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 URL parameters to pre-fill form
      var urlParams = new URLSearchParams(window.location.search);
      var token = urlParams.get('token');
      var email = urlParams.get('email');
      var name = urlParams.get('name');
      
      // Check if user is authenticated (has token)
    //   if (!token) {
    //     // No token - redirect to sign-in
    //     window.location.href = './sign-in.html';
    //     return;
    //   }
      
      // Store token in localStorage
      localStorage.setItem('access_token', token);
      
      // Store original email to detect changes (for security)
      var originalEmail = '';
      
      // Pre-fill email and name from URL parameters
      if (email) {
        var decodedEmail = decodeURIComponent(email);
        $('#workEmail').val(decodedEmail);
        originalEmail = decodedEmail; // Store original email
      }
      if (name) {
        $('#fullName').val(decodeURIComponent(name));
      }
      
      // Clean URL after reading parameters
      window.history.replaceState({}, document.title, window.location.pathname);
      
      // Show confirmation dialog when user tries to refresh/close the page
      var beforeUnloadHandler = function(e) {
        e.preventDefault();
        e.returnValue = 'Are you sure you want to leave? Your progress will be saved automatically.';
        return e.returnValue;
      };
      
      // Add event listener to show confirmation dialog
      window.addEventListener('beforeunload', beforeUnloadHandler);
      
      // Make checkboxes mutually exclusive (only one can be selected at a time)
      $('#individualCheckbox, #companyCheckbox').on('change', function() {
        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);
            $('#company').val('').trigger('input');
          } else {
            $('#individualCheckbox').prop('checked', false);
            // Show company field when Company is selected
            $('#companyFieldGroup').slideDown(200);
          }
        }
      });

      // Initialize: Hide company field on page load
      $('#companyFieldGroup').hide();
      
      // Name validation function - only valid characters (letters, spaces, apostrophes)
      function validateNameCharacters(name) {
        if (!name || name.trim() === '') {
          return false;
        }
        // Allow only letters, spaces, and apostrophes
        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, and apostrophes
        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
      $('#completeProfileForm').on('submit', function(e) {
        e.preventDefault();
        
        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 (originalEmail && currentEmail !== originalEmail) {
          // Show failure dialog
          $('#errorIcon').show();
          $('#successIcon').hide();
          $('#successModal .modal-title').text('Update Failed');
          $('#successModal .modal-message').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
              $('#successModal .modal-title').text('Profile Completed!');
              $('#successModal .modal-message').text('Your profile has been completed successfully. Redirecting to dashboard...');
              $('#successIcon').show();
              $('#errorIcon').hide();
            });
          }, 5000);
          
          // Reset email to original value
          $('#workEmail').val(originalEmail);
          return false;
        }
        
        // Get selected user type
        if ($('#individualCheckbox').is(':checked')) {
          userType = 'individual';
        } else if ($('#companyCheckbox').is(':checked')) {
          userType = 'company';
          company = $('#company').val().trim();
        } else {
          $('#userTypeError').text('Please select Individual or Company').show();
          return false;
        }
        
        // Validate full name
        if (fullName === '') {
          $('#fullNameError').text('Full Name is required').show();
          return false;
        } else if (fullName.length < 2) {
          $('#fullNameError').text('Full name must be at least 2 characters').show();
          return false;
        } else if (fullName.length > 50) {
          $('#fullNameError').text('Full name can\'t be longer than 50 characters').show();
          return false;
        } else if (!validateNameCharacters(fullName)) {
          $('#fullNameError').text('Name can only contain letters, spaces, hyphens, and apostrophes').show();
          return false;
        }
        
        // Validate company if user_type is 'company'
        if (userType === 'company') {
          if (company === '') {
            $('#companyError').text('Company name is required').show();
            return false;
          } else if (company.length < 2) {
            $('#companyError').text('Company name must be at least 2 characters').show();
            return false;
          } else if (company.length > 100) {
            $('#companyError').text('Company name cannot exceed 100 characters').show();
            return false;
          } else if (!validateCompanyCharacters(company)) {
            $('#companyError').text('Please enter a valid company name').show();
            return false;
          }
        }
        
        // Hide all errors
        $('#fullNameError').hide();
        $('#userTypeError').hide();
        $('#companyError').hide();
        
        // Disable submit button
        var submitBtn = $('#completeProfileForm').find('button[type="submit"]');
        submitBtn.prop('disabled', true).text('Processing...');
        
        // Prepare data
        var formData = {
          full_name: fullName,
          user_type: userType
        };
        
        if (userType === 'company') {
          formData.company = company;
        }
        
        // Submit to API
        $.ajax({
          url: API_BASE_URL + '/api/auth/complete-profile',
          method: 'POST',
          contentType: 'application/json',
          headers: {
            'Authorization': 'Bearer ' + token
          },
          data: JSON.stringify(formData),
          success: function(response) {
            // Remove beforeunload handler to allow navigation after successful submission
            window.removeEventListener('beforeunload', beforeUnloadHandler);
            
            // Show success modal
            $('#successIcon').show();
            $('#errorIcon').hide();
            $('#successModal .modal-title').text('Profile Completed!');
            $('#successModal .modal-message').text('Your profile has been completed successfully. Redirecting to dashboard...');
            
            $('#successModal').css({
              'display': 'flex',
              'opacity': '0'
            }).animate({
              'opacity': '1'
            }, 300);
            
            // Redirect to dashboard after 3 seconds (allow time to read message)
            setTimeout(function() {
              window.location.href = './dashboard.html';
            }, 3000);
          },
          error: function(xhr) {
            console.error('Profile completion error:', xhr.responseJSON);
            var errorMsg = xhr.responseJSON?.detail || 'An error occurred. Please try again.';
            
            // Re-enable button
            submitBtn.prop('disabled', false).text('Start Free Trial');
            
            // Show error modal
            $('#errorIcon').show();
            $('#successIcon').hide();
            $('#successModal .modal-title').text('Profile Completion Failed');
            $('#successModal .modal-message').text(errorMsg);
            
            $('#successModal').css({
              'display': 'flex',
              'opacity': '0'
            }).animate({
              'opacity': '1'
            }, 300);
            
            // Auto-close modal after 4 seconds (error messages)
            setTimeout(function() {
              $('#successModal').animate({
                'opacity': '0'
              }, 300, function() {
                $(this).css('display', 'none');
                // Reset modal content
                $('#successModal .modal-title').text('Profile Completed!');
                $('#successModal .modal-message').text('Your profile has been completed successfully. Redirecting to dashboard...');
                $('#successIcon').show();
                $('#errorIcon').hide();
              });
            }, 4000);
          }
        });
        
        return false;
      });
      
      // 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();
          }
        }
      });
      
      // Email protection: Reset email if user tries to change it
      $('#workEmail').on('blur', function() {
        var currentEmail = $(this).val().trim();
        if (originalEmail && currentEmail !== originalEmail) {
          // Show error message
          $('#emailError').text('Email cannot be edited').show();
          // Reset to original
          $(this).val(originalEmail);
          setTimeout(function() {
            $('#emailError').hide();
          }, 3000);
        }
      });
      
      // 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 field blur validation
      $('#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();
        }
      });
      
      // Handle modal close button
      $('#modalCloseBtn').on('click', function() {
        var modalTitle = $('#successModal .modal-title').text();
        $('#successModal').animate({
          'opacity': '0'
        }, 300, function() {
          $(this).css('display', 'none');
          // If profile was completed, redirect to dashboard
          if (modalTitle === 'Profile Completed!') {
            window.location.href = './dashboard.html';
          }
        });
      });
    });
  </script>
  
  <script>
    // Company autocomplete functionality with API
    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) {
          console.error('Error fetching companies:', 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;
        }
         $('#logoutBtn, .logout-btn').on('click', function (e) {
          e.preventDefault();
          handleLogout();
        });

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

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

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

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

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

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

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

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