@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: none;
  }
   .dark-text {
    color: var(--text-color);
  }
  main{
    padding: var(--space-2) 0 var(--space-6);
  }
.is-invalid ~ .invalid-feedback,
.is-invalid + .invalid-feedback {
    display: block !important;
}
</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 image remains -->
              <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: form area -->
              <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: Name + Email (social) / Phone (normal) -->
                    <div class="step step-1">
                      <div id="step1-content"></div>

                      <div class="form-check mb-3">
                        <input class="form-check-input me-3" name="terms" 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 class="d-grid gap-2 mb-2">
                        <button type="button" class="btn-default" id="step1-continue-btn">
                          {{ __('lang.continue') }}
                          <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 4: Phone (social) / Email (normal) -->
                    <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(1)">{{ __('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 + 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">{{ __('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.">{{trans('lang.ms/mrs')}}</option>
                          <option value="Mr.">{{trans('lang.mr')}}</option>
                          <option value="I’d rather not say">{{trans("lang.i_d_rather_not_say")}}</option>
                        </select>
                        <div class="invalid-feedback">{{ __('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>

const urlParams = new URLSearchParams(window.location.search);
window.isSocialLogin = urlParams.has('provider') && urlParams.get('provider') === 'google';
window.socialData = {
  uuid: urlParams.get('uuid') || '',
  email: urlParams.get('email') || '',
  firstName: urlParams.get('firstName') || '',
  lastName: urlParams.get('lastName') || '',
  photoURL: urlParams.get('photoURL') || '',
  phoneNumber: urlParams.get('phoneNumber') || ''
};

window.currentStep = 1;
window.firebaseUser = null;
window.confirmationResult = null;

function renderStep1() {
  const container = document.getElementById('step1-content');
  container.innerHTML = '';

  if (window.isSocialLogin) {
    container.innerHTML = `
      <div class="mb-3">
        <label class="form-label form-check--label">{{ __('lang.email') }} <span class="text-danger">*</span></label>
        <input type="email" class="form-control" id="email" value="${window.socialData.email}" readonly disabled>
      </div>
      <div class="mb-3">
        <label class="form-label form-check--label">{{ __('lang.first_name') }} <span class="text-danger">*</span></label>
        <input type="text" class="form-control" id="first_name" value="${window.socialData.firstName}" required>
        <div class="invalid-feedback">{{ __('lang.enter_first_name') }}</div>
      </div>
      <div class="mb-3">
        <label class="form-label form-check--label">{{ __('lang.last_name') }} <span class="text-danger">*</span></label>
        <input type="text" class="form-control" id="last_name" value="${window.socialData.lastName}" required>
        <div class="invalid-feedback">{{ __('lang.enter_last_name') }}</div>
      </div>
    `;
    document.getElementById('step1-continue-btn').textContent = '{{ __('lang.continue') }}';
  } else {
    container.innerHTML = `
      <div class="mb-3 phone-box">
        <label class="form-label mb-3">{{ __('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">{{ __('lang.invalid_mobile') }}</div>
      </div>
    `;
    document.getElementById('step1-continue-btn').textContent = '{{ __('lang.continue_with_mobile') }}';
  }
}

function renderStep4() {
  const container = document.getElementById('step4-content');
  container.innerHTML = '';

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

function showStep(step) {
  document.querySelectorAll('.step').forEach(el => el.classList.add('d-none'));
  document.querySelector(`.step-${step}`)?.classList.remove('d-none');
  window.currentStep = step;
}

function validateAndNext(nextStep) {
  if (validateCurrentStep()) {
    if (nextStep === 4) renderStep4();
    showStep(nextStep);
  }
}

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

function showMessage(message, type = 'danger') {
  const container = document.getElementById('global-message-container');
  if (!container) return;

  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="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) {
    // Option A: add to input (works with CSS above)
    field.classList.add('is-invalid');

    // Option B: better for input-group (Bootstrap native behavior)
    const inputGroup = field.closest('.input-group');
    if (inputGroup) {
        inputGroup.classList.add('is-invalid');
    }

    const feedback = field.nextElementSibling || field.parentElement?.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);

    if (!input.value.trim()) {
      markFieldAsInvalid(input, '{{ __('lang.field_required') }}');
      isValid = false;
      return;
    }

    if (input.id === 'phoneSocial' || input.id === 'phone_number') {
      if (!/^\d{10}$/.test(input.value.trim())) {
        markFieldAsInvalid(input, '{{ __('lang.enter_valid_10_digit_mobile') }}');
        isValid = false;
      }
    }

    if (input.type === 'email' && input.value.trim()) {
      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value.trim())) {
        markFieldAsInvalid(input, '{{ __('lang.enter_valid_email') }}');
        isValid = false;
      }
    }
  });

  return isValid;
}

document.getElementById('step1-continue-btn')?.addEventListener('click', async () => {
  if (!document.getElementById('termsCheckbox').checked) {
    alert('{{ __("lang.accept_terms_alert") }}');
    return;
  }

  if (!validateCurrentStep()) return;

  if (window.isSocialLogin) {
    showStep(4);
    
    loadCountries();
  } else {    
    await sendOTP();
  }
});


async function finalSubmit() {
  if (!validateCurrentStep()) return;

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

  try {
    let userData = {
      firebase_uid: window.isSocialLogin ? window.socialData.uuid : (window.firebaseUser?.uid || ''),
      login_provider: window.isSocialLogin ? 'google' : 'phone',
      first_name: document.getElementById('first_name').value.trim(),
      last_name: document.getElementById('last_name').value.trim(),
      email: window.isSocialLogin ? window.socialData.email : document.getElementById('email').value.trim(),
      phone_number: window.isSocialLogin
        ? (document.getElementById('phoneSocial')?.value.trim() || '')
        : (document.getElementById('phone_number')?.value.trim() || ''),
      country_code: window.isSocialLogin
        ? document.getElementById('countryCodeSocial')?.value
        : document.getElementById('countryCode')?.value,
      date_of_birth: document.getElementById('dob').value,
      gender: document.getElementById('gender').value,
      countryISO: $('#countryCodeSocial, #countryCode option:selected').data('isocode') || ''
    };

    if (window.isSocialLogin && window.socialData.photoURL) {
      userData.profile_pic = window.socialData.photoURL;
    }

    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: userData.profile_pic || '',
      isVerify: false,
      isActive: true,
      fcmToken: '',
      countryCode: userData.country_code,
      countryISOCode: userData.countryISO,
      bio: ''
    }, { merge: true });

    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')}}", 'danger');
    }

  } catch (error) {
    console.error(error);
    showMessage("{{trans('lang.registration_error_occurred')}}", 'danger');
  } finally {
    toggleButtonLoading(button, false);
  }
}

document.addEventListener('DOMContentLoaded', () => {
  renderStep1();
  renderStep4();           
  showStep(1);

  if (!window.isSocialLogin) {
    initializeRecaptcha();
  }
  
  if (window.isSocialLogin) {
    const firstNameInput = document.getElementById('first_name');
    if (firstNameInput) firstNameInput.focus();
  }
   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("");
          }
      });
});
</script>
@endsection