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

{% block custom_css %}
{{parent()}}
<link href="{{asset('assets/dist/css/pages/widget-page.css')}}" rel="stylesheet">
<!--link href="{{asset('assets/dist/css/pages/float-chart.css')}}" rel="stylesheet" -->
{% endblock %}
{% block full_content %}
{% if app.request.hasPreviousSession %}
    {# Données Graphiques #}
    {% set nbUser = app.session.get('nbUser') %}
    {% if nbUser is null %}
        {% set nbUser = 0 %}
    {% endif %}
    {% set nbUserActive = app.session.get('nbUserActive') %}
    {% if nbUserActive is null %}
        {% set nbUserActive = 0 %}
    {% endif %}
    {% set nbAllSaisie = app.session.get('nbAllSaisie') %}
    {% if nbAllSaisie is null %}
        {% set nbAllSaisie = 0 %}
    {% endif %}
{% endif %}
<div class="col-lg-12">
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">{{ 'Form.Dashboard.Campaign' | trans}}</h4>
            <h6 class="card-subtitle">{{ 'Form.Dashboard.SelectYear' | trans}}</h6> 
            {#% include 'dashboard/formulaire.html.twig'  %#}
            {% if annees is not null %}
                <div id="bar-chart" style="width:100%; height:400px;"></div>
            {% endif %}
        </div>
    </div>

    <div class="card">
        <div class="row">
            <div class="col-lg-9 col-md-7">
                <div class="card-body">
                    <h3>{{'Dashboard.OtherStat' | trans}}</h3>
                    {#% include 'dashboard/formulaireStat.html.twig'  %#}
                    <!-- button type="button" id='critere' class="btn btn-success text-white">{{ 'Dashboard.Selection' | trans}}</button -->
                    {#% if anneesStat is not null %}
                        <div id="bar-stat-chart" style="width:100%; height:400px;"></div>
                    {% else %}
                    {% endif %#}
                    <div id="bar-stat-chart" style="width:100%; height:400px;"></div>
                    
                </div>
            </div>
            <div class="col-lg-3 col-md-5 border-start p-l-0">
                <center class="m-t-30 m-b-40 p-t-20 p-b-20">
                    <font class="display-3">{{ nbUser }}</font>
                    <h6 class="text-muted">{{ 'Dashboard.User' | trans }}</h6>
                    
                </center>
                <hr>
                <div class="card-body">
                    <div class="row">
                        <!-- Column -->
                        <div class="col p-r-0">
                            <h1 class="font-light">{{ nbUserActive }}</h1>
                            <h6 class="text-muted">{{ 'Dashboard.UserActive' | trans }}</h6></div>
                        <!-- Column -->
                        <div class="col text-end align-self-center">
                            <div data-label="20%" class="css-bar m-b-0 css-bar-primary css-bar-20"><i class="mdi mdi-desktop-mac"></i></div>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="card-body">
                    <div class="row">
                        <!-- Column -->
                        <div class="col p-r-0">
                            <h1 class="font-light">{{nbAllSaisie}}</h1>
                            <h6 class="text-muted">{{ 'Dashboard.NbSaisie' | trans }}</h6></div>
                        <!-- Column -->
                        <div class="col text-end align-self-center">
                            <div data-label="20%" class="css-bar m-b-0 css-bar-danger css-bar-20"><i class="mdi mdi-chart-bar"></i></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock %}
{% block custom_js %}
    {{parent()}}
    <script type="text/javascript" src="{{asset('assets/node_modules/echarts/echarts-all.js')}}"></script>

    <script type="text/javascript">
        // ============================================================== 
        // Bar chart option
        // ============================================================== 
        var myChart = echarts.init(document.getElementById('bar-chart'));

        // specify chart configuration item and data
        option = {
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['{{'Dashboard.SMS' | trans}}', '{{'Dashboard.Call' | trans}}', '{{'Dashboard.Email' | trans}}', '{{'Dashboard.WhatsApp' | trans}}']
            },
            toolbox: {
                show : true,
                feature : {
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            color: ["#55ce63", "#009efb", "#c3eb34", "#8a1339"],
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    /* data : {{ annees | json_encode | raw }} */
                    data : ['2021', '2022', '2023', '2024']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'{{'Dashboard.SMS' | trans}}',
                    type:'line',
                    /* data: {{ nbEnt | json_encode }}, */
                    data : ['102', '785', '1025', '4800'],
                    markPoint : {
                        data : [
                            {type : 'max', name: 'Max'},
                            {type : 'min', name: 'Min'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: 'Average'}
                        ]
                    }
                },
                {
                    name:'{{'Dashboard.Call' | trans}}',
                    type:'line',
                    /* data: {{ nbEnt | json_encode }}, */
                    data : ['10', '885', '1245', '3012'],
                    markPoint : {
                        data : [
                            {type : 'max', name: 'Max'},
                            {type : 'min', name: 'Min'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : 'Average'}
                        ]
                    }
                },
                {
                    name:'{{'Dashboard.Email' | trans}}',
                    type:'line',
                    /* data: {{ nbEnt | json_encode }}, */
                    data : ['741', '1236', '4785', '2501'],
                    markPoint : {
                        data : [
                            {type : 'max', name: 'Max'},
                            {type : 'min', name: 'Min'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : 'Average'}
                        ]
                    }
                },
                {
                    name:'{{'Dashboard.WhatsApp' | trans}}',
                    type:'line',
                    /* data: {{ nbEnt | json_encode }}, */
                    data : ['78', '514', '2501', '1204'],
                    markPoint : {
                        data : [
                            {type : 'max', name: 'Max'},
                            {type : 'min', name: 'Min'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : 'Average'}
                        ]
                    }
                }
            ]
        };
                            

        // use configuration item and data specified to show chart
        myChart.setOption(option, true), $(function() {
                    function resize() {
                        setTimeout(function() {
                            myChart.resize()
                        }, 100)
                    }
                    $(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
                });

    </script>

    <script type="text/javascript">
        // ============================================================== 
        // Bar chart option
        // ============================================================== 
        var myStatChart = echarts.init(document.getElementById('bar-stat-chart'));

        // specify chart configuration item and data
        option = {
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['{{'Dashboard.SMS' | trans}}', '{{'Dashboard.Call' | trans}}', '{{'Dashboard.Email' | trans}}', '{{'Dashboard.WhatsApp' | trans}}']
            },
            toolbox: {
                show : true,
                feature : {
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            color: ["#55ce63", "#009efb", "#c3eb34", "#8a1339"],
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    /*data : {{ annees | json_encode | raw }}*/
                    data : ['2021', '2022', '2023', '2024']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'{{'Dashboard.SMS' | trans}}',
                    type:'bar',
                    /*data: {{ nbEnt | json_encode }},*/
                    data : ['100', '200', '300', '400'],
                    markPoint : {
                        data : [
                            {type : 'max', name: 'Max'},
                            {type : 'min', name: 'Min'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: 'Average'}
                        ]
                    }
                },
                {
                    name:'{{'Dashboard.Call' | trans}}',
                    type:'bar',
                    /*data: {{ nbEnt | json_encode }},*/
                    data : ['400', '300', '200', '100'],
                    markPoint : {
                        data : [
                            {type : 'max', name: 'Max'},
                            {type : 'min', name: 'Min'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : 'Average'}
                        ]
                    }
                },
                {
                    name:'{{'Dashboard.Email' | trans}}',
                    type:'bar',
                    /*data: {{ nbEnt | json_encode }},*/
                    data : ['258', '560', '420', '201'],
                    markPoint : {
                        data : [
                            {type : 'max', name: 'Max'},
                            {type : 'min', name: 'Min'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : 'Average'}
                        ]
                    }
                },
                {
                    name:'{{'Dashboard.WhatsApp' | trans}}',
                    type:'bar',
                    /*data: {{ nbEnt | json_encode }},*/
                    data : ['200', '600', '145', '235'],
                    markPoint : {
                        data : [
                            {type : 'max', name: 'Max'},
                            {type : 'min', name: 'Min'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : 'Average'}
                        ]
                    }
                }
            ]
        };
                            

        // use configuration item and data specified to show chart
        myStatChart.setOption(option, true), $(function() {
                    function resize() {
                        setTimeout(function() {
                            myStatChart.resize()
                        }, 100)
                    }
                    $(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
                });

    </script>
    
    <script type="text/javascript">
        $(document).ready(function() { 
            //Fonction rechercher par NIF
            $('#critere').click( function () { 
                $('#stat-modal').modal('show');
            });
        });
    </script>
{% endblock %}