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

{% block page_title %}{% trans %}dashboard.title{% endtrans %} MesODD  {% if ministry %} - {{ministry.name}} {% endif %} {% if departement %} - {{departement.name}} {% endif %}  {% if commune %}  - {{commune.name}} {% endif %} {% endblock %}


{% block page_content %}
    {% if is_granted('ROLE_MANAGER') or is_granted('ROLE_DDD')  %}
        <div class="card card-default">
            <div class="card-body">
                {{ form_start(form) }}
                    <div class="form-group row">
                        {% if is_granted('ROLE_MANAGER') %}
                            <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>
                        {% else %}
                            <div class="col-sm-12">
                                {{ form_label(form.entite, null, {'label_attr': {'class': 'col-sm-12'}}) }}
                                {{ form_widget(form.entite) }}
                            </div>
                        {% endif %}
                    </div>
                {{ form_end(form) }}  
            </div>
        </div>
    {% endif %}
        
    <!-- Info boxes -->
    <div class="row">
        <div class="col-12 col-sm-6 col-md-3">
        {% embed '@AdminLTE/Widgets/infobox-widget.html.twig'  with {
            'color' : 'info',
            'icon'  : 'fas fa-cog',
        }%}
            {% block box_text %}Programmes{% endblock %}
            {% block box_number %}{{ totalProgramm }}{% endblock %}
            {% block progress_description %}{% endblock %}
        {% endembed %}
        </div>

        <div class="col-12 col-sm-6 col-md-3">
        {% embed '@AdminLTE/Widgets/infobox-widget.html.twig'  with {
            'color' : 'danger',
            'icon'  : 'fas fa-thumbs-up',
        }%}
            {% block box_text %}Actions{% endblock %}
            {% block box_number %}{{ totalAction }}{% endblock %}
            {% block progress_description %}{% endblock %}
        {% endembed %}
        </div>

        <div class="clearfix hidden-md-up"></div>

        <div class="col-12 col-sm-6 col-md-3">
        {% embed '@AdminLTE/Widgets/infobox-widget.html.twig'  with {
            'color' : 'success',
            'icon'  : 'fas fa-shopping-cart',
        }%}
            {% block box_text %}Activités{% endblock %}
            {% block box_number %}{{ nbActivityTotal }}{% endblock %}
            {% block progress_description %}{% endblock %}
        {% endembed %}
        </div>

        <div class="col-12 col-sm-6 col-md-3">
        {% embed '@AdminLTE/Widgets/infobox-widget.html.twig'  with {
            'color' : 'warning',
            'icon'  : 'fas fa-users',
        }%}
            {% block box_text %}Montant{% endblock %}
            {% block box_number %}{{ amount|number_format(0, ',', ' ') }}{% endblock %}
            {% block progress_description %}{% endblock %}
        {% endembed %}
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
        {% 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_tools %}{% endblock %}
            {% block box_body %}
                <div class="row">
                    <div class="col-md-8">
                        <p class="text-center">
                            <strong>Sensibilité par ODD</strong>
                        </p>
                        <div class="chart">
                            <canvas id="barChart" height="250" style="height: 250px;"></canvas>
                        </div>
                    </div>
                   
                    <div class="col-md-4">
                        <p class="text-center">
                            <strong>Natures d’activités</strong>
                        </p>
  
                        <div class="progress-group">
                            Actions
                            <span class="float-right"><b>{{ totalActionTreated }}</b>/{{ totalAction }}</span>
                            <div class="progress">
                                <div class="progress-bar bg-secondary" style="width: {% if totalAction %}{{ (totalActionTreated / totalAction) * 100 }}{% endif %}%"></div>
                            </div>
                        </div>
  
                        <div class="progress-group">
                            Activités
                            <span class="float-right"><b>{{ nbActivityTreated }}</b>/{{ nbActivityTotal }}</span>
                            <div class="progress">
                                <div class="progress-bar bg-secondary" style="width: {% if nbActivityTotal %}{{ (nbActivityTreated / nbActivityTotal) * 100 }}{% endif %}%"></div>
                            </div>
                        </div>

                        <!--div class="progress-group">
                            <span class="progress-text">Visit Premium Page</span>
                            <span class="float-right"><b>480</b>/800</span>
                            <div class="progress">
                                <div class="progress-bar bg-secondary" style="width: 60%"></div>
                            </div>
                        </div>

                        <div class="progress-group">
                            Send Inquiries
                            <span class="float-right"><b>250</b>/500</span>
                            <div class="progress">
                                <div class="progress-bar bg-secondary" style="width: 50%"></div>
                            </div>
                        </div-->
                    </div>
                </div>
            {% endblock %}

            {% block box_footer %}
                <div class="row">
                    {% for nature in natures %}
                    <div class="col-sm-3 col-6">
                        <div class="description-block border-right">
                            <span class="description-text">{{ nature.name }}</span>
                            <h5 class="description-header">{{ nature.amount|number_format(0, ',', ' ') }} F</h5>
                            <span class="description-percentage text-success">{% if amount %} {{ (nature.amount / amount * 100)|number_format(2, ',', ' ') }}% {% endif %}</span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            {% endblock %}
        {% endembed %}
      
       
{% endblock %}

{% block javascripts %}

    <script>
        let $type = $('#ministry_commune_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_commune_sel_entite').replaceWith(
                        $(html).find('#ministry_commune_sel_entite')
                    );
                }
            });
        });
    </script>


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

            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: {
                        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 %}