{% extends '@AdminLTE/layout/mesodd-layout.html.twig' %}

{% block page_title %}{% trans %}graph.cost.title{% endtrans %}{% endblock %}


{% block page_content %}

    {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
        {% block box_body %}
            {{ form_start(form) }}
                {{ form_widget(form) }}
            {{ form_end(form) }}    
        {% endblock %}
    {% endembed %}

    {% if type %}
    {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
        {% block box_body %}
            <canvas id="donutChart" style="height:70vh"></canvas>
        {% endblock %}
    {% endembed %}
    {% endif %}

{% endblock %}

{% block javascripts %}
<script>
        let $type = $('#ministry_sel_type');

        $type.change(function() {
            let $form = $type.closest('form');

            let data = {};
            data[$type.attr('name')] = $type.val();

            $.ajax({
                url: $form.attr('action'),
                type: $form.attr('method'),
                data: data,
                success: function(html) {
                    $('#ministry_sel_entite').replaceWith(
                        $(html).find('#ministry_sel_entite')
                    );
                }
            });
        });
    </script>
  {% if type %}
    <script>
        $(function () {

            var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
            var donutData        = {
                labels: {% if donutChart %}{{ donutChart['labels']|json_encode()|raw }}{% else %} []{% endif %},
                datasets: [
                    {
                        data: {% if donutChart %}{{ donutChart['percents']|json_encode()|raw }}{% else %} []{% endif %},
                        backgroundColor: {% if donutChart %}{{ donutChart['bgColor']|json_encode()|raw }}{% else %} []{% endif %},
                    }
                ]
            }
            var donutOptions     = {
                maintainAspectRatio: false,
                responsive: true,
                plugins: {
                    datalabels: {
                        backgroundColor: {% if donutChart %}{{ donutChart['bgColor']|json_encode()|raw }}{% else %} []{% endif %},
						borderColor: 'white',
						borderRadius: 25,
						borderWidth: 2,
                        color: 'white',
                        font: {
                            weight: 'bold',
                            size: 12,
                        },
                        align: 'center',
                        anchor: 'end',
                    }
                }
            }

            var donutChart = new Chart(donutChartCanvas, {
                type: 'doughnut',
                data: donutData,
                options: donutOptions      
            })
              
        })
    </script>
{% endif %}

    <script src="{{ asset('plugins/chart.js/Chart.min.js') }}"></script>
    <script src="{{ asset('plugins/chartjs-plugin-datalabels/chartjs-plugin-datalabels.min.js') }}"></script>
    
{% endblock %}