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

{% endblock %}


{% block dashboard %}
    <style>
        body{
            font-size: 12px !important;
            line-height: 1em !important;
        }
        .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;
        }
        /********************************************************************/

        .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);}
        }
        input {
            -webkit-appearance: textfield;
            background-color: white;
            -webkit-rtl-ordering: logical;
            cursor: text;
            padding: 0px;
            color: #1a1a1a;
            border-width: 1px;
            border-style: solid;
            border-color: black !important;
            border-image: initial;
        }
        .dataTables_length select {
            width: 60px;
        }
        .dataTables_length label {
            font-weight: normal;
        }
        div.dt-buttons {
            position: relative !important;
            float: right !important;
            margin-right: -5px !important;
        }
        .font-table{
            font-size: 10pt;
            font-weight: 400;
        }
        .header_dt{
            color: #fff;
            background-color: #428bca;
            border-color: #3071a9 !important;
        }

    </style>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script>
        var bolCheck=false;
        var bolRefreshDT = false;
        var table;
        var tableSup;
        var tableDetail;
        var cols_01 = [
            { "data": "id",
                render: function ( data, type, row ) {
                    if (type==='display'){
                        return '<a data-cod="' + row['id'] + '" data-dia="0" ' +
                                'data-site="' + row['site_name'] + '" ' +
                                'data-lstfechas="' + row['lista_fechas'] + '" ' +
                                '" href="javascript://" onClick="showDetail(this,1);">' + data + '</a>';
                    }
                    return data;
                }
            },
            { "data": "site_name",
                render: function ( data, type, row ) {
                    if (type==='display'){
                        return '<a data-cod="' + row['id'] + '" data-dia="0" ' +
                               'data-site="' + row['site_name'] + '" ' +
                                'data-lstfechas="' + row['lista_fechas'] + '" ' +
                               '" href="javascript://" onClick="showDetail(this,1);">' + data + '</a>';
                    }
                    return data;
                }
            },
            { "data": "region" },
            { "data": "site_manager" },
            { "data": "fecha" },
            { "data": "cdia_1", visible:false },
            { "data": "pdia_1"},
            { "data": "cdia_2", visible:false },
            { "data": "pdia_2"},
            { "data": "cdia_3", visible:false },
            { "data": "pdia_3"},
            { "data": "cdia_4", visible:false },
            { "data": "pdia_4"},
            { "data": "cdia_5", visible:false },
            { "data": "pdia_5"},
            { "data": "cdia_6", visible:false },
            { "data": "pdia_6"},
            { "data": "total_cdia",visible:false},
            { "data": "total_pdia",
                render: function ( data, type, row ) {
                    if (type==='display'){
                        return '<strong><a data-cod="' + row['id'] + '" data-dia="6" ' +
                                'data-site="' + row['site_name'] + '" ' +
                                'data-lstfechas="' + row['lista_fechas'] + '" ' +
                                '" href="javascript://" onClick="showDetail(this,1);">' + data + '</a></strong>';
                    }
                    return data;
                }
            },
            { "data": "lista_fechas",visible:false}
        ];
        var cols_02 = [
            { "data": "id" },
            { "data": "nombre" },
            { "data": "region" },
            { "data": "site_manager" },
            { "data": "fecha_inicio" },
            { "data": "porc_dia_1" },
            { "data": "porc_dia_2" },
            { "data": "porc_dia_3" },
            { "data": "porc_dia_4" },
            { "data": "porc_dia_5" },
            { "data": "porc_dia_6" },
            { "data": "total" },
        ];
        var cols_detail_01 = [
            { "data": "orden"},
            { "data": "cod_item",visible:false},
            { "data": "nombre_item" },
            { "data": "tipo_actividad" },
            { "data": "asignado" },
            { "data": "dia_1",
                render: function ( data, type, row ) {
                    if (type==='display'){
                        if (data == 'N/A'){
                            return '<span class="label label-default">' + data + '</span>';
                        }else if (data == 'SI'){
                            return '<span class="label label-success">' + data + '</span>';
                        }else if (data == 'NO'){
                            return '<span class="label label-danger">' + data + '</span>';
                        }else if (data == ''){
                            return '<span class="label label-info">--</span>';
                        }else if (data == 'NA'){
                            return '<span class="label label-danger">NO</span>';
                        }
                    }else if (data=='NA'){return 'NO';
                    }else if (data==''){return '--'}
                    return data;
                }
            },
            { "data": "dia_2",
                render: function ( data, type, row ) {
                    if (type==='display'){
                        if (data == 'N/A'){
                            return '<span class="label label-default">' + data + '</span>';
                        }else if (data == 'SI'){
                            return '<span class="label label-success">' + data + '</span>';
                        }else if (data == 'NO'){
                            return '<span class="label label-danger">' + data + '</span>';
                        }else if (data == ''){
                            return '<span class="label label-info">--</span>';
                        }else if (data == 'NA'){
                            return '<span class="label label-danger">NO</span>';
                        }
                    }else if (data=='NA'){return 'NO';
                    }else if (data==''){return '--'}
                    return data;
                }
            },
            { "data": "dia_3",
                render: function ( data, type, row ) {
                    if (type==='display'){
                        if (data == 'N/A'){
                            return '<span class="label label-default">' + data + '</span>';
                        }else if (data == 'SI'){
                            return '<span class="label label-success">' + data + '</span>';
                        }else if (data == 'NO'){
                            return '<span class="label label-danger">' + data + '</span>';
                        }else if (data == ''){
                            return '<span class="label label-info">--</span>';
                        }else if (data == 'NA'){
                            return '<span class="label label-danger">NO</span>';
                        }
                    }else if (data=='NA'){return 'NO';
                    }else if (data==''){return '--'}
                    return data;
                }
            },
            { "data": "dia_4",
                render: function ( data, type, row ) {
                    if (type==='display'){
                        if (data == 'N/A'){
                            return '<span class="label label-default">' + data + '</span>';
                        }else if (data == 'SI'){
                            return '<span class="label label-success">' + data + '</span>';
                        }else if (data == 'NO'){
                            return '<span class="label label-danger">' + data + '</span>';
                        }else if (data == ''){
                            return '<span class="label label-info">--</span>';
                        }else if (data == 'NA'){
                            return '<span class="label label-danger">NO</span>';
                        }
                    }else if (data=='NA'){return 'NO';
                    }else if (data==''){return '--'}
                    return data;
                }
            },
            { "data": "dia_5",
                render: function ( data, type, row ) {
                    if (type==='display'){
                        if (data == 'N/A'){
                            return '<span class="label label-default">' + data + '</span>';
                        }else if (data == 'SI'){
                            return '<span class="label label-success">' + data + '</span>';
                        }else if (data == 'NO'){
                            return '<span class="label label-danger">' + data + '</span>';
                        }else if (data == ''){
                            return '<span class="label label-info">--</span>';
                        }else if (data == 'NA'){
                            return '<span class="label label-danger">NO</span>';
                        }
                    }else if (data=='NA'){return 'NO';
                    }else if (data==''){return '--'}
                    return data;
                }
            },
            { "data": "dia_6",
                render: function ( data, type, row ) {
                    if (type==='display'){
                        if (data == 'N/A'){
                            return '<span class="label label-default">' + data + '</span>';
                        }else if (data == 'SI'){
                            return '<span class="label label-success">' + data + '</span>';
                        }else if (data == 'NO'){
                            return '<span class="label label-danger">' + data + '</span>';
                        }else if (data == ''){
                            return '<span class="label label-info">--</span>';
                        }else if (data == 'NA'){
                            return '<span class="label label-danger">NO</span>';
                        }
                    }else if (data=='NA'){return 'NO';
                    }else if (data==''){return '--'}
                    return data;
                }
            }
        ];


        function getReportData(render, config){
            var params = {
                'reportType': config.reportType,
                'reportCategory': config.reportCategory,
                'startDate': $('#txtStartDate').val(),
                'endDate': $('#txtEndDate').val(),
                'project': {{ idproyectos }}
            };
            if (config.reportType == 'TABLE'){
                createTable(config.reportCategory, render, config.dtRender);
                buildDatatable(render,config.columna,params);
            }
            $.isLoading("hide");
        }

        function createTable(tipoReporte, tableRender, dtRender){
            var strHeader = '';
            var strFooter = '';
            var strTable = '<table id="' + tableRender + '" class="display compact stripe" width="100%"><thead><tr class="header_dt">';
            $('#' + dtRender).empty();
            switch (tipoReporte){
                case 'SITE_MANAGER':
                    strHeader = '<th class="text-center">ID</th><th class="text-center">NOMBRE</th>' +
                            '<th class="text-center">REGION</th>' +
                            '<th class="text-center">SITE MANAGER</th><th class="text-center">FECHA INICIO SITIO</th>' +
                            '<th class="text-center">CANT. DIA 1</th><th class="text-center">% DIA 1</th>' +
                            '<th class="text-center">CANT. DIA 2</th><th class="text-center">% DIA 2</th>' +
                            '<th class="text-center">CANT. DIA 3</th><th class="text-center">% DIA 3</th>' +
                            '<th class="text-center">CANT. DIA 4</th><th class="text-center">% DIA 4</th>' +
                            '<th>CANT. DIA 5</th><th>% DIA 5</th><th>CANT. DIA 6</th><th>% DIA 6</th>' +
                            '<th class="text-center">CANT. TOTAL</th><th class="text-center">% TOTAL</th>' +
                            '<th class="text-center">LISTA FECHAS</th>';
                    break;
            }

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

        function createTableDetail(tipoReporte, tableRender, dtRender,lstFechas){
            var strHeader = '';
            var strFooter = '';
            var arrF = lstFechas.split(',');
            var n = arrF.length;
            var columns = [];
            var strTable = '<table id="' + tableRender + '" class="display compact stripe" width="100%"><thead><tr class="header_dt">';
            $('#' + dtRender).empty();
            switch (tipoReporte){
                case 'SITE_MANAGER':
                    strHeader = '<th class="text-center">#</th><th class="text-center">Cod</th>' +
                            '<th class="text-center">Actividad</th>' +
                            '<th class="text-center">Tipo Actividad</th><th class="text-center">Asignado</th>';
                    var strAux = "";
                    for (var i=0; i<6; i++){
                        strAux = "Dia " + (i+1);
                        if (i<n){
                            strAux += "<br><h6>(" + arrF[i] + ")</h6>"
                        }else{
                            strAux += "<br><h6>(pendiente)</h6>"
                        }
                        strHeader += '<th class="text-center">' + strAux + '</th>';
                    }
                    break;
                case 'SUPERVISOR_MANAGER':
                    strHeader = '<th class="text-center">#</th><th class="text-center">Cod</th>' +
                            '<th class="text-center">Actividad</th>' +
                            '<th class="text-center">Tipo Actividad</th><th class="text-center">Asignado</th>';
                    //columns.push({data: , title: t, visible:visible});
                    var strAux = "";
                    for (var i=0; i<n; i++){
                        strAux = "Dia " + (i+1);
                        strAux += "<br><h6>(" + arrF[i] + ")</h6>"
                        strHeader += '<th class="text-center">' + strAux + '</th>';
                    }
                    break;
            }

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

        function buildDatatable(render, columnas, params){
            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,
                "ajax": {
                    "url": "{{path('checksite_loadDataTable')}}",
                    "type": "POST",
                    data:  params
                },
                "deferRender": false,
                "processing": true,
                "language": {
                    // Replace the Processing... text with an AJAX-loader
                    "processing": "<div class='table-loading' style='z-index: 99999'><img src='{{ asset('images/spiral.gif') }}' /></div>"
                },
                "order": [[ 4, "desc" ]],
                columns: columnas,
                columnDefs: [
                    //{ targets: [1], className: 'dt-body-left dt-nowrap' },
                    { targets: [4], className: 'dt-body-center' },
                    { targets: [5,6,7,8,9,10,11,12,13,14,15,16,17,18], className: 'dt-body-center dt-nowrap' }],
                lengthMenu: [[10, 25, 50, 100, 250, 500], [10, 25, 50, 100, 250, 500]],
                buttons: [
                    {
                        extend:'excel',
                        text: 'Excel',
                        exportOptions: {
                            columns: [0,1,2,3,4,6,8,10,12,14,16,18]
                        },
                        title: params.reportCategory
                    }
                ]
            } );
        }

        function buildDatatableDetail(render, columnas, params, cod_tipo){
            var url = '';
            if (cod_tipo==1){
                url = '{{path('checksite_showDataTemplateBySite')}}';
            }else if (cod_tipo==2){
                url = '{{path('checksite_showDataTemplateSupBySite')}}';
            }
            tableDetail = $('#'+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,
                "ajax": {
                    "url": url,
                    "type": "POST",
                    data:  params
                },
                "deferRender": true,
                "processing": true,
                "language": {
                    // Replace the Processing... text with an AJAX-loader
                    "processing": "<div class='table-loading' style='z-index: 99999'><img src='{{ asset('images/spiral.gif') }}' /></div>"
                },
                columns: columnas,
                columnDefs: [
                    //{ targets: [1], className: 'dt-body-left dt-nowrap' },
                    { targets: [3,4], className: 'dt-body-center' },
                    { targets: [0,5,6,7,8,9,10], className: 'dt-body-center dt-nowrap' }],
                lengthMenu: [[100, 250, 500], [100, 250, 500]],
                buttons: [
                    {
                        extend:'excel',
                        text: 'Excel',
                        exportOptions: {
                            orthogonal: 'export',
                            columns: [0,2,3,4,5,6,7,8,9,10]
                        },
                        title: params.reportCategory + '_DETAIL'
                    }
                ]
            } );
        }

        function buildDatatableSupervision(render, columnas, data){
            var a=[];b=[];
            var Defs = [];
            for (var i=5; i<=(columnas.length - 1); i++){
                a.push(i);
            }
            Defs.push({ targets: [4], className: 'dt-body-center' });
            Defs.push({ targets: a, className: 'dt-body-center dt-nowrap' });
            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": {
                    // Replace the Processing... text with an AJAX-loader
                    "processing": "<div class='table-loading' style='z-index: 99999'><img src='{{ asset('images/spiral.gif') }}' /></div>"
                },
                "order": [[ 4, "desc" ]],
                columns: columnas,
                columnDefs: Defs,
                /*columnDefs: [
                    //{ targets: [1], className: 'dt-body-left dt-nowrap' },
                    { targets: [4], className: 'dt-body-center' },
                    { targets: [5,6,7,8,9,10,11,12,13,14,15,16,17,18], className: 'dt-body-center dt-nowrap' }],*/
                lengthMenu: [[10, 25, 50, 100, 250, 500], [10, 25, 50, 100, 250, 500]],
                buttons: [
                    {
                        extend:'excel',
                        text: 'Excel',
                        exportOptions: {
                            columns: b
                        },
                        title: 'checklist_supervisor'
                    }
                ]
            } );
        }

        function buildDatatableSupervisionDetail(render, columnas, data){
            var a=[];b=[];
            var Defs = [];
            for (var i=5; i<=(columnas.length - 1); i++){
                a.push(i);
            }
            Defs.push({ targets: [0], className: 'dt-body-center' });
            Defs.push({ targets: a, className: 'dt-body-center dt-nowrap' });
            for (var i=0; i<=(columnas.length - 1); i++){
                if (columnas[i].visible){
                    b.push(i);
                }
            }

            tableDetail = $('#'+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": {
                    // Replace the Processing... text with an AJAX-loader
                    "processing": "<div class='table-loading' style='z-index: 99999'><img src='{{ asset('images/spiral.gif') }}' /></div>"
                },
                "order": [[ 4, "desc" ]],
                columns: columnas,
                columnDefs: Defs,
                /*columnDefs: [
                 //{ targets: [1], className: 'dt-body-left dt-nowrap' },
                 { targets: [4], className: 'dt-body-center' },
                 { targets: [5,6,7,8,9,10,11,12,13,14,15,16,17,18], className: 'dt-body-center dt-nowrap' }],*/
                lengthMenu: [[100, 250, 500], [100, 250, 500]],
                buttons: [
                    {
                        extend:'excel',
                        text: 'Excel',
                        exportOptions: {
                            columns: b
                        },
                        title: 'checklist_supervisor_detail'
                    }
                ]
            } );
        }

        function generateModal(ruta, objParams, numerar, title, subtitle) {
            $('#myModal .tabla-datos').empty().isLoading({
                text: "Loading"
            });
            $('#myModal .punto-grafica').empty().hide();
            $('#myModal .modal_detalle_titulo').empty();

            if (title != null) {
                $('#myModal .modal_detalle_titulo').html(title);
            }
            else {
                $('#myModal .modal_detalle_titulo').html('{{'monitorii.detail' | trans }}');
            }

            if (subtitle != null) {
                $('#myModal .punto-grafica').html(subtitle).show();
            }

            $.getJSON(ruta, objParams, function (data) {
                if (data.length == 0) {
                    $('#myModal').modal('hide');
                    $('#myModal .tabla-datos').isLoading('hide');
                    return false;
                }
                var monitor = data;
                var header = Object.keys(data[0]);
                var table = '<table id="tableData" class="tabla-detalle table table-striped table-hover table-condensed table-responsive"><thead><tr class="bg-primary">';

                if (numerar == true) {
                    table += "<th class='text-center'>#</th>";
                }
                for (var j = 0; j < header.length; j++) {
                    table += "<th class='text-center'>" + header[j] + "</th>"
                }
                table += "</tr></thead>";

                for (var i = 0; i < monitor.length; i++) {
                    table += "<tr class='font-table'>";
                    if (numerar == true) {
                        table += "<td>" + (i + 1) + "</td>";
                    }
                    for (var j = 0; j < header.length; j++) {
                        // Se verifica si el valor a imprimir es null para evitar el toString de null como 'NULL'
                        table += "<td>" + (monitor[i][header[j]] == null ? '&nbsp;' : monitor[i][header[j]]) + "</td>";
                    }
                    table += "</tr>";
                }
                table += "</table>";
                $('#myModal .tabla-datos').isLoading('hide').html(table);
            });
            $('#myModal').modal('show');
        }

        function showDetail(obj,cod_tipo){
            var tipo = (cod_tipo==1) ? 'SITE_MANAGER' : 'SUPERVISOR_MANAGER';
            var title1 = tipo.replace('_',' ');
            $(".modal_detalle_titulo").html(title1);
            $("#titleReportDetail").html($(obj).data('cod') + ' - ' + $(obj).data('site'));
            var lst = $(obj).data('lstfechas');
            var arrF = lst.split(',');
            var n = arrF.length;
            var params = {
                'reportType': 'TABLE',
                'reportCategory': tipo,
                'startDate': $('#txtStartDate').val(),
                'endDate': $('#txtEndDate').val(),
                'project': {{ idproyectos }},
                'idSitio': $(obj).data('cod'),
                'dia': $(obj).data('dia'),
                'num_dias': n
            };
            if (cod_tipo==1){
                createTableDetail(params.reportCategory, 'table_detail_01', 'datatable_detail_01',lst);
                buildDatatableDetail('table_detail_01',cols_detail_01,params,cod_tipo);
            }else if (cod_tipo==2){
                //createTableDetail(params.reportCategory, 'table_detail_01', 'datatable_detail_01',lst);
                getDataSupervisionDetail(params,lst);
            }

            $("#modalDetail_01").modal('show');
        }

        function getDataSupervision(){
            var params = {
                'reportType': 'TABLE',
                'reportCategory': 'SUPERVISOR_MANAGER',
                'startDate': $('#txtStartDate').val(),
                'endDate': $('#txtEndDate').val(),
                'project': {{ idproyectos }}
            };
            $.ajax({
                type: 'POST',
                url: "{{ path('checksite_loadDataSupervision') }}",
                data: params,
                dataType: 'json',
                beforeSend: function (){
                },
                success: function (r) {
                    if (r.length >0){
                        //var d = JSON.parse(r);
                        //console.log(d);
                        var col = createTableSup(Object.keys(r[0]),'table_02', 'datatable_02');
                        //console.log(col);
                        buildDatatableSupervision('table_02',col,r);
                    }

                },
                error: function (jqXHR, textStatus, errorThrown) {

                }
            });
        }

        function getDataSupervisionDetail(params,lst){

            $.ajax({
                type: 'POST',
                url: "{{ path('checksite_loadDataSupervisionDetail') }}",
                data: params,
                dataType: 'json',
                beforeSend: function (){
                },
                success: function (r) {
                    if (r.length >0){
                        //var d = JSON.parse(r);
                        var col = createTableSupDetail(Object.keys(r[0]),'table_detail_01', 'datatable_detail_01');
                        if ( $.fn.DataTable.isDataTable('#datatable_detail_01') ) {
                            tableDetail.clear();
                        }
                        buildDatatableSupervisionDetail('table_detail_01',col,r);
                    }

                },
                error: function (jqXHR, textStatus, errorThrown) {

                }
            });
        }

        function createTableSup(data, tableRender, dtRender){
            var strHeader = "";
            var strFooter="";
            var columns = [];
            var strTable = '<table id="' + tableRender + '" class="display compact stripe" width="100%">' +
                    '<thead><tr class="header_dt">';
            $('#' + dtRender).empty();
            for (var i=0; i<data.length; i++){
                var title = data[i];
                var t = title.replace(/_/g,' ').toUpperCase();
                t = t.replace('TOTAL PDIA','% TOTAL');
                t = t.replace('PDIA','% DIA');
                var visible = title.startsWith('_') ? false : true;
                strHeader += '<th class="text-center">' + t + '</th>';
                if (data[i]=='id' || data[i]=='site_name' || data[i]=='total_pdia'){
                    columns.push({data: data[i], title: t, visible:visible,
                        render: function ( dato, type, row ) {
                            if (type==='display'){
                                return '<a data-cod="' + row['id'] + '" data-dia="0" ' +
                                        'data-site="' + row['site_name'] + '" ' +
                                        'data-lstfechas="' + row['_lista_fechas'] + '" ' +
                                        '" href="javascript://" onClick="showDetail(this,2);">' + dato + '</a>';
                            }
                            return dato;
                        }
                    });
                }else if (data[i].startsWith('pdia_')){
                    columns.push({data: data[i], title: t, visible:visible});
                }else{
                    columns.push({data: data[i], title: t, visible:visible});
                }
            }
            strTable += strHeader + '</tr></thead><tbody id="tbody_02' + 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 createTableSupDetail(data, tableRender, dtRender){
            var strHeader = "";
            var strFooter="";
            var columns = [];
            var strTable = '<table id="' + tableRender + '" class="display 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 = true;
                var t = title;
                switch (title){
                    case 'orden':
                        t = '#';
                        columns.push({data: data[i], title: t, visible:visible,
                            render: function ( data, type, row ) {
                                var sub_tipo=row['sub_tipo'];
                                if (type==='display'){
                                    if (sub_tipo.toUpperCase().startsWith('IMPLEMENT')){
                                        return '<strong>' + data + '</strong>';
                                    }else return data;
                                }
                                return data;
                            }
                        });
                        break;
                    case 'cod_item':
                        visible = false;
                        columns.push({data: data[i], title: t, visible:visible});
                        break;
                    case 'nombre_item':
                        t = 'ACTIVIDAD';
                        columns.push({data: data[i], title: t, visible:visible,
                            render: function ( data, type, row ) {
                                var sub_tipo=row['sub_tipo'];
                                if (type==='display'){
                                    if (sub_tipo.toUpperCase().startsWith('IMPLEMENT')){
                                        return '<strong>' + data + '</strong>';
                                    }else return data;
                                }
                                return data;
                            }
                        });
                        break;
                    default:
                        if (title.startsWith('dia_')){
                            t = title.replace(/_/g,' ').toUpperCase();
                            columns.push({data: data[i], title: t, visible:visible,
                                render: function ( data, type, row ) {
                                    var sub_tipo=row['sub_tipo'];
                                    if (type==='display'){
                                        if (data == 'N/A'){
                                            if (sub_tipo.toUpperCase().startsWith('IMPLEMENT')){
                                                return '<strong><span class="label label-default">' + data + '</span></strong>'
                                            }else{
                                                return '<span class="label label-default">' + data + '</span>';
                                            }
                                        }else if (data == 'SI'){
                                            if (sub_tipo.toUpperCase().startsWith('IMPLEMENT')){
                                                return '<strong><span class="label label-success">' + data + '</span></strong>'
                                            }else{
                                                return '<span class="label label-success">' + data + '</span>';
                                            }
                                        }else if (data == 'NO'){
                                            if (sub_tipo.toUpperCase().startsWith('IMPLEMENT')){
                                                return '<strong><span class="label label-danger">' + data + '</span></strong>'
                                            }else{
                                                return '<span class="label label-danger">' + data + '</span>';
                                            }
                                        }else if (data == '' || data == '--'){
                                            if (sub_tipo.toUpperCase().startsWith('IMPLEMENT')){
                                                return '<strong><span class="label label-info">' + data + '</span></strong>'
                                            }else{
                                                return '<span class="label label-info">' + data + '</span>';
                                            }
                                        }else if (data == 'NA'){
                                            if (sub_tipo.toUpperCase().startsWith('IMPLEMENT')){
                                                return '<strong><span class="label label-danger">' + data + '</span></strong>'
                                            }else{
                                                return '<span class="label label-danger">' + data + '</span>';
                                            }
                                        }
                                    }else if (data=='NA'){return 'NO';
                                    }else if (data==''){return '--'}
                                    return data;
                                }
                            });
                        }else{
                            t = title.replace(/_/g,' ').toUpperCase();
                            columns.push({data: data[i], title: t, visible:visible,
                                render: function ( data, type, row ) {
                                    var sub_tipo=row['sub_tipo'];
                                    if (type==='display'){
                                        if (sub_tipo.toUpperCase().startsWith('IMPLEMENT')){
                                            return '<strong>' + data + '</strong>';
                                        }else return data;
                                    }
                                    return data;
                                }
                            });
                        }
                }
                strHeader += '<th class="text-center">' + t + '</th>';

            }
            strTable += strHeader + '</tr></thead><tbody id="tbody_02' + 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;
        }

        $(document).ready(function(){
            $('#txtStartDate').datepicker({
                dateFormat: 'yy-mm-dd',
                onClose: function (selectedDate) {
                    $("#txtEndDate").datepicker("option", "minDate", selectedDate);
                }
            });

            $('#txtEndDate').datepicker({
                dateFormat: 'yy-mm-dd',
            });

            var f = new Date();
            var month = (f.getMonth() + 1);

            if (month < 10) month = '0' + month;
            var dateI = f.getFullYear() + '-' + month + "-01";
            var dateF = f.getFullYear() + '-' + month + "-" + f.getDate();

            $('#txtStartDate').val(dateI);
            $('#txtEndDate').val(dateF);

            $('#cmbCountry').change(function(){
                if ($('#cmbCountry').val() != 'TODOS'){
                    $.isLoading({
                        text: "Loading"
                    });
                    //llenarCombos();
                    var params = {'country': $('#cmbCountry').val()};
                    llenarCombo('cmbCustomer', 'customer', params);
                }else{
                    resetCombos('cmbCountry');
                }
            });

            $('#cmbCustomer').change(function(){
                if ($('#cmbCustomer').val() != 'TODOS'){
                    $.isLoading({
                        text: "Loading"
                    });
                    var params = {'country': $('#cmbCountry').val(), 'customer': $('#cmbCustomer').val()};
                    llenarCombo('cmbProject', 'project', params);
                }else{
                    resetCombos('cmbCustomer');
                }
            });

            $('#cmbProject').change(function(){
                if ($('#cmbProject').val() != 'TODOS'){
                    $.isLoading({
                        text: "Loading"
                    });
                    var params = {'country': $('#cmbCountry').val(),
                        'customer': $('#cmbCustomer').val(),
                        'project':  $('#cmbProject').val() };
                    llenarCombo('cmbAsp', 'asp', params);
                }else{
                    resetCombos('cmbProject');
                }
            });

            $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
                $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
                try{
                    /*$('#chart1').highcharts().reflow();
                    $('#chart2').highcharts().reflow();
                    $('#chart3').highcharts().reflow();*/
                }catch(err) {
                    //console.log(err.message);
                }
            } );

            $('#btnGenerate').click(function(){
                $.isLoading({text: "Loading"});

                var config_01 = {
                    'reportType': 'TABLE', 'reportCategory': 'SITE_MANAGER',
                    'tableRender': 'table_01', 'dtRender': 'datatable_01',
                    'columna': cols_01
                };
                var config_02 = {
                    'reportType': 'TABLE', 'reportCategory': 'SUPERVISOR_MANAGER',
                    'tableRender': 'table_02', 'dtRender': 'datatable_02',
                    'columna': cols_02
                };

                getReportData('table_01',config_01);
                getDataSupervision();
            });
        })
    </script>

    <div class="row">
        {#<div style="text-align: center"  class="col-md-2">
            <img id="logo" src="{{ asset('images/logoEricsson.png')  }}"  width="220" height="72">
        </div>#}
        <div class="col-lg-9 col-md-9">
            <h1 class="text-center text-primary" style="font-size: x-large">
                <b id="titleReport"><span class="glyphicon glyphicon-th" aria-hidden="true"></span>SUPERVISION CHECKLIST</b>
            </h1>
        </div>
        <div class="col-lg-3 col-md-3" id="identity">
            <img  width="220" height="90" id="_logo" src="{{ asset( identity.pathLogo ) }}">
        </div>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title"><a data-toggle="collapse" href="#collapse1">Filters</a></h3>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
            <div id="panelFilter" class="panel-body">
                <div class="row">
                    <div class="col-md-4 form-group">
                        <label for="txtStartDate">{{'monitor.etiqueta.fechaI' | trans}}: </label>
                        <input type="text" class="form-control" id="txtStartDate" name="txtStartDate" value="">
                    </div>
                    <div class="col-md-4 form-group">
                        <label for="txtEndDate">{{'monitor.etiqueta.fechaF' | trans}}: </label>
                        <input type="text" class="form-control" id="txtEndDate" name="txtEndDate" value="">
                    </div>
                    <div class="col-md-4 form-group">
                        <label for="btnGenerate">&nbsp;&nbsp;</label>
                        <button class="btn btn-primary form-control" id="btnGenerate"><strong>{{'ticketDetail.boton.generar' | trans}}</strong></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="panel with-nav-tabs panel-primary">
                <div class="panel-heading">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab_site_manager" data-toggle="tab"><b>SITE MANAGER</b></a></li>
                        <li><a href="#tab_supervisor_manager" data-toggle="tab"><b>FIELD SUPERVISOR</b></a></li>
                    </ul>
                </div>
                <div class="panel-body">
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="tab_site_manager">
                            <div class="row">
                                <div id="datatable_01" class="col-sm-12">
                                    <table id="table_01" class="display nowrap" width="100%">
                                        <thead>
                                        <tr></tr>
                                        </thead>
                                        <tbody id="tbody_01"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tab_supervisor_manager">
                            <div class="row">
                                <div id="datatable_02" class="col-sm-12">
                                    <table id="table_02" class="display nowrap" width="100%">
                                        <thead>
                                        <tr></tr>
                                        </thead>
                                        <tbody id="tbody_02"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="modalDetail_01" 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="title_modalDetail_01">
                        <strong>
							<span class="modal_detalle_titulo">
								{# {'monitorii.detail' | trans } #}
							</span>
                        </strong>
                    </h2>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <h3 class="text-center text-primary" style="font-size: medium">
                            <b id="titleReportDetail"></b>
                        </h3>
                    </div>
                    <div class="row">
                        <div id="datatable_detail_01" class="col-sm-12">
                            <table id="table_detail_01" class="display nowrap" width="100%">
                                <thead>
                                <tr></tr>
                                </thead>
                                <tbody id="tbody_detail_01"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"> {{'monitorii.close' | trans}}
                        <span class="glyphicon glyphicon-remove"></span>
                    </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-1.12.4.js') }}"></script-->
    <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('js/TableEdit/jquery.tabledit.min.js') }}"></script>
    <script>
        function validarFecha(fecha,sep) {
            try {
                var fecha = fecha.split(sep);
                var dia = fecha[2];
                var mes = fecha[1];
                var ano = fecha[0];
                var estado = true;

                if ((dia.length == 2) && (mes.length == 2) && (ano.length == 4)) {
                    switch (parseInt(mes)) {
                        case 1:
                            dmax = 31;
                            break;
                        case 2:
                            if (ano % 4 == 0) dmax = 29; else dmax = 28;
                            break;
                        case 3:
                            dmax = 31;
                            break;
                        case 4:
                            dmax = 30;
                            break;
                        case 5:
                            dmax = 31;
                            break;
                        case 6:
                            dmax = 30;
                            break;
                        case 7:
                            dmax = 31;
                            break;
                        case 8:
                            dmax = 31;
                            break;
                        case 9:
                            dmax = 30;
                            break;
                        case 10:
                            dmax = 31;
                            break;
                        case 11:
                            dmax = 30;
                            break;
                        case 12:
                            dmax = 31;
                            break;
                    }

                    dmax != "" ? dmax : dmax = -1;
                    if ((dia >= 1) && (dia <= dmax) && (mes >= 1) && (mes <= 12)) {
                        for (var i = 0; i < fecha[2].length; i++) {
                            diaC = fecha[2].charAt(i).charCodeAt(0);
                            (!((diaC > 47) && (diaC < 58))) ? estado = false : '';
                            mesC = fecha[1].charAt(i).charCodeAt(0);
                            (!((mesC > 47) && (mesC < 58))) ? estado = false : '';
                        }

                    }
                    for (var i = 0; i < fecha[0].length; i++) {

                        anoC = fecha[0].charAt(i).charCodeAt(0);

                        (!((anoC > 47) && (anoC < 58))) ? estado = false : '';
                    }
                } else estado = false;
                return estado;

            } catch (err) {
                //alert("Error fechas");
                return false;
            }
        }
    </script>
{% endblock %}