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


{% block dashboard %}
<link rel="stylesheet" href="{{ asset('datatables/css/dataTables.bootstrap.min.css')}}">
<link rel="stylesheet" href="{{ asset('datatables/css/buttons.bootstrap.min.css')}}">
<link rel="stylesheet" href="{{ asset('datatables/css/select.bootstrap.min.css')}}">
<style>

    @font-face {font-family: ericsson; src: url({{ asset('fonts/ericsson.ttf') }})}
    table {font-size: 12px}
    #menuTop {margin-top: 0px}
    .cell-danger{background-color: #da5c58}
    .cell-success{background-color: #5cb85c}
    .eri-font {font-family: ericsson}

    html,body {
        padding:10px;
        margin:0;
        height:100%;
    }

    table td{
        font-size: 10px;
    }
    .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);}
    }

    .col-lg-12{

        padding-left: 10px;
    }
    .table th{
        font-size: 8pt;
    }
    .table td{
        font-size: 9pt;
    }
    table.tablesorter thead tr th, table.tablesorter tfoot tr th {
        color: #fff;
        background-color: #428bca;
        border: 2px solid #FFF;
        font-size: 8pt;
    }

    .btn-claro {
        color: #fff;
        background-color: #00569C;
        border-color: #3D59CA;
    }
    .btn-claro:hover, .btn-claro:focus {
        color: #fcfcfc;
        text-decoration: none;
    }
    .btn-yellow {
        color: #fff;
        background-color: #000000;
        border-color: #ecea19;
    }
    .table th{
        font-size: 8pt;
    }
    .table td{
        font-size: 8pt;
    }

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

    $('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){
        $("#cantidad").html(0);
        $('#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 id="hola" 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  class ='text-center'>" +  monitor[i][header[j]] +"</td>";
                }
                table += "</tr>";
            }

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

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

    function getTotal(valor,key)
    {
        var total = new Array();
        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 () {

        window.pollingPeriod = 40000;
        window.progressInterval;

        window.progressInterval = setInterval(getReporte, window.pollingPeriod);
        window.progressInterval = setInterval(getReporte2, window.pollingPeriod);

        $(function () {
            $("#generar").click(function(){
                $.isLoading({
                    text:       "Loading"
                });
                getReporte();
                getReporte2();

            });

            $('#Filtros_fechaIni').datepicker({
                dateFormat: 'yy/mm/dd',
                onClose: function( selectedDate ) {
                    $( "#Filtros_fechaFin" ).datepicker( "option", "minDate", selectedDate );

                }
            });

            $('#Filtros_fechaFin').datepicker({
                dateFormat: 'yy/mm/dd'
            });

            $("#clear").click(function(){
                $('#Filtros_fechaIni').val("");
                $('#Filtros_fechaFin').val("");
            });

            $('#generar').trigger('click');

        });

        //GRAFICA #1 COTIZACIONES POR REGION/ESTADO

        function getReporte(){

            data = {};
            data['fechaIni'] = $("#Filtros_fechaIni").val();
            data['fechaFin'] = $("#Filtros_fechaFin").val();

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

                var datos  = data.datos;

                if(datos.length === 0){

                    $("#primera_grafica").empty();
                    $("#primera_grafica").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
                    $.isLoading("hide");
                    return false;
                }
                $.isLoading("hide");

                var region = [];
                var estado_NoIniciado= [];
                var estado_Aprobado = [];
                var estado_Rechazado = [];
                var estado_EjecutadoAprobacion = [];
                var estado_EjecutadoSinAprobacion = [];
                var estado_RevisionEricsson = [];
                var estado_Recotizar = [];

                for (var i = 0; i < data.datos.length; i++) {
                    region.push(data.datos[i].region);
                    estado_NoIniciado.push(parseInt(data.datos[i].NO_INICIADO));
                    estado_Aprobado.push(parseFloat(data.datos[i].APROBADO));
                    estado_Rechazado.push(parseInt(data.datos[i].RECHAZADO));

                    estado_EjecutadoAprobacion.push(parseFloat(data.datos[i].EJECUTADO_CON_APROBACION));

                    estado_EjecutadoSinAprobacion.push(parseFloat(data.datos[i].EJECUTADO_SIN_APROBACION));

                    estado_RevisionEricsson.push(parseFloat(data.datos[i].REVISION_INTERNA));

                    estado_Recotizar.push(parseFloat(data.datos[i].RECOTIZAR));

                }

                // Se declara los colores para las series
                var colors = ['#04B431','#02641b','#990000','#0099ff','#004d80','#000099','#00001a'];

                var grafica1 = {
                    chart: {
                        type: 'column',
                        renderTo: 'primera_grafica',
                        options3d:{
                            enabled: true,
                            alpha: 10,
                            beta: 10,
                            viewDistance: 85,
                            depth: 60
                        }
                    },
                    title: {
                        text: 'COTIZACIONES POR REGION/ESTADO'
                    },

                    xAxis: {
                        categories: region
                    },

                    yAxis: {
                        allowDecimals: false,
                        min: 0,
                        title: {
                            text: 'Valores'
                        }
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'red'
                        }
                    },
                    legend: {
                        align: 'center',
                        verticalAlign: 'bottom',
                        layout: 'horizontal',
                        x: 0,
                        y: 15,
                        floating: false,
                        backgroundColor: (Highcharts.theme && Highcharts.theme.background5) || 'white',
                        borderColor: '#CCC',
                        borderWidth: 1,
                        shadow: false,
                        width: 590
                    },
                    tooltip: {
                        headerFormat: '<b>{point.key}</b><br>',
                        pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y}'
                    },
                    plotOptions: {
                        series: {

                            cursor: 'pointer',
                            borderWidth: 0,
                            stacking: 'normal',
                            depth: 60,
                            dataLabels: {
                                enabled: true,
                                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                            },

                            point: {
                                events: {
                                    click: function(e) {

                                        var region = e.currentTarget.category,
                                            fechaIni = $("#Filtros_fechaIni").val(),
                                            fechaFin = $("#Filtros_fechaFin").val();
                                        var estado = this.series.name;

                                        console.log(region);

                                        $('#myModal .modal-body').empty().isLoading();
                                        generateModal('{{ path('detalle_cotizaciones_regionestado')}}?region=' + region + '&fechaI=' + fechaIni +'&fechaF=' + fechaFin + '&estado=' + estado);
                                        $('#myModal').modal('show');
                                    }
                                }
                            }
                        }
                    },

                    series: [{
                        name: 'NO INICIADO',
                        data: estado_NoIniciado,
                        stack: 'estados',
                        color: colors[0]
                    }, {
                        name: 'APROBADO',
                        data: estado_Aprobado,
                        stack: 'estados',
                        color: colors[1]
                    }, {
                        name: 'RECHAZADO',
                        data: estado_Rechazado,
                        stack: 'estados',
                        color: colors[2]
                    }, {
                        name: 'EJECUTADO CON APROBACION',
                        data: estado_EjecutadoAprobacion,
                        stack: 'estados',
                        color: colors[3]
                    },{
                        name: 'EJECUTADO SIN APROBACION',
                        data: estado_EjecutadoSinAprobacion,
                        stack: 'estados',
                        color: colors[4]
                    },{
                        name: 'REVISION ERICSSON',
                        data: estado_RevisionEricsson,
                        stack: 'estados',
                        color: colors[5]
                    },{
                        name: 'RECOTIZAR',
                        data: estado_Recotizar,
                        stack: 'estados',
                        color: colors[6]
                    }
                    ]
                };
                var chart1 = new Highcharts.Chart(grafica1);
            });

        }

        //GRAFICA #2 COTIZACIONES POR REGION/TIPO
        function getReporte2(){

            data = {};
            data['fechaIni'] = $("#Filtros_fechaIni").val();
            data['fechaFin'] = $("#Filtros_fechaFin").val();

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

                var datos  = data.datos;

                if(datos.length === 0){

                    $("#segunda_grafica").empty();
                    $("#segunda_grafica").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
                    $.isLoading("hide");
                    return false;
                }
                $.isLoading("hide");

                var region = [];
                var tipo_hibridos = [];
                var tipo_infra = [];
                var tipo_combustible = [];
                var tipo_motogenerador = [];
                var tipo_telecom = [];
                var tipo_ac = [];

                for (var i = 0; i < data.datos.length; i++) {
                    region.push(data.datos[i].region);
                    tipo_hibridos.push(parseInt(data.datos[i].HIBRIDOS));
                    tipo_infra.push(parseFloat(data.datos[i].INFRAESTRUCTURA));
                    tipo_combustible.push(parseInt(data.datos[i].COMBUSTIBLE));

                    tipo_motogenerador.push(parseFloat(data.datos[i].MOTOGENERADOR));

                    tipo_telecom.push(parseFloat(data.datos[i].TELECOM));

                    tipo_ac.push(parseFloat(data.datos[i].AIRE_ACONDICIONADO));

                }

                // Se declara los colores para las series
                var colors = ['#04B431','#02641b','#990000','#0099ff','#004d80','#000099'];

                var grafica2 = {
                    chart: {
                        type: 'column',
                        renderTo: 'segunda_grafica',
                        options3d:{
                            enabled: true,
                            alpha: 10,
                            beta: 10,
                            viewDistance: 85,
                            depth: 60
                        }
                    },
                    title: {
                        text: 'COTIZACIONES POR REGION/TIPO'
                    },

                    xAxis: {
                        categories: region
                    },

                    yAxis: {
                        allowDecimals: false,
                        min: 0,
                        title: {
                            text: 'Valores'
                        }
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'red'
                        }
                    },
                    legend: {
                        align: 'center',
                        verticalAlign: 'bottom',
                        layout: 'horizontal',
                        x: 20,
                        y: 15,
                        floating: false,
                        backgroundColor: (Highcharts.theme && Highcharts.theme.background5) || 'white',
                        borderColor: '#CCC',
                        borderWidth: 1,
                        shadow: false
                    },
                    tooltip: {
                        headerFormat: '<b>{point.key}</b><br>',
                        pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y}'
                    },
                    plotOptions: {
                        series: {

                            cursor: 'pointer',
                            borderWidth: 0,
                            stacking: 'normal',
                            depth: 60,
                            dataLabels: {
                                enabled: true,
                                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                            },

                            point: {
                                events: {
                                    click: function(e) {

                                        var region = e.currentTarget.category,
                                            fechaIni = $("#Filtros_fechaIni").val(),
                                            fechaFin = $("#Filtros_fechaFin").val();
                                        var tipo = this.series.name;
                                        $('#myModal .modal-body').empty().isLoading();
                                        generateModal('{{ path('detalle_cotizaciones_regiontipo')}}?region=' + region + '&fechaI=' + fechaIni +'&fechaF=' + fechaFin + '&tipo=' + tipo);
                                        $('#myModal').modal('show');
                                    }
                                }
                            }
                        }
                    },

                    series: [{
                        name: 'HIBRIDOS',
                        data: tipo_hibridos,
                        stack: 'tipos',
                        color: colors[0]
                    }, {
                        name: 'INFRAESTRUCTURA',
                        data: tipo_infra,
                        stack: 'tipos',
                        color: colors[1]
                    }, {
                        name: 'COMBUSTIBLE',
                        data: tipo_combustible,
                        stack: 'tipos',
                        color: colors[2]
                    }, {
                        name: 'MOTOGENERDOR',
                        data: tipo_motogenerador,
                        stack: 'tipos',
                        color: colors[3]
                    },{
                        name: 'TELECOM',
                        data: tipo_telecom,
                        stack: 'tipos',
                        color: colors[4]
                    },{
                        name: 'AIRE ACONDICIONADO',
                        data: tipo_ac,
                        stack: 'tipos',
                        color: colors[5]
                    },

                    ]
                };
                var chart2 = new Highcharts.Chart(grafica2);
            });

        }
    });

</script>

<div class="page-header text-center text-muted">
    <!-- <h1 class="eri-font">CAR & CA</h1> -->
</div>

<div class="container-fluid eri-font">
    <div class="row">
        <div class="col-lg-2 pull-right">
            <img id="logo" src="{{ asset('images/LogoTIGO.png') }}"  width="300" height="65">
            <p class="text-center" style="font-size: 14pt;font-weight: bold;"></p>
        </div>
        <div class="row">
            <div class="col-lg-2 top-uno">
                <label>{{'monitor.etiqueta.fechaI' | trans}}:</label>
                <input type="text" class="form-control" id="Filtros_fechaIni" value="{{ dateStart }}">
            </div>
            <div class="col-lg-2 top-uno">
                <label>{{'monitor.etiqueta.fechaF' | trans}}: </label>
                <input type="text" class="form-control" id="Filtros_fechaFin" value="{{ dateEnd }}">
            </div><br>
            <div class="col-lg-4" id="parametros"><br>
                <button class="btn btn-claro" id="generar">{{'ticketDetail.boton.generar' | trans}}</button>&nbsp&nbsp
                <button class="btn btn-claro" id="clear">{{'ticketDetail.boton.limpiar' | trans}}</button>
            </div>
        </div>
    </div><br><br>

    <!--INICIO GRAFICAS -->
    <div class="row">

        <div class="col-lg-6 eri-font"  id="primera_grafica">
        </div>

        <div class="col-lg-6 eri-font"  id="segunda_grafica">
        </div>

    </div>
    <!--FIN GRAFICAS -->

    <!-- Modal -->
    <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content" style=" width:115%;">
                <div class="modal-header ">
                    <!--<div class="col-lg-3 eri-font"  style="margin-top: 1%">
                        Cantidad :<span id="cantidad" class="bold"></span>
                     </div>-->

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><br><br>
                    <div class="btn-group pull-right">
                        <button class="btn btn-claro btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars "></i> {{'Exportar datos de la tabla' | trans}}</button>
                        <ul class="dropdown-menu" role="menu">


                            <li><a href="#" onclick="$('#myModal').tableExport({type: 'excel', escape: 'false'});"> <img src={{ asset("images/xls.png")}} width="15px"> XLS</a></li>

                        </ul>
                    </div>

                    <h2 class="modal-title text-center eri-font" id="myModalLabel"><strong>{{ 'monitorii.detail' | trans }}</strong></h2>
                </div>
                <div class="modal-body eri-font top-uno">

                </div>

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