{% 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 table2 = $('#showDetail').DataTable( {
                dom: 'Bfrtip',
                "order": [[ 1, "desc" ]],
                "ajax": {
                    "url": "{{ path('showDetailRCMSummary',{'idproyectos':idproyectos}) }}",
                    "type": "POST",
                    data:  function( d ) {

                        data = {};
                        data['iduserQuery'] = "";
                        data['opcQuery'] = "";
                        data['numberResultQuery'] = "";
                        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;
                        }

                        data['iduserQuery'] = $("#iduserQuery").val();
                        data['opcQuery'] = $("#opcQuery").val();
                        data['numberResultQuery'] = $("#numberResultQuery").val();
                        d.data = data;
                    }
                },
                columns: [
                    { "data": "RCM" },
                    { "data": "networkElement" },
                    { "data": "startDate" },
                    { "data": "lastComment" }
                ],
                lengthMenu: [
                    [   -1 ],
                    [ 'Show all' ]
                ],
                buttons: [
                    'excel'
                ]
            } );


            var table = $('#example').DataTable( {
                dom: 'Bfrtip',
                "order": [[ 1, "desc" ]],
                "ajax": {
                    "url": "{{ path('showRCMUSAStatus',{'idproyectos':idproyectos}) }}",
                    "type": "POST",
                    data:  function( d ) {

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



                        d.data = data;
                        d.idproveedor= $('#idproveedor').val();
                    }
                },
                columns: [
                    { "data": "RCM" },
                    { "data": "total" },
                    { "data": "inProgress" },
                    { "data": "assigned" },
                    { "data": "completed" },
                    { "data": "actDone" },
                    { "data": "suspened"},
                    { "data": "schedule", visible:false },
                    { "data": "pause"},
                    { "data": "changeRequest", visible:false},
                    { "data": "iduser", visible:false}
                ],
                lengthMenu: [
                    [  10, 25,50, -1 ],
                    [ '10 rows', '25 rows', '50 rows', 'Show all' ]
                ],
                buttons: [
                    'pageLength','copy', 'csv', 'excel', 'pdf', 'print'
                ]
            } );
            var columnValue = [
                    'rcmName',
                    'totalSite',
                    'sitesInProgress',
                    'sitesAssigned',
                    'SitesCompleted',
                    'SitesActivtiesDone',
                    'sitesSuspended',
                    'sitesPause',
            ];



            $('#example tbody').on( 'click', 'td', function () {
                index = $(this).index();
                opc =columnValue[index];
                data = table.row($(this).parents('tr')).data();
                iduser = data.iduser;

                $("#iduserQuery").val(iduser);
                $("#opcQuery").val(opc);
                $("#numberResultQuery").val($(this).text());
                table2.ajax.reload(function ( json ) {
                    $("#modalSiteDetail").modal()
                });

                console.log(iduser);
            });

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

                    }
                }

            });*/

            $("#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++ )
            {
                $('#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"


                });

                table.ajax.reload(function ( json ) {
                });
                getReportes();

            });

        });


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


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

                var resolved = data.resolved;
                console.log(resolved);

                if(resolved.length > 0){
                    categories = []
                    datasCompleted = [];
                    datasTotal = [];
                    dataLines = [];
                    for(i=0; i < resolved.length; i++){

                        categories.push(resolved[i]['RCM']);
                        datasCompleted.push(parseFloat(resolved[i]['completed']));
                        datasTotal.push(parseFloat(resolved[i]['total']));
                        dataLines.push(parseFloat(resolved[i]['percentage']));

                    }


                }


                $("#fullfilRCM").highcharts( {
                    title: {
                        text: 'Average Completed per RCM'
                    },
                    yAxis: [{
                        min: 0,
                        title: {
                            text: 'Average Completed (%)'
                        }
                    }, { // Secondary yAxis
                        title: {
                            text: 'Sites Amount',
                            style: {
                                color: Highcharts.getOptions().colors[0]
                            }
                        },
                        labels: {
                            format: '{value}',
                            style: {
                                color: Highcharts.getOptions().colors[0]
                            }
                        },
                        opposite: true
                    }],
                    xAxis: {
                        categories: categories
                    },
                    series: [{
                        type: 'column',
                        name: 'Total Site',
                        data: datasTotal
                    }, {
                        type: 'column',
                        name: 'Sites Completed',
                        data: datasCompleted
                    }, {
                        type: 'spline',
                        name: 'Average',
                        yAxis: 1,
                        data: dataLines,
                        marker: {
                            lineWidth: 2,
                            lineColor: Highcharts.getOptions().colors[3],
                            fillColor: 'white'
                        }
                    }]
                });




            });


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

                $.isLoading("hide");



                var avanceMarket = data.avanceMarket;


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


                    $('#getChartMarket').highcharts({

                        chart: {
                            type: 'bar',
                            height: 500,
                        },
                        title: {
                            text: 'RCM Progress'
                        },
                        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
                        },
                        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: {
                                    lineWidth: 2,
                                            lineColor: Highcharts.getOptions().colors[3],
                                            fillColor: 'white'
                                }

                            }
                        ]
                    });


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



            });





            return true;

        };














    </script>

    <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="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-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>




        <center>
            <label>Sites Status per RCM</label>
        </center>
        <div class="col-lg-12" id="statusByRCM">
            <table id="example" class="display nowrap" cellspacing="0" width="100%" style="height: 300px">
                <thead>
                <tr>
                    <th>RCM</th>
                    <th>Total Sites </th>
                    <th>Sites In Progress</th>
                    <th>Sites Assigned</th>
                    <th>Sites Completed</th>
                    <th>Sites Activities Done</th>
                    <th>Sites Suspened</th>
                    <th>Sites Schedule</th>
                    <th>Sites Pause</th>
                    <th>Sites Change Request</th>
                </tr>
                </thead>
                <tbody id="tbody">
                </tbody>
            </table>
        </div>

        <div class="col-lg-12" >
            <div id="fullfilRCM"></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="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 class="modal modal-wide fade" id="modalSiteDetail" tabindex="-1" role="dialog" aria-labelledby="modalSiteDetail" 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">Detail</h4>
                </div>
                <div class="modal-body">
                    <div class="col-lg-12">

                        <input type="hidden" id="iduserQuery">
                        <input type="hidden" id="opcQuery">
                        <input type="hidden" id="numberResultQuery">
                        <table id="showDetail"  class="display nowrap" cellspacing="0" width="100%">
                            <thead>
                            <tr>
                                <th>RCM</th>
                                <th>Network Element</th>
                                <th>Start Date</th>
                                <th>Last Comment</th>
                            </tr>
                            </thead>
                            <tbody id="tbody">
                            </tbody>
                        </table>
                    </div>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>
                </div>
            </div>
        </div>
    </div>








    <link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css')}}">
    <link rel="stylesheet" href="{{ asset('css/buttons.dataTables.min.css')}}">
    <!--script src="{{ asset('js/jquery-1.12.4.js') }}"></script-->
    <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('js/jszip.min.js') }}"></script>
    <script src="{{ asset('js/pdfmake.min.js') }}"></script>
    <script src="{{ asset('js/vfs_fonts.js') }}"></script>
    <script src="{{ asset('js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('js/buttons.print.min.js') }}"></script>
{% endblock %}