{% 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 tipo = $('#tipoBusqueda').val();
            switch (tipo) {
                case 'semana':
                    data = {'semana': $('#semana').val()};
                    break;
                case 'mes':
                    data = {'mes': $('#mes').val()};
                    break;
                case 'dia':
                    data = {'dia': $('#dia').val()};
                    break;
            }
            data['ano'] = $('#ano').val()*/;
            //data = {'idproceso': $('#idproceso').val()};
            var fechaDesde = $("#txtStartDate").val().split("-");
            var fechaHasta = $("#txtEndDate").val().split("-");
            console.log(fechaDesde,fechaHasta);
            data['fechaDesde'] = $("#txtStartDate").val();
            data['fechaHasta'] = $("#txtEndDate").val();
            /*data['anoDesde'] = fechaDesde[0];
            data['mesDesde'] = fechaDesde[1];
            data['diaDesde'] = fechaDesde[2];
            data['anoHasta'] = fechaHasta[0];
            data['mesHasta'] = fechaHasta[1];
            data['diaHasta'] = fechaHasta[2];  */
            data['idproceso'] = $('#idproceso').val();
            $.getJSON('{{ path('reporteappenate_getDetail') }}', data, function(data) {
                var monitor = data.monitor;
                var chart1 = data.chart1;
                var chart2 = data.chart2;
                //var ssExecuted = data.ss_executed[0].cantidad;
                //var ss_pending = data.ss_pending[0].cantidad;
                //var approved = data.approved[0].cantidad;
                //var inreview = data.inreview[0].cantidad;
                //var inprocess = data.inprocess[0].cantidad;
                //var inprocessAsp = data.inprocessAsp[0].cantidad;

                //$('#ss_executed').text(ssExecuted);
                //$('#ss_pending').text(ss_pending);
                //$('#approved').text(approved);
                //$('#inreview').text(inreview);
                //$('#inprocess').text(inprocess);
                //$('#inprocessAsp').text(inprocessAsp);

                //console.log(createArrayToChart(chart2));

                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;
                }
                if (chart3.length == 0) {
                    $('#chart3').append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
                }
                if (chart4.length == 0) {
                    $('#chart4').append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
                }
                createColumnChart('chart1', 'Engineering Deliverables By Region', chart1);
                // ANTERIOR
                //var total = getTotal(chart1, [1, 2, 4], 0);
                //CAMBIO
                var total = getTotal(chart1,[1,2,3,4,5,6,7,8,9,10,11],2);
                total.shift();
                console.log(total);
                var header = Object.keys(chart1[0]);
                console.log(header);
                var AuxArray = new Array();
                //  for(var i=1;i<header.length;i++){
                // console.log(parseInt(total[i-1]));
                //ANTERIOR
                //AuxArray.push({'estado': header[1], 'Sitios': parseInt(total[1 - 1])});
                //AuxArray.push({'estado': header[2], 'Sitios': parseInt(total[2 - 1])});
                //AuxArray.push({'estado': header[4], 'Sitios': parseInt(total[4 - 1])});
                //   }
                //CAMBIO
                for(var i=1;i<header.length;i++){
                    AuxArray.push({'estado':header[i],'Sitios': parseInt(total[i-1])});
                }

                createColumnChart('chart2', 'Engineering Deliverables', AuxArray);

                var objectType = {'9': 1, '10': 2, '11': 3, '12': 4, '13': 5, '14': 6};

                $('#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 _detail(ticket,site,movimiento){

          /*var ticket;
          var movimiento;*/

          $("#formDownloadMDR"+ticket).submit();

          //reporteBateriaDetail(ticket,site,movimiento);

        }

        /*$(".btnDownloadMDR").click(function () {
                $("#formDownloadMDR"+'2157882').submit();

            });*/

        function reporteBateriaDetail(ticket,sitio,movimiento) {

            var ticket;
            var sitio;
            var movimiento;

            $.ajax({
                type: 'POST',
                url: "{{ path('downloadMRDPR',{'idproyectos':1052}) }}",
                data: {'$idticket': ticket, '$idmovement': movimiento},
                success: function(data){

                }
                });
            /*}).done(function (data) {

            });*/

        }

        /*$("#btnDownloadMDR").click(function () {
            $("#formDownloadMDR").submit();

        });*/

        function _detail2(ticket,site,movimiento){
          /*$("#showMDRsPR").load('{#{ path('showMDRsPR',{'idproyectos':1052}) }#}', {
              $idticket: ticket
          });
          $("#modalDownloadMDR").modal('show');*/
          var idticket = ticket;

          var postData = {
              idticket: idticket
          };
          $.ajax({
              type: 'POST',
              url: "{{ path('reporteappenate_getListMdrATicket') }}",
              data: postData,
              dataType: 'json',
              beforeSend: function (){
                  $('#divLoadingModal').show();
                  $('#divLoadingModal').html('<span id="img_initializing_loading"><img src="{{ asset('img/loading.gif' ) }}" ' +
                  'width="16" height="16"></span><strong style="margin-left: 5px;">Cargando lista de archivos MDR...</strong>');
                  $('#tbodyTableListSDE').empty();
                  $('#saveFileSDE').prop('disabled', true);
              },
              success: function (r) {
                  var str = "";
                  if (r.length>0){
                      for (var i=0; i<r.length; i++){
                          var nombre = r[i]['codigo'];
                          var path = r[i]['path'];
                          str += "<tr>" +
                                  "<td class='text-center'" + " style='font-weight: normal'>" + (i+1) + "</td>" +
                                  "<td class='text-center'" + " style='font-weight: normal'>" + r[i]['mdr'] + "</td>" +
                                  "<td class='text-center'" + " style='font-weight: normal'>" + r[i]['codigo'] + "</td>" +
                                  //"<td class='text-left'" + " style='font-weight: normal'><a target='blank' href='"  + path + "'>" + nombre + "</a></td>" +
                                  "<td class='text-center'" + " style='font-weight: normal'>" + r[i]['fecha'] + "</td>" +
                                  "<td class='text-center'" + " style='font-weight: normal'>" + r[i]['D'] + "</td>"
                          str += "</tr>";
                      }
                      str += "";
                      $('#tbodyTableListSDE').append(str);

                      $('#divLoadingModal').hide();
                      $('#divLoadingModal').html('');
                      //$('#saveFileSDE').prop('disabled', false);
                  }else{
                      $('#divLoadingModal').hide();
                      $('#divLoadingModal').html('');
                      //$('#saveFileSDE').prop('disabled', false);
                      str="<tr><td colspan='4' class='text-center' style='font-weight: normal'>No se encontraron registros.</td></tr>";
                      $('#tbodyTableListSDE').append(str);
                      return false;
                  }
              },
              error: function (jqXHR, textStatus, errorThrown) {
                  $('#divLoadingModal').hide();
                  $('#divLoadingModal').html('');
                  $('#tbodyTableListSDE').empty();
                  //$('#saveFileSDE').prop('disabled', false);
              }
          });

          $("#modalfileUploadSDE").modal('show');

        }

        function _detail3(ticket,site,movimiento){

          /*var ticket;
          var movimiento;

          $("#idticketHide").attr(value, ticket);
          $("#idmovementHide").attr(value, movimiento);
          $("#formDownloadMDR").submit();*/

          reporteBateriaDetail(ticket,site,movimiento);

          /*$("#showMDRsPR").load('{#{ path('showMDRsPR',{'idproyectos':1052}) }#}', {
              $idticket: ticket
          });*/

            //$("#modalDownloadMDR").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>

    <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="">
                <!--<select class="form-control" id="ano">
                    <option value="">{{ 'Seleccione Año' | trans }}</option>

                </select>-->
            </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="">
                <!--<select class="form-control" id="tipoBusqueda">
                    <option value=""> {{ 'Seleccione Fecha' | trans }}</option>

                    <option value="dia">DAY</option>
                    <option value="semana">{{ 'monitor.week' | trans }}</option>
                    <option value="mes">{{ 'monitoriii.month' | trans }}</option>
                    <option value="ano">{{ 'monitoriii.year' | trans }}</option>

                </select>-->
            </div>
            <!--<div class="col-md-2" id="parametros">
               <select class="hide" id="mes">


                </select>
                <select class="hide" id="semana">


                </select>

                <input type="text" id="dia" class="hide form-control datepicker">


            </div>-->
            <div class="col-md-2" id="parametros"><br>
                <select class="form-control" id="idproceso">
                  <option value="96">GIGARED</option>
                  <option value="155">5G</option>
                  <option value="161">GIGARED NEW</option>
                  <option value="506">SWAP DE RADIOS 5G</option>
                  <option value="582">IBS E2E</option>
                  <option value="583">IBS MODERNIZACION</option>
                  <option value="584">IBS 5G MODERNIZACION</option>
                  <option value="658">NEW SITES</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>

                <input type="checkbox" disabled title="AutoLoad" id="autoload" class="col-lg-2">
                <select id="time" class="col-lg-5">
                    <option value="900000">15 Min</option>
                    <option value="600000">10 Min</option>
                    <option value="300000">5 Min</option>
                </select>
            </div>

            {# <div class="col-lg-2">
                <img id="logo" src="{{ asset('images/telcel.png')  }}"  width="300" height="65">
                <p class="text-center" style="font-size: 14pt;font-weight: bold;">ONE RAN</p>
            </div>#}

        </div>
        {% 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" 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-2 col-md-6">
                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-xs-3">
                                            <i class="fa fa-check fa-4x"></i>
                                        </div>
                                        <div class="col-xs-9 text-right">
                                            <div id="ss_executed" class="huge">0</div>
                                            <div class="text-global">SS Executed</div>
                                        </div>
                                    </div>
                                </div>
                                <a href="#">
                                    <div class="panel-footer">
                                        <span class="pull-left">View Details</span>
                                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                        <div class="clearfix"></div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <div class="panel panel-yellow">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-xs-3">
                                            <i class="fa fa-spinner fa-4x"></i>
                                        </div>
                                        <div class="col-xs-9 text-right">
                                            <div id="ss_pending" class="huge">0</div>
                                            <div class="text-global">SS Pending</div>
                                        </div>
                                    </div>
                                </div>
                                <a href="#">
                                    <div class="panel-footer">
                                        <span class="pull-left">View Details</span>
                                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                        <div class="clearfix"></div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <div class="panel panel-green">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-xs-3">
                                            <i class="fa fa-file fa-4x"></i>
                                        </div>
                                        <div class="col-xs-9 text-right">
                                            <div id="approved" class="huge">0</div>
                                            <div class="text-global">Approved</div>
                                        </div>
                                    </div>
                                </div>
                                <a href="#">
                                    <div class="panel-footer">
                                        <span class="pull-left">View Details</span>
                                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                        <div class="clearfix"></div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <div class="panel panel-red">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-xs-3">
                                            <i class="fa fa-search fa-4x"></i>
                                        </div>
                                        <div class="col-xs-9 text-right">
                                            <div id="inreview" class="huge">0</div>
                                            <div class="text-global">Telcel</div>
                                        </div>
                                    </div>
                                </div>
                                <a href="#">
                                    <div class="panel-footer">
                                        <span class="pull-left">View Details</span>
                                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                        <div class="clearfix"></div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <div class="panel panel-green">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-xs-3">
                                            <i class="fa fa-check fa-4x"></i>
                                        </div>
                                        <div class="col-xs-9 text-right">
                                            <div id="inprocess" class="huge">0</div>
                                            <div class="text-global">In Process ///</div>
                                        </div>
                                    </div>
                                </div>
                                <a href="#">
                                    <div class="panel-footer">
                                        <span class="pull-left ">View Details</span>
                                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                        <div class="clearfix"></div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-6">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-xs-3">
                                            <i class="fa fa-check fa-4x"></i>
                                        </div>
                                        <div class="col-xs-9 text-right">
                                            <div id="inprocessAsp" class="huge">0</div>
                                            <div class="text-global">In Process ASP</div>
                                        </div>
                                    </div>
                                </div>
                                <a href="#">
                                    <div class="panel-footer">
                                        <span class="pull-left openModal asp">View Details</span>
                                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                        <div class="clearfix"></div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>-->

                    <div class="row">


                        <div class="col-lg-6" 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="modalDetail" 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"> {{ 'monitorii.detail' | trans }}</h2>
                </div>
                <div class="modal-body">


                </div>
                <div class="modal-footer">
                    <button id="savePlan" type="button" class="btn btn-default"><i
                                class="fa fa-lg fa-save text-primary"></i></button>
                    <button type="button" class="btn btn-default" data-dismiss="modal"><i
                                class="fa fa-lg fa-times text-danger"></i></button>
                </div>
            </div>
        </div>
    </div>

    <!-- MODAL MDR -->

    <div class="modal modal-wide fade" id="modalDownloadMDR" tabindex="-1" role="dialog"
         aria-labelledby="modalSiteDetailATTUSA" style="width: 90%">
        <div class="modal-dialog" role="document" style="width: 80%">

            <div class="modal-content">
                <div class="modal-header  btn-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel" style="text-align: center">
                        <span id="lblNetworkElement"></span> - MDR</h4>
                </div>
                <div class="modal-body" style="height: 550px; overflow-y: auto">

                    <div id="showMDRsPR"></div>
                </div>

                <div class="modal-footer">{#{estados}#}


                    <form action="{{ path('downloadMRDPR',{'idproyectos':idproyectos}) }}" id="formDownloadMDR"
                          method="POST">
                        <input id="idticketHide" type="hidden" name="$idticket" value="">
                        <input id="idmovementHide" type="hidden" name="$idmovement" value="">
                    </form>

                    <input id="idestadosHide" type="hidden" name="idestados">
                    <div class="row">
                        <div class="btn pull-left">

                            <!-- <button style="display:none" type="button" class="btn btn-danger" id="resetMDR">Reset MDR</button>-->

                        </div>
                        <div class="btn pull-right">
                            <!--<div id="btnSend"></div>-->

                            <!--<button style="display:none" type="button" class="btn btn-success open-enviar" id="btnSendtoPlan">Send to Plan</button>--> <!-- 1er nivel -->

                            <!--<button style="display:none" type="button" class="btn btn-danger" id="btnCancel">Delete MDR</button>--><!-- 2do nivel -->
                            <!--<button style="display:none" type="button" class="btn btn-success open-confirmar" id="btnSendtoSupply">Confirm</button>--><!-- 2do nivel -->
                            <!-- <button style="display:none" type="button" class="btn btn-warning open-reprogramar" id="btnSendtoSupplyReprogramar">Reschedule</button>--><!-- 2do nivel -->
                            <button style="display: none;" type="button" class="btn btn-info" id="btnDownloadMDR">Download MDR</button>
                            <!--<button style="display:none" type="button" class="btn btn-default" id="btnSaveMDR"><i class="fa fa-save"></i></button>-->
                            <button type="button" class="btn btn-default"
                                    data-dismiss="modal">{{ 'monitorii.close' | trans }}</button>
                        </div>

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

    <div class="modal fade" id="modalfileUploadSDE" tabindex="-1" role="dialog" aria-labelledby="modalfileUploadSDE">
        <div class="modal-dialog" 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"> {{ 'MDR ADICINALES' | trans}}</h2>
                </div>
                <form id="form-fileSDE" name="form-fileSDE" method="post" action="{{ path('reportpreplanmx_uploadfileSDE',{'idproyectos':idproyectos,'idmodule':idmodule})}}" enctype="multipart/form-data">
                    <div class="modal-body">
                        <div class="row" style="height: 5px;"></div>
                        <div class="row">
                            <div class="col-md-12">
                                <div id="divLoadingModal" class="alert alert-warning" role="alert">

                                </div>
                            </div>
                        </div>
                        <div class="row" id="tableListSDE">
                            <div class="col-md-12 text-center">
                                <table class="table table-striped table-hover">
                                    <thead>
                                        <tr class="bg-primary">
                                            <th class="text-center" style="width: 20px" nowrap="nowrap">#</th>
                                            <th class="text-center">MDR</th>
                                            <th class="text-center">Nombre Archivo</th>
                                            <th class="text-center">Fecha</th>
                                            <th class="text-center">Descarga</th>
                                            <!-- <th class="text-center" style="width: 30px" nowrap="nowrap">Acción</th>-->
                                        </tr>
                                    </thead>
                                    <tbody id="tbodyTableListSDE" style="font-weight: normal">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="alert alert-success col-lg-8 text-center" style="display:none;" id="response-incidenciasSDE"></div>
                        <!-- <button id="saveFileSDE" type="submit" class="btn btn-default"><i class="fa fa-lg fa-save text-primary"></i></button>-->
                        <button id="closemodal" type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-lg fa-times text-danger"></i></button>
                    </div>
                </form>

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

{% endblock %}