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

{% endblock %}


{% block dashboard %}
    <style>

        .pager {
            padding-left: 0;
             margin: 0;
            text-align: left;
            list-style: none;
        }
        /* pager wrapper, in thead/tfoot */
        td.pager {
            background-color: #e6eeee;
        }
        /* pager navigation arrows */
        .pager img {
            vertical-align: middle;
            margin-right: 2px;
        }
        /* pager output text */
        .pager .pagedisplay {
            font-size: 11px;
            padding: 0 5px 0 5px;
            width: 50px;
            text-align: center;
        }

        /*** loading ajax indeterminate progress indicator ***/
        #tablesorterPagerLoading {
            background: rgba(255,255,255,0.8) url(icons/loading.gif) center center no-repeat;
            position: absolute;
            z-index: 1000;
        }

        /*** css used when "updateArrows" option is true ***/
        /* the pager itself gets a disabled class when the number of rows is less than the size */
        .pager.disabled {
            display: none;
        }
        /* hide or fade out pager arrows when the first or last row is visible */
        .pager img.disabled {
            /* visibility: hidden */
            opacity: 0.5;
            filter: alpha(opacity=50);
        }

        .tablesorter-pager select {
            margin: 0;
            padding: 0;
            width: 50px;
        }

        #detalle #tableDetails {
            font-size: 10px;
        }
        .btn-claro {
            color: #fff;
            background-color: #aa0001;
            border-color: #e06a70;

        }
        .btn-claro:hover, .btn-claro:focus {
            color: #fcfcfc;
            text-decoration: none;
        }        
        
        .double-scroll {
            width: 100%;
            margin-bottom: 40px;
        }
        /* pager wrapper, div */
        .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: 30px;
        }



            body {
                 /*margin-top: 80px;*/
            }
        h1{
            font-size: 36px;
        }
        table.tablesorter tfoot tr th {
            background-color: #aa0001;
            border: 1px solid #FFF;
            font-size: 8pt;
            padding: 4px;
            color: white;
        }

        .tablesorter-header-inner,table.tablesorter thead tr th,.tablesorter-filter {
            color: #fff;
            background-color: #aa0001; 
            border-color: #e06a70;

        }
        table.tablesorter thead tr th{
            height: 40px;
        }

        .tablesorter-blue .headerSortUp, .tablesorter-blue .tablesorter-headerSortUp, .tablesorter-blue .tablesorter-headerAsc {
            background-color: #aa0001;}
        .tablesorter-blue .headerSortDown, .tablesorter-blue .tablesorter-headerSortDown, .tablesorter-blue .tablesorter-headerDesc {
            background-color: #aa0001;}


        .tablesorter-blue .tablesorter-filter-row td {
            background: #aa0001;
        }

        .table-responsive {
            height: 400px !important;
            overflow: scroll;
        }

        input[type="search"]{
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        }

        .modal-lg-2 {
            width: 650px;
        }

        .btn-ericsson {
            color: #fff;
            background-color: #00569C;
            border-color: #3D59CA;
        }

        .huge {
            font-size: 20px;
            font-weight: bold;
        }
    </style>
    <script src="{{ asset('js/jquery.form.js') }}"></script>
    <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/tableExport.js') }}"></script>
    <script src="{{ asset('js/jquery.base64.js') }}"></script>
    <script src="{{ asset('js/jquery.numeric.js') }}"></script>
    <script>

            function myFunction(index , idelment) {
              // Declare variables
              var input, filter, table, tr, td, i, tmpstr;

              input = document.getElementById('id'+index+'id');
             //   index =index-1;
              filter = input.value.toUpperCase();
              table = document.getElementById("tableSitios");
              tr = table.getElementsByTagName("tr");

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

               td = tr[i].getElementsByTagName("td")[index];

                if (td) {
                    tmpstr = td.innerHTML.toUpperCase();
                  if (tmpstr.search(filter) > -1) {
                           tr[i].style.display = "";
                  } else {
                      if(i>1)
                      {
                          tr[i].style.display = "none";
                      }

                  }
                }
              }
            }

        $(document).ready(function(){

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

                }
            });

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

            var starYear = 2019;
            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] = "January";
            month[1] = "February";
            month[2] = "March";
            month[3] = "April";
            month[4] = "May";
            month[5] = "June";
            month[6] = "July";
            month[7] = "August";
            month[8] = "September";
            month[9] = "October";
            month[10] = "November";
            month[11] = "December";

            var n = month[d.getMonth()];
            var options = new Array();

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

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

            $("#ano").change(function(){

                var yearSelected = parseInt($(this).val());

                $('#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]
                        }));
                    }
                }
            });

            $("#cantidad").html(0);
            getReporte();

            $("#generar").click(function(){

                if($("#ano").val() == "" || $("#mes").val() == "") return false;

                $.isLoading({
                    text: "Loading"
                });

                $("#cantidad").html(0);
                getReporte();
            });
        });

        function getReporte() {
            $.isLoading("show");

            var data={};
            var fe = new Date();
            var inicio = $('#Filtros_fechaIni').val();
            var fin = $('#Filtros_fechaFin').val();
            var pais = $("#country").val();

            if (pais!="") { data['country'] = pais; }
            if (inicio!="") { data['fechaInicio'] = inicio; }
            if (fin!="") { data['fechaFin'] = fin; }

            //console.log(data);

            $("#reporte1").empty();
            $(".pager").hide();

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

                var monitor = data.monitor;
                var chart1 = data.chart1;

                if(monitor == 0){
                    $("#reporte1").empty();
                    $("#chart1").empty();
                    $("#chart2").empty();
                    $(".pager").hide();
                    $("#reporte1").append('<div class="alert alert-warning" role="alert" style="text-align: center;">NO DATA FOUND</div>');
                    $.isLoading("hide");
                    return false;
                }

                if(chart1.length == 0){
                        $('#chart1').empty();
                        $('#chart2').empty();
                    }else{
                        createColumnChart('chart1', 'Deliverables by Country', chart1);

                        var total = getTotal(chart1, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], 0);
                        total.shift();
                        var header = Object.keys(chart1[0]);

                        var AuxArray = new Array();

                      //  for(var i=1;i<header.length;i++){
                           // console.log(parseInt(total[i-1]));
                        AuxArray.push({'estado': header[1], 'Deliverables': parseInt(total[1 - 1])});
                        AuxArray.push({'estado': header[2], 'Deliverables': parseInt(total[2 - 1])});
                        AuxArray.push({'estado': header[3], 'Deliverables': parseInt(total[3 - 1])});
                        AuxArray.push({'estado': header[4], 'Deliverables': parseInt(total[4 - 1])});
                        AuxArray.push({'estado': header[5], 'Deliverables': parseInt(total[5 - 1])});
                        AuxArray.push({'estado': header[6], 'Deliverables': parseInt(total[6 - 1])});
                        AuxArray.push({'estado': header[7], 'Deliverables': parseInt(total[7 - 1])});
                        AuxArray.push({'estado': header[8], 'Deliverables': parseInt(total[8 - 1])});
                        AuxArray.push({'estado': header[9], 'Deliverables': parseInt(total[9 - 1])});
                        AuxArray.push({'estado': header[10], 'Deliverables': parseInt(total[10 - 1])});
                        AuxArray.push({'estado': header[11], 'Deliverables': parseInt(total[11 - 1])});
                        AuxArray.push({'estado': header[12], 'Deliverables': parseInt(total[12 - 1])});
                        AuxArray.push({'estado': header[13], 'Deliverables': parseInt(total[13 - 1])});
                     //   }

                        createColumnChart('chart2', 'Deliverables', AuxArray);

                         console.log(total);
                    }

                $("#cantidad").html(monitor.length);
                $("#reporte1").html(createTable(monitor));
                $('.double-scroll').doubleScroll();
                $(".pager").show();

                $.isLoading("hide");

                var pagerOptions = {
                        // target the pager markup - see the HTML block below
                        container: $(".pager"),
                        // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
                        output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
                        // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
                        // table row set to a height to compensate; default is false
                        fixedHeight: false,
                        // remove rows from the table to speed up the sort of large tables.
                        // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
                        removeRows: true,
                        // go to page selector - select dropdown that sets the current page
                        cssGoto: '.gotoPage'
                    };
                    // initial sort set using sortList option
                    $(".table1").tablesorter({
                        theme: 'blue',
                        // sort on the first column and second column in ascending order
                        widgets: ["zebra", "filter"],
                        widgetOptions: {
                            // extra css class applied to the table row containing the filters & the inputs within that row
                            filter_cssFilter: '',
                            // If there are child rows in the table (rows with class name from "cssChildRow" option)
                            // and this option is true and a match is found anywhere in the child row, then it will make that row
                            // visible; default is false
                            filter_childRows: false,
                            // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
                            // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
                            filter_hideFilters: false,
                            // Set this option to false to make the searches case sensitive
                            filter_ignoreCase: true,
                            // jQuery selector string of an element used to reset the filters
                            filter_reset: '.reset',
                            // Use the $.tablesorter.storage utility to save the most recent filters
                            filter_saveFilters: true
                        }
                    }).tablesorterPager(pagerOptions);

            })

            $.isLoading("hide");
        }

        function createArrayToChart(chart,text) {
            var header = Object.keys(chart[0]);
            var x = new Array();
            var y = new Array();


            for(var i=0;i<chart.length;i++){
                x.push(chart[i][header[0]]);
            }

            for(var j= 1;j<header.length;j++){
                y.push({name:"",data:[]});
            }

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

                for(var j= 1;j<header.length;j++){

                    if(i == 0){
                        y[j-1].name = header[j];
                    }
                   y[j-1].data.push(parseInt(chart[i][header[j]]));
                }

            }

            return new Array(x,y);
        }

        function createArrayToPieChart(chart) {
            if(chart.length == 0) return false;
            var auxArray = new Array();
            var header = Object.keys(chart[0]);
            for(var i=0;i<chart.length;i++){

                auxArray.push({'name':chart[i][header[0]],y:parseFloat(chart[i][header[1]])});
            }

            return auxArray;
        }

        function createColumnChart(renderTo,title,chart) {
            var data = createArrayToChart(chart);

            var segundaGraficaOpt = {
                chart: {
                    type: 'column',
                    renderTo: renderTo,
                },

                title: {
                    text: title
                },

                xAxis: {
                    categories: data[0],
                    crosshair: true,
                    labels: {
                        rotation: -45,
                        style:{
                            fontSize: '8px'
                        }
                    },
                    overflow: 'justify'
                },

                yAxis: {
                    title: {
                        text: ''
                    },
                    plotLines:[]
                },

                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.0f}</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },

                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0,
                        depth: 40,
                        dataLabels: {
                            enabled: true
                        }
                    }
                },

                series: data[1]
            };

            new Highcharts.Chart(segundaGraficaOpt)
        }
        function createPieChart(renderTo,title,chart) {
            var data = createArrayToPieChart(chart);
            var pie = {
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie',
                        renderTo: renderTo
                    },
                    title: {
                        text: title
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.y:.0f}</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }

                            },
                            showInLegend: true
                        }
                    },
                    series: [{
                        name: 'Sites',
                        colorByPoint: true,
                        data: data
                    }]
                };
            new Highcharts.Chart(pie);
        }

         function createTable(monitor){
            var header = Object.keys(monitor[0]);

            var table = '<table  class="table table-bordered table-hover table-striped table-responsive table1 tablesorter table-condensed hasFilters" id="tableSitios"> <thead>' + '<tr class="btn-claro">';
            for (var j = 0; j < header.length; j++) {
                table += "<th class='text-center'>" + header[j] + "</th>"
            }

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

            var flagnumber = 0;
            for (var j = 0; j < header.length; j++) {
                
                var tmpid = 'id' + flagnumber + 'id';
                table += "<td style='vertical-align:middle; height: 52px;' class='text-center'>\n\
                        <input  class='form-control' style=font-size:9px type=input id=" + tmpid + " onkeyup=myFunction(" + flagnumber + "," + "id" + flagnumber + "id" + ")></td>";
                flagnumber += 1;
            }

            table += "</tr></thead>";

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

                table += "<tr id='"+ monitor[i][header[1]] +"' style='font-weight: normal;'>";

                for (var j = 0; j < header.length; j++) {
                    table += "<td style='text-align:center;'>"+monitor[i][header[j]]+"</td>";
                }

                table += "</tr>";

            }
            table += "</table>";

            return table;
        }

        function getTotal(valor,key,tipo) {
            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;
                    }

                    if (tipo==1){
                        total[key[j]] +=  parseFloat(valor[i][header[key[j]]]);
                        if (i == (valor.length-1)) total[key[j]]=parseFloat(total[key[j]]).toPrecision(3);
                    }
                    else
                            total[key[j]] +=  parseInt(valor[i][header[key[j]]]);

                }

            }
            return total;
        }

    </script>

    <div class="container-fluid">
        <div class="row">
            <div style="text-align: center" class="col-lg-2">
                <img id="logo" src="{{ asset('images/logoEricsson.png')  }}"  width="220" height="72">
            </div>             
            <div class="col-lg-8 col-md-12">
                <h1 class="text-center text-primary">
                    <i class="fa fa-file-text-o"></i> DELIVERABLES ERICSSON - DIGICEL
                </h1>
            </div>
            <div style="text-align: center" class="col-lg-2">
                <img id="logo" src="{{ asset('images/logoDigicel.png')  }}"  width="176" height="57">
            </div> 
        </div>
        <div class="row">
            <div class="col-lg-3" id="parametros">
                <select class="form-control" id="country">
                   <option value="">{{'monitores.pais' | trans}}</option>
                    {% for country in countries %}
                        <option value="{{country.country}}">{{ country.country }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-lg-3" id='div_fechaFin'>
                <input placeholder="{{'monitor.etiqueta.fechaI' | trans}}" class="form-control" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="Filtros_fechaIni" name="Filtros_fechaIni" value="">
            </div>

            <div class="col-lg-3" id='div_fechaIni'>
                <input placeholder="{{'monitor.etiqueta.fechaF' | trans}}" class="form-control" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="Filtros_fechaFin" name="Filtros_fechaFin" value="">
            </div>
            <div class="col-lg-3" >
                <button class="btn btn-claro col-lg-5" id="generar">
                    {{'monitoriii.generate' | trans}}
                </button>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6" id="chart1"></div>
            <div class="col-lg-6" id="chart2"></div>
        </div>
        <div class="row">
            <div class="col-lg-3 top-uno">
                {{"Cantidad" | trans}}: <span id="cantidad" class="bold"></span>
            </div>
            <div class="btn-group pull-right" role="group" aria-label="..." style="margin-right: 50px">
                <a href="#" onclick="$('#tableSitios').tableExport({type: 'excel', ignoreRow: [1]});">
                    <img src={{ asset("images/xls.png")}} width="24px"> XLS</a>
            </div>
        </div>
        <div class="row double-scroll" id="reporte1"></div>
        <div id="pager" class="pager" style="display: none;text-align: center; ">
            <form>
                <img src="{{asset('tablesorter-master/addons/pager/icons/first.png')}}" class="first"/>
                <img src="{{asset('tablesorter-master/addons/pager/icons/prev.png')}}" class="prev"/>
                <span class="pagedisplay"></span>
                <img src="{{asset('tablesorter-master/addons/pager/icons/next.png')}}" class="next"/>
                <img src="{{asset('tablesorter-master/addons/pager/icons/last.png')}}" class="last"/>
                <select class="pagesize" title="Select page size">
                    <option selected="selected" value="1000">1000</option>
                    <option  value="500">500</option>
                    <option  value="100">100</option>
                </select>
            </form>
        </div>
    </div>

{% endblock %}