{% 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>

        window.pollingPeriod = 30000;
        window.progressInterval;

        window.progressInterval = setInterval(getData, window.pollingPeriod);
        getData();

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

                var monitor = data.monitor;
                var monitor2 = data.monitor2;
                var header = Object.keys(monitor[0]);
                var url = "{{ path('smartrsc_reconocer',{'id': '{}'})}}";

                $("#reporte1").empty();
                $("#reporte1").append(createTable(monitor,url));

            });
        }


        $(".reconocer").live('click',function(){

            var url = $(this).attr('href');

            $.get( url, function( data ) {

                getData();
            });

            return false;

        });

        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,url,total,nombreColTotal){


            var header = Object.keys(monitor[0]);
            var posicionActive = header.length -1;

            var table = '<table  class="table table-condensed table-bordered nowrap dataTable"> <thead>' +

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

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


                table += "<th class='text-center'>" + header[j] + "</th>"


                if (j == header.length-1){

                    table += "<th>" + "</th>";
                }
            }
            table += "</tr></thead>";

            for (var i = 0; i < monitor.length; i++) {
                var clase = '';

               clase =  monitor[i][header[posicionActive]] == 'YES'?'btn-danger':'btn-success';

                table += "<tr class="+ clase +">";
                for (var j = 0; j < header.length; j++) {

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

                    if (j == header.length-1){

                             if(monitor[i][header[j]]=="YES")
                            {

                            table += "<td>" + '<a  Onclick="espera(3000,'+monitor[i]["SERVICE"]+')"'+ 'href="' +url.replace('%7B%7D',monitor[i]['ID']) +'"' + 'class="btn btn-success reconocer" role="button"' +'>Link</a>'+"</td>";
                        
                            }
                            else
                            {

                            table += "<td>" + '<a  Onclick="espera(1000,'+monitor[i]["SERVICE"]+')"'+'hrref="' + "../../PuenteTicket/"+{{proyecto}}+"/"+{{modulo}}+"/"+ monitor[i]["SERVICE"] +'"' + 'class="btn btn-success " role="button"' +'>Link</a>'+"</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 monitor[0]['idestado'];
           return table;
           // return print_r(monitor,14) 
        }
            function espera(tiempo,monitor)
            {
            setTimeout ("redirect(monitor)", tiempo); 
             
             redirect(monitor);
            }

            function redirect(monitor)
            {
               
                
                var url="../../PuenteTicket/"+{{proyecto}}+"/"+{{modulo}}+"/"+monitor;
                window.location.replace(url);
               // alert(url);
               }

         function print_r(arr,level) 
         {
                      var dumped_text = "";
                      if(!level) level = 0;
                      var level_padding = "";
                      for(var j=0;j<level+1;j++) level_padding += "    ";
                        if(typeof(arr) == 'object') { //Array/Hashes/Objects 
                          for(var item in arr) {
                            var value = arr[item];
                            if(typeof(value) == 'object') { //If it is an array,
                              dumped_text += level_padding + "'" + item + "' ...\n";
                              dumped_text += print_r(value,level+1);
                            } else {
                              dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
                            }
                          }
                        } else { //Stings/Chars/Numbers etc.
                        dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
                      }
                return dumped_text;
         }



    </script>
<div class="container-fluid">
    <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-12 " >

            <div class="col-lg-12" id="reporte1"></div>

        </div>



    </div>


    </div>
{% endblock %}