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

{% block highcharts4 %}{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('datatables/css/dataTables.bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{ asset('datatables/css/buttons.bootstrap.min.css')}}">
    <style>
        @font-face {font-family: ericsson; src: url({{ asset('fonts/ericsson.ttf') }})}
        table {font-size: 12px}
        #menuTop {margin-top: 10px}
        .cell-danger{background-color: #da5c58}
        .cell-success{background-color: #5cb85c}
        .eri-font {font-family: ericsson}
        .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);}
        }
        #menuTop {
            margin-top: 10px;
        }
        .fixed-panel {
            min-height: 100px;
            max-height: 200px;
            overflow-y: scroll;
        }
        #parametros .panel-body .row{
            padding-left: 5px;
        }
        #chart .panel-body {
             padding: 0px;
        }
        .btn {
            color: #fff;
            background-color: #00569C;
            border-color: #3D59CA;
        }
        .btn:hover, .btn:focus {
            color: #fcfcfc;
            text-decoration: none;
        }                        
    </style>
{% endblock %}
{% block dashboard %}
    <br><br><br>
    <!-- TITULOS DE LOS FILTROS -->
    <div class="row">
        <div class="col-lg-2" style="margin-top: 1%"><label>{{'monitor.etiqueta.fechaI' | trans}}:</label></div>
        <div class="col-lg-2" style="margin-top: 1%"><label>{{'monitor.etiqueta.fechaF' | trans}}:</label></div>
        <div class="col-lg-2" style="margin-top: 1%"><label>Solicitante:</label></div>
        <div class="col-lg-2" style="margin-top: 1%"><label>Responsable:</label></div>
    </div>
    <!-- FILTROS Y BOTON -->
    <div class="row">
        <div class="col-lg-2"  style="margin-top: 1%">
            <input type="text" class="form-control" id="Filtros_fechaIni" value="">
        </div>
        <div class="col-lg-2"  style="margin-top: 1%">
            <input type="text" class="form-control" id="Filtros_fechaFin" value="">
        </div>
        <div class="col-lg-2"  style="margin-top: 1%">
            <input type="text" class="form-control" id="solicitante" value="">
        </div>
        <div class="col-lg-2"  style="margin-top: 1%">
            <input type="text" class="form-control" id="responsable" value="">
        </div>
        <div class="col-lg-2" id="parametros" style="margin-top: 1%">
            <button class="btn" id="generar">{{'ticketDetail.boton.generar' | trans}}</button>
        </div>   
    </div>
    <!-- TITULO DE LA VISTA -->
    <div class="row">
        <div class="col-lg-12 text-center"  style="margin-top: 1%">
            <h1>REPORTE DE ANTICIPOS Y GASTOS</h1>
        </div>
    </div>
    <hr>
    <!-- CONTENEDORES DE LAS DOS GRAFICAS -->
    <div class="row">
        <div id="graficaAsignacionAnticipo" class="col-lg-6"></div>
        <div id="graficaEstadoAnticipo" class="col-lg-6"></div>
    </div>
    <!-- TABLA RESUMEN -->
    <div class="row">
        <hr><div id="monitor2" class="col-lg-12"></div>
    </div>
    <!-- intentar sustituir la tabla por div -->
    <table id="monitor" class="table table-condensed table-bordered nowrap" width="100%">
        <thead class="bg-info"></thead>
        <tbody></tbody>
        <tfoot class="bg-info"></tfoot>
    </table>
{% endblock %}
{% block javascripts %}
    <script src="{{ asset('datatables/moment.min.js') }}"></script>
    <script src="{{ asset('datatables/js/datatables.min.js') }}"></script>
    <script src="{{ asset('datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('datatables/js/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('datatables/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.bootstrap.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.colVis.min.js') }}"></script>
    <script src="{{ asset('datatables/js/jszip.min.js') }}"></script>
    <script src="{{ asset('datatables/js/datetime-moment.js') }}"></script>
    <script src="{{ asset('highcharts5/code/highcharts.js') }}"></script>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script>
    $(document).ready(function() {
        /* $.isLoading({
            text: "Loading"
        });*/
        getChart($('#Filtros_fechaIni').val(),$('#Filtros_fechaFin').val());
        //CONFIGURACION DEL PLUGIN PARA LAS FECHAS
        $('#Filtros_fechaIni').datepicker({
            dateFormat: 'yy-mm-dd',
            onClose: function( selectedDate ) {
                $( "#Filtros_fechaFin" ).datepicker( "option", "minDate", selectedDate );
            }
        }); 
        $('#Filtros_fechaFin').datepicker({
            dateFormat: 'yy-mm-dd',
        });
        $("#generar").click(function(){
            /* $.isLoading({
                text: "Loading"
            });*/
            getChart($('#Filtros_fechaIni').val(),$('#Filtros_fechaFin').val());
        });
    });

    //FUNCION PARA RECARGAR LAS GRAFICAS
    function getChart(inicio, fin){
        $.getJSON("{{ path('ReporteGuatemala_MonitorCjchGT',{'idproyectos':idproyectos}) }}",{'FechaInicio':inicio,'FechaFin':fin}, function (data) {
            var chart = data;
            //ASIGNACION DE ANTICIPOS
            if (chart.asignacion.length>0){
                var chart1 = getDataToObjectBar(chart.asignacion,Object.keys(chart.asignacion[0]));
                createChartBar('graficaAsignacionAnticipo',['opc1','opc2','opc3'],chart1,600);
            }
            //ESTADO DE LOS ANTICIPOS
            /*if (chart.estado.length>0){
                var chart2 = getDataToObjectPie(chart.estado,Object.keys(chart.estado[0]));
            }           
            //TABLA RESUMEN
            if (chart.detalle.length>0){
                //configurar la recarga de la tabla
                //var chart3 = getDataToObjectPie(chart.detalle,Object.keys(chart.detalle[0]));
            }*/
        });
    }

    //FUNCION PARA LA GENERACION DE ARREGLOS NECESARIOS PARA LAS GRAFICAS DE TORTA
    function getDataToObjectPie(data,header) {
        var arrayReturn = new Array();
        for(var i = 0; i< data.length; i++){
            arrayReturn.push({'name': data[i][header[0]], 'y': parseInt(data[i][header[1]])})
        }
        return arrayReturn;
    }

    //FUNCION PARA LA GENERACION DE ARREGLOS NECESARIOS PARA LAS GRAFICAS DE BARRA
    function getDataToObjectBar(data,header) {
        var arrayReturn = new Array();
        var data1 = new Array();
        var data2 = new Array();    
        var data3 = new Array();              
        for(var i = 0; i< data.length; i++){
            data1.push(parseFloat(data[i][header[2]]));
            data2.push(parseFloat(data[i][header[3]]));
            data3.push(parseFloat(data[i][header[4]]));                
        }
        arrayReturn.push({'name': header[2], 'data': data1});    
        arrayReturn.push({'name': header[3], 'data': data2});
        arrayReturn.push({'name': header[4], 'data': data3});           
        return arrayReturn;
    }

    //FUNCION PARA LA CREACION DE GRAFICAS DE BARRAS
    function createChartBar(render,categoria,data,wd){
        var options = {
            chart: {
                renderTo: render,
                type: 'bar',
                spacingBottom: 5,
                spacingTop: 10,
                spacingLeft: 1,
                spacingRight: 1,
                height: wd,
                width: 500
            },
            title: {
                text: ''
            },
            xAxis: {
                categories: categoria,
                title: {
                    text: null
                },
                labels:{
                    style: {
                        fontSize:'9px'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: '',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify',
                    formatter: function() {
                        return this.value;
                    }
                }
            },
            legend: {
                reversed: true
            },
            plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },
            colors: ['#a1c517','#0082b6','#b88fef','#009045','#db004f'],
            series: data
        };
        return $('#' +render).highcharts(options);
    }      

    //FUNCION PARA PA CREACION DE GRAFICAS DE TORTA
    function createChartPie(render,data){
        var options = {
            chart: {
                renderTo: render,
                type: 'pie',
                height: 200,
                width: 500,                    
                options3d: {
                    enabled: true,
                    alpha: 45,                        
                    beta: 0
                }
            },
            title: {
                text: ''
            },
            colors: ['#a1c517','#0082b6','#b88fef','#009045','#db004f'],
            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.y}',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },               
            series: [{
                data: data
            }]
        };
        return $('#' +render).highcharts(options);
    }
    </script>
{% endblock %}