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

{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('datatables/css/dataTables.bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{ asset('datatables/css/buttons.bootstrap.min.css')}}">
    <style>
        .btn-claro {
            color: #fff;
            background-color: #00569C;
            border-color: #3D59CA;
        }
       .double-scroll {
            width: 100%;
            margin-bottom: 20px;
        }

        .tablesorter-pager select {
            margin: 0;
            padding: 0;
            width: 50px;
        }
        table.tablesorter thead tr th {
            background-color:#00569C;
            border: 2px solid #FFF;
            font-size: 8pt;
            text-transform:uppercase;
            padding: 4px;
            text-align: center;
            color: white;
            font-weight: bold;
        }
        .th2
        {
            background-color:#00569C;
              border: 2px solid #FFF;
            font-size: 8pt;
            text-transform:uppercase;
            padding: 4px;
            text-align: center;
            color: white;
            font-weight: bold;
        }
 .std {
            background-color:#00569C;
            border: 2px solid #FFF;
            font-size: 8pt;
            text-transform:uppercase;
            padding: 4px;
            text-align: right;
            color: white;
            font-weight: bold;
        }
     .stdLeft {
            background-color:#00569C;
            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:#00569C;
            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: 38px;
            width: 80px;
            font: oblique bold 120% ;
        }
        .modal-header{
            background:#00569C;
            font:oblique bold;
           text-transform: uppercase;
        }


.btn-orange {
    color: #fff;
    background-color: #00569C;
    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 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++) {

       td = tr[i].getElementsByTagName("td")[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";
              }

          }
        }
      }
    }

    var translation = {};

    $(function () {

        //GENERAR TABLA
        $("#generar").click(function(){
            $.isLoading({
                text: "Loading"
            });

            $("#cantidad").html(0);
            // GENERAR TABLA.
            reporte();
             //$.isLoading("hide");
        });

        $('#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("");
        });




              $("#save").click(function(){
                           id=$("#vg").text();
                           id= id.split("@");

                           alert($("#comment").val());
                           alert(id[0]);
                           alert(id[1]);

                           var comment=$("#comment").val();

                           idproyectos={{idproyectos}};
                           idticket=id[1];

                switch (id[0])
                {
                    case "Aprobar":
                         idEstado=2551;
                    break;
                     case "Rechazar":
                         idEstado=2552;
                    break;

                }



                     var url2="{{path('actualizarEstadoCliente',{'idproyectos':idproyectos,'idticket':'idticketn','idEstado':'idEstadon'})}}"+"?comentario="+comment+"";

                         url2=url2.replace("idticketn",idticket);
                         url2=url2.replace("idEstadon",idEstado);

                         console.log(url2);


                           $.ajax({
                            type: "GET",
                            async: true,
                            url: url2,
                            //data: {infMas: infoMasiva}
                        }).success(function (msj) {
                            $("#myModal2").modal();
                            $("#cantidad").html(0);
                 reporte();
                            //alert(msj);
                            //$("#datosPersonales").text('');
                            //$("#datosPersonales").load("{{path('addDptoCargo',{'idproyectos':idproyectos })}}", {$iduser: msj});
                           // $('#cargar').css('display', 'none');
                            //location.reload(true);
                        }).error(function (msj) {
                            //$("#myModal2").modal();
                            alert("Falla en aplicacion ");

                        });



                           $("#v").empty();
                            $("#msj").empty();
                           $("#vg").empty();
                           $("#comment").val(' ');

               });


                 $("#cancel").click(function(){


                           $("#v").empty();
                            $("#msj").empty();
                           $("#vg").empty();
                           $("#comment").val(' ');

               });


                $("#close").click(function(){


                           $("#v").empty();
                            $("#msj").empty();
                           $("#vg").empty();
                           $("#comment").val(' ');

               });


                    $('#comment').keypress(function() {



                    $('#save').attr('disabled', false);

                 });




           $(".openDetalle").live("click",function(e){

               var $d = $(this).data();
               var data = {};
               data['idmodulep'] = {{idmodulep}};
               data['idproyectos']={{idproyectos}};
               data['idpadre']= $d.idpadre;
               data['idproceso']=$d.idproceso;


               $.isLoading({
                   text: "Loading"
               });


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

                   var datos  = data.datos;
                   $('#myModalLabel').innerHTML='DETALLE DEL MANTENIMIENTO';
                   $("#detalleT").empty().append(createDetalle(datos));
                   $('#myModalDetalle .modal-body').empty();
                   $('#myModalDetalle').modal();

               }).done(function(datos){
                   $('#myModalDetalle .modal-body').empty();
                   var tierra = ''
                   tierra += '<div class="table-responsive">'
                   tierra += '</div>'
                   $('#myModalDetalle .modal-body').append(tierra);
                   $.isLoading("hide");
               });
          });
        $('#generar').trigger('click');

    });

    function reporte(){

        var data = {};
        data['inicio'] = $("#Filtros_fechaIni").val();
        data['fin'] = $("#Filtros_fechaFin").val();
        data['idproyectos']={{idproyectos}};


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

            var datos  = data.datos;

            //getTorta(data.torta);
            if(datos.length == 0){

                $("#primer_reporte").empty();
                $("#primer_reporte").append('<div class="alert alert-warning" role="alert">NO TIENE REPORTES PENDIENTES POR APROBAR</div>');
                $("#torta").empty();
              //  $("#torta").append('<div class="alert alert-warning" role="alert">NO TIENE REPORTES EN ESPERA DE APROBACIÓN</div>');

                $.isLoading("hide");


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

                 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);
            }
        });
   }


    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;
        }

    function createTable(monitor,total,nombreColTotal){
            var header = Object.keys(monitor[0]);
            var arrayExcl = ['idTicket','idS','Estado','Actividad'];
            var arrayAdd = ['AA','MG','FU','RE','IN','PR','RB','SE','MA','TO','CH'];
            var table = '<table id="table1" class="table table-bordered table-hover table-striped table-responsive table1"> <thead>' +
                    '<tr class="btn-claro">';

            for (var j = 0; j < header.length; j++) {
                if(filterColumnasPemitidas(header[j],arrayExcl)){
                    table += "<th style='vertical-align:middle;' class='text-center'>" + header[j] + "</th>"
                }
            }
            table += "</tr></thead>";

            for (var i = 0; i < monitor.length; i++) {
                    var ticket=monitor[i]["idTicket"];
                    var ini=$("#Filtros_fechaIni").val();
                    var fin= $("#Filtros_fechaFin").val();

                    table += "<tr id="+monitor[i]['idTicket']+">";

                for (var j = 0; j < header.length; j++) {
                    if(filterColumnasPemitidas(header[j],arrayExcl)){
                        var valueArray = monitor[i][header[j]].split('||');
                         if(addClassPemitidas(header[j],valueArray[0],arrayAdd)!= ""){
                             data = "data-idproceso='"+ valueArray[1] +"' data-idpadre='" +monitor[i]['idTicket']+ "'";
                         }else{
                             data ="";
                         };

                          table += "<td style='vertical-align:middle; text_align:' "+ data +" class='text-center " + addClassPemitidas(header[j],valueArray[0],arrayAdd) + "' >" + valueArray[0]  + "</td>";
                    }
                }
                    table += "</tr>";

                if(typeof total !== "undefined") {
                        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 getTorta(data){

        var colores = ['blue','#E5FB24','green','#62FF00','#a1c517','#0B12E2','#8A0868','#009045','#FF9500','#04FFFC','#7EB7FC','#CE9BA9','#fa96ff','#a4a5ff','#37C6F2','#ccffb3','#92D2E5','#a5f8ff','#ff9999','#9999ff','#c9dbe9','#2BCEFF'];
        var valorY=[];
        var categoria=[];
        var series=[];



                        $.isLoading("hide");

                        for (var i =0; i < data.length; i++)
                        {
                         var vValor=parseInt(data[i]['cantidad']);
                            categoria.push(data[i]['Región']);
                            valorY.push(vValor);

                            series[i] ={ name:data[i]['Región'], y: parseInt(data[i]['cantidad']) };
                        }

            var options = {
                chart: {
                    renderTo: 'torta',
                    type: 'pie',
                    height: 400,
                    width: 650,
                    options3d: {
                        enabled:true,
                        alpha: 45,
                        beta:0
                    }
                },
                title: {
                    text: 'REPORTES POR REGIÓN'
                }, //no toquen 4
                //
                colors: colores,
                tooltip: {
                    pointFormat: 'Porcentaje de Reportes: <b>{point.percentage:.1f}%</b>'
                },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 50,
                dataLabels: {
                    enabled: true
                },
                showInLegend: true
            }
        },
                 series: [{
                       data:series
    }]
           };
            var chart7 = new Highcharts.Chart(options);
        }


/////////////////////////////////////////////////////////////////////////////////////////////////

   function createDetalle(datos){

            var header = Object.keys(datos[0]);
            var table = '<table class="table table-striped table-bordered table-hover responsive table-condensed nowrap" id="table"><thead>';
            var arrayExcl = ['idTicket','idS','Porte','Estado','idproceso','Fecha'];

            table+="</thead><tr>";
            for(i=0;i<header.length;i++){

                if(filterColumnasPemitidas(header[i],arrayExcl)){
                    table += "<th style='vertical-align:middle;' class='text-center'>" + header[i] + "</th>";
                }

            }
            table +="<th style='vertical-align:middle;' class='text-center'>Aprobar</th>";
            for(i=0;i<datos.length;i++){

              table +="<tr>";
                 for(j=0;j<header.length;j++){
                     if(filterColumnasPemitidas(header[j],arrayExcl)){
                        table += "<td style='vertical-align:middle;' class='text-center'>" +datos[i][header[j]] + "</td>";
                     }
                 }
                var ticket = datos[i]["idTicket"];
                var url = "{{path('ticketDetalleClienteNew',{'idproyectos':idproyectos,'idticket':'nuevo','idmodule':idmodulep})}}";
                url=url.replace("nuevo",ticket);
                table +="<td><a class='btn btn-primary' href='" +url+ "'><i class='fa fa-check' aria-hidden='true'></i></a></td>";
                table +="</tr>";
            }

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

    }

    //EXCLUIR COLUMNAS NO NECESARIAS
   function filterColumnasPemitidas(valor,arrayExcluir){
       if(arrayExcluir.includes(valor)){
           return false;
       }else{
           return true;
       }
   }
    //ADD CAMPOS NECESARIOS PARA MOSTRAR DETALLE
    function addClassPemitidas(valor,value,arrayAdd){
       var classAdd = "";
        if(arrayAdd.includes(valor)){
            classAdd = value > 0 ? "openDetalle" : "";
            return classAdd;
        }else{
            return classAdd;
        }
    }

    </script>
{% endblock %}
{% block body %}
    <!-- <div class="page-header text-center text-muted">
   <h1 class="eri-font"></h1>
   </div> -->

    <div class="container">
        <div class="row">
            <div class="col-lg-2 eri-font"  style="margin-top: 1%">
                <label>{{'monitor.etiqueta.fechaI' | trans}}: </label>
                <input type="text" class="form-control" id="Filtros_fechaIni" value="{{ dateStart }}">
            </div>
            <div class="col-lg-2 eri-font"  style="margin-top: 1%">
                <label>{{'monitor.etiqueta.fechaF' | trans}}: </label>
                <input type="text" class="form-control" id="Filtros_fechaFin" value="{{ dateEnd }}">
            </div>
            <br>

            <div class="col-lg-3" id="parametros" style="margin-top: 1%">
                <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>

            <img id="logo" class="pull-right" src="{{ asset('images/LogoTIGO.png') }}"  width="100" height="62" >

        </div>

        <div class="row">
            <div class="col-lg-12 text-center eri-font"  style="margin-top: 1%">
                <h1>{{'REPORTES PENDIENTES POR REVISIÓN' | trans | upper}}</h1>
            </div>

        </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="torta" style="margin-top: 1%">


        </div>
        <div class="col-lg-12 top-uno" id="primer_reporte">

        </div>
        <div id="pager" class="pager" style="display: none">
            <form>
                <img src="{{asset('tablesorter-master/addons/pager/icons/first.png')}}" class="first"/>
                <img src="{{asset('tablesorter-master/addons/pager/icons/prev.png')}}" class="prev"/>
                <span class="pagedisplay"></span>
                <img src="{{asset('tablesorter-master/addons/pager/icons/next.png')}}" class="next"/>
                <img src="{{asset('tablesorter-master/addons/pager/icons/last.png')}}" class="last"/>
                <select class="pagesize" title="Select page size">
                    <option selected="selected" value="1000">1000</option>
                    <option  value="500">500</option>
                    <option  value="100">100</option>

                </select>
            </form>
        </div>

    </div>


    <!--DETALLE DE HIJOS PENDIENTE POR APROBACION-->
    <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"></h2>
                </div>
                <div class="col-md-12">
                    <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><br>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#" onclick="$('#myModalDetalle').tableExport({type: 'excel', escape: 'false'});"> <img src={{ asset("images/xls.png")}} width="24px"> XLS</a></li>
                            </ul>
                            <br><br>
                        </div>
                    </div>

                    <div class="col-md-12" id='detalleT'  style='height:315px; overflow: scroll;'></div>
                </div>
                <div class="modal-footer">

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

                </div>
            </div>
        </div>

    </div>


    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" id="close" data-dismiss="modal">&times;</button>
                    <div id="msj">
                    </div>

                </div>

                <div id="formulario" >
                    <div class="modal-body">


                        <div id="v"></div>
                        <div>
                            <div class="form-group">
                                <label for="comment">Comment:</label>
                                <textarea class="form-control required" rows="5" id="comment"></textarea>
                            </div>



                        </div>
                        <div class="modal-footer">
                            <button type="button" id="save" class="btn btn-primary" data-dismiss="modal">Save</button>
                            <button type="button" id="cancel" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>






    <!-- Modal -->
    <div class="modal fade" id="myModal2" role="dialog" >
        <div class="modal-dialog  modal-sm">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" id="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" style="color: white;">Alerta</h4>
                </div>

                <div class="modal-body">
                    <p>Ticket Modificado</p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}