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

{% endblock %}

{% block dashboard %}

    <style>
        #menuTop {
             margin-top: 5px;
        }
        .container {
           padding: 0;
           margin: 0;
        }

        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>
    <script src="{{asset('js/justgage-1.2.2/raphael-2.1.4.min.js')}}"></script>
    <script src="{{asset('js/justgage-1.2.2/justgage.js')}}"></script>
    <script>



        $.getJSON('{{path('reportecaribe_reporteGeneral')}}', function (data) {

            var monitor = data.monitor;
            var monitor2 = data.monitor2;
            var header = Object.keys(monitor[0]);
            for(var i=0; i< monitor.length;i++){

                new JustGage({
                    id: "chart" + (1+i),
                    value: parseFloat(monitor[i][header[7]]),
                    min: 0,
                    max: 100,
                    title: monitor[i][header[0]],
                    label: '%',
                    customSectors: [{
                        color : "#ff0000",
                        lo : 0,
                        hi : 90
                    },{
                        color : "#52e561",
                        lo : 91,
                        hi : 100
                    }]
                });

            }
            $("#reporte1").empty();
            $("#reporte1").append(createTable(monitor));
            /*$("#reporte2").empty();
            $("#reporte2").append(createTable(monitor2));*/
            console.log(monitor);
        });

        function getTotal(valor,key)
        {
            var total = new Array();
            /*total[1] = 0;
             total[2] = 0;*/
            var header = Object.keys(valor[0]);


            for(var i = 0; i< valor.length;i++){

                for(var j = 0; j< key.length;j++){

                    if(typeof total[key[j]] === "undefined"){

                        total[key[j]] = 0;
                    }

                    total[key[j]] +=  parseInt(valor[i][header[key[j]]]);

                }


            }
            return total;
        }

        function createTable(monitor,total,nombreColTotal){
            var header = Object.keys(monitor[0]);
            var table = '<table  class="table table-bordered table-hover table-striped table-responsive"> <thead>' +

                    '<tr class="btn-info">';

            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>";
                for (var j = 0; j < header.length; j++) {

                    table += "<td>" + monitor[i][header[j]]  + "</td>";

                }
                table += "</tr>";

                if(typeof total !== "undefined") {

                    if (i == monitor.length - 1) {

                        var headerTotal = Object.keys(total);
                        table += '<tr><td>' + nombreColTotal +'</td>';

                        for(var x=0; x<headerTotal.length;x++){
                            table += '<td>';
                            table += total[headerTotal[x]];

                            table += '</td>';

                        }
                        table += '</tr>';
                    }
                }
            }
            table += "</table>";

            return table;
        }
    </script>
<div class="container">
    <div id="gauge" class="200x160px"></div>
    <div class="row">
        <div class="col-lg-2">
            <img id="logo" src="{{ asset('images/ericsson.png')  }}"  width="1500" height="50" >

        </div>

        <div class="col-sm-offset-10">
            <img id="logo" src="{{ asset('images/flow.jpg')  }}"  width="300" height="65" style="float: right">
            <p class="text-center" style="font-size: 14pt;font-weight: bold;"></p>
        </div>

    </div>
    <div class="row">

        <div class="col-lg-4" id="chart1" >

        </div>
        <div class="col-lg-4" id="chart2" >

        </div>
        <div class="col-lg-4" id="chart3" >

        </div>



    </div>
    <div class="row">

        <div class="col-lg-4" id="chart4" >

        </div>
        <div class="col-lg-4" id="chart5" >

        </div>
        <div class="col-lg-4" id="chart6" >

        </div>



    </div>
    <div class="row">

        <div class="col-lg-4" id="chart7" >

        </div>
        <div class="col-lg-4" id="chart8" >

        </div>
        <div class="col-lg-4" id="chart9" >

        </div>



    </div>
    <div class="row">

        <div class="col-lg-4" id="chart10" >

        </div>
        <div class="col-lg-4" id="chart11" >

        </div>
        <div class="col-lg-4" id="chart12" >

        </div>



    </div>
    <div class="row">

        <div class="col-lg-8 col-lg-offset-2" >
            <p class="text-center">This measures sites with routines in the Q as per contract</p>
            <div class="col-lg-12" id="reporte1"></div>

        </div>



    </div>


    </div>
{% endblock %}