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

{% block dashboard %}
    <style>

        table td {
            text-transform: uppercase;
            font-weight: bold;
            font-size: 12px;
        }

        #tabla_lt{
            cursor: pointer;
        }

        .form-group{
            margin-left: 20px;
        }

        .isloading-wrapper.isloading-right{margin-left:10px;}
        .isloading-right{font-size:30px; padding-left: 48%;}
        .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-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);}
        }

    </style>    
    <div class="panel-body col-lg-12">
        <form id="Filtros" action="{{path ('monitor_indexCerrados2',{'idproyectos':idproyectos, 'idmodule':idmodule})}}" method="post" class="form-inline">
                <div class="form-group">
                    <label>{{ 'monitoriii.year' | trans }}:&nbsp;</label>
                    <select class="form-control" name="Filtros_year" id="Filtros_year">
                        <option value="">{{ 'site.select' | trans}}...</option>
                        {% for i in range(2015,"now"|date("Y")) %}
                            <option value="{{ i }}">{{ i }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label>{{ 'monitoriii.month' | trans }}:&nbsp;</label>
                    <select class="form-control" name="Filtros_mes" id="Filtros_mes">
                        <option value="">{{ 'site.select' | trans}}...</option>
                    </select>

                </div>
            <div class="form-group">
                {% if idproyectos == 11 %}
                    <select name="sh" id="sh">
                        <option value="0" {{ sh == 0?' selected ':''}}>PMW</option>
                        <option value="1" {{ sh == 1?' selected ':''}}>SH</option>
                    </select>

                {% endif %}
            </div>
                <div class="form-group">
                    <button class="btn btn-info" type="button" name="limpiar" id="limpiar" onclick="Limpiar()">{{ 'monitor.reset' | trans }}</button>
                    <button class="btn btn-info" type="submit" name="guardar_submit" id="guardar_submit">{{ 'monitoriii.generate' | trans }}</button>
                </div>
        </form>
    </div>
    <div class="panel-body col-lg-12">
        <div style="height:75px"></div>
        <div id="graficaCerradosRegionDia" style="height:500px"></div><div style="height:75px"></div>
        <div id="graficaCerradosRegionMes" style="height:500px"></div><div style="height:75px"></div>
        <div id="graficaCerradosSupervisorDia" style="height:650px"></div> <div style="height:75px"></div>
        <div id="graficaCerradosSupervisorMes" style="height:650px"></div> <div style="height:75px"></div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">{{'Titulo Modal' | trans}}</h4>
                </div>
                <div class="modal-body">

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

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

        //LIMPIAR CAMPOS DEL FORMULARIO
        function Limpiar() {
            $(".error").remove();
            $('#Filtros_year').val("");
            $('#Filtros_mes').val("");
        }

        //Validar Formulario
        $('#guardar_submit').click(function () {
            $(".error").remove();
            if(($("#Filtros_year").val() === "") || ($("#Filtros_mes").val() === "") ) {
                $("#Filtros_mes").focus().after("<span class='error'>Seleccione Año y Mes</span>");
                return false;
            }else{
                $('#guardar_submit').attr('disabled', true);
                $("#Filtros").submit();
            }
        });

        $('#Filtros_year').change(function(){
            var fecha = new Date();
            var year = $("#Filtros_year option:selected").val();
            var meses = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
            var select = '';
            mes = '1';
            $('#Filtros_mes option').remove();
            if (year == fecha.getFullYear()){
                mes = fecha.getMonth()+1;
                select = "selected='selected'";
            }else{
                mes = '12';
            }
            //AGREGAR OPCIONES
            $('#Filtros_mes').append('<option value="">{{"site.select" | trans}}...</option>');
            if (year != ""){
                for(var i = 0; i < mes; i++) {
                    if (year != fecha.getFullYear()){
                        if (i == '11'){
                            select = "selected='selected'";
                        }else{
                            select = "";
                        }
                    }
                    val = i + 1;
                    if (val < 10){
                        val = '0'+val;
                    }
                    $('#Filtros_mes').append('<option '+select+ 'value='+val+'>'+meses[i]+'</option>');
                }
            }
        });

        // DIAS DE UN MES DADO EL AÑO  daysInMonth(2, 2009); // 28
        function daysInMonth(humanMonth, year) {
            return new Date(year || new Date().getFullYear(), humanMonth, 0).getDate();
        }

        var meses   = ["{{ 'month.january' | trans }}","{{ 'month.february' | trans }}","{{ 'month.march' | trans }}","{{ 'month.april' | trans }}","{{ 'month.may' | trans }}","{{ 'month.june' | trans }}","{{ 'month.july' | trans }}","{{ 'month.august' | trans }}","{{ 'month.september' | trans }}","{{ 'month.october' | trans }}","{{ 'month.november' | trans }}","{{ 'month.december' | trans }}"],
                colores = ['#F6C8DA','#98C94C','#E0F2BE','#cae4e9','#b88fef','#b0fa8a','#BDDD8C','#edbde9','#CCFFCC','thistle','#73D7F6','#dca7a7','#fa96ff','#a4a5ff','#37C6F2','#ccffb3','#92D2E5','#a5f8ff','#ff9999','#9999ff','#c9dbe9','#2BCEFF'],
                months  = {'{{ 'month.january' | trans }}':1,"{{ 'month.february' | trans }}":2,'{{ 'month.march' | trans }}':3,'{{ 'month.april' | trans }}':4,'{{ 'month.may' | trans }}':5,'{{ 'month.june' | trans }}':6,'{{ 'month.july' | trans }}':7,'{{ 'month.august' | trans }}':8,'{{ 'month.september' | trans }}':9,'{{ 'month.october' | trans }}':10,'{{ 'month.november' | trans }}':11,{{ 'month.december' | trans }}:12};

        //SELECCIONAR AÑO Y MES
        {% if year is defined %}
        var fecha = new Date();
        var meses = new Array ("{{ 'month.january' | trans }}","{{ 'month.february' | trans }}","{{ 'month.march' | trans }}","{{ 'month.april' | trans }}","{{ 'month.may' | trans }}","{{ 'month.june' | trans }}","{{ 'month.july' | trans }}","{{ 'month.august' | trans }}","{{ 'month.september' | trans }}","{{ 'month.october' | trans }}","{{ 'month.november' | trans }}","{{ 'month.december' | trans }}");
        var year = '{{year}}';
        var select = '';
        var mes = '1';
        $('#Filtros_mes option').remove();
        if (year == fecha.getFullYear()){
            mes = fecha.getMonth()+1;
            select = "selected='selected'";
        }else{
            mes = '12';
        }
        //AGREGAR OPCIONES
        $('#Filtros_mes').append('<option value="">{{"site.select" | trans}}...</option>');
        for(var i = 0; i < mes; i++) {
            val = i + 1;
            if (val < 10){
                val = '0'+val;
            }
            $('#Filtros_mes').append('<option value='+val+'>'+meses[i]+'</option>');
        }
        //SELECCIONA EL MES BUSCADO
        $("#Filtros_year option[value='{{year}}']").attr("selected",true);
        $("#Filtros_mes option[value='{{mes}}']").attr("selected",true);
        {% else %}
        var year = "";
        var mes = "";
        {% endif %}


        updateMonitor();

        window.pollingPeriod = 200000;
        window.progressInterval;

        window.progressInterval = setInterval(updateMonitor, window.pollingPeriod);

        function updateMonitor() {

            $.isLoading({
                text: "Loading"
            });
            
            $.ajax({
                url: '{{path('monitor_cerrados2')}}',
                data:{idproyectos:{{idproyectos}},year:$("#Filtros_year").val(),mes:$("#Filtros_mes").val(),sh: $("#sh").val()}
            }).done(function (data) {
                var monitor = data.monitor;
                var monitor2 = data.monitor2;
                var monitor3 = data.monitor3; if (monitor3.length == 0) $("#graficaCerradosRegionMes").css('display','none');
                var monitor4 = data.monitor4; if (monitor4.length == 0) $("#graficaCerradosRegionDia").css('display','none');
                var monitor5 = data.monitor5; if (monitor5.length == 0) $("#graficaCerradosSupervisorMes").css('display','none');
                var monitor6 = data.monitor6; if (monitor6.length == 0) $("#graficaCerradosSupervisorDia").css('display','none');
                var NombreRegion = data.NombreRegion;
                var NombreSupervisor = data.NombreSupervisor;
                var NombreDias = new Array();
                var diasMes = daysInMonth({{mes}},{{year}});

                for (var i = 0; i < diasMes; i++) {
                    var data = new Array();
                    NombreDias[i]=monitor[i]['dia'];
                }

                var mesRegion = new Array();
                for (var i = 0; i < monitor2.length; i++) {
                    mesRegion[i]=monitor2[i]['mes'];
                }

                var dataCompleta = new Array();
                for (var k = 0; k < NombreRegion.length; k++) {
                    var data = new Array();
                    for (var j = 0; j < mesRegion.length; j++) {
                        data[j]=null;
                        for (var i = 0; i < monitor3.length; i++) {

                            if ((NombreRegion[k]['region'].replace(/\s+/g, '') == monitor3[i]['region'].replace(/\s+/g, '')) && (monitor3[i]['mes']==mesRegion[j])) {
                                data[j]=parseInt(monitor3[i]['total']);
                                i=monitor3.length;
                            }

                        }

                    }
                    dataCompleta[k]=data;

                }

                var dataCompletaDias = new Array();
                for (var k = 0; k < NombreRegion.length; k++) {
                    var data = new Array();
                    for (var j = 0; j < NombreDias.length; j++) {
                        data[j]=null;
                        for (var i = 0; i < monitor4.length; i++) {
                            if ((NombreRegion[k]['region'].replace(/\s+/g, '') == monitor4[i]['region'].replace(/\s+/g, '')) && (monitor4[i]['dia']==NombreDias[j])) {
                                data[j]=parseInt(monitor4[i]['total']);
                                i=monitor4.length;
                            }
                        }
                    }
                    dataCompletaDias[k]=data;
                }

                var dataCompletaSup = new Array();
                for (var k = 0; k < NombreSupervisor.length; k++) {
                    var data = new Array();
                    for (var j = 0; j < mesRegion.length; j++) {
                        data[j]=null;
                        for (var i = 0; i < monitor5.length; i++) {
                            if ((NombreSupervisor[k]['supervisor'] == monitor5[i]['supervisor'].toUpperCase()) && (monitor5[i]['mes']==mesRegion[j])) {
                                data[j]=parseInt(monitor5[i]['total']);
                                i=monitor5.length;
                            }
                        }
                    }
                    dataCompletaSup[k]=data;
                }

                var dataCompletaDiasSup = new Array();
                for (var k = 0; k < NombreSupervisor.length; k++) {
                    var data = new Array();
                    for (var j = 0; j < NombreDias.length; j++) {
                        data[j]=null;
                        for (var i = 0; i < monitor6.length; i++) {
                            if ((NombreSupervisor[k]['supervisor'] == monitor6[i]['supervisor'].toUpperCase()) && (monitor6[i]['dia']==NombreDias[j])) {
                                data[j]=parseInt(monitor6[i]['total']);
                                i=monitor6.length;
                            }
                        }
                    }
                    dataCompletaDiasSup[k]=data;
                }

                //console.log(NombreSupervisor);
                //console.log(monitor6);
                var lastUpdate = +new Date(),
                        timeout = 3000;
                function reloadFlash() {
                    $("#flash").fadeIn();
                    lastUpdate = +new Date();
                    setTimeout(hideFlash, timeout);
                }

                function hideFlash() {
                    var now = +new Date();
                    if (now >= lastUpdate + timeout) {
                        $("#flash").fadeOut();
                    }
                }

                //Sitios Terminados con Documentación por Región (Mensual)
                var chart3 = new Highcharts.Chart({
                    chart: {
                        renderTo: 'graficaCerradosRegionMes',
                        type: 'column'
                    },
                    title: {
                        text: '{{ 'monitorv.completedregion' | trans }} ({{ 'monitoriii.monthly' | trans }})'
                    },
                    xAxis: {
                        categories: mesRegion,
                        pointWidth: 30
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Total por Región'
                        },
                        stackLabels: {
                            enabled: true,
                            style: {
                                fontWeight: 'bold',
                                color: (Highcharts.theme && Highcharts.theme.background2) || 'black'
                            }
                        }
                    },
                    legend: {
                        align: 'center',
                        x: -30,
                        y: -10,
                        floating: false,
                        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                        borderColor: '#CCC',
                        borderWidth: 1,
                        shadow: false
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b> {{ 'monitoriii.month' | trans }}: </b>' + this.x + '<br/>' +
                                    this.series.name + ': ' + this.y + '<br/>' +
                                    'Total: ' + this.point.stackTotal;
                        }
                    },
                    plotOptions: {
                        column: {
                            stacking: 'normal',
                            dataLabels: {
                                enabled: true,
                                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'gray',
                                style: {
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    }
                });

                //Sitios Terminados con Documentación por Región (Diario)
                var chart4 = new Highcharts.Chart({
                    chart: {
                        renderTo: 'graficaCerradosRegionDia',
                        type: 'column'
                    },
                    title: {
                        text: '{{'monitorv.completedregion' | trans}} ({{ 'monitoriii.daily' | trans }})'
                    },
                    xAxis: {
                        categories: NombreDias
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Total por Región'
                        },
                        stackLabels: {
                            enabled: true,
                            style: {
                                fontWeight: 'bold',
                                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                            }
                        }
                    },
                    legend: {
                        align: 'center',
                        x: -30,
                        y: -10,
                        floating: false,
                        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                        borderColor: '#CCC',
                        borderWidth: 1,
                        shadow: false
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b> Día: ' + this.x + '</b><br/>' +
                                    this.series.name + ': ' + this.y + '<br/>' +
                                    'Total: ' + this.point.stackTotal;
                        }
                    },
                    plotOptions: {
                        column: {
                            stacking: 'normal',
                            dataLabels: {
                                enabled: true,
                                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'gray',
                                style: {
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    }
                });

                //Sitios Terminados con Documentación por Supervisor (Mensual)
                var chart5 = new Highcharts.Chart({
                    chart: {
                        renderTo: 'graficaCerradosSupervisorMes',
                        type: 'column'
                    },
                    title: {
                        text: '{{ 'monitorv.completedsupervisor' | trans }} ({{ 'monitoriii.monthly' | trans }})'
                    },
                    xAxis: {
                        categories: mesRegion
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Total por Supervisor'
                        },
                        stackLabels: {
                            enabled: true,
                            style: {
                                fontWeight: 'bold',
                                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                            }
                        }
                    },
                    legend: {
                        align: 'center',
                        x: -30,
                        y: -10,
                        floating: false,
                        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                        borderColor: '#CCC',
                        borderWidth: 1,
                        shadow: false
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b> {{ 'monitoriii.month' | trans }}: </b>' + this.x + '<br/>' +
                                    this.series.name + ': ' + this.y + '<br/>' +
                                    'Total: ' + this.point.stackTotal;
                        }
                    },
                    plotOptions: {
                        column: {
                            stacking: 'normal',
                            dataLabels: {
                                enabled: true,
                                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'gray',
                                style: {
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    }
                });

                //Sitios Terminados con Documentación por Supervisor (Diario)
                var chart6 = new Highcharts.Chart({
                    chart: {
                        renderTo: 'graficaCerradosSupervisorDia',
                        type: 'column'
                    },
                    title: {
                        text: '{{ 'monitorv.completedsupervisor' | trans }} ({{ 'monitoriii.daily' | trans }})'
                    },
                    xAxis: {
                        categories: NombreDias
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Total por Supervisor'
                        },
                        stackLabels: {
                            enabled: true,
                            style: {
                                fontWeight: 'bold',
                                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                            }
                        }
                    },
                    legend: {
                        align: 'center',
                        x: -30,
                        y: -10,
                        floating: false,
                        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                        borderColor: '#CCC',
                        borderWidth: 1,
                        shadow: false
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b> {{ 'monitoriv.label.day'  | trans }}: ' + this.x + '</b><br/>' +
                                    this.series.name + ': ' + this.y + '<br/>' +
                                    'Total: ' + this.point.stackTotal;
                        }
                    },
                    plotOptions: {
                        column: {
                            stacking: 'normal',
                            dataLabels: {
                                enabled: true,
                                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'gray',
                                style: {
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    }
                });

                for (var i = 0; i < NombreRegion.length; i++) {
                    chart3.addSeries({
                        name: NombreRegion[i]['region'],
                        data: dataCompleta[i],
                        color: colores[i],
                        pointWidth: 50
                    });
                }

                for (var i = 0; i < NombreRegion.length; i++) {
                    chart4.addSeries({
                        name: NombreRegion[i]['region'],
                        data: dataCompletaDias[i],
                        color: colores[i]
                    });
                }

                for (var i = 0; i < NombreSupervisor.length; i++) {
                    chart5.addSeries({
                        name: NombreSupervisor[i]['supervisor'],
                        data: dataCompletaSup[i],
                        color: colores[i],
                        pointWidth: 50
                    });
                }

                for (var i = 0; i < NombreSupervisor.length; i++) {
                    chart6.addSeries({
                        name: NombreSupervisor[i]['supervisor'],
                        data: dataCompletaDiasSup[i],
                        color: colores[i]
                    });
                }
                $.isLoading("hide");
            });
        }
    </script>
{% endblock %}