{% extends '::base.html.twig' %}
{% block dashboard %}
   <style>
        .double-scroll {
            width: 100%;
            margin-bottom: 40px;
        }

        /* pager wrapper, div */
        .pager {
            padding-left: 0;
            margin: 0;
            text-align: left;
            list-style: none;
        }

        /* pager wrapper, in thead/tfoot */
        td.pager {
            background-color: #e6eeee;
        }

        /* pager navigation arrows */
        .pager img {
            vertical-align: middle;
            margin-right: 2px;
        }

        /* pager output text */
        .pager .pagedisplay {
            font-size: 14px;
            font-weight: bold;
            padding: 0 5px 0 5px;
            width: 50px;
            text-align: center;
        }

        /*** loading ajax indeterminate progress indicator ***/
        #tablesorterPagerLoading {
            background: rgba(255, 255, 255, 0.8) url(icons/loading.gif) center center no-repeat;
            position: absolute;
            z-index: 1000;
        }

        /*** css used when "updateArrows" option is true ***/
        /* the pager itself gets a disabled class when the number of rows is less than the size */
        .pager.disabled {
            display: none;
        }

        /* hide or fade out pager arrows when the first or last row is visible */
        .pager img.disabled {
            /* visibility: hidden */
            opacity: 0.5;
            filter: alpha(opacity=50);
        }

        .tablesorter-pager select {
            margin: 0;
            padding: 0;
            width: 50px;
        }

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

        body {
             /*margin-top: 80px;*/
        }

        h1 {
            font-size: 18px;
        }

    
        /*color de cabecera de tabla*/
        .tablesorter-header-inner, table.tablesorter thead tr th, .tablesorter-filter {
            color: #fff;
            background-color: #307aba;
            border-color: #dedede;
            font-weight: normal;
        }

        table.tablesorter thead tr th {

            height: 40px;
        }

        .tablesorter-blue .headerSortUp, .tablesorter-blue .tablesorter-headerSortUp, .tablesorter-blue .tablesorter-headerAsc {
            background-color: #307aba;
        }

        .tablesorter-blue .headerSortDown, .tablesorter-blue .tablesorter-headerSortDown, .tablesorter-blue .tablesorter-headerDesc {
            background-color: #307aba;
        }

        .tablesorter-blue .tablesorter-filter-row td {
            background: #307aba;
        }

        input[type="search"] {
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }
        .clsDatePicker {
            z-index: 100000;
        }
        table th{
            {#text-transform: uppercase;#}
            font-weight: bold;
            font-size: 12px;
        }
        
        table td{
            {#text-transform: uppercase;#}
            font-weight: normal;
            font-size: 12px;
        }        

        .commentList {
            padding:0;
            list-style:none;
            max-height:100px;
            overflow:auto;
        }
        .commentList li {
            margin:0;
            margin-top:10px;
        }
        .commentList li > div {
            display:table-cell;
        }       
        .commentText p {
            margin:0;
        }
        .sub-text {
            color:#aaa;
            font-family:verdana;
            font-size:11px;
        }
        /********************************************************************/
        .panel.with-nav-tabs .panel-heading{
            padding: 5px 5px 0 5px;
        }
        .panel.with-nav-tabs .nav-tabs{
            border-bottom: none;
        }
        .panel.with-nav-tabs .nav-justified{
            margin-bottom: -1px;
        }
        /*** PANEL PRIMARY ***/
        .with-nav-tabs.panel-primary .nav-tabs > li > a,
        .with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
            color: #fff;
        }
        .with-nav-tabs.panel-primary .nav-tabs > .open > a,
        .with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
        .with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
            color: #fff;
            background-color: #3071a9;
            border-color: transparent;
        }
        .with-nav-tabs.panel-primary .nav-tabs > li.active > a,
        .with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
            color: #428bca;
            background-color: #fff;
            border-color: #428bca;
            border-bottom-color: transparent;
        }
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
            background-color: #428bca;
            border-color: #3071a9;
        }
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
            color: #fff;
        }
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
            background-color: #3071a9;
        }
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
            background-color: #4a9fe9;
        }
        /********************************************************************/
        input {
            -webkit-appearance: textfield;
            background-color: white;
            color: #1b1b1b;
            font-weight: lighter;
            -webkit-rtl-ordering: logical;
            cursor: text;
            padding: 1px;
            border-width: 1px;
            border-style: solid;
            border-color: #1B1B1B !important;
            border-image: initial;
        }
        .dataTables_length select {
            width: 60px;
        }
        .dataTables_length label {
            font-weight: normal;
        }
        table.dataTable thead th{
            border-bottom: 1px solid #3071a9 !important;
        }
        table.dataTable tfoot th{
            border-top: 1px solid #3071a9 !important;
        }
        .dataTables_scroll{
            border: 1px solid #3071a9 !important;
        }
        div.dt-buttons {
            position: relative !important;
            float: right !important;
            margin-right: -5px !important;
        }
        .header_dt{
            color: #fff;
            background-color: #428bca;
            border-color: #3071a9 !important;
        }
        .highcharts-graph {
            filter: url(#glow);
        }

        .list-group-item {
            position: relative;
            display: block;
            padding: 2px 5px !important;
            margin-bottom: -1px;
            background-color: #fff;
            border: 1px solid #ddd;
        }
        .Resizer {
            padding: 0;
            margin: 0;
            top: 0;
            left: 0;
        }

        .contentWindow{
            position: absolute;
            background-color: #B4E0DE;
        }

        .resizer{
            position: absolute;
            z-index: 100;
            background-color: #4E6160;
        }

        .verticalResizer{
            cursor: ns-resize;
        }

        .horizontalResizer{
            cursor: ew-resize;
        }
        .panel .panel-primary {
            min-height: 100px;
            max-height: 300px;
            height: 300px;
            overflow-y: scroll;
            overflow-x: scroll;
        }
        .nav-link.active {
            font-weight: bold;
        }

        .badge {
            font-size: 85%;
        }

        .gradiente {
          height: 100px;
          background-color: #428BCA; /* For browsers that do not support gradients */
          background-image: linear-gradient(0deg, #428BCA, #031A48);
        }
        .text-center {
            text-align: center;
        }

        .text-primary {
            color: #428bca;
        }

        .table1{
            width: 100%;
            text-align: center;
        }

        .table2{
            width: 100%;
            text-align: center;
        }
        .color{
            background: bisque;
        }

    </style>
    <script src="{{ asset('js/jquery.form.js') }}"></script>
    <script src="{{ asset('js/jquery.isloading.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jquery.doubleScroll.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/tableExport.js') }}"></script>
    <script src="{{ asset('js/jquery.base64.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/multiselect.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/jquery.confirm.js') }}"></script> 
    <script type="text/javascript" src="{{ asset('js/jquery.inputmask.js') }}"></script> 
    <script type="text/javascript" src="{{ asset('js/jquery.inputmask.numeric.extensions.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/jquery.confirm.js') }}"></script>   
    <script type="text/javascript" src="{{ asset('js/jquery.table2excel.js') }}"></script> 
    <script>
        $(function(){   
            $('body').on('click', function (e) {
                //did not click a popover toggle or popover
                if ($(e.target).data('toggle') !== 'popover'
                    && $(e.target).parents('.popover.in').length === 0) { 
                    $('[data-toggle="popover"]').popover('hide');
                }
            });
            $('[data-toggle="popover"]').live( "click", function() { 
                $(this).popover({
                    html: true,
                    trigger: 'manual',
                    placement: 'left',
                    content: function () {
                        var $buttons = $('#popover').html();
                        return $buttons;
                    }
                }).popover('toggle');  
            });
            $('[data-toggle="popover"]').popover();             
            $('.double-scroll').doubleScroll();
            var pagerOptions2 = {
                container: $(".pager"),
                output: 'Rows  : {endRow}',
                fixedHeight: false,
                removeRows: true,
                cssGoto: '.gotoPage'
            };                   
            $(".table1").tablesorter({
                theme: 'blue',
                widgets: ["zebra", "filter"],
                widgetOptions: {
                    filter_cssFilter: '',
                    filter_childRows: false,
                    filter_hideFilters: false,
                    filter_ignoreCase: true,
                    filter_reset: '.reset',
                    filter_saveFilters: true
                }
            }).tablesorterPager(pagerOptions2);
            $('.pager').show();    

            $('.inactivar').confirm({
                title:"Inactive Confirmation",
                text:"Are you sure to inactivate?",
                confirm: function(button) {
                    data = {};
                    var idsitio = $("#idsitio").val();
                    data['idsitio'] = idsitio;
                    $.isLoading({text: "Inactivating..."});
                       $.ajax({
                        type: "POST",
                        url: "{{path('actSitios_inactivarSitio',{'idproyectos':idproyectos,'idmodule':idmodule})}}",
                        data: data,
                        success: function(data){
                            if (data=='bien'){
                                swal("Information!", "Inactive successfully", "success");
                                location.reload();
                            }else{
                                swal("Error!", "Error", "error");
                            }
                        }
                    });
                    $("#idsitio").val('');
                    $.isLoading('hide');  
                },
                cancel: function(button) {
                    return false;
                },
                confirmButton: "Yes, I'm sure",
                cancelButton: "No"
            });  

            $('.activar').confirm({
                title:"Active Confirmation",
                text:"Are you sure to activate?",
                confirm: function(button) {
                    data = {};
                    var idsitio = $("#idsitio").val();
                    data['idsitio'] = idsitio;
                    $.isLoading({text: "Activating..."});
                       $.ajax({
                        type: "POST",
                        url: "{{path('actSitios_activarSitio',{'idproyectos':idproyectos,'idmodule':idmodule})}}",
                        data: data,
                        success: function(data){
                            if (data=='bien'){
                                swal("Information!", "Active successfully", "success");
                                location.reload();
                            }else{
                                swal("Error!", "Error", "error");
                            }
                        }
                    });
                    $("#idsitio").val('');
                    $.isLoading('hide');  
                },
                cancel: function(button) {
                    return false;
                },
                confirmButton: "Yes, I'm sure",
                cancelButton: "No"
            });    

            $('.eliminar').confirm({
                title:"Delete Confirmation",
                text:"Are you sure to delete?",
                confirm: function(button) {
                    data = {};
                    var idsitio = $("#idsitio").val();
                    data['idsitio'] = idsitio;
                    $.isLoading({text: "Deleting..."});
                       $.ajax({
                        type: "POST",
                        url: "{{path('actSitios_deleteSitio',{'idproyectos':idproyectos,'idmodule':idmodule})}}",
                        data: data,
                        success: function(data){
                            if (data=='bien'){
                                swal("Information!", "Delete successfully", "success");
                                location.reload();
                            }else{
                                swal("Error!", "Error", "error");
                            }
                        }
                    });
                    $("#idsitio").val('');
                    $.isLoading('hide');  
                },
                cancel: function(button) {
                    return false;
                },
                confirmButton: "Yes, I'm sure",
                cancelButton: "No"
            });       
            $("#exportToExcel").click(function(e){ 
                $("#table_detalle").find("tr td a.comment").replaceWith(function(){ 
                    return $.text([this]);
                });               
                $("#table_detalle").table2excel({
                    exclude: ".noExl",
                    name: "Sheet1",
                    filename: "detail.xls",
                    fileext: ".xls",
                    exclude_img: true,
                    exclude_links: true,
                    exclude_inputs: true,
                    preserveColors: true
                });
            });
        });
        //DETALLE DEL SITIO
        function detail(idsitio,plan){
            $("#tbody_detalle").empty();
            $("#thead_detalle").empty();
            $("#detailSiteId").empty();
            $(".muestra_detalle").empty();
            var data = { idsitio : idsitio, plan: plan }; 
            $.isLoading({text: "Loading..."});
            $.getJSON("{{path('actSitios_detalleSitio',{'idproyectos':idproyectos,'idmodule':idmodule})}}", data, function (data){
                if (data.detail.length>0){        
                    var siteId = data.detail[0].codigo;
                    $("#detailSiteId").text(siteId);
                    let fila;
                    var diasHeader = data.max_dias[0]['dias'];
                    var dias_jornada = data.dias_jornada;
                    var fila_encabezado ='<tr>'+
                            '<th>ITEM</th>'+
                            '<th>AREA</th>'+
                            '<th>RUBRO</th>'+
                            '<th>ACTIVIDAD</th>'+
                            '<th>DÍAS POR JORNADA</th>';
                    for (var i = 1; i <= diasHeader; i++) {
                        fila_encabezado+='<th>'+i+'</th>';  
                    }
                    fila_encabezado+='</tr>'
                    $("#thead_detalle").append(fila_encabezado); 
                    let x = 0; 
                    var jornada = 1;                                
                    let row = 1;
                    var array = new Array;
                    var a = 0;
                    var pintados = new Array;
                    var mover = 0;
                    var escalera = 0;
                    //console.log(data.dias_jornada);
                    $.each(data.detail, function(key,value) {
                        var rowspan = dias_jornada.find(el => el.jornada == value['ITEM']);
                        if (jornada!=value['ITEM']){
                            x = 0;  
                            jornada = value['ITEM'];                                                 
                        }
                        posiciones = value['ITEM']>1? data.dias_jornada.find(el => el.jornada == parseInt(value['ITEM']))?.total_dias : 1;
                        posicionesAnterior = value['ITEM']>1? data.dias_jornada.find(el => el.jornada == parseInt(value['ITEM']-1))?.total_dias : 1;
                        if (x==0){
                            fila ='<tr>'+
                                '<td rowspan="'+rowspan.dias+'" style="vertical-align: middle;">'+value['ITEM']+'</td>'+
                                '<td>'+value['AREA']+'</td>'+
                                '<td>'+value['RUBRO']+'</td>'+
                                '<td>'+value['ACTIVIDAD']+'</td>'+
                                '<td rowspan="'+rowspan.dias+'" style="vertical-align: middle;">'+value['JORNADAS']+'</td>';
                        }else{
                            fila ='<tr>'+
                                '<td>'+value['AREA']+'</td>'+
                                '<td>'+value['RUBRO']+'</td>'+
                                '<td>'+value['ACTIVIDAD']+'</td>';
                        } 
                        for (var i = 1; i <= diasHeader; i++) {
                            if (value['ITEM']>1){
                                var buscarPintados = pintados.find(el => el.id == value['id']);
                                if (buscarPintados==undefined){ 
                                    var p = parseInt(value['posicion']);
                                    pintados.push({ 'id': value['id'], 'd': value['dia'], 'p': p, 'j': value['ITEM'] }); 
                                }                             
                            }else{
                                var p = parseInt(value['posicion']);
                                pintados.push({ 'id': value['id'], 'd': value['dia'], 'p': p, 'j': value['ITEM'] });
                            }
                            if (i==p){                         
                                fila+='<td style="background: bisque;"></td>';
                            }else{
                                fila+='<td></td>';  
                            }
                            a++;
                        }                
                        fila+= '</tr>';                
                        $("#tbody_detalle").append(fila);
                        x++; 
                        row++;                                                 
                    });  
                    $.isLoading('hide'); 
                }else{
                    $.isLoading('hide'); 
                }
            });
            $("#detalle").modal();          
        }
        //DETALLE EJECUTADO
        function detailEjecutado(idsitio){
            $("#tbody_detalle").empty();
            $("#thead_detalle").empty();
            $("#detailSiteId").empty();
            $(".muestra_detalle").empty();
            var data = { idsitio : idsitio }; 
            $.isLoading({text: "Loading..."});
            $.getJSON("{{path('actSitios_detalleSitioExecuted',{'idproyectos':idproyectos,'idmodule':idmodule})}}", data, function (data){
                if (data.detail.length>0){    
                    var siteId = data.detail[0].codigo;
                    $("#detailSiteId").text(siteId);
                    let fila;
                    var diasHeader = '';
                    var dias_jornada = data.dias_jornada;
                    var detalle = data.detalle;
                    //console.log('detalle',detalle);
                    var fila_encabezado ='<tr>'+
                            '<th>ITEM</th>'+
                            '<th>AREA</th>'+
                            '<th>RUBRO</th>'+
                            '<th>ACTIVIDAD</th>'+
                            '<th>DÍAS POR JORNADA</th>';
                    $.each(data.max_dias, function(key,value) {
                        fila_encabezado+='<th>'+value.dias+'</th>';  
                    });
                    fila_encabezado+='<th style="width: 75px;">  TOTAL  </th>';
                    fila_encabezado+='</tr>'
                    $("#thead_detalle").append(fila_encabezado); 
                    let x = 0; 
                    var jornada = 1;                                
                    let row = 1;
                    var array = new Array;
                    var a = 0;
                    var pintados = new Array;
                    var pint = new Array;
                    var mover = 0;
                    var escalera = 0;
                    $.each(data.detail, function(key,value) {
                        var rowspan = dias_jornada.find(el => el.jornada == value['ITEM']);
                        if (jornada!=value['ITEM']){
                            x = 0;  
                            jornada = value['ITEM'];                                                     
                        }
                        posiciones = value['ITEM']>1? data.dias_jornada.find(el => el.jornada == parseInt(value['ITEM']))?.total_dias : 1;
                        posicionesAnterior = value['ITEM']>1? data.dias_jornada.find(el => el.jornada == parseInt(value['ITEM']-1))?.total_dias : 1;
                        if (x==0){
                            fila ='<tr>'+
                                '<td rowspan="'+rowspan.dias+'" style="vertical-align: middle;">'+value['ITEM']+'</td>'+
                                '<td>'+value['AREA']+'</td>'+
                                '<td>'+value['RUBRO']+'</td>'+
                                '<td>'+value['ACTIVIDAD']+'</td>'+
                                '<td rowspan="'+rowspan.dias+'" style="vertical-align: middle;">'+value['JORNADAS']+'</td>';
                        }else{
                            fila ='<tr>'+
                                '<td>'+value['AREA']+'</td>'+
                                '<td>'+value['RUBRO']+'</td>'+
                                '<td>'+value['ACTIVIDAD']+'</td>';
                        } 
                        var z = 1;
                        $.each(data.max_dias, function(i,det) {
                            if (value['ITEM']>1){
                                var buscarPintados = pintados.find(el => el.AREA_ACTIVIDAD == value['AREA_ACTIVIDAD']);                                
                                if (buscarPintados==undefined){ 
                                    var anterior = pintados[pintados.length - 1];
                                    var p = parseInt(value['posicion']);
                                    pintados.push({ 'AREA_ACTIVIDAD': value['AREA_ACTIVIDAD'], 'd': value['dia'], 'p': p, 'j': value['ITEM'] }); 
                                }                             
                            }else{
                                var p = parseInt(value['posicion']);
                                pintados.push({ 'AREA_ACTIVIDAD': value['AREA_ACTIVIDAD'], 'd': value['dia'], 'p': p, 'j': value['ITEM'] });
                            }
                            var buscarFechas = detalle.find(el => el.AREA_ACTIVIDAD == value['AREA_ACTIVIDAD'] && el.fecha == det.dias);
                            if (buscarFechas){ 
                                if (buscarFechas.rep_avance=='0.00'){
                                    var com = buscarFechas.rep_Comentarios? buscarFechas.rep_Comentarios : '';
                                    pint.push({ 'AREA_ACTIVIDAD': value['AREA_ACTIVIDAD'], 'color': 'red'});
                                    fila+='<td style="background: red;"><a class="comment" style="color: #fff;font-weight: bold;" href="javascript://" data-toggle="popover" data-title="<b>Comment</b>" data-container="body" data-placement="left" data-html="true" data-trigger="focus" data-content="<ol><li>'+com+'</li></ol>" data-original-title="" title="">'+buscarFechas.rep_avance+' % </a></td>';
                                }else{ 
                                    if (buscarFechas.rep_avance==100){
                                        var buscarColor = pint.find(el => el.AREA_ACTIVIDAD == value['AREA_ACTIVIDAD'] && el.color == 'red' );
                                        if (buscarColor){
                                            fila+='<td style="background: red;"><a style="color: #fff;font-weight: bold;" href="'+buscarFechas.url_video+'" target="_blank">'+buscarFechas.rep_avance+' % <a></td>';
                                        }else{
                                            pint.push({ 'AREA_ACTIVIDAD': value['AREA_ACTIVIDAD'], 'color': 'white'});
                                            fila+='<td ><a style="font-weight: bold;" href="'+buscarFechas.url_video+'" target="_blank">'+buscarFechas.rep_avance+' % <a></td>';
                                        }
                                    }else{
                                        pint.push({ 'AREA_ACTIVIDAD': value['AREA_ACTIVIDAD'], 'color': 'yellow'});
                                        //fila+='<td style="background: yellow;"><a style="font-weight: bold;" href="'+buscarFechas.url_video+'" target="_blank">'+buscarFechas.rep_avance+' % <a></td>';
                                        var com = buscarFechas.rep_Comentarios? buscarFechas.rep_Comentarios : '';
                                        fila+='<td style="background: yellow;"><a class="comment" style="font-weight: bold;" href="javascript://" data-toggle="popover" data-title="<b>Detail</b>" data-container="body" data-placement="left" data-html="true" data-trigger="focus" data-content="<ol><li>Comment: '+com+'</li><li><a href='+buscarFechas.url_video+' target=_blank>View Video</a></li></ol>" data-original-title="" title="">'+buscarFechas.rep_avance+' % </a></td>';

                                    } 
                                }
                            }else{
                                /*var buscarFechas = detalle.find(el => el.id == value['id'] && el.rep_estado=='No Iniciada');
                                var busPin = pintados.find(el => el.id == value['id'] && el.p == z );
                                if (busPin && buscarFechas){
                                    var com = buscarFechas.rep_Comentarios? buscarFechas.rep_Comentarios : '';
                                    fila+='<td style="background: red;"><a style="color: #fff;font-weight: bold;" href="javascript://" data-toggle="popover" data-title="<b>Comment</b>" data-container="body" data-placement="left" data-html="true" data-trigger="focus" data-content="<ol><li>'+com+'</li></ol>" data-original-title="" title="">'+buscarFechas.rep_avance+' % </a></td>';
                                }else{*/
                                    fila+='<td></td>';  
                                //}
                            } 
                            z++;
                            a++;                                
                        });
                        //TOTAL
                        if (value['avance']==100){
                            var avance = value['avance']==undefined? '' : value['avance'];
                            fila+='<td style="font-weight: bold;">'+avance+' %</td>'; 
                        }else if(value['avance']==undefined){
                            fila+='<td></td>'; 
                        }else if(value['avance']=='0.00'){
                            var avance = value['avance']==undefined? '' : value['avance'];                            
                            fila+='<td style="background: red;color: #fff;font-weight: bold;">'+avance+' %</td>';  
                        }else{
                            var avance = value['avance']==undefined? '' : value['avance'];
                            fila+='<td style="background: yellow;font-weight: bold;">'+avance+' %</td>'; 
                        }                       
                        fila+= '</tr>';                
                        $("#tbody_detalle").append(fila);
                        x++; 
                        row++;                                                 
                    });                    
                    $.isLoading('hide'); 
                }else{
                    $.isLoading('hide'); 
                }
            });
            $("#detalle").modal();          
        }
        function createTableDTDetail(data, tableRender, dtRender){
            var strHeader = "";
            var strFooter="";
            var columns = [];
            var strType = "";
            var strTable = '<table id="' + tableRender + '" class="display cell-border compact stripe" width="100%">' +
                    '<thead><tr class="header_dt">';
            $('#' + dtRender).empty();

            for (var i=0; i<data.length; i++){
                var title = data[i];
                var visible = title.startsWith('_') ? false : true;                
                strHeader += '<th class="text-center">' + title + '</th>';                
                columns.push({data: data[i], title: title, visible:visible});
            }
            strTable += strHeader + '</tr></thead><tbody id="tbody_' + tableRender + '"></tbody>' + strFooter + '</table>';
            $('#' + dtRender).empty();
            $('#' + dtRender).html(strTable);
            $('#' + tableRender + ' thead tr').clone(true).appendTo( '#' + tableRender + ' thead' );
            $('#' + tableRender + ' thead tr:eq(1) th').each( function (i) {
                var title = $(this).text();
                $(this).html( '<input type="text" style="width: 100%; margin: 0px; padding: 0px;"/>' );
                $( 'input', this ).on( 'keyup change', function () {
                    if ( $.fn.DataTable.isDataTable( '#' + tableRender ) ) {
                        var table = $('#' + tableRender).DataTable();
                        if ( table.column(i).search() !== this.value ) {
                            table
                                    .column(i)
                                    .search( this.value )
                                    .draw();
                        }
                    }
                } );
            } );

            return columns;
        }

        function buildDatatablePrin(render, columnas, data,suffix_export,orderArray){
            var a=[];b=[];
            var Defs = [];
            var ini = (columnas.length) -5;
            var kpi = '';
            for (var i=0; i<=(columnas.length - 1); i++){
                a.push(i);
            }
            Defs.push({ targets: a, className: 'dt-body-center' });
            for (var i=0; i<=(columnas.length - 1); i++){
                if (columnas[i].visible){
                    b.push(i);
                }
            }           
            table = $('#'+render).DataTable( {
                dom: '<"row" <"col-md-12 text-right"B>> <"row" <"col-md-6 "l> <"col-md-6"f>>rtip',
                scrollY: '60vh',
                scrollX: true,
                scrollCollapse: true,
                orderCellsTop: true,
                data:data,
                "deferRender": false,
                "processing": true,
                "language": {
                    "processing": "<div class='table-loading' style='z-index: 99999'><img src='{{ asset('images/spiral.gif') }}' /></div>"
                },
                "order": [[ 0, "asc" ]],
                "ordering": true,
                columns: columnas,
                columnDefs: Defs,
                lengthMenu: [[25, 50, 100, 250, 500], [25, 50, 100, 250, 500]],
                buttons: [
                    {
                        extend:'excel',
                        text: 'Table Excel ',
                        exportOptions: {
                            columns: b,
                            orthogonal: 'export'
                        },
                        title: 'Capacity'
                    }
                ],
                drawCallback: function() {
                    $('[data-toggle="popover"]').popover();
                } 
            } );
        } 

        function inactivar(idsitio){
            $("#idsitio").val(idsitio);
            $("#inactivar").trigger('click');            
        }

        function activar(idsitio){
            $("#idsitio").val(idsitio);
            $("#activar").trigger('click');            
        }

        function eliminar(idsitio){
            $("#idsitio").val(idsitio);
            $("#eliminar").trigger('click');            
        }
    </script>
    <div class ="container-fluid" id="info">
        <div class="row">
            <div class="col-md-12 text-center">
                <h1 class="text-center text-primary">
                    <strong>IBS PROJECT PLANNING</strong>
                </h1>
            </div>
        </div>
        {% if is_granted('ROLE_ACTIONS_IBS') %}
            <div class="row">
                <div class="col-md-10 text-right">
                </div>
                <div class="col-md-2 text-right">
                    <div class="form-group">
                        <label for="Add">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <a class="btn btn-primary form-control" href="{{path('actSitios_crearActividadesSitio',{ 'idproyectos':idproyectos,'idmodule':idmodule})}}">Add</a>
                    </div>
                </div>
            </div>
        {% endif %}
        <div class="pager pager_time" style="margin: 0px 0px 10px 12px;">
            <a  class="reset"><i class="fa fa-eraser" aria-hidden="true"></i></a>
            <span class="pagedisplay"></span>
        </div>        
        <input type="hidden" name="idsitio" id="idsitio">
        <input type="hidden" name="asp_user" id="asp_user" value="{{ data_user.asp_user }}">
        <div class="row">
            <div id="reporte" class="col-lg-12">
                <table class="tablesorter table1 text-center">
                    <thead>
                        <tr>
                            <th>PROJECT</th>
                            <th>SITE ID</th>
                            <th>SITE NAME</th>
                            <th>ASP</th>
                            <th>CREW</th>
                            <th>DATE</th>
                            <th>INICIAL PLAN</th>
                            <th>EXECUTED PLAN</th>
                            <th>SITE STATUS</th>
                            <th>PLAN STATUS</th>
                            <th>ACTIONS</th>
                        </tr>
                    </thead>
                    <tbody>
                        {%for site in sites%}
                            <tr>
                                <td>{{site.proyecto}}</td>
                                <td>{{site.codigo}}</td>
                                <td>{{site.name}}</td>
                                <td>{{site.asp}}</td>
                                <td>{{site.crew}}</td>
                                <td>{{site.fechaInicio}}</td>
                                <td>
                                   <a href="#" onclick=detail({{site.idsitio}},1) style="cursor:pointer">{{site.inicialPlan}}</a>
                                </td>
                                <td>
                                    {% if (site.status_ejecuted=='NOT STARTED')%}
                                        {{site.currentPlan}}
                                    {%else%}
                                        <a href="#" onclick=detailEjecutado({{site.idsitio}},0) style="cursor:pointer">{{site.currentPlan}}</a>
                                    {%endif%}
                                </td>                                
                                <td>{{site.status}}</td>                                
                                <td>{{site.status_ejecuted}}</td>
                                <td>
                                    <div class="dropdown">
                                        <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            {{ 'inbox.accion' | trans }}
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
                                            <li><a href="#" onclick=detail({{site.idsitio}},0) style="cursor:pointer">Current Plan</a></li>
                                            {% if is_granted('ROLE_ACTIONS_IBS') %}
                                                {%if (site.isActive==0)%}
                                                    <li><a href="{{path('actSitios_editarSitio',{ 'idproyectos':idproyectos,'idmodule':idmodule,'idsitio': site.idsitio})}}">Edit</a></li>
                                                    <li><a href="#" onclick="inactivar({{site.idsitio}})" class="inactivar" >Inactivate</a></li>
                                                {%else%}
                                                    <li><a href="#" onclick="activar({{site.idsitio}})" class="activar">Active</a></li>
                                                {%endif%}
                                                <li><a href="#" onclick="eliminar({{site.idsitio}})" class="eliminar">Delete</a></li>
                                            {% endif %}
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        {%endfor%}
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div id="pager" class="pager tablesorter-pager" style="display: none;text-align: center">
                <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>
    </div>

    <!-- Modal Detalle -->
    <div class="modal fade" id="detalle" role="dialog">
        <div class="modal-dialog modal-lg">
          <!-- Modal content-->
            <div class="modal-content" style="width: 1200px;margin: 0px 0px 0px -140px;">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Detail Site</h4>
                </div>  
                <br> 
                <div class="text-center">
                    <h4 class="modal-title">Site ID: <span id="detailSiteId"></span></h4>
                </div>  
                <div class="text-right" style="margin: 0px 30px 0 0;">
                    <button class="btn dt-button" id="exportToExcel">Export Excel</button>
                </div>          
                <div class="modal-body">
                    <div class="row" style="margin-top:8px">
                        <div class="col-md-12">
                            <div id="datatable_detalle" class="col-sm-12">
                                <table id="table_detalle" class="tablesorter table2 text-center tablesorter-blue" width="100%">
                                    <thead id="thead_detalle"></thead>
                                    <tbody id="tbody_detalle"></tbody>
                                </table>
                            </div>
                        </div>                        
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>    
            </div> 
        </div>
    </div>
   
{% endblock %}
{% block javascripts %}
    <link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css')}}">
    <link rel="stylesheet" href="{{ asset('css/buttons.dataTables.min.css')}}">
    <link rel="stylesheet" href="{{ asset('datatables/css/select.bootstrap.min.css')}}">
    <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('js/jszip.min.js') }}"></script>
    <script src="{{ asset('js/pdfmake.min.js') }}"></script>
    <script src="{{ asset('js/vfs_fonts.js') }}"></script>
    <script src="{{ asset('js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('datatables/js/dataTables.select.min.js') }}"></script>
    <script src="{{ asset('datatables/moment.min.js') }}"></script>
    <script src="{{ asset('datatables/js/datetime-moment.js') }}"></script>
    <script src="{{ asset('js/grouped-categories.js') }}"></script>        
{% endblock %}