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

{% endblock %}


{% block dashboard %}
    <style type="text/css">
        #menuTop {
            margin-top: 20px !important;
        }

        .space {
            margin-bottom: 40px;
        }

        .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;
        }

        .btn-file input[type=file] {
            position: absolute;
            top: 0;
            right: 0;
            min-width: 100%;
            min-height: 100%;
            font-size: 100px;
            text-align: right;
            filter: alpha(opacity=0);
            opacity: 0;
            outline: none;
            background: white;
            cursor: inherit;
            display: block;
        }

        .scroll {
            overflow-y: hidden;
            overflow-x: auto;
            width: 100%;
        }

        .glyphicon-spin {
            -animation: spin .9s infinite linear;
            -webkit-animation: spin2 .9s infinite linear;
        }

        /* ===================== FILE INPUT ===================== */
        .file-area {
            width: 100%;
            position: relative;
            border: 1px dashed #ccc;
        }

        .file-area input[type=file] {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
            cursor: pointer;
        }

        .file-area .file-dummy {
            width: 100%;
            padding: 30px;
            background: rgba(255, 255, 255, 0.2);
            border: 2px dashed rgba(255, 255, 255, 0.2);
            text-align: center;
            transition: background 0.3s ease-in-out;
        }

        .file-area .file-dummy .success {
            display: none;
        }

        .file-area:hover .file-dummy {
            background: rgba(255, 255, 255, 0.1);
        }

        .file-area input[type=file]:focus + .file-dummy {
            outline: 2px solid rgba(255, 255, 255, 0.5);
            outline: -webkit-focus-ring-color auto 5px;
        }

        .file-area input[type=file]:valid + .file-dummy {
            border-color: rgba(0, 255, 0, 0.4);
            background-color: rgba(0, 255, 0, 0.3);
        }

        .file-area input[type=file]:valid + .file-dummy .success {
            display: inline-block;
        }

        .file-area input[type=file]:valid + .file-dummy .default {
            display: none;
        }


        .table-modal{
            font-size: 11px;
            font-weight: normal;
        }

        #header-fixed{
            position: fixed;
            top: 0px; display:none;
            background-color:white;
        }
    </style>
    <style>
        .wrapper{padding-bottom:50px;}
        .header{background:#000000;}.header .container{padding-bottom:20px;}.header .container h1{color:#FFF;line-height:50px;margin-top:30px;margin-bottom:0;}
        .header .container h3{color:#E0E0E0;font-size:16px;margin-top:-5px;}.header .container h3 a{color:#66aacc;}.header .container h3 a:hover{color:#b3d5e6;}
        .top-menu{position:absolute;z-index:9999;}.top-menu .nav-list{background:rgba(255, 255, 255, 0.8);border:1px solid #CCC;margin:20px;position:fixed;right:0;}
        pre,.well{background:#FFFFFF;}
        .syntax-container{background:#FCFCFC;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;border:1px solid #e3e3e3;margin-bottom:30px;padding-bottom:20px;}
        .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);}
        }
    </style>
    <title>Stacked Bar Chart</title>
    <script src="{{asset('js/Chartjs/Chart.bundle.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/Chartjs/utils.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/Chartjs/Chart.PieceLabel.js')}}" type="text/javascript"></script>
    <script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
    <script src="http://oss.sheetjs.com/js-xlsx/shim.js"></script>
    <style>

        #drop{
            border:2px dashed #bbb;
            -moz-border-radius:5px;
            -webkit-border-radius:5px;
            border-radius:5px;
            padding:25px;
            text-align:center;
            font:20pt bold,"Vollkorn";color:#bbb
        }
        #b64data{
            width:100%;
        }
        a { text-decoration: none }

    </style>

    <script>

    </script>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
        /* layout.css Style */
        .upload-drop-zone {
            height: 200px;
            border-width: 2px;
            margin-bottom: 20px;
        }

        /* skin.css Style*/
        .upload-drop-zone {
            color: #ccc;
            border-style: dashed;
            border-color: #ccc;
            line-height: 200px;
            text-align: center
        }
        .upload-drop-zone.drop {
            color: #222;
            border-color: #222;
        }
    </style>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script>
        var data_status = {};
        var data_alarma = {};
        var data_atencion = {};
        var index_status = {};
        var label_meses = [];
        var dicdatastatus = {'2015': {'meses': [], 'index': []},
            '2016': {'meses': [], 'index': []},
            '2017': {'meses': [], 'index': []}};
        var meses_alarmas = {};
        var estados_atencion = {};
        var meses_atencion = {};
        var arrayestados = {'Todos': 1, 'Abierto': 2, 'Cerrado': 3, 'Nulo': 4, 'Paro Reloj': 5};
        var dicatencion = {
            'media': [[], []],
            'emergencia': [[], []],
            'alta': [[], []],
            'baja': [[], []]};
        var KPIStatus;
        var KPISalarma;
        var KPISatencion;
        var arrymeses = ['TODOS', 'ENERO', 'FEBRERO', 'MARZO',
            'ABRIL', 'MAYO', 'JUNIO', 'JULIO', 'AGOSTO',
            'SEPTIEMBRE', 'OCTUBRE', 'NOVIEMBRE', 'DICIEMBRE'];
        data_status['ANO'] = '2015';
        data_alarma['ANO'] = '2017';
    </script>
    <script>
        function hacergrafico_alarmas() {

            var messelected = document.getElementById("selectmeses_alarmas").value;
            var tmpFIJA = 0;
            var tmpMOVIL = 0;
            var tmpEJECUTADO = 0;
            var tmpPLANEADO = 0;
            var noCOLUMNS = 5;
            var noROWS = 0;
            var dataROWS = [];
            var dataCOLUMNS = [];

            alarmachart_Data['datasets'][0]['data'] = [0, 0, 0];
            for (index = 0; index < KPISalarma.length; ++index)
            {
                if (KPISalarma[index].MES == messelected && KPISalarma[index].ANO == '2017')
                {
                    tmpFIJA = tmpFIJA + KPISalarma[index].FINALIZADO_FIJA * 1;
                    tmpMOVIL = tmpMOVIL + KPISalarma[index].FINALIZADO_MOVIL * 1;
                    tmpPLANEADO = tmpPLANEADO + KPISalarma[index].TOTAL_PLANIFICADO * 1;

                    noROWS += 1;
                    var tmptotalejecutado = (KPISalarma[index].FINALIZADO_MOVIL * 1) + (KPISalarma[index].FINALIZADO_FIJA * 1);
                    var tmparray = [KPISalarma[index].Departamento, KPISalarma[index].TOTAL_PLANIFICADO, tmptotalejecutado, KPISalarma[index].FINALIZADO_MOVIL, KPISalarma[index].FINALIZADO_FIJA];
                    dataROWS.push(tmparray);

                }
            }
            tmpEJECUTADO += tmpFIJA + tmpMOVIL * 1;
            var permovil = ((tmpMOVIL * 100) / tmpPLANEADO).toFixed(2);
            var perfija = ((tmpFIJA * 100) / tmpPLANEADO).toFixed(2);
            var perejecutado = ((tmpEJECUTADO * 100) / tmpPLANEADO).toFixed(2);
            alarmachart_Data['datasets'][0]['data'][2] = permovil;
            alarmachart_Data['datasets'][0]['data'][3] = perfija;
            alarmachart_Data['datasets'][0]['data'][1] = perejecutado;
            alarmachart_Data['datasets'][0]['data'][0] = 100;
            alarmachart_Data['labels'].length = 0;
            alarmachart_Data['labels'].push('TOTAL PLANIFICADOS : ' + tmpPLANEADO);
            alarmachart_Data['labels'].push('TOTAL EJECUTADOS : ' + tmpEJECUTADO);
            alarmachart_Data['labels'].push('TOTAL MOVIL: ' + tmpMOVIL);
            alarmachart_Data['labels'].push('TOTAL FIJA : ' + tmpFIJA);
            var tmparray = ['TOTAL ', tmpPLANEADO, (tmpFIJA + tmpMOVIL * 1), tmpMOVIL, tmpFIJA];
            dataROWS.push(tmparray);
            noROWS += 1;

            dataCOLUMNS = ["DEPARTAMENTO", "PLANEADO", " TOTAL FINALIZADO", " MOVIL", " FIJA"];
            createTable_alarma(noCOLUMNS, noROWS, dataROWS, dataCOLUMNS);
            //  alarmachart_Data['datasets'][0]['data'][3] = tmpPLANEADO;
            var ctx = document.getElementById("alarmachart").getContext("2d");
            var data = alarmachart_Data;
            window.myBar = new Chart(ctx, {
                type: 'bar',
                data: data,
                options: {
                    responsive: true,
                    legend: {
                        "display": false
                    },
                    tooltips: {
                        enabled: true,
                        mode: 'single',
                        callbacks: {
                            label: function (tooltipItems, data) {
                                return tooltipItems.yLabel + ' %';
                            }
                        }
                    },
                            scales: {
                                yAxes: [{
                                        display: true,
                                        gridLines: {
                                            display: true
                                        },
                                        ticks: {
                                            max: 100,
                                            display: true,
                                            beginAtZero: true
                                        }
                                    }],
                                xAxes: [{
                                        gridLines: {
                                            display: true
                                        },
                                        ticks: {
                                            beginAtZero: true
                                        }
                                    }]
                            }
                }
            });
            window.myBar.update();
        }
        ;
        var color = Chart.helpers.color;
        var alarmachart_Data = {
            labels: ['PLANIFICADOS', "%TOTAL FINALIZADO", "% MOVIL", "% FIJA"],
            datasets: [{
                    backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                    borderColor: "rgb(224, 125, 33)",
                    borderWidth: 1,
                    data: [0, 0, 0]
                }]

        };
        function alarmas_selectmeses_change() {
            hacergrafico_alarmas();
        }

        function alarmas_selectanos_change() {



        }

        function obtenerdata_KPISalarmas() {
            $.getJSON('{{path('KPIS_dataKPISalarmachart')}}', data_alarma, function (data) {
                // console.log('llamando a KPIS_dataKPISalarmachart');
                KPISalarma = data.KPISalarma;
                var tempdate = new Date();
                var tmpmonth = tempdate.getMonth() + 1;
                data_alarma['ANO'] = document.getElementById("selectanos_alarmas").value;
                var tmparraymeses = [];
                $("select[id='selectmeses_alarmas']").find('option').remove();
                for (index = 0; index < KPISalarma.length; index++) {
                    tmpindexmes = KPISalarma[index].MES;
                    if ((tmparraymeses.indexOf(arrymeses[tmpindexmes]) == -1) == true)
                    {
                        if (KPISalarma[index].ANO == '2017')
                        {
                            if (tmpmonth == tmpindexmes)
                            {
                                $("select[id='selectmeses_alarmas']").append('<option value="' + tmpindexmes + '"selected=selected">' + arrymeses[tmpindexmes] + '</option>');
                            } else
                            {
                                $("select[id='selectmeses_alarmas']").append('<option value="' + tmpindexmes + '">' + arrymeses[tmpindexmes] + '</option>');
                            }
                        }


                    }
                    tmparraymeses.push(arrymeses[tmpindexmes]);
                }


                hacergrafico_alarmas();

                window.myBar.update();
            });
        }
        ;
    </script>
    <script>

        window.onload = function obtenerdata_KPISstatus() {
            $.getJSON('{{path('KPIS_dataKPIStatuschart')}}', data_status, function (data) {
                KPIStatus = data.KPIStatus;
                var tmpyear = 0;
                //   console.log('data :' + KPIStatus.length);
                for (index = 0; index < KPIStatus.length; ++index) {
                    tmpyear = KPIStatus[index].ANO;
                    //     console.log('data :' + KPIStatus[index].MES);
                    dicdatastatus[tmpyear]['meses'].push(KPIStatus[index].MES);
                    dicdatastatus[tmpyear]['index'].push(index);
                }
                ;
                //console.log(dicdatastatus[tmpyear]['meses']);
                hacergrafico_status();
                window.myBar.update();
                obtenerdata_KPISalarmas();
                selectanos_change();
                setdataatencion();
            });
        };
        var statuschart_Data = {
            labels: [],
            datasets: [{
                    label: 'NO INICIADO',
                    backgroundColor: 'rgb(56, 125, 114)',
                    data: [

                    ]
                }, {
                    label: 'SUSPENDIDO',
                    backgroundColor: window.chartColors.blue,
                    data: [

                    ]
                }, {
                    label: 'EJECUTADO',
                    backgroundColor: window.chartColors.green,
                    data: [

                    ]
                },
                {
                    label: 'NULO',
                    backgroundColor: 'rgb(224, 125, 33)',
                    data: [

                    ]
                }, {
                    label: 'PD ACEPTACIÓN',
                    backgroundColor: 'rgb(34, 86, 0)',
                    data: [

                    ]
                },
                {
                    label: 'PD EJECUCIÓN',
                    backgroundColor: 'rgb(34, 86, 89)',
                    data: [

                    ]
                }, {
                    label: 'RECHAZADO',
                    backgroundColor: 'rgb(132, 86, 89)',
                    data: [

                    ]
                }, {
                    label: 'PD APROBACION EJECUCION',
                    backgroundColor: 'rgb(132, 188, 89)',
                    data: [

                    ]
                }
            ]

        };
        function hacergrafico_status() {
            var tmpyear = data_status['ANO'];
            var tmpindex = 0;
            var tmptotal = 0;
            var messelected = document.getElementById("selectmeses").value;
            var tmpmesselected = 0;
            var tmpyear = data_status['ANO'];
            var tmparraymeses = [];
            statuschart_Data['labels'].length = 0;
            for (index = 0; index < dicdatastatus[tmpyear]['meses'].length; ++index) {
                tmpindexmes = dicdatastatus[tmpyear]['meses'][index];
                if ((tmparraymeses.indexOf(arrymeses[tmpindexmes]) == -1) == true)
                {
                    if (messelected == 0) {
                        tmpmesselected = tmpindexmes;
                    } else {
                        tmpmesselected = document.getElementById("selectmeses").value;
                    }
                    if (tmpmesselected == tmpindexmes)
                    {
                        statuschart_Data['labels'].push(arrymeses[tmpindexmes]);
                    }
                }
                tmparraymeses.push(arrymeses[tmpindexmes]);
            }


            for (index = 0; index < statuschart_Data['datasets'].length; ++index)
            {
                statuschart_Data['datasets'][index]['data'].length = 0;
            }

            /* for (index = 0; index < document.getElementById("table_statusKPI").rows[1].cells.length; ++index) {
             document.getElementById("table_statusKPI").rows[1].cells.item(index).innerHTML = '0';
             }
             
             if (typeof arrymeses[messelected] != "undefined")
             {
             // Cells[0].innerText = 
             document.getElementById("table_statusKPI").rows[1].cells.item(0).innerHTML = arrymeses[messelected];
             } else
             {
             // Cells[0].innerText.innerHTML =
             document.getElementById("table_statusKPI").rows[1].cells.item(0).innerHTML = '-';
             }*/


            for (index = 0; index < dicdatastatus[tmpyear]['index'].length; ++index)
            {

                if (messelected == 0) {
                    tmpmesselected = dicdatastatus[tmpyear]['meses'][index];
                } else {
                    tmpmesselected = document.getElementById("selectmeses").value;
                }

                if (dicdatastatus[tmpyear]['meses'][index] == tmpmesselected)
                {
                    tmpindex = dicdatastatus[tmpyear]['index'][index];
                    tmptotal = KPIStatus[tmpindex].TOTAL;
                    switch (KPIStatus[tmpindex].ESTADO) {

                        case "NO INICIADO":
                            statuschart_Data['datasets'][0]['data'].push(tmptotal);
                            //  document.getElementById("table_statusKPI").rows[1].cells.item(1).innerHTML = tmptotal;
                            break;
                        case "SUSPENDIDO":
                            statuschart_Data['datasets'][1]['data'].push(tmptotal);
                            //  document.getElementById("table_statusKPI").rows[1].cells.item(2).innerHTML = tmptotal;
                            break;
                        case "EJECUTADO":
                            statuschart_Data['datasets'][2]['data'].push(tmptotal);
                            //  document.getElementById("table_statusKPI").rows[1].cells.item(3).innerHTML = tmptotal;
                            break;
                        case "NULO":
                            statuschart_Data['datasets'][3]['data'].push(tmptotal);
                            //   document.getElementById("table_statusKPI").rows[1].cells.item(4).innerHTML = tmptotal;
                            break;
                        case "PD ACEPTACIÓN":
                            statuschart_Data['datasets'][4]['data'].push(tmptotal);
                            //  document.getElementById("table_statusKPI").rows[1].cells.item(5).innerHTML = tmptotal;
                            break;
                        case "PD EJECUCIÓN":
                            statuschart_Data['datasets'][5]['data'].push(tmptotal);
                            // document.getElementById("table_statusKPI").rows[1].cells.item(6).innerHTML = tmptotal;
                            break;
                        case "RECHAZADO":
                            statuschart_Data['datasets'][6]['data'].push(tmptotal);
                            //document.getElementById("table_statusKPI").rows[1].cells.item(7).innerHTML = tmptotal;
                            break;
                        case "PD APROBACION EJECUCION":
                            statuschart_Data['datasets'][7]['data'].push(tmptotal);
                            //document.getElementById("table_statusKPI").rows[1].cells.item(8).innerHTML = tmptotal;
                            break;
                    }
                }

                //$("#statusiddiv").load(location.href + " #statusiddiv");

            }
            var lastrow = document.getElementById("table_statusKPI").rows.length;
            /*for (index = 0; index<statuschart_Data['labels'].length; ++index)
             {
             document.getElementById("myTable").deleteRow(index);
             }*/

            var table = document.getElementById("table_statusKPI");
            var row;
            var cell;
            for (indexlabel = 0; indexlabel < statuschart_Data['labels'].length; ++indexlabel)
            {
                lastrow = document.getElementById("table_statusKPI").rows.length;
                row = table.insertRow(lastrow - 1);
                cell = row.insertCell(0);
                cell.innerHTML = statuschart_Data['labels'][indexlabel];
                for (indexdataset = 0; indexdataset < statuschart_Data['datasets'].length; ++indexdataset)
                {
                    cell = row.insertCell(indexdataset + 1);
                    if (typeof statuschart_Data['datasets'][indexdataset]['data'][indexlabel] != "undefined")
                    {
                        cell.innerHTML = statuschart_Data['datasets'][indexdataset]['data'][indexlabel];
                    } else
                    {
                        cell.innerHTML = 0;
                    }
                }

            }






            var chart1 = document.getElementById("statuschart").getContext("2d");
            window.myBar = new Chart(chart1, {
                type: 'bar',
                data: statuschart_Data,
                options: {
                    title: {
                        display: true,
                        text: "STATUS CORRECTIVO"
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                                stacked: true,
                            }],
                        yAxes: [{
                                stacked: true
                            }]
                    }
                }
                //window.myBar.update();

            });
        }
        ;
        function selectmeses_change() {
            hacergrafico_status();
        }

        function selectanos_change() {

            data_status['ANO'] = document.getElementById("selectanos").value;
            var tmpyear = data_status['ANO'];
            var tmparraymeses = [];
            var tempdate = new Date();
            var tmpmonth = tempdate.getMonth() + 1;
            $("select[id='selectmeses']").find('option').remove();
            $("select[id='selectmeses']").append('<option value="' + 0 + '"selected="selected">' + arrymeses[0] + '</option>');
            for (index = 0; index < dicdatastatus[tmpyear]['meses'].length; ++index) {
                tmpindexmes = dicdatastatus[tmpyear]['meses'][index];
                if ((tmparraymeses.indexOf(arrymeses[tmpindexmes]) == -1) == true)
                {

                    $("select[id='selectmeses']").append('<option value="' + tmpindexmes + '">' + arrymeses[tmpindexmes] + '</option>');
                }
                tmparraymeses.push(arrymeses[tmpindexmes]);
            }


            selectmeses_change();
        }
    </script>
    <script>

        /* $.getJSON('{{path('KPIS_dataKPISdeatencionFILE')}}', data_status, function (data) {});*/
        $(function () {
            console.log('estamos en el ajaxcall');
            $("#fileExcel").fileinput({
                uploadUrl: "{{path('KPIS_dataKPISdeatencionFILE')}}", // server upload action
                uploadAsync: false,
                minFileCount: 1,
                maxFileCount: 1,
                overwriteInitial: false,
                showPreview: false,
                success: function (data) {
                    console.log(data.KPISatencion);
                },
                error: function (res) {
                        console.log('loggggg erroror ');
                        console.log(res);
                }       
            });
            $('#fileExcel').on('filebatchuploaderror', function (event, data, previewId, index) {
                //console.log(data.response[0]);
                alert('ERROR AL SUBIR EL ARCHIVO');
            });
            $('#fileExcel').on('filebatchuploadsuccess', function (event, data, previewId, index) {
                //setdataatencion(data.response);
            });
        });
    </script>
    <script>
        function setdataatencion()
        {
            var MES = document.getElementById("selectatencion_mes").value;
            var ANO = document.getElementById("selectatencion_mes").value;
            $.getJSON('{{path('KPIS_dataKPISdeatencion')}}', function (data)  {
            KPISatencion = data.KPISatencion;
            console.log(data);
            console.log('estamos dentro de setdataatenion');
            fillarray_atencion();
            var MES = 0;
            var TOTAL = 0;
            var YES_NO = '';
            var ESTADO = '';
            var tmpmeses = [];
            var tmpestados = [];
            for (index = 1; index < KPISatencion.length; index++)
            {
                MES = KPISatencion[index]['MONTH'];
                YES_NO = KPISatencion[index]['CUMPLIMIENTO KPI'] == 'Si' ? 1 : 2;
                ESTADO = KPISatencion[index]['ESTADO'];
                

                if ((tmpmeses.indexOf(MES) == -1) == true)
                {
                    tmpmeses.push(MES);
                    // fillarray_atencion(MES, ESTADO);
                }

                if ((tmpestados.indexOf(ESTADO) == -1) == true)
                {
                    tmpestados.push(ESTADO);
                    //fillarray_atencion(MES, ESTADO);
                }

                ESTADO = arrayestados[ESTADO];
                // console.log('EN EL SWITCH MES '+MES+ ' ESTADO '+ ESTADO);
                //console.log(dicatencion);
                console.log('estado************* '+ KPISatencion[index]['CATEGORIA']);
                switch (KPISatencion[index]['CATEGORIA']) {
                    case 'Alta A+':
                    case 'Alta':
                        dicatencion['alta'][MES][ESTADO][YES_NO] = dicatencion['alta'][MES][ESTADO][YES_NO] + 1;
                        dicatencion['alta'][MES][ESTADO][TOTAL] = dicatencion['alta'][MES][ESTADO][TOTAL] + 1;
                        dicatencion['alta'][MES][TOTAL][YES_NO] = dicatencion['alta'][MES][TOTAL][YES_NO] + 1;
                        dicatencion['alta'][MES][TOTAL][TOTAL] = dicatencion['alta'][MES][TOTAL][TOTAL] + 1;
                        dicatencion['alta'][MES][ESTADO].splice(3, 0, index);
                        dicatencion['alta'][MES][TOTAL].splice(3, 0, index);
                        break;
                    case 'Media A+':
                    case 'Media':
                        dicatencion['media'][MES][ESTADO][YES_NO] = dicatencion['media'][MES][ESTADO][YES_NO] + 1;
                        dicatencion['media'][MES][ESTADO][TOTAL] = dicatencion['media'][MES][ESTADO][TOTAL] + 1;
                        dicatencion['media'][MES][TOTAL][YES_NO] = dicatencion['media'][MES][TOTAL][YES_NO] + 1;
                        dicatencion['media'][MES][TOTAL][TOTAL] = dicatencion['media'][MES][TOTAL][TOTAL] + 1;
                        dicatencion['media'][MES][ESTADO].splice(3, 0, index);
                        dicatencion['media'][MES][TOTAL].splice(3, 0, index);
                        break;
                    case 'Baja A+':
                    case 'Baja':
                        dicatencion['baja'][MES][ESTADO][YES_NO] = dicatencion['baja'][MES][ESTADO][YES_NO] + 1;
                        dicatencion['baja'][MES][ESTADO][TOTAL] = dicatencion['baja'][MES][ESTADO][TOTAL] + 1
                        dicatencion['baja'][MES][TOTAL][YES_NO] = dicatencion['baja'][MES][TOTAL][YES_NO] + 1;
                        dicatencion['baja'][MES][TOTAL][TOTAL] = dicatencion['baja'][MES][TOTAL][TOTAL] + 1;
                        dicatencion['baja'][MES][ESTADO].splice(3, 0, index);
                        dicatencion['baja'][MES][TOTAL].splice(3, 0, index);
                        break;
                    case 'Emergencia':
                        dicatencion['emergencia'][MES][ESTADO][YES_NO] = dicatencion['emergencia'][MES][ESTADO][YES_NO] + 1;
                        dicatencion['emergencia'][MES][ESTADO][TOTAL] = dicatencion['emergencia'][MES][ESTADO][TOTAL] + 1;
                        dicatencion['emergencia'][MES][TOTAL][YES_NO] = dicatencion['emergencia'][MES][TOTAL][YES_NO] + 1;
                        dicatencion['emergencia'][MES][TOTAL][TOTAL] = dicatencion['emergencia'][MES][TOTAL][TOTAL] + 1;
                        dicatencion['emergencia'][MES][ESTADO].push(index);
                        dicatencion['emergencia'][MES][TOTAL].splice(3, 0, index);
                        break;
                }

            }
            console.log('-----este es el dictatencion');
            console.log(dicatencion);
            //llenarmeses_atencion(tmpmeses);
            llenarestados_atencion(tmpestados);
            setdatachart_atencion();
        });
        }
       

        function fillarray_atencion()
        {
            for (var MES = 0; MES < 13; MES++)
            {
                dicatencion['media'][MES] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                dicatencion['emergencia'][MES] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                dicatencion['alta'][MES] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                dicatencion['baja'][MES] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                for (var i = 0; i < 12; i++)
                {
                    dicatencion['media'][MES][i] = [0, 0, 0];
                    dicatencion['emergencia'][MES][i] = [0, 0, 0];
                    dicatencion['alta'][MES][i] = [0, 0, 0];
                    dicatencion['baja'][MES][i] = [0, 0, 0];
                }
            }

        }

        function selectatencion_change()
        {
            setdatachart_atencion();
        }

        function llenarestados_atencion(_estados)
        {
            estados_atencion = _estados;
            // console.log(_estados);
            $("select[id='selectatencion_atencion']").find('option').remove();
            $("select[id='selectatencion_atencion']").append('<option value=3 selected="selected">Cerrado</option>');
            /*for (index = 0; index < _estados.length; ++index) {
                $("select[id='selectatencion_atencion']").append('<option value="' + arrayestados[_estados[index]] + '">' + _estados[index] + '</option>');
            }*/
        }
        function llenarmeses_atencion(_meses)
        {
            // console.log(_meses);
            $("select[id='selectatencion_mes']").find('option').remove();
            $("select[id='selectatencion_mes']").append('<option value="' + _meses[0] + '"selected="selected">' + arrymeses[_meses[0]] + '</option>');
            for (index = 1; index < _meses.length; ++index) {
                $("select[id='selectatencion_mes']").append('<option value="' + _meses[index] + '">' + arrymeses[_meses[index]] + '</option>');
            }
        }

        function selectatencion_mes_change()
        {
            setdatachart_atencion();
        }

        function selectatencion_atencion_change()
        {
            setdatachart_atencion();
        }

        function setdatachart_atencion()
        {
            var ATENCION = document.getElementById("selectaatencion").value;
            var txtATENCION = $("#selectaatencion option:selected").text();
            var TODOS = 0;
            var MES = document.getElementById("selectatencion_mes").value;
            var ESTADO = document.getElementById("selectatencion_atencion").value;
            if (ESTADO == '1')
            {

                var numYES = dicatencion[ATENCION][MES][TODOS][1];
                var numTOTAL = dicatencion[ATENCION][MES][TODOS][0];
                var numNO = dicatencion[ATENCION][MES][TODOS][2];
                var porcentajeYES = (numYES * 100) / numTOTAL;
                var poncentajeNO = (numNO * 100) / numTOTAL;
                config_atencion['data']['datasets'][0]['data'].length = 0;
                config_atencion['data']['labels'].length = 0;
                config_atencion['data']['labels'].push('Atendidas dentro de KPI');
                config_atencion['data']['labels'].push('Atendidas fuera de kpi');
                config_atencion['data']['datasets'][0]['data'].push(porcentajeYES.toFixed(2));
                config_atencion['data']['datasets'][0]['data'].push(poncentajeNO.toFixed(2));
                chartatencion();

                noCOLUMNS = 222;
                noROWS = (dicatencion[ATENCION][MES][TODOS].length);
                dataROWS = dicatencion[ATENCION][MES][TODOS];
                dataCOLUMNS = Object.keys(KPISatencion[0]);
                createTable_atencion(noCOLUMNS, noROWS, dataROWS, dataCOLUMNS);

            } else
            {

                var numYES = dicatencion[ATENCION][MES][ESTADO][1];
                var numTOTAL = dicatencion[ATENCION][MES][ESTADO][0];
                var numNO = dicatencion[ATENCION][MES][ESTADO][2];
                var porcentajeYES = (numYES * 100) / numTOTAL;
                var poncentajeNO = (numNO * 100) / numTOTAL;
                config_atencion['data']['datasets'][0]['data'].length = 0;
                config_atencion['data']['labels'].length = 0;
                config_atencion['data']['labels'].push('Atendidas dentro de KPI');
                config_atencion['data']['labels'].push('No Atendidas dentro de KPI');
                config_atencion['data']['datasets'][0]['data'].push(porcentajeYES.toFixed(2));
                config_atencion['data']['datasets'][0]['data'].push(poncentajeNO.toFixed(2));
                chartatencion();

                noCOLUMNS = 222;
                noROWS = (dicatencion[ATENCION][MES][ESTADO].length);
                dataROWS = dicatencion[ATENCION][MES][ESTADO];
                dataCOLUMNS = Object.keys(KPISatencion[0]);
                createTable_atencion(noCOLUMNS, noROWS, dataROWS, dataCOLUMNS);
                

            }


        }



    </script>
    <script>
        /********************chart-emergencias****************************************/
        var config_atencion = {
            type: 'pie',
            data: {
                datasets: [{
                        data: [
                            0
                        ],
                        backgroundColor: [
                            window.chartColors.orange,
                            window.chartColors.blue

                        ],
                        label: 'Dataset 1'
                    }],
                labels: [
                    0
                ]
            },
            options: {
                responsive: true
        }
            }
        };
        function chartatencion() {
            config = config_atencion;
            var ctx = document.getElementById("chart-atencion").getContext("2d");
            window.myPie = new Chart(ctx,config);
            window.myPie.update();
        }
        ;

    </script>
    <script>
        function createTable_atencion(noCOLUMNS, noROWS, dataROWS, dataCOLUMNS) {
            $("#basicTable").remove();
            mytable = $('<table></table>').attr({id: "basicTable", class: "table table-hover"});
            var rows = noROWS;
            var cols = noCOLUMNS;
            console.log('EN CREATE TABLE');
            console.log(noCOLUMNS);
            console.log(noROWS);
            console.log(dataROWS);
            console.log(dataCOLUMNS);
            for (var f = 0; f < rows; f++) {
                var row = $('<tr></tr>').attr({class: ["class1"].join(' ')}).appendTo(mytable);
                if (f == 0) {
                    for (var j = 0; j < cols; j++) {

                        $('<th></th>').text(dataCOLUMNS[j]).attr({class: ["info"]}).appendTo(row);
                    }
                } else {
                    index = dataROWS[f];
                    for (var i = 0; i < cols; i++) {
                        vartext = KPISatencion[index][dataCOLUMNS[i]];
                        $('<td></td>').text(vartext).appendTo(row);
                    }
                }
            }

            mytable.appendTo("#box");
        }
        function createTable_alarma(noCOLUMNS, noROWS, dataROWS, dataCOLUMNS) {
            $("#basicTable").remove();
            mytable = $('<table></table>').attr({id: "basicTable", class: "table table-hover text-center"});
            var rows = noROWS;
            var cols = noCOLUMNS;
            var tr = [];

            for (var f = 0; f < rows; f++) {
                var row = $('<tr></tr>').attr({align: ["center"].join(' ')}).appendTo(mytable);
                if (f == 0) {
                    for (var j = 0; j < cols; j++) {

                        $('<th></th>').text(dataCOLUMNS[j]).attr({class: ["info text-center"], align: ["center"]}).appendTo(row);
                    }
                } else {
                    index = dataROWS[f];
                    for (var i = 0; i < cols; i++) {
                        vartext = dataROWS[f][i];
                        $('<td></td>').text(vartext).appendTo(row);
                    }
                }
            }

            mytable.appendTo("#box1");
        }
        function createTable_status(noCOLUMNS, noROWS, dataROWS, dataCOLUMNS) {
            $("#basicTable").remove();
            mytable = $('<table></table>').attr({id: "basicTable", class: "table table-hover"});
            var rows = noROWS;
            var cols = noCOLUMNS;
            var tr = [];

            for (var f = 3; f < rows; f++) {
                var row = $('<tr></tr>').attr({class: ["class1"].join(' ')}).appendTo(mytable);
                if (f == 3) {
                    for (var j = 3; j < cols; j++) {

                        $('<th></th>').text(dataCOLUMNS[j]).attr({class: ["info"]}).appendTo(row);
                    }
                } else {
                    index = dataROWS[f];
                    for (var i = 3; i < cols; i++) {
                        vartext = KPISatencion['ROW'][index][i];
                        $('<td></td>').text(vartext).appendTo(row);
                    }
                }
            }

            mytable.appendTo("#box");
        }
    </script>
    <div class="container">
        <div class="col-lg-12">
            <img id="logo" class="pull-right" src="{{ asset('images/claro.jpg') }}"  width="220" height="72" >

        </div>
        <div class="container">
            <div class="col-lg-12 text-center"  style="margin-top: 1%">
                <h1>KPIS EL SALVADOR</h1>
            </div>
            <ul class="nav nav-tabs">
                <li><a data-toggle="tab" href="#menu1">ESTATUS CORRECTIVOS</a></li>
                <li><a data-toggle="tab" href="#menu2">% AVANCE MP MENSUAL</a></li>
                <li><a data-toggle="tab" href="#menu3">KPI DE ATENCION DE ALARMAS</a></li>
            </ul>
            <div class="tab-content">
                <br/>
                <div id="menu1" class="tab-pane fade in active">
                    <div class="row">
                        <div class=" col-lg-4">
                            <select id="selectanos"  onchange="selectanos_change()">

                                <option selected="selected"  value="2017">2017</option>

                            </select>
                        </div>
                        <div class=" col-lg-4">
                            <select id="selectmeses" style="visibility: hidden;"  onchange="selectmeses_change()">
                        </div>


                        </select>
                        <br/>
                    </div>
                    <div><br/>
                        <div id="statusiddiv" style="width: 100%">
                            <canvas id="statuschart" style="display: block; width: 952px; height: 476px;" width="952" height="476"></canvas>
                        </div>
                        <br/><br/>
                        <div class="table-responsive">          
                            <table class="table" id="table_statusKPI">
                                <thead>
                                    <tr>
                                        <th>{{'monitoriii.month' | trans}}</th>
                                        <th>NO INICIADO</th>
                                        <th>SUSPENDIDO</th>
                                        <th>EJECUTADO</th>
                                        <th>NULO</th><th>PD ACEPTACIÓN</th><th>PD EJECUCIÓN</th>
                                        <th>RECHAZADO</th><th>PD APROBACION EJECUCION</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr id="statusinfo">
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>

                                </tbody>
                            </table>
                            <br/>
                            <br/>                                <div class="row" style="margin-top: 1%; height:500px; overflow-x:auto; transform: rotateX(180deg);">
                                <div class="col-lg-12" id="box2" style="margin-top: 1%; transform: rotateX(180deg);">
                                    <table id="header-fixed"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="menu2" class="tab-pane fade">
                <div class="row">
                    <div class=" col-lg-4">
                        <select id="selectanos_alarmas" class="form-control" onchange="alarmas_selectanos_change()">
                            <option selected="selected"  value="2017">2017</option>
                        </select>
                    </div>
                    <div class=" col-lg-4">
                        <select id="selectmeses_alarmas" class="form-control"  onchange="alarmas_selectmeses_change()">
                        </select>
                    </div>
                </div>

                <div><br/>
                    <canvas id="alarmachart" style="display: block; width: 952px; height: 476px;" width="952" height="476"></canvas>
                </div>
                <br/>
                <br/>                                
                <div class="row" style="margin-top: 1%; height:500px; overflow-x:auto; transform: rotateX(180deg);">
                    <div class="col-lg-12" id="box1" style="margin-top: 1%; transform: rotateX(180deg);">
                        <table id="header-fixed"></table>
                    </div>
                </div>
            </div>
            <div id="menu3" class="tab-pane fade">
                <div class="tab-content">

                            <br/>
                            <div class="row" id="divcanvas">
                                
                                <div class=" col-lg-4">
                                    {{'monitoriii.year' | trans}}:<select id="selectatencion_ano">
                                         <option selected="selected"  value="2017">2017</option>
                                    </select>    
                                </div> 
                                <div class=" col-lg-4">
                                    {{'monitoriii.month' | trans}}:<select id="selectatencion_mes"  onchange="selectatencion_mes_change()">
                                        <option  value="1">{{'month.january' | trans}}</option>
                                        <option  value="2">{{'month.february' | trans}}</option>
                                        <option  value="3">{{'month.march' | trans}}</option>
                                        <option  value="4">{{'month.april' | trans}}</option>
                                        <option  value="5">{{'month.may' | trans}}</option>
                                        <option  value="6">{{'month.june' | trans}}</option>
                                        <option selected="selected" value="7">{{'month.july' | trans}}</option>
                                        <option  value="8">{{'month.august' | trans}}</option>
                                        <option  value="9">{{'month.september' | trans}}</option>
                                        <option  value="10">{{'month.october' | trans}}</option>
                                        <option  value="11">{{'month.november' | trans}}</option>
                                        <option  value="12">{{'month.december' | trans}}</option>
                                    </select>    
                                </div> 

                                <div class=" col-lg-4">
                                    {{'site.category' | trans}}: <select id="selectaatencion"  onchange="selectatencion_change()">
                                        <option selected="selected"  value="media">MEDIA</option>
                                        <option  value="emergencia">EMERGENCIA</option>
                                        <option  value="alta">ALTA</option>
                                        <option  value="baja">BAJA</option>
                                    </select>
                                </div>
                                                                <div class=" col-lg-4">
                                    <select id="selectatencion_atencion" style="visibility: hidden;"  onchange="selectatencion_atencion_change()">
                                    </select>    
                                </div> 
                            </div>
                            <div >
                                <canvas id="chart-atencion" style="display: block; width: 352px; height: 176px;"></canvas>
                            </div>
                            <div>
                                <br/><br/>
                                <div class="row" style="margin-top: 1%; height:500px; overflow-x:auto; transform: rotateX(180deg);">
                                    <div class="col-lg-12" id="box" style="margin-top: 1%; transform: rotateX(180deg);">
                                        <table id="header-fixed"></table>
                                    </div>
                                </div>

                            </div>
                            <div class="panel panel-default" style="margin: 3%; overflow-y: visible">
                        <div class="panel-heading" style="overflow-y: visible">UPLOAD FILE</div>
                        <div class="panel-body" style="overflow-y: visible">
                            <input id="fileExcel" type="file" name="file" class="file-loading">
                        </div>

                    </div>
                        </div>

            </div>

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

{% endblock %}