{% extends '::base.html.twig' %}
{% block menuTop %}{% endblock %}
{% block templateCSS %}{% endblock %}

{% block highcharts4 %}{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('datatables/css/dataTables.bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{ asset('datatables/css/buttons.bootstrap.min.css')}}">
    <style>
        @font-face {font-family: ericsson; src: url({{ asset('fonts/ericsson.ttf') }})}
        table {font-size: 12px}
        #menuTop {margin-top: 10px}
        .cell-danger{background-color: #da5c58}
        .cell-success{background-color: #5cb85c}
        .eri-font {font-family: ericsson}
    </style>
{% endblock %}
{% block dashboard %}
<select id="cu" name="cu" class="form-control hidden">
    <option value="1">CAR & CA</option>
    <option value="3">México</option>
    <option value="2">{{'SUR' | trans | capitalize}}</option>
</select>
{% if idproyectos == 202 or idproyectos == 41 %}
<div class="page-header text-center text-muted">
    <!-- <h3 class="eri-font">CAR & CA</h3> -->
</div>
{% endif %}
<div class="row">
    <div id="graficaEstados" class="col-lg-8"></div>
    <div id="graficaProyectos" class="col-lg-4"></div>
</div>
<hr>
<table id="monitor" class="table table-condensed table-bordered nowrap" width="100%">
    <thead class="bg-info">
        <th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th>
    </thead>
    <tbody></tbody>
    <tfoot class="bg-info">
        <th></th>
        <th colspan="2" class="text-center">TOTAL:</th>
        <th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th>
    </tfoot>
</table>
<div class="modal" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h4 class="modal-title text-center" id="myModalLabel">{{ 'monitorii.detail' | trans }}</h4>
            </div>
            <div class="modal-body">
                <div class="load text-center" style="display:none">
                    <i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw text-primary"></i>
                </div>
                <div class="modal-body-c">
                    <table id="detalle" class="table table-condensed table-bordered nowrap" width="100%">
                        <thead class="bg-info">
                            <th></th><th></th><th></th><th></th><th></th><th></th>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">
                    <i class="fa fa-close"></i>
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}
{% block javascripts %}
    <script src="{{ asset('datatables/moment.min.js') }}"></script>
    <script src="{{ asset('datatables/js/datatables.min.js') }}"></script>
    <script src="{{ asset('datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('datatables/js/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('datatables/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.bootstrap.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.colVis.min.js') }}"></script>
    <script src="{{ asset('datatables/js/jszip.min.js') }}"></script>
    <script src="{{ asset('datatables/js/datetime-moment.js') }}"></script>
    <script src="{{ asset('highcharts5/code/highcharts.js') }}"></script>
    <script>
        // Api de Datatables para sumar data de un row
        jQuery.fn.dataTable.Api.register('sum()', function(){return this.flatten().reduce(function (a,b) {
                if ( typeof a === 'string' ) {a = a.replace(/[^\d.-]/g, '') * 1;}
                if ( typeof b === 'string' ) {b = b.replace(/[^\d.-]/g, '') * 1;}
                return a + b;
        },0);});
        $.fn.dataTable.moment('DD/MM/YYYY');

        var translation = {
            'REF' : '{{ 'SERVICE ID' | trans | title }}',
            'ID' : '{{ 'ticketDetail.nroticket' | trans | title }}',
            'SITIO' : '{{ 'ticketDetail.site' | trans | title }}',
            'EN PROCESO': '{{ 'EN PROCESO' | trans | title }}',
            'SUSPENDIDOS': '{{ 'SUSPENDIDOS' | trans | title }}',
            'TERMINADOS': '{{ 'TERMINADOS' | trans | title }}',
            'Proyecto' : '{{'Proyecto' | trans | title }}',
            'SEMA' : "{{ 'monitorii.previousweek' | trans | title }}",
            'SEMC' : "{{ 'monitorii.currentweek' | trans | title }}",
            'TOTAL RETRASO' : '{{ 'monitorii.total' | trans | title  }} {{ 'monitorii.delay' | trans | title  }}',
            'EN PROCESO RETRASO' : '{{ 'EN PROCESO' | trans | title  }} {{ 'monitorii.delay' | trans | title  }}',
            'TERMINADOS RETRASO' : '{{ 'TERMINADOS' | trans | title  }} {{ 'monitorii.delay' | trans | title  }}',
            'SUSPENDIDOS RETRASO' : '{{ 'SUSPENDIDOS' | trans | title  }} {{ 'monitorii.delay' | trans | title  }}',
            'ACTUAL TOTAL' : '{{ 'monitorii.currently' | trans | title  }} {{ 'monitorii.total' | trans | title  }}',
            'ACTUAL EN PROCESO' : '{{ 'monitorii.currently' | trans | title  }} {{ 'EN PROCESO' | trans | title  }}',
            'ACTUAL TERMINADOS' : '{{ 'monitorii.currently' | trans | title  }} {{ 'TERMINADOS' | trans | title  }}',
            'ACTUAL SUSPENDIDOS' : '{{ 'monitorii.currently' | trans | title  }} {{ 'SUSPENDIDOS' | trans | title  }}',
            'LPCT' : '{{ 'LISTO PARA CUTOVER' | trans | title  }}'
        },
        mapDetalleChart = [
            {estado: 'TOTAL', tipo: 1, idUser: null, idproyectos: '{{idproyectos}}', isCluster: '{{idcluster}}'},
            {estado: 'EN PROCESO', tipo: 1, idUser: null, idproyectos: '{{idproyectos}}', isCluster: '{{idcluster}}'},
            {estado: 'LISTO PARA CUTOVER', tipo: 1, idUser: null, idproyectos: '{{idproyectos}}', isCluster: '{{idcluster}}'},
            {estado: 'SUSPENDIDO', tipo: 1, idUser: null, idproyectos: '{{idproyectos}}', isCluster: '{{idcluster}}'},
            {estado: 'TOTAL', tipo: 2, idUser: null, idproyectos: '{{idproyectos}}', isCluster: '{{idcluster}}'},
            {estado: 'EN PROCESO', tipo: 2, idUser: null, idproyectos: '{{idproyectos}}', isCluster: '{{idcluster}}'},
            {estado: 'LISTO PARA CUTOVER', tipo: 2, idUser: null, idproyectos: '{{idproyectos}}', isCluster: '{{idcluster}}'},
            {estado: 'SUSPENDIDO', tipo: 2, idUser: null, idproyectos: '{{idproyectos}}', isCluster: '{{idcluster}}'},
        ],
        table, chart, chartP, tableD;

    $(document).ready(function() {
        
        var $table = $('#monitor'),
            $tableD = $('#detalle'),
            initCallback = function() {
                
                $header = $(table.table().header());
                if ($header.find('tr').length == 1)   
                $header.prepend('<tr><th colspan="2"></th><th colspan="5" class="text-center">'+translation['SEMA']+'</th><th colspan="5" class="text-center">'+translation['SEMC']+'</th></tr>');

                var totalesPie = [],
                    rows = table.rows().data(),
                    aux = {};
                
                for (var i = 0; i < rows.length; i++) {
                   
                   var r = rows[i];
                   aux[r.proyecto] = (aux[r.proyecto] || 0) + parseInt(r['TOTAL']);
                };

                for (i in aux) {
                    totalesPie.push({
                        name: i,
                        y: aux[i]
                    });
                }

                totalesPie = totalesPie.slice(0);
                totalesPie.sort(function(a,b) {
                    return b.y - a.y;
                });
                totalesPie[0].selected = true;
                totalesPie[0].sliced = true;

                if (typeof chart !== 'undefined' && typeof chartP !== 'undefined') {
                    chart.destroy();
                    chartP.destroy();
                }
                
                chart = Highcharts.chart('graficaEstados', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: '{{'Resumen Gerencial' | trans}}'
                    },
                    xAxis: {
                        categories: [
                            translation['TOTAL RETRASO'],
                            translation['EN PROCESO RETRASO'],
                            '{{ 'monitorii.delay' | trans | title  }} ' + translation['LPCT'],
                            translation['SUSPENDIDOS RETRASO'],
                            translation['ACTUAL TOTAL'],
                            translation['ACTUAL EN PROCESO'],
                            '{{ 'monitorii.currently' | trans | title  }} ' + translation['LPCT'],
                            translation['ACTUAL SUSPENDIDOS'],
                        ],
                        plotLines: [{
                            value: 3.5,
                            color: 'gray',
                            dashStyle: 'shortdash',
                            width: 2
                        }],
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Total (sites)'
                        }
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0,
                            pointWidth: 30,
                            dataLabels: {
                                enabled: true
                            },
                        },
                        series: {
                            cursor: 'pointer',
                            events: {
                                click: function (event) {

                                    var params = mapDetalleChart[event.point.index];
                                    
                                    generateModal(getDetalleChart(params));
                                }
                            }
                        }
                    },
                    tooltip: {
                        enabled: false
                    },
                    series: [{
                        name: 'Total Sites',
                        data: calcularFooter()
                    },{
                        name:'Your search',
                        data: [0,0,0,0,0,0,0,0],
                        visible: false
                    }]
                });

                chartP = Highcharts.chart('graficaProyectos', {
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },
                    title: {
                        text: '{{'Resumen por Proyecto' | trans }}'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.y}</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true
                            },
                        }
                    },
                    series: [{
                        name: 'Sites',
                        colorByPoint: true,
                        data: totalesPie
                    }]
                });
            };
        
        tableD = $tableD.DataTable({
            columns: [
                {data:'PROYECTO', title: 'Proyecto'},
                {data:'SUPERVISOR', title: 'Supervisor'},
                {data:'ESTADO', title: 'Estado'},
                {data:'REF', title: 'Ref'},
                {data:'SITIO', title: 'Sitio'},
                {data:'FECHA', title: 'Fecha'},
            ],
            dom: '<"row"<"col-lg-5 col-md-5" B><"col-lg-3 col-md-2" l><"col-lg-4 col-md-3" f>>rt<"row"<"col-lg-4 col-md-4" i><"col-lg-8 col-md-8" p>>',
            buttons: [{
                extend: 'excel',
                titleAttr: '{{'general.export' | trans }}',
                text: '<i class="fa fa-file-excel-o"></i>',
                filename: $tableD.attr('id').toLowerCase() + '_' + moment().format('YYMMDD')
            }]
        });

        table = $table.DataTable({
            ajax: {
                url: "{{path('monitor_supervisores_cu',{'idproyectos':idproyectos})}}",
                type: 'GET',
                data: function(d) {
                    d.clusterId = $('#cu').val()
                }
            },
            sAjaxDataProp: 'monitor',
            rowId: 'id',
            paging: false,
            order: [],
            columnDefs: [
                { targets: [0], visible: false }
            ],
            dom: '<"row"<"col-lg-5 col-md-5" B><"col-lg-3 col-md-2" i><"col-lg-4 col-md-3" f>>rt',
            columns: [
                {data: 'idproyectos', title: 'idproyectos'},
                {data: 'proyecto', title: '{{'Proyecto' | trans | title }}'},
                {data: 'SUPERVISOR', title: 'Supervisor'},
                {data: 'TOTAL', title: 'Total', searchable: false},
                {data: 'EN PROCESO', title: translation['EN PROCESO'], searchable: false, render: function(data, type, row) {
                    return createDetailButton("{{ path('monitor_getDetalleByEstadoCU') }}", {
                        tipo: 1,
                        estado: 'EN PROCESO',
                    }, data, row);
                }},
                {data: 'LISTO PARA CUTOVER', title: translation['LPCT'], searchable: false, render: function(data, type, row) {
                    return createDetailButton("{{ path('monitor_getDetalleByEstadoCU') }}", {
                        tipo: 1,
                        estado: 'LISTO PARA CUTOVER',
                    }, data, row);
                }},
                {data: 'SUSPENDIDOS', title: translation['SUSPENDIDOS'], searchable: false, render: function(data, type, row) {
                    return createDetailButton("{{ path('monitor_getDetalleByEstadoCU') }}", {
                        tipo: 1,
                        estado: 'SUSPENDIDO',
                    }, data, row);
                }},
                {data: 'TERMINADOS', title: translation['TERMINADOS'], searchable: false, render: function(data, type, row) {
                    return createDetailButton("{{ path('monitor_getDetalleByEstadoCU') }}", {
                        tipo: 1,
                        estado: 'TERMINADO',
                    }, data, row);
                }},
                {data: 'TOTAL ', title: 'Total', searchable: false},
                {data: 'EN PROCESO ', title: translation['EN PROCESO'], searchable: false, render: function(data, type, row) {
                    return createDetailButton("{{ path('monitor_getDetalleByEstadoCU') }}", {
                        tipo: 2,
                        estado: 'EN PROCESO',
                    }, data, row);
                }},
                {data: 'LISTO PARA CUTOVER ', title: translation['LPCT'], searchable: false, render: function(data, type, row) {
                    return createDetailButton("{{ path('monitor_getDetalleByEstadoCU') }}", {
                        tipo: 2,
                        estado: 'LISTO PARA CUTOVER',
                    }, data, row);
                }},
                {data: 'SUSPENDIDOS ', title: translation['SUSPENDIDOS'], searchable: false, render: function(data, type, row) {
                    return createDetailButton("{{ path('monitor_getDetalleByEstadoCU') }}", {
                        tipo: 2,
                        estado: 'SUSPENDIDO',
                    }, data, row);
                }},
                {data: 'TERMINADOS ', title: translation['TERMINADOS'], searchable: false, render: function(data, type, row) {
                    return createDetailButton("{{ path('monitor_getDetalleByEstadoCU') }}", {
                        tipo: 2,
                        estado: 'TERMINADO',
                    }, data, row);
                }},
            ],
            buttons: [
                {
                    text: '<i class="fa fa-refresh"></i>',
                    titleAttr: '{{'general.update' | trans }}',
                    className: 'updateTable',
                    action: function() {

                        var t = this, 
                        prev = t.text();
                             
                        t.text('<i class="fa fa-spin fa-refresh text-primary"></i>');                        
                        table.ajax.reload(function() {
                            initCallback();
                            t.text(prev);
                        });
                    }
                },
                {
                    extend: 'excel',
                    titleAttr: '{{'general.export' | trans }}',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    filename: $table.attr('id').toLowerCase() + '_' + moment().format('YYMMDD')
                },
                {% if idproyectos == 202 or idproyectos == 41 %}
                {
                    extend: 'collection',
                    text: '<i class="fa fa-globe fa-lg text-primary"></i> Cluster',
                    autoClose: true,
                    buttons: [
                        {
                            text: 'CAR & CA',
                            action: function ( e, dt, node, config ) {
                                $('#cu').val(1);
                                cambiaIdCluster($('#cu').val());
                                $('.page-header h3').text(this.text());
                                $('.updateTable').click();
                            }
                        },
                        {
                            text: 'Mexico',
                            action: function ( e, dt, node, config ) {
                                $('#cu').val(3);
                                cambiaIdCluster($('#cu').val());
                                $('.page-header h3').text(this.text());
                                $('.updateTable').click();
                            }
                        },
                        {
                            text: 'Sur',
                            action: function ( e, dt, node, config ) {
                                $('#cu').val(2);
                                cambiaIdCluster($('#cu').val());
                                $('.page-header h3').text(this.text());
                                $('.updateTable').click();
                            }
                        }
                    ]
                }
                {% endif %}
            ],
            createdRow: function(row) {
                $('td', row).eq(2).addClass('cell-danger');
                $('td', row).eq(7).addClass('cell-success');
            },
            initComplete: initCallback
        });

        setInterval(function() {
            $('.updateTable').click();
        }, 1000*60*10);
        
        $('body').on('click', '.openModal', open);
        
        table.on('search.dt', function (e, settings) {
            
            var cols = [3,4,5,6,7,8,9,10,11,12];

            for (var i = 0; i < cols.length; i++) {
                
                var col = table.column(cols[i], {search:'applied'}); 
                $(col.footer()).html(col.data().sum());
            }

            if (typeof chart !== 'undefined') {
                if (table.rows().count() == table.rows({search:'applied'}).count()) {
                    chart.series[1].update({
                        visible: false
                    });
                } else {
                    chart.series[1].update({
                        visible: true
                    });
                    chart.series[1].setData(calcularFooter());
                }
            }
        });
    });
        
        function getDetalleChart(params) {

            return '{{ path("monitor_getDetalleByEstadoCU") }}' + '?' + $.param(params);
        }

        function calcularFooter() {
            
            var t = [];

            $(table.table().footer(), 'tr').find('th:gt(0)').each(function(index, el) {
                t.push(parseInt($(this).text()));   
            });

            t[0] = t[0] - t[4];
            t[5] = t[5] - t[9];
            t.splice(4,1);
            t.pop();

            return t;
        }

        function createDetailButton(path, params, value, row) {

            if (value == 0) return value;

            params.idproyectos = row.idproyectos;
            params.iduser = row.id;
            params = $.param(params);
            path += '?';

            return '<a style="cursor:pointer" class="openModal" data-toggle="modal" data-remote-target="#myModal" data-load-remote="'+path+params+'">'+value+'</a>';
        }
        
        function open() {
            
            generateModal( $(this).attr('data-load-remote') );
        }
            
        function generateModal(data) {
            
            $('#myModal').modal('show');
            $('.load').fadeIn();
            tableD.rows().remove().draw();

            $.getJSON( data, function(data) {
                
                if ( data.length == 0 ) {

                    $('#myModal').modal('hide');    
                    $('.load').hide(); 
                    return false;
                } 
                tableD.rows.add(data).draw();
                $('.load').hide(); 
            }); 
        }

        function cambiaIdCluster(idNuevo) {

            for (var i = 0; i < mapDetalleChart.length; i++) {
                mapDetalleChart[i].isCluster = idNuevo
            }
        }
    </script>
{% endblock %}