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

{% endblock %}

{% block dashboard %}
    <style>


        .wrapper{padding-bottom:50px;}
        .header{background:#000000;}.header .container{padding-bottom:20px;}.header .container h1{color:#FFF;line-height:50px;margin-top:30px;margin-bottom:0;}
        .header .container h3{color:#E0E0E0;font-size:16px;margin-top:-5px;}.header .container h3 a{color:#66aacc;}.header .container h3 a:hover{color:#b3d5e6;}
        .top-menu{position:absolute;z-index:9999;}.top-menu .nav-list{background:rgba(255, 255, 255, 0.8);border:1px solid #CCC;margin:20px;position:fixed;right:0;}
        pre,.well{background:#FFFFFF;}
        .syntax-container{background:#FCFCFC;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;border:1px solid #e3e3e3;margin-bottom:30px;padding-bottom:20px;}
        .isloading-wrapper.isloading-right{margin-left:10px;}
        .isloading-overlay{position:relative;text-align:center;}.isloading-overlay .isloading-wrapper{background:#FFFFFF;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;display:inline-block;margin:0 auto;padding:10px 20px;top:10%;z-index:9000;}

        /*Glyphicon Spinner*/
        .glyphicon-spin {
            -animation: spin .9s infinite linear;
            -webkit-animation: spin2 .9s infinite linear;
        }

        @-webkit-keyframes spin2 {
            from { -webkit-transform: rotate(0deg);}
            to { -webkit-transform: rotate(360deg);}
        }

        @keyframes spin {
            from { transform: scale(1) rotate(0deg);}
            to { transform: scale(1) rotate(360deg);}
        }
        #menuTop {
            margin-top: 30px;
        }
        .Estatus{
            width: 186px;
        }
        .estilo{
            height: 50px;
            width: 200px;
            border-radius: 5px;
            width: 250px;
            font-size: 20px;
            padding: 5px 5px 5px 5px;
            margin-left: auto;
            margin-right: auto;
        }



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





    <script>

        $(document).ready(function(){
            cargarDatos();
            cargarDatos2();

            $.isLoading({
                text:       "Loading"
            });
            $.isLoading("hide");
            $("#_main").show();
        });

        $(function () {
            var starYear = 2016;
            var d = new Date();
            var year = d.getFullYear();
            var month = new Array();



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

            }


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

            }

            month[0] = "ENERO";
            month[1] = "FEBRERO";
            month[2] = "MARZO";
            month[3] = "ABRIL";
            month[4] = "MAYO";
            month[5] = "JUNIO";
            month[6] = "JULIO";
            month[7] = "AGOSTO";
            month[8] = "SEPTIEMBRE";
            month[9] = "OCTUBRE";
            month[10] = "NOVIEMBRE";
            month[11] = "DICIEMBRE";
            var n = month[d.getMonth()];
            var options = new Array();
            var semana = ISO8601_week_no(new Date()) - 1;
            for(var i=semana;i>=1;i--){

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

            $("#ano").change(function(){
                var yearSelected = parseInt($(this).val());
                var semana = ISO8601_week_no(new Date()) - 1;

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

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

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

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

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

                }else{

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

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

            });

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

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

                    options.push( );

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

                }
            }


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

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



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


                if($("#ano").val()!=""){
                    $.isLoading({
                        text:       "Loading"
                    });
                    cargarDatos();

                }
                else{
                    $("#tabla1").empty();
                    $("#tabla2").empty();
                    $("#tabla3").empty();
                    $("#tabla4").empty();

                }

            });





            $("#ano2").change(function(){
                var yearSelected2 = parseInt($(this).val());
                var semana = ISO8601_week_no(new Date()) - 1;

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

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

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

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

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

                }else{

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

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

            });


            $("#generar2").click(function(){

                if($("#ano2").val()!=""){
                    $.isLoading({
                        text:       "Loading"
                    });
                    cargarDatos2();
                }
                else{
                    $("#tabla21").empty();
                    $("#tabla22").empty();
                    $("#tabla23").empty();
                }

            });

        });

        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 cargarDatos(){
            data = {};
            var tipo  = $("#tipoBusqueda").val();

            switch (tipo){

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

                    break;
            }

            data['region'] = $("#region").val();

            if($("#ano").val()!=''){
                data['ano'] = $("#ano").val();
            }
            else{
                data['ano'] = 2017;
            }


            var tablaDatos =$('#datos');

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



                var monitor1=res.monitor1;
                var monitor2=res.monitor2;
                var monitor3=res.monitor3;
                var monitor4=res.monitor4;

                $("#tabla1").empty();
                $("#tabla2").empty();
                $("#tabla3").empty();
                $("#tabla4").empty();



                if(monitor1.length>=1){
                    var total1 = getTotal(monitor1,[1,2,3,4,5,6]);
                    $("#tabla1").append(createTable(res.monitor1,total1,"Total")).append(
                        exp);

                }

                else{
                    var miobj1=[{
                        "Estatus":"Sin Datos",
                        "Inicio(Cierre de sitio)":"Sin Datos",
                        "Check List del cierre del sitio":"Sin Datos",
                        "Fin(Cierre de sitio)":"Sin Datos",
                        "Reporte fotográfico del cierre del sitio":"Sin Datos",
                        "Inventario RRU’s 32-LTE":"Sin Datos",
                        "Baterías de sodio":"Sin Datos",

                    }];


                    $("#tabla1").append(createTable(miobj1));

                }

                if(monitor2.length>=1){
                   var total2 = getTotal(monitor2,[1]);
                    $("#tabla2").append(createTable(res.monitor2,total2, "Total")).append(
                        exp2);
                }else{
                    var miobj2=[{"Instalación Parcial":"Sin Datos","Resultado":"Sin Datos"}];
                    $("#tabla2").append(createTable(miobj2));

                }


                if(monitor3.length>=1){
                var total3 = getTotal(monitor3, [1]);
                $("#tabla3").append(createTable(res.monitor3,total3, "Total")).append(
                    exp3);
                }else{
                    var miobj3=[{"En Proceso":"Sin Datos","Resultado":"Sin Datos"}];
                    $("#tabla3").append(createTable(miobj3));

                }


                if(monitor4.length>=1) {
                    var total4 = getTotal(monitor4, [1]);
                    $("#tabla4").append(createTable(res.monitor4, total4, "Total")).append(
                        exp4);
                }
                else{
                    var miobj4=[{"Suspendido":"Sin Datos","Resultado":"Sin Datos"}];
                    $("#tabla4").append(createTable(miobj4));

                }
                $.isLoading("hide");
            });


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


            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] + " '>" + 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") {

                        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 cargarDatos2(){

            data = {};
            if($("#ano2").val()==''){
                data['ano'] = 2017;
            }
            else{
                data['ano'] = $("#ano2").val();
            }



            console.log(data['ano']);

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

                var monitor21=res2.monitor21;
                var monitor22=res2.monitor22;
                var monitor23=res2.monitor23;

                $("#tabla21").empty();
                $("#tabla22").empty();
                $("#tabla23").empty();
                if(monitor21.length>=1){
                    var total21 = getTotal(monitor21,[1,2,3,4,5,6,7]);
                    $("#tabla21").append(createTable(res2.monitor21,total21,"Total"));

                    var total22 = getTotal(monitor22,[1,2,3,4,5,6,7,8,9,10,11,12,13]);
                    $("#tabla22").append(createTable(res2.monitor22,total22,"Total"));



                    var total23 = getTotal(monitor23,[1,2,3,4,5,6,7,8,9,10,11,12,13]);
                    $("#tabla23").append(createTable(res2.monitor23,total23,"Total"));

                }
                else{
                    $("#tabla21").append("<div class=' estilo'><strong >Sin Datos Para Mostrar<strong></div>");
                }





                $.isLoading("hide");
            });

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

            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] + "' >" + 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") {

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

        }




        var exp=
            '<div class="btn-group pull-right">'+
            '<button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-bars"></i> Export Table Data</button>'+
            '<ul class="dropdown-menu" role="menu">'+
            ' <li>'+

            '<a href="#" onclick="accion();">'+

            'Excel'+

            '</a>'+
            '</li>'+
            '</ul>'+
            '</div>';


        var exp2=
            '<div class="btn-group pull-right">'+
            '<button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-bars"></i> Export Table Data</button>'+
            '<ul class="dropdown-menu" role="menu">'+
            ' <li>'+

            '<a href="#" onclick="accion2();">'+
            'Excel'+

            '</a>'+
            '</li>'+
            '</ul>'+
            '</div>';

        var exp3=
            '<div class="btn-group pull-right">'+
            '<button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-bars"></i> Export Table Data</button>'+
            '<ul class="dropdown-menu" role="menu">'+
            ' <li>'+

            '<a href="#" onclick="accion3();">'+
            'Excel'+

            '</a>'+
            '</li>'+
            '</ul>'+
            '</div>';

        var exp4=
            '<div class="btn-group pull-right">'+
            '<button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-bars"></i> Export Table Data</button>'+
            '<ul class="dropdown-menu" role="menu">'+
            ' <li>'+

            '<a href="#" onclick="accion4();">'+
            'Excel'+

            '</a>'+
            '</li>'+
            '</ul>'+
            '</div>';



        function accion(){
            $('#tabla1').tableExport({type: 'excel', escape: 'false'});

        }
        function accion2(){
            $('#tabla2').tableExport({type: 'excel', escape: 'false'});

        }
        function accion3(){
            $('#tabla3').tableExport({type: 'excel', escape: 'false'});

        }
        function accion4(){
            $('#tabla4').tableExport({type: 'excel', escape: 'false'});

        }



    </script>

    <div class="container">


        <div class="row">
            <div class=" col-md-12">
                <p class="text-center" style="font-size: 14pt;font-weight: bold;">
                    ESTATUS GENERAL RRU
                </p>

            </div>

        </div>



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

            <div class="col-lg-11" id="title"></div>
            <div class="col-lg-12" style="margin-top: 15px;">
                <ul class="nav nav-pills nav-justified">
                    <li class="active"><a data-toggle="tab" href="#_summary"><strong>MONITOR DE RRU
                                ESTATUS GENERAL & GAPS</strong></a></li>
                    <li><a data-toggle="tab" href="#_detail"><strong>ESTATUS POR REGIÓN / MES</strong></a></li>

                </ul>


<!-------------------------------------------------------------------------------------------------------------------->

                <div class="tab-content" style="margin-top: 20px;">

                    <div id="_summary" class="tab-pane fade in active">


                                            <div>



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

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

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

                                                        <select class="form-control" id="tipoBusqueda">
                                                            <option value=""> {{'Selecione Fecha' | trans}}</option>

                                                            <option value="mes">{{'monitoriii.month' | trans}}</option>

                                                            <option value="ano">{{'monitoriii.year' | trans}}</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-lg-2" id="parametros" >
                                                        <select class="hide" id="mes">



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



                                                        </select>
                                                    </div>
                                                    <div class="col-lg-2" id="parametros" >
                                                        <select class="form-control" id="region">
                                                            <option value="TODOS">{{'inbox.all' | trans}}</option>
                                                            <option value="Region 1">Region 1</option>
                                                            <option value="Region 2">Region 2</option>
                                                            <option value="Region 3">Region 3</option>
                                                            <option value="Region 4">Region 4</option>
                                                            <option value="Region 6">Region 6</option>
                                                            <option value="Region 9">Region 9</option>
                                                        </select>
                                                    </div>

                                                    <div class="col-lg-2" id="parametros" >
                                                        <button class="btn btn-primary" id="generar">{{'ticketDetail.boton.generar' | trans}}</button>
                                                    </div>

                                                    <div class="col-lg-2">


                                                    </div>

                                                </div>



                                                <div class="row" >



                                                    <div style="padding-top:50px" class="col-md-12" id="tabla1">

                                                    </div>


                                                </div>

                                                <div class="row" >


                                                    <div style="padding-top:50px" class="col-md-4"  id="tabla2">

                                                    </div>




                                                    <div style="padding-top:50px" class="col-md-4" id="tabla3">


                                                    </div>





                                                    <div style="padding-top:50px" class="col-md-4" id="tabla4">

                                                    </div>

                                                </div>


                                                <div class="row" style="height: 100px;" >

                                                </div>


                                            </div>


                    </div>






                    <div id="_detail" class="tab-pane fade">

                        <div>
                            <div class="row">



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

                                    <select id="ano2">
                                        <option value="">{{'Seleccione Año' | trans}}</option>

                                    </select>
                                </div>

                                <div class="col-lg-2" id="parametros" >
                                    <button class="btn btn-primary" id="generar2">{{'ticketDetail.boton.generar' | trans}}</button>
                                </div>

                            </div>




                            <div class="row"style="padding-top: 20px; ">

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

                                </div>

                            </div>

                            <div class="row" style="padding-top: 20px; ">

                                <div class="col-lg-12 ancho" id="tabla22">

                                </div>

                            </div>

                            <div class="row" style="padding-top: 20px;">

                                <div class="col-lg-12 ancho" id="tabla23">

                                </div>

                            </div>


                            <div class="row" style="padding-top: 20px;">

                            </div>
                        </div>


                    </div>



                </div>

<!-------------------------------------------------------------------------------------------------------------------->
            </div>

        </div>


    </div>
{% endblock %}