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

{% endblock %}

{% block dashboard %}
<style>
       .double-scroll {
            width: 100%;
            margin-bottom: 20px;
        }

        .tablesorter-pager select {
            margin: 0;
            padding: 0;
            width: 50px;
        }
        table.tablesorter thead tr th {
            background-color:#aa0001;
            border: 2px solid #FFF;
            font-size: 8pt;
            text-transform:uppercase;
            padding: 4px;
            text-align: center;
            color: white;
            font-weight: bold;
        }
        .th2
        {
            background-color:#aa0001;
              border: 2px solid #FFF;
            font-size: 8pt;
            text-transform:uppercase;
            padding: 4px;
            text-align: center;
            color: white;
            font-weight: bold;
        }
 .std {
            background-color:#aa0001;
            border: 2px solid #FFF;
            font-size: 8pt;
            text-transform:uppercase;
            padding: 4px;
            text-align: right;
            color: white;
            font-weight: bold;
        }
     .stdLeft {
            background-color:#aa0001;
            border: 2px solid #FFF;
            font-size: 8pt;
            text-transform:uppercase;
            padding: 4px;
            text-align: left;
            color: white;
            font-weight: bold;
        }
        .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);}
        }
        #menuTop {
            margin-top: 30px;
        }
       /* .table{
            font-size: 12px;
            width: 3000px;
        }
*/
        .estilod{
            background-color: green;

        }

        .estilof{
            background-color: red;

        }
        espacio{
            padding-top: 20px;
        }
    
    .reconocer
        {
            background:#aa0001;
            color:#ffffff;
           border-radius: 300px 300px 300px 300px;
            -moz-border-radius: 300px 300px 300px 300px;
            -webkit-border-radius: 300px 300px 300px 300px;
            border: 1px solid #000000;
            height: 30px;
            font: oblique bold 120% ;
        }
        .modal-header{
            background:#aa0001;
            font:oblique bold;
           text-transform: uppercase;
        }
            
    
.btn-orange {
    color: #fff;
    background-color: rgb(255, 165, 0) !important;
    border-color: #ecea19;
}	
</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>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    //////////////////////////////////////////////////////////////////
    
    
   $(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(){
                $("#region").val("TODOS");      
                $('#Filtros_fechaIni').val("");
                $('#Filtros_fechaFin').val("");  
            });             

            $('#generar').trigger('click');

        });

        
        function reporteBateria(){

            data = {};

               
                data['fechaIni'] = $("#Filtros_fechaIni").val();  
                data['fechaFin'] = $("#Filtros_fechaFin").val();    
                data['pais'] = 36;                 
                
            $.getJSON('{{path('MonitorSmartRsc_ReporteKPI')}}',data, function (data) {

                    var bateria  = data.kpi;

                            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));
                    //$("#primer_reporte" ).slider();
                    
                    /////////////////////////////////////////////////////////
                    
                    $("#cantidad").html(bateria.length);
                   var pagerOptions = {
                        // target the pager markup - see the HTML block below
                        container: $(".pager"),
                        // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
                        output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
                        // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
                        // table row set to a height to compensate; default is false
                        fixedHeight: false,
                        // remove rows from the table to speed up the sort of large tables.
                        // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
                        removeRows: true,
                        // go to page selector - select dropdown that sets the current page
                        cssGoto: '.gotoPage'
                    };
                     
                    
                    
                     var pagerOptions = {
                        // target the pager markup - see the HTML block below
                        container: $(".pager"),
                        // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
                        output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
                        // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
                        // table row set to a height to compensate; default is false
                        fixedHeight: false,
                        // remove rows from the table to speed up the sort of large tables.
                        // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
                        removeRows: true,
                        // go to page selector - select dropdown that sets the current page
                        cssGoto: '.gotoPage'
                    };
                    // initial sort set using sortList option
                    $(".table1").tablesorter({
                        theme: 'blue',
                        // sort on the first column and second column in ascending order
                        widgets: ["zebra", "filter"],
                        widgetOptions: {
                            // extra css class applied to the table row containing the filters & the inputs within that row
                            filter_cssFilter: '',
                            // If there are child rows in the table (rows with class name from "cssChildRow" option)
                            // and this option is true and a match is found anywhere in the child row, then it will make that row
                            // visible; default is false
                            filter_childRows: false,
                            // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
                            // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
                            filter_hideFilters: false,
                            // Set this option to false to make the searches case sensitive
                            filter_ignoreCase: true,
                            // jQuery selector string of an element used to reset the filters
                            filter_reset: '.reset',
                            // Use the $.tablesorter.storage utility to save the most recent filters
                            filter_saveFilters: true
                        }
                    }).tablesorterPager(pagerOptions);
                    
                    
                    /////////////////////////////////////////////////////////
                    
                    $.isLoading("hide");
                });
       }
     
        function createTable(monitor,total,nombreColTotal){
            var header = Object.keys(monitor[0]);
            var table = '<table class="table relleno table-bordered table-hover table-striped table-responsive table1 tablesorter tablesorter-blue hasFilters" id="table1"> <thead>' +
                   '<tr class="btn-claro">';
                     table+="<th style='vertical-align:middle;' class='text-center'>ASP</th>\n\
                             <th style='vertical-align:middle;' class='text-center'>tecnico</th>\n\
\                            <th style='vertical-align:middle;' class='text-center'>Tickets Asignados</th>\n\
                             <th style='vertical-align:middle;' class='text-center'>Tickets Cerrados</th>\n\
                             <th style='vertical-align:middle;' class='text-center'>LPU-Target: 100%</th>\n\
                             <th style='vertical-align:middle;' class='text-center'>Calidad-Target: 95%</th>\n\
                             <th style='vertical-align:middle;' class='text-center'>PRODUCCIÓN-Target: 95%</th>\n\
                             <th style='vertical-align:middle;' class='text-center'>Check In-Target: 100%</th>\n\
                            <th style='vertical-align:middle;' class='text-center'>Check Out-Target: 100%</th>"
            table += "</tr></thead>";

            for (var i = 0; i < monitor.length; i++) 
            {
                table+="<tr >\n\
                        <td>"+monitor[i]['ASP']+"</td>\n\
                        <td>"+monitor[i]['tecnico']+"</td>\n\
                        <td>"+monitor[i]['Tickets asignados']+"</td>\n\
                        <td>"+monitor[i]['Ticket cerrados']+"</td>";
                      if(monitor[i]['% LPU']<=100)
                      {
                          table+=" <td class='btn-danger'>"+monitor[i]['% LPU']+" %</td>";
                      }
                      else
                      {
                        table+="<td class=''>"+monitor[i]['% LPU']+" %</td>";  
                      }
                      
                      if(monitor[i]['calidad']<95)
                      {
                          table+="<td class='btn-danger'>"+monitor[i]['Calidad']+" %</td>";
                      }
                      else
                      {
                          table+="<td>"+monitor[i]['Calidad']+" %</td>";
                     
                      }
                      if(monitor[i]['% Produccion']<95)
                      {
                          table+="<td class='btn-danger'>"+monitor[i]['% Produccion']+" %</td>";
                      }
                      else
                      {
                          table+="<td>"+monitor[i]['% Produccion']+" %</td>";
                     
                      }
                      if(monitor[i]['% CHIN']<100)
                      {
                          table+="<td class='btn-danger'>"+monitor[i]['% CHIN']+" %</td>";
                      }
                      else
                      {
                           table+="<td class=''>"+monitor[i]['% CHIN']+" %</td>";
                      }
                      if(monitor[i]['% CH_OUT']<100)
                      {
                        table+="<td class='btn-danger'>"+monitor[i]['% CH_OUT']+" %</td>"; 
                      }
                      else
                      {
                          table+="<td class=''>"+monitor[i]['% CH_OUT']+" %</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 valueDiv(id)
       {
           
         //  Produccion= content = document.getElementById(id+"Produccion").innerHTML;
           data = {};

               
            
               variable=id.split("_");
               if(!variable[1])
               {
                  asp= document.getElementById(id+"asp").innerHTML;
                  tecnico= document.getElementById(id+"tecnico").innerHTML;
                  produccion= document.getElementById(id+"Produccion").innerHTML;
                  lpu= document.getElementById(id+"LPU").innerHTML;
                  checkin= document.getElementById(id+"checkin %").innerHTML;
                  checkout= document.getElementById(id+"checkout %").innerHTML;
                 /* data['checkIn'] =  
                  data['calidad'] =  
                  data['Produccion'] =  
                  data['lpu'] = 
                  data['checkOut'] =  
                  data['asp'] = 
                  data['tecnico'] = */
                   
               }
                 
            $.getJSON('{{path('MonitorSmartRsc_ReporteVariables')}}',data, function (data) {

                    
                    
                });
          
       }
        
     

  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);
  }
</script>
<div class="container-fluid">
     <div class="container-fluid">
       <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>  
       
       
        <div class="row">
            <div class="col-lg-2"  style="margin-top: 1%">
                <label>{{'monitor.etiqueta.fechaI' | trans}}: </label>  
                <input type="text" id="Filtros_fechaIni" value="{{ dateStart }}">
            </div>
            <div class="col-lg-2"  style="margin-top: 1%">
                <label>{{'monitor.etiqueta.fechaF' | trans}}: </label>  
                <input type="text" id="Filtros_fechaFin" value="{{ dateEnd }}">
            </div>
             
                       
                         
            <div class="col-lg-2" id="parametros" style="margin-top: 1%">
               <button class="reconocer" id="generar">{{'ticketDetail.boton.generar' | trans}}</button>
               <button class="reconocer" id="clear">{{'ticketDetail.boton.limpiar' | trans}}</button>
            </div>  
          
           
         <div class="row" >
                <div class="col-lg-8 text-center col-md-offset-2"  style="margin-top: 1%">
                    <h1> {{'MONITOR SUPERVISOR' | trans}}</h1>
                 </div>
              <div class="col-md-12"  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="$('#table').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>

{% endblock %}