@extends('layouts.app')

@section('content')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
 
  /* Minimal theme styles */
  [data-theme="dark"] {
    --bg-color: #212529;
    --card-bg: #2c3034;
    --text-color: #f8f9fa;
    --input-bg: #343a40;
    --input-border: #495057;
  }

  [data-theme="dark"] body {
    background-color: var(--color-background);
    color: var(--text-color);
  }

  [data-theme="dark"] .card {
    background-color: var(--card-bg);
    border-color: var(--input-border);
  }

  [data-theme="dark"] .form-control,
  [data-theme="dark"] .form-select {
    background-color: var(--color-card);
    border-color: var(--input-border);
    color: var(--text-color);
  }

  /* ReCAPTCHA container */
  #recaptcha-container {
    min-height: 78px;
    margin: 15px 0;
  }

  /* Loading spinner */
  .btn-loading .spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-right-color: transparent;
    animation: spinner-rotate 0.75s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
  }

  @keyframes spinner-rotate {
    to { transform: rotate(360deg); }
  }

  /* Validation styles */
  .is-invalid {
    border-color: #dc3545 !important;
  }

  .invalid-feedback {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
    display: block;
  }
  
  .dark-text {
    color: var(--text-color);
  }
  
  main {
    padding: var(--space-2) 0 var(--space-6);
  }

  /* CAPTCHA validation message */
  #captcha-error {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    display: none;
  }
  
  #captcha-error.show {
    display: block;
  }

  /* Cursor styles */
  .btn-default:not(:disabled),
  .btn:not(:disabled),
  a:not(:disabled) {
    cursor: pointer;
  }
  
  .btn-default:disabled,
  .btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
  }

  /* Resend link styles */
  #resend-otp-link.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Phone number display */
  .masked-phone {
    font-weight: 500;
    color: var(--text-color);
  }

  /* OTP message */
  .otp-message {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
  }
  /* Resend CAPTCHA styles */
  #resend-captcha-container {
      background: rgba(0,0,0,0.02);
      padding: 15px;
      border-radius: 8px;
      margin: 10px 0;
  }

  [data-theme="dark"] #resend-captcha-container {
      background: rgba(255,255,255,0.05);
  }

  #resend-captcha-error {
      color: #dc3545;
      font-size: 0.875em;
      margin-top: 0.5rem;
      display: none;
  }

  #resend-captcha-error.show {
      display: block;
  }
</style>

<section class="find-the-ride find-the--ride section">
  <div class="container">
    <div class="form-account-box shadow-none p-0">
      <div class="row align-items-center justify-content-center">
        <div class="col-lg-12">
          <div class="card-like d-flex shadow-sm">
            <div class="row g-0 w-100">
              <!-- Left visual / illustration -->
              <div class="col-md-6 d-none d-md-block">
                <div class="left-image h-100">
                  <figure class="h-100 m-0">
                    <img class="img-fluid h-100 w-100 object-fit-cover" src="{{ asset('images/left-image.png') }}" alt="{{ __('lang.app_name') }}">
                  </figure>
                </div>
              </div>

              <!-- Right: actual login card -->
              <div class="col-md-6">
                <div class="p-4 h-100 d-flex flex-column justify-content-center">

                  <div class="logo-icon text-center mb-3">
                    <figure class="m-0">
                      <img class="img-fluid" src="{{ asset('images/logo-icon.png') }}" alt="{{ __('lang.app_name') }}">
                    </figure>
                  </div>

                  <h3 class="text-center mb-3">{{ __('lang.sign_up') }}</h3>

                  <div id="global-message-container" class="mb-3"></div>

                  <form id="multi-step-form">
                      <!-- Step 1 -->
                      <div class="step step-1">
                        <div class="mb-3 phone-box phone--box">
                          <label class="form-label mb-3 add-number">{{ __('lang.phone_number') }} <span class="text-danger">*</span></label>
                          <div class="input-group p-2">
                            <select class="form-select flex-grow-0 w-auto countryCode shadow-none border-0 countrySelect" id="countryCode" required>
                              <option disabled selected>{{ __('lang.loading') }}</option>
                            </select>
                            <input type="tel" class="form-control border-top-0 border-bottom-0 border-end-0 py-0 pe-0 shadow-none" id="phone_number" placeholder="{{ __('lang.enter_mobile_number') }}" maxlength="10" required>
                          </div>
                          <div class="invalid-feedback" id="phone-error"></div>
                        </div>
                        <div class="form-check mb-3">
                          <input class="form-check-input" name="terms" style="margin: 2px 9px 0px -19px;" type="checkbox" id="termsCheckbox">
                          <label class="form-check-label form-check--label" for="termsCheckbox">
                            {{ __('lang.agree_terms') }}
                            <a href="{{ route('terms') }}" target="_blank" class="text-primary text-decoration-none">
                              {{ __('lang.terms_conditions') }}
                            </a>
                          </label>
                        </div>
                        <div id="recaptcha-container"></div>
                        <div id="captcha-error" class="invalid-feedback"></div>
                        <div class="d-grid gap-2 mb-2">
                          <button type="button" class="btn-default" id="send-otp-btn" onclick="sendOTP()">
                            {{ __('lang.continue_with_mobile') }}
                            <span class="spinner d-none"></span>
                          </button>
                        </div>
                      
                        <div class="text-center dark-text mt-3">
                          {{ __('lang.already_have_account') }} <a href="{{ route('login') }}" class="text-decoration-none">{{ __('lang.login') }}</a>
                        </div>
                      </div>

                      <!-- Step 2: OTP -->
                      <div class="step step-2 d-none">
                        <div class="mb-3">
                          <label class="form-label">{{ __('lang.verify_code') }} <span class="text-danger">*</span></label>
                          <div class="otp-message" id="otp-sent-to"></div>
                          <input type="tel" class="form-control" id="otp" placeholder="{{ __('lang.enter_otp') }}" maxlength="6" required>
                          <div class="invalid-feedback" id="otp-error"></div>
                          <div class="form-text text-end">
                            <a href="javascript:void(0)" id="resend-otp-link" onclick="resendOTP()">{{ __('lang.resend_otp') }}</a>
                          </div>
                        </div>
                         <div id="resend-captcha-container" style="display: none; margin: 15px 0;">
                            <div id="resend-recaptcha-container" style="min-height: 78px;"></div>
                            <div id="resend-captcha-error" class="invalid-feedback" style="display: none;"></div>
                          </div>
                          <div class="d-flex justify-content-between">
                          <button type="button" class="btn btn-secondary" onclick="goBack(1)">{{ __('lang.back') }}</button>
                          <button type="button" class="btn btn-primary" id="verify-otp-btn" onclick="verifyOTP()">
                            {{ __('lang.verify') }}
                            <span class="spinner d-none"></span>
                          </button>
                        </div>
                      </div>

                    <!-- Step 3: Name -->
                    <div class="step step-3 d-none">
                      <div class="mb-3">
                        <label class="form-label">{{ __('lang.first_name') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="first_name" placeholder="{{ __('lang.first_name') }}" required>
                        <div class="invalid-feedback" data-default-message="{{ __('lang.enter_first_name') }}"></div>
                      </div>
                      <div class="mb-3">
                        <label class="form-label">{{ __('lang.last_name') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="last_name" placeholder="{{ __('lang.last_name') }}" required>
                        <div class="invalid-feedback" data-default-message="{{ __('lang.enter_last_name') }}"></div>
                      </div>
                      <div class="d-flex justify-content-between">
                        <button type="button" class="btn btn-secondary" onclick="goBack(window.isSocialLogin ? 1 : 2)">{{ __('lang.back') }}</button>
                        <button type="button" class="btn btn-primary" onclick="validateAndNext(4)">{{ __('lang.next') }}</button>
                      </div>
                    </div>

                    <!-- Step 4 -->
                    <div class="step step-4 d-none">
                      <div id="step4-content"></div>
                      <div class="d-flex justify-content-between">
                        <button type="button" class="btn btn-secondary" onclick="goBack(3)">{{ __('lang.back') }}</button>
                        <button type="button" class="btn btn-primary" id="step4-next-btn" onclick="validateAndNext(5)">
                          {{ __('lang.next') }}
                          <span class="spinner d-none"></span>
                        </button>
                      </div>
                    </div>

                    <!-- Step 5: DOB and Gender -->
                    <div class="step step-5 d-none">
                      <div class="mb-3">
                        <label class="form-label">{{ __('lang.dob') }} <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" id="dob" required>
                        <div class="invalid-feedback" data-default-message="{{ __('lang.enter_dob') }}"></div>
                      </div>
                      <div class="mb-3">
                        <label class="form-label">{{ __('lang.gender') }} <span class="text-danger">*</span></label>
                        <select class="form-select" id="gender" required>
                          <option value="">{{ __('lang.select_gender') }}</option>
                          <option value="Ms./Mrs." {{ ($userData['gender'] ?? '') === 'Ms./Mrs.' ? 'selected' : '' }}>{{trans('lang.ms/mrs')}}</option>
                          <option value="Mr." {{ ($userData['gender'] ?? '') === 'Mr.' ? 'selected' : '' }}>{{trans('lang.mr')}}</option>         
                          <option value="I’d rather not say" {{ ($userData['gender'] ?? '') === "I’d rather not say" ? 'selected' : '' }}>{{trans("lang.i_d_rather_not_say")}}</option>
                        </select>
                        <div class="invalid-feedback" data-default-message="{{ __('lang.select_gender_validation') }}"></div>
                      </div>
                      <div class="d-flex justify-content-between">
                        <button type="button" class="btn btn-secondary" onclick="goBack(4)">{{ __('lang.back') }}</button>
                        <button type="button" class="btn btn-success" id="submit-btn" onclick="finalSubmit()">
                          {{ __('lang.finish') }}
                          <span class="spinner d-none"></span>
                        </button>
                      </div>
                    </div>
                </form>

                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
  // Global variables
  let confirmationResult = null;
  let recaptchaVerifier = null;
  let isRecaptchaResolved = false;
  window.isSocialLogin = false;
  window.phoneNumber = '';
  window.currentStep = 1;
  let resendCooldown = false;
  let countdownInterval = null;

  // Form navigation
  function showStep(step) {
    document.querySelectorAll('.step').forEach(el => el.classList.add('d-none'));
    const stepEl = document.querySelector(`.step-${step}`);
    if (stepEl) stepEl.classList.remove('d-none');
    window.currentStep = step;
  }

  function nextStep(step) {
    showStep(step);
  }

  function goBack(step) {
    showStep(step);
  }

  function validateAndNext(step) {
    if (validateCurrentStep()) {
      if (step === 4) renderStep4Inputs();
      nextStep(step);
    }
  }

  // UI Helpers
  function showMessage(message, type = 'danger') {
    const container = document.getElementById('global-message-container');
    const alert = document.createElement('div');
    alert.className = `alert alert-${type} alert-dismissible fade show`;
    alert.innerHTML = `
      ${message}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{{trans('lang.close')}}"></button>
    `;
    container.appendChild(alert);
    
    setTimeout(() => {
      alert.classList.remove('show');
      setTimeout(() => alert.remove(), 150);
    }, 5000);
  }

  function toggleButtonLoading(button, isLoading) {
    if (!button) return;
    button.disabled = isLoading;
    const spinner = button.querySelector('.spinner');
    if (spinner) spinner.classList.toggle('d-none', !isLoading);
  }

  function markFieldAsInvalid(field, message) {
    field.classList.add('is-invalid');
    const feedback = field.nextElementSibling;
    if (feedback && feedback.classList.contains('invalid-feedback')) {
      feedback.textContent = message;
    }
  }

  function clearValidation(field) {
    field.classList.remove('is-invalid');
    const feedback = field.nextElementSibling;
    if (feedback && feedback.classList.contains('invalid-feedback')) {
      feedback.textContent = '';
    }
  }

  function validateCurrentStep() {
    const currentStepEl = document.querySelector(`.step-${window.currentStep}`);
    if (!currentStepEl) return false;

    let isValid = true;

    const inputs = currentStepEl.querySelectorAll('input[required], select[required]');
    inputs.forEach(input => {
        clearValidation(input);   // this removes .is-invalid and clears text

        const feedback = input.nextElementSibling;
        if (!feedback || !feedback.classList.contains('invalid-feedback')) return;

        let message = '';

        if (!input.value.trim()) {
            message = feedback.getAttribute('data-default-message') || '{{trans("lang.field_required")}}';
            isValid = false;
        }
        else if (input.id === 'phone_number' || input.id === 'phoneSocial') {
            if (!input.value.match(/^\d+$/)) {
                message = '{{trans("lang.enter_numbers_only")}}';
                isValid = false;
            } else if (input.value.length !== 10) {
                message = '{{trans("lang.enter_10_digit_mobile")}}';
                isValid = false;
            }
        }
        else if (input.id === 'otp') {
            if (input.value.length !== 6) {
                message = '{{trans("lang.enter_valid_6_digit_otp")}}';
                isValid = false;
            }
        }
        else if (input.type === 'email') {
            if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value)) {
                message = '{{trans("lang.enter_valid_email")}}';
                isValid = false;
            }
        }
        else if (input.type === 'date' && !input.value) {
            message = feedback.getAttribute('data-default-message') || '{{trans("lang.enter_dob")}}';
            isValid = false;
        }

        if (message) {
            feedback.textContent = message;
            input.classList.add('is-invalid');
        }
    });

    return isValid;
  }
  function validateStep1() {
    let isValid = true;
    const phoneInput = document.getElementById('phone_number');
    const termsCheckbox = document.getElementById('termsCheckbox');
    const captchaError = document.getElementById('captcha-error');
    const phoneError = document.getElementById('phone-error');
    
    // Clear previous validation
    phoneInput.classList.remove('is-invalid');
    phoneError.textContent = '';
    
    // Validate phone number - show specific message for empty or invalid
    if (!phoneInput.value.trim()) {
        phoneInput.classList.add('is-invalid');
        phoneError.textContent = '{{trans("lang.enter_phone_number")}}';
        isValid = false;
    } else if (!phoneInput.value.match(/^\d+$/)) {
        phoneInput.classList.add('is-invalid');
        phoneError.textContent = '{{trans("lang.enter_numbers_only")}}';
        isValid = false;
    } else if (phoneInput.value.length !== 10) {
        phoneInput.classList.add('is-invalid');
        phoneError.textContent = '{{trans("lang.enter_10_digit_mobile")}}';
        isValid = false;
    }
    
    // Validate terms
    if (!termsCheckbox.checked) {
        showMessage('{{ __("lang.accept_terms_alert") }}','danger');
        isValid = false;
    }
    
    // Validate CAPTCHA
    if (!isRecaptchaResolved) {
        captchaError.textContent = '{{trans("lang.please_complete_captcha")}}';
        captchaError.classList.add('show');
        isValid = false;
    } else {
        captchaError.classList.remove('show');
    }
    
    return isValid;
  }

  async function checkUserExists(identifier, type) {
    try {
      const querySnapshot = await db.collection('users')
        .where(type, '==', identifier)
        .limit(1) 
        .get();

      return !querySnapshot.empty;
    } catch (error) {
      console.error('Error checking user:', error);
      return false;
    }
  }

  function initializeRecaptcha() {
    return new Promise((resolve, reject) => {
      if (recaptchaVerifier) {
        try { 
          recaptchaVerifier.clear(); 
          document.getElementById('recaptcha-container').innerHTML = '';
        } catch (e) {}
      }
      
      isRecaptchaResolved = false;
      
      recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
        'size': 'normal',
        'callback': () => {
          isRecaptchaResolved = true;
          const captchaError = document.getElementById('captcha-error');
          if (captchaError) captchaError.classList.remove('show');
          resolve();
        },
        'expired-callback': () => {
          isRecaptchaResolved = false;
        }
      }, firebaseApp);
      
      recaptchaVerifier.render().then((widgetId) => {
        resolve();
      }).catch(error => {
        console.error('reCAPTCHA render error:', error);
        setTimeout(() => initializeRecaptcha().then(resolve).catch(reject), 500);
      });
    });
  }

  async function sendOTP() {
    if (!validateStep1()) {
        return;
    }

    const phoneInput = document.getElementById("phone_number");
    const phoneValue = phoneInput.value.trim();
    const countrySelect = document.getElementById("countryCode");
    const countryCode = countrySelect.value;
    
    // Get the selected country's phone code
    const selectedOption = countrySelect.options[countrySelect.selectedIndex];
    const phoneCode = selectedOption.getAttribute('data-phone-code') || countryCode;
    
    window.phoneNumber = phoneCode + phoneValue;
    window.countryCode = countryCode;
    window.onlyPhoneNumber = phoneValue;
    const button = document.getElementById('send-otp-btn');
  
    try {
        toggleButtonLoading(button, true);
        
        // Check if user already exists
        const userExists = await checkUserExists(phoneValue, 'phoneNumber');
        if (userExists) {
            showMessage("{{trans('lang.phone_already_registered')}}");
            toggleButtonLoading(button, false);
            return;
        }

        confirmationResult = await auth.signInWithPhoneNumber(window.phoneNumber, recaptchaVerifier);
        window.isSocialLogin = false;
        
        // Create masked phone number display with proper message
        const masked = getMaskedPhoneNumber(window.countryCode, window.onlyPhoneNumber);
        const sentToElement = document.getElementById('otp-sent-to');
        if (sentToElement) {
            sentToElement.innerHTML = `{{trans('lang.enter_six_digit_code_sent_to')}} <span class="masked-phone">${masked}</span>`;
        }
        showStep(2);
    } catch (e) {
        console.error('Error sending OTP:', e);
        
        // Clear previous validation
        phoneInput.classList.remove('is-invalid');
        document.getElementById('phone-error').textContent = '';
        
        let friendlyMessage = getFriendlyFirebaseError(e);
        
        // Check if it's a phone number error
        if (e.code === 'auth/invalid-phone-number' || 
            e.message?.includes('TOO_LONG') || 
            e.message?.includes('TOO_SHORT') ||
            e.message?.includes('invalid format') ||
            e.message?.includes('not a valid phone number')) {
            
            friendlyMessage = "{{ __('lang.invalid_phone_number') }}";  
            
            // Show inline error under phone input
            phoneInput.classList.add('is-invalid');
            const phoneErrorEl = document.getElementById('phone-error');
            if (phoneErrorEl) {
                phoneErrorEl.textContent = friendlyMessage;
            }
            
            // UNCOMMENT THIS LINE to show the toast message as well
            showMessage(friendlyMessage, 'danger');
        } else {
            // For other errors, show in toast
            showMessage(friendlyMessage, 'danger');
        }

        // Reset reCAPTCHA
        isRecaptchaResolved = false;
        await initializeRecaptcha();

        // Scroll to phone input for better UX
        phoneInput?.scrollIntoView({ behavior: 'smooth', block: 'center' });
        phoneInput?.focus();
    } finally {
        toggleButtonLoading(button, false);
    }
  }
 
  async function resendOTP() {
    if (!window.phoneNumber || resendCooldown) return;
    
    const resendLink = document.getElementById('resend-otp-link');
    const resendCaptchaContainer = document.getElementById('resend-captcha-container');
    const resendCaptchaDiv = document.getElementById('resend-recaptcha-container');
    const resendCaptchaError = document.getElementById('resend-captcha-error');
    
    // Clear any existing interval
    if (countdownInterval) {
        clearInterval(countdownInterval);
    }
    
    // Set cooldown to prevent multiple clicks
    resendCooldown = true;
    resendLink.classList.add('disabled');
    resendLink.textContent = '{{trans("lang.sending")}}...';
    
    // Show CAPTCHA container within step 2
    resendCaptchaContainer.style.display = 'block';
    
    let resendRecaptchaVerifier = null;
    let isResendRecaptchaResolved = false;
    
    try {
        // Create new recaptcha verifier inside step 2
        resendRecaptchaVerifier = new firebase.auth.RecaptchaVerifier('resend-recaptcha-container', {
            'size': 'normal',
            'callback': () => {
                isResendRecaptchaResolved = true;
                resendCaptchaError.style.display = 'none';
                // Change button text to indicate it's ready
                resendLink.textContent = '{{trans("lang.click_to_resend")}}';
                resendLink.classList.remove('disabled');
            },
            'expired-callback': () => {
                isResendRecaptchaResolved = false;
                resendCaptchaError.textContent = '{{trans("lang.captcha_expired_please_try_again")}}';
                resendCaptchaError.style.display = 'block';
                resendLink.classList.add('disabled');
                resendLink.textContent = '{{trans("lang.resend_otp")}} ({{trans("lang.captcha_expired")}})';
            }
        }, firebaseApp);
        
        // Render recaptcha
        await resendRecaptchaVerifier.render();
        
        // Show message
        showMessage('{{trans("lang.please_complete_captcha_to_resend_otp")}}', 'info');
        
        // Wait for user to complete CAPTCHA and click the link again
        // Change resend link behavior temporarily
        const originalResendHandler = resendLink.onclick;
        
        const handleResendWithCaptcha = async () => {
            if (!isResendRecaptchaResolved) {
                resendCaptchaError.textContent = '{{trans("lang.please_complete_captcha_first")}}';
                resendCaptchaError.style.display = 'block';
                return;
            }
            
            try {
                resendLink.textContent = '{{trans("lang.sending")}}...';
                resendLink.classList.add('disabled');
                
                // Clear any existing confirmation result
                confirmationResult = null;
                
                // Send new OTP
                confirmationResult = await auth.signInWithPhoneNumber(window.phoneNumber, resendRecaptchaVerifier);
                
                // Hide CAPTCHA container
                resendCaptchaContainer.style.display = 'none';
                
                // Update the masked phone number display
                const masked = getMaskedPhoneNumber(window.countryCode, window.onlyPhoneNumber);
                const sentToElement = document.getElementById('otp-sent-to');
                if (sentToElement) {
                    sentToElement.innerHTML = `{{trans('lang.enter_six_digit_code_sent_to')}} <span class="masked-phone">${masked}</span>`;
                }
                
                // Clear OTP input for new code
                document.getElementById('otp').value = '';
                document.getElementById('otp').classList.remove('is-invalid');
                
                showMessage("{{trans('lang.otp_has_been_resent_please_check_your_phone')}}", 'success');
                
                // Restore original resend link behavior
                resendLink.onclick = originalResendHandler;
                
                // Clean up recaptcha
                if (resendRecaptchaVerifier) {
                    try {
                        resendRecaptchaVerifier.clear();
                    } catch (e) {}
                }
                
            } catch (e) {
                console.error('Error resending OTP:', e);
                let msg = getFriendlyFirebaseError(e);
                if (e.code === 'auth/too-many-requests') {
                    msg = "{{ __('lang.too_many_attempts_please_wait') }}";
                }
                showMessage(msg, 'danger');
                
                // Keep CAPTCHA visible on error
                resendLink.textContent = '{{trans("lang.resend_otp")}}';
                resendLink.classList.remove('disabled');
            }
        };
        
        // Temporarily override onclick
        resendLink.onclick = handleResendWithCaptcha;
        resendLink.textContent = '{{trans("lang.complete_captcha_then_click")}}';
        resendLink.classList.add('disabled');
        
    } catch (e) {
        console.error('Error setting up resend CAPTCHA:', e);
        showMessage('{{trans("lang.captcha_setup_failed_try_again")}}', 'danger');
        resendCaptchaContainer.style.display = 'none';
        resendLink.textContent = '{{trans("lang.resend_otp")}}';
        resendLink.classList.remove('disabled');
        resendCooldown = false;
    }
    
    // Start cooldown timer for the original resend functionality
    // This will run in background
    let seconds = 30;
    const originalText = '{{trans("lang.resend_otp")}}';
    
    const timerInterval = setInterval(() => {
        seconds--;
        if (seconds <= 0) {
            clearInterval(timerInterval);
            if (!resendCooldown) {
                resendLink.textContent = originalText;
                resendLink.classList.remove('disabled');
            }
        } else if (resendLink.textContent.includes('(')) {
            // Update only if showing countdown
            resendLink.textContent = `${originalText} (${seconds}s)`;
        }
    }, 1000);
    
    // Store interval to clear later if needed
    countdownInterval = timerInterval;
  }

  async function verifyOTP() {
    const otpInput = document.getElementById("otp");
    const otpValue = otpInput.value.trim();
    const otpError = document.getElementById('otp-error');
    
    if (otpValue.length !== 6) {
      otpInput.classList.add('is-invalid');
      otpError.textContent = '{{trans("lang.enter_valid_6_digit_otp")}}';
      return;
    }

    const button = document.getElementById('verify-otp-btn');

    try {
      toggleButtonLoading(button, true);
      const result = await confirmationResult.confirm(otpValue);
      window.firebaseUser = result.user;
      showStep(3);
    } catch (error) {
      console.error('Error verifying OTP:', error);
      let errMsg = getFriendlyFirebaseError(error);
      if (error.code?.includes('invalid-verification-code') ||
          error.code?.includes('code-expired') ||
          error.code === 'auth/invalid-credential') {
          errMsg = "{{ __('lang.incorrect_otp_try_again') }}";
      }
      otpInput.classList.add('is-invalid');
      otpError.textContent = errMsg;
    } finally {
      toggleButtonLoading(button, false);
    }
  }

  async function loginWithGoogle() {
    const button = document.getElementById('google-btn');

    try {
      toggleButtonLoading(button, true);
      const provider = new firebase.auth.GoogleAuthProvider();
      const result = await auth.signInWithPopup(provider);
      
      window.firebaseUser = result.user;
      window.isSocialLogin = true;
      
      // Check if user already exists
      const userExists = await checkUserExists(result.user.email, 'email');
      if (userExists) {
        showMessage('{{trans("lang.email_already_registered")}}');
        return;
      }
      
      // Auto-fill name if available
      if (result.user.displayName) {
        const names = result.user.displayName.split(' ');
        document.getElementById('first_name').value = names[0] || '';
        document.getElementById('last_name').value = names.slice(1).join(' ') || '';
      }
      
      showStep(3);
    } catch (e) {
      showMessage(e.message || '{{trans("lang.failed_to_login_with_please_try_again")}}');
    } finally {
      toggleButtonLoading(button, false);
    }
  }

  function renderStep4Inputs() {
    const container = document.getElementById("step4-content");
    container.innerHTML = "";

    if (window.isSocialLogin) {
      container.innerHTML = `
        <div class="mb-3">
          <label class="form-label">{{trans('lang.phone_number')}} <span class="text-danger">*</span></label>
          <div class="input-group">
            <select class="form-select flex-grow-0 w-auto countryCode" id="countryCodeSocial" required>
              <option disabled selected>{{trans('lang.loading')}}</option>
            </select>
            <input type="tel" class="form-control" id="phoneSocial" placeholder="{{trans('lang.enter_mobile')}}" maxlength="10" required>
          </div>
          <div class="invalid-feedback" data-default-message="{{trans('lang.invalid_mobile')}}"></div>
        </div>
      `;
    } else {
      container.innerHTML = `
        <div class="mb-3">
          <label class="form-label">{{trans('lang.email')}} <span class="text-danger">*</span></label>
          <input type="email" class="form-control" id="email" placeholder="{{trans('lang.enter_your_email')}}" required>
          <div class="invalid-feedback" data-default-message="{{trans('lang.enter_valid_email')}}"></div>
        </div>
      `;
    }
  }

  async function finalSubmit() {
      try {
          if (!validateCurrentStep()) return;
          if (!window.firebaseUser?.uid) {
              return showMessage("{{trans('lang.authentication_error')}}");
          }
          
          const isSocial = window.isSocialLogin;
          const userData = {
              firebase_uid: window.firebaseUser.uid,
              login_provider: isSocial ? 'google' : 'phone',
              phone_number: isSocial ? document.getElementById('phoneSocial').value.trim() : document.getElementById('phone_number').value.trim(),
              email: isSocial ? window.firebaseUser.email : document.getElementById('email').value.trim(),
              first_name: document.getElementById('first_name').value.trim(),
              last_name: document.getElementById('last_name').value.trim(),
              date_of_birth: document.getElementById('dob').value,
              gender: document.getElementById('gender').value,
              country_code: isSocial ? document.getElementById('countryCodeSocial').value : document.getElementById('countryCode').value,
              countryISO: $('#countryCode option:selected').data('isocode')
          };

          const button = document.getElementById('submit-btn');
          toggleButtonLoading(button, true);

          await firebase.firestore().collection('users').doc(userData.firebase_uid).set({
              id: userData.firebase_uid,
              email: userData.email,
              phoneNumber: userData.phone_number,
              loginType: userData.login_provider,
              firstName: userData.first_name,
              lastName: userData.last_name,
              dateOfBirth: userData.date_of_birth || 'January 01, 1990',
              gender: userData.gender,
              createdAt: firebase.firestore.FieldValue.serverTimestamp(),
              walletAmount: '0.0',
              reviewSum: '0.0',
              reviewCount: '0.0',
              profilePic: '',
              isVerify: false,
              isActive: true,
              fcmToken: '',
              countryCode: userData.country_code,
              countryISOCode: userData.countryISO,
              bio: ''
          });

          const response = await fetch("{{ route('register') }}", {
              method: "POST",
              headers: {
                  "Content-Type": "application/json",
                  "X-CSRF-TOKEN": "{{ csrf_token() }}"
              },
              body: JSON.stringify(userData)
          });
          const data = await response.json();

          if (data.success && data.redirect) {
              showMessage("{{trans('lang.registration_successful')}}", 'success');
              setTimeout(() => window.location.href = data.redirect, 1500);
          } else {
              showMessage(data.message || "{{trans('lang.registration_failed')}}");
          }
      } catch (error) {
          console.error('Registration error:', error);
          showMessage("{{trans('lang.registration_error_occurred')}}");
      } finally {
          const button = document.getElementById('submit-btn');
          toggleButtonLoading(button, false);
      }
  }

  // Initialize
  document.addEventListener('DOMContentLoaded', function() {
    const initRecaptchaWithRetry = (attempt = 0) => {
      const maxAttempts = 3;
      initializeRecaptcha().catch(error => {
        console.error('reCAPTCHA init error:', error);
        if (attempt < maxAttempts) {
          setTimeout(() => initRecaptchaWithRetry(attempt + 1), 1000 * (attempt + 1));
        }
      });
    };
    
    initRecaptchaWithRetry();
    
    document.getElementById('phone_number')?.addEventListener('input', function(e) {
      this.value = this.value.replace(/\D/g, '');
      this.classList.remove('is-invalid');
      document.getElementById('phone-error').textContent = '';
    });
    
    document.getElementById('otp')?.addEventListener('input', function(e) {
      this.value = this.value.replace(/\D/g, '').slice(0, 6);
      this.classList.remove('is-invalid');
      document.getElementById('otp-error').textContent = '';
    });
    
    document.addEventListener('input', function(e) {
      if (e.target.id === 'phoneSocial') {
        e.target.value = e.target.value.replace(/\D/g, '').slice(0, 10);
      }
    });

    // Clear CAPTCHA error when user interacts with CAPTCHA
    const captchaContainer = document.getElementById('recaptcha-container');
    if (captchaContainer) {
      captchaContainer.addEventListener('click', function() {
        const captchaError = document.getElementById('captcha-error');
        if (captchaError) captchaError.classList.remove('show');
      });
    }

    // Set default country to India
    const countrySelect = document.getElementById('countryCode');
    if (countrySelect) {
      setTimeout(() => {
        for (let i = 0; i < countrySelect.options.length; i++) {
          if (countrySelect.options[i].value.includes('+91') || 
              countrySelect.options[i].text.includes('India')) {
            countrySelect.selectedIndex = i;
            break;
          }
        }
      }, 500);
    }
  });

  document.addEventListener('DOMContentLoaded', function () {
    const dobInput = document.getElementById('dob');
    if (!dobInput) return;

    const today = new Date().toISOString().split('T')[0];
    dobInput.setAttribute('max', today);

    dobInput.addEventListener('change', function () {
      if (this.value > today) {
        this.value = '';           
      } else {
        this.setCustomValidity("");
      }
    });
  });

  function getMaskedPhoneNumber(countryCode, phoneNumber) {
      
      if (!phoneNumber) return countryCode || '';
      
      // Show only last 2 digits of phone number
      if (phoneNumber.length <= 2) return countryCode + ' ' + phoneNumber;
      
      const visibleEnd = phoneNumber.slice(-2);
      const masked = '*'.repeat(phoneNumber.length - 2);
      
      return countryCode + ' ' + masked + visibleEnd;
  }
  function getFriendlyFirebaseError(error) {
      const code = error.code || '';
      const message = error.message || '';

      if (code.includes('invalid-phone-number') || code.includes('TOO_LONG') || code.includes('TOO_SHORT')) {
          return "{{ __('lang.invalid_phone_number') }}";
      }
      if (code === 'auth/too-many-requests') {
          return "{{ __('lang.too_many_requests_please_try_again_later') }}";
      }
      if (code === 'auth/invalid-verification-code' || code === 'auth/code-expired') {
          return "{{ __('lang.incorrect_or_expired_otp') }}";
      }
      if (code === 'auth/invalid-verification-id') {
          return "{{ __('lang.session_expired_please_try_again') }}";
      }
      if (code === 'auth/missing-phone-number' || code === 'auth/argument-error') {
          return "{{ __('lang.enter_phone_number') }}";
      }
      if (code.includes('network-request-failed') || code.includes('unavailable')) {
          return "{{ __('lang.network_error_please_check_connection') }}";
      }
      if (code === 'auth/user-disabled') {
          return "{{ __('lang.account_disabled_contact_support') }}";
      }

      let cleanMsg = message
          .replace('Firebase: ', '')
          .replace(/\(auth\/.*?\)\.?/, '')
          .trim();

      return cleanMsg || "{{ __('lang.something_went_wrong_try_again') }}";
  }
</script>
@endsection