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

{% block dashboard %}
    <div class="panel-body col-lg-12">
        <form id="Filtros" action="{{path ('monitor_indexCliente',{'idproyectos':idproyectos, 'idmodule':idmodule})}}" method="post">
         <table align='center'>
            <tr>
                <td align='left'><b>{{'monitor.etiqueta.fechaI' | trans}}: </b><input type="text" name="Filtros_fechaIni" id="Filtros_fechaIni">
                </td>
                <td align='left'><b>{{'monitor.etiqueta.fechaF' | trans}}: </b><input type="text" name="Filtros_fechaFin" id="Filtros_fechaFin">
                </td> 
            </tr>
            <tr>
                <td align='center' colspan="2">
                    <button class="btn" type="button" name="limpiar" id="limpiar" onclick="Limpiar()">{{'ticketDetail.boton.limpiar' | trans}}</button>
                    <button class="btn" type="submit" name="guardar_submit" id="guardar_submit">{{'inbox.search' | trans}}</button>
                </td>
            </tr>             
         </table>
    </form>
    </div>

<div class="panel-body col-lg-8">
  <div id="tablaResumen"></div>
</div>
<div class="panel-body col-lg-4">
  <div id="grafica1" style="height: 270px;"></div>
</div>         
    <div id="cargar" style="position: absolute; top:  500px; left: 50%; background: transparent; "><image src="{{asset('images/spiral.gif')}}"/></div>
    <div class="panel-body col-lg-12">
      <div style="height:75px"></div>
      <div id="grafica2" style="height:500px"></div> <div style="height:75px"></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">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">{{'Titulo Modal' | trans}}</h4>
          </div>
          <div class="modal-body">

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>

          </div>
        </div>
      </div>
    </div>
                                
<script>
        $(document).ready(function () {         
            $("#cargar").css('display','block');        
        }); 
  
        //LIMPIAR CAMPOS DEL FORMULARIO    
        function Limpiar() {
            $(".error").remove();
            $('#Filtros_fechaIni').val("");
            $('#Filtros_fechaFin').val("");                
        }

        //Validar Formulario
        $('#guardar_submit').click(function () {
            $(".error").remove();

            if(($("#Filtros_fechaIni").val() == "") && ($("#Filtros_fechaFin").val() != "") ) {  
                $("#Filtros_fechaFin").focus().after("<span class='error'>Seleccione Fecha Inicio y Fecha Fin</span>");
                return false;  
            }else{
                 $("#cargar").css('display','block');
                 $('#guardar_submit').attr('disabled', true);                
                 $("#Filtros").submit();
            }     
        });  
    
        $('#Filtros_fechaIni').datepicker({
                dateFormat: 'yy-mm-dd',
                onClose: function( selectedDate ) {
                         $( "#Filtros_fechaFin" ).datepicker( "option", "minDate", selectedDate );

                }
        }); 
    
        $('#Filtros_fechaFin').datepicker({
                dateFormat: 'yy-mm-dd',
        });
        
        $('html').on('click', '.openModal', open)
        $('html').on('click', '.openModal', openDetalle)        

        function open(ruta){
            $('#myModal .modal-body').empty();
            $.getJSON(ruta,function(data){

                var table = "<table class='table table-striped'>" + "<thead>";
                table += "<tr align='center' class='btn-info'>";
                table += "<th>";
                table += "CODIGO";
                table += "</th>";
                table += "<th>";
                table += "NOMBRE DEL SITIO";
                table += "</th>";
                table += "</tr>";

                for(var i=0; i<data.length;i++){
                    supervisor=data[i].supervisor;
                    table += "<tr>";
                    table += "<td>"; table += data[i].codigo.toUpperCase(); table += "</td>";
                    table += "<td>"; table += data[i].sitio.toUpperCase(); table += "</td>";
                    table += "</tr>";
                }

                table += "<thead>";
                table += "</table>";

                $('#myModal .modal-body').html(table);

            });

            $('#myModal').modal()

        }  
        
        function openDetalle(data,estado,mes){
            $('#myModal .modal-body').empty();

                var table = "<table class='table table-striped'>" + "<thead>";
                table += "<tr align='center' class='btn-info'>";
                table += "<th>";
                table += "CODIGO";
                table += "</th>";
                table += "<th>";
                table += "NOMBRE DEL SITIO";
                table += "</th>";
                table += "<th>";                
                table += "ESTADO";
                table += "</th>";
                if (estado=='SUSPENDIDO'){
                    table += "<th>";                
                    table += "RESPONSABLE";
                    table += "</th>";
                    table += "<th>";                
                    table += "CAUSA";
                    table += "</th>";   
               }
                table += "<th>";                
                table += "OPERATIVO";
                table += "</th>";                
                table += "</tr>";

                for(var i=0; i<data.length;i++){
                    if ( (data[i]['estado'] == estado) && (data[i]['mes'] == mes) ) {
                        table += "<tr>";
                        table += "<td>"; table += data[i]['codigo'].toUpperCase(); table += "</td>";
                        table += "<td>"; table += data[i].sitio.toUpperCase(); table += "</td>";
                        table += "<td>"; table += data[i].estado.toUpperCase(); table += "</td>"; 
                        if (estado=='SUSPENDIDO'){
                            table += "<td>"; table += data[i].responsable.toUpperCase(); table += "</td>";                    
                            table += "<td>"; table += data[i].causa.toUpperCase(); table += "</td>";      
                        }
                        table += "<td>"; table += data[i].operativo.toUpperCase(); table += "</td>";                         
                        table += "</tr>";
                  }
                }

                table += "<thead>";
                table += "</table>";

                $('#myModal .modal-body').html(table);


            $('#myModal').modal()

        }
        
        function tablaResumen(data){
               
                var table = "<table class='table table-bordered table-hover table-fixed-header '>" + "<thead>";
                table += "<tr class='btn-info'>";
                table += "<th class='text-center'>";
                table += "SIN NTP";
                table += "</th>";
                table += "<th class='text-center'>";
                table += "EN PROCESO";
                table += "</th>";
                table += "<th class='text-center'>";
                table += "SUSPENDIDO";
                table += "</th>";                
                table += "<th class='text-center'>";
                table += "CUTOVER";
                table += "</th>"
                table += "<th class='text-center'>";
                table += "OPERATIVO";
                table += "</th>";                
                table += "</tr>";


                table += "<tr>";
                table += "<td >"; table += data['SIN NTP']; table += "</td>";
                table += "<td>"; table += data['EN PROCESO']; table += "</td>";
                table += "<td>"; table += data['SUSPENDIDO']; table += "</td>";
                table += "<td>"; table += data['CUTOVER']; table += "</td>";
                table += "<td>"; table += data['OPERATIVO']; table += "</td>";
                table += "</tr>";
            

                table += "<thead>";
                table += "</table>"; 

                $("#tablaResumen").empty();
                $("#tablaResumen").append(table);

        }          
        
        
        var colores = ['#F6C8DA','#98C94C','#E0F2BE','#cae4e9','#b88fef','#b0fa8a','#BDDD8C','#edbde9','#CCFFCC','thistle','#73D7F6','#dca7a7','#fa96ff','#a4a5ff','#37C6F2','#ccffb3','#92D2E5','#a5f8ff','#ff9999','#9999ff','#c9dbe9','#2BCEFF'];
        var SinNTP={{SinNTP}};
        var ConNTP={{ConNTP}};       
       
        $(function () {
            $('#grafica1').highcharts({
                chart: {
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                title: {
                    text: 'AMX Evolution Programación'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        },
                        point: {
                                events: {
                                    click: function (e) {
                                        open('{{ path('monitor_DetalleSitios',{'idproyectos':idproyectos})}}?var='+this.x);
                                    }
                                }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    data: [
                        {
                            name: 'Sin NTP',
                            y: SinNTP,
                            sliced: true,
                            selected: true,
                            color: '#FE0909'
                        },{
                            name: 'Con NTP',
                            y: ConNTP,
                            sliced: true,
                            selected: true,

                        }


                    ]
                }]
            });
        });       
       
        updateMonitor();

        window.pollingPeriod = 200000;
        window.progressInterval;

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

       function updateMonitor() {     

            $.ajax({
                url: '{{path('monitor_cliente')}}',
                data:{idproyectos:{{idproyectos}},fechaIni:'{{fechaIni}}',fechaFin:'{{fechaFin}}'}
            }).done(function (data) {    
                var monitor = data.monitor;
                var monitor2 = data.monitor2;                
                var mesO = data.mes;
                var SitiosActivos  = data.SitiosActivos;
                
                tablaResumen(monitor2);

                var mes = new Array();
                    for (var i = 0; i < mesO.length; i++) {
                         mes[i]=mesO[i]['mes'];
                }
                
                var lastUpdate = +new Date(),
                timeout = 3000;
                function reloadFlash() {
                    $("#flash").fadeIn();
                    lastUpdate = +new Date();
                    setTimeout(hideFlash, timeout);
                }

                function hideFlash() {
                    var now = +new Date();
                    if (now >= lastUpdate + timeout) {
                        $("#flash").fadeOut();
                    }
                }
    
           
            //Sitios Suspendidos por Supervisor (Diario)                     
            var chart1 = new Highcharts.Chart({
                chart: {
                    renderTo: 'grafica2',
                    type: 'column'
                },
                title: {
                    text: 'Estatus Implementación'
                },
                xAxis: {
                    categories: mes
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Total por Estado'
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                        }
                    }
                },
                legend: {
                    align: 'center',
                    x: -30,
                    y: -10,
                    floating: false,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                    borderColor: '#CCC',
                    borderWidth: 1,
                    shadow: false
                },
                tooltip: {
                    formatter: function () {
                        return '<b> Mes: ' + this.x + '</b><br/>' +
                            this.series.name + ': ' + this.y + '<br/>' +
                            'Total: ' + this.point.stackTotal;
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true,
                            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'gray',
                            style: {
                                fontWeight: 'bold'
                            }
                        }
                    },
                    series: {
                            cursor: 'pointer',
                            point: {
                                events: {
                                    click: function (e) {
                                        openDetalle(SitiosActivos,this.series.name,mes[this.x]);
                                    }
                                }
                            }
                    }                    
                }           
            });
  
            var Estado = ['EN PROCESO','SUSPENDIDO','CUTOVER'];
            var dataCompleta = new Array();
            for (var k = 0; k < Estado.length; k++) {
                var data = new Array();
                for (var j = 0; j < mes.length; j++) {
                    data[j]=null;
                    for (var i = 0; i < monitor.length; i++) {
                        if ((Estado[k] == monitor[i]['estado']) && (monitor[i]['mes']==mes[j])) {
                            data[j]=parseInt(monitor[i]['total']);
                            i=monitor.length;
                        }
                    }
                }
                dataCompleta[k]=data;
            }
            
            console.log("monitor: "+monitor.length); 
            //console.log("estado: "+Estado);             
            //console.log("mes: "+mes); 
            //console.log("SitiosActivos: "+SitiosActivos[0]);             
            for (var i = 0; i < Estado.length; i++) {
                chart1.addSeries({                        
                    name: Estado[i],
                    data: dataCompleta[i],
                    color: colores[i],
                    pointWidth: 50
                });  
            
            }
            
            
            $("#cargar").css('display','none');                
  });

  }

</script>
{% endblock %}