{% extends '@DWGinger/base.html.twig' %}

{% block body %}
    <div class="card-deck mb-4">
        <div class="card">
            {% block card1 %}
            <img class="card-img-top" src="https://picsum.photos/246/100?random=1" alt="Card image cap">
            <h2 class="card-header">{{ 'dashboard.contacts'|trans }}: {{ stats.totalPersons|number_format(0, ',', '.') }}</h2>
            <div class="card-body">
                <p class="card-text">{{ 'dashboard.contacts_intro'|trans }}</p>
            </div>
            {% endblock %}
        </div>
        <div class="card">
            {% block card2 %}
            <img class="card-img-top" src="https://picsum.photos/246/100?random=2" alt="Card image cap">
            <h2 class="card-header">{{ 'dashboard.tags'|trans }}: {{ stats.totalTags|number_format(0, ',', '.') }}</h2>
            <div class="card-body">
                <p class="card-text">{{ 'dashboard.tags_intro'|trans }}</p>
            </div>
            {% endblock %}
        </div>
        <div class="card">
            {% block card3 %}
            <img class="card-img-top" src="https://picsum.photos/246/100?random=3" alt="Card image cap">
                <h2 class="card-header">...</h2>
                <div class="card-body">
                    <p class="card-text">
                    <div id="stateChart" style="width: 300px; height: 150px;"></div>
                    </p>
                </div>
            {% endblock %}
        </div>
    </div>
    <div class="card-deck mb-4">
        <div class="card">
            {% block card4 %}
                <img class="card-img-top" src="https://picsum.photos/246/100?random=4" alt="Card image cap">
                <h2 class="card-header">{{ 'dashboard.duplicates'|trans }}: {{ stats.totalDuplicates|number_format(0, ',', '.') }}</h2>
                <div class="card-body">
                    <p class="card-text">{{ 'dashboard.duplicates_intro'|trans }}</p>
                </div>
            {% endblock %}
        </div>
        <div class="card">
            {% block card5 %}
                <h2 class="card-header">{{ 'dashboard.gender'|trans }}:</h2>
                <div class="card-body">
                    <p class="card-text">
                        <div id="genderChart" style="width: 300px; height: 150px;"></div>
                    </p>
                </div>
            {% endblock %}
        </div>
        <div class="card">
            {% block card6 %}
                <h2 class="card-header">...</h2>
                <div class="card-body">
                    <p class="card-text">
                    <div id="stateChart" style="width: 300px; height: 150px;"></div>
                    </p>
                </div>
            {% endblock %}
        </div>
    </div>

{% endblock %}

{%  block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="//www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawCharts);

        function drawCharts() {

            var data = google.visualization.arrayToDataTable([
                ['Label', 'Value'],
                {% for genderStat in stats.personGenders %}
                ['{{ ('gender.'~genderStat.gender)|trans }}', {{ genderStat.count }}],
                {% endfor %}
            ]);

            var options = {
                pieHole: 0.4,
                pieStartAngle: 180,
                legend: 'none',
                pieSliceText: 'none',
                colors:['#DD6588', '#487F83'],
                chartArea: {width:130, height:130},
            };

            var chart = new google.visualization.PieChart(document.getElementById('genderChart'));
            chart.draw(data, options);

            var data = google.visualization.arrayToDataTable([
                ['Label', 'Value'],
                {% for genderStat in stats.personGenders %}
                ['{{ ('gender.'~genderStat.gender)|trans }}', {{ genderStat.count }}],
                {% endfor %}
            ]);

            var options = {
                pieHole: 0.4,
                pieStartAngle: 180,
                legend: 'none',
                chartArea: {width:130, height:130},
            };

            //var chart = new google.visualization.PieChart(document.getElementById('stateChart'));
            //chart.draw(data, options);

        }
    </script>
{% endblock %}