templates/index.html

{% extends "layout.html" %}

{% block title %}JanSahayak - Your Government Benefits Assistant{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="hero">
    <div class="container">
        <div class="hero-content">
            <div class="hero-badge">
                <i class="fas fa-sparkles"></i> AI-Powered Analysis
            </div>
            <h1 class="hero-title">
                Discover Your <span class="gradient-text">Government Benefits</span>
            </h1>
            <p class="hero-subtitle">
                Get personalized recommendations for government schemes, competitive exams, 
                and calculate benefits you might have missed - all powered by advanced AI agents.
            </p>
            <div class="hero-stats">
                <div class="stat-card">
                    <i class="fas fa-users"></i>
                    <div>
                        <h3>7</h3>
                        <p>AI Agents</p>
                    </div>
                </div>
                <div class="stat-card">
                    <i class="fas fa-file-alt"></i>
                    <div>
                        <h3>1000+</h3>
                        <p>Schemes</p>
                    </div>
                </div>
                <div class="stat-card">
                    <i class="fas fa-graduation-cap"></i>
                    <div>
                        <h3>100+</h3>
                        <p>Exams</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Input Section -->
<section class="input-section">
    <div class="container">
        <div class="input-card">
            <div class="card-header">
                <h2><i class="fas fa-user-edit"></i> Tell Us About Yourself</h2>
                <p>Fill out the form step by step to get personalized recommendations</p>
            </div>
            
            <!-- Step Indicator -->
            <div class="step-indicator">
                <div class="step active" data-step="1">
                    <div class="step-circle">1</div>
                    <div class="step-label">Personal Info</div>
                </div>
                <div class="step-line"></div>
                <div class="step" data-step="2">
                    <div class="step-circle">2</div>
                    <div class="step-label">Background</div>
                </div>
                <div class="step-line"></div>
                <div class="step" data-step="3">
                    <div class="step-circle">3</div>
                    <div class="step-label">Your Goals</div>
                </div>
            </div>
            
            <form id="analysisForm">
                <!-- Step 1: Personal Information -->
                <div class="form-step active" data-step="1">
                    <h3 class="step-title"><i class="fas fa-user"></i> Personal Information</h3>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="name">
                                Full Name <span class="required">*</span>
                            </label>
                            <input 
                                type="text" 
                                id="name" 
                                name="name" 
                                placeholder="Enter your full name"
                                required
                            >
                        </div>
                        
                        <div class="form-group">
                            <label for="age">
                                Age <span class="required">*</span>
                            </label>
                            <input 
                                type="number" 
                                id="age" 
                                name="age" 
                                placeholder="Your age"
                                min="15"
                                max="100"
                                required
                            >
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="gender">
                                Gender <span class="required">*</span>
                            </label>
                            <select id="gender" name="gender" required>
                                <option value="">Select gender</option>
                                <option value="male">Male</option>
                                <option value="female">Female</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="state">
                                State <span class="required">*</span>
                            </label>
                            <select id="state" name="state" required>
                                <option value="">Select your state</option>
                                <option value="Andhra Pradesh">Andhra Pradesh</option>
                                <option value="Arunachal Pradesh">Arunachal Pradesh</option>
                                <option value="Assam">Assam</option>
                                <option value="Bihar">Bihar</option>
                                <option value="Chhattisgarh">Chhattisgarh</option>
                                <option value="Goa">Goa</option>
                                <option value="Gujarat">Gujarat</option>
                                <option value="Haryana">Haryana</option>
                                <option value="Himachal Pradesh">Himachal Pradesh</option>
                                <option value="Jharkhand">Jharkhand</option>
                                <option value="Karnataka">Karnataka</option>
                                <option value="Kerala">Kerala</option>
                                <option value="Madhya Pradesh">Madhya Pradesh</option>
                                <option value="Maharashtra">Maharashtra</option>
                                <option value="Manipur">Manipur</option>
                                <option value="Meghalaya">Meghalaya</option>
                                <option value="Mizoram">Mizoram</option>
                                <option value="Nagaland">Nagaland</option>
                                <option value="Odisha">Odisha</option>
                                <option value="Punjab">Punjab</option>
                                <option value="Rajasthan">Rajasthan</option>
                                <option value="Sikkim">Sikkim</option>
                                <option value="Tamil Nadu">Tamil Nadu</option>
                                <option value="Telangana">Telangana</option>
                                <option value="Tripura">Tripura</option>
                                <option value="Uttar Pradesh">Uttar Pradesh</option>
                                <option value="Uttarakhand">Uttarakhand</option>
                                <option value="West Bengal">West Bengal</option>
                                <option value="Delhi">Delhi</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- Step 2: Background Information -->
                <div class="form-step" data-step="2">
                    <h3 class="step-title"><i class="fas fa-briefcase"></i> Background Information</h3>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="education">
                                Education Level <span class="required">*</span>
                            </label>
                            <select id="education" name="education" required>
                                <option value="">Select education level</option>
                                <option value="Below 10th">Below 10th</option>
                                <option value="10th Pass">10th Pass</option>
                                <option value="12th Pass">12th Pass</option>
                                <option value="Diploma">Diploma</option>
                                <option value="Graduate (Bachelor's)">Graduate (Bachelor's)</option>
                                <option value="Post-Graduate (Master's)">Post-Graduate (Master's)</option>
                                <option value="Doctorate (PhD)">Doctorate (PhD)</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="employment">
                                Employment Status <span class="required">*</span>
                            </label>
                            <select id="employment" name="employment" required>
                                <option value="">Select employment status</option>
                                <option value="Student">Student</option>
                                <option value="Unemployed">Unemployed</option>
                                <option value="Employed (Private)">Employed (Private)</option>
                                <option value="Employed (Government)">Employed (Government)</option>
                                <option value="Self-Employed">Self-Employed</option>
                                <option value="Farmer">Farmer</option>
                                <option value="Business Owner">Business Owner</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="income">
                                Annual Family Income <span class="required">*</span>
                            </label>
                            <select id="income" name="income" required>
                                <option value="">Select income range</option>
                                <option value="Below 1 Lakh">Below ₹1 Lakh</option>
                                <option value="1-2.5 Lakhs">₹1-2.5 Lakhs</option>
                                <option value="2.5-5 Lakhs">₹2.5-5 Lakhs</option>
                                <option value="5-8 Lakhs">₹5-8 Lakhs</option>
                                <option value="8-10 Lakhs">₹8-10 Lakhs</option>
                                <option value="Above 10 Lakhs">Above ₹10 Lakhs</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="category">
                                Category <span class="required">*</span>
                            </label>
                            <select id="category" name="category" required>
                                <option value="">Select category</option>
                                <option value="General">General</option>
                                <option value="OBC">OBC</option>
                                <option value="SC">SC</option>
                                <option value="ST">ST</option>
                                <option value="EWS">EWS</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="specialization">
                            Field of Study/Work (Optional)
                        </label>
                        <input 
                            type="text" 
                            id="specialization" 
                            name="specialization" 
                            placeholder="e.g., Engineering, Agriculture, Commerce, Arts"
                        >
                    </div>
                </div>
                
                <!-- Step 3: Goals and Interests -->
                <div class="form-step" data-step="3">
                    <h3 class="step-title"><i class="fas fa-bullseye"></i> What Are You Looking For?</h3>
                    
                    <div class="form-group">
                        <label>
                            Select Your Interests <span class="required">*</span>
                        </label>
                        <div class="checkbox-group">
                            <label class="checkbox-label">
                                <input type="checkbox" name="interest" value="schemes" checked>
                                <span><i class="fas fa-handshake"></i> Government Schemes & Benefits</span>
                            </label>
                            <label class="checkbox-label">
                                <input type="checkbox" name="interest" value="exams">
                                <span><i class="fas fa-graduation-cap"></i> Competitive Exams</span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="career_interest">
                            Career/Sector Interest (Optional)
                        </label>
                        <input 
                            type="text" 
                            id="career_interest" 
                            name="career_interest" 
                            placeholder="e.g., Banking, Railways, Agriculture, IT, Teaching"
                        >
                    </div>
                    
                    <div class="form-group">
                        <label for="additional_info">
                            Additional Information (Optional)
                        </label>
                        <textarea 
                            id="additional_info" 
                            name="additional_info" 
                            rows="4" 
                            placeholder="Any other details you'd like to share - disabilities, specific requirements, land ownership, etc."
                        ></textarea>
                    </div>
                    
                    <div class="info-box">
                        <i class="fas fa-info-circle"></i>
                        <div>
                            <strong>Privacy Note:</strong> Your information is used only for generating recommendations and is not stored permanently.
                        </div>
                    </div>
                </div>
                
                <!-- Navigation Buttons -->
                <div class="form-navigation">
                    <button type="button" class="btn-secondary" id="prevBtn" style="display: none;">
                        <i class="fas fa-arrow-left"></i> Previous
                    </button>
                    <button type="button" class="btn-primary" id="nextBtn">
                        Next <i class="fas fa-arrow-right"></i>
                    </button>
                    <button type="submit" class="btn-primary" id="submitBtn" style="display: none;">
                        <i class="fas fa-rocket"></i> Analyze My Profile
                    </button>
                </div>
            </form>

            <!-- Loading State -->
            <div id="loadingState" class="loading-state" style="display: none;">
                <div class="loading-spinner"></div>
                <h3>Analyzing Your Profile...</h3>
                <p>Our AI agents are working hard to find the best recommendations for you</p>
                
                <div class="agent-progress">
                    <div class="agent-step">
                        <div class="step-icon"><i class="fas fa-user"></i></div>
                        <div class="step-info">
                            <h4>Profiling Agent</h4>
                            <p>Extracting your information...</p>
                        </div>
                    </div>
                    <div class="agent-step">
                        <div class="step-icon"><i class="fas fa-building"></i></div>
                        <div class="step-info">
                            <h4>Scheme Agent</h4>
                            <p>Finding eligible schemes...</p>
                        </div>
                    </div>
                    <div class="agent-step">
                        <div class="step-icon"><i class="fas fa-graduation-cap"></i></div>
                        <div class="step-info">
                            <h4>Exam Agent</h4>
                            <p>Recommending exams...</p>
                        </div>
                    </div>
                    <div class="agent-step">
                        <div class="step-icon"><i class="fas fa-calculator"></i></div>
                        <div class="step-info">
                            <h4>Benefit Calculator</h4>
                            <p>Calculating missed benefits...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="features-section">
    <div class="container">
        <h2 class="section-title">How It Works</h2>
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-user-check"></i>
                </div>
                <h3>1. Profile Analysis</h3>
                <p>AI extracts and structures your information for accurate matching</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-search"></i>
                </div>
                <h3>2. Smart Search</h3>
                <p>RAG + Live web search finds the most relevant schemes and exams</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-trophy"></i>
                </div>
                <h3>3. Personalized Results</h3>
                <p>Get tailored recommendations with eligibility details and application steps</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-chart-line"></i>
                </div>
                <h3>4. Benefit Analysis</h3>
                <p>Discover what you missed and what you can claim now</p>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
// Multi-step form handling
let currentStep = 1;
const totalSteps = 3;

// Step navigation
function showStep(step) {
    // Hide all steps
    document.querySelectorAll('.form-step').forEach(stepEl => {
        stepEl.classList.remove('active');
    });
    
    // Show current step
    document.querySelector(`.form-step[data-step="${step}"]`).classList.add('active');
    
    // Update step indicators
    document.querySelectorAll('.step').forEach((stepEl, index) => {
        if (index + 1 < step) {
            stepEl.classList.add('completed');
            stepEl.classList.remove('active');
        } else if (index + 1 === step) {
            stepEl.classList.add('active');
            stepEl.classList.remove('completed');
        } else {
            stepEl.classList.remove('active', 'completed');
        }
    });
    
    // Update buttons
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const submitBtn = document.getElementById('submitBtn');
    
    if (step === 1) {
        prevBtn.style.display = 'none';
    } else {
        prevBtn.style.display = 'inline-block';
    }
    
    if (step === totalSteps) {
        nextBtn.style.display = 'none';
        submitBtn.style.display = 'inline-block';
    } else {
        nextBtn.style.display = 'inline-block';
        submitBtn.style.display = 'none';
    }
    
    currentStep = step;
}

// Validate current step
function validateStep(step) {
    const stepEl = document.querySelector(`.form-step[data-step="${step}"]`);
    const requiredInputs = stepEl.querySelectorAll('[required]');
    
    for (let input of requiredInputs) {
        if (!input.value.trim()) {
            input.focus();
            input.classList.add('error');
            setTimeout(() => input.classList.remove('error'), 2000);
            return false;
        }
    }
    
    // Step 3: Check if at least one interest is selected
    if (step === 3) {
        const interests = document.querySelectorAll('input[name="interest"]:checked');
        if (interests.length === 0) {
            alert('Please select at least one interest (Schemes or Exams)');
            return false;
        }
    }
    
    return true;
}

// Next button
document.getElementById('nextBtn').addEventListener('click', function() {
    if (validateStep(currentStep)) {
        showStep(currentStep + 1);
    }
});

// Previous button
document.getElementById('prevBtn').addEventListener('click', function() {
    showStep(currentStep - 1);
});

// Form submission
document.getElementById('analysisForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    if (!validateStep(currentStep)) {
        return;
    }
    
    // Collect all form data
    const formData = {
        name: document.getElementById('name').value.trim(),
        age: document.getElementById('age').value,
        gender: document.getElementById('gender').value,
        state: document.getElementById('state').value,
        education: document.getElementById('education').value,
        employment: document.getElementById('employment').value,
        income: document.getElementById('income').value,
        category: document.getElementById('category').value,
        specialization: document.getElementById('specialization').value.trim(),
        career_interest: document.getElementById('career_interest').value.trim(),
        additional_info: document.getElementById('additional_info').value.trim()
    };
    
    // Get selected interests
    const interests = [];
    document.querySelectorAll('input[name="interest"]:checked').forEach(cb => {
        interests.push(cb.value);
    });
    formData.interests = interests;
    
    // Create natural language text for the workflow
    let userInput = `My name is ${formData.name}. I am a ${formData.age}-year-old ${formData.gender} from ${formData.state}. `;
    userInput += `My family's annual income is ${formData.income}. I belong to the ${formData.category} category. `;
    userInput += `My education level is ${formData.education}. `;
    userInput += `I am currently ${formData.employment}. `;
    
    if (formData.specialization) {
        userInput += `I have studied/work in ${formData.specialization}. `;
    }
    
    if (formData.career_interest) {
        userInput += `I am interested in ${formData.career_interest} sector. `;
    }
    
    if (interests.includes('schemes')) {
        userInput += `I am looking for government schemes and benefits that I may be eligible for. `;
    }
    
    if (interests.includes('exams')) {
        userInput += `I am also interested in competitive exam recommendations. `;
    }
    
    if (formData.additional_info) {
        userInput += `Additional information: ${formData.additional_info}`;
    }
    
    // Show loading state
    document.getElementById('analysisForm').style.display = 'none';
    document.getElementById('loadingState').style.display = 'block';
    
    try {
        const response = await fetch('/analyze', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ 
                user_input: userInput,
                structured_data: formData
            })
        });
        
        // Check if response is OK
        if (!response.ok) {
            // Try to get error message
            const contentType = response.headers.get('content-type');
            let errorMessage = `Server error (${response.status})`;
            
            if (contentType && contentType.includes('application/json')) {
                const errorData = await response.json();
                errorMessage = errorData.error || errorMessage;
            } else {
                // Server returned HTML or other non-JSON response
                const textResponse = await response.text();
                if (textResponse.includes('timeout') || textResponse.includes('Timeout')) {
                    errorMessage = 'Request timed out. The analysis is taking longer than expected. Please try again.';
                } else if (response.status === 502 || response.status === 504) {
                    errorMessage = 'Server is temporarily unavailable. Please ensure API keys are configured and try again.';
                } else {
                    errorMessage = `Server error (${response.status}). Please check server configuration and API keys.`;
                }
            }
            
            alert('Error: ' + errorMessage);
            document.getElementById('analysisForm').style.display = 'block';
            document.getElementById('loadingState').style.display = 'none';
            showStep(1);
            return;
        }
        
        // Check content type before parsing JSON
        const contentType = response.headers.get('content-type');
        if (!contentType || !contentType.includes('application/json')) {
            throw new Error('Server returned non-JSON response. Please check server logs and ensure API keys are configured.');
        }
        
        const data = await response.json();
        
        if (data.success) {
            // Redirect to results page
            window.location.href = '/result/' + data.session_id;
        } else {
            alert('Error: ' + (data.error || 'Unknown error occurred'));
            document.getElementById('analysisForm').style.display = 'block';
            document.getElementById('loadingState').style.display = 'none';
            showStep(1); // Go back to first step
        }
    } catch (error) {
        console.error('Full error:', error);
        alert('Error: ' + error.message + '\n\nPlease ensure:\n1. API keys are configured on Render\n2. Server is running properly\n3. Check server logs for details');
        document.getElementById('analysisForm').style.display = 'block';
        document.getElementById('loadingState').style.display = 'none';
        showStep(1); // Go back to first step
    }
});

// Initialize
showStep(1);
</script>
{% endblock %}