@extends('layouts.app')

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

                            <form id="signupForm" action="{{ route('signup.handle') }}" method="post" novalidate>
                                @csrf
                                <div class="auth_inr">
                                    <div class="form-group">
                                        <input type="text" id="fullName" name="full_name" class="form-control" placeholder="Full Name*" maxlength="50" onblur="trimCompanyInput1()">
                                        <small id="fullNameError" style="color: #dc3545; font-size: 12px; display: none;"></small>
                                    </div>
                                    <div class="form-group">
                                        <input type="email" id="workEmail" name="email" class="form-control" placeholder="Email*" maxlength="128">
                                        <small id="emailError" style="color: #dc3545; font-size: 12px; display: none;"></small>
                                    </div>
                                    <div class="form-group">
                                        <div style="position: relative;">
                                            <input type="password" id="password" name="password" class="form-control" placeholder="Password*" style="padding-right: 40px;" maxlength="16">
                                            <span class="password-toggle" id="passwordToggle" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 10;">
                                                <img src="./assets/image/hidden 1.png" alt="Show password" id="passwordToggleIcon" style="width: 20px; height: 20px;">
                                            </span>
                                        </div>
                                        <small id="passwordError" style="color: #dc3545; font-size: 12px; display: none;"></small>
                                    </div>
                                    <div class="form-group">
                                        <div style="position: relative;">
                                            <input type="password" id="confirmPassword" name="password_confirmation" class="form-control" placeholder="Confirm Password*" style="padding-right: 40px;" maxlength="16">
                                            <span class="password-toggle" id="confirmPasswordToggle" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 10;">
                                                <img src="./assets/image/hidden 1.png" alt="Show password" id="confirmPasswordToggleIcon" style="width: 20px; height: 20px;">
                                            </span>
                                        </div>
                                        <small id="confirmPasswordError" style="color: #dc3545; font-size: 12px; display: none;"></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;"></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" onblur="trimCompanyInput()">
                                        <div class="suggestions" id="company-suggestions"></div>
                                        <small id="companyError" style="color: #dc3545; font-size: 12px; display: none;"></small>
                                    </div>
                                    <div class="form-group">
                                        <!-- reCAPTCHA v3 runs invisibly in background - no widget needed -->
                                        <small id="recaptchaError" style="color: #dc3545; font-size: 12px; display: none;">Please complete the CAPTCHA verification</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" id="signupSubmitBtn" 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="{{ url('/') }}"> Sign In</a></p>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

   @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>
    document.addEventListener('DOMContentLoaded', function () {
        const Swal = window.Swal;

        // Show SUCCESS message
        @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: "{{ session('success') }}",
                confirmButtonText: 'OK',
                customClass: {
                    popup: 'swal2-popup',
                    confirmButton: 'btn btn-success'
                },
                buttonsStyling: false
            });
        @endif

        // Show ERROR message (custom error, not validation)
        @if(session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: "{{ session('error') }}",
                confirmButtonText: 'OK',
                customClass: {
                    popup: 'swal2-popup',
                    confirmButton: 'btn btn-danger'
                },
                buttonsStyling: false
            });
        @endif

        // Show VALIDATION errors (from $errors)
        @if($errors->any())
            let errorMessage = '';
            @foreach($errors->all() as $error)
                errorMessage += "• {{ $error }}\n";
            @endforeach

            Swal.fire({
                icon: 'error',
                title: 'Validation Failed',
                text: errorMessage.trim(),
                confirmButtonText: 'Fix',
                customClass: {
                    popup: 'swal2-popup',
                    confirmButton: 'btn btn-primary'
                },
                buttonsStyling: false
            }).then(() => {
                // Optional: focus first input
                document.querySelector('.form-control')?.focus();
            });
        @endif
    });
  </script>
  <script>
  function trimCompanyInput() {
    const companyInput = document.getElementById('company');
    companyInput.value = companyInput.value.trim().replace(/\s+/g, ' ');
  }

  function trimCompanyInput1() {
    const fullNameInput = document.getElementById('fullName');
    fullNameInput.value = fullNameInput.value.trim().replace(/\s+/g, ' ');
  }

  document.addEventListener('DOMContentLoaded', function () {

    // Handle user type selection (Individual vs Company)
    const individualCheckbox = document.getElementById('individualCheckbox');
    const companyCheckbox = document.getElementById('companyCheckbox');
    const companyFieldGroup = document.getElementById('companyFieldGroup');

    function updateCompanyFieldVisibility() {
        if (companyCheckbox.checked) {
            companyFieldGroup.style.display = 'block';
        } else {
            companyFieldGroup.style.display = 'none';
            // Optional: clear the company field when hidden
            document.getElementById('company').value = '';
            // Also hide any error
            const companyError = document.getElementById('companyError');
            if (companyError) companyError.style.display = 'none';
        }
    }

    // Ensure only one checkbox is selected at a time
    function handleCheckboxChange(checkedCheckbox, otherCheckbox) {
        if (checkedCheckbox.checked) {
            otherCheckbox.checked = false;
        }
        updateCompanyFieldVisibility();
    }

    if (individualCheckbox && companyCheckbox) {
        individualCheckbox.addEventListener('change', () => {
            handleCheckboxChange(individualCheckbox, companyCheckbox);
        });

        companyCheckbox.addEventListener('change', () => {
            handleCheckboxChange(companyCheckbox, individualCheckbox);
        });

        // Initialize visibility on page load
        updateCompanyFieldVisibility();
    }

    const signupForm = document.getElementById('signupForm');
    const submitBtn = document.getElementById('signupSubmitBtn');
    if (!signupForm) {
        console.error('Signup form not found!');
        return;
    }

    // Handle form submission
    // signupForm.addEventListener('submit', function(e) {
    //     e.preventDefault();
    //     if (validateForm()) {
    //         // Trigger reCAPTCHA and submit after token received
    //         // handleRecaptchaAndSubmit(this);
    //         signupForm.submit();
    //     }
    // });

    signupForm.addEventListener('submit', function(e) {
        // if (!validateForm()) {
        //     e.preventDefault(); // Block only if invalid
        // }

        if (!validateForm()) {
                e.preventDefault(); // Stop submission
                // Revert button to original state (in case it was changed)
                submitBtn.textContent = 'Start Free Trial';
                submitBtn.disabled = false;
                return;
            }

            // ✅ Validation passed → show "Processing..."
            submitBtn.textContent = 'Processing...';
            submitBtn.disabled = true;
        // If valid, form submits normally via POST
    });

    // Toggle password visibility
    const passwordToggle = document.getElementById('passwordToggle');
    const confirmPasswordToggle = document.getElementById('confirmPasswordToggle');

    if (passwordToggle) {
        passwordToggle.addEventListener('click', () => togglePassword('password'));
    }
    if (confirmPasswordToggle) {
        confirmPasswordToggle.addEventListener('click', () => togglePassword('confirm'));
    }

    function togglePassword(type = 'password') {
        const inputId = type === 'confirm' ? 'confirmPassword' : 'password';
        const iconId = type === 'confirm' ? 'confirmPasswordToggleIcon' : 'passwordToggleIcon';
        const input = document.getElementById(inputId);
        const icon = document.getElementById(iconId);
        if (!input || !icon) return;

        if (input.type === 'password') {
            input.type = 'text';
            icon.src = './assets/image/Icon.png';
        } else {
            input.type = 'password';
            icon.src = './assets/image/hidden 1.png';
        }
    }

    function showError(elementId, message) {
        const errorEl = document.getElementById(elementId);
        if (errorEl) {
            errorEl.textContent = message;
            errorEl.style.display = 'block';
        }
    }

    function validateForm() {
        let isValid = true;

        // Clear previous errors
        document.querySelectorAll('small[id$="Error"]').forEach(el => {
            el.style.display = 'none';
            el.textContent = '';
        });

        // Full Name
        const fullName = document.getElementById('fullName').value.trim();
        if (!fullName) {
            showError('fullNameError', 'Full Name is required.');
            isValid = false;
        } else if (fullName.length < 3) {
            showError('fullNameError', 'Full Name must be at least 3 characters long.');
            isValid = false;
        } else if (fullName.length > 50) {
            showError('fullNameError', 'Full Name cannot exceed 50 characters.');
            isValid = false;
        } else if (/[^a-zA-Z\s]/.test(fullName)) {
            showError('fullNameError', 'Full Name can only contain letters and spaces.');
            isValid = false;
        }

        // Email
        const email = document.getElementById('workEmail').value.trim();
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!email) {
            showError('emailError', 'Email is required.');
            isValid = false;
        } else if (email.length < 3) {
            showError('emailError', 'Email must be at least 3 characters long.');
            isValid = false;
        } else if (email.length > 128) {
            showError('emailError', 'Email cannot exceed 128 characters.');
            isValid = false;
        } else if (!emailRegex.test(email)) {
            showError('emailError', 'Please enter a valid email address.');
            isValid = false;
        }

        // Password
        const password = document.getElementById('password').value;
        const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{6,16}$/;
        if (!password) {
            showError('passwordError', 'Password is required.');
            isValid = false;
        } else if (password.length < 6) {
            showError('passwordError', 'Password must be at least 6 characters long.');
            isValid = false;
        } else if (password.length > 16) {
            showError('passwordError', 'Password cannot exceed 16 characters.');
            isValid = false;
        } else if (!passwordRegex.test(password)) {
            showError('passwordError', 'Password must contain at least 1 uppercase letter, 1 lowercase letter, 1 number, and 1 special character.');
            isValid = false;
        } else if (/\s/.test(password)) {
            showError('passwordError', 'Password cannot contain spaces.');
            isValid = false;
        }

        // Confirm Password
        const confirmPassword = document.getElementById('confirmPassword').value;
        if (!confirmPassword) {
            showError('confirmPasswordError', 'Confirm Password is required.');
            isValid = false;
        } else if (confirmPassword !== password) {
            showError('confirmPasswordError', 'Passwords do not match.');
            isValid = false;
        }

        // User Type
        const individualChecked = document.getElementById('individualCheckbox').checked;
        const companyChecked = document.getElementById('companyCheckbox').checked;
        if (!individualChecked && !companyChecked) {
            showError('userTypeError', 'Please select either Individual or Company.');
            isValid = false;
        }

        // Company (if company selected)
        if (companyChecked) {
            const company = document.getElementById('company').value.trim();
            if (!company) {
                showError('companyError', 'Company name is required.');
                isValid = false;
            } else if (company.length < 3) {
                showError('companyError', 'Company name must be at least 3 characters long.');
                isValid = false;
            } else if (company.length > 50) {
                showError('companyError', 'Company name cannot exceed 50 characters.');
                isValid = false;
            }
        }

        return isValid;
    }

    function handleRecaptchaAndSubmit(form) {
        grecaptcha.ready(function() {
            grecaptcha.execute('6Lep5CQsAAAAALuw10BFqhYnFmOgWWs6My4IcavJ', { action: 'signup' }).then(function(token) {
                let recaptchaInput = form.querySelector('input[name="g-recaptcha-response"]');
                if (!recaptchaInput) {
                    recaptchaInput = document.createElement('input');
                    recaptchaInput.type = 'hidden';
                    recaptchaInput.name = 'g-recaptcha-response';
                    form.appendChild(recaptchaInput);
                }
                recaptchaInput.value = token;
                form.submit(); // Now submit the form normally (no AJAX)
            }).catch(function() {
                showError('recaptchaError', 'reCAPTCHA verification failed. Please try again.');
            });
        });
    }

  });
  </script>
<!-- <script src="https://www.google.com/recaptcha/api.js?render=YOUR_RECAPTCHA_SITE_KEY"></script>
  <script>
    // Company autocomplete functionality with API
    document.addEventListener('DOMContentLoaded', function() {
      const companyInput = document.getElementById('company');
      const suggestionsBox = document.getElementById('company-suggestions');
      
      let activeSuggestionIndex = -1;
      let searchTimeout = null;
      let currentCompanies = [];
      let isSelectingSuggestion = false; // Flag to prevent input event from triggering search after selection

      // Debounce function to limit API calls
      function debounce(func, wait) {
        return function(...args) {
          clearTimeout(searchTimeout);
          searchTimeout = setTimeout(() => func.apply(this, args), wait);
        };
      }

      // Fetch companies from API
      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; // Set flag to prevent input handler from searching
            companyInput.value = company;
            suggestionsBox.style.display = 'none';
            suggestionsBox.innerHTML = '';
            activeSuggestionIndex = -1;
            // Trigger input event to hide any error messages (but won't search due to flag)
            companyInput.dispatchEvent(new Event('input'));
            // Reset flag after a short delay
            setTimeout(() => {
              isSelectingSuggestion = false;
            }, 100);
            // Remove focus to ensure suggestions stay hidden
            companyInput.blur();
          });

          suggestionsBox.appendChild(item);
        });

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

      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');
          // Scroll into view if needed
          items[activeSuggestionIndex].scrollIntoView({ block: 'nearest' });
        }
      }

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

      // Handle input event
      companyInput.addEventListener('input', function() {
        // Don't search if user just selected a suggestion
        if (isSelectingSuggestion) {
          return;
        }
        
        const query = this.value.trim();
        
        if (query.length < 2) {
          suggestionsBox.style.display = 'none';
          suggestionsBox.innerHTML = '';
          activeSuggestionIndex = -1;
          return;
        }

        // Call debounced search
        debouncedSearch(query);
      });

      // Hide suggestions when input loses focus (but allow time for click event)
      companyInput.addEventListener('blur', function() {
        // Small delay to allow click event on suggestion item to fire first
        setTimeout(() => {
          // Only hide if not currently selecting (to avoid race condition)
          if (!isSelectingSuggestion) {
            suggestionsBox.style.display = 'none';
            suggestionsBox.innerHTML = '';
            activeSuggestionIndex = -1;
          }
        }, 200);
      });

      // Handle keyboard navigation
      companyInput.addEventListener('keydown', function(e) {
        const items = suggestionsBox.querySelectorAll('.suggestion-item');
        
        if (e.key === 'ArrowDown') {
          e.preventDefault();
          if (items.length === 0) return;
          if (activeSuggestionIndex < items.length - 1) {
            activeSuggestionIndex++;
          } else {
            activeSuggestionIndex = 0;
          }
          highlightActiveSuggestion();
        } else if (e.key === 'ArrowUp') {
          e.preventDefault();
          if (items.length === 0) return;
          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) {
            isSelectingSuggestion = true; // Set flag to prevent input handler from searching
            companyInput.value = selected.dataset.company;
            suggestionsBox.style.display = 'none';
            suggestionsBox.innerHTML = '';
            activeSuggestionIndex = -1;
            // Trigger input event to hide any error messages (but won't search due to flag)
            companyInput.dispatchEvent(new Event('input'));
            // Reset flag after a short delay
            setTimeout(() => {
              isSelectingSuggestion = false;
            }, 100);
            // Remove focus to ensure suggestions stay hidden
            companyInput.blur();
          }
        } else if (e.key === 'Escape') {
          suggestionsBox.style.display = 'none';
          suggestionsBox.innerHTML = '';
          activeSuggestionIndex = -1;
        }
      });

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

      // Hide suggestions when form is submitted
      // const signupForm = document.getElementById('signupForm');
      // if (signupForm) {
      //   signupForm.addEventListener('submit', function() {
      //     suggestionsBox.style.display = 'none';
      //     suggestionsBox.innerHTML = '';
      //     activeSuggestionIndex = -1;
      //   });
      // }

      // Also hide suggestions when company input gets focus and has value (user selected)
      companyInput.addEventListener('focus', function() {
        // Only show suggestions if input is empty or user is typing
        // If input has a value and user clicks, don't show suggestions
        if (this.value.trim().length >= 2) {
          // User might be editing, so allow suggestions
          const query = this.value.trim();
          debouncedSearch(query);
        }
      });
    });
  </script> -->
</body>
</html>