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

{% endblock %}

{% block dashboard %}
    <style>
        .panel.with-nav-tabs .panel-heading{
            padding: 5px 5px 0 5px;
        }
        .panel.with-nav-tabs .nav-tabs{
            border-bottom: none;
        }
        .panel.with-nav-tabs .nav-justified{
            margin-bottom: -1px;
        }
        /*** PANEL PRIMARY ***/
        .with-nav-tabs.panel-primary .nav-tabs > li > a,
        .with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
            color: #fff;
        }
        .with-nav-tabs.panel-primary .nav-tabs > .open > a,
        .with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
        .with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
            color: #fff;
            background-color: #3071a9;
            border-color: transparent;
        }
        .with-nav-tabs.panel-primary .nav-tabs > li.active > a,
        .with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
            color: #428bca;
            background-color: #fff;
            border-color: #428bca;
            border-bottom-color: transparent;
        }
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
            background-color: #428bca;
            border-color: #3071a9;
        }
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
            color: #fff;
        }
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
            background-color: #3071a9;
        }
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
            background-color: #4a9fe9;
        }
        /********************************************************************/

        .isloading-wrapper.isloading-right{margin-left:10px;}
        .isloading-overlay{position:relative;text-align:center;}
        .isloading-overlay .isloading-wrapper{background:#FFFFFF;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;display:inline-block;margin:0 auto;padding:10px 20px;top:10%;z-index:9000;}
        /*Glyphicon Spinner*/
        .glyphicon-spin {
            -animation: spin .9s infinite linear;
            -webkit-animation: spin2 .9s infinite linear;
        }

        @-webkit-keyframes spin2 {
            from { -webkit-transform: rotate(0deg);}
            to { -webkit-transform: rotate(360deg);}
        }

        @keyframes spin {
            from { transform: scale(1) rotate(0deg);}
            to { transform: scale(1) rotate(360deg);}
        }
        input {
            -webkit-appearance: textfield;
            background-color: white;
            -webkit-rtl-ordering: logical;
            cursor: text;
            padding: 0px;
            border-width: 1px;
            border-style: solid;
            border-color: black !important;
            border-image: initial;
        }
        .dataTables_length select {
            width: 60px;
        }
        .dataTables_length label {
            font-weight: normal;
        }
        div.dt-buttons {
            position: relative !important;
            float: right !important;
            margin-right: -5px !important;
        }
        .font-table{
            font-size: 10pt;
            font-weight: 400;
        }
        .header_dt{
            color: #fff;
            background-color: #428bca;
            border-color: #3071a9 !important;
        }
        /*table.dataTable thead th {
            padding: 10px 18px !important;
            border-bottom: 1px solid #3071a9 !important;
        }*/
    </style>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script>
        var columnaODT = [
            { "data": "country" }, { "data": "customer" }, { "data": "proyecto" },
            { "data": "site_id" },{ "data": "site_name" },{ "data": "asp" },
            { "data": "Status_Selected" }, { "data": "Fecha_Started" }, { "data": "Fecha_Sent" },
            { "data": "Dif_Hours_Event" }, { "data": "OTD" }
        ];
        var columnaFTR = [
            { "data": "country" }, { "data": "customer" }, { "data": "proyecto" },
            { "data": "site_id" },{ "data": "site_name" },{ "data": "asp" },
            { "data": "fecha_started" }, { "data": "FirstTimeAprov" }
        ];
        var columnaEFIC = [
            { "data": "country" }, { "data": "customer" }, { "data": "proyecto" },
            { "data": "site_id" },{ "data": "site_name" },{ "data": "asp" },
            { "data": "fecha_started" }, { "data": "floor_count_approv" }, { "data": "tower_count_approv" },
            { "data": "approved_range" }
        ];
        function resetCombos(idComboActual){
            switch (idComboActual){
                case 'cmbCountry':
                    $('#cmbCustomer').empty();
                    $('#cmbCustomer').append('<option value="TODOS">{{"inbox.all" | trans}}</option>');
                    $('#cmbProject').empty();
                    $('#cmbProject').append('<option value="TODOS">{{"inbox.all" | trans}}</option>');
                    $('#cmbAsp').empty();
                    $('#cmbAsp').append('<option value="TODOS">{{"inbox.all" | trans}}</option>');
                    break;
                case 'cmbCustomer':
                    $('#cmbProject').empty();
                    $('#cmbProject').append('<option value="TODOS">{{"inbox.all" | trans}}</option>');
                    $('#cmbAsp').empty();
                    $('#cmbAsp').append('<option value="TODOS">{{"inbox.all" | trans}}</option>');
                    break;
                case 'cmbProject':
                    $('#cmbAsp').empty();
                    $('#cmbAsp').append('<option value="TODOS">{{"inbox.all" | trans}}</option>');
                    break;
                case '':

                    break;
            }
        }

        function llenarCombo(idCombo,name,params){
            var values = {'name': name, 'params': params};

            $.getJSON('{{path('reportMillicon_loadDataCmb')}}', values, function (data) {
                for (var j=0; j<data.length; j++){
                    $("#" + idCombo).append('<option value="' + data[j].id + '">' + data[j].name + '</option>');
                }
                $.isLoading("hide");
            });
        }
        function llenarCombos() {
            var data = {};
            var strList = 'customer,project,asp';
            data['country'] = $("#cmbCountry").val();
            data['listObj'] = strList;
            $.getJSON('{{path('reportMillicon_loadDataCombo')}}', data, function (data) {
                var arrList = strList.split(',');
                for (var i=0; i<arrList.length; i++){
                    switch(arrList[i]){
                        case 'customer':
                                var customer = data.customer;
                                for (var j=0; j<customer.length; j++){
                                    $("#cmbCustomer").append('<option value="' + customer[j].id + '">' + customer[j].name + '</option>');
                                }
                            break;
                        case 'project':
                            var project = data.project;
                            for (var j=0; j<project.length; j++){
                                $("#cmbProject").append('<option value="' + project[j].id + '">' + project[j].name + '</option>');
                            }
                            break;
                        case 'asp':
                            var asp = data.asp;
                            for (var j=0; j<asp.length; j++){
                                $("#cmbAsp").append('<option value="' + asp[j].id + '">' + asp[j].name + '</option>');
                            }
                            break;
                    }
                }
                $.isLoading("hide");
            });
        };

        function getReportData(render, config){
            var params = {
                'reportType': config.reportType,
                'reportCategory': config.reportCategory,
                'startDate': $('#txtStartDate').val(),
                'endDate': $('#txtEndDate').val(),
                'country': $('#cmbCountry').val(),
                'customer': $('#cmbCustomer').val(),
                'project': $('#cmbProject').val(),
                'asp': $('#cmbAsp').val(),
            };
            if (config.reportType == 'GRAPH'){
                $.getJSON('{{path('reportMillicon_loadDataGraph')}}', params, function (data) {
                    if (data.length > 0) {
                        var categoria = getDataToObject(data, Object.keys(data[0]), 0);
                        var chart = getDataToObjectBar(data, Object.keys(data[0]));
                        var options = {
                            'title': config.title,
                            'url'  : '{{path('reportMillicon_loadDataGraphDet')}}',
                            'maxValueYaxis': 100,
                            'rawData' : data,
                            'params'  : params,
                            'target_line': config.target_line,
                            'target_line2': config.target_line2,
                            'target_line3': config.target_line3
                        };
                        switch (config.graphType){
                            case 'Line':
                                createChartLinea(render,categoria,chart,options);
                                break;
                            case 'Bar':
                                createChartBar(render,categoria,chart,options);
                                break;
                        }
                    }else{
                        $("#"+render).empty();
                        $("#"+render).append('<div class="alert alert-warning" role="alert">NO DATA FOUND</div>');
                    }
                });
            }else if (config.reportType == 'TABLE'){
                createTable(config.reportCategory, render, config.dtRender);
                buildDatatable(render,config.columna,params);
            }
            $.isLoading("hide");
        }
        function array_key_exists (key, search) {
                if (!search || (search.constructor !== Array && search.constructor !== Object)) {
                    return false
                }
                return key in search
            }
        function getDataToObject(data, header, key) {
            var arrayReturn = new Array();
            for (var i = 0; i < data.length; i++) {
                var valor = data[i][header[key]];
                arrayReturn.push(valor);
            }
            return arrayReturn;
        }

        function getDataToObjectBar(data, header) {
            var arrayReturn = new Array();
            var arrData=[];
            for (var j=1; j<header.length; j++){
                arrData[j-1] = new Array();
            }
            for (var j = 1; j < header.length; j++) {
                for (var i = 0; i < data.length; i++) {
                    arrData[j-1].push(parseFloat(data[i][header[j]]));
                }
                arrayReturn.push({'name': header[j], 'data': arrData[j-1], 'dataLabels': {'enabled': true}})
            }
            return arrayReturn;
        }

        function createChartLinea(render, categoria, data, config){
            var options = {
                chart: {
                    height: 300,
                    marginBottom: 100
                    //, width: 1200 // no definir el ancho para que sea automatico
                },
                xAxis: {
                    categories: categoria,
                    labels: {
                        rotation: -30,
                        style: {
                            fontSize: '8px'
                        }
                    },
                    overflow: 'justify'
                },
                yAxis: [
                    {
                        min: 0,
                        max: config.maxValueYaxis,
                        title: {text: ''},
                        plotLines: [
                            {
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }
                        ]
                    }
                    ,
                    {
                        title: {text: ''},
                        min: 0,
                        opposite: true
                    }
                    ,
                    {
                        title: {text: ''},
                        min: 0,
                        opposite: true
                    }
                ]
                ,
                title: {text: config.title},
                tooltip: {shared: true},
                colors: ['#a1c517', '#0082b6', '#b88fef', '#009045', '#db004f'],
                series: data
            };

            if (config.target_line != undefined && config.target_line !=null)
            {
                options.yAxis[0].plotLines[options.yAxis[0].plotLines.length] =
                {
                    value: config.target_line[0],
                    color: '#2e8201', //Verde Grama
                    dashStyle: 'ShortDot',
                    width: 2,
                    zIndex: 4,
                    label: {
                        verticalAlign: 'bottom',
                        textAlign: 'right',
                        y: 0,
                        style: {
                            fontSize: '8px'
                        },
                        text: config.target_line[1],
                    }
                };
            }

            if (config.target_line2 != undefined && config.target_line2 !=null)
            {
                options.yAxis[0].plotLines[options.yAxis[0].plotLines.length] =
                {
                    value: config.target_line2[0],
                    color: '#7cf23c', //Verde Manzana
                    dashStyle: 'ShortDot',
                    width: 2,
                    zIndex: 4,
                    label: {
                        verticalAlign: 'bottom',
                        textAlign: 'right',
                        y: 0,
                        style: {
                            fontSize: '8px'
                        },
                        text: config.target_line2[1],
                    }
                };
            }

            if (config.target_line3 != undefined && config.target_line3 !=null)
            {
                options.yAxis[0].plotLines[options.yAxis[0].plotLines.length] =
                {
                    value: config.target_line3[0],
                    color: '#f7e81d', //Amarillo
                    dashStyle: 'ShortDot',
                    width: 2,
                    zIndex: 4,
                    label: {
                        verticalAlign: 'bottom',
                        textAlign: 'right',
                        y: 0,
                        style: {
                            fontSize: '8px'
                        },
                        text: config.target_line3[1],
                    }
                };
            }

            // OPCIONAL: El path para la tabla detallada
            if (config.url != null && config.url != undefined)
            {
                options['plotOptions'] =
                {
                    series:
                    {
                        cursor: 'pointer',
                        borderWidth: 0,
                        dataLabels:
                        {
                            enabled: true
                        },
                        point:
                        {
                            events:
                            {
                                click: function (e)
                                {
                                    var parametrosUrl = {
                                        'reportType': config.params.reportType,
                                        'reportCategory': config.params.reportCategory,
                                        'startDate': config.params.startDate,
                                        'endDate': config.params.endDate,
                                        'country': config.params.country,
                                        'customer': config.params.customer,
                                        'project': config.params.project,
                                        'asp': config.params.asp,
                                        'selected_item': categoria[this.x],
                                        'selected_serie': this.series.name
                                    };
                                    if (config.rawData != null)
                                    {
                                        parametrosUrl['row'] = config.rawData[this.x];
                                    }
                                    var prefix = (config.title == null || config.title == '') ? '' : config.title + ' - ';
                                    //console.log(parametrosUrl);
                                    generateModal(config.url, parametrosUrl, true, categoria[this.x],this.series.name+'='+ this.y);
                                }
                            }
                        }
                    }
                };
            }
            return $('#' + render).highcharts(options);
        }

        function createChartBar(render, categoria, data, config) {
            var options = {
                chart: {
                    renderTo: render,
                    type: 'column',
                    spacingBottom: 5,
                    spacingTop: 10,
                    spacingLeft: 1,
                    spacingRight: 1,
                    height: 400
                },
                title: {
                    text: config.title
                },
                xAxis: {
                    categories: categoria,
                    title: {
                        text: null
                    },
                    labels: {
                        rotation: -30,
                        style: {
                            fontSize: '8px'
                        }
                    },
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '',
                        align: 'high'
                    },
                    labels: {
                        overflow: 'justify',
                        formatter: function () {
                            return this.value;
                        }
                    }
                },
                legend: {
                    reversed: true
                },
                colors: [
                    '#0082b6', '#5cb85c', '#d9534f', '#009045', '#f4c6ea', '#17c5bc'
                ],
                series: data
            };

            // OPCIONAL: El path para la tabla detallada
            if (config.url != null && config.url != undefined) {
                options['plotOptions'] = {
                    series: {
                        cursor: 'pointer',
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true
                        },
                        point: {
                            events: {
                                click: function (e) {
                                    var parametrosUrl = {
                                        'reportType': config.params.reportType,
                                        'reportCategory': config.params.reportCategory,
                                        'startDate': config.params.startDate,
                                        'endDate': config.params.endDate,
                                        'country': config.params.country,
                                        'customer': config.params.customer,
                                        'project': config.params.project,
                                        'asp': config.params.asp,
                                        'selected_item': categoria[this.x],
                                        'selected_serie': this.series.name
                                    };
                                    if (config.rawData != null) {
                                        parametrosUrl['row'] = config.rawData[this.x];
                                    }
                                    var prefix = (config.title == null || config.title == '') ? '' : config.title + ' - ';
                                    //console.log(parametrosUrl);
                                    generateModal(config.url, parametrosUrl, true, categoria[this.x],this.series.name+'='+ this.y);
                                }
                            }
                        }
                    }
                };
            }

            $('#' + render).highcharts(options);
            $('#' + render + ' .highcharts-data-labels text').each(
                    function (index) {
                        if ($(this).text() == '0') {
                            $(this).hide();
                        }
                    }
            );
        }

        function createTable(tipoReporte, tableRender, dtRender){
            var strHeader = '';
            var strFooter = '';
            var strTable = '<table id="' + tableRender + '" class="display nowrap" width="100%"><thead><tr class="header_dt">';
            $('#' + dtRender).empty();
            switch (tipoReporte){
                case 'OTD':
                    strHeader = '<th>Country</th><th>Customer</th><th>Project</th>' +
                            '<th>Site Id</th><th>Site Name</th>' +
                            '<th>ASP</th><th>Status</th><th>Started</th><th>First Sent</th>' +
                            '<th>Diff. Hours</th><th>OTD Category</th>';
                    break;
                case 'FTR':
                    strHeader = '<th>Country</th><th>Customer</th><th>Project</th>' +
                            '<th>Site Id</th><th>Site Name</th>' +
                            '<th>ASP</th><th>Started</th><th>First Time Approv.</th>';
                    break;
                case 'EFIC':
                    strHeader = '<th>Country</th><th>Customer</th><th>Project</th>' +
                            '<th>Site Id</th><th>Site Name</th>' +
                            '<th>ASP</th><th>Started</th><th>Floor Count Approv.</th>' +
                            '<th>Tower Count Approv.</th><th>Approved Range</th>';
                    break;
            }

            strTable += strHeader + '</tr></thead><tbody id="tbody' + tableRender + '"></tbody>' + strFooter + '</table>';
            $('#' + dtRender).empty();
            $('#' + dtRender).html(strTable);
            $('#' + tableRender + ' thead tr').clone(true).appendTo( '#' + tableRender + ' thead' );
            $('#' + tableRender + ' thead tr:eq(1) th').each( function (i) {
                var title = $(this).text();
                $(this).html( '<input type="text" style="width: 100%; margin: 0px; padding: 0px;"/>' );

                $( 'input', this ).on( 'keyup change', function () {
                    if ( $.fn.DataTable.isDataTable( '#' + tableRender ) ) {
                        var table = $('#' + tableRender).DataTable();
                        if ( table.column(i).search() !== this.value ) {
                            table
                                    .column(i)
                                    .search( this.value )
                                    .draw();
                        }
                    }
                } );
            } );
        }
        function buildDatatable(render, columnas, params){
            table = $('#'+render).DataTable( {
                dom: '<"row" <"col-md-12 text-right"B>> <"row" <"col-md-6 "l> <"col-md-6"f>>rtip',
                scrollY: '60vh',
                scrollX: true,
                scrollCollapse: true,
                orderCellsTop: true,
                "ajax": {
                    "url": "{{path('reportMillicon_loadDataGraph')}}",
                    "type": "POST",
                    data:  params
                },
                columns: columnas,
                /*columnDefs: [
                    {
                        "render": function ( data, type, row ) {
                            if (data == null){
                                return '-'
                            }else
                                return data +' %';
                        },
                        "targets": 6
                    },
                    {
                        "render": function ( data, type, row ) {
                            if (data == null){
                                return '-'
                            }else
                                return data;
                        },
                        "targets": [3,4,5]
                    },
                    {
                        targets: [3,4,5,6],
                        className: 'dt-body-right'
                    }
                ],*/
                /*fnRowCallback: function(row, data, index){
                    /!*if(data.Availability_Percentage >= 0 && data.Availability_Percentage <=25){
                        //$(row).find('td').css('color', 'red');
                        $(row).find('td:eq(6)').css('color', 'red');
                        $(row).find('td:eq(6)').css('font-weight', '800');
                    }
                    if(data.Availability_Percentage > 25 && data.Availability_Percentage <=50){
                        //$(row).find('td').css('color', 'blue');
                        $(row).find('td:eq(6)').css('color', '#ff9900');
                        $(row).find('td:eq(6)').css('font-weight', '900');
                    }*!/
                },
                footerCallback: function(row, data, start, end, display) {
                    /!*var api = this.api();
                    api.columns('.sum', {
                        page: 'current'
                    }).every(function() {
                        var sum = this
                                .data()
                                .reduce(function(a, b) {
                                    var x = parseInt(a) || 0;
                                    var y = parseInt(b) || 0;
                                    return x + y;
                                }, 0);
                        $(this.footer()).html(sum);
                    });*!/
                },*/
                lengthMenu: [[10, 25, 50, 100, 250, 500], [10, 25, 50, 100, 250, 500]],
                buttons: [
                    {
                        extend:'excel',
                        title: params.reportCategory
                    }
                ]
            } );
        }

        function generateModal(ruta, objParams, numerar, title, subtitle) {
            $('#myModal .tabla-datos').empty().isLoading({
                text: "Loading"
            });
            $('#myModal .punto-grafica').empty().hide();
            $('#myModal .modal_detalle_titulo').empty();

            if (title != null) {
                $('#myModal .modal_detalle_titulo').html(title);
            }
            else {
                $('#myModal .modal_detalle_titulo').html('{{'monitorii.detail' | trans }}');
            }

            if (subtitle != null) {
                $('#myModal .punto-grafica').html(subtitle).show();
            }
            
            $.getJSON(ruta, objParams, function (data) {
                if (data.length == 0) {
                    $('#myModal').modal('hide');
                    $('#myModal .tabla-datos').isLoading('hide');
                    return false;
                }
                var monitor = data;
                var header = Object.keys(data[0]);
                var table = '<table id="tableData" class="tabla-detalle table table-striped table-hover table-condensed table-responsive"><thead><tr class="bg-primary">';

                if (numerar == true) {
                    table += "<th class='text-center'>#</th>";
                }
                for (var j = 0; j < header.length; j++) {
                    table += "<th class='text-center'>" + header[j] + "</th>"
                }
                table += "</tr></thead>";

                for (var i = 0; i < monitor.length; i++) {
                    table += "<tr class='font-table'>";
                    if (numerar == true) {
                        table += "<td>" + (i + 1) + "</td>";
                    }
                    for (var j = 0; j < header.length; j++) {
                        // Se verifica si el valor a imprimir es null para evitar el toString de null como 'NULL'
                        table += "<td>" + (monitor[i][header[j]] == null ? '&nbsp;' : monitor[i][header[j]]) + "</td>";
                    }
                    table += "</tr>";
                }
                table += "</table>";
                $('#myModal .tabla-datos').isLoading('hide').html(table);
            });
            $('#myModal').modal('show');
        }

        $(document).ready(function(){
            $('#txtStartDate').datepicker({
                dateFormat: 'yy-mm-dd',
                onClose: function (selectedDate) {
                    $("#txtEndDate").datepicker("option", "minDate", selectedDate);
                }
            });
            $('#txtEndDate').datepicker({
                dateFormat: 'yy-mm-dd',
            });

            var f = new Date();
            var month = (f.getMonth() + 1);

            if (month < 10) month = '0' + month;
            var dateI = f.getFullYear() + '-' + month + "-01";
            var dateF = f.getFullYear() + '-' + month + "-" + f.getDate();

            $('#txtStartDate').val(dateI);
            $('#txtEndDate').val(dateF);

            $('#cmbCountry').change(function(){
                if ($('#cmbCountry').val() != 'TODOS'){
                    $.isLoading({
                        text: "Loading"
                    });
                    //llenarCombos();
                    var params = {'country': $('#cmbCountry').val()};
                    llenarCombo('cmbCustomer', 'customer', params);
                }else{
                    resetCombos('cmbCountry');
                }
            });
            $('#cmbCustomer').change(function(){
                if ($('#cmbCustomer').val() != 'TODOS'){
                    $.isLoading({
                        text: "Loading"
                    });
                    var params = {'country': $('#cmbCountry').val(), 'customer': $('#cmbCustomer').val()};
                    llenarCombo('cmbProject', 'project', params);
                }else{
                    resetCombos('cmbCustomer');
                }
            });
            $('#cmbProject').change(function(){
                if ($('#cmbProject').val() != 'TODOS'){
                    $.isLoading({
                        text: "Loading"
                    });
                    var params = {'country': $('#cmbCountry').val(),
                                  'customer': $('#cmbCustomer').val(),
                                  'project':  $('#cmbProject').val() };
                    llenarCombo('cmbAsp', 'asp', params);
                }else{
                    resetCombos('cmbProject');
                }
            });

            $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
                $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
                try{
                    $('#chart1').highcharts().reflow();
                    $('#chart2').highcharts().reflow();
                    $('#chart3').highcharts().reflow();
                }catch(err) {
                    //console.log(err.message);
                }
            } );

            $('#btnGenerate').click(function(){
                if ($('#cmbCountry').val() == 'TODOS'){
                    alert('Select Country');
                    return false;
                }
                $.isLoading({
                    text: "Loading"
                });
                var config1 = { 'graphType': 'Line',
                    'target_line': [90,'Streched = 90'],'target_line2': [80,'Commit = 80'], 'target_line3': [70,'Robust = 70'],
                    'reportType': 'GRAPH', 'reportCategory': 'OTD', 'title': '% On Time Delivery', 'subtitle': ''
                };
                var config2 = {
                    'reportType': 'TABLE', 'reportCategory': 'OTD', 'tableRender': 'table1', 'dtRender': 'datatable1',
                    'columna': columnaODT
                };
                var config3 = { 'graphType': 'Line',
                    'reportType': 'GRAPH', 'reportCategory': 'FTR', 'title': '% First Time Right', 'subtitle': ''
                };
                var config4 = {
                    'reportType': 'TABLE', 'reportCategory': 'FTR', 'tableRender': 'table2', 'dtRender': 'datatable2',
                    'columna': columnaFTR
                };
                var config5 = {'graphType': 'Bar',
                    'reportType': 'GRAPH', 'reportCategory': 'EFIC', 'title': 'Efficiency', 'subtitle': ''
                };
                var config6 = {
                    'reportType': 'TABLE', 'reportCategory': 'EFIC', 'tableRender': 'table3', 'dtRender': 'datatable3',
                    'columna': columnaEFIC
                };
                getReportData('chart1',config1);
                getReportData('table1',config2);

                getReportData('chart2',config3);
                getReportData('table2',config4);

                getReportData('chart3',config5);
                getReportData('table3',config6);
            });
        })
    </script>

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title"><a data-toggle="collapse" href="#collapse1">Filters</a></h3>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
            <div id="panelFilter" class="panel-body">
                <div class="row">
                    <div class="col-md-3 form-group">
                        <label for="txtStartDate">{{'monitor.etiqueta.fechaI' | trans}}: </label>
                        <input type="text" class="form-control" id="txtStartDate" name="txtStartDate" value="">
                    </div>
                    <div class="col-md-3 form-group">
                        <label for="txtEndDate">{{'monitor.etiqueta.fechaF' | trans}}: </label>
                        <input type="text" class="form-control" id="txtEndDate" name="txtEndDate" value="">
                    </div>
                    <div class="col-md-3 form-group">
                        <label for="cmbCountry">{{'monitores.pais' | trans}}: </label>
                        <select class="form-control" id="cmbCountry" name="cmbCountry">
                            <option value="TODOS">{{"inbox.all" | trans}}</option>
                            {%for country in countries%}
                                <option value="{{country.id}}">{{country.name}}</option>
                            {%endfor%}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <img id="logo" class="pull-right" style="padding-left: 10px;" src="{{ asset('images/LogoTIGO.png') }}"  width="100" height="62" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 form-group">
                        <label for="cmbCustomer">{{'monitores.cliente' | trans}}: </label>
                        <select class="form-control" id="cmbCustomer" name="cmbCustomer">
                            <option value="TODOS">{{"inbox.all" | trans}}</option>
                        </select>
                    </div>
                    <div class="col-md-3 form-group">
                        <label for="cmbProject">{{'monitores.proyecto' | trans}}: </label>
                        <select class="form-control" id="cmbProject" name="cmbProject">
                            <option value="TODOS">{{"inbox.all" | trans}}</option>
                        </select>
                    </div>
                    <div class="col-md-3 form-group">
                        <label for="cmbAsp">{{'ASP' | trans}}: </label>
                        <select class="form-control" id="cmbAsp" name="cmbAsp">
                            <option value="TODOS">{{"inbox.all" | trans}}</option>
                        </select>
                    </div>
                    <div class="col-md-3 form-group">
                        <label for="btnGenerate">&nbsp;&nbsp;</label>
                        <button class="btn btn-primary form-control" id="btnGenerate"><strong>{{'ticketDetail.boton.generar' | trans}}</strong></button>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="row">
        <h1 class="text-center text-primary" style="font-size: x-large">
            <b id="titleReport"><i class="fa fa-line-chart"></i> DASHBOARD</b>
        </h1>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="panel with-nav-tabs panel-primary">
            <div class="panel-heading">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#summary_otd" data-toggle="tab"><b>% ON TIME DELIVERY</b></a></li>
                    <li><a href="#summary_ftr" data-toggle="tab"><b>% FIRST TIME RIGHT</b></a></li>
                    <li><a href="#summary_eficiencia" data-toggle="tab"><b>% EFFICIENCY</b></a></li>
                </ul>
            </div>
            <div class="panel-body">
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="summary_otd">
                        <div id="chart1" class="text-center">

                        </div>
                        <hr width=100%  align="center" size=20>
                        <div class="row">
                            <div id="datatable1" class="col-sm-12" style="overflow-x: auto">
                                <table id="table1" class="display nowrap" width="100%">
                                    <thead>
                                    <tr></tr>
                                    </thead>
                                    <tbody id="tbody1"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="summary_ftr">
                        <div id="chart2" class="text-center" style="align:center">

                        </div>
                        <hr width=100%  align="center" size=20>
                        <div class="row">
                            <div id="datatable2" class="col-sm-12">
                                <table id="table2" class="display nowrap" width="100%">
                                    <thead>
                                    <tr></tr>
                                    </thead>
                                    <tbody id="tbody2"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="summary_eficiencia">
                        <div id="chart3" class="text-center">

                        </div>
                        <hr width=100%  align="center" size=20>
                        <div class="row">
                            <div id="datatable3" class="col-sm-12">
                                <table id="table3" class="display nowrap" width="100%">
                                    <thead>
                                    <tr></tr>
                                    </thead>
                                    <tbody id="tbody3"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
    {#<div class="row">
        <div class="col-md-12">
            <!-- Nav pills -->
            <ul id="myTabs" class="nav nav-pills nav-justified" role="tablist">
                <li id="tabsOTD" role="presentation" class="active">
                    <a href="#summary_otd" aria-controls="summary_otd" role="tab" data-toggle="tab">
                        <b>Summary % OTD</b>
                    </a>
                </li>
                <li id="tabsFTR" role="presentation">
                    <a href="#summary_ftr" aria-controls="summary_ftr" role="tab" data-toggle="tab">
                        <b>Summary % FTR</b>
                    </a>
                </li>
                <li id="tabsEFI" role="presentation">
                    <a href="#summary_eficiencia" aria-controls="summary_eficiencia" role="tab" data-toggle="tab">
                        <b>Efficiency</b>
                    </a>
                </li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="summary_otd">
                    <div id="chart1">

                    </div>
                    <div class="row">
                        <div id="datatable1" class="col-sm-12" style="overflow-x: auto">
                            <table id="table1" class="display nowrap" width="100%">
                                <thead>
                                    <tr></tr>
                                </thead>
                                <tbody id="tbody1"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="summary_ftr">
                    <div id="chart2">

                    </div>
                    <div class="row">
                        <div id="datatable2" class="col-sm-12">
                            <table id="table2" class="display nowrap" width="100%">
                                <thead>
                                <tr></tr>
                                </thead>
                                <tbody id="tbody2"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="summary_eficiencia">
                    <div id="chart3">

                    </div>
                    <div class="row">
                        <div id="datatable3" class="col-sm-12">
                            <table id="table3" class="display nowrap" width="100%">
                                <thead>
                                <tr></tr>
                                </thead>
                                <tbody id="tbody3"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>#}

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title text-center" id="myModalLabel">
                        <strong>
							<span class="modal_detalle_titulo">
								{# {'monitorii.detail' | trans } #}
							</span>
                        </strong>
                    </h2>
                    <div class="punto-grafica text-center"></div>
                </div>
                <div class="modal-body">
                    <div class="tabla-datos" style="padding-left: 8px; padding-right: 8px; overflow-x: auto">

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"> {{'monitorii.close' | trans}}
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css')}}">
    <link rel="stylesheet" href="{{ asset('css/buttons.dataTables.min.css')}}">
    <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('js/jszip.min.js') }}"></script>
    <script src="{{ asset('js/pdfmake.min.js') }}"></script>
    <script src="{{ asset('js/vfs_fonts.js') }}"></script>
    <script src="{{ asset('js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('js/buttons.print.min.js') }}"></script>
{% endblock %}