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

{% endblock %}

{% block dashboard %}
    <style>

        .modal.modal-wide .modal-dialog {
            width: 90%;
        }
        .modal-wide .modal-body {
            overflow-y: auto;
        }


        .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;
        }
        /* Hiding the checkbox, but allowing it to be focused */
        .badgebox
        {
            opacity: 0;
        }

        .badgebox + .badge
        {
            /* Move the check mark away when unchecked */
            text-indent: -999999px;
            /* Makes the badge's width stay the same checked and unchecked */
            width: 27px;
        }

        .badgebox:focus + .badge
        {
            /* Set something to make the badge looks focused */
            /* This really depends on the application, in my case it was: */

            /* Adding a light border */
            box-shadow: inset 0px 0px 5px;
            /* Taking the difference out of the padding */
        }

        .badgebox:checked + .badge
        {
            /* Move the check mark back when checked */
            text-indent: 0;
        }


    </style>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script>
function showNotify(){
    $(".rowNotify").css('display', '');
}
function hideNotify(){
    $(".rowNotify").css('display', 'none');

}
        $(function () {
          /*  var element = $("#result"); // global variable
            var getCanvas ;
            html2canvas(document.getElementById("result")).then(function(canvas) {
                // document.body.appendChild(canvas);
                getCanvas = canvas;
                var imgageData = getCanvas.toDataURL("image/png");

                //document.location.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");


                var link = document.createElement('a');
                link.download = "test.png";
                link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");;
                //link.click();
                // Now browser starts downloading it instead of just showing it
                console.log(imgageData);
                var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
                $("#pdfButton").attr("download", "dasjboard.png").attr("href", newData);

                location.href = newData;
            });*/
          /*  $("#pdfButton").on('click', function () {

                html2canvas(document.getElementById("result")).then(function(canvas) {
                    // document.body.appendChild(canvas);
                    var getCanvas = canvas;
                    var imgageData = getCanvas.toDataURL("image/png");

                    //document.location.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");


                    var link = document.createElement('a');
                    link.download = "test.png";
                    link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");;
                    //link.click();
                    // Now browser starts downloading it instead of just showing it
                     console.log(imgageData);
                     var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
                     $("#pdfButton").attr("download", "dasjboard.png").attr("href", newData);

                     //location.href = newData;
                });*/

                /*
                html2canvas(document.getElementById("result")).then(function(canvas) {
                    // document.body.appendChild(canvas);
                    getCanvas = canvas;
                    var imgageData = getCanvas.toDataURL("image/png");
                    // Now browser starts downloading it instead of just showing it
                    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
                    $("#pdfButton").attr("download", "dasjboard.png").attr("href", newData);
                });


            });*/


            $("#timeToNotify").datetimepicker();
           /* $(":checkbox").click(function () {


                if ($(this).attr('div') != 'VSS' && $(this).attr('div') != 'VPW') {
                   // alert($(this).attr('div') );
                    if($(this).is(':checked')) {
                            $("#" + $(this).attr('div') + ",." + $(this).attr('div')).css('display', '');

                    }else {
                        $("#" + $(this).attr('div') + ",." + $(this).attr('div')).css('display', 'none');
                    }
                }else {
                    if ($('#vss').is(':checked') && $('#vpw').is(':checked')) {
                        $("#btnVPW, #btnVSS").addClass('active');
                        $("#btnVPW, #btnVSS").val(1);
                        $(".VSS, .VPW").css('display', '');
                        $(".VSS input, .VPW input").attr('checked', true);

                    } else if (!$('#vss').is(':checked') && $('#vpw').is(':checked')) {
                        $("#btnVSS").removeClass('active');
                        $("#btnVPW").addClass('active');
                        $("#btnVSS").val(0);
                        $("#btnVPW").val(1);
                        $(".VSS").css('display', 'none');
                        $(".VSS input").attr('checked', false);
                        $(".VPW").css('display', '');
                        $(".VPW input").attr('checked', true);
                    } else if ($('#vss').is(':checked') && !$('#vpw').is(':checked')) {
                        $("#btnVSS").addClass('active');
                        $("#btnVPW").removeClass('active');
                        $("#btnVSS").val(1);
                        $("#btnVPW").val(0);
                        $(".VPW").css('display', 'none');
                        $(".VPW input").attr('checked', false);
                        $(".VSS").css('display', '');
                        $(".VSS input").attr('checked', true);
                    } else {
                        $("#btnVPW, #btnVSS").removeClass('active');
                        $("#btnVPW, #btnVSS").val(0);
                        $(".VSS, .VPW").css('display', 'none');
                        $(".VSS input, .VPW input").attr('checked', false);

                    }
                }

            });*/
            $("#btnSaveReport").click(function () {
                data = {};
                data['region'] = $("#region").val();
                data['ano'] = $("#ano1").val();
                data['regions'] = $("#regions").val();
                data['market'] = $("#market").val();
                data['vendors'] = $("#vendorsSelect").val();
                report = new Array();
                $("#tableResponse").css('display','none');
                data['tipo'] = 0;

                if($("#vpw").is(':checked') && $("#vss").is(':checked')){
                    data['tipo'] =  3;

                }else if(!$("#vpw").is(':checked') && $("#vss").is(':checked')){
                    data['tipo'] =  1;

                }else if($("#vpw").is(':checked') && !$("#vss").is(':checked')){
                    data['tipo'] =  2;

                }else if(!$("#vpw").is(':checked') && !$("#vss").is(':checked')){
                    swal ( "Oops" ,  "You have to choose a type at least VPW or VSS" ,  "error" );
                    return false;

                }

                if($("#sitesCompletedCheck").is(':checked')){
                    report.push($("#sitesCompletedCheck").attr('div'));

                }

                if($("#sitesProgressCheck").is(':checked')){
                    report.push($("#sitesProgressCheck").attr('div'));

                }

                if($("#averageCompletedCheck").is(':checked')){
                    report.push($("#averageCompletedCheck").attr('div'));

                }

                if($("#totalFindigsCheck").is(':checked')){
                    report.push($("#totalFindigsCheck").attr('div'));

                }

                if($("#totalFixedInSessionCheck").is(':checked')){
                    report.push($("#totalFixedInSessionCheck").attr('div'));

                }


                if($("#remainingAfterCheck").is(':checked')){
                    report.push($("#remainingAfterCheck").attr('div'));

                }

                if($("#averageFindingsCheck").is(':checked')){
                    report.push($("#averageFindingsCheck").attr('div'));

                }

                if($("#averageCycleTimeCheck").is(':checked')){
                    report.push($("#averageCycleTimeCheck").attr('div'));

                }

                if($("#averageSitesPauseCheck").is(':checked')){
                    report.push($("#averageSitesPauseCheck").attr('div'));

                }
                if($("#sitesSuspendedCheck").is(':checked')){
                    report.push($("#sitesSuspendedCheck").attr('div'));
                }

                if($("#sitesnotStartedCheck").is(':checked')){
                    report.push($("#sitesnotStartedCheck").attr('div'));

                }

                if($("#sitesVendorCheck").is(':checked')){
                    report.push($("#sitesVendorCheck").attr('div'));

                }
                if($("#siteByCrewLeadCheck").is(':checked')){
                    report.push($("#siteByCrewLeadCheck").attr('div'));

                }
                if($("#progressCheck").is(':checked')){
                    report.push($("#progressCheck").attr('div'));
                }

                if($("#progressByCustomerCheck").is(':checked')){
                    report.push($("#progressByCustomerCheck").attr('div'));

                }


                if($("#progressByRegionCheck").is(':checked')){
                    report.push($("#progressByRegionCheck").attr('div'));

                }


                if($("#progressByMarketCheck").is(':checked')){
                    report.push($("#progressByMarketCheck").attr('div'));

                }
                if($("#progressByVendorsCheck").is(':checked')){
                    report.push($("#progressByVendorsCheck").attr('div'));

                }


                if($("#progressSiteStatusCheck").is(':checked')){
                    report.push($("#progressSiteStatusCheck").attr('div'));

                }


                if($("#taskFailListCheck").is(':checked')){
                    report.push($("#taskFailListCheck").attr('div'));
                }

                if($("#reportName").val() != ''){

                    customer = $("#customerSpan").text();
                    region = $("#regionSpan").text();
                    market = $("#marketSpan").text();
                    reportName = $("#reportName").val();
                    monday = 0;
                    tuesday = 0;
                    wednesday = 0;
                    thursday = 0;
                    friday =0;
                    saturday = 0;
                    sunday = 0;


                    if($("#monday").is(':checked')){
                        monday = 1;
                    }
                    if($("#tuesday").is(':checked')){
                        tuesday = 1;
                    }
                    if($("#wednesday").is(':checked')){
                        wednesday = 1;
                    }
                    if($("#thursday").is(':checked')){
                        thursday = 1;
                    }
                    if($("#friday").is(':checked')){
                        friday = 1;
                    }
                    if($("#saturday").is(':checked')){
                        saturday = 1;
                    }
                    if($("#sunday").is(':checked')){
                        sunday = 1;
                    }
                    timeToNotify = $("#timeToNotify").val();
                    toEmail = $("#toEmail").val();
                    ccEmail = $("#ccEmail").val();
                    sendEmail = $('input[name=options]:checked').val();
                    if(sendEmail == 'YES'){
                        if(timeToNotify==''){

                            swal ( "Oops" ,  "You have to insert notification time" ,  "error" );
                            return false;
                        }
                        if(toEmail==''){

                            swal ( "Oops" ,  "You have to insert who to notify" ,  "error" );
                            return false;
                        }
                    }


                    $("#modalSaveReport").modal('hide');
                    $.ajax({
                        type:'POST',
                        url:'{{ path('saveReportUSANew',{'idproyectos':204}) }}',
                        data:{$customer: customer, $region: region, $market:market, $reportName:reportName,
                            $report:report, $toEmail:toEmail, $data:data, $sendEmail:sendEmail,
                              $timeToNotify:timeToNotify,$sendEmail:sendEmail, $ccEmail:ccEmail,
                              $sunday:sunday, $saturday: saturday, $friday:friday, $thursday:thursday, $wednesday: wednesday, $tuesday:tuesday, $monday:monday
                        }
                    }).done(function (msj) {
                        swal ( "Good" ,  "Report has been created!" ,  "success" );
                    });

                }else{
                    swal ( "Oops" ,  "You have to insert Report Name!" ,  "error" );
                }
            });
            $("#saveReport").click(function () {
                $("#customerSpan").text($("#region").val());
                $("#regionSpan").text($("#regions").val());
                $("#marketSpan").text($("#market").val());
                data = {};



                li = "";
                $("#tableResponse").css('display','none');

                if($("#sitesCompletedCheck").is(':checked')){
                    data['sitesCompletedCheck'] = 1;
                    li += "<li class='list-group-item'>Site completed</li>"

                }else{
                    data['sitesCompletedCheck'] = 0;
                    $("#Check"+$("#sitesCompletedCheck").attr('div')+",.Check"+$("#sitesCompletedCheck").attr('div')).css('display','none');

                }

                if($("#sitesProgressCheck").is(':checked')){
                    data['sitesProgressCheck'] = 1;
                    li += "<li class='list-group-item'>Site progress</li>"
                    $("#tableResponse").css('display','');
                    $("#Check"+$("#sitesProgressCheck").attr('div')+",.Check"+$("#sitesProgressCheck").attr('div')).css('display','');

                }else{
                    data['sitesProgressCheck'] = 0;
                    $("#Check"+$("#sitesProgressCheck").attr('div')+",.Check"+$("#sitesProgressCheck").attr('div')).css('display','none');

                }

                if($("#averageCompletedCheck").is(':checked')){
                    data['averageCompletedCheck'] = 1;
                    li += "<li class='list-group-item'>Avarage completed</li>";
                    $("#tableResponse").css('display','');
                    $("#Check"+$("#averageCompletedCheck").attr('div')+",.Check"+$("#averageCompletedCheck").attr('div')).css('display','');

                }else{
                    data['averageCompletedCheck'] = 0;
                    $("#Check"+$("#averageCompletedCheck").attr('div')+",.Check"+$("#averageCompletedCheck").attr('div')).css('display','none');

                }

                if($("#totalFindigsCheck").is(':checked')){
                    data['totalFindigsCheck'] = 1;
                    li += "<li class='list-group-item'>Total Findings Check</li>";
                    $("#tableResponse").css('display','');
                    $("#Check"+$("#totalFindigsCheck").attr('div')+",.Check"+$("#totalFindigsCheck").attr('div')).css('display','');

                }else{
                    data['totalFindigsCheck'] = 0;
                    $("#Check"+$("#totalFindigsCheck").attr('div')+",.Check"+$("#totalFindigsCheck").attr('div')).css('display','none');

                }



                if($("#remainingAfterCheck").is(':checked')){
                    data['remainingAfterCheck'] = 1;
                    li += "<li class='list-group-item'>Total remaining after (re-visit)</li>";
                    $("#tableResponse").css('display','');
                    $("#Check"+$("#remainingAfterCheck").attr('div')+",.Check"+$("#remainingAfterCheck").attr('div')).css('display','');

                }else{
                    data['totalFindigsCheck'] = 0;
                    $("#Check"+$("#totalFindigsCheck").attr('div')+",.Check"+$("#totalFindigsCheck").attr('div')).css('display','none');

                }

                if($("#totalFixedInSessionCheck").is(':checked')){
                    data['totalFixedInSessionCheck'] = 1;
                    li += "<li class='list-group-item'>Total Fixed in Session</li>";
                    $("#tableResponse").css('display','');
                    $("#Check"+$("#totalFixedInSessionCheck").attr('div')+",.Check"+$("#totalFixedInSessionCheck").attr('div')).css('display','');

                }else{
                    data['totalFixedInSessionCheck'] = 0;
                    $("#Check"+$("#totalFixedInSessionCheck").attr('div')+",.Check"+$("#totalFixedInSessionCheck").attr('div')).css('display','none');

                }

                if($("#averageFindingsCheck").is(':checked')){
                    data['averageFindingsCheck'] = 1;
                    li += "<li class='list-group-item'>Average Findings Check</li>";
                    $("#tableResponse").css('display','');
                    $("#Check"+$("#averageFindingsCheck").attr('div')+",.Check"+$("#averageFindingsCheck").attr('div')).css('display','');

                }else{
                    data['averageFindingsCheck'] = 0;
                    $("#Check"+$("#averageFindingsCheck").attr('div')+",.Check"+$("#averageFindingsCheck").attr('div')).css('display','none');

                }

                if($("#averageCycleTimeCheck").is(':checked')){
                    data['averageCycleTimeCheck'] = 1;
                    li += "<li class='list-group-item'>Average Cycle Time Check</li>";
                    $("#tableResponse").css('display','');
                    $("#Check"+$("#averageCycleTimeCheck").attr('div')+",.Check"+$("#averageCycleTimeCheck").attr('div')).css('display','');

                }else{
                    data['averageCycleTimeCheck'] = 0;
                    $("#Check"+$("#averageCycleTimeCheck").attr('div')+",.Check"+$("#averageCycleTimeCheck").attr('div')).css('display','none');

                }

                if($("#averageSitesPauseCheck").is(':checked')){
                    data['averageSitesPauseCheck'] = 1;
                    li += "<li class='list-group-item'>Average Sites Pause Check</li>";
                    $("#tableResponse").css('display','');
                    $("#Check"+$("#averageSitesPauseCheck").attr('div')+",.Check"+$("#averageSitesPauseCheck").attr('div')).css('display','');

                }else{
                    data['averageSitesPauseCheck'] = 0;
                    $("#Check"+$("#averageSitesPauseCheck").attr('div')+",.Check"+$("#averageSitesPauseCheck").attr('div')).css('display','none');

                }

                if($("#sitesnotStartedCheck").is(':checked')){
                    data['sitesnotStartedCheck'] = 1;
                    li += "<li class='list-group-item'>Sites Not Started Check</li>";
                    $("#tableResponse").css('display','');
                    $("#Check"+$("#sitesnotStartedCheck").attr('div')+",.Check"+$("#sitesnotStartedCheck").attr('div')).css('display','');

                }else{
                    data['sitesnotStartedCheck'] = 0;
                    $("#Check"+$("#sitesnotStartedCheck").attr('div')+",.Check"+$("#sitesnotStartedCheck").attr('div')).css('display','none');

                }

                if($("#sitesVendorCheck").is(':checked')){
                    data['sitesVendorCheck'] = 1;
                    li += "<li class='list-group-item'>Sites Vendors Check</li>";
                    $("#Check"+$("#sitesVendorCheck").attr('div')+",.Check"+$("#sitesVendorCheck").attr('div')).css('display','');

                }else{
                    data['sitesVendorCheck'] = 0;
                    $("#Check"+$("#sitesVendorCheck").attr('div')+",.Check"+$("#sitesVendorCheck").attr('div')).css('display','none');

                }



                if($("#siteByCrewLeadCheck").is(':checked')){
                    data['siteByCrewLeadCheck'] = 1;
                    li += "<li class='list-group-item'>Sites By Crew Check</li>";
                    $("#Check"+$("#siteByCrewLeadCheck").attr('div')+",.Check"+$("#siteByCrewLeadCheck").attr('div')).css('display','');

                }else{
                    data['siteByCrewLeadCheck'] = 0;
                    $("#Check"+$("#siteByCrewLeadCheck").attr('div')+",.Check"+$("#siteByCrewLeadCheck").attr('div')).css('display','none');

                }



                if($("#progressCheck").is(':checked')){
                    data['progressCheck'] = 1;
                    li += "<li class='list-group-item'>Progress Check</li>";
                    $("#Check"+$("#progressCheck").attr('div')+",.Check"+$("#progressCheck").attr('div')).css('display','');
                }else{
                    data['progressCheck'] = 0;
                    $("#Check"+$("#progressCheck").attr('div')+",.Check"+$("#progressCheck").attr('div')).css('display','none');

                }



                if($("#progressByCustomerCheck").is(':checked')){
                    data['progressByCustomerCheck'] = 1;
                    li += "<li class='list-group-item'>Progress By Customer Check</li>";
                    $("#Check"+$("#progressByCustomerCheck").attr('div')+",.Check"+$("#progressByCustomerCheck").attr('div')).css('display','');

                }else{
                    data['progressByCustomerCheck'] = 0;
                    $("#Check"+$("#progressByCustomerCheck").attr('div')+",.Check"+$("#progressByCustomerCheck").attr('div')).css('display','none');

                }


                if($("#progressByRegionCheck").is(':checked')){
                    data['progressByRegionCheck'] = 1;
                    li += "<li class='list-group-item'>Progress By Region Check</li>";
                    $("#Check"+$("#progressByRegionCheck").attr('div')+",.Check"+$("#progressByRegionCheck").attr('div')).css('display','');

                }else{
                    data['progressByRegionCheck'] = 0;
                    $("#Check"+$("#progressByRegionCheck").attr('div')+",.Check"+$("#progressByRegionCheck").attr('div')).css('display','none');

                }


                if($("#progressByMarketCheck").is(':checked')){
                    data['progressByMarketCheck'] = 1;
                    li += "<li class='list-group-item'>Progress By Market Check</li>";
                    $("#Check"+$("#progressByMarketCheck").attr('div')+",.Check"+$("#progressByMarketCheck").attr('div')).css('display','');

                }else{
                    data['progressByMarketCheck'] = 0;
                    $("#Check"+$("#progressByMarketCheck").attr('div')+",.Check"+$("#progressByMarketCheck").attr('div')).css('display','none');

                }


                if($("#progressSiteStatusCheck").is(':checked')){
                    data['progressSiteStatusCheck'] = 1;
                    li += "<li class='list-group-item'>Progress Site Status Check</li>";
                    $("#Check"+$("#progressSiteStatusCheck").attr('div')+",.Check"+$("#progressSiteStatusCheck").attr('div')).css('display','');

                }else{
                    data['progressSiteStatusCheck'] = 0;
                    $("#Check"+$("#progressSiteStatusCheck").attr('div')+",.Check"+$("#progressSiteStatusCheck").attr('div')).css('display','none');

                }


                if($("#taskFailListCheck").is(':checked')){
                    data['taskFailListCheck'] = 1;
                    li += "<li class='list-group-item'>Task Fail List Check</li>";
                    $("#Check"+$("#taskFailListCheck").attr('div')+",.Check"+$("#taskFailListCheck").attr('div')).css('display','');

                }else{
                    data['taskFailListCheck'] = 0;
                    $("#Check"+$("#taskFailListCheck").attr('div')+",.Check"+$("#taskFailListCheck").attr('div')).css('display','none');

                }


                if($("#progressSiteStatusCheck").is(':checked')){
                    data['progressSiteStatusCheck'] = 1;
                    li += "<li class='list-group-item'>Site Status Report Check</li>";
                    $("#Check"+$("#progressSiteStatusCheck").attr('div')+",.Check"+$("#progressSiteStatusCheck").attr('div')).css('display','');
                }else{
                    data['progressSiteStatusCheck'] = 0;
                    $("#Check"+$("#progressSiteStatusCheck").attr('div')+",.Check"+$("#progressSiteStatusCheck").attr('div')).css('display','none');

                }
                if($("#TaskFindingsCheck").is(':checked')){
                    data['progressSiteStatusCheck'] = 1;
                    li += "<li class='list-group-item'>Findings Task Report Check</li>";
                    $("#Check"+$("#progressSiteStatusCheck").attr('div')+",.Check"+$("#progressSiteStatusCheck").attr('div')).css('display','');
                }else{
                    data['progressSiteStatusCheck'] = 0;
                    $("#Check"+$("#progressSiteStatusCheck").attr('div')+",.Check"+$("#progressSiteStatusCheck").attr('div')).css('display','none');

                }
                $("#ulReportToSave").empty();
                $("#ulReportToSave").append(li);


















                $("#modalSaveReport").modal();
            });

            $("#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=year; starYear <= i;i-- )
            {
                $('#ano1').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
                }));


            }

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

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



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


                });
                getReportes();

            });

        });

        function  getReportes(){

            data = {};
            data['semana'] = "";
            data['mes'] = "";
            data['sinceDate'] = "";
            data['toDate'] = "";

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

            switch (tipo){

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

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

            data['region'] = $("#region").val();
            data['ano'] = $("#ano1").val();
            data['regions'] = $("#regions").val();
            data['market'] = $("#market").val();
            data['vendors'] = $("#vendorsSelect").val();

            if($("#vpw").is(":checked")){
                data['vpw']  = 1;
            }else{
                data['vpw']  = 0;
            }
            if($("#vss").is(":checked")){
                data['vss']  = 1;
            }else{
                data['vss']  = 0;
            }


            if($("#progressSiteStatusCheck").is(':checked')){
                data['progressSiteStatusCheck'] = 1;
                $("#"+$("#progressSiteStatusCheck").attr('div')+",."+$("#progressSiteStatusCheck").attr('div')).css('display','');
                $("#"+$("#progressSiteStatusCheck").attr('div')+",."+$("#progressSiteStatusCheck").attr('div')).empty();
                $("#progressSiteStatusDiv").load('{{ path('statusDallasReport') }}',{$data:data});
            }else{
                data['progressSiteStatusCheck'] = 0;
                $("#"+$("#TaskFindingsCheck").attr('div')+",."+$("#TaskFindingsCheck").attr('div')).empty();
                $("#"+$("#progressSiteStatusCheck").attr('div')+",."+$("#progressSiteStatusCheck").attr('div')).css('display','none');

            }
            if($("#TaskFindingsCheck").is(':checked')){
                data['TaskFindingsCheck'] = 1;
                $("#"+$("#TaskFindingsCheck").attr('div')+",."+$("#TaskFindingsCheck").attr('div')).css('display','');
                $("#"+$("#TaskFindingsCheck").attr('div')+",."+$("#TaskFindingsCheck").attr('div')).empty();
                $("#TaskFindings").load('{{ path('taskFindingsReport') }}',{$data:data});
            }else{
                data['TaskFindingsCheck'] = 0;
                $("#"+$("#TaskFindingsCheck").attr('div')+",."+$("#TaskFindingsCheck").attr('div')).empty();
                $("#"+$("#TaskFindingsCheck").attr('div')+",."+$("#TaskFindingsCheck").attr('div')).css('display','none');

            }
                data['progressCheck'] = 1;
            $("#progressDiv").css('display','');
                $("#"+$("#progressCheck").attr('div')+",."+$("#progressCheck").attr('div')).css('display','');
                $.getJSON('{{path('getAvanceUSA')}}',data, function (data) {


                    $.isLoading("hide");

                    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 + '%');

                    }
                });


            if($("#progressByMarketCheck").is(':checked')){
                data['progressByMarketCheck'] = 1;
                $("#"+$("#progressByMarketCheck").attr('div')+",."+$("#progressByMarketCheck").attr('div')).css('display','');

                $.getJSON('{{path('getProgressByMarket')}}',data, function (data) {

                    var avanceMarket = data.avanceMarket;


                    if(avanceMarket.length > 0){
                        dataRegion = [];
                        dataRegion2 = [];
                        for(i=0; i < avanceMarket.length; i++){
                            customer=[];
                            customer.push(avanceMarket[i].EricssonMarket);
                            customer.push(parseFloat(avanceMarket[i].porcentaje));
                            customer2=[];
                            customer2.push(avanceMarket[i].EricssonMarket);
                            customer2.push(parseFloat(avanceMarket[i].total));
                            dataRegion.push(customer);
                            dataRegion2.push(customer2);
                        }
                        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'
                                }
                            }, { // Secondary yAxis
                                title: {
                                    text: 'Sites Amount',
                                    style: {
                                        color: Highcharts.getOptions().colors[0]
                                    }
                                },
                                labels: {
                                    format: '{value}',
                                    style: {
                                        color: Highcharts.getOptions().colors[0]
                                    }
                                },
                                opposite: true
                            }],
                            legend: {
                                enabled: false
                            },
                            colors: ['#5cb85c', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
                                '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'],
                            series: [{
                                name: 'Procentage',
                                data: dataRegion,
                                dataLabels: {
                                    enabled: true,
                                    color: '#000000',
                                    align: 'left',
                                    format: '{point.y:.1f} %', // one decimal
                                    style: {
                                        fontSize: '10px',
                                        fontFamily: 'Verdana, sans-serif'
                                    }
                                }
                            },
                                { type: 'spline',
                                name: 'Total Sites',
                                    yAxis: 1,
                                data: dataRegion2,
                                    dataLabels: {
                                        enabled: true,
                                        color: '#000000',
                                        align: 'left',
                                        format: '{point.y}', // one decimal
                                        style: {
                                            fontSize: '10px',
                                            fontFamily: 'Verdana, sans-serif'
                                        }
                                    },
                                marker: {
                                    enabled: true,
                                    color: '#000000',
                                    align: 'left',
                                    format: '{point.y}', // one decimal
                                    style: {
                                        fontSize: '10px',
                                        fontFamily: 'Verdana, sans-serif'
                                    }
                                }

                            }
                            ]
                        });


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


                });

            }else{
                data['progressByMarketCheck'] = 0;
                $("#"+$("#progressByMarketCheck").attr('div')+",."+$("#progressByMarketCheck").attr('div')).css('display','none');

            }


            if($("#progressByRegionCheck").is(':checked')){
                data['progressByMarketCheck'] = 1;
                $("#"+$("#progressByMarketCheck").attr('div')+",."+$("#progressByMarketCheck").attr('div')).css('display','');

                $.getJSON('{{path('getProgressByRegion')}}',data, function (data) {

                    var avanceRegion = data.avanceRegion;



                    if(avanceRegion.length > 0){
                        dataRegion = [];
                        dataRegion2 = [];
                        for(i=0; i < avanceRegion.length; i++){
                            customer=[];
                            customer.push(avanceRegion[i].EricssonRegion);
                            customer.push(parseFloat(avanceRegion[i].porcentaje));
                            customer2=[];
                            customer2.push(avanceRegion[i].EricssonRegion);
                            customer2.push(parseFloat(avanceRegion[i].total));
                            dataRegion.push(customer);
                            dataRegion2.push(customer2);
                        }
                        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 (%)'
                                }
                            }, { // Secondary yAxis
                                title: {
                                    text: 'Sites Amount',
                                    style: {
                                        color: Highcharts.getOptions().colors[0]
                                    }
                                },
                                labels: {
                                    format: '{value}',
                                    style: {
                                        color: Highcharts.getOptions().colors[0]
                                    }
                                },
                                opposite: true
                            }],
                            legend: {
                                enabled: false
                            },
                            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'
                                    }
                                }
                            },
                                { type: 'line',
                                    name: 'Total Sites',
                                    yAxis: 1,
                                    data: dataRegion2,
                                    dataLabels: {
                                        enabled: true,
                                        color: '#000000',
                                        align: 'left'
                                    },
                                    marker: {
                                        enabled: true,
                                        color: '#000000',
                                        align: 'left',
                                        format: '{point.y}', // one decimal
                                        style: {
                                            fontSize: '10px',
                                            fontFamily: 'Verdana, sans-serif'
                                        }
                                    }

                                }]
                        });


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


                });

            }else{
                data['progressByMarketCheck'] = 0;
                $("#"+$("#progressByMarketCheck").attr('div')+",."+$("#progressByMarketCheck").attr('div')).css('display','none');

            }



            $.getJSON('{{path('getProgressByCustomer')}}',data, function (data) {

                var avanceCustomer = data.avanceCustomers;



                if(avanceCustomer.length > 0){
                    dataRegion = [];
                    dataRegion2 = [];
                    for(i=0; i < avanceCustomer.length; i++){
                        customer=[];
                        customer.push(avanceCustomer[i].customer);
                        customer.push(parseFloat(avanceCustomer[i].porcentaje));
                        customer2=[];
                        customer2.push(avanceCustomer[i].customer);
                        customer2.push(parseFloat(avanceCustomer[i].total));
                        dataRegion.push(customer);
                        dataRegion2.push(customer2);
                    }
                    console.log(dataRegion);


                    $('#getChartCustomer').highcharts({

                        chart: {
                            type: 'column',
                        },
                        title: {
                            text: 'Progress by Customer'
                        },
                        xAxis: {
                            type: 'category',
                            labels: {
                                rotation: -45,
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Verdana, sans-serif'
                                }
                            }
                        },
                        yAxis: [{
                            min: 0,
                            title: {
                                text: 'Progress (%)'
                            }
                        }, { // Secondary yAxis
                            title: {
                                text: 'Sites Amount',
                                style: {
                                    color: Highcharts.getOptions().colors[0]
                                }
                            },
                            labels: {
                                format: '{value}',
                                style: {
                                    color: Highcharts.getOptions().colors[0]
                                }
                            },
                            opposite: true
                        }],
                        legend: {
                            enabled: false
                        },
                        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'
                                }
                            }
                        },
                            { type: 'line',
                                name: 'Total Sites',
                                yAxis: 1,
                                data: dataRegion2,
                                dataLabels: {
                                    enabled: true,
                                    color: '#000000',
                                    align: 'left'
                                },
                                marker: {
                                    enabled: true,
                                    color: '#000000',
                                    align: 'left',
                                    format: '{point.y}', // one decimal
                                    style: {
                                        fontSize: '10px',
                                        fontFamily: 'Verdana, sans-serif'
                                    }
                                }

                            }]
                    });


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


            });


            if($("#sitesVendorCheck").is(':checked')){
                data['sitesVendorCheck'] = 1;
                $("#"+$("#sitesVendorCheck").attr('div')+",."+$("#sitesVendorCheck").attr('div')).css('display','');

                $.getJSON('{{path('getProgressByVendor')}}',data, function (data) {

                    var avanceVendors = data.avanceVendors;




                    if(avanceVendors.length > 0){
                        dataRegion = [];
                        dataRegion2 = [];
                        for(i=0; i < avanceVendors.length; i++){
                            customer=[];
                            customer.push(avanceVendors[i].vendor);
                            customer.push(parseFloat(avanceVendors[i].porcentaje));
                            dataRegion.push(customer);
                            customer2=[];
                            customer2.push(avanceVendors[i].vendor);
                            customer2.push(parseFloat(avanceVendors[i].total));

                            dataRegion2.push(customer2);
                        }
                        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 (%)'
                                }
                            }, { // Secondary yAxis
                            title: {
                                text: 'Sites Amount',
                                        style: {
                                    color: Highcharts.getOptions().colors[0]
                                }
                            },
                            labels: {
                                format: '{value}',
                                        style: {
                                    color: Highcharts.getOptions().colors[0]
                                }
                            },
                            opposite: true
                        }],
                            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'
                                    }
                                }
                            },
                                { type: 'line',
                                    name: 'Total Sites',
                                    yAxis: 1,
                                    data: dataRegion2,
                                    dataLabels: {
                                        enabled: true,
                                        color: '#000000',
                                        align: 'left'
                                    },
                                    marker: {
                                        enabled: true,
                                        color: '#000000',
                                        align: 'left',
                                        format: '{point.y}', // one decimal
                                        style: {
                                            fontSize: '10px',
                                            fontFamily: 'Verdana, sans-serif'
                                        }
                                    }

                                }]
                        });


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


                });

            }else{
                data['sitesVendorCheck'] = 0;
                $("#"+$("#sitesVendorCheck").attr('div')+",."+$("#sitesVendorCheck").attr('div')).css('display','none');


            }






            return true;

        };



        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>
    <!--a id="pdfButton" href="#">Download</a-->
    <div class="col-lg-12">
        <form action="{{ path('donwloadExcelReportUSA') }}" method="post">
        <div class="panel panel-info">
            <div class="panel-heading"> FILTERS </div>
            <div class="panel-body" id="avances">
                    <div class="row">
                        <div class="col-lg-2" id="parametros">

                            <select class="form-control" id="ano1" name="years">

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

                            <select class="form-control" id="tipoBusqueda" name="tipoBusqueda">
                                <option value=""> Select Date</option>
                                <option value="range">RANGES</option>
                                <option value="mes">MONTH</option>
                                <option value="semana">WEEK</option>
                                <option value="ano">YEAR</option>
                            </select>
                        </div>
                        <div class="col-lg-8" id="parametros" >
                            <select class="hide" id="mes" name="mes">



                            </select>
                            <select class="hide" id="semana" name="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" name="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" name="toDate" data-date-format="YYYY-MM-DD"></div>

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

                    <div class="row" >
                        <div class="col-lg-1" id="parametros2" style="margin-top: 5px">
                            <label>TYPE:</label>
                            </div>
                        <div class="col-lg-3" id="parametros2" style="margin-top: 5px">
                            <label for="vpw" class="btn btn-default">VPW <input type="checkbox" name="vpw" checked id="vpw" div="VPW" class="badgebox"><span class="badge">&check;</span></label>


                            <label for="vss" class="btn btn-default">VSS <input type="checkbox" name="vss" checked id="vss" div="VSS" class="badgebox"><span class="badge">&check;</span></label>


                        </div>
                        <div class="col-lg-2" id="parametros" >
                            <select class="form-control" id="region" name="customer">
                                <option value="ALL">ALL CUSTOMER</option>
                                <option value="AT&T">AT&T</option>
                                <option value="ROGERS">ROGERS</option>
                                <option value="SPRINT">SPRINT</option>
                                <option value="T-MOBILE">T-MOBILE</option>
                                <option value="SOUTHERNLINC">SOUTHERNLINC</option>
                                <option value="VERIZON">VERIZON</option>
                            </select>
                        </div>
                        <div class="col-lg-2" id="parametros" >
                            <select class="form-control" id="regions" name="region">
                                <option value="ALL">ALL REGION</option>
                                {% for region in regions %}
                                    <option>{{ region.EricssonRegion }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-lg-2" id="parametros" >
                            <select class="form-control" id="market" name="market">
                                <option value="ALL">ALL MARKET</option>
                            </select>
                        </div>
                        <div class="col-lg-2" id="parametros" >
                            <select class="form-control" id="vendorsSelect" name="vendor">
                                <option value="ALL">ALL VENDORS</option>
                                {% for vendor in vendors %}
                                    <option value="{{ vendor.Vendor }}">{{ vendor.Vendor }}</option>
                                {% endfor %}
                            </select>
                        </div>

                    </div>
            </div>
        </div>
        <div class="panel panel-info">
            <div class="panel-heading"> REPORTS </div>
            <div class="panel-body" id="avances">
        <div class="row" style="margin-top: 10px">
            <!--label for="progressCheck" class="btn btn-default VSS"> Progress <input type="checkbox" id="progressCheck" checked div="progressDiv" class="badgebox"><span class="badge">&check;</span></label-->
            <label for="progressSiteStatusCheck" class="btn btn-default VSS VPW"> Sites Status Report <input type="checkbox" checked id="progressSiteStatusCheck" div="progressSiteStatusDiv" class="badgebox"><span class="badge">&check;</span></label>
            <label for="TaskFindingsCheck" class="btn btn-default VSS VPW"> Findings Task Report <input type="checkbox" checked id="TaskFindingsCheck" div="TaskFindings" class="badgebox"><span class="badge">&check;</span></label>
            <label for="sitesVendorCheck" class="btn btn-default VSS VPW"> Sites by vendor <input type="checkbox" checked id="sitesVendorCheck" div="sitesVendorDiv" class="badgebox"><span class="badge">&check;</span></label>
            <label for="progressByRegionCheck" class="btn btn-default VSS"> Progress by Region <input type="checkbox" checked id="progressByRegionCheck" div="getChartRegionDiv" class="badgebox"><span class="badge">&check;</span></label>
            <label for="progressByMarketCheck" class="btn btn-default VSS"> Progress By Market <input type="checkbox" checked id="progressByMarketCheck" div="progressByMarketDiv" class="badgebox"><span class="badge">&check;</span></label>
            <label for="progressByVendorsCheck" class="btn btn-default VSS"> Progress By Vendors <input type="checkbox" checked id="progressByVendorsCheck" div="progressByVendorsDiv" class="badgebox"><span class="badge">&check;</span></label>





            <!--label for="sitesCompletedCheck" class="btn btn-default VSS">Sites Completed <input type="checkbox" checked id="sitesCompletedCheck" div="sitesCompletedDiv" class="badgebox"><span class="badge">&check;</span></label>
            <label for="sitesProgressCheck" class="btn btn-default VSS VPW"> Sites in Progress <input type="checkbox" checked id="sitesProgressCheck" div="sitesProgressDiv" class="badgebox"><span class="badge">&check;</span></label>
            <label for="averageCompletedCheck" class="btn btn-default VSS"> Average % Completed <input type="checkbox" checked id="averageCompletedCheck" div="averageCompletedDiv" class="badgebox"><span class="badge">&check;</span></label>
            <label for="totalFindigsCheck" class="btn btn-default VSS VPW"> Total Findings <input type="checkbox" checked id="totalFindigsCheck" div="totalFindigsDiv" class="badgebox"><span class="badge">&check;</span></label>
            <label for="totalFixedInSessionCheck" class="btn btn-default VSS VPW"> Total Fixed in Session <input type="checkbox" checked id="totalFixedInSessionCheck" div="totalFixedInSessionDiv" class="badgebox"><span class="badge">&check;</span></label>
            <label for="remainingAfterCheck" class="btn btn-default VSS VPW"> Total Remaining after (re-visit) <input type="checkbox" checked id="remainingAfterCheck" div="remainingAfterDiv" class="badgebox"><span class="badge">&check;</span></label>
            <label for="averageFindingsCheck" class="btn btn-default VSS VPW"> Average Findings per site <input type="checkbox" checked id="averageFindingsCheck" div="averageFindingsDiv" class="badgebox"><span class="badge">&check;</span></label>
            <label for="averageCycleTimeCheck" class="btn btn-default VSS VPW"> Average Cycle time <input type="checkbox" checked id="averageCycleTimeCheck" div="averageCycleTimeDiv" class="badgebox"><span class="badge">&check;</span></label>
            <label for="averageSitesPauseCheck" class="btn btn-default VSS VPW"> Sites Paused <input type="checkbox" checked id="averageSitesPauseCheck" div="averageSitesPauseDiv" class="badgebox"><span class="badge">&check;</span></label>
            <label for="sitesSuspendedCheck" class="btn btn-default VSS VPW"> Sites Suspended <input type="checkbox" checked id="sitesSuspendedCheck" div="sitesSuspendedDiv" class="badgebox"><span class="badge">&check;</span></label>
            <label for="sitesnotStartedCheck" class="btn btn-default VSS VPW"> Sites not started <input type="checkbox" checked id="sitesnotStartedCheck" div="sitesnotStartedDiv" class="badgebox"><span class="badge">&check;</span></label>
            <label for="siteByCrewLeadCheck" class="btn btn-default VSS VPW"> Sites by Crew lead <input type="checkbox" checked id="siteByCrewLeadCheck" div="siteByCrewLeadDiv" class="badgebox"><span class="badge">&check;</span></label>
            <label for="progressByCustomerCheck" class="btn btn-default VSS"> Progress By Customer <input type="checkbox" checked id="progressByCustomerCheck" div="getChartCustomer" class="badgebox"><span class="badge">&check;</span></label>
            <label for="taskFailListCheck" class="btn btn-default VSS VPW"> Task Fail List <input type="checkbox" checked id="taskFailListCheck"div="taskFailListDiv" class="badgebox"><span class="badge">&check;</span></label-->


        </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" type="button">GENERATE PREVIEW</button>
                <button class="btn btn-success" id="saveReport" type="button">SAVE REPORT</button>
                <button class="btn btn-ericsson" type="submit">EXCEL</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>
        </form>
        <br>





        <div id="result">
            <div class="col-lg-12 " 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="col-lg-6" id="progressSiteStatusDiv">
        </div>

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




<div class="col-lg-6 " style="margin-top: 30px" id="getChartRegionDiv" >
        <div class="getChartRegion" id="getChartRegion"></div>

    </div>

        <div class="col-lg-6 " style="margin-top: 30px" id="getChartRegionDiv" >
            <div class="getChartRegion" id="getChartRegion"></div>

        </div>

        <div class="col-lg-6 " style="margin-top: 30px" id="getChartCustomerDiv" >
            <div class="getChartCustomer" id="getChartCustomer"></div>

        </div>


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

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

        </div>





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

        </div>


        <div class="col-lg-12 " style="margin-top: 30px" id="sitesVendorDiv" >
            <div class="getChartVendors" id="getChartVendors"></div>

        </div>



    </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-12">
                            <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>{{'monitor.etiqueta.region' | trans | upper}}</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>
                    <br>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="col-lg-6 col-lg-offset-3 text-center" style="text-align: center">
                                <button class="btn btn-default active" id="btnVPW" value="1">VPW</button>
                                <button class="btn btn-default active" id="btnVSS" value="1">VSS</button>

                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-lg-8">
                            <label>Do you want to send this report by email?</label>

                        </div>

                        <div class="col-lg-4">
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-default active"  onclick="hideNotify()">
                                    <input type="radio" name="options" id="option1" autocomplete="off" checked value="NO"> NO
                                </label>
                                <label class="btn btn-default"  onclick="showNotify()">
                                    <input type="radio" name="options" id="option2" autocomplete="off" value="YES"> YES
                                </label>
                            </div>

                        </div>
                    </div>
                    <div class="row rowNotify" style="display:none">
                        <div class="col-lg-12">
                            <label>How often you want send it?</label>
                        </div>

                        <div class="col-lg-12">
                            <label for="monday" class="btn btn-default">Monday<input type="checkbox" checked id="monday" div="monday" class="badgebox"><span class="badge">&check;</span></label>
                            <label for="tuesday" class="btn btn-default">Tuesday<input type="checkbox" checked id="tuesday" div="monday" class="badgebox"><span class="badge">&check;</span></label>
                            <label for="wednesday" class="btn btn-default">Wednesday<input type="checkbox" checked id="wednesday" div="monday" class="badgebox"><span class="badge">&check;</span></label>
                            <label for="thursday" class="btn btn-default">Thursday<input type="checkbox" checked id="thursday" div="monday" class="badgebox"><span class="badge">&check;</span></label>
                            <label for="friday" class="btn btn-default">Friday<input type="checkbox" checked id="friday" div="monday" class="badgebox"><span class="badge">&check;</span></label>
                            <label for="saturday" class="btn btn-default">Saturday<input type="checkbox" checked id="saturday" div="monday" class="badgebox"><span class="badge">&check;</span></label>
                            <label for="sunday" class="btn btn-default">Sunday<input type="checkbox" checked id="sunday" div="monday" class="badgebox"><span class="badge">&check;</span></label>

                        </div>
                    </div>

                    <div class="row rowNotify" style="display:none">

                        <div class="col-lg-12">
                            <label>What range of dates you want</label>
                            <div class=" col-lg-12">
                                <div class="col-lg-6">
                                    <label>Select</label>
                                    <select class=" form-control">
                                        <option>DAYS</option>
                                        <option>WEEKS</option>
                                        <option>MONTHS</option>
                                    </select>
                                </div>
                                <div class="col-lg-6">
                                    <label>Insert quantity</label>
                                    <input class=" form-control" id="quantity">
                                </div>



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

                    <div class="row rowNotify" style="display:none">
                        <div class="col-lg-12">
                            <label>What Time you want send it?</label>
                            <input class="form-control" id="timeToNotify" data-date-format="HH:mm">
                        </div>
                    </div>

                    <div class="row rowNotify" style="display:none">
                        <div class="col-lg-12">
                            <label>who do you want notify? Complete the field separated by semicoma.</label>
                            <br>
                            <label>TO:</label>
                            <textarea class="form-control" id="toEmail"></textarea>
                        </div>
                        <div class="col-lg-12">
                            <label>CC:</label>
                            <textarea class="form-control" id="ccEmail"></textarea>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12">
                            <label>REPORTS TO SAVE:</label>
                            <ul class="list-group" id="ulReportToSave">
                            </ul>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">CANCEL</button>
                    <button type="button" class="btn btn-info" id="btnSaveReport">SAVE REPORT</button>
                </div>
            </div>
        </div>
    </div>


{% endblock %}