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

{% endblock %}

{% block dashboard %}
    <style>

        .btn-claro{
         background-color:transparent;
         border: 0px solid;
        }

        .btn-claro:focus {
               outline:none;
        }

        .text-global {

            margin-top: 10px;
        }

        .huge {
            font-size: 25px;
        }

        .panel-green {
            border-color: #5cb85c;
        }

        .panel-green .panel-heading {
            border-color: #5cb85c;
            color: #fff;
            background-color: #5cb85c;
        }

        .panel-green a {
            color: #5cb85c;
        }

        .panel-green a:hover {
            color: #3d8b3d;
        }

        .panel-red {
            border-color: #d9534f;
        }

        .panel-red .panel-heading {
            border-color: #d9534f;
            color: #fff;
            background-color: #d9534f;
        }

        .panel-red a {
            color: #d9534f;
        }

        .panel-red a:hover {
            color: #b52b27;
        }

        .panel-yellow {
            border-color: #f0ad4e;
        }

        .panel-yellow .panel-heading {
            border-color: #f0ad4e;
            color: #fff;
            background-color: #f0ad4e;
        }

        .panel-yellow a {
            color: #f0ad4e;
        }

        .panel-yellow a:hover {
            color: #df8a13;
        }

        .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: 36px;
        }

        .tablesorter-header-inner, table.tablesorter thead tr th, .tablesorter-filter {
            color: #fff;
            background-color: #082a99;
            border-color: #2643a5;

        }

        table.tablesorter thead tr th {

            height: 40px;
        }

        .tablesorter-blue .headerSortUp, .tablesorter-blue .tablesorter-headerSortUp, .tablesorter-blue .tablesorter-headerAsc {
            background-color: #082a99;
        }

        .tablesorter-blue .headerSortDown, .tablesorter-blue .tablesorter-headerSortDown, .tablesorter-blue .tablesorter-headerDesc {
            background-color: #082a99;
        }

        .tablesorter-blue .tablesorter-filter-row td {
            background: #2643a5;
        }

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

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

            var intervalTime = null;
            $('#autoload').click(function() {

                var time = parseInt($('#time').val());

                if ($(this).prop('checked')) {

                    intervalTime = window.setInterval(getReporte, time);
                }
                else {

                    clearInterval(intervalTime);
                }

            });

            function intervalReport(fun, time) {

            }

            $('.datepicker').datepicker({
                                            dateFormat: 'yy-mm-dd',
                                            maxDate: new Date(),
                                            defaultDate: new Date(),

                                        }).datepicker('setDate', new Date());

            $('#type').change(function() {

                if ($(this).val() == 1) {

                    $('#chart1').show();

                    $('#chart3').hide();

                }
                else {

                    $('#chart1').hide();

                    $('#chart3').show();
                }

            });
            var starYear = 2017;
            var d = new Date();
            var year = d.getFullYear();
            var month = new Array();

            $('.checklist').live('click', function() {

                window.location.href = $(this).attr('href');
            });

            for (var i = starYear; year >= i; i++) {
                $('#ano').append($('<option/>', {
                    value: i,
                    text: i,
                }));

            }

            month[0] = 'January';
            month[1] = 'February';
            month[2] = 'March';
            month[3] = 'April';
            month[4] = 'May';
            month[5] = 'June';
            month[6] = 'July';
            month[7] = 'August';
            month[8] = 'September';
            month[9] = 'October';
            month[10] = 'November';
            month[11] = 'December';
            var n = month[d.getMonth()];
            var options = new Array();

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

                if (i <= d.getMonth()) {

                    $('#mes').append($('<option/>', {
                        value: i + 1,
                        text: month[i],
                    }));

                }
            }
            $('#ano').change(function() {

                var yearSelected = parseInt($(this).val());
                var semana = ISO8601_week_no(new Date());

                $('#mes').empty();

                for (var i = 0; i < month.length; i++) {
                    if (yearSelected < year) {
                        $('#mes').append($('<option/>', {
                            value: i + 1,
                            text: month[i],
                        }));
                    }
                    else if (i <= d.getMonth()) {
                        $('#mes').append($('<option/>', {
                            value: i + 1,
                            text: month[i],
                        }));

                    }
                }
                $('#semana').empty();

                if (yearSelected < year) {
                    var semana = 52;
                    for (var i = semana; i >= 1; i--) {

                        $('#semana').append($('<option/>', {
                            value: i,
                            text: i,
                        }));
                    }

                }
                else {

                    for (var i = semana; i >= 1; i--) {

                        $('#semana').append($('<option/>', {
                            value: i,
                            text: i,
                        }));
                    }
                }

            });

            $('#tipoBusqueda').on('change load', function() {

                $(this).val() == 'mes' ? $('#mes').removeAttr('class', 'hide') : $('#mes').addClass('hide');
                $(this).val() == 'semana' ? $('#semana').removeAttr('class', 'hide') : $('#semana').addClass('hide');
                $(this).val() == 'dia' ? $('#dia').removeClass('hide') : $('#dia').addClass('hide');
            });

            $('#generar').click(function() {

                if ($('#ano').val() == '' || $('#tipoBusqueda').val() == '') {
                    return false;
                }
                $.isLoading({
                                text: 'Loading',

                            });
                getReporte();

            });

        });

        function getReporte() {

            data = {};
            var fechaDesde = $("#txtStartDate").val().split("-");
            var fechaHasta = $("#txtEndDate").val().split("-");
            console.log(fechaDesde,fechaHasta);
            data['fechaDesde'] = $("#txtStartDate").val();
            data['fechaHasta'] = $("#txtEndDate").val();
            data['idproceso'] = $('#idproceso').val();
            $.getJSON('{{ path('reporteentel_getReportSS') }}', data, function(data) {
                var monitor = data.monitor;
                var chart1 = data.chart1;

                if (monitor.length == 0) {

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

                createColumnChart('chart1', 'Engineering Deliverables', chart1);
                
                var objectType = {'9': 1, '10': 2};

                $('#reporte1').empty().append(createTable(monitor, undefined, undefined, objectType));
                $('.double-scroll').doubleScroll();

                var pagerOptions = {
                    // target the pager markup - see the HTML block below
                    container: $('.pager'),
                    // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
                    output: 'Rows : {endRow}',
                    // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
                    // table row set to a height to compensate; default is false
                    fixedHeight: false,
                    // remove rows from the table to speed up the sort of large tables.
                    // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
                    removeRows: true,
                    // go to page selector - select dropdown that sets the current page
                    cssGoto: '.gotoPage',
                };
                // initial sort set using sortList option
                $('.table1').tablesorter({
                                             theme: 'blue',
                                             // sort on the first column and second column in ascending order
                                             widgets: ['zebra', 'filter'],
                                             widgetOptions: {
                                                 // extra css class applied to the table row containing the filters & the inputs within that row
                                                 filter_cssFilter: '',
                                                 // If there are child rows in the table (rows with class name from "cssChildRow" option)
                                                 // and this option is true and a match is found anywhere in the child row, then it will make that row
                                                 // visible; default is false
                                                 filter_childRows: false,
                                                 // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
                                                 // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
                                                 filter_hideFilters: false,
                                                 // Set this option to false to make the searches case sensitive
                                                 filter_ignoreCase: true,
                                                 // jQuery selector string of an element used to reset the filters
                                                 filter_reset: '.reset',
                                                 // Use the $.tablesorter.storage utility to save the most recent filters
                                                 filter_saveFilters: true,
                                             },
                                         }).tablesorterPager(pagerOptions);
                $('.pager').show();
                $('#inicio').show();
                $('#autoload').attr('disabled', false);
                $.isLoading('hide');
                resizeChart();
                $('#chart1').highcharts().reflow();
                $('#chart2').highcharts().reflow();
            }).fail(function() {
                $.isLoading('hide');
            });
        }
        function createArrayToChart(chart, text) {
            var header = Object.keys(chart[0]);
            var x = new Array();
            var y = new Array();

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

                x.push(chart[i][header[0]]);

            }

            for (var j = 1; j < header.length; j++) {

                y.push({name: '', data: []});
            }

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

                for (var j = 1; j < header.length; j++) {

                    if (i == 0) {

                        y[j - 1].name = header[j];
                    }
                    y[j - 1].data.push(parseInt(chart[i][header[j]]));
                }

            }

            return new Array(x, y);

        }

        function createArrayToPieChart(chart) {
            if (chart.length == 0) {
                return false;
            }
            var auxArray = new Array();
            var header = Object.keys(chart[0]);
            for (var i = 0; i < chart.length; i++) {

                auxArray.push({'name': chart[i][header[0]], y: parseFloat(chart[i][header[1]])});

            }

            return auxArray;
        }

        function createColumnChart(renderTo, title, chart) {
            var data = createArrayToChart(chart);

            var segundaGraficaOpt = {
                chart: {
                    type: 'column',
                    renderTo: renderTo,

                },

                title: {
                    text: title,
                },

                xAxis: {
                    categories: data[0],
                    crosshair: true,
                },

                yAxis: {

                    title: {
                        text: '',
                    },
                    plotLines: [],
                },

                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                 '<td style="padding:0"><b>{point.y:.0f} SS</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true,
                },

                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0,
                        depth: 40,
                        dataLabels: {
                            enabled: true,
                        },
                    },
                },

                series: data[1],
            };

            new Highcharts.Chart(segundaGraficaOpt);
        }
        function createPieChart(renderTo, title, chart) {
            var data = createArrayToPieChart(chart);
            console.log(data);
            var pie = {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie',
                    renderTo: renderTo,
                },
                title: {
                    text: title,
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.y:.0f}</b>',
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                            },

                        },
                        showInLegend: true,
                    },
                },
                series: [
                    {
                        name: 'Sites',
                        colorByPoint: true,
                        data: data,
                    }],
            };
            new Highcharts.Chart(pie);
        }
        function createTable(monitor, total, nombreColTotal, type) {

            var header = Object.keys(monitor[0]);
            var headerType = Object.keys(type);
            var table = '<table  class="table table-bordered table-hover table-striped table-responsive table1" id="tableSitios"> <thead>' +

                        '<tr class="btn-info">';

            for (var j = 0; j < header.length; j++) {

                if (j != 0) {
                    table += '<th class=\'text-center\'>' + header[j] + '</th>';
                }

            }
            table += '</tr></thead>';

            for (var i = 0; i < monitor.length; i++) {
                table += '<tr id=\'' + monitor[i][header[0]] + '\'>';
                for (var j = 0; j < header.length; j++) {

                    if ($.inArray(j, headerType)) {
                        var typeString = 'id="' + type[j] + '"';

                    }
                    if (j != 0) {
                        table += '<td ' + typeString + '>' + monitor[i][header[j]] + '</td>';
                    }
                }
                table += '</tr>';

                if (typeof total !== 'undefined') {

                    if (i == monitor.length - 1) {

                        var headerTotal = Object.keys(total);
                        table += '<tr><td>' + nombreColTotal + '</td>';

                        for (var x = 0; x < headerTotal.length; x++) {
                            table += '<td>';
                            table += total[headerTotal[x]];

                            table += '</td>';

                        }
                        table += '</tr>';
                    }
                }
            }
            table += '</table>';

            return table;
        }

        function createTableSimple(monitor, total, nombreColTotal) {

            var header = Object.keys(monitor[0]);

            var table = '<table id="tableSitios"  class="table table-bordered table-hover table-striped table-responsive"> <thead>' +

                        '<tr class="btn-info">';

            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>';
                for (var j = 0; j < header.length; j++) {
                    if (typeof monitor[i][header[j]] === 'object') {
                        table += '<td>' + monitor[i][header[j]].date.substring(0, 19) + '</td>';
                    }
                    else {
                        table += '<td>' + monitor[i][header[j]] + '</td>';
                    }

                }
                table += '</tr>';

                if (typeof total !== 'undefined') {

                    if (i == monitor.length - 1) {

                        var headerTotal = Object.keys(total);
                        table += '<tr><td>' + nombreColTotal + '</td>';

                        for (var x = 0; x < headerTotal.length; x++) {
                            table += '<td>';
                            table += total[headerTotal[x]];

                            table += '</td>';

                        }
                        table += '</tr>';
                    }
                }
            }
            table += '</table>';

            return table;
        }

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

        function getTotal(valor, key, tipo) {
            var total = new Array();

            var header = Object.keys(valor[0]);

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

                for (var j = 0; j < key.length; j++) {

                    if (typeof total[key[j]] === 'undefined') {
                        total[key[j]] = 0;
                    }

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

                }

            }
            return total;
        }

        function createTableDetail(monitor,opcion){
            var table;
            var idproyectos = {{idproyectos}};
            if (opcion == 0){
            if (monitor.length >0) {
                table = '<table id="tablaDetail" class="table table-bordered table-hover table-striped table-responsive">';
                table += "<thead class='tabledetail'><tr>";
                table += "<th style='vertical-align:middle;' class='text-center'>#</th>";
                table += "<th style='vertical-align:middle;' class='text-center'>ARCHIVO</th>";
                table += "<th style='vertical-align:middle;' class='text-center'>FECHA</th>";
                table += "</tr></thead>";
                var strLast="";
                for (var i = 0; i < monitor.length; i++) {
                    isLast = monitor[i]['isLast'];
                    if (isLast==1) {strLast="*"}else{strLast='';}
                    table += "<tr>";
                    table += "<td class='text-center' nowrap>" + (i+1 ) + "</td>";
                    table += "<td class='text-left'><a target='_blank' href='"
                            + monitor[i]['path'] + "'>"
                            +"<span class='glyphicon glyphicon-file' aria-hidden='true'></span>&nbsp;" +
                            monitor[i]['filename'] + strLast+ "</a></td>";
                    table += "<td class='text-center' nowrap>" + monitor[i]['fecha'] + "</td>";
                    table += "</tr>";

                }
                table += "</table>";
            }
          }else{
            if (monitor.length >0) {
                table = '<table id="tablaDetail" class="table table-bordered table-hover table-striped table-responsive">';
                table += "<thead class='tabledetail'><tr>";
                table += "<th style='vertical-align:middle;' class='text-center'>#</th>";
                table += "<th style='vertical-align:middle;' class='text-center'>ARCHIVO</th>";
                table += "<th style='vertical-align:middle;' class='text-center'>SUPERVISOR</th>";
                table += "<th style='vertical-align:middle;' class='text-center'>CONDICIÓN</th>";
                table += "<th style='vertical-align:middle;' class='text-center'>FECHA</th>";
                table += "</tr></thead>";
                var strLast="";
                for (var i = 0; i < monitor.length; i++) {
                    isLast = monitor[i]['isLast'];
                    if (isLast==1) {strLast="*"}else{strLast='';}
                    table += "<tr>";
                    table += "<td class='text-center' nowrap>" + (i+1 ) + "</td>";
                    table += "<td class='text-left'><a target='_blank' href='"
                            + monitor[i]['path'] + "'>"
                            +"<span class='glyphicon glyphicon-file' aria-hidden='true'></span>&nbsp;" +
                            monitor[i]['filename'] + strLast+ "</a></td>";
                    table += "<td class='text-center' nowrap>" + monitor[i]['SUPERVISOR'] + "</td>";
                    table += "<td class='text-center' nowrap>" + monitor[i]['STEP2'] + "</td>";
                    table += "<td class='text-center' nowrap>" + monitor[i]['fecha'] + "</td>";
                    table += "</tr>";

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


        function reporteBateriaDetail(ticket,sitio,entregable,opcion) {
            data = {};
            data['ticket'] = ticket;
            data['sitio'] = sitio;
            data['entregable'] = entregable;
            data['opcion'] = opcion;

            $.getJSON('{{path('reporteentel_getReportSSDetail')}}', data, function (data) {
                var bateria = data.bateria;
                if (bateria.length == 0) {
                    $("#reporte_detail").empty();
                    $("#reporte_detail").append('<div class="alert alert-warning" role="alert">NO SE HA ENCONTRADO DATA</div>');
                    $.isLoading("hide");
                    return false;
                }
                $('#myModalLabel').html("DETALLE " + bateria[0]['entregable']);
                $("#reporte_detail").empty().append(createTableDetail(bateria,opcion));
                $.isLoading("hide");
            })
            return true;
        }
        
        function _detail(ticket,site,entregable,opcion){
            $('#myModalLabel').html("");
            $("#reporte_detail").empty();
            $.isLoading({
                text:       "Loading"
            });
            reporteBateriaDetail(ticket,site,entregable,opcion);
            $('#myModalDetalle').modal('show');
        }

         function resizeChart(){
          var panel_width = $('.tab-content').width();
          var offset = 32;
          console.log(panel_width-offset);
          //alert("HOLA");
          if ($("#chart1").highcharts()!=undefined){
              $('#chart1').highcharts().reflow();
          }
          if ($("#chart2").highcharts()!=undefined){
              $('#chart2').highcharts().reflow();
          }
        }

    </script>
        {% if identity is not empty %}

            <div class="row">
                <div class="pull-right" style="">

                    <div class="col-lg-12">
                        <img id="logo" src="{{ asset( identity.pathLogo ) }}" width="350" height="65">
                        <p class="text-center" style="font-size: 14pt;font-weight: bold;">{{ identity.alias }}</p>
                    </div>
                </div>
            </div>
            {% endif %}
    <div class="container-fluid">
        <row>
            <div class="col-lg-12 col-md-12">
                <h1 class="text-center text-primary"><i class="fa fa-file-text-o"></i> Engineering Deliverables </h1>
            </div>
        </row>
        <div class="row">

            <div class="col-md-3" id="parametros">
                <label for="txtStartDate">{{'monitor.etiqueta.fechaI' | trans}}: </label>
                <input type="text" class="form-control" id="txtStartDate" name="txtStartDate" value="">
            </div>
            <div class="col-md-3" id="parametros">
                <label for="txtEndDate">{{'monitor.etiqueta.fechaF' | trans}}: </label>
                <input type="text" class="form-control" id="txtEndDate" name="txtEndDate" value="">
            </div>
            <div class="col-md-2" id="parametros"><br>
                <select class="form-control" id="idproceso">
                  <option value="655">MELA_EBB_ENTEL_AMPLIACION ACCESO MOVIL 2022</option>
                </select>
            </div>
            <div class="col-md-4" id="parametros"><br>
                <button class="btn btn-primary col-lg-5" id="generar">{{ 'monitoriii.generate' | trans }}</button>
            </div>                

        </div>
        <div class="container-fluid" id="inicio" style="display: none">
            <ul class="nav nav-pills nav-justified">
                <li class="active"><a data-toggle="tab" href="#_summary"><strong>Summary</strong></a></li>


            </ul>
            <div class="tab-content" style="margin-top: 20px;">
                <div id="_summary" class="tab-pane fade in active">

                    <div class="row">


                        <div class="col-lg-12" id="chart1">

                        </div>


                        <div class="col-lg-6" id="chart2">
                        </div>

                    </div>
                    <div class="row">
                        <div class="btn-group pull-right" role="group" aria-label="..." style="margin-right: 50px">
                            <a href="#"
                               onclick="$('#tableSitios').tableExport({type: 'excel', escape: 'false',fileName: 'Distribuidores',ignoreRow: [1]});">
                                <img src={{ asset("images/xls.png") }} width="24px"> XLS</a>

                        </div>
                        <div class="pager">
                            <span class="pagedisplay"></span>
                        </div>

                        <a class="reset"><i class="fa fa-eraser" aria-hidden="true"></i></a>

                    </div>
                    <div class="row double-scroll" id="reporte1">


                    </div>

                    <div id="pager" class="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"/>

                            <img src="{{ asset('tablesorter-master/addons/pager/icons/next.png') }}" class="next"/>
                            <img src="{{ asset('tablesorter-master/addons/pager/icons/last.png') }}" class="last"/>
                            <span class="pagedisplay"></span>
                            <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 id="_detail" class="tab-pane fade in">

                    <div class="col-lg-6" id="chart3">

                    </div>
                    <div class="col-lg-6" id="chart4">

                    </div>

                </div> <!-- end detail -->
            </div>

        </div>


    </div>

    <div class="modal fade" id="myModalDetalle" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header  bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title text-center" id="myModalLabel">DETALLE</h2>
                </div>

                <div class="modal-body">
                    <div class="row" style="overflow-x: auto;">
                        <div id="reporte_detail" class="col-md-12"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>

                </div>

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

{% endblock %}