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

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


{% block page_content %}
    {% if is_granted('ROLE_MANAGER')  %}
        <div class="card card-default">
            <div class="card-body">
                {{ form_start(form) }}
                    <div class="form-group row">
                        <div class="col-sm-4">
                             {{ form_label(form.type, null, {'label_attr': {'class': 'col-sm-12'}}) }}
                            {{ form_widget(form.type) }}
                        </div>
                        <div class="col-sm-8">
                             {{ form_label(form.entite, null, {'label_attr': {'class': 'col-sm-12'}}) }}
                            {{ form_widget(form.entite) }}
                        </div>
                    </div>
                {{ form_end(form) }}  
            </div>
        </div>
    {% endif %}
    {% if is_granted('ROLE_DDD')  %}
        <div class="card card-default">
            <div class="card-body">
                {{ form_start(form) }}
                    <div class="form-group row">
                        <div class="col-sm-12">
                             {{ form_label(form.entite, null, {'label_attr': {'class': 'col-sm-12'}}) }}
                            {{ form_widget(form.entite) }}
                        </div>
                    </div>
                {{ form_end(form) }}  
            </div>
        </div>
    {% endif %}
    {% if type %}
    {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
        {% block box_title %}
                <label class="col-sm-12 col-form-label"><span style="color:red">Sensibilité globale : {{global|number_format(2, ',', ' ')}} %</span></label>
        {% endblock %}
        {% block box_body %}
            <div class="row">
                <div class="col-md-12">
                    <div class="chart" style="position: relative; height:63vh; width:100%">
                        <canvas id="barChart"></canvas>
                        <!--canvas id="myChart" width="400" height="400"></canvas-->
                        <div id="bar-chart" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        {% endblock %}
    {% endembed %}
    {% endif %}

{% endblock %}

{% block javascripts %}
    <script>
        $(function () {
            var barChartData = {
                labels  : {% if barChart %}{{ barChart['labels']|json_encode()|raw }}{% else %} [] {% endif %},
                datasets: [
                    {
                        backgroundColor     : {% if barChart %}{{ barChart['bgColor']|json_encode()|raw }}{% else %} [] {% endif %},
                        borderColor         : {% if barChart %}{{ barChart['bgColor']|json_encode()|raw }}{% else %} [] {% endif %},
                        borderWidth         : 1,
                        pointRadius         : false,
                        pointColor          : '#3b8bba',
                        pointStrokeColor    : 'rgba(60,141,188,1)',
                        pointHighlightFill  : '#fff',
                        pointHighlightStroke: 'rgba(60,141,188,1)',
                        data                : {% if barChart %}{{ barChart['values']|json_encode()|raw }}{% else %} [] {% endif %}
                    },
                ]
            }

            var barChartCanvas = document.getElementById('barChart').getContext('2d');
      
            var barChartOptions = {
                responsive              : true,
                maintainAspectRatio     : false,
                datasetFill             : false,
                legend: {
                        display: false
                    },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                plugins: {
                    // Change options for ALL labels of THIS CHART
                    datalabels: {
                        backgroundColor: {% if barChart %}{{ barChart['bgColor']|json_encode()|raw }}{% else %} [] {% endif %},
						borderColor: 'white',
						borderRadius: 25,
						borderWidth: 2,
                        color: 'white',
                        font: {
                            weight: 'bold',
                            size: 12,
                        },
                        align: 'start',
						anchor: 'end'
                    }
                }
            }
        
            var barChart = new Chart(barChartCanvas, {
                type: 'bar', 
                data: barChartData,
                options: barChartOptions
            })
      
        })
    </script>

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

{% endblock %}