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

{% endblock %}

{% block dashboard %}
    <style>


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


    </style>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script>

        $(function () {
            $('.datetimepicker1').datetimepicker();

            $.isLoading({
                text:       "Loading"


            });
            $("#btnSaveReport").click(function () {
                if($("#reportName").val() != ''){

                    $("#modalSaveReport").modal('hide');
                    customer = $("#customerSpan").text();
                    region = $("#customerSpan").text();
                    market = $("#customerSpan").text();
                    reportName = $("#reportName").val();
                    $.ajax({
                        type:'POST',
                        url:'{{ path('saveReportUSANew',{'idproyectos':204}) }}',
                        data:{$customer: customer, $region: region, $market:market, $reportName:reportName}
                    }).done(function (msj) {
                        swal ( "Good" ,  " Report has been created! " ,  "success" );

                    });

                }else{
                    swal ( "Oops" ,  "You have to insert Report Name!" ,  "error" );
                }
            });
            $("#deleteReport").click(function () {
                swal({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then(function () {
                    $.isLoading({
                        text:       "Loading"


                    });
                    $.ajax({
                        type:'POST',
                        url: '{{ path('deleteReportUSA',{'id':id}) }}',

                    }).done(function () {

                        $.isLoading("hide");

                        swal(
                                'Deleted!',
                                'Your Report has been deleted.',
                                'success'
                        )
                        location.href = "{{path('initialPage')}}";

                    })

                })
            });

            $("#region").change(function () {
                data ={};
                data['customer'] = $(this).val();

                $.getJSON('{{path('getDataByCustomerUSA')}}',data, function (data) {
                    regions = data.regions;
                    markets = data.markets;
                    opc = "<option value='ALL'>ALL REGION</option>"
                    for(i=0; i < regions.length; i++){
                        opc += "<option value='"+regions[i].EricssonRegion+"'>"+regions[i].EricssonRegion+"</option>"

                    }
                    $("#regions").empty();
                    $("#regions").change();
                    $("#regions").append(opc);
                    opc = "<option value='ALL'>ALL MARKET</option>"
                    for(i=0; i < markets.length; i++){
                        opc += "<option value='"+markets[i].EricssonMarket+"'>"+markets[i].EricssonMarket+"</option>"

                    }
                    $("#market").empty();
                    $("#market").change();
                    $("#market").append(opc);

                });



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



            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();
            var semana = ISO8601_week_no(new Date()) - 1;
            for(var i=semana;i>=1;i--){





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


            }

            $("#ano").change(function(){

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

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





            });

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

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

                    options.push( );

                    $('#mes').append($("<option/>", {
                        value: i + 1,
                        text: month[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() == 'range' ? $("#range").removeAttr('class','hide'):$("#range").addClass('hide');
            });


            getReporte2();

            $("#generar").click(function(){
                $.isLoading({
                    text:       "Loading"


                });
                getReporte2();

            });

        });

        function getReporte2(){
            var statusGeneral = [{"STATUS GENERAL": "SITIOS INSTALADOS", "SUPERVISION REMOTA": 0, "ASP": 0},
                {"STATUS GENERAL": "SITIOS EN PROCESO", "SUPERVISION REMOTA": 0, "ASP": 0},
                {"STATUS GENERAL": "SITIOS SUSPENDIDOS", "SUPERVISION REMOTA": 0, "ASP": 0}]
            data = {};

            var tipo  = $("#tipoBusqueda").val();

            switch (tipo){

                case 'semana':
                    data = {'semana': $("#semana").val()}
                    break;
                case 'mes':
                    data = {'mes' : $("#mes").val()}
                    break;
                case 'ano':

                    break;
                case 'range':
                    data = {'sinceDate': $("#sinceDate").val(),'toDate' : $("#toDate").val()};
                    break;
            };

            data['region'] = '{{ filtros.customer|e('js') }}';
            data['ano'] = $("#ano").val();
            data['regions'] = '{{ filtros.region|e('js') }}';
            data['market'] = '{{ filtros.market|e('js') }}';
            data['tipo'] = {{ filtros.tipo|e('js') }}
                    console.log(data);

            $.getJSON('{{path('getAvanceUSAByUser',{'idproyectos':idproyectos, 'idreporte':id})}}',data, function (data) {

                $("#tableResponse").css('display','');
                {% for list in reportList %}
                $("#{{ list.reporte }}, .{{ list.reporte }}").css('display','');
                {% if list.reporte == 'averageCompletedDiv'%}
                var SiteactivitiesDone = data.SiteactivitiesDone;
                $("#averaCompleteTxt").text(SiteactivitiesDone[0]['Total']);
                {% elseif(list.reporte == 'averageCycleTimeDiv') %}

                var averageCycleTime = data.averageCycleTime;
                $("#averageCycleTimeTxt").text(averageCycleTime[0]['tiempoAve']);
                {% elseif(list.reporte == 'averageSitesPauseDiv') %}

                var averageSitesPause = data.averageSitesPause;
                $("#averageSitesPauseTxt").text(averageSitesPause[0]['Total']);
                {% elseif(list.reporte == 'getChartCustomer') %}
                var avanceCustomers = data.avanceCustomers;


                if(avanceCustomers.length > 0){
                    dataVendor = [];
                    for(i=0; i < avanceCustomers.length; i++){
                        customer=[];
                        customer.push(avanceCustomers[i].customer);
                        customer.push(parseFloat(avanceCustomers[i].porcentaje));
                        dataVendor.push(customer);
                    }
                    console.log(dataVendor);


                    $('#getChartCustomer').highcharts({

                        chart: {
                            type: 'column',
                        },
                        title: {
                            text: 'Progress by Customers'
                        },
                        xAxis: {
                            type: 'category',
                            labels: {
                                rotation: -45,
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Verdana, sans-serif'
                                }
                            }
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: 'Progress (%)'
                            }
                        },
                        legend: {
                            enabled: false
                        },
                        tooltip: {
                            pointFormat: 'Progress: <b>{point.y:.1f} %</b>'
                        },
                        series: [{
                            name: 'Population',
                            data: dataVendor,
                            dataLabels: {
                                enabled: true,
                                rotation: -90,
                                color: '#FFFFFF',
                                align: 'right',
                                format: '{point.y:.1f} %', // one decimal
                                y: 10, // 10 pixels down from the top
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Verdana, sans-serif'
                                }
                            }
                        }]
                    });
                    //var chart5  = new Highcharts.Chart(quintaGraficaOpt);

                }else{ $('#getChartCustomer').text('');
                    $('#getChartCustomer').append('<div class="alert alert-warning" role="alert">NOT DATA</div>');}
                {% elseif(list.reporte == 'getChartRegion') %}
                var avanceRegion = data.avanceRegion;
                if(avanceRegion.length > 0){
                    dataRegion = [];
                    for(i=0; i < avanceRegion.length; i++){
                        customer=[];
                        customer.push(avanceRegion[i].EricssonRegion);
                        customer.push(parseFloat(avanceRegion[i].porcentaje));
                        dataRegion.push(customer);
                    }
                    console.log(dataRegion);


                    $('#getChartRegion').highcharts({

                        chart: {
                            type: 'column',
                        },
                        title: {
                            text: 'Progress by Region'
                        },
                        xAxis: {
                            type: 'category',
                            labels: {
                                rotation: -45,
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Verdana, sans-serif'
                                }
                            }
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: 'Progress (%)'
                            }
                        },
                        legend: {
                            enabled: false
                        },
                        tooltip: {
                            pointFormat: 'Progress: <b>{point.y:.1f} %</b>'
                        },
                        series: [{
                            name: 'Population',
                            data: dataRegion,
                            dataLabels: {
                                enabled: true,
                                rotation: -90,
                                color: '#FFFFFF',
                                align: 'right',
                                format: '{point.y:.1f} %', // one decimal
                                y: 10, // 10 pixels down from the top
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Verdana, sans-serif'
                                }
                            }
                        }]
                    });


                }else{  $('#getChartRegion').text('');
                    $('#getChartRegion').append('<div class="alert alert-warning" role="alert">NOT DATA</div>'); }
                {% elseif(list.reporte == 'progressByMarketDiv') %}
                var avanceMarket = data.avanceMarket;
                if(avanceMarket.length > 0){
                    dataRegion = [];
                    for(i=0; i < avanceMarket.length; i++){
                        customer=[];
                        customer.push(avanceMarket[i].EricssonMarket);
                        customer.push(parseFloat(avanceMarket[i].porcentaje));
                        dataRegion.push(customer);
                    }
                    console.log(dataRegion);


                    $('#getChartMarket').highcharts({

                        chart: {
                            type: 'bar',
                            height: 500,
                        },
                        title: {
                            text: 'Progress by Market'
                        },
                        xAxis: {
                            type: 'category',
                            labels: {
                                style: {
                                    fontSize: '10px',
                                    fontFamily: 'Verdana, sans-serif'
                                }
                            }
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: 'Progress (%)'
                            }, // one decimal
                            style: {
                                fontSize: '8px',
                                fontFamily: 'Verdana, sans-serif'
                            }
                        },
                        legend: {
                            enabled: false
                        },
                        tooltip: {
                            pointFormat: 'Progress: <b>{point.y:.1f} %</b>'
                        },
                        colors: ['#5cb85c', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
                            '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'],
                        series: [{
                            name: 'Population',
                            data: dataRegion,
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                align: 'left',
                                format: '{point.y:.1f} %', // one decimal
                                style: {
                                    fontSize: '10px',
                                    fontFamily: 'Verdana, sans-serif'
                                }
                            }
                        }]
                    });


                }else{  $('#getChartMarket').text('');
                    $('#getChartMarket').append('<div class="alert alert-warning" role="alert">NOT DATA</div>'); }

                {% elseif(list.reporte == 'progressByVendorsDiv') %}
                var avanceVendors = data.avanceVendors;
                if(avanceVendors.length > 0){
                    dataRegion = [];
                    for(i=0; i < avanceVendors.length; i++){
                        customer=[];
                        customer.push(avanceVendors[i].vendor);
                        customer.push(parseFloat(avanceVendors[i].porcentaje));
                        dataRegion.push(customer);
                    }
                    console.log(dataRegion);


                    $('#getChartVendors').highcharts({

                        chart: {
                            type: 'column',
                            height: 500,
                        },
                        title: {
                            text: 'Progress by Vendors'
                        },
                        xAxis: {
                            type: 'category',
                            labels: {
                                rotation: -45,
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Verdana, sans-serif'
                                }
                            }
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: 'Progress (%)'
                            }
                        },
                        legend: {
                            enabled: false
                        },
                        tooltip: {
                            pointFormat: 'Progress: <b>{point.y:.1f} %</b>'
                        },
                        series: [{
                            name: 'Population',
                            data: dataRegion,
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                format: '{point.y:.1f} %', // one decimal
                                style: {
                                    fontSize: '10px',
                                    fontFamily: 'Verdana, sans-serif'
                                }
                            }
                        }]
                    });


                }else{ $('#getChartVendors').text('');
                    $('#getChartVendors').append('<div class="alert alert-warning" role="alert">NOT DATA</div>'); }

                {% elseif(list.reporte == 'progressDiv') %}
                var avanceGeneral = data.avanceGeneral;

                if(avanceGeneral[0].porcentaje){
                    $('.progress-bar-total').css('width', avanceGeneral[0].porcentaje + '%').attr('aria-valuenow',avanceGeneral[0].porcentaje ).text(avanceGeneral[0].porcentaje + '%');

                }else{
                    $('.progress-bar-total').css('width', 0 + '%').attr('aria-valuenow',0 ).text(0 + '%');

                }

                {% elseif(list.reporte == 'progressSiteStatusDiv') %}


                var monitor = data.monitor;
                if(monitor.length>0){

                    var total = getTotal(monitor,[1]);
                }
                $("#primer_reporte").empty();
                if(monitor.length>0){
                    $("#primer_reporte").append(createTable(monitor,total,'TOTAL'));
                }



                var primeraGraficaOpt = {
                    chart: {
                        type: 'pie',
                        renderTo: 'primera_grafica',
                        options3d: {
                            enabled: true,
                            alpha: 45,
                            beta: 0
                        }
                    },
                    title: {
                        text: '%  SITE STATUS'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            depth: 35,
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }

                            }

                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Browser share',
                        data: [



                        ]
                    }]
                };



                var chart = new Highcharts.Chart(primeraGraficaOpt);

                serieData = [];

                for(var i =0; i<monitor.length;i++){
                    serieData.push(
                            {
                                name: monitor[i]['STATUS'],
                                y: parseInt(monitor[i]['TOTAL']),
                                sliced: true,
                                selected: true
                            }
                    )

                }
                chart.series[0].setData(serieData);

                {% elseif(list.reporte == 'remainingAfterDiv') %}
                var remainingAfter = data.remainingAfter;
                $("#remainingAfterTxt").text(remainingAfter[0]['Total']);
                {% elseif(list.reporte == 'siteByCrewLeadDiv') %}
                {% elseif(list.reporte == 'sitesCompletedDiv') %}
                var sitesComplete = data.siteComplete;
                $("#siteCompleteTxt").text(sitesComplete[0]['Total']);
                {% elseif(list.reporte == 'sitesnotStartedDiv') %}

                var sitesnotStarted = data.sitesnotStarted;
                $("#sitesnotStartedTxt").text(sitesnotStarted[0]['Total']);


                {% elseif(list.reporte == 'sitesProgressDiv') %}
                var siteInProgress = data.siteInProgress;
                $("#siteInProgressTxt").text(siteInProgress[0]['Total']);


                {% elseif(list.reporte == 'sitesSuspendedDiv') %}
                var sitesSuspend = data.sitesSuspend;
                $("#sitesSuspendTxt").text(sitesSuspend[0]['Total']);


                {% elseif(list.reporte == 'sitesVendorDiv') %}


                {% elseif(list.reporte == 'taskFailListDiv') %}



                var activitiesFail = data.activitiesFail;


                if(activitiesFail.length>0) {


                    var total1 = getTotal(activitiesFail, [2]);

                    $("#activitiesFailReport").append(createTable(activitiesFail,total1,'TOTAL'));
                }

                $("#activitiesFailReport").empty();
                $("#activitiesFailReport").append("<center><h1>TASK FAIL</h1></center>");




                {% elseif(list.reporte == 'totalFindigsDiv') %}
                var totalFindigs = data.totalFindigs;
                $("#totalFindigsTxt").text(totalFindigs[0]['Total']);


                {% elseif(list.reporte == 'totalFixedInSessionDiv') %}
                var totalFixedInSession = data.totalFixedInSession;
                $("#totalFixedInSessionTxt").text(totalFixedInSession[0]['Total']);


                {% elseif(list.reporte == 'averageFindingsDiv') %}
                var totalFindigs = data.totalFindigs;
                var siteInProgress = data.siteInProgress;


                if(isNaN(parseFloat(parseFloat(totalFindigs[0]['Total'])/parseFloat(siteInProgress[0]['Total'])))){
                    variable = 0;
                    //alert(variable)

                }else{
                    variable = parseFloat(parseFloat(totalFindigs[0]['Total'])/parseFloat(siteInProgress[0]['Total']));
                    //alert(variable)
                }
                $("#averageFindingsTxt").text((variable).toFixed(2));
                {% endif %}
                {% endfor %}












                $.isLoading("hide");

                return false;

            });

        }


        function createTable(monitor,total,nombreColTotal){
            var header = Object.keys(monitor[0]);
            var table = '<table  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++) {

                    table += "<td>" + monitor[i][header[j]]  + "</td>";

                }
                table += "</tr>";


                if(typeof total !== "undefined" && total != 'NaN' ) {

                    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)
        {
            var total = new Array();
            /*total[1] = 0;
             total[2] = 0;*/
            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;
                    }

                    total[key[j]] +=  parseInt(valor[i][header[key[j]]]);

                }


            }
            return total;
        }



    </script>

    <div class="container">
        <h1><center>{{ filtros.reportName }}
                <br><br>
                <div class="col-lg-4"><label>CUSTOMER :</label>{{ filtros.customer }}</div>
                <div class="col-lg-4"><label>REGION :</label>{{ filtros.region }}</div>
                <div class="col-lg-4"><label>MARKET :</label>{{ filtros.market }}</div>
            </center></h1>
        <div class="row">
            <div class="col-lg-2" id="parametros">

                <select class="form-control" id="ano">

                </select>
            </div>
            <div class="col-lg-2" id="parametros">

                <select class="form-control" id="tipoBusqueda">
                    <option value=""> {{'Seleccione Fecha' | trans}}</option>
                    <option value="range">RANGES</option>
                    <option value="mes">{{'monitoriii.month' | trans}}</option>
                    <option value="semana">{{'monitor.week' | trans}}</option>
                    <option value="ano">{{'monitoriii.year' | trans}}</option>
                </select>
            </div>
            <div class="col-lg-8" id="parametros" >
                <select class="hide" id="mes">



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



                </select>
                <div id="range" class="hide">
                    <div class="col-lg-1"><label>SINCE</label></div>
                    <div class="col-lg-5"><input class="form-control datetimepicker1" id="sinceDate" data-date-format="YYYY-MM-DD"></div>
                    <div class="col-lg-1"><label>TO</label></div>
                    <div class="col-lg-5"><input class="form-control datetimepicker1" id="toDate" data-date-format="YYYY-MM-DD"></div>

                </div>
            </div>


        </div>
        <div class="row" style="margin-top: 10px">

            <div class="col-lg-4 col-lg-offset-4" id="parametros" >
                <button class="btn btn-primary" id="generar">{{'monitoriii.generate' | trans}}</button>
                <button class="btn btn-danger" id="deleteReport">DELETE REPORT</button>
            </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>


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

                <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">SAVE REPORT</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <input placeholder="INSERT REPORT NAME" class="form-control" id="reportName">
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-lg-4 table-bordered">
                                <label>CUSTOMER</label>
                                <span class="col-lg-12" id="customerSpan"></span>

                            </div>
                            <div class="col-lg-4 table-bordered">
                                <label>REGION</label>
                                <span class="col-lg-12" id="regionSpan"></span>

                            </div>
                            <div class="col-lg-4 table-bordered">
                                <label>MARKET</label>
                                <span class="col-lg-12" id="marketSpan"></span>

                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">{{'ticketDetail.cancel' | trans | upper}}</button>
                        <button type="button" class="btn btn-info" id="btnSaveReport">SAVE REPORT</button>
                    </div>
                </div>
            </div>
        </div>





        <div class="row" style="margin-top: 30px; " id="table">
            <table class="table table-bordered table-hover table-striped table-responsive" id="tableResponse" style="display:none">
                <thead class="btn-info">

                <th  class='text-center'>Description</th>
                <th  class='text-center'>Total</th>
                </thead>
                <tbody>
                <tr id="sitesCompletedDiv" style="display:none">
                    <td>Sites Completed</td>
                    <td id="siteCompleteTxt"></td>
                </tr>
                <tr id="sitesProgressDiv" style="display:none">
                    <td>Sites in progress</td>
                    <td id="siteInProgressTxt"></td>
                </tr>
                <tr id="averageCompletedDiv" style="display:none">
                    <td>Average % complete</td>
                    <td id="averaCompleteTxt"></td>
                </tr>
                <tr id="totalFindigsDiv" style="display:none">
                    <td>Total Findings</td>
                    <td id="totalFindigsTxt"></td>
                </tr>
                <tr id="totalFixedInSessionDiv" style="display:none">
                    <td>Total Fixed in Session</td>
                    <td id="totalFixedInSessionTxt"></td>
                </tr>
                <tr id="remainingAfterDiv" style="display:none">
                    <td>Total remaining after (re-visit)</td>
                    <td id="remainingAfterTxt"></td>
                </tr>
                <tr id="averageFindingsDiv" style="display:none">
                    <td>Average Findings per site </td>
                    <td id="averageFindingsTxt"></td>
                </tr>
                <tr id="averageCycleTimeDiv" style="display:none">
                    <td>Average Cycle time</td>
                    <td id="averageCycleTimeTxt"></td>
                </tr>
                <tr id="averageSitesPauseDiv" style="display:none">
                    <td>Sites Paused</td>
                    <td id="averageSitesPauseTxt"></td>
                </tr>
                <tr id="sitesSuspendedDiv" style="display:none">
                    <td>Sites Suspended</td>
                    <td id="sitesSuspendTxt"></td>
                </tr>
                <tr id="sitesnotStartedDiv" style="display:none">
                    <td>Sites not started</td>
                    <td id="sitesnotStartedTxt"></td>
                </tr>
                </tbody>

            </table>
        </div>
        <div class="row" style="margin-top: 30px; display:none" id="progressDiv">




            <div class="panel panel-primary">
                <div class="panel-heading">{{'PROGRESS' | trans}}</div>
                <div class="panel-body" id="avances">
                    <div class="progress">
                        <div class="progress-bar progress-bar-success progress-bar-total" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                            0
                            <span class="sr-only">0% Complete (success)</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 30px;">
            <div class="col-lg-6 getChartCustomer" style=" display:none" id="getChartCustomer"></div>
            <div class="col-lg-6 getChartRegion" style=" display:none" id="getChartRegion"></div>

        </div>


        <div class="row  progressByMarketDiv" style="margin-top: 30px;display:none" id="progressByMarketDiv">
            <div class="col-lg-12" id="getChartMarket"></div>

        </div>
        <div class="row" style="margin-top: 30px;display:none" id="progressByVendorsDiv">
            <div class="col-lg-12" id="getChartVendors" ></div>

        </div>

        <div class="row " id="progressSiteStatusDiv" style="display:none">



            <div class="col-lg-6" id="primer_reporte" style="margin-top: 10%">

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

            </div>
        </div>

        <div class="row" style="margin-top: 30px;display:none" id="taskFailListDiv">
            <div class="col-lg-6 col-lg-offset-3" id="activitiesFailReport" ></div>
            <div class="col-lg-6" id="ActivitiesFaildChart" ></div>

        </div>


    </div>
{% endblock %}