{% 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">
        <div class="page-header">
            <form id="Filtros" action="{{path ('monitor_indexCerrados',{'idproyectos':idproyectos, 'idmodule':idmodule})}}" class="form-inline" method="post">


                <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>
    <div class="panel-body col-lg-12">
        <div style="height:75px"></div>
        <div class="bloque-responsive"> <!-- Carlos -->
        <div id="graficaCerradosDia" style="height:600px; width: 1259px;"></div>
        </div>
        <div style="height:75px"></div>
        <div id="graficaCerradosMes" style="height:600px"></div><div style="height:75px"></div>
        <div class="row">
            <div class="col-lg-6" id="cuarto_reporte">

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

            </div>
        </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">
                    <h2 class="modal-title text-center" id="myModalLabel"><strong>{{'monitorii.detail' | trans }}</strong></h2>
                </div>
                <div class="modal-body">

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

    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script>
        //Crear Tabla
        function createTable(monitor,total,nombreColTotal){
            var header = Object.keys(monitor[0]);
            var table = '<table  class="table table-hover table-condensed" > <thead>' +

                    '<tr class="bg-primary">';

            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 class='openModal' id='tabla_lt' data-load-remote='";
                table += '{{ path('monitor_getDetalleByWeek',{'idproyectos':idproyectos}) }}?year={{year}}&mes={{mes}}&semana=' + monitor[i].WEEK.slice(1)
                table += "'>";

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

        $('html').on('click', '.openModal', open)

        function open() {

            var $modal = $('#myModal'),
                    $modalBody = $('#myModal .modal-body').empty();

            if ( $(this).text() == 0 ) return false;

            $modalBody.isLoading();
            generateModal( $(this).attr('data-load-remote') );
            $modal.modal('show');
        }

        function generateModal(ruta){
            $('#myModal .modal-body').empty();
            $.getJSON(ruta,function(data){

                if ( data.length == 0 ) {

                    $('#myModal').modal('hide');
                    $('#myModal .modal-body').isLoading('hide');
                    return false;
                }

                var monitor = data,
                        header = Object.keys( data[0] ),
                        table = '<table class="table table-hover table-condensed table-responsive"><thead><tr class="bg-primary">';

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

                table += "</table>";
                $('#myModal .modal-body').isLoading('hide').html(table);
            });

        }

        $('#myModal').on('hidden.bs.modal', function(){
            $('#myModal .modal-body').isLoading('hide');
        });

        //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 ("{{ '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 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 colores = ['#F6C8DA','#98C94C','#E0F2BE','#cae4e9','#b88fef','#b0fa8a','#BDDD8C','#edbde9','#CCFFCC','thistle','#73D7F6','#dca7a7','#fa96ff','#a4a5ff','#37C6F2','#ccffb3','#92D2E5','#a5f8ff','#ff9999','#9999ff','#c9dbe9','#2BCEFF'];
        //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_cerrados')}}',
                data:{idproyectos:{{idproyectos}},year:$("#Filtros_year").val(),mes:$("#Filtros_mes").val(),sh: $("#sh").val()}
            }).done(function (data) {
                var monitor = data.monitor; if (monitor.length == 0) $("#graficaCerradosDia").css('display','none');
                var monitor2 = data.monitor2;
                var leadTime = data.monitor3; if (leadTime.length == 0){ $("#cuarto_reporte").css('display','none'); $("#cuarta_grafica").css('display','none');}
                var monitor2EnTiempo= data.mesEnTiempo;
                if ((monitor2.length == 0)&&(monitor2EnTiempo == 0)) $("#graficaCerradosMes").css('display','none');
                var NombreRegion = data.NombreRegion;
                var NombreSupervisor = data.NombreSupervisor;
                var finalizadosDias= new Array();
                var finalizadosenTiempoDias= new Array();
                var resolucionDias= new Array();
                var finalizadosMes = new Array();
                var finalizadosenTiempoMes= new Array();
                var resolucionMes= new Array();
                var NombreDias = new Array();
                var diasMes = daysInMonth({{mes}},{{year}});
                var meses2= new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

                for (var i = 0; i < diasMes; i++) {
                    NombreDias[i]=monitor[i]['dia'];
                    finalizadosDias[i]=parseInt(monitor[i]['total']);
                    finalizadosenTiempoDias[i]=parseInt(monitor[i]['totalenTiempo']);
                    if (finalizadosDias[i]==0) resolucionDias[i]=0;
                    else resolucionDias[i]=parseFloat(parseFloat(finalizadosenTiempoDias[i]/finalizadosDias[i]).toFixed(2)*100);
                }

                for (var i = 0; i < monitor2.length; i++) {
                    finalizadosMes[i]=parseInt(monitor2[i]['total']);
                }

                for (var i = 0; i < monitor2EnTiempo.length; i++) {
                    finalizadosenTiempoMes[i]=parseInt(monitor2EnTiempo[i]['total']);
                    if (finalizadosMes[i]==0) resolucionMes[i]=0;
                    else resolucionMes[i]=parseFloat(parseFloat(finalizadosenTiempoMes[i]/finalizadosMes[i]).toFixed(2)*100);
                }

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

                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 (Diario)
                var chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'graficaCerradosDia',
                        type: 'Combination chart',
                    },
                    title: {
                        text: '{{ 'monitoriv.completed' | trans  }} ({{ 'monitoriii.daily' | trans }})'
                    },
                    xAxis: {
                        categories: NombreDias,
                        labels: {
                            rotation: -45,
                            style: {
                                fontSize: '13px',
                                color: 'black',
                                fontFamily: 'Verdana, sans-serif'
                            }
                        }
                    },
                    plotOptions: {
                        series: {
                            cursor: 'pointer',
                            point: {
                                events: {
                                    click: function (e) {
                                        $('#myModal .modal-body').empty().isLoading();
                                        generateModal('{{ path('monitor_DetalleSitiosTerminados',{'idproyectos':idproyectos})}}?year='+{{year}}+'&mes='+{{mes}}+'&dia='+(this.x+1));
                                        $('#myModal').modal('show');
                                    }
                                }
                            }
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            if (this.series.name=='Resolución') {
                                return '<b> {{ 'monitoriv.label.day' | trans }}: ' + this.x + '</b><br/>{{ 'monitoriv.label.resolution' | trans }}: '+this.y+'%';
                            }else
                                return '<b> {{ 'monitoriv.label.day' | trans }}: ' + this.x + '</b><br/>{{ 'monitorii.total' | trans }}: '+this.y;
                        }
                    },
                    series: [{
                        name: '{{ 'monitoriv.label.completed' | trans }}',
                        type: 'column',
                        color: '#000099',
                        dataLabels: {
                            enabled: true,
                            rotation: -90,
                            color: '#FFFFFF',
                            align: 'center',
                            y: 7, // 10 pixels down from the top
                            style: {
                                fontSize: '10px',
                                fontFamily: 'Verdana, sans-serif'
                            }
                        },
                        pointWidth: 15
                    },{
                        name: '{{ 'monitoriv.label.completedontime' | trans }}',
                        type: 'column',
                        color: '#73D7F6',
                        dataLabels: {
                            enabled: true,
                            rotation: -90,
                            color: 'black',
                            align: 'center',
                            y: 7, // 10 pixels down from the top
                            style: {
                                fontSize: '10px',
                                fontFamily: 'Verdana, sans-serif'
                            }
                        },
                        pointWidth: 15
                    },{
                        type: 'spline',
                        name: '{{ 'monitoriv.label.resolution' | trans }}',
                        marker: {
                            lineWidth: 2,
                            lineColor: Highcharts.getOptions().colors[3],
                            fillColor: 'white'
                        },
                        yAxis: 1,
                    }],
                    yAxis: [{
                        min: 0,
                        title: {
                            text: '{{ 'monitoriv.completed' | trans }}'
                        }
                    }, {
                        title: {
                            text: ''
                        },
                        max:110,
                        min:0,
                        opposite: true
                    }],
                    legend: {
                        enabled: true
                    },
                    dataLabels: {
                        enabled: true,
                        rotation: -90,
                        color: '#FFFFFF',
                        align: 'right',
                        y: 10, // 10 pixels down from the top
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }

                });

                //Sitios Terminados con Documentación (Mensual)
                var chart2 = new Highcharts.Chart({
                    chart: {
                        renderTo: 'graficaCerradosMes',
                        type: 'Combination chart',
                    },
                    title: {
                        text: '{{ 'monitoriv.completed' | trans }} ({{ 'monitoriii.monthly' | trans }})'
                    },
                    xAxis: {
                        categories: mesRegion,
                        labels: {
                            rotation: -45,
                            style: {
                                fontSize: '13px',
                                fontFamily: 'Verdana, sans-serif',
                                color: 'black'
                            }
                        }
                    },
                    plotOptions: {
                        series: {
                            cursor: 'pointer',
                            point: {
                                events: {
                                    click: function (e) {
                                        $('#myModal .modal-body').empty().isLoading();
                                        generateModal('{{ path('monitor_DetalleSitiosTerminadosMensual',{'idproyectos':idproyectos})}}?year='+{{year}}+'&mes='+(meses2.indexOf(mesRegion[this.x])+1));
                                        $('#myModal').modal('show');
                                    }
                                }
                            }
                        }
                    },
                    series: [{
                        name: '{{ 'monitoriv.label.completed' | trans }}',
                        type: 'column',
                        color: '#000099',
                        dataLabels: {
                            enabled: true,
                            color: '#FFFFFF',
                            align: 'center',
                            y: 20, // 10 pixels down from the top
                            style: {
                                fontSize: '10px',
                                fontFamily: 'Verdana, sans-serif'
                            }
                        }
                        //,pointWidth: 28
                    },{
                        name: '{{ 'monitoriv.label.completedontime' | trans }}',
                        type: 'column',
                        color: '#73D7F6',
                        dataLabels: {
                            enabled: true,
                            color: 'black',
                            align: 'center',
                            y: 20, // 10 pixels down from the top
                            style: {
                                fontSize: '10px',
                                fontFamily: 'Verdana, sans-serif'
                            }
                        }
                        //,pointWidth: 28
                    },{
                        type: 'spline',
                        name: '{{ 'monitoriv.label.resolution' | trans }}',
                        marker: {
                            lineWidth: 2,
                            lineColor: Highcharts.getOptions().colors[3],
                            fillColor: 'white'
                        },
                        yAxis: 1,
                    }],
                    yAxis: [{
                        min: 0,
                        title: {
                            text: '{{ 'monitoriv.completed' | trans }}'
                        }
                    }, {
                        title: {
                            text: '',
                        },
                        min:0,
                        max:110,
                        opposite: true
                    }],
                    legend: {
                        enabled: true
                    },
                    tooltip: {
                        formatter: function () {
                            if (this.series.name=='Resolución') {
                                return '<b> {{ 'monitoriii.month' | trans }}: ' + this.x + '</b><br/>{{ 'monitoriv.label.resolution' | trans }}: '+this.y+'%';
                            }else
                                return '<b> {{ 'monitoriii.month' | trans }}: ' + this.x + '</b><br/>{{ 'monitorii.total' | trans }}: '+this.y;
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        rotation: -90,
                        color: '#FFFFFF',
                        align: 'right',
                        y: 10, // 10 pixels down from the top
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }

                });

                //Grafica Diaria
                chart.series[0].setData(finalizadosDias);
                chart.series[1].setData(finalizadosenTiempoDias);
                chart.series[2].setData(resolucionDias);
                //Grafica Mensual
                chart2.series[0].setData(finalizadosMes);
                chart2.series[1].setData(finalizadosenTiempoMes);
                chart2.series[2].setData(resolucionMes);

                //LEAD TIME

                var categories = new Array();
                var ltsr = new Array();
                for(var k = 0; k<leadTime.length; k++){

                    categories.push(leadTime[k]['WEEK']);
                    ltsr.push(parseFloat(leadTime[k]['LT SR'],2));
                }

                var cuartaGraficaOpt ={
                    chart: {
                        type: 'line',
                        renderTo: 'cuarta_grafica'
                    },
                    title: {
                        text: 'LEAD TIME CSR'
                    },

                    xAxis: {
                        categories: categories
                    },
                    yAxis: {
                        min: 0,
                        max: null,
                        title: {
                            text: 'LEADTIME'
                        }
                    },
                    plotOptions: {
                        line: {
                            dataLabels: {
                                enabled: true
                            },
                            enableMouseTracking: false
                        }
                    },
                    series: [{
                        name: 'LT SR',
                        data: ltsr
                    }]
                };
                if (leadTime.length > 0){
                    var chart4  = new Highcharts.Chart(cuartaGraficaOpt);
                    $("#cuarto_reporte").empty();
                    $("#cuarto_reporte").append(createTable(leadTime));
                }

                $.isLoading("hide");
            });
        }
    </script>
{% endblock %}