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

{% endblock %}

{% block dashboard %}
    <style>

        .double-scroll {
            width: 400px;
        }
        .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-claro {
            color: #fff;
            background-color: #aa0001;
            border-color: #e06a70;
        }
        .btn-claro:hover, .btn-claro:focus {
            color: #fcfcfc;
            text-decoration: none;
        }

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

    <script src="{{asset('js/jquery.doubleScroll.js')}}" type="text/javascript"></script>

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




    <script>
        $(function () {


            $('.double-scroll').doubleScroll();
            $('#chart1').doubleScroll({
                resetOnWindowResize: true
            });



            var starYear = 2016;
            var d = new Date();
            var year = d.getFullYear();
            var month = new Array();



            for(var i=starYear; year >= i;i++ )
            {
                $('#ano').append($("<option/>", {
                    value: i,
                    text: i
                }));

            }

            month[0] = "ENERO";
            month[1] = "FEBRERO";
            month[2] = "MARZO";
            month[3] = "ABRIL";
            month[4] = "MAYO";
            month[5] = "JUNIO";
            month[6] = "JULIO";
            month[7] = "AGOSTO";
            month[8] = "SEPTIEMBRE";
            month[9] = "OCTUBRE";
            month[10] = "NOVIEMBRE";
            month[11] = "DICIEMBRE";
            var n = month[d.getMonth()];
            var options = new Array();
            var semana = ISO8601_week_no(new Date()) - 1;
            for(var i=semana;i>=1;i--){

                $('#semana').append($("<option/>", {
                    value: i,
                    text: i
                }));
            }

            $("#ano").change(function(){
                var yearSelected = parseInt($(this).val());
                var semana = ISO8601_week_no(new Date()) - 1;

                $('#mes').empty();

                for(var i=0;i<month.length;i++) {
                    if (yearSelected < year) {
                        $('#mes').append($("<option/>", {
                            value: i + 1,
                            text: month[i]
                        }));
                    }else if(i <=  d.getMonth()){
                        $('#mes').append($("<option/>", {
                            value: i + 1,
                            text: month[i]
                        }));

                    }
                }
                $('#semana').empty();

                if (yearSelected < year) {
                    var semana = 52;
                    for(var i=semana;i>=1;i--){

                        $('#semana').append($("<option/>", {
                            value: i,
                            text: i
                        }));
                    }

                }else{

                    for(var i=semana;i>=1;i--){

                        $('#semana').append($("<option/>", {
                            value: i,
                            text: i
                        }));
                    }
                }

            });

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

                if(i <=  d.getMonth()){

                    options.push( );

                    $('#mes').append($("<option/>", {
                        value: i + 1,
                        text: month[i]
                    }));

                }
            }


            $("#tipoBusqueda").on('change load',function(){

                $(this).val() == 'mes' ? $("#mes").removeAttr('class','hide'):$("#mes").addClass('hide');
                $(this).val() == 'semana' ? $("#semana").removeAttr('class','hide'):$("#semana").addClass('hide');
            });


            $("#generar").click(function(){
                if( $("#ano").val()!=""){
                    getChart();
                }
                else{
                    console.log("a");
                }
            });
        });


        function ISO8601_week_no(dt){
            var tdt = new Date(dt.valueOf());
            var dayn = (dt.getDay() + 6) % 7;
            tdt.setDate(tdt.getDate() - dayn + 3);
            var firstThursday = tdt.valueOf();
            tdt.setMonth(0, 1);
            if (tdt.getDay() !== 4)
            {
                tdt.setMonth(0, 1 + ((4 - tdt.getDay()) + 7) % 7);
            }
            return 1 + Math.ceil((firstThursday - tdt) / 604800000);
        }

        function getChart() {

            datos = {};

            datos['anio']=$('#ano').val();

            datos['mes']=$('#mes').val();

            datos['region'] = $("#region").val();

            datos['contrato'] = $("#contrato").val();

            datos['usuario'] = $("#usuario").val();


            //console.log(datos['anio'], datos['mes'], datos['region'],datos['contrato'],datos['usuario']);



            $.getJSON('{{ path('reportemsmexico_porVencer') }}',datos,function (data) {
                
               console.log(data.grafico_r);
                
                
                $("#tabla").empty();
                var chart = data;
                if (chart.grafico1.length > 0) {
                    var categoria1 = getDataToObject(chart.grafico1, Object.keys(chart.grafico1[0]), 0, false);
                    
                    var categoria2 = getDataToObject(chart.grafico_r, Object.keys(chart.grafico_r[0]), 0, false);

                    //console.log(categoria1);
                    var chart1 = getDataToObjectBar(chart.grafico1, Object.keys(chart.grafico1[1]));
                    
                    var chart2 = getDataToObjectBar(chart.grafico_r, Object.keys(chart.grafico_r[1]));
                }

                if (chart.grafico1.length > 0) createChartBar('chart1', categoria1, chart1,'#7cb5ec'); 
                else {
                    $("#tabla").empty();
                    $("#chart1").empty();
                    $("#chart1").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
                }
                
                if (chart.grafico_r.length > 0) createChartBar('chart2', categoria2, chart2,'#434348'); 
                else {
                    $("#chart2").empty();
                    $("#chart2").append('<div class="alert alert-warning" role="alert">NO SE HA ECONTRADO DATA</div>');
                }
                

            });

        }



        function getDataToObject(data,header ,key,int) {
            var arrayReturn = new Array();
            for(var i = 0; i< data.length; i++){

                var valor = data[i][header[key]];

                if(int){
                    valor = parseInt(data[i][header[key]]);
                }

                arrayReturn.push(valor);
            }

            return arrayReturn;
        }

        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[1]]));

            }

            arrayReturn.push({'name': header[1], 'data': data1});


            return arrayReturn;
        }

        function createChartBar(render,categoria,data,colorA){
            var options = {
                chart: {
                    renderTo: render,
                    type: 'column',
                    height:400,
                    width:1200
                },
                title: {
                    text: ''
                },
                colors: [
                    colorA
                ],
                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;
                        }
                    }
                },
                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function (e) {
                                    $('#myModal .modal-body').empty().isLoading();

                                    generateModal('{{path('reportemsmexico_reportemsMexicoPorVencerDetalle')}}?dia='+this.category+'&anio='+$('#ano').val()+'&mes='+$('#mes').val()+'&region='+$("#region").val()+'&contrato='+$("#contrato").val()+'&usuario='+$("#usuario").val());


                                    $('#myModal').modal('show');
                                }
                            }
                        }
                    }
                },
                legend: {
                    reversed: true
                },


                series: data
            };

            return $('#' +render).highcharts(options);
        }


        function generateModal(ruta){

            $('#tabla').empty();

            $.getJSON(ruta,function(data){

                $('#tabla').isLoading();



                console.log(data.monitor.length);

                if ( data.monitor.length == 0 ) {

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

                var monitor = data.monitor,
                    header = Object.keys( data.monitor[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>";
                $('#tabla').isLoading('hide').html(table);
            });

        }



    </script>


    <div class="container">

        <div class="row">

            <p class="text-center" style="font-size: 14pt;font-weight: bold;">
                MONITOR WFM MS MEXICO POR VENCER DIARIO
            </p>

        </div>


        <div class="row" style="padding-top: 40px;">

            <div class="col-lg-2" id="parametros">

                <select class="form-control" id="ano">
                    <option value="">{{'Seleccione Año' | trans}}</option>

                </select>
            </div>
            <div class="col-lg-2" id="parametros">

                <select class="form-control" id="tipoBusqueda">
                    <option value=""> {{'Seleccione Fecha' | trans}}</option>

                    <option value="mes">{{'monitoriii.month' | trans}}</option>

                    <option value="ano">{{'monitoriii.year' | trans}}</option>
                </select>
            </div>
            <div class="col-lg-2" id="parametros" >
                <select class="hide" id="mes">



                </select>
                <select class="hide" id="semana">



                </select>
            </div>

        </div>



        <div class="row" style="padding-top: 40px">

            <div class="col-lg-2" id="parametros" >
                <select  id="region">
                    <option value="TODOS">{{'inbox.all' | trans}}</option>
                    <option value="Region 1">Region 1</option>
                    <option value="Region 2">Region 2</option>
                    <option value="Region 3">Region 3</option>
                    <option value="Region 4">Region 4</option>
                    <option value="Region 4">Region 5</option>
                    <option value="Region 6">Region 6</option>
                    <option value="Region 4">Region 7</option>
                    <option value="Region 4">Region 8</option>
                    <option value="Region 9">Region 9</option>
                </select>
            </div>

            <div class="col-lg-2">

                <div>
                    <select id="contrato" name="Customer">
                        <option>Contrato*</option>

                        {% for dContrato in dataContrato %}
                            <option value="{{ dContrato.contrato}}"> {{ dContrato.contrato }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="col-lg-3">
                <div>
                    <select id="usuario" name="Customer">
                        <option>Usuario*</option>
                        {% for dUsuario in dataUsuario %}
                            <option value="{{ dUsuario.usuario}}"> {{ dUsuario.usuario }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="col-lg-1">
                <button class="btn btn-primary" id="generar">{{'ticketDetail.boton.generar' | trans}}</button>
            </div>

        </div>


        <div class="row"  style="padding-top: 20px">

            <div   id="chart2">

            </div>

        </div> <!-- end row1-->



        <div class="row"  style="padding-top: 20px">

            <div   id="chart1">

            </div>

        </div> <!-- end row1-->


        <div class="row"  style="padding-top: 20px; padding-bottom: 20px">

            <div   id="tabla">

            </div>

        </div> <!-- end row1-->






    </div> <!-- end container-->







{% endblock %}