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

{% endblock %}

{% block dashboard %}
    <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);}
        }
        .table-responsive {
            height: 400px !important;
            overflow: scroll;
            }
             .btn-claro {
            color: #fff;
            background-color: #aa0001;
            border-color: #e06a70;

            }
            .btn-claro:hover, .btn-claro:focus {
            color: #fcfcfc;
            text-decoration: none;
            }
            tr {cursor:pointer}
    </style>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script src="{{ asset('js/tableExport.js') }}"></script>
    <script src="{{ asset('js/jquery.base64.js') }}"></script>
    <script src="{{ asset('js/jquery.numeric.js') }}"></script>
    <script src="{{ asset('js/jquery.form.js') }}"></script>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script>
        var translation = {



        };

        $(function () {
            
             $("#generar").click(function(){
                $.isLoading({
                    text:       "Loading"
                });
                $("#cantidad").html(0);
                reporteBateria();
            });
            
            $('#Filtros_fechaIni').datepicker({
                    dateFormat: 'yy-mm-dd',
                    onClose: function( selectedDate ) {
                             $( "#Filtros_fechaFin" ).datepicker( "option", "minDate", selectedDate );

                    }
            }); 

            $('#Filtros_fechaFin').datepicker({
                    dateFormat: 'yy-mm-dd',
            });            
                
            $("#clear").click(function(){
                $("#pais").val();
                $("#region").val("TODOS");      
                $('#Filtros_fechaIni').val("");
                $('#Filtros_fechaFin').val("");                 
            });              
            
            {%if idproyectos == 35 or idproyectos == 30 or idproyectos == 32 or idproyectos == 36 or idproyectos == 37 or idproyectos == 38%} 
                   {%if idproyectos == 35 %} {%set idpais=1%} {%set pais='Guatemala'%}{%endif%}
                   {%if idproyectos == 30 %} {%set idpais=2%} {%set pais='Honduras'%}{%endif%} 
                   {%if idproyectos == 32 %} {%set idpais=4%} {%set pais='Nicaragua'%}{%endif%}   
                   {%if idproyectos == 36 %} {%set idpais=3%} {%set pais='El Salvador'%}{%endif%}        
                   {%if idproyectos == 37 %} {%set idpais=5%} {%set pais='Costa Rica'%}{%endif%}  
                   {#Para reunion con telefonica se incluyo el reporte en el proyecto 38#}
                   {% if idproyectos == 38 %} {% set idpais=3 %} {% set pais='El Salvador' %}{% endif %}  
                       
                   $("#pais option").remove(); 
                   $("#pais").append('<option value={{idpais}}>{{pais}}</option>');
                    //Llenar Combos
                    $.isLoading({
                        text: "Loading"
                    });
                    llenarCombos();
            {%endif%}
                
            $("#pais").change(function(){
               if  ($("#pais").val() != "TODOS"){
                        $.isLoading({
                                text: "Loading"
                        });
                        llenarCombos();
               }else{
                    $("#region option").remove(); $("#region").append('<option value="TODOS">REGION</option>');   
               }
               $('#generar').trigger('click');
            });  

        $("tr").live("click",function(){
            var id = $(this).attr("id")
             if(id!= null){
             $('#myModalDetalle .modal-body').empty();
             $('#myModalDetalle').modal();
             $('#myModalDetalle .modal-body').isLoading({
                text:       "Loading",
                position:   "inside"
        });
                

                 $.ajax({

                url : "{{ path('reportemshonduras_reporteDetalleEnergia') }}",
                data : {'sitio': id}


            }).done(function(data){



                $('#myModalDetalle .modal-body').empty();
                var tierra = ''
                tierra += '<div class="table-responsive">'
                 tierra += createTable(data.bateria);
                 tierra += '</div>'
                $('#myModalDetalle .modal-body').append(tierra);
                 $.isLoading("hide");
            });

               // alert($(this).attr("id"));
                }});
               
            $('#generar').trigger('click');
        });




        function reporteBateria(){

                var data = {};
                
                data['pais'] = $("#pais").val();
                data['region'] = $("#region").val();    
                data['fechaIni'] = $("#Filtros_fechaIni").val();  
                data['fechaFin'] = $("#Filtros_fechaFin").val(); 
                
                var e = document.getElementById("alarmas");

            if (e.options[e.selectedIndex].value   == '1') {
                data['alarmas_value'] = '1';
            } else if (e.options[e.selectedIndex].value   == '2'){
                data['alarmas_value']  = '2';
                } else if (e.options[e.selectedIndex].value   == '3'){
                data['alarmas_value']  = '3';
                } else if (e.options[e.selectedIndex].value   == '4'){
                data['alarmas_value']  = '4'
                } else if (e.options[e.selectedIndex].value   == '5'){
                data['alarmas_value']  = '5';
                } else if (e.options[e.selectedIndex].value   == '6'){
                data['alarmas_value']  = '6';
            }else
                {
                    data['alarmas_value'] = 'todos';
                }
                
            $.getJSON('{{path('reportemshonduras_reporteEnergia')}}',data, function (data) {

                    var bateria  = data.bateria;

                            if(bateria.length == 0){

                    $("#primer_reporte").empty();
                    $("#primer_reporte").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
                    $.isLoading("hide");
                    return false;

                            }
                    $("#cantidad").html(bateria.length);
                    $("#primer_reporte").empty().append(createTable(bateria));
                     $.isLoading("hide");

                });
       }

       
         function myFunction(index , idelment) {
  // Declare variables 
  var input, filter, table, tr, td, i, tmpstr;

  input = document.getElementById('id'+index+'id');
 //   index =index-1;
  filter = input.value.toUpperCase();
  table = document.getElementById("tabla1");
  tr = table.getElementsByTagName("tr");
  
  for (i = 0; i < tr.length; i++) {
      
       console.log('la i '+i);
   td = tr[i].getElementsByTagName("td")[index];
   console.log(index);
    if (td) {
        tmpstr = td.innerHTML.toUpperCase();
      if (tmpstr.search(filter) > -1) {
               tr[i].style.display = "";
      } else {
          if(i>1)
          {
              tr[i].style.display = "none";
          }
        
      }
    } 
  }
}
       
        function getTotal(valor,key,tipo)
        {
            var total = new Array();

            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;
                        }
                        
                    if (tipo==1){
                        total[key[j]] +=  parseFloat(valor[i][header[key[j]]]);
                        if (i == (valor.length-1)) total[key[j]]=parseFloat(total[key[j]]).toPrecision(3);
                    //alert(total[key[j]]);
                    }
                    else
                        total[key[j]] +=  parseInt(valor[i][header[key[j]]]);

                    }
                    
                }
            return total;
        }
        /*
         * var input = 'john smith~123 Street~Apt 4~New York~NY~12345';
         * var fields = input.split('~');
         * var name = fields[0];
         * var street = fields[1];
         * 
         */
        function alarmasDetalle(e) {
            var input = e.id;
            var datos = input.split(",");

            var alarmas = [
                " ",
                "No hay un breacker principal",
                "No se encuentra monitoreada remotamente la alrma de corte CA",
                "El sitio no cuenta con MG",
                "No se realizo el analisis de calidad energetica",
                "El facto potencia <90%  o =100%",
                "Supervisar la corrección del DESBALANCE TRIFÁSICO = REALIZADO"
            ];

            if (e.id ==null ){ 
           }else{
               document.getElementById("palarmtext").innerHTML = '';
               datos.forEach(function(entry) {
                   if (alarmas[entry] != null){
                    document.getElementById("palarmtext").innerHTML += '-'+  alarmas[entry] + '<br>';
                } 
                });

              
           }     
        }
    
        
        function createTable(monitor,total,nombreColTotal){
            var header = Object.keys(monitor[0]);
              var table = '<table id=tabla1 class="table table-bordered table-hover table-striped table-responsive table1 tablesorter tablesorter-blue hasFilters"> <thead>' +
                    '<tr class="btn-claro">';

            for (var j = 0; j < header.length; j++) {
                 
                if(header[j] != 'CLASS' && header[j] != 'alarma'
                       ){

                table += "<th style='vertical-align:middle;'\n\
                class='text-center'>" + header[j] + "</th>"
                }
            }
            table += "</tr></thead>";
            
            table += '<tr >';
            var flagnumber =0;
            for (var j = 0; j < header.length; j++) {
                    
                 if(header[j] != 'CLASS' && header[j] != 'alarma'                             
                    ){
                
                var tmpid = 'id'+flagnumber+'id';
                table += "<td style='vertical-align:middle;' class='text-center'>\n\
                        <input  class='form-control' type=input id="+tmpid+" onkeyup=myFunction("+flagnumber+","+"id"+flagnumber+"id"+")></td>"
                flagnumber +=1;
            }
                }
            
            table += "</tr></thead>";

            for (var i = 0; i < monitor.length; i++) {
                table += "<tr id="+monitor[i]['ID']+">";
                for (var j = 0; j < header.length; j++) {
                        var clases   = '';
                        var values = '';
                       
                if(header[j] == 'ALARSMA' )
                    {
                        if(monitor[i]['breaker']=='No_hay' ){
                        
                            values=  '1,'; 
                            monitor[i]['ALARMA'] = 'SI';
                        }
                        
                        if(monitor[i]['ac']=='No' ){
                       
                            values=values + '2,'; 
                            monitor[i]['ALARMA'] = 'SI';
                        }
                        if(monitor[i]['MG']=='DESOPERADO_fuera_de_funcionamiento' ){
                        
                            values= values + '3,'; 
                           monitor[i]['ALARMA'] = 'SI';
                        }
                        
                        //if(parseInt(monitor[i]['Factor de potencia'])>90  || parseInt(monitor[i]['Factor de potencia'])==100 )
                        //{ clases = 'btn-danger text-center';
                        //    values= values + '4,'; 
                        //   monitor[i]['ALARMA'] = 'SI';
                        //}
                        
                        if(monitor[i]['analisis calidad']=='No_realizado' ){
                
                            values= values + '5' ; 
                            monitor[i]['ALARMA'] = 'SI';
                        }
                        if(monitor[i]['luz_unbalance']=='No_realizado' ){
                
                            values= values + '5' ; 
                            monitor[i]['ALARMA'] = 'SI';
                        }
                        
                        
                        
                        if(monitor[i][header[j]]!=null){
                            clases = 'btn-danger text-center'
                         table += "<th class="+clases+" id="+values+" onclick=alarmasDetalle(this) data-toggle=modal data-target=#myModal>" + monitor[i][header[j]]  + "</th>";
                        }else
                        {
                        
                        table += "<th >NO</th>";
                        }
                    }
                    if(header[j] != 'CLASS' && header[j] != 'alarma'
                       ){ 
                        

                        if(header[j] == 'FECHA SIG. MEDICION' && monitor[i]['CLASS'] == 1  ){


                          clases = 'btn-danger';

                        }
                         table += "<td class="+clases+" id="+values+">" + 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;
        }
            
       

        function translate(translation,table){

            var translationHeader = Object.keys(translation);

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

                table = table.replace(translationHeader[i],translation[translationHeader[i]]);


            }

            return table;
        }

        function ISO8601_week_no(dt)
  {
     var tdt = new Date(dt.valueOf());
     var dayn = (dt.getDay() + 6) % 7;
     tdt.setDate(tdt.getDate() - dayn + 3);
     var firstThursday = tdt.valueOf();
     tdt.setMonth(0, 1);
     if (tdt.getDay() !== 4)
       {
      tdt.setMonth(0, 1 + ((4 - tdt.getDay()) + 7) % 7);
        }
     return 1 + Math.ceil((firstThursday - tdt) / 604800000);
        }

     function llenarCombos(){
            $("#region option").remove();     
            $("#region").append('<option value="TODOS">REGION</option>');            
            var data = {};
            data['pais']=$("#pais").val();  
            $.getJSON('{{path('reportemsguatemala_llenarCombosInventario')}}',data, function (data) {
                    var regions  = data.region;
   
                    for (var i = 0; i < regions.length; i++) {
                        $("#region").append('<option value="'+regions[i]['REGION']+'">' +regions[i]['REGION']+ '</option>');
                    }
            
                    $.isLoading("hide");

                });              
        };

    </script>

    <div class="container">
        {#Para reunion con telefonica se incluyo el reporte en el proyecto 38#}
     {%if idproyectos == 38%}
        <style>
        .btn-claro {
            color: #fff;
            background-color: #00569C;
            border-color: #3D59CA;
        }
        .btn-claro:hover, .btn-claro:focus {
            color: #fcfcfc;
            text-decoration: none;
       }            
        </style>
        <div class="row">
            <div class="col-lg-12">
                    <img id="logo" class="pull-right" src="{{ asset('images/telefonica.png') }}"  width="220" height="72" >

             </div>
        </div> 
     {%else%}
        <div class="row">
            <div class="col-lg-12">
                    <img id="logo" class="pull-right" src="{{ asset('images/claro.jpg') }}"  width="220" height="72" >

             </div>
        </div> 
      {%endif%}
        <div class="row">
             <div class="col-lg-2"  style="margin-top: 1%">
                <label>{{'monitor.pais' | trans}}: </label>                 
                <select class="form-control" id="pais">
                    <option value="TODOS">{{'inbox.all' | trans}}</option>
                    {%for pais in paises%}
                        <option value="{{pais.eval_proyecto_id}}">{{pais.nombre}}</option>
                    {%endfor%}
                </select>
            </div>            
            <div class="col-lg-2"  style="margin-top: 1%">
                <label>{{'monitor.etiqueta.fechaI' | trans}}: </label>  
                <input type="text" class="form-control hasDatepicker" id="Filtros_fechaIni" value="{{ dateStart }}">
            </div>
            <div class="col-lg-2"  style="margin-top: 1%">
                <label>{{'monitor.etiqueta.fechaF' | trans}}: </label>  
                <input type="text" class="form-control hasDatepicker" id="Filtros_fechaFin" value="{{ dateEnd }}">
            </div>
              <div class="col-lg-2"  style="margin-top: 1%">
                 <label>{{'monitor.etiqueta.region' | trans}}: </label>
                <select class="form-control" id="region">
                    <option value="TODOS">{{'inbox.all' | trans}}</option>
                </select>
            </div>
            <div class="col-lg-2"  style="margin-top: 1%">
                 <label>{{'Filtro' | trans}}: </label>
                <select class="form-control" id="alarmas">
                         <option value="todos">{{'inbox.all' | trans}}</option>
                         <option value="1">{{'Interruptor' | trans}}</option>
                         <option value="2">{{'Corte de AC' | trans}}</option>
                         <option value="3">{{'Cuenta con MG' | trans}}</option>
                         <option value="4">{{'Calidad energetica' | trans}}</option>
                         <option value="5">{{'Factor de potencia' | trans}}</option>
                         <option value="6">{{'DESBALANCE TRIFASICO' | trans}}</option>
                     </select>
            </div>
            <div class="col-lg-2" id="parametros" style="margin-top: 1%">
                 <label>
                     
                 </label>
               <button class="btn btn-claro" id="generar">{{'ticketDetail.boton.generar' | trans}}</button>
               <button class="btn btn-claro" id="clear">{{'ticketDetail.boton.limpiar' | trans}}</button>
            </div>
        </div>
         <div class="row">

                <div class="col-lg-12 text-center"  style="margin-top: 1%">
                    <h1>{{'MP ENERGIA' | trans}}</h1>
                   
                 </div>

        </div>
        <div class="row">
         <div class="col-lg-3"  style="margin-top: 1%">
                {{'Cantidad' | trans}}: <span id="cantidad" class="bold"></span>
             </div>
             <div class="col-lg-offset-9"  style="margin-top: 1%">
                    <div class="btn-group pull-right">
                    <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i> {{'Exportar datos de la tabla' | trans}}</button>
                    <ul class="dropdown-menu" role="menu">



                        <li><a href="#" onclick="$('#primer_reporte').tableExport({type: 'excel', escape: 'false'});"> <img src={{ asset("images/xls.png")}} width="24px"> XLS</a></li>


                    </ul>
                </div>
         </div>
        </div>
        <div class="row">
            <div class="col-lg-12" id="primer_reporte" style="margin-top: 1%"></div>
        </div>

        </div>        
    </div>
    
<!-- Esto es para el detalle de las alarmas de los monitores..  -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">{{'Detalle de las alarmas' | trans}}</h4>
    </div>
    <div class="modal-body">
      <p id="palarmtext"></p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>
    </div>
  </div>
</div>
<!-- fin detalle alarma  -->

    <div class="modal fade" id="myModalDetalle" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header  bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title text-center" id="myModalLabel">{{'DETALLE VISITAS' | trans}}</h2>
                </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>
{% endblock %}