templates/history.html

{% extends "layout.html" %}

{% block title %}History - JanSahayak{% endblock %}

{% block content %}
<section class="history-section">
    <div class="container">
        <div class="page-header">
            <h1><i class="fas fa-history"></i> Analysis History</h1>
            <p>View your previous analyses and download reports</p>
        </div>

        {% if files and files|length > 0 %}
        <div class="history-grid">
            {% for file in files %}
            <div class="history-card">
                <div class="history-header">
                    <div class="history-icon">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <div class="history-meta">
                        <h3>Analysis Report</h3>
                        <p class="timestamp">
                            <i class="fas fa-clock"></i> 
                            {{ file.timestamp[:8] }} at {{ file.timestamp[9:11] }}:{{ file.timestamp[11:13] }}
                        </p>
                    </div>
                </div>
                
                <div class="history-details">
                    {% if file.profile %}
                    <div class="detail-row">
                        <span class="detail-label">Name:</span>
                        <span class="detail-value">{{ file.profile.get('name', 'N/A') }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Age:</span>
                        <span class="detail-value">{{ file.profile.get('age', 'N/A') }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Gender:</span>
                        <span class="detail-value">{{ file.profile.get('gender', 'N/A') }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">State:</span>
                        <span class="detail-value">{{ file.profile.get('state', 'N/A') }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Education:</span>
                        <span class="detail-value">{{ file.profile.get('education', 'N/A') }}</span>
                    </div>
                    {% else %}
                    <p class="text-muted">No profile data available</p>
                    {% endif %}
                </div>

                {% if file.errors and file.errors|length > 0 %}
                <div class="history-errors">
                    <i class="fas fa-exclamation-circle"></i> 
                    {{ file.errors|length }} error(s) encountered
                </div>
                {% endif %}

                <div class="history-actions">
                    <button class="btn-view" onclick="viewFile('{{ file.filename }}')">
                        <i class="fas fa-eye"></i> View
                    </button>
                    <button class="btn-download-small" onclick="downloadFile('{{ file.filename }}')">
                        <i class="fas fa-download"></i> Download
                    </button>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state-large">
            <i class="fas fa-inbox"></i>
            <h2>No History Yet</h2>
            <p>Your analysis history will appear here once you run your first analysis</p>
            <a href="{{ url_for('index') }}" class="btn-primary">
                <i class="fas fa-plus"></i> Start Your First Analysis
            </a>
        </div>
        {% endif %}
    </div>
</section>

<!-- Modal for viewing file -->
<div id="fileModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Analysis Details</h3>
            <button class="modal-close" onclick="closeModal()">&times;</button>
        </div>
        <div class="modal-body">
            <pre id="fileContent"></pre>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
async function viewFile(filename) {
    try {
        const response = await fetch('/api/file/' + filename);
        const data = await response.json();
        
        document.getElementById('fileContent').textContent = JSON.stringify(data, null, 2);
        document.getElementById('fileModal').style.display = 'flex';
    } catch (error) {
        alert('Error loading file: ' + error.message);
    }
}

async function downloadFile(filename) {
    try {
        const response = await fetch('/api/file/' + filename);
        const data = await response.json();
        
        const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));
        const downloadAnchor = document.createElement('a');
        downloadAnchor.setAttribute("href", dataStr);
        downloadAnchor.setAttribute("download", filename);
        document.body.appendChild(downloadAnchor);
        downloadAnchor.click();
        downloadAnchor.remove();
    } catch (error) {
        alert('Error downloading file: ' + error.message);
    }
}

function closeModal() {
    document.getElementById('fileModal').style.display = 'none';
}

// Close modal on outside click
window.onclick = function(event) {
    const modal = document.getElementById('fileModal');
    if (event.target == modal) {
        modal.style.display = 'none';
    }
}
</script>
{% endblock %}