{% extends "superadmin/base_superadmin.html" %}

{% block page_title %}Advanced Analytics{% endblock %}
{% block page_description %}Comprehensive data analysis and reporting{% endblock %}

{% block superadmin_content %}
<!-- Analytics Overview -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
    <!-- Monthly Trends -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900">Monthly Trends</h3>
            <i class="fas fa-chart-line text-blue-500"></i>
        </div>
        <div class="space-y-3">
            {% for month_data in monthly_data[-3:] %}
            <div class="flex justify-between items-center">
                <span class="text-sm text-gray-600">{{ month_data.month.strftime('%b %Y') if month_data.month else 'N/A' }}</span>
                <div class="text-right">
                    <div class="text-sm font-semibold text-gray-900">৳{{ "{:,.0f}".format(month_data.total_amount) }}</div>
                    <div class="text-xs text-gray-500">{{ month_data.contribution_count }} contributions</div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Top Contributors -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900">Top Contributors</h3>
            <i class="fas fa-trophy text-yellow-500"></i>
        </div>
        <div class="space-y-3">
            {% for contributor in top_contributors[:5] %}
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
                        <span class="text-blue-600 font-bold text-xs">{{ loop.index }}</span>
                    </div>
                    <div>
                        <div class="text-sm font-medium text-gray-900">{{ contributor.full_name }}</div>
                        <div class="text-xs text-gray-500">{{ contributor.custom_id or 'No ID' }}</div>
                    </div>
                </div>
                <div class="text-right">
                    <div class="text-sm font-semibold text-gray-900">৳{{ "{:,.0f}".format(contributor.total_contributed) }}</div>
                    <div class="text-xs text-gray-500">{{ contributor.contribution_count }} times</div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Contribution Types -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900">Contribution Types</h3>
            <i class="fas fa-chart-pie text-green-500"></i>
        </div>
        <div class="space-y-3">
            {% for type_data in type_breakdown %}
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    {% if type_data.contribution_type == 'monthly' %}
                        <i class="fas fa-calendar text-blue-500 text-sm"></i>
                    {% elif type_data.contribution_type == 'penalty' %}
                        <i class="fas fa-exclamation-triangle text-red-500 text-sm"></i>
                    {% elif type_data.contribution_type == 'bonus' %}
                        <i class="fas fa-star text-yellow-500 text-sm"></i>
                    {% else %}
                        <i class="fas fa-coins text-green-500 text-sm"></i>
                    {% endif %}
                    <span class="text-sm text-gray-600 capitalize">{{ type_data.contribution_type }}</span>
                </div>
                <div class="text-right">
                    <div class="text-sm font-semibold text-gray-900">৳{{ "{:,.0f}".format(type_data.total_amount) }}</div>
                    <div class="text-xs text-gray-500">{{ type_data.count }} contributions</div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<!-- Detailed Analytics Charts -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    <!-- Monthly Contribution Chart -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-lg font-semibold text-gray-900">Monthly Contribution Trends</h3>
            <div class="text-sm text-gray-500">Last 12 months</div>
        </div>
        <div class="h-64 flex items-center justify-center">
            <canvas id="monthlyChart" width="400" height="200"></canvas>
        </div>
    </div>

    <!-- Contribution Type Distribution -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-lg font-semibold text-gray-900">Contribution Distribution</h3>
            <div class="text-sm text-gray-500">By type</div>
        </div>
        <div class="h-64 flex items-center justify-center">
            <canvas id="distributionChart" width="400" height="200"></canvas>
        </div>
    </div>
</div>

<!-- Data Export Section -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h3 class="text-lg font-semibold text-gray-900">Data Export & Reporting</h3>
            <p class="text-sm text-gray-500">Generate detailed reports and export data</p>
        </div>
        <i class="fas fa-download text-gray-400"></i>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <button onclick="exportAnalytics('monthly')" 
                class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors duration-200 text-left">
            <div class="flex items-center space-x-3 mb-2">
                <i class="fas fa-chart-line text-blue-500"></i>
                <span class="font-semibold text-gray-900">Monthly Report</span>
            </div>
            <p class="text-sm text-gray-500">Export monthly contribution trends</p>
        </button>

        <button onclick="exportAnalytics('contributors')" 
                class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors duration-200 text-left">
            <div class="flex items-center space-x-3 mb-2">
                <i class="fas fa-users text-green-500"></i>
                <span class="font-semibold text-gray-900">Contributors Report</span>
            </div>
            <p class="text-sm text-gray-500">Export top contributors data</p>
        </button>

        <button onclick="exportAnalytics('complete')" 
                class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors duration-200 text-left">
            <div class="flex items-center space-x-3 mb-2">
                <i class="fas fa-database text-purple-500"></i>
                <span class="font-semibold text-gray-900">Complete Analytics</span>
            </div>
            <p class="text-sm text-gray-500">Export comprehensive analytics</p>
        </button>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Monthly Contribution Chart
const monthlyCtx = document.getElementById('monthlyChart').getContext('2d');
const monthlyChart = new Chart(monthlyCtx, {
    type: 'line',
    data: {
        labels: [
            {% for month_data in monthly_data %}
            '{{ month_data.month.strftime("%b %Y") if month_data.month else "N/A" }}'{{ "," if not loop.last else "" }}
            {% endfor %}
        ],
        datasets: [{
            label: 'Monthly Contributions (৳)',
            data: [
                {% for month_data in monthly_data %}
                {{ month_data.total_amount }}{{ "," if not loop.last else "" }}
                {% endfor %}
            ],
            borderColor: 'rgb(59, 130, 246)',
            backgroundColor: 'rgba(59, 130, 246, 0.1)',
            borderWidth: 2,
            fill: true,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                grid: {
                    color: 'rgba(0, 0, 0, 0.05)'
                }
            },
            x: {
                grid: {
                    display: false
                }
            }
        }
    }
});

// Contribution Type Distribution Chart
const distributionCtx = document.getElementById('distributionChart').getContext('2d');
const distributionChart = new Chart(distributionCtx, {
    type: 'doughnut',
    data: {
        labels: [
            {% for type_data in type_breakdown %}
            '{{ type_data.contribution_type.title() }}'{{ "," if not loop.last else "" }}
            {% endfor %}
        ],
        datasets: [{
            data: [
                {% for type_data in type_breakdown %}
                {{ type_data.total_amount }}{{ "," if not loop.last else "" }}
                {% endfor %}
            ],
            backgroundColor: [
                '#3B82F6', // Blue for monthly
                '#EF4444', // Red for penalty
                '#F59E0B', // Yellow for bonus
                '#10B981'  // Green for special
            ],
            borderWidth: 0
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    padding: 20,
                    usePointStyle: true
                }
            }
        }
    }
});

function exportAnalytics(type) {
    alert('Exporting ' + type + ' analytics - Feature coming soon!');
}
</script>
{% endblock %}