<?php
$page_title = 'Onboarding - Herbal Wellness';
$page_description = 'Client onboarding to personalize care.';
$page_content = function () { ?>

<section class="max-w-3xl mx-auto my-16 p-8 bg-white rounded-2xl shadow-lg">
  <h1 class="serif text-2xl font-bold mb-2">Client Onboarding</h1>
  <p class="text-sm text-gray-500 mb-6">Please provide the following information to personalize your care.</p>

  <form id="onboard-form" class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="flex flex-col gap-2">
      <label for="first_name" class="text-sm font-semibold">First Name *</label>
      <input id="first_name" name="first_name" required placeholder="Enter your first name" class="px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-200" />
    </div>

    <div class="flex flex-col gap-2">
      <label for="last_name" class="text-sm font-semibold">Last Name *</label>
      <input id="last_name" name="last_name" required placeholder="Enter your last name" class="px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-200" />
    </div>

    <div class="flex flex-col gap-2 md:col-span-2">
      <label for="email" class="text-sm font-semibold">Email Address *</label>
      <input id="email" name="email" type="email" required placeholder="Enter your email address" class="px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-200" />
    </div>

    <div class="flex flex-col gap-2">
      <label for="goal" class="text-sm font-semibold">Primary wellness goal</label>
      <input id="goal" name="goal" placeholder="e.g., stress relief, sleep improvement, digestion" class="px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-200" />
    </div>

    <div class="flex flex-col gap-2">
      <label for="allergies" class="text-sm font-semibold">Known allergies</label>
      <input id="allergies" name="allergies" placeholder="e.g., pollen, nuts" class="px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-200" />
    </div>

    <div class="flex flex-col gap-2">
      <label for="meds" class="text-sm font-semibold">Current medications</label>
      <textarea id="meds" name="meds" rows="3" placeholder="List medications or supplements" class="px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-200"></textarea>
    </div>

    <div class="flex flex-col gap-2">
      <label for="consent" class="text-sm font-semibold">Consent *</label>
      <select id="consent" name="consent" required class="px-4 py-3 border rounded-lg">
        <option value="accepted">I consent to privacy and data use</option>
        <option value="declined">I do not consent</option>
      </select>
    </div>

    <div class="md:col-span-2 flex items-center gap-4 mt-6">
      <button type="submit" class="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-emerald-600 text-white font-bold hover:bg-emerald-700 transition-colors">
        <i class="fas fa-check"></i>
        Submit
      </button>
      <span id="status" class="text-sm text-gray-500"></span>
    </div>
  </form>
</section>

<script>
  const API_BASE = '/atasteofafricanmarketplace/api';
  const statusEl = document.getElementById('status');
  
  document.getElementById('onboard-form').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const answers = {
      first_name: document.getElementById('first_name').value.trim(),
      last_name: document.getElementById('last_name').value.trim(),
      email: document.getElementById('email').value.trim(),
      goal: document.getElementById('goal').value.trim(),
      allergies: document.getElementById('allergies').value.trim(),
      medications: document.getElementById('meds').value.trim(),
      consent: document.getElementById('consent').value
    };
    
    if (!answers.first_name || !answers.last_name || !answers.email) {
      statusEl.textContent = 'Name and email are required.';
      return;
    }
    
    if (answers.consent !== 'accepted') { 
      statusEl.textContent = 'Consent must be accepted to proceed.'; 
      return; 
    }
    
    statusEl.textContent = 'Submitting...';
    
    try {
      const response = await fetch('/atasteofafricanmarketplace/submit-intake.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ answers: answers })
      });
      
      const result = await response.json();
      
      if (response.ok && result.success) {
        statusEl.textContent = 'Onboarding completed. Redirecting...';
        setTimeout(() => { 
          window.location.href = '/atasteofafricanmarketplace/dashboard/user/index.php'; 
        }, 800);
      } else {
        statusEl.textContent = result.message || 'Submission failed';
      }
    } catch(e) {
      statusEl.textContent = 'Network error. Please try again.';
    }
  });
</script>

<?php };
include __DIR__ . '/partials/layout.php';
