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

{% block body_id 'stat' %}

{#
    the homepage is a special page which displays neither a header nor a footer.
    this is done with the 'trick' of defining empty Twig blocks without any content
#}

  {% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('static/pivot/dist/c3.min.css') }}">
    <link rel="stylesheet" href="{{ asset('static/pivot/dist/pivot.css') }}">
    <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/css/dataTables.bootstrap.css') }}">
    <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/css/ColVis.css') }}">
    <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/datatables/css/TableTools.css') }}">
    <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/datepicker/css/bootstrap-datetimepicker.css') }}">
  {% endblock %}
{% block header %}
{% endblock %}

{% block modal %}

    <div class="md-modal md-effect-10 md-hotpink colorize-overlay" id="id-msg-red">
      <div class="md-content">
      <h3>ERROR</h3>   
      <div id="id-msg-err" class="tile-body nopadding rounded-corners">
      </div>
      <button class="md-close btn btn-default">{{ "OK"|trans }}</button>
      </div>
    </div>

{% endblock %}

{% block body %}

    <div class="md-overlay"></div><!-- the overlay element -->        
        <!-- Page content -->
    <div id="content" class="col-md-12">

        <!-- page header -->
        <div class="pageheader">




            <div class="breadcrumbs hidden-element">
                <ol class="breadcrumb">
                    <li>You are here</li>
                    <li><a href="/en/home?step=2">C4RGO-Air</a></li>
                    <li class="active">statistiche</li>
                </ol>
            </div>


        </div>
        <!-- /page header -->

        <!-- tile -->
        <section class="tile transparent">
            {% if id <= 0 %}
                <section class="tile transparent">


                    <!-- tile header -->
                    <!-- /tile header -->

                    <!-- tile body -->
                    <div class="tile-body color transparent-black rounded-corners">

                        <div class="table-responsive">
                            <table  class="table table-datatable table-striped table-custom" id="export-datatable">
                                <thead>
                                    <tr>
                                        <th class="sort-alpha awb-length" style="color:#0099FF">{{ 'Nome'|trans }}</th>
                                        <th class="sort-alpha vector-length" style="color:#0099FF">{{ 'Descrizione'|trans }}</th>
                                    </tr>
                                </thead>
                                <tbody>

                                    {% for query in queries %}
                                        {% if (loop.index % 2 == 0) %}
                                            <tr class="odd gradeA">        
                                            {% else %}
                                            <tr class="even gradeA">
                                            {% endif %}
                                            <td><a href="{{ path('stat_page', {'id': query.id}) }}">{{ query.nome }}</a></td>
                                            <td>{{ query.descrizione }}</td>
                                        </tr>
                                    {% endfor %}        
                                </tbody>
                            </table>
                        </div>

                    </div>
                    <!-- /tile body -->



                </section>
                <!-- /tile -->

            {% else %}
                <!--  <div id="output" style="margin: 10px;"></div>    -->
            <!--    <ul class="tile-navbar bg-transparent-black-3" id="id-cerca">
                    <li>

                        <div>
                            <div class="form-group" align="center">
                                <h1 class="col-sm-4 control-label">{{ nometipo }}</h1>
                            </div>                                        
                        </div>                        

                    </li>

                </ul>-->



                <section class="tile transparent" id="id-search-block">
                    <!-- tile widget -->


                    <div class="tile-widget color transparent-black rounded-top-corners">

                        <div class="block-menu-filter menu-start" style="padding-bottom: 12px; padding-right: 50px;">
                            <div id="selectbox-customer">
                                <select class="chosen-select chosen-transparent form-control selectFilter" id="selectCustomer" data-tipo="customer" parsley-trigger="change" parsley-required="false" parsley-error-container="#selectbox-customer">
                                    <option class="description" value="0">{{ 'CUSTOMER'|trans }}</option>
                                    {%  for vettore in listavettori %}
                                        <option class="description" value="{{ vettore.id }}" {% if vettore.id == search %}selected="selected"{% endif %}>{{ vettore.airline }}</option>
                                    {% endfor  %}

                                </select>
                            </div>
                        </div>


                        <div class="block-menu-filter menu-center">
                            <div class="btn-group btn-w100">
                                <input autocomplete="off" type="text" class="form-control datepicker" id="datepicker" style="width: 14vw; float: left; background-color: #d3d3d369; margin-right: 6px; margin-top: 10px;" placeholder="{{ "Select date"|trans }}"/>
                                <label for="mydtpic" class="control-label" style="float: left;"><i class="fa fa-calendar fa-2x"></i></label>
                            </div>
                        </div>
                        <div class="block-menu-filter menu-end">
                            <div class="btn-group">
                                <button type="button" id="type-a" data-tipo-val="a" class="btn btn-custom filter-menu {% if tipo == 'a' %}filter-selected{% endif %}" onclick="javascript:selectType('a')">{{ 'AWB'|trans }}</button>
                                <button type="button" id="type-n" data-tipo-val="n" class="btn btn-custom filter-menu {% if tipo == 'n' %}filter-selected{% endif %}" onclick="javascript:selectType('n')">{{ 'Objects'|trans }}</button>
                                <button type="button" id="type-i" data-tipo-val="i" class="btn btn-custom filter-menu {% if tipo == 'i' %}filter-selected{% endif %}" onclick="javascript:selectType('i')">{{ 'Items'|trans }}</button>
                                <button type="button" id="type-v" data-tipo-val="v" class="btn btn-custom filter-menu {% if tipo == 'v' %}filter-selected{% endif %}" onclick="javascript:selectType('v')">{{ 'Volume'|trans }}</button>
                                <button type="button" id="type-w" data-tipo-val="w" class="btn btn-custom filter-menu {% if tipo == 'w' %}filter-selected{% endif %}" onclick="javascript:selectType('w')">{{ 'Weight'|trans }}</button>
                            </div>

                        </div>
                    </div>

                </section>     
                <div id="area-chart" style="width: 96%;">
                </div>
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
            {% endif %}
        </section>
    </div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
    <script type="text/javascript" src="{{ asset('static/pivot/dist/papaparse.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('static/pivot/dist/d3.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('static/pivot/dist/c3.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('static/pivot/dist/pivot.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('static/pivot/dist/tips_data.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('static/pivot/dist/d3_renderers.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('static/pivot/dist/c3_renderers.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('static/pivot/dist/export_renderers.min.js') }}"></script>
    
    
    <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/flot/jquery.flot.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/flot/jquery.flot.categories.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/flot/jquery.flot.pie.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/flot/jquery.flot.stack.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/graphtable/jquery.graphTable-0.3.js') }}"></script>
    <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/flot/jquery.flot.tooltip.min.js') }}"></script>    
    <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/momentjs/moment-with-langs.min.js') }}"></script>

    <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/datepicker/bootstrap-datetimepicker.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('static/js/jquery-dateformat.min.js') }}"></script>
    {{ encore_entry_script_tags('stats') }}

    {% if id <= 0 %}
    {% else %}         
        <script>           
            var chartData = new Array();
            var chartModel = '                                                                                                                                      \
                <section class="chart-block tile color transparent-white" style="padding-left: 20px; padding-right: 20px; padding-top: 4px; padding-bottom: 4px;">  \
                    <div class="tile-header">                                                                                                                       \
                        <h1></h1>                                                                                                                                   \
                        <div class="controls">                                                                                                                      \
                            <a href="#" class="minimize"><i class="fa fa-chevron-down"></i></a>                                                                     \
                            <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>                                                                           \
                        </div>                                                                                                                                      \
                    </div>                                                                                                                                          \
                    <div class="tile-body">                                                                                                                         \
                        <div class="chart-canvas">                                                                                                                  \
                            <canvas></canvas>                                                                                                                       \
                        </div>                                                                                                                                      \
                    </div>                                                                                                                                          \
                </section>                                                                                                                                          \
            ';
            function elBlock(el) {    
              $(el).block({
                message: '<div class="el-reloader"></div>',
                overlayCSS: {
                  opacity: 0.6,
                  cursor: 'wait',
                  backgroundColor: '#000000'
                },
                css: {
                  padding: '5px',
                  border: '0',
                  backgroundColor: 'transparent'
                }
              });
            };

            function elUnblock(el) {
              $(el).unblock();
            };    
            function sprintf() {
                var args = arguments,
                string = args[0],
                i = 1;
                return string.replace(/%((%)|s|d)/g, function (m) {
                    // m is the matched format, e.g. %s, %d
                    var val = null;
                    if (m[2]) {
                        val = m[2];
                    } else {
                        val = args[i];
                        // A switch statement so that the formatter can be extended. Default is %s
                        switch (m) {
                            case '%d':
                                val = parseFloat(val);
                                if (isNaN(val)) {
                                    val = 0;
                                }
                                break;
                        }
                        i++;
                    }
                    return val;
                });
            }           

            var GetChartData = function (id, data, search) {
                var cururl = "{{ path('app_getstat', {'id':':::ID','par':':::DATA','search':':::SEARCH'}) }}".replace(':::ID', id).replace(':::DATA', data).replace(':::SEARCH', search);
                $.ajax({
                    url: cururl,
                    method: 'GET',
                    dataType: 'json',
                    success: function (d) {
                        var sid = 'id' + String(id);
                        elUnblock($('#chart-' + String(id)));
                        if (typeof chartData[sid] !== 'undefined') {
                            chartData[sid].dati = d; 
                            chartData[sid].chart.data = d;
                            chartData[sid].chart.update();
                        }
                        else {
                            chartData[sid] = {'id':id, 'dati':d, 'chart':null}; 
                            var canvas =  $(sprintf("#chart-%s .chart-canvas canvas", id));
                            if (canvas.length > 0) {
                                $(sprintf("#chart-%s .tile-header h1 span", id)).html(d.descrizione);
                                var ctx = canvas[0].getContext('2d');
                                chartData[sid].chart = new Chart(ctx, {
                                    type: 'bar',
                                    data: chartData[sid].dati,
                                    
                                    options: {
                                        onClick: function(ev) { 
                                            var activeElement = this.chart.getElementAtEvent(ev);
                                        //    alert(activeElement[0]._datasetIndex); 
                                        },
                                        aspectRatio: 4,
                                        title: {
                                            display: false,
                                            text: ''
                                        },
                                        tooltips: {
                                            mode: 'index',
                                            intersect: false,
                                            titleFontColor: 'gray',
                                            bodyFontColor: 'gray',
                                            multiKeyBackground: 'gray',
                                            backgroundColor: '#FFF',  //'#005BC8'                                            
                                            filter: function (tooltipItem, data) {
                                                if (Math.trunc(tooltipItem.value * 100) === 0) {
                                                    return false;
                                                } else {
                                                    return true;
                                                }
                                            },                                           
                                            callbacks: {
                                                title:  function(tooltipItems, data) {
                                                        var tot = 0.0;
                                                        for (c = 0; c < tooltipItems.length; ++c) {
                                                            tot = tot + data.datasets[tooltipItems[c].datasetIndex].data[tooltipItems[c].index];
                                                        }
                                                        if (Math.trunc(tot * 100) === 0) {
                                                            return '';
                                                        }
                                                        else {
                                                            return '{{ 'Tot.'|trans }}: ' + tot;
                                                        }                                                    
                                                } 
                                            }                                            
                                        },
                                        legend: {
                                            position: "left",
                                            boxWidth: 300,
                                            onHover: function(event, legendItem) {
                                                this.chart.canvas.style.cursor = 'pointer';
                                            },                                            
                                            onClick: function(e, legendItem) {
                                                var index = legendItem.datasetIndex;
                                                var ci = this.chart;
                                                var alreadyHidden = (ci.getDatasetMeta(index).hidden === null) ? false : ci.getDatasetMeta(index).hidden;
                                                ci.data.datasets.forEach(function(e, i) {
                                                    var meta = ci.getDatasetMeta(i);
                                                    if (i !== index) {
                                                        if (!alreadyHidden) {
                                                            meta.hidden = meta.hidden === null ? !meta.hidden : null;
                                                        } else if (meta.hidden === null) {
                                                            meta.hidden = true;
                                                        }
                                                    } else if (i === index) {
                                                        meta.hidden = null;
                                                    }
                                                });
                                                ci.update();
                                            },
                                            labels: {
                                                filter: function (legendItem, data) {
                                                    var tot = 0.0;
                                                    var dt = data.datasets[legendItem.datasetIndex];
                                                    for (c = 0; c < dt.data.length; ++c) {
                                                        tot = tot + dt.data[c];
                                                    }
                                                
                                                    if (Math.trunc(tot * 100) === 0) {
                                                        return false;
                                                    } else {
                                                        return true;
                                                    }
                                                },                                           
                                                fontColor: "lightgray"
                                            }
                                        },
                                        responsive: true,
                                        scales: {
                                            xAxes: [{
                                                stacked: true,
                                                gridLines: { 
                                                    borderDash: [8, 4],
                                                    color: "#FFFFFF44", 
                                                    zeroLineColor: "#FFFFFF44" 
                                                },
                                                ticks: {                                                    
                                                        fontColor: "lightgray",
                                                        fontSize: 12
                                                }                                            
                                            }],
                                            yAxes: [{
                                                stacked: true,
                                                gridLines: { 
                                                    borderDash: [8, 4],                                                
                                                    color: "#FFFFFF44", 
                                                    zeroLineColor: "#FFFFFF44" 
                                                },                                             
                                                ticks: {                                                    
                                                        fontColor: "lightgray",
                                                        fontSize: 12,
                                                        min: 0
                                                }                                            
                                            }]
                                        }
                                    }
                                });                            
                            }                 
                        }
                     //   switch ()
                     //   window.myBar.update();
                    }
                });
            };   

            function getChart(tipo, data, search) {
                $.ajax({
                    url: "{{ path('app_getstatlist', {'tipo':':::TIPO'}) }}".replace(':::TIPO', tipo),
                    method: 'GET',
                    dataType: 'json',
                    success: function (d) {
                        $('#area-chart').html('');
                        for (c = 0; c < d.length; ++c) {
                            var dom_id = 'chart-' + String(d[c].id);
                            var dom = $(chartModel).attr('id', dom_id);
                            $('#area-chart').append(dom);
                            $(sprintf("#%s .tile-header h1", dom_id)).html(sprintf("<strong>%s</strong> <span></span>", d[c].descrizione)); 
                            $('#' + dom_id + ' .tile-header .controls .minimize').click(function() {
                                $(this).parent().parent().parent().toggleClass('minimized');
                                return false;
                            });  
                            $('#' + dom_id + ' .tile-header .controls .refresh').data('id', d[c].id);
                            $('#' + dom_id + ' .tile-header .controls .refresh').click(function() {
                                var el = $(this).parent().parent().parent();
                                elBlock(el);
                                GetChartData($(this).data('id'), data, search);
                                return false;
                            });               
                            elBlock(dom);
                            GetChartData(d[c].id, data, search);
                        }
                    }
                });            
                
            }

            function selectType(v) {
                var tipo = v;
                var search = $('#selectCustomer').val();
                var dt = $("#datepicker").data("DateTimePicker").getDate();
                var mese = (dt.month() + 1);
                var data = dt.year().toString() + '-' + mese.toString().padStart(2,'0') + '-' + dt.date().toString().padStart(2,'0');
                var y1 = dt.year();
                var y2 = {{ data|date('Y') }}
                if (y1 === y2) {
                    $('.block-menu-filter.menu-end .filter-menu').removeClass('filter-selected');
                    $('#type-' + tipo).addClass('filter-selected');
                    $('#id-cerca li h1').html($('#type-' + tipo).html());
                    chartData = new Array();                
                    getChart(tipo, data, search);
                }
                else {
                    location.href = "{{ path('stat_page', {'id':2,'data':':::DATA','type':':::TYPE','search':':::SEARCH'}) }}".replace(':::DATA', data).replace(':::TYPE', tipo).replace(':::SEARCH', search);
                }
            }             

            $("#selectCustomer").change(function() {
                if (typeof $('.btn.btn-custom.filter-menu.filter-selected').data('tipo-val') !== 'undefined') {
                    selectType($('.btn.btn-custom.filter-menu.filter-selected').data('tipo-val'));
                }
            }); 

            window.onload = function() {
                selectType('a');
            };
            $(function () {
                $('#datepicker').datetimepicker({
                    format: "DD/MM/YYYY",
                    date: new Date('2020-09-10'),
                    icons: {
                        time: "fa fa-clock-o",
                        date: "fa fa-calendar",
                        up: "fa fa-arrow-up",
                        down: "fa fa-arrow-down"
                    }
                });

                $("#datepicker").on("dp.show",function (e) {
                  var newtop = $('.bootstrap-datetimepicker-widget').position().top - 45;      
                  $('.bootstrap-datetimepicker-widget').css('top', newtop + 'px');
                });
                $("#datepicker").data("DateTimePicker").setDate('{{ data }}');
                $("#datepicker").on("dp.change", function (e) {
                    $(this).blur();
                    if (typeof $('.btn.btn-custom.filter-menu.filter-selected').data('tipo-val') !== 'undefined') {
                        selectType($('.btn.btn-custom.filter-menu.filter-selected').data('tipo-val'));
                    }
                }); 
            });

            
        </script>
    {% endif %}
{% endblock %}

{% block footer %}
{% endblock %}