@extends('layouts.app')

@section('title', 'Veriqo - Sign Up')

@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>Create Your Account</h2>

                            <form id="signupForm" 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">
                                        <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">
                                        <small id="emailError" style="color: #dc3545; font-size: 12px; display: none; margin-top: 5px;"></small>
                                    </div>
                                    <div class="form-group position-relative">
                                        <input type="text" class="form-control autocomplete-input" placeholder="Company" id="company" name="company" autocomplete="off">
                                        <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">
                                        <small id="successMessage" style="color: #28a745; font-size: 12px; display: none; margin-top: 5px;"></small>
                                    </div>
                                    <div class="form-group">
                                        <button type="submit" class="btn primary_btn w-100">Start Free Trial</button>
                                    </div>
                                    <p>Get 2 free board queries – no credit card required</p>
                                    <div class="form-group">
                                        <p>Already have an account?<a href="./sign-in.html"> Sign In</a></p>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <div id="successModal" class="success-modal" >
        <div class="modal-content">
            <!-- Close Button -->
            <button class="modal-close" id="modalCloseBtn">×</button>
            
            <div class="modal-icon">
                <img id="successIcon" src="assets/image/sucess.png" width="60" alt="" srcset="" style="display: none;">
                <img id="errorIcon" src="invalid.png" width="60" alt="" srcset="" style="display: none;">
            </div>
            <h3 class="modal-title">Account Created Successfully!</h3>
            <p class="modal-message">Your account has been created. Please check your email for login credentials.</p>
            <!-- <button id="loginBtn" class="modal-btn">Go to Login</button> -->
        </div>
    </div>

@endsection
  
  <script src="./assets/js/jquery.min.js"></script>
  <script src="./assets/js/bs.min.js"></script>
  <script src="./assets/js/custom.js"></script>
  <script>
    // Backend API base URL - Update this when deploying to production
    const API_BASE_URL = 'https://veriqo.xceltec.in/';
    
    $(document).ready(function() {
      // Email validation function
      function validateEmail(email) {
        // Basic format check - must contain @ and at least one .
        if (!email || email.indexOf('@') === -1 || email.indexOf('.') === -1) {
          return false;
        }
        
        // Split email into local and domain parts
        var parts = email.split('@');
        if (parts.length !== 2) {
          return false; // Must have exactly one @
        }
        
        var localPart = parts[0];
        var domainPart = parts[1];
        
        // Check local part (before @)
        if (localPart.length === 0 || localPart.length > 64) {
          return false; // Local part cannot be empty or exceed 64 chars
        }
        
        // Check for consecutive dots in local part
        if (localPart.indexOf('..') !== -1) {
          return false;
        }
        
        // Check for dot at start or end of local part
        if (localPart.startsWith('.') || localPart.endsWith('.')) {
          return false;
        }
        
        // Check domain part
        if (domainPart.length === 0) {
          return false; // Domain cannot be empty
        }
        
        // Check for dot immediately after @ (domain starts with dot)
        if (domainPart.startsWith('.')) {
          return false;
        }
        
        // Check for consecutive dots in domain part
        if (domainPart.indexOf('..') !== -1) {
          return false;
        }
        
        // Check for dot at end of domain part
        if (domainPart.endsWith('.')) {
          return false;
        }
        
        // Domain must have at least one dot and valid TLD
        if (domainPart.indexOf('.') === -1) {
          return false;
        }
        
        // Check that domain has valid TLD (at least 2 characters after last dot)
        var lastDotIndex = domainPart.lastIndexOf('.');
        if (lastDotIndex === -1 || domainPart.length - lastDotIndex - 1 < 2) {
          return false;
        }
        
        // Basic regex check for valid characters (alphanumeric, dots, hyphens, underscores)
        var localRegex = /^[a-zA-Z0-9._-]+$/;
        var domainRegex = /^[a-zA-Z0-9.-]+$/;
        
        if (!localRegex.test(localPart) || !domainRegex.test(domainPart)) {
          return false;
        }
        
        return true;
      }

      // Handle form submission
      $('#signupForm').on('submit', function(e) {
        e.preventDefault();
        
        var fullName = $('#fullName').val().trim();
        var workEmail = $('#workEmail').val().trim();
        var company = $('#company').val().trim();
        var fullNameError = $('#fullNameError');
        var emailError = $('#emailError');
        var companyError = $('#companyError');
        var successMessage = $('#successMessage');
        var hasError = false;
        
        // Hide error messages and success message initially
        fullNameError.hide();
        emailError.hide();
        companyError.hide();
        successMessage.hide();
        
        // Validate full name
        if (fullName === '') {
          fullNameError.text('* Please enter your full name').show();
          hasError = true;
        }
        
        // Validate email
        if (workEmail === '') {
          emailError.text('* Please enter your work email address').show();
          hasError = true;
        } else {
          // Check local part (before @) character limit
          var emailParts = workEmail.split('@');
          if (emailParts.length > 0 && emailParts[0].length > 64) {
            emailError.text('* Work email address must not exceed 64 characters').show();
            hasError = true;
          } else if (!validateEmail(workEmail)) {
            emailError.text('* Please enter a valid work email address').show();
            hasError = true;
          }
        }
        
        // Validate company (required field)
        if (company === '') {
          companyError.text('* Please enter your company name').show();
          hasError = true;
        } else if (company.length < 2) {
          companyError.text('* Company name must be at least 2 characters').show();
          hasError = true;
        }
        
        if (hasError) {
          return false;
        }
        
        // Disable submit button
        var submitBtn = $(this).find('button[type="submit"]');
        submitBtn.prop('disabled', true).text('Processing...');
        
        // Send request to backend API (company not sent to backend as per user request)
        $.ajax({
          url: API_BASE_URL + '/api/auth/signup',
          method: 'POST',
          contentType: 'application/json',
          data: JSON.stringify({
            full_name: fullName,
            email: workEmail
          }),
          success: function(response) {
            // Email sent successfully - backend will log it
            console.log('Signup successful:', response);
            // Reset form and hide errors
            $('#signupForm')[0].reset();
            fullNameError.hide();
            emailError.hide();
            companyError.hide();
            successMessage.hide();
            
            // Re-enable button
            submitBtn.prop('disabled', false).text('Start Free Trial');
            
            // Show success icon and hide error icon
            $('#successIcon').show();
            $('#errorIcon').hide();
            
            // Show success modal with flex display for proper centering
            $('#successModal').css({
              'display': 'flex',
              'opacity': '0'
            }).animate({
              'opacity': '1'
            }, 300);
            
            // Close modal and redirect to sign-in page after 5000 milliseconds
            setTimeout(function() {
              $('#successModal').animate({
                'opacity': '0'
              }, 300, function() {
                $(this).css('display', 'none');
                window.location.href = './sign-in.html';
              });
            }, 5000);
          },
          error: function(xhr) {
            console.error('Signup error:', xhr.responseJSON);
            var errorMsg = xhr.responseJSON?.detail || 'An error occurred. Please try again.';
            
            // Hide success message on error
            successMessage.hide();
            fullNameError.hide();
            emailError.hide();
            companyError.hide();
            
            // Re-enable button
            submitBtn.prop('disabled', false).text('Start Free Trial');
            
            // Show error modal
            var modalTitle = $('#successModal .modal-title');
            var modalMessage = $('#successModal .modal-message');
            
            // Show error icon and hide success icon
            $('#errorIcon').show();
            $('#successIcon').hide();
            
            // Update modal content for error
            modalTitle.text('Sign Up Failed');
            
            // Create enhanced error message with helpful content
            var enhancedErrorMsg = errorMsg;
            if (errorMsg.toLowerCase().includes('email already registered') || errorMsg.toLowerCase().includes('email already exists')) {
              enhancedErrorMsg = 'This email address is already registered. Please use a different email or try signing in instead. If you forgot your password, you can reset it from the sign-in page.';
            } else if (errorMsg.toLowerCase().includes('invalid email') || errorMsg.toLowerCase().includes('email')) {
              enhancedErrorMsg = 'Please enter a valid work email address. Make sure your email is correctly formatted and try again.';
            } else if (errorMsg.toLowerCase().includes('name') || errorMsg.toLowerCase().includes('full name')) {
              enhancedErrorMsg = 'Please enter your full name correctly and try again.';
            } else {
              enhancedErrorMsg = errorMsg + ' Please check your information and try again, or contact support if the problem persists.';
            }
            
            modalMessage.text(enhancedErrorMsg);
            
            // Show modal with flex display for proper centering
            $('#successModal').css({
              'display': 'flex',
              'opacity': '0'
            }).animate({
              'opacity': '1'
            }, 300);
            
            // Auto-close modal after 5000 milliseconds
            setTimeout(function() {
              $('#successModal').animate({
                'opacity': '0'
              }, 300, function() {
                $(this).css('display', 'none');
                // Reset modal content back to success message for next time
                modalTitle.text('Account Created Successfully!');
                modalMessage.text('Your account has been created. Please check your email for login credentials.');
                // Reset icons - show success icon by default
                $('#successIcon').show();
                $('#errorIcon').hide();
              });
            }, 5000);
          }
        });
        
        return false;
      });
      
      // Real-time validation
      $('#fullName').on('blur', function() {
        var fullName = $(this).val().trim();
        var fullNameError = $('#fullNameError');
        
        if (fullName === '') {
          fullNameError.hide();
        } else {
          fullNameError.hide();
        }
      });
      
      $('#workEmail').on('blur', function() {
        var email = $(this).val().trim();
        var emailError = $('#emailError');
        
        if (email === '') {
          emailError.hide();
        } else {
          // Check local part (before @) character limit
          var emailParts = email.split('@');
          if (emailParts.length > 0 && emailParts[0].length > 64) {
            emailError.text('* Work email address must not exceed 64 characters').show();
          } else if (!validateEmail(email)) {
            emailError.text('* Please enter a valid work email address').show();
          } else {
            emailError.hide();
          }
        }
      });
      
      $('#company').on('blur', function() {
        var company = $(this).val().trim();
        var companyError = $('#companyError');
        
        if (company === '') {
          companyError.text('* Please enter your company name').show();
        } else if (company.length < 2) {
          companyError.text('* Company name must be at least 2 characters').show();
        } else {
          companyError.hide();
        }
      });
      
      // Hide error and success on input
      $('#fullName').on('input', function() {
        $('#fullNameError').hide();
        $('#successMessage').hide();
      });
      
      $('#workEmail').on('input', function() {
        $('#emailError').hide();
        $('#successMessage').hide();
      });
      
      $('#company').on('input', function() {
        $('#companyError').hide();
        $('#successMessage').hide();
      });
      
      // Handle modal close button click
      $('#modalCloseBtn').on('click', function() {
        var modalTitle = $('#successModal .modal-title').text();
        $('#successModal').animate({
          'opacity': '0'
        }, 300, function() {
          $(this).css('display', 'none');
          // Reset modal content back to success message
          $('#successModal .modal-title').text('Account Created Successfully!');
          $('#successModal .modal-message').text('Your account has been created. Please check your email for login credentials.');
          // Reset icons - show success icon by default
          $('#successIcon').show();
          $('#errorIcon').hide();
        });
        // Only redirect to sign-in if it's a success message, not an error
        if (modalTitle === 'Account Created Successfully!') {
          setTimeout(function() {
            window.location.href = './sign-in.html';
          }, 300);
        }
      });
      
      // Close modal when clicking outside the modal content
      $('#successModal').on('click', function(e) {
        if ($(e.target).attr('id') === 'successModal') {
          var modalTitle = $('#successModal .modal-title').text();
          $(this).animate({
            'opacity': '0'
          }, 300, function() {
            $(this).css('display', 'none');
            // Reset modal content back to success message
            $('#successModal .modal-title').text('Account Created Successfully!');
            $('#successModal .modal-message').text('Your account has been created. Please check your email for login credentials.');
          });
          // Only redirect to sign-in if it's a success message, not an error
          if (modalTitle === 'Account Created Successfully!') {
            setTimeout(function() {
              window.location.href = './sign-in.html';
            }, 300);
          }
        }
      });
    });
  </script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const companyInput = document.getElementById('company');
      const suggestionsBox = document.getElementById('company-suggestions');
      
      // Sample company list (replace with API call later)
      const companies = [
        "Google", "Microsoft", "Apple", "Amazon", "Meta", "Netflix", 
        "Tesla", "Spotify", "Uber", "Airbnb", "Adobe", "Salesforce", 
        "Oracle", "IBM", "SAP", "VMware", "Dropbox", "Slack", "Zoom", 
        "Shopify", "Twitter", "LinkedIn", "PayPal", "Stripe", "Square",
        "Canva", "Notion", "Figma", "Discord", "Twitch", "Etsy", "Roku"
      ];

      let activeSuggestionIndex = -1;

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

        matches.forEach((company, index) => {
          const item = document.createElement('div');
          item.className = 'suggestion-item';
          item.textContent = company;
          item.dataset.company = company;
          
          item.addEventListener('click', () => {
            companyInput.value = company;
            suggestionsBox.style.display = 'none';
            activeSuggestionIndex = -1;
          });

          suggestionsBox.appendChild(item);
        });

        suggestionsBox.style.display = 'block';
      }

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

        // Remove active class from all
        items.forEach(item => item.classList.remove('active'));

        // Add active class to current
        if (activeSuggestionIndex >= 0 && activeSuggestionIndex < items.length) {
          items[activeSuggestionIndex].classList.add('active');
        }
      }

      companyInput.addEventListener('input', function() {
        const query = this.value.trim();
        
        if (query.length < 2) {
          suggestionsBox.style.display = 'none';
          activeSuggestionIndex = -1;
          return;
        }

        // Filter companies that match the query (case-insensitive)
        const matches = companies.filter(company => 
          company.toLowerCase().includes(query.toLowerCase())
        );

        showSuggestions(matches);
      });

      // Handle keyboard navigation
      companyInput.addEventListener('keydown', function(e) {
        const items = suggestionsBox.querySelectorAll('.suggestion-item');
        
        if (e.key === 'ArrowDown') {
          e.preventDefault();
          if (activeSuggestionIndex < items.length - 1) {
            activeSuggestionIndex++;
          } else {
            activeSuggestionIndex = 0;
          }
          highlightActiveSuggestion();
        } else if (e.key === 'ArrowUp') {
          e.preventDefault();
          if (activeSuggestionIndex > 0) {
            activeSuggestionIndex--;
          } else {
            activeSuggestionIndex = items.length - 1;
          }
          highlightActiveSuggestion();
        } else if (e.key === 'Enter' && activeSuggestionIndex >= 0) {
          e.preventDefault();
          const selected = items[activeSuggestionIndex];
          if (selected) {
            companyInput.value = selected.dataset.company;
            suggestionsBox.style.display = 'none';
            activeSuggestionIndex = -1;
          }
        } else if (e.key === 'Escape') {
          suggestionsBox.style.display = 'none';
          activeSuggestionIndex = -1;
        }
      });

      // Hide suggestions when clicking outside
      document.addEventListener('click', function(e) {
        if (!e.target.closest('.form-group')) {
          suggestionsBox.style.display = 'none';
          activeSuggestionIndex = -1;
        }
      });
    });
  </script>
</body>
</html>