{% extends "admin/change_list.html" %}

{% block content %}
<div style="display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px;">
    <div style="flex: 1; min-width: 400px; background: white; padding: 15px; border: 1px solid #ccc; border-radius: 4px;">
        <h3 style="margin-top:0">Top Countries (Filtered)</h3>
        <canvas id="countryChart" height="150"></canvas>
    </div>

    <div style="flex: 1; min-width: 400px; background: white; padding: 15px; border: 1px solid #ccc; border-radius: 4px;">
        <h3 style="margin-top:0">Top Cities (Filtered)</h3>
        <canvas id="cityChart" height="150"></canvas>
    </div>
</div>

{{ block.super }}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const countryRaw = JSON.parse('{{ country_data|safe }}');
        const cityRaw = JSON.parse('{{ city_data|safe }}');

        const setupChart = (canvasId, data, label, color) => {
            new Chart(document.getElementById(canvasId), {
                type: 'bar',
                data: {
                    labels: data.map(i => i.country || i.city || 'Unknown'),
                    datasets: [{
                        label: label,
                        data: data.map(i => i.total),
                        backgroundColor: color
                    }]
                },
                options: { indexAxis: 'y', responsive: true }
            });
        };

        setupChart('countryChart', countryRaw, 'Visitors', '#3498db');
        setupChart('cityChart', cityRaw, 'Visitors', '#e67e22');
    });
</script>
{% endblock %}