var _estado = 1;
var _data = {};
var _resp = {};
var _busInfo = 0;

function setLblLastLoad(){
    $('#lblLastLoad').html('Consultado: ' + new Date(Date.now()).toLocaleString());
}

function llenarComboColores(){
    $('#showColors').html('<option value="todos" selected>Todos</option>');
    for(var _item in window.names){
        $('#showColors').append('<option value="'+_item+'">'+eval('window.names.'+_item)+'</option>');
    }
}

function fechas(_fecha){
    if(_fecha == undefined){
        return "N/D";
    }else{
        var mili = Date.parse(_fecha);
        var d = new Date(mili);
        d = new Date(d)
        return d.toLocaleString();
    }
}

function buscarInfo(){
    $('.titPrin').html('Cargando...');
    hideAll();
    $('#loader').show();

    $.ajax({
        'url' : '/statusdevice',
        'method' : 'POST',
        'async' : 'true',
        'headers':{
            'Authorization': 'Bearer ' +  $('#tokenID').val()
        },
        success: function(response){
            if(response['error'] == undefined){

                var listaBuses = "";
                _resp = response;
                for(var key in response){
                    if(key != 'resume'){
                        listaBuses += "<div class=\"listaDivItem\">" +
                            "<div class=\"imageListBus\">"+
                                "<div class=\"divImgPng\">"+
                                    "<img class=\"pngBus\" src=\"/static/img/"+ eval('window.pngBuses.'+response[key]['alerta']) +"\" alt=\"Bus\">"+
                                "</div>"+
                            "</div>"+
                            "<div class=\"textoListBus\">"+
                                "<p class=\"ecoBusLista\">" + response[key]['eco'] + "</p>"+
                                "<p class=\"descBusLista\">" + eval('window.legends.' + response[key]['alerta']) + "</p>"+
                            "</div>"+
                            "<div class=\"detalleBus\">"+
                                "<img class=\"pngDet"+(response[key]['fechaUltConexion'] == null ? 'No': '')+"\" atr-mon=\"" + key + "\" src=\"/static/img/flecha.png\" alt=\"Info+\">"+
                            "</div>"+
                        "</div>";
                    }
                }

                $('.listaDiv').html(listaBuses);
                $('.pngDet').on('click',function(){
                    $('#bInfoEco').html(_resp[$(this).attr('atr-mon')]['eco']);
                    $('#bInfoEdo').html(eval('window.legends.' + _resp[$(this).attr('atr-mon')]['alerta']));
                    $('#bInfPng').html('<img class="pngBusB" src="/static/img/bus_'+ _resp[$(this).attr('atr-mon')]['alerta'] +'.png" alt="Bus"></img>');
                    $('#bInfD01').html(_resp[$(this).attr('atr-mon')]['diasSinConexion'] + (_resp[$(this).attr('atr-mon')]['diasSinConexion']==1 ? ' día' :' días'));
                    $('#bInfD02').html(fechas( _resp[$(this).attr('atr-mon')]['fechaUltConexion'] ));
                    if (_resp[$(this).attr('atr-mon')]['lat'] != undefined &&  _resp[$(this).attr('atr-mon')]['lon'] != undefined){
                        $('#bInfD03').html('<a target="_blank" href="https://www.google.com/maps/search/' + _resp[$(this).attr('atr-mon')]['lat'] +',+'+ _resp[$(this).attr('atr-mon')]['lon'] +'/@'+_resp[$(this).attr('atr-mon')]['lat'] +','+_resp[$(this).attr('atr-mon')]['lon']+',17z' + '">' + _resp[$(this).attr('atr-mon')]['lat']+', '+ _resp[$(this).attr('atr-mon')]['lon'] + '</a>')
                    }else{
                        $('#bInfD03').html('N/D');
                    }
                    $('#bInfD04').html(_resp[$(this).attr('atr-mon')]['nRecibidos']);
                    $('#bInfD05').html(_resp[$(this).attr('atr-mon')]['sRecibidos']);
                    $('#bInfD06').html(fechas( _resp[$(this).attr('atr-mon')]['fechorUltimoEnviado'] ));
                    $('#bInfD07').html(fechas( _resp[$(this).attr('atr-mon')]['fechorUltimoRecibido'] ));
                    $('#bInfD08').html(_resp[$(this).attr('atr-mon')]['bRecibidos']);
                    $('#bInfD09').html(fechas( _resp[$(this).attr('atr-mon')]['fechorUltimoTransp'] ));
                    $('#bInfD10').html(_resp[$(this).attr('atr-mon')]['transpTester']);
                    $('#bInfD11').html('-');
                    var _fechasTester = '';
                    $(_resp[$(this).attr('atr-mon')]['fechtranspTester']).each(function(i,e){
                        _fechasTester += '<p class="ecoBusListaB">' + fechas(e[0]) + '</p>'
                    });
                    $('#bInfD11').html(_fechasTester);
                    _busInfo = $(this).attr('atr-mon');

                    if(_resp[$(this).attr('atr-mon')]['transpTester'] > 0){
                        $('#lbMsjTest').show();
                        $('#bInfD11').show();
                    }else{
                        $('#lbMsjTest').hide();
                        $('#bInfD11').hide();
                    }

                    changeState(3);
                })
                filtrarBuses();
                    $('#infoDatos > p').html('Unidades: ' + response['resume']['total']);
                    if (response['resume']['total'] > 0){
                        var tabla = "<tr><th>Color</th><th>Autobuses</th><th>%</th></tr>";
                        for (var x in response['resume']){
                            if(x != 'total'){
                                var key = 'window.chartColors.'+ x;
                                tabla += "<tr><td class=\"color\" style=\"background-color : "+ eval(key) +" \">"+ eval('window.names.'+x) +"</td><td>" + response['resume'][x] + "</td><td>" + Math.round(((response['resume'][x]/response['resume']['total'])*10000))/100 + "%</td></tr>"
                            }
                        }
                        $('table.resumen').html(tabla);
                        var _aData = new Array();
                        var _aColors = new Array();
                        var _aLabels = new Array();
                        for (var _color in response['resume']){
                            if (_color != 'total'){
                                _aData.push(response['resume'][_color]);
                                _aColors.push(eval('window.chartColors.'+_color));
                                _aLabels.push(eval('window.names.'+_color));
                            }
                        }
                        var config = {
                            type: 'pie',
                            data: {
                                datasets: [{
                                    data: _aData,
                                    backgroundColor: _aColors,
                                    label: 'Dataset 1'
                                }],
                                labels: _aLabels
                            },
                            options: {
                                responsive: true,
                                legend: {
                                    position : 'bottom',
                                    display: false
                                }
                          }
                        };
                    }
                    $('#loader').hide();

                    if(_estado == 3){
                        $('.pngDet').each(function(){
                            if($(this).attr('atr-mon') == _busInfo){
                                $(this).click();
                            }
                        });
                    }else{
                        changeState(_estado);
                    }
                    $('#canvas-holder').html('<canvas id="chart-area"></canvas>');
                    var ctx = document.getElementById('chart-area').getContext('2d');
                    ctx.clearRect(0, 0, $('#chart-area')[0].width, $('#chart-area')[0].height);
                    window.myPie = new Chart(ctx, config);
                    $('.titPrin').html('');
                }else{
                    $('#loader').hide();
                    changeState(0);
                    $('.titPrin').html(response['error']);
                }
                setLblLastLoad();
                $('#reload').show();
        },
        statusCode: {
            500: function(response){
                $('.titPrin').html("500!, intente de nuevo");
                $('#loader').hide();
                $('#reload').show();
            },
            502: function(response){
                $('.titPrin').html("502!, intente de nuevo");
                $('#reload').show();
            },
            401: function(responseError){
                $('.titPrin').html('Unauthorized');
                $('#loader').hide();
                $('#reload').hide();
            }
        }
    });
}

function hideAll(){
    $('.principal').hide();
    $('.detail').hide();
    $('.detailBus').hide();
}

function changeState(nEstado){
    _estado = (nEstado > 0 && nEstado <=3 ) ? nEstado : 0;
    switch(nEstado){
        case 1: //Pantalla Principal
            $('.detailBus').hide();
            $('.detail').hide();
            $('.principal').show();
            break;
        case 2: //Lista Unidades
            $('.principal').hide();
            $('.detailBus').hide();
            $('.detail').show();
            break;
        case 3: //Detalle unidad
            $('.detail').hide();
            $('.principal').hide();
            $('.detailBus').show();
            break;
        default:
            hideAll();
    }
    $('body').scrollTop(0);

}

function filtrarBuses(){
    if($('#nBus').val().length >= 1){
        var patt = new RegExp($('#nBus').val());
        var res = false;
        var res2 = false;
        $('.ecoBusLista').each(function(){
            res = patt.test($(this).html());
            //console.log($(this).parents('.listaDivItem').children('.imageListBus').children('.divImgPng').children('.pngBus').attr('src'));
            res2 = $('#showColors').val() == 'todos' ? true : $(this).parents('.listaDivItem').children('.imageListBus').children('.divImgPng').children('.pngBus').attr('src')=='/static/img/bus_'+$('#showColors').val()+'.png';
            if(res && res2){
                $(this).parents('.listaDivItem').show();
            }else{
                $(this).parents('.listaDivItem').hide();
            }
        });
    }else{
        if($('#showColors').val() == 'todos'){
            $('.listaDivItem').show();
        }else{
            $('.pngBus').each(function(){
                if($(this).attr('src')=='/static/img/bus_'+$('#showColors').val()+'.png'){
                    $(this).parents('.listaDivItem').show();
                }else{
                    $(this).parents('.listaDivItem').hide();
                }
            });
        }
    }
}

function iniciar(){

    $('#reload').click(function(){
        $('#reload').hide();
        buscarInfo();
    });

    $('#nBus').keyup(function(){
        filtrarBuses();
     });

     $('#showDetail').click(function(){
         changeState(2);
     });

     $('#retDetail').click(function(){
         changeState(1);
     });

     $('#retInfo').click(function(){
         changeState(2);
     });

     $('.pngSearch').click(function(){
         $('#nBus').focus();
     });

     $('#showColors').change(function(){
         filtrarBuses();
     });

    llenarComboColores();

    $('.titPrin').html('');
}