{% extends 'base.html.twig' %}

{% block title %}Hello HomeController!{% endblock %}

{% block stylesheets %}
    {{ parent() }}   
    <link href="{{ asset('fwk/jqwidgets17.0.0/jqwidgets/styles/jqx.base.css') }}" rel="stylesheet"/>   
{% endblock %}

{% block body %}

<div class="container">
    <h3>Bonjour {{ secure.currentUser().personne.displayname }}</h3>
    <hr /> <br />

    {% if secure.havePermission(constant('_CONSULTATION_SERV_GEST_DIFF', app_const)) %}
        <div class="d-flex justify-content-end">
            <a class="btn btn-sm btn-primary mr-5" href="/suivi/envoi/rapport"> Bilan des abonnements</a>
        </div>   

        <hr />    
        <br />                   
    {% endif %}
    
    <div id='rapartChartContainer' style="width: 100%; min-height: 500px;"></div> <br />
</div> <br />

<div class="container">
    <section>
        <div class="d-flex flex-row-reverse">
            <div class="p-2">
                <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon1">Annee</span>
                    <select id="anneCompteur" class="form-select" aria-label="Annee">
                        {% for i in annees %}
                                {% if i == annee  %}
                                    <option value="{{i}}" selected>{{i}}</option>
                                {% else %}
                                    <option value="{{i}}">{{i}}</option>
                                {% endif %}                            
                        {% endfor %}
                    </select>
                </div>

                
            </div>
        </div> <hr/>
        <div id='compteurChartContainer' style="width: 100%; min-height: 500px;"></div>  
    </section>


    <br />
    <br />
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}    
    <script src="{{ asset('fwk/jqwidgets17.0.0/jqwidgets/jqxcore.js') }}"></script>
    <script src="{{ asset('fwk/jqwidgets17.0.0/jqwidgets/jqxdraw.js') }}"></script>
    <script src="{{ asset('fwk/jqwidgets17.0.0/jqwidgets/jqxchart.core.js') }}"></script>
    <script src="{{ asset('fwk/jqwidgets17.0.0/jqwidgets/jqxdata.js') }}"></script>
    <script>
        $( document ).ready(function() {
            
            $('#anneCompteur').change(function(e){
                const annee = $(this).val();
                loadCompteurAbonnChart(annee);
            });

            setTimeout(() => {
                const annee = $("#anneCompteur").val();
                loadCompteurAbonnChart(2024);
            }, "1 second");

            loadRepartitionChart();
            
        });

        function loadCompteurAbonnChart(annee) {
            $('#compteurChartContainer').empty();
            var source =
            {
                datatype: "json",
                url: '/suivi/compteur-abonn/' + annee
            };

            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
        
            var settings = {
                title: "Suivi des abonnements aux newsletters",
                description: "Evolution des abonnements",
				enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                xAxis:
                    {
                        dataField: 'Mois',
                        showGridLines: true
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 50,
                            seriesGapPercent: 0,
                            valueAxis:
                            {
                                unitInterval: 5,
                                minValue: 0,
                                displayValueAxis: true,
                                description: 'Nombre de personne',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                { dataField: 'Desabonnement', displayText: 'Desabonnement'},
                                { dataField: 'Abonnement', displayText: 'Abonnement'}
                            ]
                        }
                    ]
            };
            
            // setup the chart
            $('#compteurChartContainer').jqxChart(settings);
        }

        function loadRepartitionChart()
        {
            $('#rapartChartContainer').empty();
            var source =
            {
                datatype: "json",
                url: '/suivi/repartition/adresses'
            };

            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

            // prepare jqxChart settings
            var settingsPieChart = {
                title: "Répartition des souscriptions aux newsletters",
                description: "(source: eelorleans.com)",
                enableAnimations: true,
                showLegend: true,
                showBorderLine: true,
                legendLayout: { left: 700, top: 160, width: 300, height: 200, flow: 'vertical' },
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                colorScheme: 'scheme03',
                seriesGroups:
                    [
                        {
                            type: 'pie',
                            showLabels: true,
                            series:
                                [
                                    { 
                                        dataField: 'valeur',
                                        displayText: 'label',
                                        labelRadius: 170,
                                        initialAngle: 15,
                                        radius: 145,
                                        centerOffset: 0,
                                        formatFunction: function (value) {
                                            if (isNaN(value))
                                                return value;
                                            return parseFloat(value) + '%';
                                        },
                                    }
                                ]
                        }
                    ]
            };

            // setup the chart
            $('#rapartChartContainer').jqxChart(settingsPieChart);
        }
    </script> 
{% endblock %}