<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Health Intake Form | Herbal Wellness</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .step-container { display: none; }
        .step-container.active { display: block; }
        .progress-bar { height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
        .progress-fill { height: 100%; background: linear-gradient(90deg, #0b3d2e, #2d7a5f); transition: width 0.3s; }
        .step-indicator { display: flex; gap: 8px; margin-bottom: 24px; }
        .step-dot { width: 40px; height: 40px; border-radius: 50%; background: #e5e7eb; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #6b7280; }
        .step-dot.active { background: #0b3d2e; color: white; }
        .step-dot.completed { background: #2d7a5f; color: white; }
    </style>
</head>
<body class="bg-gray-100">
    <div class="min-h-screen py-12 px-4">
        <div class="max-w-3xl mx-auto">
            <div class="bg-white rounded-2xl shadow-xl p-8">
                <div class="text-center mb-8">
                    <div class="w-16 h-16 bg-emerald-600 mx-auto rounded-2xl flex items-center justify-center mb-4">
                        <i class="fas fa-notes-medical text-white text-2xl"></i>
                    </div>
                    <h1 class="text-3xl font-bold text-gray-900 mb-2">Health Intake Form</h1>
                    <p class="text-gray-600">Please provide the following information to personalize your care</p>
                </div>

                <!-- Progress Indicator -->
                <div class="step-indicator">
                    <div class="step-dot active" id="dot-1">1</div>
                    <div class="step-dot" id="dot-2">2</div>
                    <div class="step-dot" id="dot-3">3</div>
                    <div class="step-dot" id="dot-4">4</div>
                    <div class="step-dot" id="dot-5">5</div>
                </div>

                <!-- Progress Bar -->
                <div class="progress-bar mb-8">
                    <div class="progress-fill" id="progress" style="width: 20%;"></div>
                </div>

                <form id="intake-form" method="POST" action="/atasteofafricanmarketplace/submit-intake.php">
                    <!-- Step 1: Personal Information -->
                    <div class="step-container active" data-step="1">
                        <h2 class="text-2xl font-bold text-gray-900 mb-6">Personal Information</h2>
                        <div class="space-y-4">
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">First Name *</label>
                                    <input type="text" name="first_name" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Last Name *</label>
                                    <input type="text" name="last_name" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500">
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Email *</label>
                                <input type="email" name="email" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Password *</label>
                                <input type="password" name="password" required minlength="6" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500">
                            </div>
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Date of Birth *</label>
                                    <input type="date" name="dob" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Phone *</label>
                                    <input type="tel" name="phone" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500">
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Address *</label>
                                <input type="text" name="address" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500">
                            </div>
                        </div>
                    </div>

                    <!-- Step 2: Medical History -->
                    <div class="step-container" data-step="2">
                        <h2 class="text-2xl font-bold text-gray-900 mb-6">Medical History</h2>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Current Health Conditions</label>
                                <textarea name="currentConditions" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500" placeholder="List any current health conditions..."></textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Allergies</label>
                                <textarea name="allergies" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500" placeholder="Food, medications, environmental..."></textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Current Medications</label>
                                <textarea name="medications" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500" placeholder="List all medications and supplements..."></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Step 3: Lifestyle -->
                    <div class="step-container" data-step="3">
                        <h2 class="text-2xl font-bold text-gray-900 mb-6">Lifestyle</h2>
                        <div class="space-y-4">
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Sleep Hours</label>
                                    <input type="number" name="sleepHours" min="0" max="24" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Exercise Level</label>
                                    <select name="exerciseLevel" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500">
                                        <option value="Low">Low</option>
                                        <option value="Moderate">Moderate</option>
                                        <option value="High">High</option>
                                    </select>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Stress Level (1-10)</label>
                                <input type="range" name="stressLevel" min="1" max="10" value="5" class="w-full" oninput="document.getElementById('stressValue').textContent = this.value">
                                <div class="text-center font-semibold text-emerald-600" id="stressValue">5</div>
                            </div>
                        </div>
                    </div>

                    <!-- Step 4: Wellness Goals -->
                    <div class="step-container" data-step="4">
                        <h2 class="text-2xl font-bold text-gray-900 mb-6">Wellness Goals</h2>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Main Health Concerns</label>
                                <textarea name="mainConcerns" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500" placeholder="What health issues would you like to address?" required></textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Wellness Goals</label>
                                <textarea name="wellnessGoals" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500" placeholder="What are your wellness goals?" required></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Step 5: Consent -->
                    <div class="step-container" data-step="5">
                        <h2 class="text-2xl font-bold text-gray-900 mb-6">Consent & Agreement</h2>
                        <div class="space-y-6">
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <div class="space-y-3">
                                    <label class="flex items-start">
                                        <input type="checkbox" name="consentToTreatment" required class="mt-1 mr-3">
                                        <span class="text-sm">I consent to receive herbal wellness recommendations</span>
                                    </label>
                                    <label class="flex items-start">
                                        <input type="checkbox" name="privacyAgreed" required class="mt-1 mr-3">
                                        <span class="text-sm">I agree to the Privacy Policy</span>
                                    </label>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Digital Signature</label>
                                <input type="text" name="digitalSignature" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500" placeholder="Type your full name">
                            </div>
                        </div>
                    </div>

                    <!-- Navigation -->
                    <div class="flex justify-between mt-8">
                        <button type="button" id="prevBtn" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600" style="display: none;">
                            Previous
                        </button>
                        <button type="button" id="nextBtn" class="bg-emerald-600 text-white px-4 py-2 rounded hover:bg-emerald-700 ml-auto">
                            Next
                        </button>
                        <button type="submit" id="submitBtn" class="bg-emerald-600 text-white px-4 py-2 rounded hover:bg-emerald-700 ml-auto" style="display: none;">
                            Submit
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        let currentStep = 1;
        const totalSteps = 5;

        function updateStep() {
            document.querySelectorAll('.step-container').forEach(el => el.classList.remove('active'));
            document.querySelector(`[data-step="${currentStep}"]`).classList.add('active');
            
            for (let i = 1; i <= totalSteps; i++) {
                const dot = document.getElementById(`dot-${i}`);
                if (i < currentStep) {
                    dot.classList.add('completed');
                    dot.classList.remove('active');
                } else if (i === currentStep) {
                    dot.classList.add('active');
                    dot.classList.remove('completed');
                } else {
                    dot.classList.remove('active', 'completed');
                }
            }
            
            const progress = (currentStep / totalSteps) * 100;
            document.getElementById('progress').style.width = progress + '%';
            
            document.getElementById('prevBtn').style.display = currentStep === 1 ? 'none' : 'block';
            document.getElementById('nextBtn').style.display = currentStep === totalSteps ? 'none' : 'block';
            document.getElementById('submitBtn').style.display = currentStep === totalSteps ? 'block' : 'none';
        }

        document.getElementById('nextBtn').addEventListener('click', () => {
            if (currentStep < totalSteps) {
                currentStep++;
                updateStep();
            }
        });

        document.getElementById('prevBtn').addEventListener('click', () => {
            if (currentStep > 1) {
                currentStep--;
                updateStep();
            }
        });

        // Handle form submission
        document.getElementById('intake-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const data = {};
            
            // Convert FormData to object
            for (let [key, value] of formData.entries()) {
                data[key] = value;
            }
            
            // Submit to server
            fetch('/atasteofafricanmarketplace/submit-intake.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ answers: data })
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    alert('Form submitted successfully!');
                    window.location.href = result.redirect || '/atasteofafricanmarketplace/dashboard/user/index.php';
                } else {
                    alert('Error: ' + result.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Network error occurred');
            });
        });

        updateStep();
    </script>
</body>
</html>