Embed

<div style="font-family: 'Segoe UI', Tahoma, Geneva; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 40px 20px; margin: -40px -20px;">
  <div style="max-width: 1200px; margin: 0 auto;">
    
    <div style="text-align: center; color: white; margin-bottom: 50px;">
      <h1 style="font-size: 3rem; font-weight: 700; margin-bottom: 10px;">Global Visa Services</h1>
      <p style="font-size: 1.2rem; opacity: 0.95;">Search and apply instantly</p>
    </div>

    
    <div style="background: white; padding: 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); margin-bottom: 40px;">
      <input type="text" id="countrySearch" placeholder="Search destination..." style="width: 100%; padding: 12px 20px; border: 2px solid #dee2e6; border-radius: 8px; font-size: 1rem; margin-bottom: 20px;"/>
      <div id="countryGrid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 15px;">
        <p style="grid-column: 1/-1; text-align: center; color: #666;">Loading countries...</p>
      </div>
    </div>
  </div>

  
  <div id="modalOverlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 999;"></div>
  <div id="modalContent" style="position: fixed; right: -100%; top: 0; width: 45%; height: 100vh; background: white; box-shadow: -5px 0 20px rgba(0,0,0,0.2); transition: right 0.4s ease; z-index: 1000; overflow-y: auto; padding: 40px 30px;">
    <button id="closeModal" style="position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 2rem; cursor: pointer;">&times;</button>
    <div id="stepContainer" style="margin-top: 50px;"></div>
  </div>
</div>

<script>
  const SUPABASE_URL = 'https://eqgoctdgipwdgkencsae.supabase.co';
  const SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImVxZ29jdGRnaXB3ZGdrZW5jc2FlIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzAzNjc2MjMsImV4cCI6MjA0NTk0MzYyM30.JN6ZPHJNHx32gPKQllXKPsAFJKvLYLFVVqZDhk5aA_E';

  let currentStep = 1;
  let selectedVisa = null;
  let formData = {};
  let uploadedFiles = {};

  // Fetch helper function
  async function fetchSupabase(table, query = '') {
    try {
      const url = `${SUPABASE_URL}/rest/v1/${table}?${query}`;
      const response = await fetch(url, {
        headers: {
          'apikey': SUPABASE_KEY,
          'Authorization': `Bearer ${SUPABASE_KEY}`,
          'Content-Type': 'application/json'
        }
      });
      if (!response.ok) throw new Error('Failed to fetch');
      return await response.json();
    } catch (error) {
      console.error('Fetch error:', error);
      return [];
    }
  }

  // Load countries
  async function loadCountries() {
    const countries = await fetchSupabase('visa_grid', 'limit=50');
    const grid = document.getElementById('countryGrid');
    
    if (countries.length === 0) {
      grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: red;">Error loading countries</p>';
      return;
    }

    grid.innerHTML = countries.map(country => `
      <div onclick="selectCountry('${country.country}')" style="background: white; padding: 15px; border-radius: 10px; cursor: pointer; text-align: center; border: 2px solid #dee2e6; transition: all 0.3s; border-radius: 10px;">
        <div style="font-size: 2.5rem; margin-bottom: 10px;">${country.flag_emoji || '🌍'}</div>
        <div style="font-weight: 700; color: #1a1a1a; margin-bottom: 5px; font-size: 0.95rem;">${country.country}</div>
        <div style="font-size: 0.8rem; color: #2180B0; font-weight: 600;">${country.visa_type || 'Info Available'}</div>
      </div>
    `).join('');
  }

  async function selectCountry(country) {
    const visas = await fetchSupabase('visa_options', `country=eq.${country}`);
    
    if (visas.length === 0) {
      alert('No visa options available for ' + country);
      return;
    }

    selectedVisa = country;
    formData = {};
    uploadedFiles = {};
    currentStep = 1;

    document.getElementById('modalOverlay').style.display = 'block';
    document.getElementById('modalContent').style.right = '0';
    renderStep1(country, visas);
  }

  function renderStep1(country, visas) {
    const container = document.getElementById('stepContainer');
    container.innerHTML = `
      <h2 style="margin-bottom: 20px; color: #1a1a1a;">Select Visa Type</h2>
      <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 4px solid #2180B0;">
        <h3 style="color: #2180B0; margin-bottom: 5px;">${country}</h3>
        <p style="color: #666; font-size: 0.9rem;">Choose the visa type that suits your need</p>
      </div>
      
      <div id="visaOptions" style="display: grid; gap: 10px; margin-bottom: 20px;">
        ${visas.map(visa => `
          <div onclick="selectVisaType('${visa.id}', '${visa.visa_type.replace(/'/g, "\\'")}')" style="border: 2px solid #dee2e6; padding: 15px; border-radius: 8px; cursor: pointer; transition: all 0.3s;">
            <div style="display: flex; justify-content: space-between; align-items: center;">
              <div>
                <div style="font-weight: 700; color: #1a1a1a;">${visa.visa_type}</div>
                <div style="font-size: 0.85rem; color: #666; margin-top: 5px;">⏱️ ${visa.processing_time || 'N/A'}</div>
              </div>
              <div style="font-weight: 700; font-size: 1.3rem; color: #2180B0;">₹${visa.price}</div>
            </div>
          </div>
        `).join('')}
      </div>

      <div style="display: flex; gap: 10px;">
        <button onclick="closeModal()" style="flex: 1; padding: 12px; background: #f8f9fa; border: 2px solid #dee2e6; border-radius: 8px; cursor: pointer; font-weight: 600;">Cancel</button>
        <button onclick="nextStep()" style="flex: 1; padding: 12px; background: #2180B0; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;">Next Step</button>
      </div>
    `;
  }

  function selectVisaType(visaId, visaType) {
    formData.visaType = visaType;
    formData.visaId = visaId;
    document.querySelectorAll('#visaOptions > div').forEach(el => el.style.borderColor = '#dee2e6');
    event.currentTarget.style.borderColor = '#2180B0';
    event.currentTarget.style.backgroundColor = 'rgba(33, 128, 176, 0.05)';
  }

  async function nextStep() {
    if (currentStep === 1) {
      if (!formData.visaType) {
        alert('Please select a visa type');
        return;
      }
      currentStep = 2;
      renderStep2();
    } else if (currentStep === 2) {
      if (!formData.name || !formData.email || !formData.phone) {
        alert('Please fill all personal information');
        return;
      }
      currentStep = 3;
      renderStep3();
    } else if (currentStep === 3) {
      currentStep = 4;
      renderStep4();
    } else if (currentStep === 4) {
      submitApplication();
    }
  }

  function renderStep2() {
    const container = document.getElementById('stepContainer');
    container.innerHTML = `
      <h2 style="margin-bottom: 20px; color: #1a1a1a;">Personal Information</h2>
      
      <div style="display: grid; gap: 15px; margin-bottom: 20px;">
        <div>
          <label style="display: block; font-weight: 600; margin-bottom: 8px;">Full Name</label>
          <input type="text" id="name" placeholder="Enter your full name" style="width: 100%; padding: 10px; border: 2px solid #dee2e6; border-radius: 8px;" onchange="formData.name = this.value"/>
        </div>
        <div>
          <label style="display: block; font-weight: 600; margin-bottom: 8px;">Email</label>
          <input type="email" id="email" placeholder="Enter your email" style="width: 100%; padding: 10px; border: 2px solid #dee2e6; border-radius: 8px;" onchange="formData.email = this.value"/>
        </div>
        <div>
          <label style="display: block; font-weight: 600; margin-bottom: 8px;">Phone</label>
          <input type="tel" id="phone" placeholder="Enter your phone number" style="width: 100%; padding: 10px; border: 2px solid #dee2e6; border-radius: 8px;" onchange="formData.phone = this.value"/>
        </div>
        <div>
          <label style="display: block; font-weight: 600; margin-bottom: 8px;">Date of Birth</label>
          <input type="date" id="dob" style="width: 100%; padding: 10px; border: 2px solid #dee2e6; border-radius: 8px;" onchange="formData.dob = this.value"/>
        </div>
      </div>

      <div style="display: flex; gap: 10px;">
        <button onclick="currentStep=1; renderStep1(selectedVisa, [])" style="flex: 1; padding: 12px; background: #f8f9fa; border: 2px solid #dee2e6; border-radius: 8px; cursor: pointer; font-weight: 600;">Back</button>
        <button onclick="nextStep()" style="flex: 1; padding: 12px; background: #2180B0; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;">Next Step</button>
      </div>
    `;
  }

  async function renderStep3() {
    const docs = await fetchSupabase('visa_documents', `country=eq.${selectedVisa}&visa_type=eq.${formData.visaType}`);

    const container = document.getElementById('stepContainer');
    container.innerHTML = `
      <h2 style="margin-bottom: 20px; color: #1a1a1a;">Upload Documents</h2>
      <p style="color: #666; margin-bottom: 20px; font-size: 0.95rem;">Upload required documents for your visa application</p>
      
      <div id="documentsList" style="display: grid; gap: 15px; margin-bottom: 20px;">
        ${docs && docs.length > 0 ? docs.map(doc => `
          <div>
            <label style="display: block; font-weight: 600; margin-bottom: 8px;">${doc.document_name}</label>
            <div onclick="document.getElementById('file-${doc.id}').click()" style="border: 2px dashed #dee2e6; padding: 20px; text-align: center; border-radius: 8px; cursor: pointer; background: #f8f9fa;">
              <div style="font-size: 1.5rem; margin-bottom: 8px;">📄</div>
              <div style="color: #666; font-size: 0.9rem;">Click to upload</div>
              <input type="file" id="file-${doc.id}" style="display: none;" onchange="handleFileUpload('${doc.id}', '${doc.document_name}', this)"/>
            </div>
            <div id="status-${doc.id}" style="display: none; margin-top: 8px; padding: 8px; background: #d4edda; color: #155724; border-radius: 4px; font-size: 0.9rem;">✓ Uploaded</div>
          </div>
        `).join('') : '<p style="color: #999;">No documents required for this visa</p>'}
      </div>

      <div style="display: flex; gap: 10px;">
        <button onclick="currentStep=2; renderStep2()" style="flex: 1; padding: 12px; background: #f8f9fa; border: 2px solid #dee2e6; border-radius: 8px; cursor: pointer; font-weight: 600;">Back</button>
        <button onclick="nextStep()" style="flex: 1; padding: 12px; background: #2180B0; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;">Review</button>
      </div>
    `;
  }
  function handleFileUpload(docId, docName, input) {
    const file = input.files[0];
    if (!file) return;
    
    document.getElementById('status-' + docId).style.display = 'block';
    uploadedFiles[docId] = docName;
  }

  async function renderStep4() {
    const container = document.getElementById('stepContainer');
    container.innerHTML = `
      <h2 style="margin-bottom: 20px; color: #1a1a1a;">Review Your Application</h2>
      
      <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 4px solid #28a745;">
        <p style="color: #155724; font-weight: 600;">✓ All information collected successfully</p>
      </div>

      <div style="margin-bottom: 20px;">
        <h4 style="color: #1a1a1a; margin-bottom: 10px; font-weight: 700;">Destination</h4>
        <p style="background: white; padding: 10px; border-radius: 6px; margin: 5px 0;">${selectedVisa}</p>
      </div>

      <div style="margin-bottom: 20px;">
        <h4 style="color: #1a1a1a; margin-bottom: 10px; font-weight: 700;">Visa Type</h4>
        <p style="background: white; padding: 10px; border-radius: 6px; margin: 5px 0;">${formData.visaType}</p>
      </div>

      <div style="margin-bottom: 20px;">
        <h4 style="color: #1a1a1a; margin-bottom: 10px; font-weight: 700;">Your Information</h4>
        <div style="background: white; padding: 15px; border-radius: 6px;">
          <p style="margin: 5px 0;"><strong>Name:</strong> ${formData.name}</p>
          <p style="margin: 5px 0;"><strong>Email:</strong> ${formData.email}</p>
          <p style="margin: 5px 0;"><strong>Phone:</strong> ${formData.phone}</p>
          <p style="margin: 5px 0;"><strong>DOB:</strong> ${formData.dob || 'Not provided'}</p>
        </div>
      </div>

      <div style="margin-bottom: 20px;">
        <h4 style="color: #1a1a1a; margin-bottom: 10px; font-weight: 700;">Documents Uploaded</h4>
        <div style="background: white; padding: 15px; border-radius: 6px;">
          ${Object.values(uploadedFiles).length > 0 ? Object.values(uploadedFiles).map(doc => `<p style="margin: 5px 0;">✓ ${doc}</p>`).join('') : '<p style="color: #999;">No documents uploaded</p>'}
        </div>
      </div>

      <div style="display: flex; gap: 10px;">
        <button onclick="currentStep=3; renderStep3()" style="flex: 1; padding: 12px; background: #f8f9fa; border: 2px solid #dee2e6; border-radius: 8px; cursor: pointer; font-weight: 600;">Back</button>
        <button onclick="submitApplication()" style="flex: 1; padding: 12px; background: #28a745; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;">Submit Application</button>
      </div>
    `;
  }

  async function submitApplication() {
    try {
      const btn = document.querySelector('button[onclick="submitApplication()"]');
      btn.disabled = true;
      btn.textContent = 'Submitting...';

      const response = await fetch(`${SUPABASE_URL}/rest/v1/visa_applications`, {
        method: 'POST',
        headers: {
          'apikey': SUPABASE_KEY,
          'Authorization': `Bearer ${SUPABASE_KEY}`,
          'Content-Type': 'application/json',
          'Prefer': 'return=representation'
        },
        body: JSON.stringify({
          country: selectedVisa,
          visa_type: formData.visaType,
          passenger_name: formData.name,
          passenger_email: formData.email,
          passenger_phone: formData.phone,
          passenger_dob: formData.dob,
          documents_uploaded: JSON.stringify(uploadedFiles),
          application_status: 'pending'
        })
      });

      if (!response.ok) throw new Error('Submission failed');
      const data = await response.json();

      const container = document.getElementById('stepContainer');
      container.innerHTML = `
        <div style="text-align: center; padding: 40px 20px;">
          <div style="font-size: 3rem; margin-bottom: 20px;">✅</div>
          <h2 style="color: #28a745; margin-bottom: 10px;">Application Submitted!</h2>
          <p style="color: #666; margin-bottom: 20px; font-size: 1.1rem;">Your visa application has been successfully submitted.</p>
          
          <div style="background: #d4edda; border: 1px solid #c3e6cb; padding: 20px; border-radius: 8px; margin-bottom: 20px; text-align: left;">
            <h4 style="color: #155724; margin-bottom: 10px;">Application Details</h4>
            <p style="margin: 8px 0; color: #155724;"><strong>Application ID:</strong> ${data[0].id}</p>
            <p style="margin: 8px 0; color: #155724;"><strong>Destination:</strong> ${selectedVisa}</p>
            <p style="margin: 8px 0; color: #155724;"><strong>Email:</strong> ${formData.email}</p>
          </div>

          <div style="background: #fff3cd; border: 1px solid #ffeaa7; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: left;">
            <p style="color: #856404; margin: 0;"><strong>📧 Next Steps:</strong></p>
            <p style="color: #856404; margin: 8px 0; font-size: 0.95rem;">You will receive a payment link within 15 minutes at ${formData.email}</p>
            <p style="color: #856404; margin: 8px 0; font-size: 0.95rem;">Complete the payment to activate your visa application process.</p>
          </div>

          <button onclick="closeModal()" style="padding: 12px 30px; background: #2180B0; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 1rem;">Close</button>
        </div>
      `;
    } catch (error) {
      console.error('Submission error:', error);
      alert('Error submitting application: ' + error.message);
      document.querySelector('button[onclick="submitApplication()"]').disabled = false;
      document.querySelector('button[onclick="submitApplication()"]').textContent = 'Submit Application';
    }
  }

  function closeModal() {
    document.getElementById('modalOverlay').style.display = 'none';
    document.getElementById('modalContent').style.right = '-100%';
    document.getElementById('stepContainer').innerHTML = '';
    currentStep = 1;
    formData = {};
    uploadedFiles = {};
  }

  // Initialize on page load
  document.addEventListener('DOMContentLoaded', loadCountries);
  
  // Close modal when clicking overlay
  document.getElementById('modalOverlay').addEventListener('click', closeModal);
  document.getElementById('closeModal').addEventListener('click', closeModal);
</script>

GoBaby Travel

GoBabyTravel is a next-generation global travel platform that transforms how people discover, plan, and experience journeys worldwide. We offer comprehensive travel solutions including international and domestic flight bookings, luxury and budget hotel accommodations, customized honeymoon packages, property stays and homestays, intercity bus and train bookings, complete visa processing services, and exclusive travel deals.

Our Unique Selling Propositions:
- One-stop travel ecosystem covering every aspect of a journey from visa to arrival
- AI-powered personalized itinerary planning that adapts to traveler preferences
- Direct integration with 200+ global suppliers for best pricing and availability
- Loyalty rewards program with cashback on every booking
- 24/7 multilingual customer support across all time zones
- Exclusive partnerships with local guides and authentic experiences unavailable elsewhere
- Carbon offset tracking and sustainable travel options
- Travel buddy matching for solo travelers
- Real-time trip modifications and dynamic rebooking
- Immersive pre-trip virtual destination previews

Our Core Values:
Trust & Transparency - No hidden fees, clear pricing, honest recommendations, and price-match guarantees
Customer Obsession - Every decision is made with traveler happiness and convenience as priority
Cultural Respect - We celebrate diversity and promote responsible, respectful tourism
Innovation - Continuously adopting cutting-edge technology to simplify travel
Accessibility - Making dream destinations reachable for every budget and travel style
Sustainability - Committed to reducing travel's environmental impact through conscious choices
Community - Building a global family of travelers who share experiences and support each other

Our Ethics:
We operate with complete integrity, protecting customer data with bank-level security. We partner only with verified, licensed service providers. We believe travel should enrich both travelers and local communities, so we ensure fair wages and ethical practices throughout our supply chain. We never engage in deceptive marketing or pressure tactics. We empower travelers with complete information to make informed decisions. We stand behind every booking with full support and accountability.

Brand Personality: Adventurous yet reliable, sophisticated yet approachable, globally-minded yet personally attentive, innovative yet trustworthy. We speak to travelers who seek authentic experiences, value seamless service, and want a partner who cares about their journey as much as they do.


Global Visa Services

Sign In

Sign Up