{% extends '@EasyAdmin/page/content.html.twig' %}

{% block content %}
    <div class="dashboard">
        <h2>Panel Administracyjny</h2>
        <p>Łączna liczba firm: <strong>{{ companyCount }}</strong></p>

        <div class="charts">
            <div class="chart-container">
                <h3>Firmy na województwo</h3>
                <canvas id="voivodeshipChart"></canvas>
            </div>
            <div class="chart-container">
                <h3>Top 10 miast z największą ilością firm</h3>
                <canvas id="topCitiesChart"></canvas>
            </div>
        </div>
    </div>

    <script src="/bundles/chart.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // Wykres dla firm na województwo
            const voivodeshipCtx = document.getElementById("voivodeshipChart").getContext("2d");
            new Chart(voivodeshipCtx, {
                type: "bar",
                data: {
                    labels: {{ voivodeshipData|map(v => v.name)|json_encode|raw }},
                    datasets: [{
                        label: "Liczba firm",
                        data: {{ voivodeshipData|map(v => v.count)|json_encode|raw }},
                        backgroundColor: "rgba(54, 162, 235, 0.5)"
                    }]
                }
            });

            // Wykres dla top 10 miast
            const topCitiesCtx = document.getElementById("topCitiesChart").getContext("2d");
            new Chart(topCitiesCtx, {
                type: "bar",
                data: {
                    labels: {{ topCitiesData|map(c => c.name)|json_encode|raw }},
                    datasets: [{
                        label: "Liczba firm",
                        data: {{ topCitiesData|map(c => c.count)|json_encode|raw }},
                        backgroundColor: "rgba(255, 99, 132, 0.5)"
                    }]
                }
            });
        });
    </script>

    <style>
        .dashboard { text-align: center; }
        .charts { display: flex; justify-content: space-around; flex-wrap: wrap; }
        .chart-container { width: 45%; }
    </style>
{% endblock %}