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

{% block dashboard %}
    <style>

        .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);}
        }
        .btn-amarillo {
            background-color: #F4FF77;
            color: #000;
        }

        .btn-warning {
            color: #000;
        }

        .btn-danger {
            color: #ffffff;
        }
               
        table td{
            text-transform: uppercase;
        }

        .form-group {
            margin-left: 20px;
            margin-top: 30px;
        }
        
        #menuTop { margin-top: 0px; }
        
        #identity {
            font-size: 16px;
            font-weight: bold;
            max-width: 365px;
            max-height: 100px;
            min-height: 55px;
            min-width: 150px;
            word-wrap: break-word;
            margin-bottom: 20px;
        }
        
        #_logo { max-height: 100px;}
        


    </style>
    <div class="page-header">
        <form class="form-inline" id="Filtros" action="{{path ('monitor',{'idproyectos':idproyectos, 'idmodule':idmodule})}}" method="post">
            <div style="height: 100px;">
                <div class="col-lg-2" >
                    <label>{{ 'FECHA INICIO' | trans }} :</label>
                    <input class="form-control" type="text" name="Filtros_fechaIni" id="Filtros_fechaIni">
                </div>
                <div class="col-lg-2" >
                    <label>{{ 'monitor.enddate' | trans }} :</label>
                    <input class="form-control" type="text" name="Filtros_fechaFin" id="Filtros_fechaFin">
                </div>
                <div class="col-lg-2" >                  
                    <label>{{ 'ticketDetail.status' | trans }} :</label>                
                    <select class="form-control" id="Filtros_idestados" name="Filtros_idestados">
                        <option value="TODOS">{{'inbox.all' | trans | upper}}</option>
                        {%for estado in estados%}
                            <option {%if idestadosVista == estado.id%} selected {%endif%} value="{{estado.id}}">{{estado.estado}}</option>
                        {%endfor%}
                    </select>   
                </div>
                <div class="col-lg-2" > 
                    <button class="btn btn-primary" type="button" name="limpiar" id="limpiar" onclick="Limpiar()">
                        {{ 'monitor.reset' | trans }}
                    </button>
                    <button class="btn btn-primary" type="submit" name="guardar_submit" id="guardar_submit">
                        {{ 'inbox.search' | trans }}
                    </button> 
                </div>

                {% if identity is not empty %}
                    {#<div class="form-group pull-right" style="margin-bottom: 100px;">#}
                    <div class="pull-right" style="">    
                        <div class="col-lg-12" id="identity">
                            <div class="col-lg-6"><img class="img-responsive center-block" id="_logo" src="{{ asset( identity.pathLogo ) }}"></div>
                            <div class="col-lg-6" style="margin-top: 5%;">
                                <strong>{{ identity.alias }}</strong>
                            </div>
                        </div>
                    </div>
                  {#  </div>#}
                {% endif %}
            </div>
        </form>     
    </div>   
    
    <div class="row">
        <div class="col-lg-12 col-md-12">          
            {%if fechaFin!=-1 and fechaIni!=-1%}
                <div class="text-primary text-center">Rango Seleccionado: {{fechaIni | date("d/m/Y")}} a {{fechaFin | date("d/m/Y")}}</div>
            {%else%}
                 {%if fechaFin==-1 and fechaIni!=-1%}
                    <div class="text-primary text-center">Rango Seleccionado: {{fechaIni | date("d/m/Y")}} a {{"now" | date("d/m/Y")}}</div>       
                 {%endif%}           
            {%endif%}
        </div>
    </div>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script>

        var translation = {
            'NO INICIADOS' : '{{ 'NO INICIADOS' | trans }}',
            'EN PROCESO': '{{ 'EN PROCESO' | trans }}',
            'SUSPENDIDOS': '{{ 'SUSPENDIDOS' | trans }}',
            'TERMINADOS': '{{ 'TERMINADOS' | trans }}',
            'FINALIZADOS' : '{{ 'FINALIZADOS' | trans }}'
        };

        $(document).ready(function () {         
            $.isLoading({
                text: "Loading"
            });      
        }); 
  
        //LIMPIAR CAMPOS DEL FORMULARIO    
        function Limpiar() {
            $(".error").remove();
            $('#Filtros_fechaIni').val("");
            $('#Filtros_fechaFin').val("");       
            $('#Filtros_idestados').val("");
        }

        //Validar Formulario
        $('#guardar_submit').click(function () {
            $(".error").remove();

            if(($("#Filtros_fechaIni").val() == "") && ($("#Filtros_fechaFin").val() != "") ) {  
                $("#Filtros_fechaFin").focus().after("<span class='error'>Seleccione Fecha Inicio y Fecha Fin</span>");
                return false;  
            }else{
                 $('#guardar_submit').attr('disabled', true);       
                 $("#Filtros").submit();
            }     
        });  
    
    $('#Filtros_fechaIni').datepicker({
            dateFormat: 'yy-mm-dd',
            onClose: function( selectedDate ) {
		     $( "#Filtros_fechaFin" ).datepicker( "option", "minDate", selectedDate );
                     
            }
    }); 
    
    $('#Filtros_fechaFin').datepicker({
            dateFormat: 'yy-mm-dd',
    }); 

        var contador = 0;
        var order = 'DESC';
        var LeadOutTime={{LeadOutTime}};
        var LeadInTime={{LeadInTime}};

        $(function () {
            $('#graficaLeadtime').highcharts({
                chart: {
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                title: {
                    text: ''
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Lead Time',
                    data: [
                        {
                            name: '{{ 'monitor.leadouttime' | trans }}',
                            y: LeadOutTime,
                            sliced: true,
                            selected: true,
                            color: '#FE0909'
                        },{
                            name: '{{ 'monitor.leadintime' | trans }}',
                            y: LeadInTime,
                            sliced: true,
                            selected: true
                        }
                    ]
                }]
            });
        });

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

        function open(){
            
            $('#myModal .modal-body').empty();
            
            $.getJSON($(this).attr('data-load-remote'),function(data){

                var table = "<table class='table table-hover table-condensed'><thead>";
                table += "<tr class='bg-primary'>";
                table += "<th>";
                table += "{{ 'ticketDetail.nroticket' | trans }}";
                table += "</th>";
                table += "<th>";
                table += "{{ 'ticketDetail.code' | trans }}";
                table += "</th>";
                table += "<th>";
                table += "{{ 'ticketDetail.site' | trans }}";
                table += "</th>";
                table += "<th>";
                table += "{{'ticketDetail.region' | trans }}";
                table += "</th>";                
                table += "<th>";
                table += "{{ 'SUPERVISOR' | trans }}";
                table += "</th>";
                table += "<th>";
                table += "{{ 'ticketDetail.modal.stopper' | trans }}";
                table += "</th>";
                table += "<th>";
                table += "{{ 'ticketDetail.modal.cause' | trans }}";
                table += "</th>";
                table += "</tr><thead><tbody>";

                for(var i=0; i<data.length;i++) {
                    table += "<tr>";
                    table += "<td>"; table += data[i].ticket; table += "</td>";
                    table += "<td>"; table += data[i].codigo; table += "</td>";
                    table += "<td align='left'>"; table += data[i].sitio; table += "</td>";
                    table += "<td align='left'>"; table += data[i].region; table += "</td>";                    
                    table += "<td align='left'>"; table += data[i].supervisor.toUpperCase(); table += "</td>";
                    table += "<td align='left'>"; table += data[i].responsable.toUpperCase(); table += "</td>";
                    table += "<td align='left'>"; table += data[i].stopper.toUpperCase(); table += "</td>";
                    table += "</tr>";
                }

                table += "</tbody></table>";

                $('#myModal .modal-body').html(table);

            });

            $('#myModal').modal()
        }        
        
        updateMonitor();

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

        function updateMonitor() {

            $.ajax({
                url: '{{path('monitor_tabla')}}',
                data:{order:order, idproyectos:{{idproyectos}},fechaIni:'{{fechaIni}}',fechaFin:'{{fechaFin}}',idestados:'{{idestados}}'}

            }).done(function (data) {
                $(".dataTable_wrapper").empty();
                $(".dataTable_wrapper").html(data);
            $.ajax({
                url: '{{path('monitor_resumen')}}',
                data:{idproyectos:{{idproyectos}},fechaIni:'{{fechaIni}}',fechaFin:'{{fechaFin}}'}

                }).done(function (data) {

                    var monitor = data.monitor;
                    var idestado = new Array();
                    if (monitor.length > 0){
                        var header = Object.keys(monitor[0]);
                        var table = '<table class="table table-bordered table-hover table-striped table-condensed"><thead><tr class="bg-primary">';
                        for (var j = 0; j < header.length; j++) {

                            table += "<th class='text-center'>" + header[j] + "</th>"
                            
                            var estado=0;
                            switch(header[j]) {
                                case 'NO INICIADOS':
                                    estado=0;
                                    break;
                                case 'EN PROCESO':
                                    estado=134;
                                    break;
                                case 'INICIADO':
                                    estado=3238;
                                    break;                                    
                                case 'SUSPENDIDOS':
                                    estado=103;
                                    break;
                                case 'LISTO PARA CUTOVER':
                                    estado=183;
                                    break;
                                case 'EN CUTOVER':
                                    estado=184;
                                    break;
                                case 'TERMINADOS':
                                    estado=102;
                                    break;
                                case 'FINALIZADOS':
                                    estado=104;
                                    break;
                            }  
                            
                            idestado[j]=estado;
                        }
                        table += "<th class='text-center'>TOTAL</th>";
                        table += "</tr></thead>";

                        for (var i = 0; i < monitor.length; i++) {
                            var suma = 0;
                            table += "<tr>";
                            for (var j = 0; j < header.length; j++) {

                                link =  '<a  class="openModal" data-toggle="modal"  data-remote-target="#myModal .modal-body" data-load-remote="{{ path('VentanaDetalleSitiosPorEstatus',{'proyectos':idproyectos,'fechaIni':fechaIni,'fechaFin':fechaFin})  }}?estado='+idestado[j]+'&region='+ monitor[i][header[0]] +'">';
                                linkClose = '</a>';

                                if (j != 0 && parseInt(monitor[i][header[j]]) != 0) {
                                    table += "<td>" + link + monitor[i][header[j]] + linkClose + "</td>";
                                } else {
                                    table += "<td>" + monitor[i][header[j]] + "</td>";
                                }                                
                                if (j > 0) suma += parseInt(monitor[i][header[j]]);
                            }

                            var l =  '<a  class="openModal" data-toggle="modal"  data-remote-target="#myModal .modal-body" data-load-remote="{{ path('VentanaDetalleSitiosPorEstatus',{'proyectos':idproyectos,'fechaIni':fechaIni,'fechaFin':fechaFin})  }}?estado=null&region='+ monitor[i][header[0]] +'">',
                                lClose = '</a>';
                                table += "<td>" + l + suma + lClose + "</td>";
                            table += "</tr>";
                        }
                        table += "<tr><td>TOTAL</td>"

                        for (var j = 0; j < header.length; j++) {
                            var suma = 0,
                                estados = {
                                    'NO INICIADOS': 0,
                                    'EN PROCESO': 134,
                                    'SUSPENDIDOS': 103,
                                    'LISTO PARA CUTOVER': 183,
                                    'EN CUTOVER': 184,
                                    'TERMINADOS': 102,
                                    'FINALIZADOS': 104
                                };

                            for (var i = 0; i < monitor.length; i++) {
                                if (j > 0) suma += parseInt(monitor[i][header[j]]);
                            }

                            if(j !=0){
                
                                var link =  '<a  class="openModal" data-toggle="modal"  data-remote-target="#myModal .modal-body" data-load-remote="{{ path('VentanaDetalleSitiosPorEstatus',{'proyectos':idproyectos,'fechaIni':fechaIni,'fechaFin':fechaFin})  }}?estado='+ estados[ header[j] ] +'&region=null">',
                                linkClose = '</a>';
                                table += "<td>" + link + suma + linkClose + "</td>";
                            }

                        }

                        table += "</tr>";

                        table += "</table>";
                        $("#tablaResumen").empty();


                        var translationHeader = Object.keys(translation);

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

                            table = table.replace(translationHeader[i],translation[translationHeader[i]]);


                        }
                        $("#tablaResumen").append(table);
                    }
                   $.isLoading("hide");
                });

            }).error(function (data) {});
        }
       
    </script>

<div class="panel-body col-lg-8">
    <div id="tablaResumen"></div>
</div>

<div class="panel-body col-lg-4">
    <div id="graficaLeadtime" style="height: 270px;"></div>
</div>

<div class="panel-body">
    <div class="dataTable_wrapper" style="width: 100%; overflow-x: auto"></div>
</div>
    
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body"></div>
            <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">
                Close&nbsp;<span class="glyphicon glyphicon-remove"></span>
            </button>
            </div>
        </div>
    </div>
</div>   
{% endblock %}